:root {
  --bs-primary: #102F65;     /* Navy Blue for headers, buttons, accents */
  --bs-secondary: #E63946;   /* Red-Pink for highlights and links */
  --bs-white: #FFFFFF;       /* White for background/text contrast */
  --bs-light: #F5F5F5;       /* Light gray for section backgrounds */
  --bs-dark: #333333;        /* Dark gray for main text */
  --bs-heading: var(--bs-primary);
  --bs-bg: var(--bs-white);
}

html, body {
  background: var(--bs-bg);
  color: var(--bs-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bs-heading);
}


/*** Text & Section Colors ***/
p, li, label, .lead {
  color: var(--bs-dark);
}

.section-subtitle, .section-title {
  color: var(--bs-heading);
}


/*** Buttons Custom ***/
.btn-primary {
  background: var(--bs-primary);
  color: var(--bs-white);
  border: 0;
}

.btn-primary:hover {
  background: var(--bs-secondary);
  color: var(--bs-white);
}

.btn-cta {
  background: var(--bs-secondary);
  color: var(--bs-white);
  border: 0;
}

.btn-cta:hover {
  background: var(--bs-primary);
  color: var(--bs-white);
}



.fa-envelope {
  color: var(--bs-secondary) !important;
}



.bg-primary {
  background-color: var(--bs-primary) !important;
}



.bg-primary,
.bg-primary * {
  color: var(--bs-white) !important;
}



.bg-dark {
  background-color: #002147  !important;
}


.text-secondary {
  color: #E63946 !important;
}

.text-primary{
  color: #E63946 !important;
}


h1.mb-4 {
  color: var(--bs-primary);
}




.address-link:hover {
    color: #E63946 !important;
}

.contact-link:hover {
    color: #E63946 !important;
}





.navbar-nav .nav-link:hover,
.dropdown-item:hover {
    color: #E63946 !important;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
}
.dropdown-submenu:hover .dropdown-menu {
    display: block;
}



/* Hide sub-dropdown by default */
.dropdown-submenu .sub-dropdown {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  position: absolute;
  left: 100%;
  top: 0;
}

/* Show sub-dropdown on hover */
.dropdown-submenu:hover .sub-dropdown {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Hide sub-dropdown by default */
.dropdown-submenu .sub-dropdown {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 100%;
    top: 0;
    transition: all 0.2s ease-in-out;
}

/* Show sub-dropdown on hover */
.dropdown-submenu:hover .sub-dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
}


.dropdown-submenu {
    position: relative;
}



/*** Spinner Start ***/

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
 }

 #spinner.show {
     transition: opacity .8s ease-out, visibility 0s linear .0s;
     visibility: visible;
     opacity: 1;
 }

/*** Spinner End ***/

.text-white-50 {
  color: #FFFFFF !important;
}
/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-md-square {
    width: 46px;
    height: 46px;
}

.btn-lg-square {
    width: 58px;
    height: 58px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.back-to-top {
    position: fixed;
    width: 50px;
    height: 50px;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

/*** Button End ***/


/*** Topbar Start ***/

.topbar .top-info {
    letter-spacing: 1px;
}

.topbar .top-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary) !important;
}


.top-link i {
  color: var(--bs-primary) !important;
}

.top-link i:hover {
  color: var(--bs-secondary) !important;
}


.topbar .top-link a {
    margin-right: 10px;
}

#note {
    width: 500px;
    overflow: hidden;
    color: var(--bs-white);
}

#note small {
position: relative;
    display: inline-block;
    /* Changed from 5s to 15s to slow down the movement */
    animation: mymove 7s infinite linear; 
    animation-timing-function: linear;
    color: var(--bs-white);
}

@keyframes mymove {
    from {left: -100%;}
    to {left: 100%;}
}

/*** Topbar End ***/


/*** Navbar Start ***/
.navbar .navbar-nav {
    padding: 15px 0;
    background: var(--bs-primary);
}

.navbar .navbar-nav .nav-link {
    padding: 10px;
    color: var(--bs-white);
    font-size: 18px;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-secondary) !important;
}

/* Use > to target ONLY the immediate dropdown menu */
@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }

    /* ONLY show the first-level menu when nav-item is hovered */
    .navbar .nav-item:hover > .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        opacity: 1;
    }

    /* ONLY show the sub-menu when the submenu container is hovered */
    .dropdown-submenu:hover > .sub-dropdown {
        display: block;
        visibility: visible;
        opacity: 1;
        transform: rotateX(0deg); /* Match the animation style */
    }
}

/* Clean up sub-dropdown positioning */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .sub-dropdown {
    display: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 0; /* Adjusted for better alignment */
    transition: all 0.3s ease-in-out;
}
/*** Navbar End ***/


/*** Carousel Start ***/

.carousel-item {
    position: relative;
}

.carousel-item::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
}

.carousel-caption {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.carousel-item p {
    max-width: 700px;
    margin: 0 auto 35px auto;
}

.carousel-control-prev {
    width: 90px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 0;
    background: var(--bs-primary);
    border-radius: 0 50px 50px 0;
    opacity: 1;
}

.carousel-control-prev:hover {
    background: var(--bs-secondary);
    transition: .8s;
}

.carousel-control-next {
    width: 90px;
    height: 60px;
    position: absolute;
    top: 50%;
    right: 0;
    background: var(--bs-primary);
    border-radius: 50px 0 0 50px;
    opacity: 1;
}

.carousel-control-next:hover {
    background: var(--bs-secondary);
    transition: .8s;
}

.carousel-caption .carousel-content a button.carousel-content-btn1 {
  background: var(--bs-secondary);
  color: var(--bs-white);
    opacity: 1;
    border: 0;
    border-radius: 20px;
}

.carousel-caption .carousel-content a button.carousel-content-btn1:hover {
  background: var(--bs-primary);
  color: var(--bs-white);
    border: 0;
    opacity: 1;
    transition: 1s;
    border-radius: 20px;
}

.carousel-caption .carousel-content a button.carousel-content-btn2 {
    background: var(--bs-primary);
    color: var(--bs-white);
    opacity: 1;
    border: 0;
    border-radius: 20px;
}

.carousel-caption .carousel-content a button.carousel-content-btn2:hover {
  background: var(--bs-secondary);
  color: var(--bs-white);
    border: 0;
    opacity: 1;
    transition: 1s;
    border-radius: 20px;
}

#carouselId .carousel-indicators li {
    width: 30px;
    height: 10px;
    background: var(--bs-primary);
    margin: 10px;
    border-radius: 30px;
    opacity: 1;
}

#carouselId .carousel-indicators li:hover {
    background: var(--bs-secondary);
    opacity: 1;
}

@media (max-width: 992px) {
    .carousel-item {
        min-height: 500px;
    }
    
    .carousel-item img {
        min-height: 500px;
        object-fit: cover;
    }

    .carousel-item h1 {
        font-size: 40px !important;
    }

    .carousel-item p {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .carousel-item {
        min-height: 400px;
    }
    
    .carousel-item img {
        min-height: 400px;
        object-fit: cover;
    }

    .carousel-item h1 {
        font-size: 28px !important;
    }

    .carousel-item p {
        font-size: 14px !important;
    }
}

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--bs-white);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--bs-white);
}

/*** Carousel End ***/


/*** Services Start ***/

.services .services-item {
    box-shadow: 0 0 60px rgba(0, 0, 0, .2);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 10px 0;
    position: relative;
}


.services-content::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    border-radius: 10px 10px 0 0;
    background: rgba(3, 43, 243, 0.8);
    transition: .5s;
    background: rgba(29, 45, 80, 0.8);
}

.services-content::after {
    top: 0;
    bottom: auto;
    border-radius: 10px 10px 10px 10px;
}

.services-item:hover .services-content::after {
    height: 100%;
    opacity: 1;
    transition: .5s;
}

.services-item:hover .services-content-icon {
    position: relative;
    z-index: 2;
}

.services-item .services-content-icon i,
.services-item .services-content-icon p {
    transition: .5s;
}

.services-item:hover .services-content-icon i {
    color: var(--bs-secondary) !important;
}

.services-item:hover .services-content-icon p {
    color: var(--bs-white);
}

/*** Services End ***/


/*** Project Start ***/

.project-img {
    position: relative;
    padding: 15px;
}

.project-img::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    top: 0;
    left: 0;
    background: var(--bs-secondary);
    border-radius: 10px;
    opacity: 1;
    z-index: -1;
    transition: .5s;
}

.project-img::after {
    content: "";
    width: 150px;
    height: 150px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--bs-primary);
    border-radius: 10px;
    opacity: 1;
    z-index: -1;
    transition: .5s;
}

.project-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.project-content a {
    display: inline-block;
    padding: 20px 25px;
    background: var(--bs-primary);
    border-radius: 10px;
}

.project-item:hover .project-content {
    opacity: 1;
    transition: .5s;
}

.project-item:hover .project-img::before,
.project-item:hover .project-img::after {
    opacity: 0;
}

/*** Project End ***/


/*** Blog Start ***/
.blog-item .blog-btn {
    z-index: 2;
}

.blog-btn .blog-btn-icon {
    height: 50px;
    position: relative;
    overflow: hidden;
}

.blog-btn-icon .blog-icon-2 {
    display: flex;
    position: absolute;
    top: 6px;
    left: -140px;
    
}

.blog-btn-icon:hover .blog-icon-2 {
    transition: 1s;
    left: 5px;
    top: 6px;
    padding-bottom: 5px;
}
.blog-icon-1 {
    position: relative;
    top: -4px;
}
.blog-btn-icon:hover .blog-icon-1 {
    top: 0;
    right: -140px;
    transition: 1s;
      background: var(--bs-primary);
  color: var(--bs-white);
}

/*** Blog End ***/


/*** Team Start ***/

.team-item {
    border-top: 30px solid var(--bs-secondary) !important;
    background: rgba(239, 239, 241, 0.8);
}

.team-content::before {
    height: 200px;
    display: block;
    content: "";
    position: relative;
    top: -101px;
    background: var(--bs-secondary);
    clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
    padding: 60px;
    opacity: 1;
}

.team-img-icon {
    position: relative;
    margin-top: -200px;
    padding: 30px;
    padding-bottom: 0;
}

.team-img {
    border: 15px solid var(--bs-white);
}

.team-img img {
    border: 10px solid var(--bs-secondary);
    transition: .5s;
}

.team-item:hover h4 {
    color: var(--bs-primary);
    transition: .5s;
}

.team-item:hover .team-img img {
    transform: scale(1.05);
    border: 10px solid var(--bs-secondary);
}

.team-carousel .owl-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.team-carousel .owl-nav {
    position: absolute;
    top: -100px;
    right: 50px;
    display: flex;
}

.team-carousel .owl-nav .owl-prev,
.team-carousel .owl-nav .owl-next {
    width: 56px;
    height: 56px;
    border-radius: 56px;
    margin-left: 15px;
    background: var(--bs-secondary);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
}

.team-carousel .owl-nav .owl-prev:hover,
.team-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

@media (max-width: 992px) {
    .team-carousel {
        margin-top: 3rem;
    }

    .team-carousel .owl-nav {
        top: -85px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        margin-left: -15px;
    }
}

/*** Team End ***/


/* Hide the social media overlay entirely */
.team-social-overlay {
    display: none !important;
}

/* Optional: Disable the hover scaling effect on the image if you want it static */
.team-card-premium:hover .img-fluid {
    transform: none !important;
}


/*** Testimonial Start ***/

.testimonial-item {
    background: var(--bs-light);

}

.testimonial-carousel .owl-dots {
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--bs-light);
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--bs-light);
}

.testimonial-carousel .owl-item.center {
    position: relative;
    z-index: 1;
}

.testimonial-carousel .owl-item .testimonial-item {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
    background: #FFFFFF !important;
    box-shadow: 0 0 30px #DDDDDD;
}

/*** Testimonial End ***/


/*** Contact Start ***/
.contact-detail::before {
    position: absolute;
    content: "";
    height: 50%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(var(--bs-light), rgba(255,255,255,0.3)), url(../img/background.jpg) center center no-repeat;
    background-size: cover;
    border-radius: 10px;
    z-index: -1;
}

.contact-map {
    background: var(--bs-light);
}

.contact-form {
    background: var(--bs-light);
}

/*** Contact End ***/


/*** Footer Start ***/

.footer .short-link a,
.footer .help-link a,
.footer .contact-link a {
    transition: .5s;
}

.footer .short-link a:hover,
.footer .help-link a:hover,
.footer .contact-link a:hover {
    letter-spacing: 1px;
}

.footer .hightech-link a:hover {
    background: var(--bs-secondary);
    border: 0;
}

/*** Footer End ***/



/* Topbar background */
.container-fluid.bg-dark.py-2 {
  background-color: #102F65 !important;
}

/* Navbar background */
.container-fluid.bg-dark {
  background-color: #102F65 !important;
}

/* Navbar background for smaller screens */
.navbar {
  background-color: #102F65 !important;
}

/* Navbar dropdown background */
.dropdown-menu {
  background-color: #102F65 !important;
}




/* Mission & Vision Card Effects */
.mission-vision-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mission-vision-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(16, 47, 101, 0.15) !important;
}

.icon-box {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.mission-vision-card:hover .icon-box {
    background: #102F65;
}

.mission-vision-card:hover .icon-box i {
    color: #FFFFFF !important;
}

/* Language Tag Styling */
.language-tag {
    font-size: 1.1rem;
    padding: 12px 25px;
    background-color: #f8f9fa;
    color: #102F65;
    border: 1px solid #e9ecef;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: default;
}

.language-tag:hover {
    background-color: #E63946;
    color: #FFFFFF;
    transform: scale(1.1);
    border-color: #E63946;
}

/* Custom Primary/Secondary Overrides for LTS Lingua */
.border-primary {
    border-color: #102F65 !important;
}

.border-secondary {
    border-color: #E63946 !important;
}

.text-primary {
    color: #102F65 !important;
}

.text-secondary {
    color: #E63946 !important;
}


/* 1. Smooth scrolling to make the site feel alive */
html {
    scroll-behavior: smooth;
}

/* 2. Offset so the navbar doesn't hide the top of the section */
.rental-card[id] {
    scroll-margin-top: 120px; 
}

/* 3. The "Light Up" Animation */
.rental-card:target {
    border: 3px solid #E63946 !important; /* Brand Red-Pink */
    animation: special-glow 3s ease-in-out;
    position: relative;
    z-index: 10;
}

@keyframes special-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.8);
        transform: scale(1);
    }
    30% {
        box-shadow: 0 0 60px 30px rgba(230, 57, 70, 0.5);
        transform: scale(1.05); /* Makes it pop out */
        background-color: #fffafa; /* Subtle light red tint */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
        transform: scale(1);
    }
}

/* --- Services Section Styles --- */

/* Base Card Style *//* --- Optimized Service Section CSS --- */

.services-item {
    background-color: #ffffff;
    transition: all 0.5s ease-in-out;
    border: 1px solid #eee;
    border-bottom: 5px solid transparent;
    position: relative;
    z-index: 1;
}

/* Bullet Point Styling */
.service-list {
    list-style: none;
    padding: 0;
    text-align: left;
    display: inline-block;
}

.service-list li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #555;
    position: relative;
    padding-left: 25px;
    transition: color 0.3s ease;
}

/* Red-Pink Checkmarks */
.service-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #E63946;
}

/* Professional Hover State */
.services-item:hover {
    background-color: #102F65 !important; /* Brand Navy */
    transform: translateY(-15px);
    box-shadow: 0 1rem 3rem rgba(16, 47, 101, 0.25) !important;
    border-bottom: 5px solid #E63946;
}

/* Ensure ALL text turns white on hover */
.services-item:hover .service-title,
.services-item:hover .service-text,
.services-item:hover .service-icon,
.services-item:hover .service-list li {
    color: #ffffff !important;
}

/* Bullet Checkmarks turn White on hover for contrast */
.services-item:hover .service-list li::before {
    color: #ffffff !important;
}

/* "Book Now" Button Style */
.btn-book {
    background-color: #E63946;
    color: #ffffff !important;
    border: none;
    transition: 0.3s;
    font-weight: 600;
}

.btn-book:hover {
    background-color: #ffffff !important;
    color: #102F65 !important;
}

/* Icon Pop Animation */
.service-icon {
    transition: transform 0.4s ease;
}

.services-item:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}



/*** Carousel Image Uniformity Fix ***/

/* 1. Define the container shape */
#carouselId .carousel-item {
    position: relative;
    /* Forces a professional 16:9 cinematic ratio */
    aspect-ratio: 16 / 9; 
    width: 100%;
    overflow: hidden;
    background-color: #000; /* Prevents white flashes between slides */
}

/* 2. Force images to fill that shape without stretching */
#carouselId .carousel-item img {
    width: 100%;
    height: 100%;
    /* Magic property: crops the edges to fit the box instead of squashing the image */
    object-fit: cover; 
    object-position: center;
}

/* 3. Responsive Adjustments for Different Devices */

/* Large screens (Desktops) - Keep it from getting too tall */
@media (min-width: 1200px) {
    #carouselId .carousel-item {
        max-height: 650px; 
    }
}

/* Medium screens (Tablets) */
@media (max-width: 992px) {
    #carouselId .carousel-item {
        /* Adjust ratio for tablets to show more of the image */
        aspect-ratio: 4 / 3; 
        max-height: 500px;
    }
    .carousel-item h1 {
        font-size: 40px !important;
    }
}

/* Small screens (Phones) */
@media (max-width: 768px) {
    #carouselId .carousel-item {
        /* Taller ratio for mobile so text has room to breathe */
        aspect-ratio: 1 / 1; 
        max-height: 450px;
    }
    .carousel-item h1 {
        font-size: 28px !important;
    }
    .carousel-item p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
}

/* 4. Overlay & Caption fixes */
.carousel-item::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5); /* Darkens image so text is readable */
    z-index: 1;
}

.carousel-caption {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/*** About Section Image Fix ***/

.about-img-container {
    width: 100%;
    /* Creates a professional portrait/square-ish shape */
    aspect-ratio: 4 / 5; 
    overflow: hidden;
    border-radius: 15px; /* Matches your rounded class */
}

.about-img-container img {
    width: 100%;
    height: 100%;
    /* Ensures the image fills the space without stretching */
    object-fit: cover; 
    object-position: center;
    transition: transform 0.5s ease;
}

/* Subtle hover effect for professional touch */
.about-img-container:hover img {
    transform: scale(1.05);
}

/* Mobile & Tablet Adjustments */
@media (max-width: 991px) {
    .about-img-container {
        /* On smaller screens, a landscape or shorter image works better 
           so the user doesn't have to scroll too much */
        aspect-ratio: 16 / 9; 
        margin-bottom: 30px;
    }
}


/* 1. Lighten the dark overlay on hover */
.services-item:hover .services-content::after {
    /* Changed from 0.8 to 0.4 opacity to make it less "heavy" */
    background: rgba(16, 47, 101, 0.4); 
}

/* 2. Force the text to bright white when hovered so it's readable */
.services-item:hover h4, 
.services-item:hover p,
.services-item:hover i {
    color: #ffffff !important;
    position: relative;
    z-index: 3; /* Ensures text stays above the overlay */
}

/* 3. Optional: Add a slight glow to the icon to make it pop */
.services-item:hover i {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 4. Fix for the specific Navy Blue card state */
.services-item:hover {
    /* Using your brand navy but slightly more transparent if it's still too dark */
    background-color: rgba(16, 47, 101, 0.95) !important; 
}



/*** Project Section Modern Styling ***/

.project-item {
    position: relative;
    overflow: hidden;
    background: #000; /* Backdrop for the zoom effect */
}

.project-img {
    position: relative;
    width: 100%;
    /* Standardizes the project tiles to a 4:3 professional ratio */
    aspect-ratio: 4 / 3; 
    overflow: hidden;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents stretching */
    transition: transform 0.6s ease;
}

/* Hover Zoom Effect */
.project-item:hover .project-img img {
    transform: scale(1.15);
}

/* The Overlay Overlay - Navy with Transparency */
.project-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* Uses your Navy Blue with 85% opacity */
    background: rgba(16, 47, 101, 0.85); 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.project-item:hover .project-content {
    opacity: 1;
}

/* Text Pop-up Animation */
.project-overlay-text {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.project-item:hover .project-overlay-text {
    transform: translateY(0);
}

.project-overlay-text h4 {
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* Responsive adjustment for phones */
@media (max-width: 768px) {
    .project-img {
        aspect-ratio: 16 / 9; /* Wider tiles look better on mobile scroll */
    }
}

/* --- Modern Project Styling --- */
.project-intro-text p {
    line-height: 1.5;
    color: #666;
}

.project-card-custom {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* Keeps images consistent */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.project-card-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Hover Effects */
.project-card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(16, 47, 101, 0.15);
}

.project-card-custom:hover img {
    transform: scale(1.1);
}

/* Elegant Overlay */
.project-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 47, 101, 0.9) 0%, rgba(16, 47, 101, 0) 70%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card-custom:hover .project-card-overlay {
    opacity: 1;
}

.overlay-content {
    transform: translateY(10px);
    transition: transform 0.4s ease;
}

.project-card-custom:hover .overlay-content {
    transform: translateY(0);
}

/* --- Compact CTA Styling --- */
.cta-compact {
    background: linear-gradient(135deg, #102F65 0%, #1d3d7a 100%) !important;
    border-left: 5px solid #E63946; /* Brand Red accent */
}

/* --- Modern Team Section Styles --- */

.team-card-premium {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    margin: 15px; /* Space for shadow */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: 1px solid #f0f0f0;
}

/* Image behavior */
.team-img-wrapper {
    position: relative;
    aspect-ratio: 1 / 1; /* Keeps photos perfectly square */
    overflow: hidden;
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Social Overlay - appearing from the side */
.team-social-overlay {
    position: absolute;
    top: 0;
    right: -60px; /* Hidden by default */
    width: 50px;
    height: 100%;
    background: rgba(16, 47, 101, 0.9); /* Brand Navy */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.team-social-overlay a {
    color: #ffffff;
    font-size: 18px;
    margin: 15px 0;
    transition: color 0.3s ease;
}

.team-social-overlay a:hover {
    color: #E63946; /* Brand Red-Pink */
}

/* Info Box */
.team-info-box {
    padding: 25px 20px;
    text-align: center;
    position: relative;
}

.team-info-box h4 {
    color: #102F65; /* Brand Navy */
    margin-bottom: 5px;
    font-weight: 700;
}

.accent-line {
    width: 40px;
    height: 3px;
    background: #E63946; /* Brand Red-Pink */
    margin: 15px auto 0;
    transition: width 0.4s ease;
}

/* Hover Effects */
.team-card-premium:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(16, 47, 101, 0.15);
}

.team-card-premium:hover .team-img-wrapper img {
    transform: scale(1.1);
}

.team-card-premium:hover .team-social-overlay {
    right: 0;
}

.team-card-premium:hover .accent-line {
    width: 80px;
}


/* --- Modern Testimonial Styling --- */

.testimonial-card-custom {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    margin: 20px 15px; /* Added margin for shadow visibility */
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: none;
}

.testimonial-card-custom:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(16, 47, 101, 0.1);
}

/* Quote Icon */
.quote-icon {
    font-size: 40px;
    color: rgba(230, 57, 70, 0.15); /* Brand Red with low opacity */
    position: absolute;
    top: 20px;
    right: 30px;
}

.testimonial-text p {
    font-style: italic;
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
}

/* Avatar Styling */
.client-avatar img {
    width: 65px !important; /* Forces uniform size in Owl Carousel */
    height: 65px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f0f0;
}

/* Star Rating */
.star-rating i {
    font-size: 13px;
    color: #E63946; /* Brand Red-Pink */
    margin-right: 2px;
}

/* Header Text Primary Color override to match brand */
.testimonial-section .text-primary {
    color: #102F65 !important; /* Brand Navy */
}

/* --- Page Header Custom Styling --- */
.page-header {
    /* 1. Brand Navy Overlay: adds a professional tint to any image */
    background: linear-gradient(rgba(16, 47, 101, 0.75), rgba(16, 47, 101, 0.75)), 
                url('../img/Interpretation.jpg') center center no-repeat;
    background-size: cover;
    
    /* 2. Smaller size: reducing the height/padding as requested */
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    min-height: 250px;
    display: flex;
    align-items: center;
    border-bottom: 4px solid #E63946; /* Subtle brand red accent line */
}

/* Make the Breadcrumb text slightly smaller and cleaner */
.page-header .breadcrumb-item, 
.page-header .breadcrumb-item a {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.page-header .breadcrumb-item a:hover {
    color: #E63946 !important;
}


/* --- Page Header Custom Styling --- */
.page-header {
    /* 1. Points to your Conference Solutions image */
    background: linear-gradient(rgba(16, 47, 101, 0.75), rgba(16, 47, 101, 0.75)), 
                url('../img/Conference Solutions.jpg') center center no-repeat;
    background-size: cover;
    
    /* 2. Professional Sizing & Accents */
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    min-height: 250px;
    display: flex;
    align-items: center;
    border-bottom: 4px solid #E63946; /* Brand Red accent line */
}

/* Breadcrumb Styling */
.page-header .breadcrumb-item, 
.page-header .breadcrumb-item a {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
}

.page-header .breadcrumb-item a:hover {
    color: #E63946 !important; /* Brand Red hover */
}

/* Ensure the Intro Text is professional */
.project-intro-text p {
    line-height: 1.6;
    color: #555;
    font-size: 1.05rem;
}

/* Custom Project Card styling for consistency */
.project-card-custom {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* Standardizes all project photos */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
}

.project-card-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The Hover Overlay using your Navy brand color */
.project-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 47, 101, 0.85); /* Brand Navy */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-card-custom:hover .project-card-overlay {
    opacity: 1;
}

.overlay-content h4 {
    margin-bottom: 5px;
    font-weight: 700;
}

html {
    scroll-behavior: smooth;
}


/* 1. Prevent the overlay from blocking clicks */
.services-content {
    position: relative;
    z-index: 5; /* Keeps all text and buttons above the dark background */
}

/* 2. Force buttons to the very front so they are always clickable */
.services-item a.btn-book, 
.services-item a.btn-primary,
.services-item a.btn {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important; /* Ensures clicks always register */
}

/* 3. Lighten the dark hover so text is readable */
.services-item:hover .services-content::after {
    /* Adjusted to 0.5 opacity so it's not a "blackout" */
    background: rgba(16, 47, 101, 0.5) !important; 
    z-index: 1; /* Sits behind the text and buttons */
}

/* 4. Contrast Fix: Ensure all elements turn white on hover */
.services-item:hover .service-title,
.services-item:hover .service-text,
.services-item:hover .service-icon,
.services-item:hover .service-list li,
.services-item:hover h4 {
    color: #ffffff !important;
}

/* 5. Ensure the button stays visible and red on hover */
.services-item:hover .btn-book {
    background-color: #E63946 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}


/* --- Why Choose Us Custom Styling --- */

.why-us-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

/* Iconic Accent Box */
.why-us-icon {
    width: 65px;
    height: 65px;
    background: #f8f9fa;
    color: #102F65; /* Brand Navy */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 15px;
    transition: all 0.3s ease;
}

/* Hover Interaction */
.why-us-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 15px 35px rgba(16, 47, 101, 0.1) !important;
    border-color: #102F65;
}

.why-us-card:hover .why-us-icon {
    background: #E63946; /* Brand Red */
    color: #ffffff;
    transform: rotate(10deg);
}

.why-us-card h5 {
    color: #102F65; /* Brand Navy */
    font-weight: 700;
}

.why-us-card p {
    line-height: 1.6;
}

/* Responsive spacing for mobile */
@media (max-width: 768px) {
    .why-us-card {
        padding: 30px 20px !important;
    }
}

/* --- Professional Service Card Styling --- */

.services-item {
    transition: all 0.5s ease-in-out;
    border-bottom: 5px solid transparent !important;
}

.services-item:hover {
    background-color: #102F65 !important; /* Brand Navy */
    transform: translateY(-10px);
    border-bottom: 5px solid #E63946 !important; /* Brand Red accent */
}

/* Service List Bullet Points */
.service-list {
    list-style: none;
    padding: 0;
    text-align: left;
}

.service-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    color: #666;
    transition: color 0.3s ease;
}

.service-list li::before {
    content: "\f00c"; /* FontAwesome Checkmark */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #E63946; /* Brand Red */
}

/* Hover Visibility & Clickability Fixes */
.services-content {
    position: relative;
    z-index: 5;
}

.services-item:hover .services-content::after {
    background: rgba(16, 47, 101, 0.5) !important; /* Lighter overlay */
    z-index: 1;
}

.services-item a.btn-book {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    display: inline-block !important;
}

.services-item:hover .service-title,
.services-item:hover .service-text,
.services-item:hover .service-icon,
.services-item:hover .service-list li {
    color: #ffffff !important;
}

.services-item:hover .service-list li::before {
    color: #ffffff !important;
}

/* Book Now Button Styling */
.btn-book {
    background-color: #E63946; /* Brand Red */
    color: #ffffff;
    border: none;
    transition: 0.3s;
}

.btn-book:hover {
    background-color: #ffffff !important;
    color: #102F65 !important;
}

/* Language Section Styling */
.category-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.language-tag {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50px;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
    cursor: default;
    font-size: 0.9rem;
}

/* Hover Effect */
.language-tag:hover {
    background-color: var(--bs-primary); /* Uses your theme's primary color */
    color: white;
    border-color: var(--bs-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Optional: Different style for Local Languages */
.language-tag.local {
    background-color: #ffffff;
    border-style: dashed; /* Gives them a slightly different look */
}

.language-tag.local:hover {
    background-color: #198754; /* Success/Green color often used for local reach */
    border-color: #198754;
    border-style: solid;
}


/* Accreditation Styling */
.cert-card {
    background: rgba(255, 255, 255, 0.05); /* Subtle transparent background */
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
}

.cert-card:hover {
    background: rgba(255, 255, 255, 1); /* Turns white on hover for clarity */
    transform: scale(1.05);
}

.cert-logo {
    max-height: 50px; /* Keeps logos consistent in size */
    width: auto;
    object-fit: contain;
}

/* Specific fix for ATA if it has a dark blue background */
.cert-card:has(img[alt*="ATA"]) {
    padding: 5px;
}








    .about-img-container {
        position: relative;
        display: block;
        margin-bottom: 40px; /* Space for the overlapping video on mobile */
    }

    .hover-video-wrapper {
        position: absolute;
        bottom: -20px; /* Offset from the bottom of the main image */
        right: -20px;  /* Offset from the right of the main image */
        width: 220px;  /* Width of the video preview */
        aspect-ratio: 16 / 9; /* Maintains standard video shape */
        border: 4px solid #ffffff;
        border-radius: 12px;
        overflow: hidden;
        background-color: #000;
        z-index: 5;
        transition: all 0.3s ease;
    }

    .hover-video-wrapper:hover {
        transform: scale(1.05);
        border-color: var(--bs-primary); /* Uses Bootstrap primary color on hover */
    }

    /* Mobile adjustments so the video doesn't overflow the screen */
    @media (max-width: 768px) {
        .hover-video-wrapper {
            width: 160px;
            bottom: -10px;
            right: 0px;
        }
    }










    .bg-primary-soft {
        background-color: rgba(13, 110, 253, 0.1); /* Matches Bootstrap Primary at 10% opacity */
    }
    
    .process-step {
        position: relative;
    }
    
    /* Optional vertical line connecting the steps */
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 20px;
        top: 45px;
        width: 2px;
        height: calc(100% - 35px);
        background-color: #dee2e6;
    }


    /* Prevents the modal from being too small and forcing the dropdown up */
#languageModal .modal-body {
    min-height: 250px; 
}

/* Optional: Ensures the select menu has enough space */
.form-select {
    cursor: pointer;
}


/* Forces the modal body to be tall enough so the dropdown opens DOWN */
#languageModal .modal-body {
    min-height: 350px !important; 
}

/* Fixes the overlap seen in your screenshot */
.modal-content {
    overflow: visible !important;
}





/* Hero Header Backgrounds */
.page-header-led {
    background: linear-gradient(rgba(29, 45, 80, 0.8), rgba(29, 45, 80, 0.8)), url(../img/Screeeeeen.png) center center no-repeat;
    background-size: cover;
}

/* Common Header Styles */
.page-header-led h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

/* Breadcrumb overlay fix */
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* Custom icon styling for these pages */
.service-setup-card i {
    transition: 0.3s;
}

.service-setup-card:hover i {
    transform: scale(1.1);
}




/* Hero Header Backgrounds */
.page-header-led {
    background: linear-gradient(rgba(29, 45, 80, 0.8), rgba(29, 45, 80, 0.8)), url(../img/Screeeeeen.png) center center no-repeat;
    background-size: cover;
}

/* Common Header Styles */
.page-header-led h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

/* Breadcrumb overlay fix */
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* Custom icon styling for these pages */
.service-setup-card i {
    transition: 0.3s;
}

.service-setup-card:hover i {
    transform: scale(1.1);
}







/* --- Video Tech Hero Header Style --- */
.video-tech-hero {
    /* Replace with your image path */
    background: url('../img/your-video-bg.jpg') center center no-repeat;
    background-size: cover;
    min-height: 500px; /* Adjust height as needed */
    display: flex;
    align-items: center;
    position: relative;
}

/* The Red Title Box on the Left */
.red-title-box {
    position: absolute;
    left: 10%; /* Adjust horizontal position */
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023; /* The specific red from your example */
    padding: 3rem 4rem;
    max-width: 600px;
    z-index: 2;
}

.red-title-box h1 {
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* The small white dash below the title */
.white-dash {
    width: 50px;
    height: 4px;
    background-color: #fff;
}

/* The Red Contact Box on the Bottom Right */
.red-contact-box {
    position: absolute;
    right: 10%;
    bottom: 0;
    background-color: #D10023;
    padding: 1rem 2.5rem;
    z-index: 2;
}

.red-contact-box a {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.red-contact-box a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 991.98px) {
    .video-tech-hero {
        min-height: 400px;
    }
    .red-title-box {
        left: 5%;
        padding: 2rem 3rem;
    }
    .red-title-box h1 {
        font-size: 2.5rem;
    }
    .red-contact-box {
        right: 5%;
        padding: 0.8rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .video-tech-hero {
        align-items: flex-end; /* Push content to bottom on mobile */
        min-height: auto;
        padding-top: 300px; /* Show image at top */
    }
    .red-title-box {
        position: relative; /* Stack naturally */
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        padding: 2rem;
        margin-bottom: 0;
    }
    .red-contact-box {
        position: relative; /* Stack below title box */
        right: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 1.5rem;
    }
}







/* --- Video Tech Hero Header Style --- */
.video-tech-hero {
    /* Path to your image */
    background: url('../img/Video\ tec.jpg') center center no-repeat;
    background-size: cover;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Keep the rest of your existing CSS for the red boxes */
.red-title-box {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 3rem 4rem;
    max-width: 600px;
    z-index: 2;
}

.red-title-box h1 {
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.white-dash {
    width: 50px;
    height: 4px;
    background-color: #fff;
}

.red-contact-box {
    position: absolute;
    right: 10%;
    bottom: 0;
    background-color: #D10023;
    padding: 1rem 2.5rem;
    z-index: 2;
}

.red-contact-box a {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.red-contact-box a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}



/* These classes reuse the same red-box styles for consistency */
.red-title-box {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 3rem 4rem;
    max-width: 650px;
    z-index: 2;
}

.red-contact-box {
    position: absolute;
    right: 10%;
    bottom: 0;
    background-color: #D10023;
    padding: 1rem 2.5rem;
    z-index: 2;
}


/* --- LED Screen Hero Header Style --- */
.led-screen-hero {
    /* Ensure the image name matches what you saved on your laptop */
    background: url('../img/IMG-20260122-WA0027.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px; /* Slightly shorter height for a cleaner look */
    display: flex;
    align-items: center;
    position: relative;
}

/* Resized Smaller Red Title Box */
.red-title-box-small {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 2rem 3rem; /* Reduced padding from 3rem 4rem */
    max-width: 500px;   /* Reduced width from 650px */
    z-index: 2;
}

/* Ensures the heading doesn't wrap awkwardly in the smaller box */
.red-title-box-small h1 {
    font-size: 1.75rem; /* Smaller font size */
    letter-spacing: 1px;
    margin: 0;
}

.white-dash {
    width: 40px;
    height: 3px;
    background-color: #fff;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .red-title-box-small {
        left: 0;
        width: 100%;
        max-width: none;
        padding: 1.5rem 2rem;
        text-align: center;
    }
    .white-dash {
        margin: 10px auto 0;
    }
}




/* --- LED Screen Hero Header Style --- */
.led-screen-hero {
    background: url('../img/IMG-20260122-WA0027.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px; 
    display: flex;
    align-items: center;
    position: relative;
}

/* Compact Red Title Box */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    /* Reduced padding to make the box smaller */
    padding: 1.5rem 2.5rem; 
    /* Allows the box to wrap tightly around the text */
    max-width: fit-content;
    z-index: 2;
}

/* Larger Text inside the Compact Box */
.red-title-box-compact h1 {
    font-size: 2.2rem; /* Increased from 1.75rem */
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .red-title-box-compact {
        left: 0;
        width: 100%;
        max-width: none;
        padding: 1.5rem;
        text-align: center;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}



/* --- Video Tech Hero Header Style --- */
.video-tech-hero {
    /* Ensure your image 'video-bg.jpg' is in the img folder */
    background: url('../img/Video\ tec.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Compact Red Title Box */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

/* Larger Text inside the Compact Box */
.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .red-title-box-compact {
        left: 0;
        width: 100%;
        max-width: none;
        padding: 1.5rem;
        text-align: center;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}




/* --- Lighting Tech Hero Header Style --- */
.lighting-tech-hero {
    /* Replace 'lighting-bg.jpg' with your actual image file name */
    background: url('../img/lighting\ tec.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Compact Red Title Box (Reused from previous pages for consistency) */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* --- Stage Tech Hero Header Style --- */
.stage-tech-hero {
    /* Copy your stage background image to the img folder */
    background: url('../img/stage\ tec.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Compact Red Title Box (Universal Style) */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .stage-tech-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}


/* --- Sound Engineering Hero Header Style --- */
.sound-tech-hero {
    /* Copy your sound equipment background image to the img folder */
    background: url('../img/sound\ eng.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Compact Red Title Box (Reused Universal Style) */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .sound-tech-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}



/* --- Tour Guide Hero Header Style --- */
.tour-guide-hero {
    background: url('../img/tour.png') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing your consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .tour-guide-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}
/* --- FIXED LED Poster Hero Header Style --- */
.led-poster-hero {
    /* 1. background: #ffffff ensures any 'extra' space on the sides matches the image background */
    background: #ffffff url('../img/Gemini_Generated_Image_so5zztso5zztso5z.png') center center no-repeat;
    
    /* 2. background-size: contain; prevents cropping so the full poster is visible */
    background-size: contain; 
    
    min-height: 500px; 
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden; /* Prevents unwanted scrollbars */
}

/* Red Title Box Style - Matches your brand consistency */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023; 
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 10; /* Keeps it above the background image */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff !important;
}

/* --- Responsive Adjustments --- */

/* For Large Screens: Keeps the red box from covering the posters */
@media (min-width: 992px) {
    .red-title-box-compact {
        left: 5%; 
    }
}

/* For Tablets and Medium Screens */
@media (max-width: 991.98px) {
    .led-poster-hero {
        min-height: 400px;
    }
    .red-title-box-compact {
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

/* For Mobile Phones: Stacks the box and image for better visibility */
@media (max-width: 767.98px) {
    .led-poster-hero {
        min-height: 350px;
        background-position: center bottom; /* Moves posters down on mobile */
        align-items: flex-start; /* Moves red box to the top on mobile */
        padding-top: 40px;
    }
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 1.5rem 1rem;
        box-shadow: none;
    }
}


/* --- Conference Tech Hero Header Style --- */
.conference-tech-hero {
    background: url('../img/conference\ 3.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Universal Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .conference-tech-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}


/* --- Professional Streaming Hero Header Style --- */
.streaming-hero {
    background: url('../img/streaming.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Universal Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .streaming-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}



/* --- Desktop: Sidebar Pop-out --- */
@media (min-width: 992px) {
    .dropdown-submenu { position: relative; }
    
    /* Hide the collapse feature on desktop so hover works */
    .sub-dropdown-container.collapse:not(.show) { display: none; }
    
    .dropdown-submenu .sub-dropdown-container {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 250px;
        background-color: #1D2D50;
        display: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .dropdown-submenu:hover .sub-dropdown-container {
        display: block;
    }
    
    /* Hide the toggle behavior for desktop */
    .submenu-toggle[data-bs-toggle="collapse"] { pointer-events: none; }
}

/* --- Mobile: Accordion Style --- */
@media (max-width: 991px) {
    .sub-dropdown-container {
        background-color: rgba(0, 0, 0, 0.1); /* Darker background for depth */
        border-left: 3px solid #D10023; /* LTS Red accent */
        margin-left: 10px;
    }
    
    .dropdown-submenu i {
        transition: transform 0.3s ease;
    }
    
    /* Rotate the arrow when the submenu is open */
    .submenu-toggle[aria-expanded="true"] i {
        transform: rotate(90deg);
    }

    /* Fixed alignment for the main menu in mobile view */
    .dropdown-menu {
        border: none !important;
        padding-left: 0 !important;
    }
}



/* --- Rapporteuring Hero Header Style --- */
.rapporteuring-bg {
    background: url('../img/Rapportouring.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing your consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}


/* --- Localization Hero Header Style --- */
.localization-bg {
    background: url('../img/Localization.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing your consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}


/* Force hide stuck owl-dots and ensure content is clickable */
.owl-dots {
    display: none !important;
}


/* If the dot is a preloader stuck on the screen */
#spinner, .show.bg-white.position-fixed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}




/* --- Transcription Hero Header Style --- */
.transcription-bg {
    background: url('../img/Transcription.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing your consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}



/* --- Voice Over Hero Header Style --- */
.voice-over-bg {
    background: url('../img/Voice\ Over.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing your consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}


/* --- Corporate Events Hero Header Style --- */
.corporate-events-bg {
    background: url('../img/Corporate\ Events.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Red Title Box Style - Matches brand consistency */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}



/* --- Multilingual Events Hero Header Style --- */
.multilingual-bg {
    background: url('../img/Multilingual\ Events.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}



/* --- Conference Solutions Hero Header Style --- */
.conference-solutions-bg {
    background: url('../img/Conference\ Solutions.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing your consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}

/* --- Hybrid & Live Stream Hero Header Style --- */
.hybrid-bg {
    background: url('../img/Live\ Stream.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Red Title Box Style - Matches brand consistency */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}


/* --- Audio Visual Hero Header Style --- */
.audio-visual-bg {
    background: url('../img/Audio\ Visual.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing your consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}


/* --- Professional Translation Hero Header Style --- */
.translation-bg {
    background: url('../img/Translation.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Reusing your consistent Compact Red Title Box Style */
.red-title-box-compact {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D10023;
    padding: 1.5rem 2.5rem; 
    max-width: fit-content;
    z-index: 2;
}

.red-title-box-compact h1 {
    font-size: 2.2rem; 
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mobile Optimizations --- */
@media (max-width: 991.98px) {
    .service-hero {
        min-height: 350px;
    }
    .red-title-box-compact {
        left: 5%;
        padding: 1.2rem 2rem;
    }
    .red-title-box-compact h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .red-title-box-compact {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 2rem 1rem;
    }
}




/* --- Interpretation Hero Header Style --- */
.interpretation-bg {
    background: url('../img/Interpretation\ page.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Numbered Box Styling */
.bg-white.p-4.rounded-4.h-100.shadow-sm {
    transition: transform 0.3s ease;
    border-bottom: 5px solid transparent;
}

.bg-white.p-4.rounded-4.h-100.shadow-sm:hover {
    transform: translateY(-10px);
    border-bottom: 5px solid #D10023; /* LTS Red */
}

/* --- Mobile Fixes --- */
@media (max-width: 991.98px) {
    .interpretation-bg { min-height: 350px; }
    .red-title-box-compact { left: 0; width: 100%; text-align: center; }
}





/* WhatsApp Floating Button - Fixed to Bottom Left */
.whatsapp-float-left {
    position: fixed !important;
    width: 60px;
    height: 60px;
    bottom: 40px;
    left: 40px; /* Moved to Left */
    background-color: #25d366 !important;
    color: #FFF !important;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 99999 !important; /* Extremely high to stay above everything */
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    
    /* Forced Visibility Fixes */
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.3s ease;
}

.whatsapp-float-left:hover {
    background-color: #128c7e !important;
    transform: scale(1.1);
}

.my-float {
    margin-top: 2px;
}

/* Mobile Optimization for Left Side */
@media screen and (max-width: 767px) {
    .whatsapp-float-left {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px; /* Aligned for mobile thumbs */
        font-size: 22px;
    }
}


/* Force TikTok icon to show blue on the light background */
.fa-tiktok {
    font-weight: 400;
    color: #001f3f !important; /* Matches your brand blue */
}

/* Fix for the white-on-white issue seen in screenshots */
.top-link a.bg-light i {
    visibility: visible !important;
    opacity: 1 !important;
}



/* Styling for the new Interpretation image */
.image-hover-effect {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.image-hover-effect:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

.image-hover-effect img {
    transition: transform 0.6s ease;
    object-fit: cover;
    min-height: 400px; /* Ensures a consistent look on larger screens */
}

.image-hover-effect:hover img {
    transform: scale(1.05); /* Subtle zoom in on hover */
}

/* Mobile Fix: Ensure image doesn't get too tall on phones */
@media (max-width: 767.98px) {
    .image-hover-effect img {
        min-height: auto;
    }
}