/* ======================================================
   Table of Contents
==========================================================
1. General Style                          (line 34)
    1.1 Root Style                        (line 47)
    1.2 Header Style                      (line 75)
    1.3 Link and Image Style              (line 116)
    1.4 Text Style                        (line 126)
    1.5 Icon Circle Style                 (line 165)
    1.6 Color Utility Class               (line 248)
    1.7 Background Utility Class          (line 258)
    1.8 Font Size Utility Class           (line 265)
    1.9 Width Utility Class               (line 278)
    1.10 Button Style                     (line 290)
        1.10.1 Navbar Button              (line 312)
    1.11 Default Width                    (line 332)
2. Navbar Style                           (line 342)
3. Hero Style                             (line 420)
4. About Style                            (line 481)
5. CEO Quote Style                        (line 507)
6. Choose Us Style                        (line 539)
7. Service Style                          (line 557)
8. Showcase Style                         (line 599)
9. FAQs Style                             (line 627)
10. Blog Post Style                       (line 675)
11. Video Style                           (line 730)
12. Team Style                            (line 744)
13. Contact Style                         (line 791)
14. Packages Style                        (line 920)
15. 404 Style                             (line 932)
16. Transition Style                      (line 941)
17. Footer Style                          (line 951)
18. Other Style                           (line 1022)
19. Media Queries                         (line 1031)
===========================================================
*/
/* Testimonial Scroll Container */
.testimonial-scroll-container {
  width: 100%;
  overflow: hidden; /* Hide overflow */
  position: relative;
}

.testimonial-scroll-content {
  display: flex;
  width: max-content; /* Allow content to expand horizontally */
  animation: scroll 30s linear infinite; /* Auto-scroll animation */
}

/* Testimonial Item Styles */
.testimonial-item {
  flex: 0 0 auto;
  width: 300px; /* Adjust width to match your card size */
  margin-right: 16px; /* Add spacing between cards */
}

/* Auto-Scroll Animation */
@keyframes scroll {
  0% {
    transform: translateX(0); /* Start from the right */
  }
  100% {
    transform: translateX(-50%); /* Scroll to the left */
  }
}

/* Mobile View */
@media (max-width: 768px) {
  .testimonial-scroll-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Snap scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .testimonial-scroll-content {
    animation: none; /* Disable auto-scroll on mobile */
  }

  .testimonial-item {
    scroll-snap-align: start; /* Snap to the start of each card */
  }
}

/* Video Card Styles */
.video-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: 400px; /* Adjust height as needed */
}

.video-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Caption Overlay */
.caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background: linear-gradient(to top, rgba(200, 200, 200, 0.8), rgba(200, 200, 200, 0));
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: opacity 0.3s ease;
}

.caption-text {
  font-family: 'Philosopher', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: white;
}

/* Description Overlay */
.description-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200, 200, 200, 0.9);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.description-text {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: white;
  text-align: center;
}

/* Hover Effects */
.video-card:hover .caption-overlay {
  opacity: 0; /* Hide caption on hover */
}

.video-card:hover .description-overlay {
  opacity: 1; /* Show description on hover */
}

/* Hero Section with Slow Zooming Slider */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: zoom 10s infinite;
}

.slide:nth-child(1) {
  animation-delay: 0s;
}
.slide:nth-child(2) {
  animation-delay: 5s;
}
.slide:nth-child(3) {
  animation-delay: 10s;
}

@keyframes zoom {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding-top: 20%;
}

.cta-button {
  background-color: var(--gold);
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.2rem;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: var(--ash);
  color: var(--white);
}

/* Gallery Section */
.gallery {
  padding: 50px 20px;
  background-color: var(--light-grey);
  text-align: center;
}

.pixieset-gallery {
  margin-top: 20px;
}

/* Custom CSS */
.navbar-scroll {
  background-color: rgb(0 0 0 / 90%); /* Adjust the color and opacity as needed */
  transition: background-color 0.3s ease; /* Smooth transition */
}

/* General Style */
@font-face {
    font-family: 'Orpheus';
    src: url(../font/Recoleta%20Medium.otf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*@font-face {
    font-family: 'Lato';
    src: url(../font/lato.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}*/
    /* Root Style */
:root {
    /* Backgrounds */
    --color-subtle: #f9f9f9;       /* Light grey for subtle backgrounds */
    --color-border: #e0e0e0;       /* Soft border grey */
    --color-lighter: #f2f2f2;      /* Very light grey accent */
    
    /* Main Colors */
    --color-main: #333333;         /* Dark grey primary (for headers, key accents) */
    --color-darker: #000000;       /* Pure black for maximum contrast */
    
    /* Text Colors */
    --heading-color: #111111;      /* Slightly off-black for better legibility */
    --text-color-1: #333333;       /* Strong grey for header/subheader text */
    --text-color-2: #555555;       /* Softer body text */
    
    /* Alerts */
    --color-error: #e53935;
    --color-warning: #fbc02d;
    --color-info: #1e88e5;
    --color-success: #43a047;
    
    /* Fonts */
    --font-1: 'Philosopher', sans-serif;
    --font-2: 'Lato', sans-serif;
}

    body {
    background-color: rgba(255, 255, 255, 0.906);
    color: var(--text-color-2);
    }

/* === Scroll + Layout Fixes === */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

.navbar {
  overflow-x: hidden;
}

/* Prevent WhatsApp Widget Overflow */
#wh-widget-send-button {
  right: 16px !important;
  bottom: 16px !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* General Image Scaling */
img, video {
  max-width: 100%;
  height: auto;
}


    /* Header Styles */
    h1 {
        font-size: 80px; /* Large font size for main headers */
        font-weight: 500; /* Medium font weight */
        line-height: 1.1em; /* Slightly compact line height */
        letter-spacing: -1.3px; /* Tight letter spacing for a cleaner look */
        font-family: var(--font-1); /* Applying the main header font */
    }

    h2, h3, h4, h5, h6 {
        /* Standard header styles with decreasing font sizes */
        font-weight: 500;
        line-height: 1.2em;
        font-family: var(--font-1); /* Using the same font for all header tags */
    }

    h2 {
        font-size: 56px; /* Slightly smaller than h1 */
        letter-spacing: -1.3px;
    }

    h3 {
        font-size: 40px;
        letter-spacing: -1.1px;
    }

    h4 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    h5 {
        font-size: 24px;
        letter-spacing: -0.8px;
    }

    h6 {
        font-size: 16px;
        letter-spacing: -0.6px;
    }

    /* Link and Image Styling */
    a {
        text-decoration: none; /* Remove underline from links */
        cursor: pointer; /* Change cursor to pointer on hover */
    }

    img {
        object-fit: cover; /* Ensures images cover their container without distortion */
    }

    /* Text Style */
    .heading {
        color: var(--heading-color); /* Main heading color */
    }
    .white-text {
        color: #e0e0e0;
    }
    .sub-heading {
        color: var(--color-main); /* Sub-heading color */
    }
    .text-subtitle {
        font-family: 'Philosopher';
        font-size: 24px;
        font-weight: 500;
        line-height: 1,2;
        letter-spacing: -0.8px;
    }
    .text-grey {
        font-family: 'Lato';
        font-size: 16px;
        color: var(--text-color-1);
    }
    .text-white {
        font-family: 'Lato';
        font-size: 16px;
        color: var(--color-subtle) !important;
    }
    .text-silver {
        font-family: 'Lato';
        font-size: 16px;
        color: var(--text-color-2);
    }
    .text-color-1 {
        color: var(--text-color-1);
    }
    .text-color-2 {
        color: var(--text-color-2);
    }

    .font-1, .philosopher {
        font-family: var(--font-1); /* Font family for headers */
    }

    .font-2, .lato {
        font-family: var(--font-2); /* Font family for body text */
    }

    /* Icon Circle Styles */
    .icon-circle-37-main, .icon-circle-32, .icon-circle-32-main, .icon-circle-17, .icon-circle-17-main, .icon-circle-15-main {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: transparent;
        font-size: 16px;
        cursor: pointer;
    }

    .icon-circle-37-main {
        width: 32px;
        height: 32px;
        border: 1px solid var(--color-main);
        color: var(--color-main);
    }

    .icon-circle-32 {
        width: 32px;
        height: 32px;
        border: 1px solid white;
        color: #535353;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .icon-circle-32:hover {
        color: var(--color-darker);
        background-color: var(--color-subtle);
        border: 1px solid var(--color-subtle);
    }

    .icon-circle-32-main {
        width: 32px;
        height: 32px;
        border: 1px solid var(--color-main);
        color: var(--color-main);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .icon-circle-32-main:hover {
        color: white;
        background-color: var(--color-main);
        border: 1px solid var(--color-main);
    }

    .icon-circle-17 {
        width: 17px;
        height: 17px;
        border: 1px solid white;
        font-size: 15px;
        color: white;
    }

    .icon-circle-17-main {
        width: 17px;
        height: 17px;
        border: 1px solid var(--color-main);
        font-size: 15px;
    }

    .icon-circle-15-main {
        width: 15px;
        height: 15px;
        border: 1px solid var(--color-main);
        font-size: 13px;
    }

    /* Testimonial Circle Styles */
    .testimonial-circle {
        width: 45px;
        height: 45px;
        background-color: var(--color-lighter);
        border-radius: 50%;
        margin-left: -7px;
    }

    .testimonial-circle-first {
        width: 45px;
        height: 45px;
        background-color: var(--color-lighter);
        border-radius: 50%;
    }

    /* Color Utility Classes */
    .c-white { color: #424242 !important; }
    .c-silver { color: var(--text-color-2); }
    .c-main { color: var(--color-main); }
    .c-black { color: black; }
    .c-text { color: rgb(255, 254, 250, 0.6); }
    .c-semi-black { color: #4a4a4a; }
    .c-semi-transparent { color: #00000080; }
    .c-grey { color: var(--text-color-1); }

    /* Background Utility Classes */
    .bg-subtle {
    background-color: var(--color-subtle) !important;
    }
    .bg-semi-white { background-color: var(--color-border) !important; }
    .bg-darker { 
    background-color: rgb(50, 50, 50) !important; 
}
.bg-grey { 
    background-color: var(--color-lighter) !important; 
}
    .bg-main {
    background-color: var(--color-main); /* For call-to-actions or contrast blocks */
}

    /* Font Size Utility Classes */
    .fs-12 { font-size: 12px; }
    .fs-13 { font-size: 13px; }
    .fs-14 { font-size: 14px; }
    .fs-15 { font-size: 15px; }
    .fs-16 { font-size: 16px; }
    .fs-17 { font-size: 17px; }
    .fs-18 { font-size: 18px; }
    .fs-22 { font-size: 22px; }
    .fs-24 { font-size: 24px; }
    .fs-26 { font-size: 26px; }
    .fs-48 { font-size: 48px; }

    /* Width Utility Classes */
    .w-10 { width: 10%; }
    .w-20 { width: 20%; }
    .w-30 { width: 30%; }
    .w-40 { width: 40%; }
    .w-50 { width: 50%; }
    .w-60 { width: 60%; }
    .w-70 { width: 70%; }
    .w-80 { width: 80%; }
    .w-90 { width: 90%; }
    .w-100 { width: 100%; }

    /* Button Styles */
    .btn-light, .btn-dark {
        background-color: var(--color-main);
        color: white;
        border: none;
        border-radius: 50px;
        padding: 12px 24px;
        font-size: 14px;
        max-width: fit-content;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .btn-light:hover {
        background-color: var(--color-border);
        color: var(--text-color-1);
    }

    .btn-dark:hover {
        background-color: var(--color-darker);
        color: white;
    }

        /* Navbar Styles */
        button.nav-link {
            box-shadow: none !important;
            outline: none !important;
            border: none !important;
        }

        button.nav-link:hover {
            box-shadow: none !important;
            outline: none !important;
            border: none !important;
        }

        button.nav-link:focus {
            box-shadow: none !important;
            outline: none !important;
            border: none !important;
        }


    /* Default Width */
    .width-base {
        width: 1220px;
        padding-top: 100px;
        padding-bottom: 80px;
        margin-left: auto;
        margin-right: auto;
    }

    .width-base-custom {
        width: 1220px;
        padding-top: 100px;
        padding-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    
/* Navbar Style */
.navbar-toggler {
    width: 30px;
    height: 30px;
    border: none; 
    background: none; 
    box-shadow: none;
    outline: none; 
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0;
}
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none; 
    box-shadow: none; 
    border: none; 
}
.navbar-toggler-icon {
    display: block;
    height: 1px;
    width: 30px;
    background-color: white;
    border-radius: 2px;
    transition: none;
}
.navbar-toggler-icon:nth-child(3) {
    width: 22px;
    height: 2px; 
    margin-left: 8px;
}
.offcanvas.show .nav-link {
    color: var(--text-color-1);  
    font-size: 12px;
}
.offcanvas.show .nav-link:hover {
    color: var(--color-main); 
}
.nav-link {
    color: #ffff;
    font-size: 15px;
}
.nav-link:hover {
    color: #adb5bd; 
}
.dropdown {
    border-radius: 10px;
}
.dropdown-toggle {
    box-shadow: none !important;
}
.dropdown-menu {
    padding: 10px;
    color: var(--text-color-2);
    min-width: 200px;
}
.dropdown-menu a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.dropdown-menu:hover a:hover {
    color: #fff; 
    background-color: var(--color-main); 
}
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}
.dropdown-menu {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}


/* Hero Style */
.content-m {
    margin-top: 6rem;
}
.section-m {
    margin-top: 9rem; 
    width: 1220px;
}
.hero-title {
    width: 100%;
    margin-top: 60vh;
    font-family: Recoleta Medium;
}
.banner-title {
    width: 100%;
    font-size: 80px;
    font-weight: 500;
    line-height: 1,1px;
    letter-spacing: -1.3px;
}
.hero-subtitle {
    width: 60%;
}
.hero-subtext {
    width: 70%;
}
/* Hero Background Animation */
.bg-hero {
    background-image: url('../img/bg-1no.webp'); /* Default image */
    background-size: cover;
    background-position: center;
    height: 100vh;
    transition: background-image 2s ease-in-out; /* Smooth transition */
}

.overlay-hero {
    background-color: rgba(17, 32, 21, 0.4); 
    padding-bottom: 100px;
    height: 100vh ;
}
.border-hero {
    border-bottom: 1px solid #c4c4c4;
}
.form-container {
    background: rgba(255, 255, 255, 0.0);
    border-radius: 10px;
    padding: 20px;
    max-width: 1000px;
    width: 100%;
    border: 1px solid white;
}
.form-control, .form-control:focus, .form-control::placeholder{
    background: white;
    color: var(--text-color-2);
    box-shadow: none;
    outline: none;
    border-color: var(--color-border);
    font-family: 'Philosopher';
    padding: 10px;
}
.form-control:focus {
    background-color: white;
    color: var(--text-color-2);
}
.date {
    color-scheme: dark;
}


/* About Style */
.about-bg {
    background-image: linear-gradient(rgba(17, 32, 21, 0.6), rgba(17, 32, 21, 0.6)), url('../img/about-overlay.webp');
    background-size: cover;
    background-position: center;
    height: 512px;
}
.img-about {
    border-radius: 10px;
    width: 100%;
}
.img-about-last {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.title-about{
    font-family: 'Philosopher';
    font-size: 56px;
    font-weight: 500;
    line-height: 1,2;
    letter-spacing: -1.3px;
}


/* CEO Quote Style */
.bg-ceo {
    background-image: linear-gradient(rgba(245, 245, 245, 0.8), rgba(245, 245, 245, 0.9)), url('../img/images-ZV8482W.webp'); 
    width: 100%;
    background-size: cover;
    background-position: center;
}
.ceo-quote {
    margin: auto;
    width: 60%;
    padding-left: 0;
    padding-right: 0;
}
.signature {
    width: 160px;
    height: 34px;
}
.card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
}
.card:hover {
    border: 1px solid var(--color-main);
}
.card-body {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
}


/* Choose Us Style */
.bg-choose-us {
    background-image: linear-gradient(rgba(32, 32, 32, 0.6), rgba(16, 16, 16, 0.6)), url('../img/images-PZE6K9S.webp');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.bg-darker {
    background-color: var(--color-border);
}
.choose-position {
    top: -200px;
    left: 0;
    right: 0;
    margin: auto;
}


/* Services Style */
.bg-service-1 {
    background-image: url('../img/service-1.webp');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.bg-service-2 {
    background-image: url('../img/service-2.webp');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.bg-service-3 {
    background-image: url('../img/service-4.webp');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.bg-service-4 {
    background-image: url('../img/service-3.webp');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.custom-card {
    max-width: 35%;
    width: max-content;
    background: var(--color-border); 
    border: 1px solid #c4c4c4;
    border-radius: 10px; 
    overflow: hidden;
    position: absolute;
    left: 5%;
    bottom: 10%;
}

/* General Styles */
.bg-subtle {
  background-color: var(--color-subtle);
}

.width-base {
  width: 1220px;
  margin: 0 auto;
  padding: 100px 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.g-4 {
  gap: 16px;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.fade-in.visible {
  opacity: 1;
}

/* Service Card Styles */
.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: 300px; /* Adjust height as needed */
}

.service-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

/* Caption Overlay */
.caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(200, 200, 200, 0));
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: opacity 0.3s ease;
}

.caption-text {
  font-family: 'Philosopher', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: white;
}

/* Description Overlay */
.description-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200, 200, 200, 0.9);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.description-text {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: white;
  text-align: center;
  margin-bottom: 20px;
}

/* Hover Effects */
.service-card:hover .caption-overlay {
  opacity: 0; /* Hide caption on hover */
}

.service-card:hover .description-overlay {
  opacity: 1; /* Show description on hover */
}

.service-card:hover .service-image {
  transform: scale(1.1); /* Zoom effect on hover */
}

/* Mobile View */
@media (max-width: 768px) {
  .service-card {
    height: auto; /* Adjust height for mobile */
  }

  .service-image {
    height: 200px; /* Adjust image height for mobile */
  }

  .caption-overlayv {
    position: static; /* Move caption below the image */
/*    background: none;*/
    padding: 10px 0;
    text-align: center;

  }

  .cop{
    position: static !important; /* Move caption below the image */
  }

    .caption-overlay {
      position: absolute; /* Move caption below the image */
  /*    background: none;*/
      padding: 10px 0;
      text-align: center;

    }

  .caption-text {
    color: white !important;
  }

  .description-overlay {
    position: static; /* Move description below the image */
    background: none;
    padding: 10px 0;
    opacity: 1; /* Always visible on mobile */
  }

  .description-text {
    color: var(--text-color-1); /* Change description color for mobile */
  }

  .service-card:hover .service-image {
    transform: none; /* Disable zoom effect on mobile */
  }
}


/* Showcase Style */
.custom-card-1 {
    background: var(--color-border); 
    border: 1px solid #c4c4c4;
    border-radius: 10px; 
    overflow: hidden;
}
.subtext-showcase {
    width: 550px;
    font-family: 'Lato';
    font-size: 16px;
    color: var(--text-color-1);
    text-align: center;
}
.img-showcase {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.last-img-showcase{
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* FAQS Style */
.img-faqs {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.accordion,
.accordion-button,
.accordion-item,
.accordion-header,
.accordion-body {
    border: none !important;
    box-shadow: none !important;
}
.accordion-button {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.6px;
    color: var(--text-color-1); 
    background-color: white; 
}
.accordion-button:focus {
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    color: var(--heading-color);
    background-color: transparent !important;
}
.accordion-button:hover {
    background-color: #e9ecef; 
}
.accordion-button:active {
    background-color: transparent !important;
}
.accordion-item {
    margin-bottom: 10px;
}
.accordion-item {
    border: 1px solid var(--color-border) !important;
    border-radius: 10px;
    background-color: white;
}
.accordion-header, .accordion-body, .accordion-button {
    border-radius: 10px !important;
}


/* Blog Post Style */
.img-blog-post {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform-origin: center;
}
.img-wrapper {
    overflow: hidden;
}
.img-blog-post-2 {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform-origin: center;
}
.img-blog-post-2:hover {
    transform: scale(1.1); 
}
.img-blog-post-3 {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.custom-card-2 {
    background: var(--color-border); 
    border: 1px solid #c4c4c4;
    border-radius: 10px; 
    overflow: hidden; 
    transition: box-shadow 0.3s ease-in-out;
}
.custom-card-2:hover .img-blog-post {
    transform: scale(1.1) rotate(3deg); 
}
.learn-link{
    transition: color 0.3s ease;
}
.learn-link:hover {
    color: var(--text-color-1);
}
.blog-link {
    color: var(--color-main);
    font-size: 16px;
    font-family: var(--font-2);
}
.blog-link:hover {
    color: var(--heading-color);
}


/* Video Style */
.video-wrapper {
    position: relative;
    padding-top: 56.25%; /* Aspect ratio 16:9 */
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Team Style */
.img-team {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.team-member {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.img-team {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.team-member .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(200, 200, 200, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}
.team-member .team-name {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 11;
}
.team-member:hover .overlay {
    opacity: 1;
}
.team-member:hover .team-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* Contact Style */
.form-container-2 {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    font-family: var(--font-2);
}
.form {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--text-color-2);
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 20px;
}
.form-row.full-width {
    flex-direction: column;
}
.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.form-label {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-color-1);
}
.form-input, .form-textarea {
    border: none;
    border-bottom: 1px solid var(--text-color-2);
    padding: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}
.form-input:focus, .form-textarea:focus {
    border-bottom-color: var(--color-border);
    outline: none;
}
.form-textarea {
    resize: none;
}
.form-button {
    width: 100%;
    align-self: center;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: var(--color-main);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.form-button:hover {
    background-color: var(--color-darker);
}
.form-select {
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid var(--text-color-2);
    padding: 8px;
    font-size: 14px;
    background-color: transparent;
    transition: border-color 0.3s;
    appearance: none; 
}
.form-select:focus {
    border-bottom-color: var(--color-border);
    outline: none;
    box-shadow: none;
}
.form-select::-ms-expand {
    display: none; 
}
.form-select-wrapper {
    position: relative;
}
.form-select-wrapper::after {
    font-size: 12px;
    color: var(--text-color-2);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.popup-message {
    display: none;
    background-color: var(--color-border);
    color: var(--heading-color);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.border-radius-10 {
    border-radius: 10px;
}
.contact-image {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.contact-card {
    width: 65%;
    width: max-content;
    background: var(--color-border); 
    border: 1px solid #c4c4c4;
    border-radius: 10px; 
    overflow: hidden;
    position: absolute;
    right: 10%;
    bottom: 8%;
}
.maps {
    width: 100%;
    height: 420px;
    transition: filter 0.5s;
    display: block;
}


/* Packages Style */
.package-card {
    border: 1px solid var(--text-color-2);
    border-radius: 10px;
    padding: 32px;
    position: relative;
}
.package-card:hover {
    border: 1px solid var(--text-color-1);
}


/* 404 Style */
.bg-404{
    background-image: linear-gradient(rgba(245, 245, 245, 0.6), rgba(245, 245, 245, 0.6)), url('../img/about-overlay.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}


/* Transition Style */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-in, transform 0.8s ease-in;
}
.fade-in.visible {
    opacity: 1;
}



/* Footer Style */
.email-input {
    flex: 1;
    background-color: transparent;
    color: var(--text-color-1);
    border: none;
    outline: none;
}
.email-input::placeholder {
    color: var(--text-color-1);
    opacity: 0.8; 
}
.email-input:focus {
    outline: none; 
}
.newsletter-container {
    border-bottom: var(--color-border) 1px solid;
    width: 60%;
}
.newsletter-container:hover {
    border-bottom: white 1px solid;
}
.btn-newsletter {
    background: transparent; 
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.newsletter-form {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
}
.btn-newsletter i {
    color: var(--text-color-1);
}
.btn-newsletter:hover i {
    color: white; 
}
.footer-link:hover {
    color: var(--color-darker);
}
.footer-links {
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    margin-top: 24px;
}
.footer-links li {
    margin: 10px 0; 
}
.footer-logo {
    width: 224px;
    height: 56px;
    object-fit: cover;
}
.subtext-footer {
    width: 60%;
}
.footer-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}


/* Other Style */
.large-padding {
    padding-bottom: 200px;
}
.partner-margin {
    margin-top: -200px;
}


/* Media Query */
@media screen and (max-width: 1220px) {
    .section-m {
        margin-top: 8rem; 
        width: 100%;
    }
    .width-base {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 5px;
    }
}

/* Horizontal Scroll for Mobile */
@media (max-width: 992px) {
  .scrollable-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Snap scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .scrollable-col {
    flex: 0 0 auto;
    width: 80%; /* Adjust width for mobile */
    scroll-snap-align: start; /* Snap to the start of each column */
    margin-right: 16px; /* Add spacing between columns */
  }

  .scrollable-col:last-child {
    margin-right: 0; /* Remove margin for the last column */
  }

  /* Hide scrollbar for a cleaner look */
  .scrollable-row::-webkit-scrollbar {
    display: none;
  }

  .scrollable-row {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
@media  screen and (max-width: 992px) {
    h1 {
        font-size: 60px;
        line-height: 1.1em;
        font-family: var(--font-1);
    }
    h2 {
        font-size: 40px;
        line-height: 1.2em;
        font-family: var(--font-1);
    }
    h3{
        font-size: 28px;
        line-height: 1.2em;
        font-family: var(--font-1);
    }
    h4 {
        font-size: 24px;
        line-height: 1.2em;
        font-family: var(--font-1);
    }
    h5 {
        font-size: 22px;
        line-height: 1,1em;
        font-family: var(--font-1);
    }
    h6 {
        font-size: 16px;
        line-height: 1,2em;
        font-family: var(--font-1);
    }
 /*   .bg-hero{
        max-height: 600px;
    }*/
    .border-hero{
        display: none;
    }
    .hero-title {
        margin-top: 20vh;
        width: 95%;
        line-height: normal;
    }
    .hero-subtitle {
        width: 80%;
    }

    .section-m {
        margin-top: 3rem; 
        width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }
    .width-base {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 32px;
        padding-right: 32px;
    }
    .img-about {
        border-radius: 10px;
        width: 100%;
    }
    .img-about-last {
        border-radius: 10px;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .ceo-quote {
        width: 90%;
        padding-left: 0;
        padding-right: 0;
    }
    .signature {
        width: 148px;
        height: 32px;
    }
    .custom-card {
        max-width: 60%;
        position: absolute;
        left: 5%;
        bottom: 10%;
    }
    .img-faqs {
        width: 100%;
        height: 100%;
        max-height: 512px;
    }
    .newsletter-container {
        width: 100%;
    }
    .contact-image {
        max-height: 512px;
        border-radius: 10px;
    }
    .dropdown-menu{
        border: none;
    }
    .dropdown-item {
        background-color: white !important;
        font-size: 12px;
        color: var(--text-color-1) !important;
    }
    .dropdown-item:hover {
        color: var(--color-main) !important;
    }
}
@media screen and (max-width: 450px) {
    h1 {
        font-size: 40px;
        font-family: var(--font-1);
    }
    h2 {
        font-size: 32px;
        font-family: var(--font-1);
    }
    h3{
        font-size: 24px;
        font-family: var(--font-1);
    }
    h4 {
        font-size: 22px;
        font-family: var(--font-1);
    }
    h5 {
        font-size: 18px;
        font-family: var(--font-1);
    }
    h6 {
        font-size: 16px;
        font-weight: 500;
        font-family: var(--font-1);
    }
    .hero-title {
        margin-top: 70vh;
        width: 100%;
        line-height: normal;
    }
    .banner-title {
        margin-top: 24px;
        line-height: normal;
        font-size: 24px;
    }
    .hero-subtitle {
        width: 100%;
    }
    .hero-subtext {
        width: 100%;
    }
    .section-m {
        margin-top: 0rem; 
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .width-base {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .img-about {
        border-radius: 10px;
        width: 100%;
        height: 100%;
    }
    .img-about-last {
        border-radius: 10px;
        width: 100%;
        height: 256px;
    }
    .title-about{
        font-size: 32px;
    }
    .text-subtitle {
        font-size: 18px;
    }
    .ceo-quote {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .signature {
        width: 70px;
        height: 15px;
    }
    .bg-service-1 {
        background-image: none;
        min-height: 10px;
    }
    .bg-service-2 {
        background-image: none;
        min-height: 10px;
    }
    .bg-service-3 {
        background-image: none;
        min-height: 10px;
    }
    .bg-service-4 {
        background-image: none;
        min-height: 10px;
    }
    .custom-card {
        max-width: 100%;
        position: static;
    }
    .subtext-showcase {
        width: 100%;
    }
    .last-img-showcase{
        border-radius: 10px;
        width: 100%;
        height: 100%;
        max-height: 256px;
        object-fit: cover;
    }
    .img-faqs {
        width: 100%;
        height: 100%;
        max-height: 256px;
    }
    .subtext-footer {
        width: 100%;
    }
    .newsletter-container {
        width: 100%;
    }
    .about-bg {
        /* background-image: linear-gradient(rgba(17, 32, 21, 0.6), rgba(17, 32, 21, 0.6)), url('img/about-overlay.webp'); */
        background-size: cover;
        background-position: center;
        height: 280px;
    }
    .contact-image {
        border-radius: 10px;
    }
    .contact-card {
        width: 90%;
        left: 0;
        right: 0;
        margin: auto;
    }
    .dropdown-menu{
        border: none;
    }
    .dropdown-item {
        background-color: white !important;
        font-size: 12px;
        color: var(--text-color-1) !important;
    }
    .dropdown-item:hover {
        color: var(--color-main) !important;
    }

    .overlay-hero {
        background-color: rgba(17, 32, 21, 0.4);
        padding-bottom: 441px;
    }
}