/*  ==========================================================================
    Table of Contets
    ==========================================================================
    
    1.0 Common Styles
    2.0 Header Section
    3.0 About Section
		3.1 About Style 2
		3.2 About Style 3
		3.3 About Style 4
    4.0 Service Section
		4.1 Service Style 2
		4.2 Service Style 3
    5.0 Projects Section
		5.1 Project Style 2
    6.0 Projects Single Section
    7.0 Counter Section
    8.0 Team Section
    9.0 Testimonial Section
    10.0 CTA Section
    11.0 Hero Section
		11.1 Video Hero
    12.0 Page Header Section
    13.0 404 Error Section
    14.0 Contact Section
		14.1 Form Style
		14.2 Google Map
    15.0 Blog Section
		15.1 Pagination
		15.2 Sidebar Style
		15.3 Search Form Style
		15.4 Thumbnails Post Style
		15.5 Tag Cloud Style
    16.0 Blog Single Section
		16.1 Blog Quote
		16.2 Post Tags Style
		16.3 Author Box Style
		16.4 Post Navigation
		16.5 Comments Style
    17.0 Sponsor Section
    18.0 Widget Section
	19.0 Footer Section
	20.0 Scroll To Top
    
    ==========================================================================
    Arkit By DynamicLayers
    ========================================================================== */

	@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro|Poppins:600,700|Work+Sans:600&display=swap');
	
/*  ==========================================================================
    Common Styles
    ========================================================================== */
*{
	padding: 0;
	margin: 0;
}
body{
    background-color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #717171;
    font-weight: 400;
    letter-spacing: 0.2px;
    position: relative;
    overflow-x: hidden;
}

::selection {
    background-color: orange;
    color: #fff
}

-webkit-::selection {
    background-color: orange;
    color: #fff
}

::-moz-selection {
    background-color: orange;
    color: #fff
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing:antialiased;
	color: #263a4f;
}
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5{
    color: #fff;
}
.bg-dark p,
.bg-dark span{
    color: #999;
}
h1{
    font-size: 45px;
    font-weight: 400;
    line-height: 55px;
    margin: 0 0 10px;
    color: #263a4f;
}
h2{
    font-size: 32px;
    line-height: 42px;
    color: #263a4f;
    margin: 0 0 10px;
    font-weight: 600;
    letter-spacing: -1px;
}
h3,h4{
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.7;
    color: #263a4f;
    letter-spacing: -0.5px;
}
h3{
    font-size: 20px;
}
h4{
    font-size: 16px;
}
h5,h6{
    font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
    max-width: 100%;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p, li, a, span{}
p{text-align: left !important;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
}
a, a:hover{
    text-decoration: none;
}
a:focus{
    outline: 0;
    text-decoration: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
   color: #ddd !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
   color: #ddd !important;  
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #ddd !important;  
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{  
   color: #ddd !important;  
}
button{
    border: none;
	background: none;
}
/* Helper Class */
.padding{
    padding: 100px 0;
}
.no-padding{
    padding: 0;
}
.padding-15{padding: 15px;}
.padding-20{padding: 20px;}
.box-padding{padding: 0 50px;}

.bg-white{ background-color: #fff; }
.bg-grey{ background-color: #f9fafa;}
.bg-dark{ background-color: #242323!important;}
.bd-top{ border-top: 1px solid #e5e5e5;}
.bd-bottom{ border-bottom: 1px solid #e5e5e5;}

.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.ml-15{ margin-left: 15px; }
.ml-20{ margin-left: 20px; }
.ml-25{ margin-left: 25px; }
.ml-30{ margin-left: 30px; }
.ml-35{ margin-left: 35px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-50{ margin-top: 50px; }
.fz-28{ font-size: 28px; }
.fz-24{ font-size: 24px; }
.fz-22{ font-size: 22px; }
.fz-20{ font-size: 20px; }
.fz-18{ font-size: 18px; }
.fz-16{ font-size: 16px; }
.text-black{
    color: #333;
}
.text-white{
    color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
    float: right;
}
.fl-left{
    float: left;
}
.display-table{
    width: 100%;
    height: 100%;
    display: table;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}

.overlay{
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
/* Preloader Styles */
.loaded .site-preloader-wrap {
    opacity: 0;
    visibility: hidden;
}
.site-preloader-wrap {
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    background: #fff;
    top: 0;left: 0
}

.site-preloader-wrap .spinner {
    background-color: orange;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}

.spinner {
  width: 40px;
  height: 40px;

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Button Style */
.btn_group{}
.btn_group a{
    margin: 5px;
}
.btn_group_left a{
    margin-right: 15px;
    margin-bottom: 15px;
}
.default-btn{
    background-color: orange;
    text-transform: uppercase;
    font-family: "Work Sans",sans-serif;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    line-height: 50px;
    font-weight: 600;
    display: inline-block;
    letter-spacing: 0.5px;
    padding: 0 30px;
    -webkit-box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
    box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
}
.default-btn:hover{
    background-color: #263a4f;
    color: #fff;
}
/*section-heading*/
.section-heading h2{
    font-size: 32px;
    display: block;
}
.section-heading span{
    display: inline-block;
/*    text-transform: uppercase;*/
    font-size: 12px;
    color: #263a4f;
    font-weight: 600;
    letter-spacing: 0;
    font-family: "Work Sans",sans-serif;
    position: relative;
    margin-bottom: 10px;
    z-index: 1;
}

/*Section Heading For Dark Background*/
.bg-dark .section-heading span{
    color: #ddd;
}
.bg-dark .section-heading h2{
    color: #fff;
}
/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
/* ==========================================================================
   Header Section
   ========================================================================== */
.header-section{
    background-color: #fff;
    width: 100%;
    height: 86px;
    z-index: 99;
    position: fixed;
    left: 0;
    top: 0;
    padding: 0;
}

.navbar-fixed-top.header-section{
    background-color: #fff;
    -moz-box-shadow: 0 2px 5px rgba(16,16,16,.08);
    -webkit-box-shadow: 0 2px 5px rgba(16,16,16,.08);
    box-shadow: 0 2px 5px rgba(16,16,16,.08);
    height: 85px;
    border-bottom: 0;
    padding: 10px;
}

.navbar-fixed-top ul.nav > li > a{
    color: #263a4f;
}
.navbar-fixed-top ul.nav > li > a:hover,
.navbar-fixed-top ul.nav > li > a:focus,
.navbar-fixed-top ul.nav > li.active > a{
    color: #263a4f;
}
.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section{
    transition: all 0.3s ease-in-out;
}
.navbar{
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
    padding: 0;
}
.navbar-header {
    padding: 17px 0;
}
.navbar-header .brand{
    font-size: 25px;
    color: #333;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
    font-weight: 600;
	margin-left: 13px;
}
.navbar-header .nav-btn{
    padding: 8px;
    border-radius: 1px;
}
.navbar-header .nav-btn .icon-bar{
    background-color: #fff;
    width: 18px;
}
.navbar-fixed-top .navbar-header .nav-btn .icon-bar{
    background-color: #777;
}
.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus{
    opacity: 0.8;
}

.main-nav, .secondary-nav {
    background-color: #f4f4f4;
    overflow: hidden;
    padding-top: 10px;
  padding-bottom: 30px;
    z-index: 7;
}

.main-nav ul, .secondary-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Align items to the end for larger screens */
}

.main-nav a, .secondary-nav a {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    text-transform: capitalize;
    border: 1px solid teal;
    color: #787878;
    font-family: sans-serif;
    padding: 0 20px;
    text-align: center;
    /* letter-spacing: 0.5px; */
    /* margin-right: 30px; */
    border-radius: 40px;
    /* margin-top: 20px; */
    width: 150px;
    font-size: 11px;
    font-weight: 600;
}


.secondary-nav a.active {
    color:white; /* Change this color to your desired active text color */
}
   /* Your CSS goes here */
   #backToTop {
           
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    bottom: 20px; /* 20px from the bottom */
    right: 20px; /* 20px from the right */
    background-color:#f2a409; /* Background color */
    color:#ffffff; /* Text color */
    border: none; /* No border */
 
    padding: 2px 13px; /* Some padding */
    cursor: pointer; /* Pointer cursor on hover */
    z-index: 1000; /* Ensure it stays on top */
    font-size: 20px; /* Icon size */
    text-align: center; /* Center icon */
}

#backToTop:hover {
    background-color: teal; /* Darker background on hover */
}
#backToTop i{
    margin-top: 10px;
}

/* Optional: Add some transition for smooth effect */
#backToTop {
    transition: background-color 0.3s;
}
/* Sticky Secondary Navigation */
.secondary-nav {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 85px;
    width: 100%;
    z-index: 8;
}

.secondary-nav a {
    padding: 10px 14px;
}
.copyright {
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.copyright a:hover{
    color: teal !important;
}
@media screen and (max-width: 576px) {
    .copyright {
    padding-top: 30px;
    padding-bottom: 10px;
    display: ruby;
   
} 

.main-nav a, .secondary-nav a {
    margin-top: 20px;
}
.prev3 {
margin-left: -0px !important;
}.prev2 {
margin-left: -0px !important;
}
.next2{
margin-right: 20px !important;
}
.next3{
margin-right: 30px !important;
}
}

/* Responsive Styles */
@media (max-width: 768px) {
    .main-nav ul, .secondary-nav ul {
        display: ruby;
        grid-template-columns: repeat(3, 1fr); /* Grid of 2 items per row */
        width: 100%
    }
    /* .secondary-nav a {
        width: 125px !important;
        margin: 10px 5px !important;
        font-size: 12px;
    } */
    
    .main-nav, .secondary-nav {
        height: auto; /* Allow height to adjust based on content */
        padding-top: 10px;
      
    }

    .main-nav a, .secondary-nav a {
        padding: 10px 20px;
        font-size: 14px;  width: 200px;
        margin-top: 20px;
    }.custom-nav {
        position: relative;
        top: -99px;
        z-index: 999;
        margin-top: 10px;
    }.secondary-nav a {
       
        margin: 10px 5px !important;
    }
}


@media (max-width: 480px) {
    .main-nav a, .secondary-nav a {
        padding: 8px 16px;
        font-size: 12px; 
        width: 180px;/* Adjust font size for smaller screens */
    }

    .main-nav ul, .secondary-nav ul {
        justify-content: flex-start; /* Align items to the start for very small screens */
    }.main-nav ul, .secondary-nav ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Grid of 2 items per row */
        width: 100%; /* Ensure full width */
    }
}


/*Dropdown Style
==================*/
#mainmenu li ul{
    margin-top: 5px;
    background-color: teal;

    height: auto;
    position: absolute;
    left: 10px;
 
    visibility: hidden;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 999;
}
#mainmenu li:hover > ul{
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    top: 100%;
}
#mainmenu li ul li{
    border-bottom: 1px solid #e5e5e5;
    display: block;
    position: relative;
    z-index: 9;
    padding: 0; color: white;
}
#mainmenu li ul li:last-child{
    border: none;
}
#mainmenu li ul li a{

    color: white;
    font-family: 'Work Sans', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    letter-spacing: 0.3px !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 80px;




    font-family: 'Source Sans Pro', sans-serif;
    line-height: 45px;
    display: block;
    padding: 0 15px;
 
    letter-spacing: -0.2px;
  
    -webkit-transition: color 0.3s ease 0s, padding 0.3s ease 0s;
    transition: color 0.3s ease 0s, padding 0.3s ease 0s;
}

#mainmenu li > ul > li:hover a{
    background-color:  rgb(230, 151, 6);;
    color:white;
}
#mainmenu li > ul ul{
    background-color: #fff;
    left: 200px;
}
#mainmenu li > ul li:hover > ul li a{
    color: #777;
}
#mainmenu li ul li:hover > ul{
    top: 0;
    opacity: 1;
    visibility: visible;
}
#mainmenu li > ul li:hover > ul li > a:hover{
    background-color: transparent;
    color: #fff;
}
#mainmenu li ul li li a:hover{
    color: #ffca3f !important;
}
/* Nav Menu */
#navbar{
    z-index: 999;
    padding: 0 15px;
}
ul.nav{}
ul.nav > li{
    position: relative;
}
ul.nav > li > a{
    color: #263a4f;
    font-family: 'Work Sans', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 80px;
    z-index: 1;
}

ul.nav li.phone{
    font-size: 14px;
    font-family: "Poppins",sans-serif;
    color: #263a4f;
    font-weight: 600;
    line-height: 80px;
    padding-left: 50px;
}
ul.nav li.phone i{
    color:orange;
    margin-right: 5px;
}

ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li > a.active{
    background: none;
    color:orange;
    opacity: 1;
}
.menu-btn{
    margin-left: 10px;
    margin-top: 10px;
}

/*Mobile Menu */
.slicknav_menu {
    background: none;
    padding: 4px 0;
    display:none;
    z-index: 999;
}
.slicknav_nav {
    background-color: #fff;
    font-size: 16px;
    /* padding: 20px 15px; */
}
.js .slicknav_menu {
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.slicknav_btn{
    background-color: transparent;
    margin: 15px 10px 27px;
}
.slicknav_menu .slicknav_icon-bar {
    width: 25px;
    height: 4px;
 
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 0 rgba(0,0,0,.5);
    box-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row, 
.slicknav_nav a,
.slicknav_nav a:hover{
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.slicknav_nav .slicknav_row, 
.slicknav_nav a {
    padding: 10px 15px;
    margin: 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.slicknav_nav .slicknav_arrow {
    float: right;
}
.slicknav_nav a .caret{
    display: none;
}
.slicknav_nav ul{
    margin: 0;
}
.slicknav_nav ul li a{
    padding-left: 30px;
    font-size: 14px;
    color: #444;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover{
    background-color: transparent;
    color: #333;
}


@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');



.cd__intro {
    padding: 60px 30px;
    margin-bottom: 15px;
    flex-direction: column;

}

.cd__intro,
.cd__credit {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #333;
    line-height: 1.5;
    text-align: center;
}

.cd__intro h1 {
    font-size: 18pt;
    padding-bottom: 15px;

}

.cd__intro p {
    font-size: 14px;
}

.cd__action {
    text-align: center;
    display: block;
    margin-top: 20px;
}

.cd__action a.cd__btn {
    text-decoration: none;
    color: #666;
    border: 2px solid #666;
    padding: 10px 15px;
    display: inline-block;
    margin-left: 5px;
}

.cd__action a.cd__btn:hover {
    background: #666;
    color: #fff;
    transition: .3s;
    -webkit-transition: .3s;
}

.cd__action .cd__btn:before {
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 10px;
}

.down:before {
    content: "\f019"
}

.back:before {
    content: "\f112"
}

.cd__credit {
    padding: 12px;
    font-size: 9pt;
    margin-top: 40px;

}

.cd__credit span:before {
    font-family: FontAwesome;
    color: #e41b17;
    content: "\f004";


}

.cd__credit a {
    color: #333;
    text-decoration: none;
}

.cd__credit a:hover {
    color: #1DBF73;
}

.cd__credit a:hover:after {
    font-family: FontAwesome;
    content: "\f08e";
    font-size: 9pt;
    position: absolute;
    margin: 3px;
}

.cd__main {

    padding: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}

.cd__main {
    display: flex;
    width: 100%;
}

@media only screen and (min-width: 1360px) {
    .cd__main {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding: 24px;
    }
}

@import url("https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Poppins&display=swap");



.cd__main {
    display: block !important;

    min-height: 450px;
    height: 14vh;
}

.container {
    width: 100%;
    height: 100%;
}

.card {
    background-color: transparent !important;
    width: 381px !important;

    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 30px 0 0 0;
    transition: transform 400ms;
    opacity: 0.5;
    box-shadow: none;
}

.quote-icon {
    position: absolute;
    z-index: 0;
    opacity: 0.05;
    left: 3%;
    top: 0;
}

.avatar {
    /* object-fit: cover; */
    width: 60%;
    /* height: 120px; */
    /* border-radius: 150px; */
    border: 5px solid #f9fafe;
    /* box-shadow: 0 0 50px #ccc; */
    position: absolute;
    top: 0;
   
    transform: translate(-0px, 20px);
    z-index: 1;
}

.header {
    margin-top: 151px;
    text-align: center;
    z-index: 1;
}

.name {
    color: rgb(8, 158, 158);
    ;
    text-transform: capitalize;
    font-size: 12px;
    line-height: 2px;
    margin: 0;
}

.textFitted {
    padding: 0px 10px;
    font-size: 9px !important;
    color: #333 !important;
    font-weight: 100 !important;
}

.title {

    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    margin: 5px 0 0 0;
    padding: 0 5px;
    color: #7ccdc5;
}

.quote-container {
    margin: 0;
    height: 100%;
    z-index: 1;
    padding: 15px 30px 30px 30px;
    overflow: hidden;
}

.quote {
    width: 100%;
    height: 95%;

    font-size: 12px !important;

    color: #1e1e1e;
    margin: 0;
}

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: none !important;
    border-radius: .25rem;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 11px;
    color: white;
    /* text-transform: none !important; */
    letter-spacing: 0;
    /* font-variant: initial; */
    /* line-height: 1; */
}

.swiper-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.swiper-slide-active {
    z-index: 1;
}

.swiper-slide-active .card {

    opacity: 1;
    transform: scale(1.5);
}

.swiper {
    margin-left: auto;
    margin-right: auto;
}

.swiper-button-next {
    background: #169fa1;
    color: white;
    padding: 20px;
 font-weight: 600;
    font-size: 11px !important;
}
.container-fluid{
    padding: 0px 100px;
}
.swiper-button-prev {
    background: #169fa1;
    color: white;
    padding: 20px;

    font-size: 11px !important;
}

.swiper-button-next:focus,
.swiper-button-prev:focus {
    outline: none;
    background: rgb(230, 151, 6);
}

@media (max-height: 400px) {
    .header {
        margin-top: 131px;
        text-align: center;
        z-index: 1;
    }
    .textFitted {
        padding: 0px 30px;
        font-size: 9px !important;
        color: #333 !important;
        font-weight: 100 !important;
    }
    .name {
        font-size: 12px;
    }

    .title {
        font-size: 10px;
    }

    .quote-container {
        padding: 5px 20px 20px 20px;
    }

    .quote-icon {
        width: 75px;
        height: 75px;
    }

    .avatar {
     
        transform: translate(0px, -0px);
    } .container-fluid {
        padding: 0px 71px !important;
    }

}

@media (max-height:576px) {
    .cd__main {
        display: block !important;
   
        height: 0vh !important;
    }

    .container-fluid {
        padding: 0px 71px !important;
    }
    

  
}


.custom-icons {
    position: relative;
    top: -240px !important;
}

.next-faces {
    float: right;
}

.next-mulyavardhan {
    float: right;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 40%) !important;
    width: calc(var(--swiper-navigation-size) / 44* 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.custom-nav {
    position: relative;
    top: -265px;
    z-index: 999;

    margin-top: 10px;
}

.custom-nav button {
    background-color: #029699;
    border: none;
    color: white;
    padding: 10px 20px;
  
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 40px;
    height: 40px;
}

.custom-nav button:hover {
    background-color: rgb(230, 151, 6)
}

.custom-nav button i {
    pointer-events: none;
    /* Ensure the icon does not interfere with the button click */
}

.mulyavardhan-slider {
    text-align: center;

}

.mulyavardhan-details-info p {
    color: #65666d;

    font-size: 15px;
 
}


.mulyavardhan-details-info h1 {
    color: #029699;

}


.tabs-info {
    text-align: center;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.tabs-info a {
    border: 1px solid teal;
    border-radius: 50px;
    padding: 10px 30px 13px 30px;
    color: #333;
    font-size: 15px;
    text-transform: capitalize;
    margin-bottom: 15px;
    transition: background-color 0.3s, color 0.3s;
}

.tabs-info a:hover {
    background-color: #029699;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tabs-info {
      
        align-items: center;
    }

    .tabs-info a {
        width: 80%;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .tabs-info a {
        width: 46%;
    }
}


.details h1 {
    color: #029699;
    font-size: 15px;
    text-transform: capitalize;
}

.text img {

    height: 250px;
    width: 100%;
}

.details p {
    color: #65666d;
    margin-top: -15px;
    font-size: 15px;

    text-transform: capitalize;
}

.text h1 {
    text-transform: capitalize;
    font-size: 16px;
    line-height: 25px;
    color: rgb(8, 158, 158);
}



.faces h1 {
    color: #029699;
    margin-top: 20px;
    font-size: 15px;
    line-height: 25px;
}
.Copyright{
    color: #717171;
}
.Copyright:hover{
    color: rgb(230, 151, 6);
}
.faces img {
    width: 55%;
}

.faces p {
    text-align: left;
    text-align: justify;
}

.loop-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.loop-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.loop-slider-item {
    min-width: 33.3333%;
    box-sizing: border-box;
    padding: 0 10px;
}

.loop-slider-item img {
    width: 100%;


    border-radius: 10px;
}



.loop-slider-prev {
    left: 0px;
}

.loop-slider-next {
    right: 0px;
}


.loop-slider-item {
    flex: 1 0 33.3333% !important;
    /* Width for desktop view */
}

@media (max-width: 768px) {
    .loop-slider-wrapper {
        width: 100% !important;
    }

    .loop-slider-item {
        flex: 1 0 100% !important;
        /* Width for mobile view */
    } .container-fluid {
        padding: 0px 71px !important;
    }
}



     /* Add custom CSS for navigation icons */
     .focus-skill-prev,
     .focus-skill-next {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         font-size: 24px;
         color: #ffffff;
         z-index: 100;
         cursor: pointer;
         background: transparent;
         font-size: 15px;
         border-radius: 50%;
         background-color: rgb(8, 158, 158);
         padding: 10px 15px;
     }

     .focus-skill-prev {
         left: 10px;
     }

     .focus-skill-prev:hover {
         background-color: rgb(230, 151, 6);
     }

     .focus-skill-next:hover {
         background-color: rgb(8, 158, 158);
     }

     .focus-skill-next {
         right: 10px;
     }

     .legacy-details a {
         border-radius: 20px;
         color: rgb(8, 158, 158);
         position: relative;
         font-size: 15px;
         top: 20px;
         border: 1px solid rgb(8, 158, 158);
         padding: 10px 30px 13px 30px;
     }

     .legacy-details a:hover {
         background-color: rgb(8, 158, 158);
         color: white;
     }

     .loop-slider-item h1 {
         margin-top: 20px;
         font-size: 17px;
         line-height: 25px;
     }
     .secondary-nav {
        background-color: #f8f9fa; /* Adjust as needed */
        padding: 10px 0; /* Adjust padding as needed */
    }
    
    .second {
        display: flex;
        justify-content: center;
    }
    
    .nav-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        list-style-type: none;
        justify-content: center;
    }
    
    .nav-item {
        margin: 5px 5px; /* Adjust margins as needed */
    }
    
    .nav-link {
        text-decoration: none;
        color: #333; /* Adjust color as needed */
        font-size: 16px; /* Adjust font size as needed */
    }
  
    @media (min-width: 600px) {
        .nav-list {
            flex-wrap: wrap;
            justify-content: center;
        }   
    }  
       
    
    
    @media (min-width: 900px) {
        .nav-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
       
    }    .nav-link {
        text-decoration: none;
        color: #000000; /* Default link color */
        font-size: 16px; /* Adjust font size as needed */
        padding: 10px 15px; /* Add padding for better click area */
        transition: background-color 0.3s, color 0.3s; /* Smooth transition */
    }
    
    .nav-link:hover,
    .nav-link.active {
        background-color: teal; /* Background color on hover and active state */
      
    }
    
    /* Optional: Add a border or additional styling to the active link */
    .nav-link.active {
       color: rgb(0, 0, 0); /* Optional: rounded corners for the active link */
    }