/* General Styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;  /* This will hide any horizontal scroll if there's overflow */
    background-color: #ffffff; /* A softer neutral for the overall background (approx. 10%) */
    font-family: 'Outfit', sans-serif;}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.navbar {
    background-color: #114dbb !important;  /* Dominant color (60%) for the navbar and footer */
}

.navbar-nav{
padding-right: 1rem;
}

.navbar-nav .nav-link {
    font-size: 18px; /* Adjust the font size as needed */
    padding-right: 30px; /* Adjust the padding as needed */
    transition: color 0.3s ease; /* Add a 0.3s color transition on hover */
}

.navbar-nav li.nav-item {
    padding-right: 50px; /* Adjust the padding as needed */
}

.navbar-brand, .nav-link {
    color: #f5f3e8 !important; /* A softer neutral for contrast with the dominant color */
}

.nav-link:hover {
    color: #ffb22f !important; /* Secondary color (30%) on hover */
    cursor: pointer;
}

.navbar-brand img {
    max-width: 120px; /* Set the maximum width */
    height: auto; /* Maintain the aspect ratio */
    margin-left: 3rem;
  }

  @media (max-width: 576px) {
    .navbar-brand img {
        max-width: 120px !important;
    }
  }


/* Home Section Styles */
#home {
    /* max-height: 100vh; */
    overflow: hidden;  /* Prevents any child element from overflowing its boundaries */
    background-color: #114dbb;
    height: 95vh!important;
}

#home h1 {
    color: #ffffff; /* Accent: 10% */
    font-weight: 700;
    font-size: 2.5rem;
}




#home p {
    color: #ffffff; /* Accent: 10% */
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4rem;
    margin-top: 1.5rem;
    opacity: 70%;
}

/* Responsive Image Styling */
#home .home-img video {
    width: 75% !important;
    margin-left: 20%;
    border-radius: 15px;
    height: 100%; /* Adjusted this to 100% so it takes the full height of its container */
    object-fit: cover; /* This will ensure the image doesn't stretch */
    object-position: bottom; /* Ensures the bottom of the image aligns with the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Shadow effect on hover */
}

#home .assoc h2{
    color: #ffffff; /* Accent: 10% */
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3rem;
    margin-top: 1.5rem;
    opacity: 70%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 20px;
}

#home .assoc h2::before,
.assoc h2::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 340px; /* Adjust width based on the h2 padding and desired length */
    height: 2px; /* Height of the line */
    background-color: #ffffff; /* Color of the line */
    transform: translateY(-50%);
    opacity: 50%;

}

#home .assoc h2::before {
    left: -150%;
}

#home .assoc h2::after {
    right: -150%;
}

.associmg {
    margin-top: 10px;
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically, if needed */
}

#home .associmg img{
    width: 30%;
    opacity: 70%;
}


@media (max-width: 992px) {



    #home img {
        max-height: 50vh;
        width: 100%; /* Adjusted to 100% to ensure the image scales properly on smaller screens */
    }
}

@media (max-width: 768px) {

    #home h1{
        font-size: 1.6rem;
    }

    #home p{
        font-size: 1.1rem;
    }

    #home {
        margin-bottom: -20px;
    }

    #home .home-cont {
    padding-top: 80px !important;

    }
}

@media (max-width: 576px) {
    #home .home-cont {
        text-align: center;
        padding-left: 1rem !important;  /* Remove any padding */
        padding-right: 1rem !important;  /* Remove any padding */
        margin-top: 0px;
        padding-top: 0px !important;
    }


    #home {
        padding-top: 10% !important;
        background-position: 1% center; /* or use -5% center; */
        height: 65vh!important;
    }

    #home h1{
        font-size: 1.6rem;
        color: #f5f3e8
        
    }

    #home p{
        font-size: 1.2rem;
        color: #f5f3e8;
        text-align: center;
    }

    #home .home-img video {
        display: none;
    }

    .learn-more-btn{
        margin-top: 0% !important; 
        margin-bottom: 0% !important; 
    }

    .assoc{
        margin-top: -5% !important;
    }

    #home .associmg img{
        margin-top: 0.4rem;
        width: 60%;
    }
}
/* About Section */


#about{
    margin-top: 2%;
    margin-bottom: 8%;
}


#about h2{
    font-size: 2.3rem;
    font-weight: 700;
}

#about p{
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-align: justify;
}

#about .clientp{
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-align: center;
}
@media (max-width: 768px) {
    .accom-cont {
        text-align: center;
    }
}

@media (max-width: 576px) {

    #about{
        margin-top: 8%;
    }

    #about h2{
        text-align: center;
        font-size: 1.8rem;
    }

    #about p{
        padding-left: 1rem !important;  /* Remove any padding */
        padding-right: 1rem !important;  /* Remove any padding */
        text-align: justify;
    }

    .accom-cont h1,h4{
        text-align: center;
    }
    /* Optional: In case your button is a flex item or needs block level centering */
    .accom-cont a {
        display: block; /* Make the anchor tag display as block */
        margin: 0 auto; /* Apply automatic margin to anchor tag if needed */
    }

}


#client{
    margin-top: 8%;
    margin-bottom: 3%;
}

#client .clientc{
    margin-top: 30px;
}

#client h2{
    font-size: 2.3rem;
    font-weight: 700;
}

#client .client-count {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    background: -webkit-linear-gradient(to left, #114dbb, #26a0da); /* For WebKit browsers */
    background: linear-gradient(to left, #114dbb, #26a0da); /* Standard syntax */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* For WebKit browsers */
    color: transparent; /* Fallback: hide text if gradient isn't supported */
}


#client p{
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-align: justify;
}

#client .clientp{
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-align: center;
}

@media (max-width: 576px) {
    #client .accom-cont, .clientc{
        padding-left: 1rem !important;  /* Remove any padding */
        padding-right: 1rem !important;  /* Remove any padding */
    }
}



.products-btn {
    background-color: #ffb22f;  /* Secondary color */
    color: #000000;             /* Dominant color */
    border: none;
    padding: 10px 20px;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.3s ease; /* Smooth transition for the shadow */
    display: inline-block;
}

.products-btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */

}

@keyframes slide{
    from{
        transform: translate(0);
    }
    to{
        transform: translate(-100%);
    }
}

.logos{
    overflow: hidden;
    padding: 30px 0;
    white-space: nowrap;
    position: relative;
}

.logos::before,
.logos::after {
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    content: "";
}

.logos::before{
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255,0), white);
}

.logos::after{
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), white);
}

.logos:hover .logos-slide{
    animation-play-state: paused;
}

.logos-slide{
    display: inline-block;
    animation: 45s slide infinite linear;
}

.logos-slide img{
    height: 60px;
    margin: 0 40px;
}



/* Product Section */


#product{
    margin-top: 2%;
    background-color: #eceff4;
}

#product .product-cont{
    padding-top: 5rem;
    padding-bottom: 5rem;
}


#product h2{
    font-size: 2.3rem;
    font-weight: 700;
}

#product h5{
    font-size: 1.1rem;
}


#product p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-align: justify;
}


#product .product-list{
    margin-top: 30px;
}

#product .media{
    margin-bottom: 20px;
}

#product .media-body{
    margin-left: 20px;
}

#product .product-icon{
    width: 45px;
}


@media (max-width: 576px) {
    #product {
        padding-left: 1rem !important;  /* Remove any padding */
        padding-right: 1rem !important;  /* Remove any padding */
    }

    #product .product-cont{
        padding-top: 2rem;

    }

    #product .media-body h5{
        text-align: left;       
    }
}




/* Pricing Section Styles */
#pricing {
    background-color: #ffffff; /* Change as per your color scheme */
    padding: 3rem 0; /* Spacing above and below the pricing section */
}

#pricing .btn-group {
    margin-bottom: 2rem; /* Spacing below the toggle buttons */
}

#pricing .card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    border-radius: 15px; /* Rounded corners for the cards */
    margin-bottom: 2rem; /* Spacing between the cards */
    height: 450px;
}

#pricing .card-price{
    font-size: 2.3rem;
    font-weight: 700;
    background: -webkit-linear-gradient(to left, #114dbb, #26a0da); /* For WebKit browsers */
    background: linear-gradient(to left, #114dbb, #26a0da); /* Standard syntax */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* For WebKit browsers */
    color: transparent; /* Fallback: hide text if gradient isn't supported */
    padding: 0px !important;
    /* These used to be <h1> elements. Pin the margin so swapping them to <p>
       for a sane heading outline does not shift the pricing cards. */
    margin: 0.67em 0;
    transition: opacity 0.3s ease-in-out;
    opacity: 1; /* Default state: fully visible */
}

#pricing .card-price-fade {
    opacity: 0; /* Faded state: completely transparent */
}

#yearlyButton.btn-active, #yearlyButton.btn-active:focus {
    background: linear-gradient(to right, #114dbb, #386ccd) !important;
    color: #ffffff !important;
    border-color: #114dbb !important;
}



#pricing .btn-info, #pricing .btn-outline-info, #pricing .btn-active, #pricing .btn-inactive {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#pricing .card-header {
    background: linear-gradient(to right, #114dbb, #386ccd);    color: #ffffff; /* Text color for the card header */
    border-top-left-radius: 15px; /* Rounded corner */
    border-top-right-radius: 15px; /* Rounded corner */
    font-size: 1.4rem; /* Adjust the font size as needed */
    font-weight: 600;
    padding: 0.8rem; /* Padding inside the header */
}

#pricing .card-body {
    padding: 2rem; /* Padding inside the body */
    background-color: #f8f9fa; /* Light background for the card body */
}

#pricing .card-title {
    font-size: 1.5rem; /* Title font size */
    margin-bottom: 1.5rem; /* Spacing below the title */
}

#pricing ul {
    list-style: none; /* Removes default list styling */
    padding: 0; /* Removes default padding */
    margin-bottom: 0; /* Removes default bottom margin */
}

#pricing li {
    padding: 0.2rem 0; /* Spacing for list items */
    display: flex; /* Makes list items flex containers */
    align-items: center; /* Vertically centers the check icon with the text */
}

#pricing li::before {
    content: "\f00c"; /* Unicode for Font Awesome check icon */
    font-family: "Font Awesome 5 Free"; /* Font family for Font Awesome */
    font-weight: 900; /* Ensures the icon is solid and not an outline */
    color: #114dbb; /* Icon color */
    margin-right: 0.5rem; /* Spacing between the icon and text */
}

#pricing .btn-info, #pricing .btn-outline-info {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
    font-size: 1.3rem;
}

.btn-inactive {
    background: none; /* No background for inactive state */
    color: #114dbb; /* Color for inactive state */
    border-color: #114dbb; /* Border color for inactive state */
}

.btn-active {
    background: linear-gradient(to right, #114dbb, #386ccd);
    color: #ffffff; /* Text color for active state */
    border-color: #114dbb; /* Border color for active state */
}

#pricing .btn-info {
    /* background: linear-gradient(to right, #114dbb, #386ccd);
    color: #ffffff;
    border-color: #114dbb; */
    border-top-left-radius: 15px; /* Rounded corner */
    border-bottom-left-radius: 15px; /* Rounded corner */
    width: 7rem;
}

#pricing .btn-outline-info {
    /* border-color: #114dbb;
    color: #114dbb; */
    border-top-right-radius: 15px; /* Rounded corner */
    border-bottom-right-radius: 15px; /* Rounded corner */
    width: 7rem;
}

#pricing .btn-info:focus, #pricing .btn-outline-info:focus, #pricing .btn-active:focus, #pricing .btn-inactive:focus {
    box-shadow: 0 0 0 0.2rem rgba(17, 77, 187, 0.2); /* Adjust the RGBA color to match your blue */
}


#pricing .btn-outline-info:hover {
    color: #ffffff;
    background: linear-gradient(to right, #114dbb, #386ccd);
}

#pricing .btn-info:hover {
    color: #ffffff;
    background: linear-gradient(to right, #114dbb, #386ccd);
}


/* Responsive Design for Pricing Section */
@media (max-width: 992px) {
    #pricing .card {
        margin-bottom: 1rem; /* Less spacing between the cards on smaller screens */
    }
}

@media (max-width: 768px) {
    #pricing .card-body {
        padding: 1rem; /* Less padding inside the body on smaller screens */
    }
}


@media (max-width: 576px) {

    #pricing{
        padding-bottom: 0px;
    }

    #pricing .card {
        margin-bottom: 1rem; /* Less spacing between the cards on smaller screens */
        height: 390px;
    }

    #pricing .card-title {
        text-align: center !important;
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }

    #pricing .card-price {
        text-align: center !important;
    }
}

.learn-more-btn {
    background-color: #ffb22f;  /* Secondary color */
    color: #000000;             /* Dominant color */
    border: none;
    padding: 10px 20px;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: box-shadow 0.3s ease; /* Smooth transition for the shadow */
}

.learn-more-btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* Shadow effect on hover */

}


/* General styles for the contact section */
#contact {
    color: #333;
    background-color: #f8f9fa;
    padding: 2rem 0;
  }
  
  #contact .container {
    margin: 0 auto;
    padding: 0 15px;
  }
  
  #contact h2 {
    color: #114dbb;
    margin-bottom: 1rem;
  }
  
  #contact p {
    margin-bottom: 1rem;
  }
  
  #contact a {
    color: #114dbb;
  }
  
  /* Styling for the contact information column */
  #contact .contact-box{
    background-color: #23395b;
    color: white;
    padding: 2rem;
    border-radius: 8px;
    position: relative;
  }
  
  #contact .contact-box h2 {
    color: #ffffff;
  }

  #contact .contact-box h3 {
    font-size: 1rem;
    color: #e9e9e9;
    opacity: 0.5;
  }


  #contact .contact-box a {
    color: #26a0da;
  }
  
  #contact .social-icons {

    padding-top: 1rem;
  }
  
  #contact .social-icons a {
    color: white; /* Adjust if you want a different color */
    margin: 0 10px;
    font-size: 24px; /* Adjust icon size as needed */
    transition: color 0.3s ease-in-out;
  }
  
  #contact .social-icons a:hover {
    color: #26a0da; /* Color on hover */
  }
  
  /* Styling for the contact form column */
  #contact .col-md-8{
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
  }
  
  #contact .form-control {
    margin-bottom: 1rem;
    border-radius: 4px;
    border: 1px solid #ced4da;
  }
  
  #contact .form-group {
    display: flex;
    justify-content: space-between;
  }
  
  #contact .form-group .form-control {
    width: 48%; /* Adjusts the input width to fit side-by-side */
  }
  
  #contact .form-check-label {
    margin-left: 0.3rem;
  }
  
  #contact .btn-primary {
    background-color: #114dbb;
    border-color: #114dbb;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
  }
  
  #contact .btn-primary:hover {
    background-color: #0d3c91;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    #contact .form-group .form-control {
      width: 100%; /* Full width on smaller screens */
    }
  
    #contact .form-group {
      flex-direction: column;
    }
  }
  

@media (max-width: 576px) {
    #contact{
        padding-top: 0px;
        padding-bottom: 0px;

    }

    #contact .contact-box{
        border-radius: 0;
    }

    .contact-form{
        padding-top: 25px;
        padding-bottom: 25px;
    }
}



/* Branding Colors */
:root {
    --dominant-color: #022926;
    --secondary-color: #ebc66b;
    --accent-color: #f5e9da; /* Assuming a light beige for the accent color */
}


.whatsapp-icon {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: #25D366;
    color: white;
    width: 80px;               /* Set a fixed width */
    height: 80px;              /* Set a fixed height */
    line-height: 80px;         /* Same as height to center the icon */
    text-align: center;        /* Horizontally center the icon */
    border-radius: 50%;        /* This ensures a circular shape */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999; 
    transition: transform 0.3s ease;
    font-size: 34px;           /* Adjust size as required */
 }
 
 .whatsapp-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
 }
 


/* Amlire Footer CSS using 60-30-10 rule */
.footer {
    background: linear-gradient(to right, #010b1d, #051534, #0a2453);
    color: #fff; /* White text */
    padding: 40px 80px 10px 80px;
}

.footer h2{
    color: #fff; /* White headings */
    font-size: 2.5rem;
}

footer h3 {
    color: #fff; /* White headings */
    font-size: 1.5rem;
}

.footer p, .footer a {
    color: #aaa; /* Lighter grey text */
    line-height: 1.2; /* Spacing for readability */
    font-size: 1rem;

}

.footer a {
    text-decoration: none; /* No underline */
}

.footer .social-links a {
    display: inline-block;
    margin-right: 10px;
    /* Here you would add your font icons or images for social links */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .footer .row {
        text-align: center;
    }
    .footer .social-links {
        margin-top: 10px;
    }
}

@media (max-width: 1024px) {
    .footer h2{
        font-size: 2rem;
    }
}

.beuex-copyright {
    text-align: center;
    color: #ffffff; /* Accent: 10% */
    font-size: 13px;
}


@media (max-width: 576px) {
    .beuex-copyright {
        font-size: 9px !important;

    }

    .footer{
        padding: 40px 40px 10px 40px;
    }

}