/* Full-width wrapper */
  .top-header-wrapper {
    background-color: var(--primary-color); /* Replace with your desired color */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw; /* Centers the element */
    padding: 10px 0; /* Adjust padding as needed */
    box-sizing: border-box;
}
.top-header-wrapper span{
  color: var(--white-color);
}

/* Ensure container does not add additional margin/padding */
.container {
    padding: 0 15px; /* Adjust padding as needed */
}

/* Remove default margin from paragraph */
.top-header p {
    margin: 0;
}

/* Spacing between icons */
.top-header-meta i {
    margin-right: 15px;
}

.top-header-meta i:last-child {
    margin-right: 0;
}

.header-area .navbar {
    background-color: #ffffff !important; /* White background */
    border-bottom: 1px solid #ddd; /* Optional: border for visual separation */
    width: 100%;
    left: 0;
    z-index: 1000; /* Ensure navbar is above other content */
    transition: top 0.3s; /* Smooth transition */
}

.header-area .navbar.sticky {
    position: fixed;
    top: 0;
}

/* Optional: Adjust text color for better visibility */
.navbar .nav-link {
    color: #333333; /* Darker text color for contrast */
}

.navbar-toggler {
    border: none; /* Remove the border around the button */
}

.navbar-toggler-icon {
    background-image: none; /* Remove the default background icon */
}

.navbar-toggler-icon::before {
    content: '\f0c9'; /* Add a custom icon if needed (FontAwesome bars icon as an example) */
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    font-size: 1.5rem;
}

/* Optional: Adjust the background color of the dropdown menu */
.dropdown-menu {
    background-color: #ffffff; /* Ensure dropdown background matches */
}

/* Optional: Adjust the color of dropdown items */
.dropdown-item {
    color: #333333; /* Darker text color for contrast */
}

/* Optional: Adjust the color of the navbar brand */
.navbar-brand {
    color: #333333; /* Darker text color for contrast */
}
.logo img{
    width: 4em;
}
/* Initial styles for the header */
.header-area {
    position: relative;
    z-index: 1020; /* Ensures it stays above other content */
}

/* Styles for fixed navbar */
.fixed-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /* Ensures it stays above other content */
    transition: top 0.3s; /* Smooth transition for the top property */
}

/* Hide the top-header-wrapper */
.hidden {
    display: none;
}

/* Hide text on small screens */
@media (max-width: 767.98px) {
    .top-header p {
        display: none; /* Hide text */
    }

    .top-header-meta {
        width: 100%; /* Make the meta content take full width on small screens */
        justify-content: flex-end; /* Align the icons to the right */
        margin-top: 0.5em; /* Add some spacing above */
    }

    .top-header-meta .top-header-icon {
        margin-left: 1em; /* Adjust spacing between icons */
    }
}

/* Maintain left and right alignment */
.top-header {
    flex-wrap: wrap; /* Ensure elements wrap on small screens */
}

.top-header-meta {
    display: flex;
    justify-content: flex-end;
    margin-left: auto; /* Push meta content to the right */
}

/* Hero Section Styles */
.hero {
    position: relative;
    height: 100vh;
    background-image: url('../images/hero-image.jpg'); /* Replace with your image URL */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 4em;
    margin: 0;
}

.hero p {
    font-size: 1.5em;
}

.btn {
    margin-top: 1em;
    padding: 0.5em 1em;
    font-size: 1em;
    color: #fff;
    background-color:var(--primary-color); /* Updated background color */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: var(--primary-color); /* Darker shade for hover effect */
}

.tenor-gif-embed{
width: 5em;
}



/*====================| About | ======================*/
.about-us-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    gap: 2em;
}

@media (max-width: 768px) {  /* Adjust this breakpoint as needed */
    .about-us-content {
        grid-template-columns: 1fr; /* Stacks the content vertically */
    }

    .about-us-info {
        text-align: center; /* Optional: Center align text on mobile */
    }

    .about-us-image {
        height: 200px; /* Optional: Set a fixed height for the image on mobile */
        background-size: cover; /* Ensure the image covers the area */
        background-position: center; /* Center the image */
    }
}

.about .about-us-content .about-us-info{
text-align: left;
}
.about .about-us-content .about-us-image {
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
                        }
                        
/*==========================BackgroundImage=================*/
.background-image{
    position: relative;
    height: 100dvh;
    background-image: url('../images/about-us.jpg');  
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

/*===============================| Why Choose us |======================*/
.why-choose-us .why-choose-us-content {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20em,1fr));
}
.why-choose-us .why-choose-us-content .why-choose-us-content-image img{
    width: 100%;
    height: 100%;
}
.why-choose-us .section-title span{
    color: var(--primary-color);
}
.why-choose-us-content-info{
    background-color: var(--gray-color);
    padding: 2em;
}
.why-choose-us-content ul{
    
    float: left;
    text-align: left;
}
.why-choose-us-content ul li a img{
    position: relative;
    top:1.5em;
    left: -2em;
    width: 2em;
}
.why-choose-us-content ul{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
    gap: 1em;
}

/*=====================================|Testimonails |==============================*/
.testimonials-wrapper {
    position: relative;
    width: 100%;
}

.testimonials-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
}

.testimonials-content.active {
    opacity: 1;
}

.testimonials-content-image img {
    width: 100%;
   
}

.testimonials-content-info {
    padding: 2em;
}
.testimonails .section-heading p{
    position: relative;
    top: 2em;
     
}
.testimonails .section-heading p,.testimonails .section-heading .section-title{  
    text-align:right;
}
.testimonials-content-info p,
.testimonials-content-info .client {
    font-style: italic;
    color: var(--black);
    font-size: 1.5rem;
}

.client {
    font-weight: bold;
}

.client .client-image img {
    border-radius: 50%;
    width: 30%;
   
}


.footer-background-image{
    position: relative;
    height: 80vh;
    background-image: url('../images/g.jpg'); /* Replace with your image URL */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    overflow: hidden;
    margin-top:30em;
}

@media(max-width:800px){
    .footer-background-image{
        margin-top:50em;
    } 
}

/*=================| Contact us |===================*/
.contact-us-content{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20em,1fr));
    gap: 2em;
}
form {
    text-align: left;
}
@media(max-width:800px){
    .map-responsive {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio (use 75% for 4:3 aspect ratio) */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #f7f7f7;
    }
    
    .map-responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }   
}



/*========================| Footer |=====================*/
.footer{
    background-color: var( --dark-color);
    padding: 2em;
    color: var(--white-color);
}
.logo img{
    width: 4em;
}
.footer-content{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20em,1fr));
    gap: 2em;
    }
    .footer-content .about-us,.links,.social-links,.contact-links{
        text-align:left;
    }
    .about-us a{
        position: relative;
        top: -1em;
    }
    .links ul li{
        padding: 1em;
    }
    .links ul li a{
         text-decoration: none;
    }
    .links ul li a{
        color: var(--white-color);
    }
    .social-links ul li{
        padding:1em;
    }
    .social-links ul .fa{
        height: 40px;
        width: 40px;
       
       
        
       color: #fff;
        position: relative;
        border-radius: 50%;
        padding: 1em;
        background-color: var(--primary-color);
    }
    
    @media(max-width:800px){
        .footer-content{
            text-align: center;
        }
         .social-links ul {
            display: flex;
         }
    }
    


    /*=============================| About us  Page |=======================================*/
    .about-us-hero {
        position: relative;
        height:50vh;
        background-image: url('../images/hero1.jpg'); /* Replace with your image URL */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-align: center;
        overflow: hidden;
    }
    /*-----------------Mission-----------------*/
    .our-mission-content .our-mission-image img{
        width: 100%;
        height: 100%;
    }
    .our-mission-content{
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(20em,1fr));
        gap: 2em;
    }
    .our-mission .section-heading{
        text-align: right !important;
    }
    .our-mission-info{
        text-align:left;
    }
    .our-mission .footer-background-image{
        margin-top: 5em;
    }


        /*=============================| Contact us  Page |=======================================*/
        .contact-us-hero {
            position: relative;
            height:50vh;
            background-image: url('../images/hero.jpg'); /* Replace with your image URL */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-align: center;
            overflow: hidden;
        }