/* ====================================== Home Page Custom Styles ====================================== */

/*-----------------------[ Our Story Section CSS ]------------------------*/
.our-story-section {
    padding: 80px 0 60px;
    margin-top: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    background-image: url('../images/about/commitment-bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.our-story-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.our-story-section .how-to-work-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    object-fit: contain;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
}

.our-story-section .container {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
    min-width: 320px;
}

.our-story-section .cap-text {
    position: relative;
    z-index: 10;
    display: inline-block !important;
    padding: 6px 16px !important;
    background-color: #D4E3E3 !important;
    color: #4A7C7C !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
    margin-bottom: 20px !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

.our-story-section .cap-text::after {
    display: none !important;
}

.our-story-section .sec-text {
    position: relative;
    z-index: 10;
    text-align: center;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-bottom: 25px !important;
    line-height: 1.2 !important;
    padding-bottom: 0 !important;
}

.our-story-section .sec-text .highlight-orange {
    color: #FF6B35 !important;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-weight: 800;
}

.our-story-section .sec-text .highlight-orange::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(255, 107, 53, 0.3);
    z-index: -1;
    border-radius: 4px;
}

.our-story-section .sec-sub-text {
    position: relative;
    z-index: 10;
    text-align: center;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #FFFFFF !important;
    opacity: 0.95;
    margin-bottom: 15px !important;
    max-width: 850px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.our-story-section .sec-sub-text:last-child {
    margin-bottom: 0 !important;
}

/* Responsive styles for our-story-section */
@media (max-width: 991px) {
    .our-story-section {
        padding: 60px 0 50px;
    }

    .our-story-section .sec-text {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 767px) {
    .our-story-section {
        padding: 50px 0 40px;
        background-position: 35% center;
        background-attachment: scroll;
    }

    .our-story-section::after {
        background: rgba(0, 0, 0, 0.6);
    }

    .our-story-section .cap-text {
        font-size: 12px !important;
        padding: 5px 12px !important;
        margin-bottom: 15px !important;
    }

    .our-story-section .sec-text {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }

    .our-story-section .sec-sub-text {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
}

/* Global scaling to make sections more compact - eliminate deadspace */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
}



/* Ensure proper centering and no horizontal scroll */
html {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    height: auto;
}

/* Remove any default margins/padding that might cause deadspace */
* {
    box-sizing: border-box;
}

/* Ensure main content fills the space properly */
.main-content,
.wrapper,
body>div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    .site-wrapper {
        transform: scale(1);
        width: 100%;
        height: auto;
    }
}

/* ====================================== Our Commitment Section CSS ====================================== */
.commitment-section {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
}

.commitment-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.commitment-section .container {
    position: relative;
    z-index: 2;
}

.commitment-section .commitment-content {
    text-align: center;
    color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
}

.commitment-section .commitment-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
    display: block;
}

.commitment-section .commitment-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 30px;
}

.commitment-section .commitment-text {
    font-size: 18px;
    line-height: 1.8;
    color: #ffffff;
    margin-bottom: 20px;
    opacity: 0.95;
}

@media (max-width: 991px) {
    .commitment-section {
        padding: 80px 0;
    }

    .commitment-section .commitment-title {
        font-size: 36px;
    }

    .commitment-section .commitment-text {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .commitment-section {
        padding: 60px 0;
    }

    .commitment-section .commitment-title {
        font-size: 28px;
    }

    .commitment-section .commitment-label {
        font-size: 12px;
    }

    .commitment-section .commitment-text {
        font-size: 15px;
    }
}

/* ====================================== Lector Style Testimonials CSS - Reduced Size ====================================== */

@media (min-width: 992px) {
    .testimonial.style-3 {
        padding-bottom: 120px !important;
        /* Reduced from 200px */
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider {
    position: relative;
}

@media (min-width: 992px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider {
        width: 450px;
        /* Reduced from 600px */
        height: 450px;
        /* Reduced from 600px */
        border-radius: 50%;
        margin: 0 auto;
        box-shadow: 0px 12px 46px 0px rgba(27, 16, 66, 0.06);
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    /* Reduced from 600px */
    height: 450px;
    /* Reduced from 600px */
    transform: rotateY(-180deg) rotateZ(-90deg);
}

@media (max-width: 991px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider svg {
        display: none;
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider svg circle {
    stroke-dasharray: 1413.537214px;
    /* Adjusted for smaller circle */
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 2px;
    stroke: #FF6B35;
    fill: none;
}

.testimonial.style-3 .section-wrapper .testimonial-slider svg circle.animation-one {
    animation: animate_countdown 20.5s linear infinite forwards;
}

.testimonial.style-3 .section-wrapper .testimonial-slider svg circle.animation-two {
    animation: animate_countdown_one 20.5s linear infinite forwards;
}

.testimonial.style-3 .section-wrapper .testimonial-slider h6 {
    color: #1f2e2e;
    text-transform: uppercase;
    font-size: 28px;
    /* Reduced from 36px */
    margin: 0px;
    text-align: center;
}

@media (max-width: 575px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider h6 {
        font-size: 22px;
        /* Reduced from 26px */
    }
}

@media (min-width: 992px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider h6 {
        transform: translateY(100px);
        /* Reduced from 130px */
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    text-align: center;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item {
    box-shadow: none;
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item {
        padding: 20px;
        /* Reduced from 30px */
    }
}

@media (max-width: 575px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item {
        padding-top: 10px !important;
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item .post-inner {
    padding: 0px;
}

@media (min-width: 576px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item .post-inner {
        padding: 20px;
        /* Reduced from 30px */
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item h5 {
    margin-bottom: 0;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item h5 a {
    font-weight: 500;
    font-size: 16px;
    /* Reduced from 18px */
    color: #1f2e2e;
    text-transform: capitalize;
    transition: all 0.3s ease;
}

@media (min-width: 576px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item h5 a {
        font-size: 18px;
        /* Reduced from 22px */
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item h5 a:hover {
    color: #FF6B35;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item p {
    margin-bottom: 8px !important;
    /* Reduced from 10px */
    line-height: 22px;
    /* Reduced from 26px */
    font-size: 14px;
    /* Reduced from 16px */
}

@media (min-width: 576px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item p {
        margin-bottom: 20px !important;
        /* Reduced from 30px */
        line-height: 26px;
        /* Reduced from 30px */
        font-size: 16px;
        /* Reduced from 18px */
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item p::after {
    display: none;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item span {
    display: inline-block;
    font-size: 12px;
    color: #324848;
}

@media (max-width: 991px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .section-wrapper .post-item {
        padding: 30px 10px;
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation {
    transform: translateY(-50px);
    /* Reduced from -60px */
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation {
        transform: translateY(-30px);
        /* Reduced from -40px */
    }
}

@media (min-width: 992px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation {
        transform: translateY(-120px);
        /* Reduced from -150px */
    }
}

@media (max-width: 575px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation {
        transform: translateY(-15px);
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation .testi-next,
.testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation .testi-prev {
    color: #324848;
    cursor: pointer;
    font-weight: 700;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation .testi-next:hover,
.testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation .testi-prev:hover {
    color: #FF6B35;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation .testi-next {
    margin-right: 5px;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-navigation .testi-prev {
    margin-left: 5px;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination {
    height: 55px;
    /* Reduced from 70px */
    text-align: center;
}

@media (min-width: 992px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination {
        height: 110px;
        /* Reduced from 140px */
    }
}

@media (max-width: 575px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination {
        margin-top: 10px;
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span {
    display: inline-block;
    background: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face') no-repeat center center;
    background-size: cover;
    height: 40px;
    /* Reduced from 50px */
    width: 40px;
    /* Reduced from 50px */
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    margin: 0 4px;
    /* Reduced from 5px */
}

@media (max-width: 575px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span {
        height: 32px;
        /* Reduced from 40px */
        width: 32px;
        /* Reduced from 40px */
        margin: 5px;
        /* Reduced from 7px */
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(2) {
    background-image: url('https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face');
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(3) {
    background-image: url('https://images.unsplash.com/photo-1494790108755-2616c04e1400?w=100&h=100&fit=crop&crop=face');
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(4) {
    background-image: url('https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=100&h=100&fit=crop&crop=face');
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(5) {
    background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face');
}

@media (min-width: 992px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span {
        position: absolute;
        z-index: 1;
    }

    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(1) {
        top: -8px;
        /* Adjusted for smaller circle */
        left: -40px;
        /* Adjusted for smaller circle */
        width: 80px;
        /* Reduced from 100px */
        height: 80px;
        /* Reduced from 100px */
    }

    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(2) {
        bottom: -20px;
        /* Adjusted for smaller circle */
        left: -8px;
        /* Adjusted for smaller circle */
        width: 65px;
        /* Reduced from 84px */
        height: 65px;
        /* Reduced from 84px */
    }

    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(3) {
        width: 85px;
        /* Reduced from 110px */
        height: 85px;
        /* Reduced from 110px */
        top: calc(100% + 15px);
        /* Adjusted for smaller circle */
        left: 50%;
        transform: translateX(-50%);
    }

    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(4) {
        bottom: -40px;
        /* Adjusted for smaller circle */
        right: -20px;
        /* Adjusted for smaller circle */
        width: 90px;
        /* Reduced from 120px */
        height: 90px;
        /* Reduced from 120px */
    }

    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span:nth-child(5) {
        top: 0;
        right: 0;
        width: 70px;
        /* Reduced from 90px */
        height: 70px;
        /* Reduced from 90px */
    }
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span.swiper-pagination-bullet-active {
    transform: scale(1.5);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span.swiper-pagination-bullet-active::before,
.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span.swiper-pagination-bullet-active::after {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -10px;
    left: -10px;
    z-index: -2;
    border: 1px solid rgba(31, 46, 46, 0.34);
    border-radius: 100%;
    position: absolute;
    content: "";
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span.swiper-pagination-bullet-active::after {
    animation: animate1 1s linear infinite;
}

.testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span.swiper-pagination-bullet-active::before {
    animation: animate1 2s linear infinite;
}

@media (max-width: 991px) {
    .testimonial.style-3 .section-wrapper .testimonial-slider .testi-pagination span.swiper-pagination-bullet-active {
        margin: 0 10px;
    }
}

/* Animations - Updated for smaller circle */
@keyframes animate_countdown {
    0% {
        stroke-dashoffset: 1413.537214px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes animate_countdown_one {
    0% {
        stroke-dashoffset: 1413.537214px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes animate1 {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Flaticon styles for navigation */
.flaticon-back::before {
    content: "‹";
    font-size: 24px;
}

.flaticon-next::before {
    content: "›";
    font-size: 24px;
}

/* Padding classes - Reduced */
.padding-tb {
    padding: 50px 0;
    /* Reduced from 60px */
}

@media (min-width: 576px) {
    .padding-tb {
        padding: 65px 0;
        /* Reduced from 80px */
    }
}

@media (min-width: 992px) {
    .padding-tb {
        padding: 80px 0;
        /* Reduced from 100px */
    }
}

/* ====================================== 3 Persistent Circles System CSS ====================================== */

/* Gentle idle floating animation */
@keyframes idle-float {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
    }

    25% {
        transform: translateY(-2px) translateX(1px);
    }

    50% {
        transform: translateY(0px) translateX(-1px);
    }

    75% {
        transform: translateY(1px) translateX(0px);
    }
}

/* Pulsing glow animation for active circles */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(255, 107, 53, 0.8), 0 0 60px rgba(255, 107, 53, 0.5), 0 0 90px rgba(255, 107, 53, 0.3);
        transform: scale(1.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 107, 53, 0.9), 0 0 80px rgba(255, 107, 53, 0.6), 0 0 120px rgba(255, 107, 53, 0.4);
        transform: scale(1.25);
    }
}

/* Apply idle float to all circles */
.persistent-circle {
    animation: idle-float 9s ease-in-out infinite;
}

.persistent-circle:nth-child(2) {
    animation-delay: -1s;
}

.persistent-circle:nth-child(3) {
    animation-delay: -2s;
}

.persistent-circle:nth-child(4) {
    animation-delay: -3s;
}

/* Enhanced active circle styles */
.persistent-circle.active {
    filter: drop-shadow(0 15px 35px rgba(255, 107, 53, 0.4));
}

/* Enhanced inactive circle styles */
.persistent-circle.inactive {
    filter: grayscale(0.3) brightness(0.8);
}

/* Responsive Design */
@media (max-width: 1199px) {
    .industries-content {
        padding-right: 30px;
    }

    .industry-title {
        font-size: 3rem !important;
    }

    .vertical-industries-watermark {
        right: -28px !important;
        font-size: clamp(50px, 7vw, 70px) !important;
    }

    .backdrop-letter {
        font-size: clamp(320px, 115vh, 580px) !important;
    }

    /* Scale circles down ~20% for tablet */
    #circle-healthcare {
        width: 160px !important;
        height: 160px !important;
    }

    #circle-finance {
        width: 128px !important;
        height: 128px !important;
    }

    #circle-retail {
        width: 104px !important;
        height: 104px !important;
    }
}

@media (max-width: 991px) {
    .industries-split-hero {
        padding: 60px 0 !important;
    }

    .industries-content {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .industries-canvas {
        height: 320px !important;
        order: -1;
    }

    .industry-title {
        font-size: 2.2rem !important;
        text-align: center;
    }

    .industry-strapline,
    .industry-summary {
        text-align: center;
    }

    .cta-row {
        justify-content: center;
    }

    .navigation-controls {
        justify-content: center;
    }

    .vertical-industries-watermark {
        display: none !important;
    }

    .backdrop-letter {
        font-size: clamp(280px, 110vh, 450px) !important;
        left: 55% !important;
    }

    /* Adjust positions for mobile layout */
    #circle-healthcare {
        top: 15% !important;
        right: 10% !important;
        width: 140px !important;
        height: 140px !important;
    }

    #circle-finance {
        top: 50% !important;
        left: 20% !important;
        width: 112px !important;
        height: 112px !important;
    }

    #circle-retail {
        top: 75% !important;
        right: 25% !important;
        width: 90px !important;
        height: 90px !important;
    }
}

@media (max-width: 767px) {
    .industries-canvas {
        height: 280px !important;
    }

    .industry-title {
        font-size: 2rem !important;
    }

    .industry-strapline {
        font-size: 1rem !important;
    }

    .industry-summary {
        font-size: 1rem !important;
    }

    .cta-row {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .btn-primary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .backdrop-letter {
        font-size: clamp(200px, 90vh, 320px) !important;
        opacity: 0.05 !important;
        left: 52% !important;
    }

    /* Further scale down for mobile; hide labels */
    #circle-healthcare {
        width: 110px !important;
        height: 110px !important;
    }

    #circle-finance {
        width: 88px !important;
        height: 88px !important;
    }

    #circle-retail {
        width: 72px !important;
        height: 72px !important;
    }

    .circle-label {
        display: none !important;
    }

    .circle-ring {
        border-width: 2px !important;
        top: -4px !important;
        left: -4px !important;
        right: -4px !important;
        bottom: -4px !important;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .persistent-circle {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }

    .backdrop-letter {
        transition: opacity 0.3s ease !important;
    }

    .circle-ring,
    .circle-base,
    .circle-image,
    .circle-label {
        transition: opacity 0.3s ease !important;
    }

    .circle-ring {
        animation: none !important;
    }
}

/* ====================================== New About Section Styles ====================================== */

/* --- 1. Variables & Global Settings --- */
.section-about {
    --ip-teal: #4A7C7C;
    --ip-teal-dark: #3A6565;
    --ip-teal-light: #D4E3E3;
    --ip-orange: #FF6B35;
    --ip-dark: #1f2e2e;
    --text-grey: #5f6c7b;
    --bg-off-white: #f8fcfc;
    --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    --card-hover-shadow: 0 12px 30px rgba(0, 137, 123, 0.12);
}

/* --- 2. Animations --- */
@keyframes float-about {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes pulse-glow-about {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 137, 123, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 137, 123, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 137, 123, 0);
    }
}

@keyframes spin-slow-about {
    0% {
        transform: rotate(0deg) scale(1.5);
    }

    50% {
        transform: rotate(180deg) scale(1.4);
    }

    100% {
        transform: rotate(360deg) scale(1.5);
    }
}

.reveal-element {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-element.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* --- 3. Section Styling --- */
.section-about {
    padding: 50px 0;
    background: linear-gradient(135deg, #fff 0%, var(--bg-off-white) 100%);
    position: relative;
    overflow: hidden;
}

.section-about::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 137, 123, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.top-right-bg-animation {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-about 60s linear infinite;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.top-left-bg-animation {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-about 60s linear infinite reverse;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.section-about .container {
    position: relative;
    z-index: 2;
    max-width: 90%;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: auto;
    margin-right: auto;
}

.section-about .row {
    align-items: center;
    justify-content: center;
    gap: 0;
}

.section-about .col-lg-6:first-child {
    padding-right: 15px;
    padding-left: 15px;
}

.section-about .col-lg-6:last-child {
    padding-left: 15px;
    padding-right: 15px;
}

/* --- 4. Typography --- */
.section-about .badge-pill {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--ip-teal-light);
    color: var(--ip-teal);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.section-about .main-heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ip-teal);
    margin-bottom: 12px;
    line-height: 1.1;
}

.section-about .highlight-text {
    color: var(--ip-orange);
    position: relative;
    display: inline-block;
}

.section-about .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 107, 53, 0.2);
    z-index: -1;
    border-radius: 4px;
}

.section-about .sub-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ip-teal);
    margin-bottom: 10px;
}

.section-about .description-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-grey);
    margin-bottom: 8px;
    max-width: 100%;
}

.section-about .footnote-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-grey);
    font-style: italic;
    margin-bottom: 18px;
    max-width: 100%;
    border-left: 2px solid var(--ip-teal-light);
    padding-left: 10px;
}

/* --- 5. Features Grid --- */
.section-about .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
    margin-top: 18px;
    margin-bottom: 22px;
}

.section-about .feature-card {
    background: #fff;
    padding: 16px 18px;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-about .feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(0, 137, 123, 0.2);
}

.section-about .icon-box {
    width: 36px;
    height: 36px;
    background: var(--ip-dark);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.section-about .feature-card:hover .icon-box {
    background: var(--ip-teal);
    transform: rotateY(180deg);
}

.section-about .feature-card:hover .icon-box i {
    transform: rotateY(-180deg);
    transition: transform 0.3s ease;
}

.section-about .feature-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ip-dark);
    margin-bottom: 5px;
}

.section-about .feature-desc {
    font-size: 0.8rem;
    color: var(--text-grey);
    margin: 0;
    line-height: 1.4;
}

/* --- 6. CTA & Contact --- */
.section-about .action-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.section-about .btn-primary-custom {
    background-color: var(--ip-teal);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 137, 123, 0.2);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.section-about .btn-primary-custom:hover {
    background-color: var(--ip-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(0, 137, 123, 0.3);
    color: white;
}

.section-about .contact-widget {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-about .contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.1);
    color: var(--ip-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-glow-about 2s infinite;
    font-size: 0.9rem;
}

.section-about .contact-info small {
    display: block;
    font-size: 10px;
    color: var(--text-grey);
    font-weight: 600;
    text-transform: uppercase;
}

.section-about .contact-info a {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ip-dark);
    text-decoration: none;
}

/* --- 7. Image Side --- */
.section-about .image-wrapper {
    position: relative;
    padding: 10px;
    text-align: center;
}

.section-about .blob-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e0f2f1' d='M44.7,-76.4C58.9,-69.2,71.8,-59.1,81.6,-46.6C91.4,-34.1,98.1,-19.2,95.8,-5.3C93.5,8.6,82.2,21.5,70.9,32.3C59.6,43.1,48.3,51.8,36.4,59.3C24.5,66.8,12,73.1,-1.2,75.2C-14.4,77.3,-29.8,75.2,-43.3,68.4C-56.8,61.6,-68.4,50.1,-77.1,36.6C-85.8,23.1,-91.6,7.6,-89.4,-6.8C-87.2,-21.2,-77,-34.5,-65.4,-45C-53.8,-55.5,-40.8,-63.2,-27.6,-71.1C-14.4,-79,-1,87.1,14.7,85.6L44.7,-76.4Z' transform='translate(100 100)' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 0;
    animation: float-about 8s ease-in-out infinite reverse;
}

.section-about .main-img {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    animation: float-about 6s ease-in-out infinite;
    object-fit: cover;
    height: auto;
}

@media (max-width: 991px) {
    .section-about .main-img {
        object-fit: contain;
        max-width: 100%;
    }
}

.section-about .stats-card {
    position: absolute;
    bottom: 50px;
    left: -15px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 240px;
    border-left: 4px solid var(--ip-orange);
    animation: float-about 7s ease-in-out infinite 1s;
}

.section-about .stats-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ip-dark);
    line-height: 1;
}

.section-about .stats-text {
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-grey);
}

/* --- 8. Responsive Breakpoints --- */

@media (min-width: 1400px) {
    .section-about .container {
        max-width: 85%;
        padding-left: 50px;
        padding-right: 50px;
    }

    .section-about .main-heading {
        font-size: 2.4rem;
    }

    .section-about .col-lg-6:first-child {
        padding-right: 20px;
        padding-left: 15px;
    }

    .section-about .col-lg-6:last-child {
        padding-left: 20px;
        padding-right: 15px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .section-about .container {
        max-width: 88%;
        padding-left: 45px;
        padding-right: 45px;
    }

    .section-about .main-heading {
        font-size: 2.2rem;
    }

    .section-about .col-lg-6:first-child {
        padding-right: 15px;
        padding-left: 15px;
    }

    .section-about .col-lg-6:last-child {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .section-about .container {
        max-width: 92%;
        padding-left: 35px;
        padding-right: 35px;
    }

    .section-about .main-heading {
        font-size: 2rem;
    }

    .section-about .features-grid {
        gap: 15px 18px;
    }

    .section-about .col-lg-6:first-child {
        padding-right: 15px;
        padding-left: 15px;
    }

    .section-about .col-lg-6:last-child {
        padding-left: 10px;
        padding-right: 15px;
    }
}

@media (max-width: 991px) {
    .section-about {
        padding: 45px 0;
    }

    .section-about .container {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-about .main-heading {
        font-size: 1.9rem;
        text-align: center;
    }

    .section-about .sub-heading {
        text-align: center;
        font-size: 1.05rem;
    }

    .section-about .badge-pill {
        display: table;
        margin: 0 auto 12px auto;
    }

    .section-about .description-text,
    .section-about .footnote-text {
        text-align: center;
        max-width: 100%;
    }

    .section-about .col-lg-6 {
        width: 100%;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .section-about .stats-card {
        bottom: -10px;
        left: 50%;
        transform: translateX(0%);
        width: 90%;
        max-width: 260px;
        animation: none;
    }

    /* Landscape image for tablet/mobile */
    .section-about .main-img {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        border-radius: 15px;
    }

    /* Hide desktop animations on mobile/tablet */
    .section-about .top-right-bg-animation,
    .section-about .top-left-bg-animation {
        display: none;
    }

    .section-about .blob-bg {
        display: none;
    }

    /* Center align all content */
    .section-about .action-area {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .section-about .main-heading {
        font-size: 1.8rem;
        text-align: center;
    }

    .section-about .sub-heading {
        text-align: center;
        font-size: 1.05rem;
    }

    .section-about .badge-pill {
        display: table;
        margin: 0 auto 12px auto;
        font-size: 10px;
        padding: 4px 10px;
        letter-spacing: 0.5px;
    }

    .section-about .description-text,
    .section-about .footnote-text {
        text-align: center;
        font-size: 0.9rem;
    }

    .section-about .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .section-about .feature-card {
        flex-direction: row;
        align-items: center;
        gap: 15px;
        padding: 15px;
    }

    .section-about .icon-box {
        margin-bottom: 0;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .section-about .action-area {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .section-about .btn-primary-custom {
        display: block;
        margin: 0 auto;
        width: fit-content;
    }

    .section-about .contact-widget {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .section-about .feature-card {
        flex-direction: column;
        text-align: center;
    }

    .section-about .badge-pill {
        font-size: 9px;
        padding: 3px 8px;
        letter-spacing: 0.3px;
    }

    .section-about .stats-card {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        flex-direction: column;
        text-align: center;
        padding: 10px 12px;
        border-left: none;
        border-top: 3px solid var(--ip-orange);
        max-width: 160px;
        width: 70%;
        margin: 15px auto 0 auto;
    }

    .section-about .stats-number {
        font-size: 1.3rem;
    }

    .section-about .stats-text {
        font-size: 0.65rem;
        line-height: 1.1;
    }
}

/* ====================================== Additional Home Page Enhancements ====================================== */

/* Enhanced hover effects for service cards */
.services.style-2 .post-item:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Smooth transitions for all interactive elements */
.btn-quote,
.call,
.about-box-main {
    transition: all 0.3s ease;
}

/* Enhanced focus states for accessibility */
.btn-quote:focus,
.nav-btn:focus,
.bullet:focus {
    outline: 2px solid #FF6B35;
    outline-offset: 2px;
}

/* Custom scrollbar for home page */
/* Custom scrollbar removed as per user request */

/* ====================================== Interactive Industry Circles ====================================== */
.industry-circles {
    position: absolute;
    right: 4%;
    top: 20%;
    width: 240px;
    height: 60%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
    pointer-events: auto;
    z-index: 3;
}

.industry-circle {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: #eef1f4;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    position: relative;
    overflow: hidden;
}

.industry-circle:focus {
    outline: 3px solid #FF6B35;
    outline-offset: 2px;
}

.industry-circle .circle-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    filter: saturate(0.9) brightness(0.95);
    transition: filter 0.25s ease, transform 0.25s ease;
}

.industry-circle.is-active {
    transform: scale(1.25);
    box-shadow: 0 16px 30px rgba(255, 107, 53, 0.35);
    outline: 3px solid #FF6B35;
    border-color: #FF6B35;
}

.industry-circle.is-active .circle-img {
    filter: saturate(1.2) brightness(1.1);
}

.industry-circle:not(.is-active) {
    opacity: 0.8;
}

.industry-circle:not(.is-active):hover {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 992px) {
    .industry-circles {
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        gap: 12px;
        margin-top: 16px;
        justify-content: center;
    }

    .industry-circle {
        width: 64px;
        height: 64px;
    }

    .industry-circle.is-active {
        transform: scale(1.15);
    }
}

@media (max-width: 576px) {
    .industry-circles {
        gap: 8px;
        margin-top: 12px;
    }

    .industry-circle {
        width: 56px;
        height: 56px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .industry-circle {
        transition: none;
    }

    .industry-circle .circle-img {
        transition: none;
    }
}

/* ====================================== Hero Slider: compact, clean, consistent with rest of site (keeps global scaling) ====================================== */
.hero-slider-section {
    height: 88vh;
    /* was 80vh */
    min-height: 700px;
    /* was 620px */
    max-height: 920px;
    /* was 840px */
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.main-swiper-video-bg::before {
    /* subtle top-bottom overlay for readability */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.55) 100%) !important;
}

/* Tighter content block */
.slide-content {
    min-height: 480px;
    /* was 420px */
}

/* Map hero typography to section system, but compact */
.hero-slider .needs-text {
    color: #19b3b6;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    padding-left: 26px;
}

.hero-slider .needs-text::before {
    /* short accent line */
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FF6B35, #19b3b6);
}

/* Headline smaller to respect your compact look */
.hero-slider .lets-us-do {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.18;
    margin: 8px 0 10px;
    font-size: clamp(2rem, 3.6vw, 3rem);
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Subtext compact and readable */
.hero-slider .residents {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    margin-bottom: 22px;
    max-width: 560px;
}

/* === Center-align hero description text (scoped) === */
.hero-slider-section .residents {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

@media (max-width: 767px) {
    .hero-slider-section .residents {
        text-align: center !important;
    }
}

/* Keep your existing button style; just ensure spacing is compact */
.hero-slider .our-services-btn {
    padding: 12px 24px;
    border-radius: 10px;
    gap: 10px;
    box-shadow: 0 8px 26px rgba(255, 107, 53, 0.22);
}

.hero-slider .our-services-btn img {
    width: 16px;
    height: 16px;
}

/* Controls: simpler, smaller */
.hero-slider-navigation {
    bottom: 40px;
    gap: 12px;
}

.hero-prev,
.hero-next {
    width: 44px;
    height: 44px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Pagination: minimal dots, no labels */
.hero-slider-pagination {
    bottom: 18px;
    gap: 8px;
}

.hero-slider-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.55);
}

.hero-slider-pagination .swiper-pagination-bullet::before {
    display: none !important;
}

.hero-slider-pagination .swiper-pagination-bullet-active {
    background: #FF6B35;
    transform: scale(1.15);
    box-shadow: none;
}

/* Responsive tweaks */
@media (max-width: 991px) {
    .hero-slider-section {
        min-height: 600px;
        /* was 560px */
    }

    .slide-content {
        min-height: 400px;
        /* was 380px */
    }

    .hero-slider .our-services-btn {
        padding: 11px 20px;
    }
}

@media (max-width: 767px) {
    .hero-slider-section {
        min-height: 560px;
        /* was 520px */
    }

    .hero-slider .lets-us-do,
    .hero-slider .residents {
        text-align: left;
    }

    .hero-slider-navigation {
        bottom: 28px;
    }

    .hero-prev,
    .hero-next {
        width: 40px;
        height: 40px;
    }
}

/* Ensure inner swiper fills the section height (override fixed 955px from base) */
.hero-slider {
    height: 100% !important;
}

/* === Hero content vertical offset: move a little lower (tiny bump) === */
.hero-slider-section .slide-content {
    top: 60% !important;
    /* was 58% */
}

@media (max-width: 1199px) {
    .hero-slider-section .slide-content {
        top: 58% !important;
        /* was 56% */
    }
}

@media (max-width: 991px) {
    .hero-slider-section .slide-content {
        top: 56% !important;
        /* was 54% */
    }
}

@media (max-width: 767px) {
    .hero-slider-section .slide-content {
        top: 54% !important;
        /* was 52% */
    }
}

/* === Hero content vertical offset: adjusted lower === */
.hero-slider-section .slide-content {
    top: 62% !important;
    /* was 60% */
}

@media (max-width: 1199px) {
    .hero-slider-section .slide-content {
        top: 60% !important;
        /* was 58% */
    }
}

@media (max-width: 991px) {
    .hero-slider-section .slide-content {
        top: 58% !important;
        /* was 56% */
    }
}

@media (max-width: 767px) {
    .hero-slider-section .slide-content {
        top: 56% !important;
        /* was 54% */
    }
}

/* === Hero heading size: reduced for better balance === */
.hero-slider-section .lets-us-do {
    font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
    /* was clamp(2rem, 3.6vw, 3rem) */
    line-height: 1.15 !important;
}

@media (max-width: 991px) {
    .hero-slider-section .lets-us-do {
        font-size: clamp(1.6rem, 3.8vw, 2.2rem) !important;
    }
}

@media (max-width: 575px) {
    .hero-slider-section .lets-us-do {
        font-size: clamp(1.5rem, 4.5vw, 2rem) !important;
    }
}

/* === Hero: standardize alignment regardless of content length === */
.hero-slider-section .video-swiper-row .col-xxl-7,
.hero-slider-section .main-swiper-row .col-xxl-6,
.hero-slider-section .main-swiper-row .col-xxl-7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* center the stack */
}

/* Center all key elements and constrain width */
.hero-slider-section .needs-text,
.hero-slider-section .lets-us-do,
.hero-slider-section .residents {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 760px;
    /* keep consistent readable width */
}

/* Remove left accent line when centered */
.hero-slider-section .needs-text {
    padding-left: 0 !important;
}

.hero-slider-section .needs-text::before {
    display: none !important;
}

/* Ensure consistent vertical rhythm (independent of text length) */
.hero-slider-section .needs-text {
    margin-bottom: 10px !important;
}

.hero-slider-section .lets-us-do {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}

.hero-slider-section .residents {
    margin-bottom: 22px !important;
}

/* Center CTA and keep width tight */
.hero-slider-section .our-services-btn {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex;
}

/* Prevent responsive rules from forcing left-align on small screens */
@media (max-width: 767px) {

    .hero-slider-section .lets-us-do,
    .hero-slider-section .residents,
    .hero-slider-section .needs-text {
        text-align: center !important;
    }

    .hero-slider-section .our-services-btn {
        display: block !important;
        margin: 20px auto 0 auto !important;
        width: fit-content;
    }
}

/* === Hero: enforce consistent layout regardless of text length === */
.hero-slider-section .lets-us-do {
    /* cap to two lines and preserve consistent height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
    /* 2 lines * 1.15 line-height */
}

.hero-slider-section .residents {
    /* cap to three lines and preserve consistent height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.8em;
    /* 3 lines * 1.6 line-height */
}

/* Keep CTA centered regardless of content length */
.hero-slider-section .our-services-btn {
    align-self: center;
}

/* ====================================== Industries We Serve Section ===================================== */

/* Base Section - Match testimonial padding structure */
.industries.style-3 {
    --ip-teal: #4A7C7C;
    --ip-teal-dark: #3A6565;
    --ip-teal-light: #D4E3E3;
    --ip-orange: #FF6B35;
    --ip-dark: #1f2e2e;
    --text-grey: #5f6c7b;
    --bg-off-white: #f8fcfc;
    padding-top: 80px;
    padding-bottom: 80px;
    background: linear-gradient(135deg, #fff 0%, var(--bg-off-white) 100%);
    position: relative;
    overflow: hidden;
}

/* Radial Gradient Overlay */
.industries.style-3::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 137, 123, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

/* Background Animations */
.top-right-bg-animation-industries {
    position: absolute;
    top: -50px;
    right: -100px;
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-industries 60s linear infinite;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.top-left-bg-animation-industries {
    position: absolute;
    top: -50px;
    left: -100px;
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-industries 60s linear infinite reverse;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.bottom-right-bg-animation-industries {
    position: absolute;
    bottom: -50px;
    right: -100px;
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-industries 60s linear infinite;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.bottom-left-bg-animation-industries {
    position: absolute;
    bottom: -50px;
    left: -100px;
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-industries 60s linear infinite reverse;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

@keyframes spin-slow-industries {
    0% {
        transform: rotate(0deg) scale(1.5);
    }

    50% {
        transform: rotate(180deg) scale(1.4);
    }

    100% {
        transform: rotate(360deg) scale(1.5);
    }
}

@media (min-width: 992px) {
    .industries.style-3 {
        padding-bottom: 200px !important;
    }
}

/* Main Slider Container - Circular Wheel */
.industries.style-3 .section-wrapper .industries-slider {
    position: relative;
    margin-top: 30px;
}

@media (min-width: 992px) {
    .industries.style-3 .section-wrapper .industries-slider {
        width: 450px;
        height: 450px;
        border-radius: 50%;
        margin: 0 auto;
        box-shadow: 0px 12px 46px 0px rgba(27, 16, 66, 0.06);
    }
}

/* SVG Animated Circle */
.industries.style-3 .section-wrapper .industries-slider svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    height: 450px;
    transform: rotateY(-180deg) rotateZ(-90deg);
    pointer-events: none;
}

@media (max-width: 991px) {
    .industries.style-3 .section-wrapper .industries-slider svg {
        display: none;
    }
}

.industries.style-3 .section-wrapper .industries-slider svg circle {
    stroke-dasharray: 1413.72px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 2px;
    stroke: #19b3b6;
    fill: none;
    transform: rotate(0deg) scaleY(-1);
    transform-origin: center;
}

.industries.style-3 .section-wrapper .industries-slider svg circle.animation-one {
    animation: animate_countdown 12s linear forwards;
}

.industries.style-3 .section-wrapper .industries-slider svg circle.animation-two {
    animation: animate_countdown_one 12s linear forwards;
}

/* Section Header Styles */
.industries.style-3 .industries-header {
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.industries.style-3 .container {
    position: relative;
    z-index: 2;
}

.industries.style-3 .industries-header .badge-pill {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--ip-teal-light);
    color: var(--ip-teal);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.industries.style-3 .industries-header .sec-text {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ip-dark);
    margin-bottom: 12px;
    line-height: 1.1;
}

.industries.style-3 .industries-header .sec-text .highlight-orange {
    background: linear-gradient(90deg, var(--ip-orange), #ff8a65, var(--ip-orange));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.industries.style-3 .industries-header .sec-text .highlight-orange::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 107, 53, 0.2);
    z-index: -1;
    border-radius: 4px;
}

.industries.style-3 .industries-header .sec-sub-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-grey);
    max-width: 800px;
    margin: 0 auto 110px;
}

/* Swiper Content Wrapper */
.industries.style-3 .section-wrapper .industries-slider .section-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.industries.style-3 .section-wrapper .industries-slider .section-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    text-align: center;
}

/* Industry Content Items */
.industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item {
    box-shadow: none;
    margin-bottom: 0;
}

/* Mobile Industry Image - Square shape above content */
.industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item .mobile-industry-image {
    display: none;
}

@media (max-width: 991px) {
    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item .mobile-industry-image {
        display: block;
        width: 100%;
        max-width: 400px;
        height: 280px;
        margin: 0 auto 25px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item .mobile-industry-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        background: #f8f9fa;
    }
}

@media (max-width: 575px) {
    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item .mobile-industry-image {
        max-width: 320px;
        height: 240px;
        margin-bottom: 20px;
    }
}

@media (min-width: 992px) {
    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item {
        padding: 30px;
    }
}

@media (max-width: 575px) {
    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item {
        padding-top: 10px !important;
    }
}

.industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item .post-inner {
    padding: 0px;
}

@media (min-width: 576px) {
    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item .post-inner {
        padding: 30px;
    }
}

/* Industry Title */
.industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item h3 {
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 20px;
    color: #1f2e2e;
    text-transform: capitalize;
    transition: all 0.3s ease;
}

@media (min-width: 576px) {
    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item h3 {
        font-size: 24px;
    }
}

/* Industry Description */
.industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item p {
    margin-bottom: 10px !important;
    line-height: 26px;
    font-size: 15px;
    color: #555;
}

@media (min-width: 576px) {
    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item p {
        margin-bottom: 20px !important;
        line-height: 28px;
        font-size: 16px;
    }
}

.industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item p::after {
    display: none;
}

/* Industry Learn More Button */
.industry-learn-more {
    background-color: var(--ip-teal);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 137, 123, 0.2);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-top: 15px;
}

.industry-learn-more:hover {
    background-color: var(--ip-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(0, 137, 123, 0.3);
    color: white;
}

/* Secondary Label */
.industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item span {
    display: inline-block;
    font-size: 13px;
    color: #19b3b6;
    font-weight: 700;
}

@media (max-width: 991px) {
    .industries.style-3 .section-wrapper .industries-slider .section-wrapper .post-item {
        padding: 30px 10px;
    }
}

/* Navigation Arrows */
.industries.style-3 .section-wrapper .industries-slider .industries-navigation {
    transform: translateY(-60px);
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .industries.style-3 .section-wrapper .industries-slider .industries-navigation {
        transform: translateY(-40px);
    }
}

@media (min-width: 992px) {
    .industries.style-3 .section-wrapper .industries-slider .industries-navigation {
        transform: translateY(-100px);
    }
}

@media (max-width: 575px) {
    .industries.style-3 .section-wrapper .industries-slider .industries-navigation {
        transform: translateY(-15px);
    }
}

.industries.style-3 .section-wrapper .industries-slider .industries-navigation .industries-next,
.industries.style-3 .section-wrapper .industries-slider .industries-navigation .industries-prev {
    color: #324848;
    cursor: pointer;
    font-weight: 700;
    font-size: 24px;
    width: 48px;
    height: 48px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.industries.style-3 .section-wrapper .industries-slider .industries-navigation .industries-next:hover,
.industries.style-3 .section-wrapper .industries-slider .industries-navigation .industries-prev:hover {
    color: #FF6B35;
}

.industries.style-3 .section-wrapper .industries-slider .industries-navigation .industries-next {
    margin-right: 5px;
}

.industries.style-3 .section-wrapper .industries-slider .industries-navigation .industries-prev {
    margin-left: 5px;
}

/* Industry Orbit Container - Wrapper for circular icon positioning */
.industries.style-3 .section-wrapper .industries-slider .industry-orbit {
    height: 70px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

@media (max-width: 991px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit {
        display: none;
    }
}

@media (min-width: 992px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 450px;
        height: 450px;
        overflow: visible;
        pointer-events: none;
        display: block;
        margin-top: 0;
    }
}

@media (max-width: 575px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit {
        margin-top: 10px;
        gap: 8px;
    }
}

/* Industry Bullet Base Styles */
.industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.05);
    height: 90px;
    width: 90px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
    cursor: pointer;
    position: relative;
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
    outline: none;
    padding: 0;
    z-index: 10;
    pointer-events: all !important;
}

/* Pulse effect for inactive bullets */
.industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet:not(.is-active)::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid rgba(25, 179, 182, 0.6);
    animation: pulse-ring 1.5s ease-out infinite;
    pointer-events: none;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@media (min-width: 992px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center center;
        pointer-events: all;
    }
}

@media (max-width: 991px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet {
        border-radius: 12px;
        width: 80px;
        height: 80px;
        order: -1;
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet img {
        border-radius: 12px;
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.is-active {
        transform: scale(1.35) !important;
    }
}

@media (max-width: 575px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet {
        width: 80px;
        height: 80px;
    }
}

/* Desktop Orbital Positioning - Using rotate + translate from center (992px+) */
@media (min-width: 992px) {

    /* Position 0 - Top (IT & Software) - 90deg */
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-0 {
        transform: translate(-50%, -50%) rotate(-90deg) translateX(235px) rotate(90deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-0.is-active {
        transform: translate(-50%, -50%) rotate(-90deg) translateX(210px) rotate(90deg) scale(2.0);
    }

    /* Position 1 - Top Right (Pharmaceuticals) - 38.57deg */
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-1 {
        transform: translate(-50%, -50%) rotate(-38.57deg) translateX(235px) rotate(38.57deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-1.is-active {
        transform: translate(-50%, -50%) rotate(-38.57deg) translateX(210px) rotate(38.57deg) scale(2.0);
    }

    /* Position 2 - Right (Mechanical) - 12.86deg */
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-2 {
        transform: translate(-50%, -50%) rotate(12.86deg) translateX(235px) rotate(-12.86deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-2.is-active {
        transform: translate(-50%, -50%) rotate(12.86deg) translateX(210px) rotate(-12.86deg) scale(2.0);
    }

    /* Position 3 - Bottom Right (Telecommunications) - 64.29deg */
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-3 {
        transform: translate(-50%, -50%) rotate(64.29deg) translateX(235px) rotate(-64.29deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-3.is-active {
        transform: translate(-50%, -50%) rotate(64.29deg) translateX(210px) rotate(-64.29deg) scale(2.0);
    }

    /* Position 4 - Bottom (Consumer Goods) - 115.71deg */
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-4 {
        transform: translate(-50%, -50%) rotate(115.71deg) translateX(235px) rotate(-115.71deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-4.is-active {
        transform: translate(-50%, -50%) rotate(115.71deg) translateX(210px) rotate(-115.71deg) scale(2.0);
    }

    /* Position 5 - Bottom Left (Automotive) - 167.14deg */
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-5 {
        transform: translate(-50%, -50%) rotate(167.14deg) translateX(235px) rotate(-167.14deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-5.is-active {
        transform: translate(-50%, -50%) rotate(167.14deg) translateX(210px) rotate(-167.14deg) scale(2.0);
    }

    /* Position 6 - Left (Agriculture) - 218.57deg */
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-6 {
        transform: translate(-50%, -50%) rotate(218.57deg) translateX(235px) rotate(-218.57deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-6.is-active {
        transform: translate(-50%, -50%) rotate(218.57deg) translateX(210px) rotate(-218.57deg) scale(2.0);
    }
}

/* Larger Desktop - Increased Orbit Radius (1200px+) */
@media (min-width: 1200px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-0 {
        transform: translate(-50%, -50%) rotate(-90deg) translateX(250px) rotate(90deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-0.is-active {
        transform: translate(-50%, -50%) rotate(-90deg) translateX(225px) rotate(90deg) scale(1.20);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-1 {
        transform: translate(-50%, -50%) rotate(-38.57deg) translateX(250px) rotate(38.57deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-1.is-active {
        transform: translate(-50%, -50%) rotate(-38.57deg) translateX(225px) rotate(38.57deg) scale(1.20);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-2 {
        transform: translate(-50%, -50%) rotate(12.86deg) translateX(250px) rotate(-12.86deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-2.is-active {
        transform: translate(-50%, -50%) rotate(12.86deg) translateX(225px) rotate(-12.86deg) scale(1.20);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-3 {
        transform: translate(-50%, -50%) rotate(64.29deg) translateX(250px) rotate(-64.29deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-3.is-active {
        transform: translate(-50%, -50%) rotate(64.29deg) translateX(225px) rotate(-64.29deg) scale(1.20);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-4 {
        transform: translate(-50%, -50%) rotate(115.71deg) translateX(250px) rotate(-115.71deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-4.is-active {
        transform: translate(-50%, -50%) rotate(115.71deg) translateX(225px) rotate(-115.71deg) scale(1.20);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-5 {
        transform: translate(-50%, -50%) rotate(167.14deg) translateX(250px) rotate(-167.14deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-5.is-active {
        transform: translate(-50%, -50%) rotate(167.14deg) translateX(225px) rotate(-167.14deg) scale(1.20);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-6 {
        transform: translate(-50%, -50%) rotate(218.57deg) translateX(250px) rotate(-218.57deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-6.is-active {
        transform: translate(-50%, -50%) rotate(218.57deg) translateX(225px) rotate(-218.57deg) scale(1.20);
    }
}

/* Extra Large Desktop - Further Increased Orbit (1400px+) */
@media (min-width: 1400px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-0 {
        transform: translate(-50%, -50%) rotate(-90deg) translateX(265px) rotate(90deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-0.is-active {
        transform: translate(-50%, -50%) rotate(-90deg) translateX(235px) rotate(90deg) scale(2.0);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-1 {
        transform: translate(-50%, -50%) rotate(-38.57deg) translateX(265px) rotate(38.57deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-1.is-active {
        transform: translate(-50%, -50%) rotate(-38.57deg) translateX(235px) rotate(38.57deg) scale(2.0);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-2 {
        transform: translate(-50%, -50%) rotate(12.86deg) translateX(265px) rotate(-12.86deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-2.is-active {
        transform: translate(-50%, -50%) rotate(12.86deg) translateX(235px) rotate(-12.86deg) scale(2.0);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-3 {
        transform: translate(-50%, -50%) rotate(64.29deg) translateX(265px) rotate(-64.29deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-3.is-active {
        transform: translate(-50%, -50%) rotate(64.29deg) translateX(235px) rotate(-64.29deg) scale(2.0);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-4 {
        transform: translate(-50%, -50%) rotate(115.71deg) translateX(265px) rotate(-115.71deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-4.is-active {
        transform: translate(-50%, -50%) rotate(115.71deg) translateX(235px) rotate(-115.71deg) scale(2.0);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-5 {
        transform: translate(-50%, -50%) rotate(167.14deg) translateX(265px) rotate(-167.14deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-5.is-active {
        transform: translate(-50%, -50%) rotate(167.14deg) translateX(235px) rotate(-167.14deg) scale(2.0);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-6 {
        transform: translate(-50%, -50%) rotate(218.57deg) translateX(265px) rotate(-218.57deg);
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-6.is-active {
        transform: translate(-50%, -50%) rotate(218.57deg) translateX(235px) rotate(-218.57deg) scale(2.0);
    }
}

/* ====================================== Responsive Typography for Industries Section ===================================== */

/* Large Desktop (1400px and above) */
@media (min-width: 1400px) {
    .industries.style-3 .industries-header .badge-pill {
        font-size: 14px;
        padding: 6px 14px;
    }

    .industries.style-3 .industries-header .sec-text {
        font-size: 2.5rem;
    }

    .industries.style-3 .industries-header .sec-sub-text {
        font-size: 1.1rem;
        max-width: 900px;
    }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .industries.style-3 .industries-header .badge-pill {
        font-size: 13px;
    }

    .industries.style-3 .industries-header .sec-text {
        font-size: 2.2rem;
    }

    .industries.style-3 .industries-header .sec-sub-text {
        font-size: 1rem;
    }
}

/* Tablet/Small Desktop (992px - 1199px) */
@media (max-width: 1199px) {
    .industries.style-3 .industries-header .sec-text {
        font-size: 1.8rem;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .industries.style-3 .industries-header .badge-pill {
        font-size: 12px;
        padding: 5px 11px;
    }

    .industries.style-3 .industries-header .sec-text {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .industries.style-3 .industries-header .sec-sub-text {
        font-size: 0.9rem;
    }
}

/* Mobile Tablet (768px) */
@media (max-width: 768px) {
    .industries.style-3 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .industries.style-3 .industries-header .badge-pill {
        font-size: 11px;
        padding: 4px 10px;
        letter-spacing: 0.8px;
    }

    .industries.style-3 .industries-header .sec-text {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .industries.style-3 .industries-header .sec-sub-text {
        font-size: 0.88rem;
        line-height: 1.5;
    }
}

/* Small Mobile (575px) */
@media (max-width: 575px) {
    .industries.style-3 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .industries.style-3 .industries-header {
        margin-bottom: 40px;
    }

    .industries.style-3 .industries-header .badge-pill {
        font-size: 10px;
        padding: 4px 10px;
        letter-spacing: 0.5px;
    }

    .industries.style-3 .industries-header .sec-text {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .industries.style-3 .industries-header .sec-sub-text {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 40px;
    }
}

/* Extra Small Mobile (480px and below) */
@media (max-width: 480px) {
    .industries.style-3 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .industries.style-3 .industries-header .badge-pill {
        font-size: 9px;
        padding: 3px 8px;
        letter-spacing: 0.3px;
    }

    .industries.style-3 .industries-header .sec-text {
        font-size: 1.3rem;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .industries.style-3 .industries-header .sec-sub-text {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

/* Bullet Image Styling */
.industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none !important;
}

/* Ensure pos-2 (Mechanical & Industrial Engineering) is fully clickable */
.industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-2 {
    pointer-events: all !important;
    cursor: pointer !important;
}

.industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.pos-2 img {
    pointer-events: none !important;
}

/* Hover State for All Bullets */
.industries.style-3 .section-wrapper .industries-slider .industries-pagination .industry-bullet:hover {
    transform: scale(1.08);
    border-color: rgba(255, 107, 53, 0.5);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.25);
}

.industries.style-3 .section-wrapper .industries-slider .industries-pagination .industry-bullet:hover img {
    transform: scale(1.1);
}

/* Active State Styling */
.industries.style-3 .section-wrapper .industries-slider .industries-pagination .industry-bullet.is-active {
    transform: scale(1.15);
    border-color: #FF6B35;
    border-width: 3px;
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4), 0 0 0 4px rgba(255, 107, 53, 0.1);
    z-index: 20;
}

.industries.style-3 .section-wrapper .industries-slider .industries-pagination .industry-bullet.is-active img {
    transform: scale(1.15);
}

/* Mobile/Tablet Responsive Behavior - Disable Orbit, Use Row Layout */
@media (max-width: 991px) {
    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet {
        position: static;
        transform: none !important;
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet.is-active {
        transform: scale(1.25) !important;
    }

    .industries.style-3 .section-wrapper .industries-slider .industry-orbit .industry-bullet:hover {
        transform: scale(1.05) !important;
    }
}

/* Old positioning styles removed - now using rotate+translate orbit system */

/* ====================================== Keyframes for SVG Animation ===================================== */

/* Preserve existing animations */
@keyframes animate1 {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes animate_countdown {
    0% {
        stroke-dashoffset: 1413.72px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes animate_countdown_one {
    0% {
        stroke-dashoffset: 1413.72px;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .industries.style-3 .section-wrapper .industries-slider svg circle,
    .industries.style-3 .section-wrapper .industries-slider .industries-pagination span {
        animation: none !important;
    }
}

/* Section header styling - ensure perfect left alignment */
.section-four .cap-text {
    color: #19b3b6;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
    position: relative;
    padding-bottom: 12px;
}

/* Add short decorative line below WHY CHOOSE DUXLEGIS header - perfectly aligned */
.section-four .cap-text:after {
    display: none !important;
}

.section-four .cap-text .cap-line {
    position: relative;
    display: inline-block;
}

.section-four .cap-text .cap-line::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 3px;
    background: linear-gradient(45deg, #FF6B35, #19b3b6);
    border-radius: 2px;
}

/* Remove the previous decorative line after description */
.section-four .sec-sub-text:after {
    display: none;
}

/* Force the entire left column to have no padding */
.section-four .col-xxl-6:first-child {
    text-align: left;
    padding-left: 15px !important;
    padding-right: 30px;
    margin-left: 0 !important;
}

/* Override Bootstrap container padding specifically for section-four */
.section-four .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.section-four .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* FINAL OVERRIDE: Section Four cap-text underline - Desktop left-aligned, Mobile centered */
@media (min-width: 1024px) {
    .section-four .why-heading-block .cap-text {
        display: inline-block !important;
        text-align: left !important;
        position: relative !important;
        padding-bottom: 12px !important;
        margin-left: 0 !important;
    }

    .section-four .why-heading-block .cap-text::after {
        content: '';
        width: 60px;
        height: 3px;
        background: linear-gradient(45deg, #FF6B35, #19b3b6);
        border-radius: 2px;
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        margin: 8px 0 0 0 !important;
    }
}

/* Fallback for old selector */
.section-four .col-xxl-6:first-child .cap-text {
    display: inline-block !important;
    text-align: left !important;
    position: relative !important;
    padding-bottom: 12px !important;
    margin-left: 0 !important;
}

.section-four .col-xxl-6:first-child .cap-text::after {
    content: '';
    width: 60px;
    height: 3px;
    background: linear-gradient(45deg, #FF6B35, #19b3b6);
    border-radius: 2px;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin: 8px 0 0 0 !important;
}

/* Section Four: tighten spacing between heading, subheading, and description */
.section-four .cap-text {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
}

.section-four .cap-text .cap-line::after {
    bottom: -6px;
}

.section-four .sec-text {
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
}

.section-four .sec-sub-text {
    margin-top: 6px !important;
    margin-bottom: 18px !important;
}

.section-four .check-box-main {
    margin-top: 18px !important;
}

/* Section Four: move main heading up (tighten gap above h2) */
.section-four .cap-text {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
}

.section-four .cap-text .cap-line::after {
    bottom: -5px;
}

.section-four .sec-text {
    margin-top: -6px !important;
}

@media (max-width: 767px) {
    .section-four .sec-text {
        margin-top: -4px !important;
    }
}

/* Mobile/Tablet: Center align headings and description (< 1024px) */
@media (max-width: 1023px) {
    .section-four .why-heading-block {
        text-align: center !important;
    }

    .section-four .why-heading-block .cap-text {
        display: inline-block !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .section-four .why-heading-block .cap-text::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 8px auto 0 !important;
    }

    .section-four .sec-text,
    .section-four .sec-sub-text {
        text-align: center !important;
    }

    /* Features appear after video on mobile */
    .section-four .why-features-content {
        margin-top: 0 !important;
    }
}

/* Section Four: animated long line below description (triggered on scroll-in) */
.section-four .check-box-main {
    position: relative;
    padding-top: 25px !important;
    border-top: 2px solid #F5F6F7 !important;
    /* subtle base line */
}

.section-four .check-box-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    /* start collapsed */
    height: 2px;
    background: linear-gradient(90deg, #FF6B35 0%, #19b3b6 50%, #FF6B35 100%);
    will-change: width;
    /* no animation by default; JS will add .animate-line */
}

.section-four .check-box-main.animate-line::before {
    animation: lineExpand 2s ease-out 0.5s forwards;
}

/* Ensure keyframes exist (shared with Section Two) */
@keyframes lineExpand {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* Tighten gap above the line slightly */
.section-four .sec-sub-text {
    margin-bottom: 12px !important;
}

/* Section Four: match description typography to Section Two */
.section-four .sec-sub-text {
    font-size: 16px !important;
    line-height: 26px !important;
    font-weight: 400 !important;
    color: #222 !important;
    letter-spacing: 0 !important;
}

/* Section Four: tick icon size and color scheme */
.section-four .check-box-main-sub img {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    /* remove circular bg */
    border-radius: 0 !important;
    object-fit: contain;
    /* Orange brand tint (#FF6B35) as default */
    filter: brightness(0) saturate(100%) invert(58%) sepia(64%) saturate(1671%) hue-rotate(340deg) brightness(101%) contrast(101%);
    transition: filter 0.25s ease, transform 0.2s ease;
}

.section-four .check-box-main-sub:hover img {
    /* Teal brand tint (#19b3b6) on hover */
    filter: brightness(0) saturate(100%) invert(56%) sepia(81%) saturate(2814%) hue-rotate(162deg) brightness(106%) contrast(105%);
}

/* Section Four: Font Awesome icons for list items */
.section-four .why-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    /* icon size */
    color: #FF6B35;
    /* orange default */
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.section-four .check-box-main-sub:hover .why-icon {
    color: #19b3b6;
    /* teal on hover */
}

@media (max-width: 575px) {
    .section-four .why-icon {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}

/* Slightly tighten spacing around tick rows */
.section-four .check-box-main-sub {
    gap: 14px !important;
    margin-top: 20px !important;
}

.section-four .check-box-main {
    gap: 14px !important;
}

@media (max-width: 575px) {
    .section-four .check-box-main-sub img {
        width: 24px !important;
        height: 24px !important;
    }

    .section-four .check-box-main-sub {
        gap: 12px !important;
    }
}

/* UNDO: Remove creative card styling and effects from Section Four ticks */
.section-four .check-box-main-sub {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.section-four .check-box-main-sub::before {
    display: none !important;
}

.section-four .check-box-main-sub h2::after {
    display: none !important;
}

.section-four .check-box-main-sub.fade_up.show {
    animation: none !important;
}

/* UNDO: restore Section Four video height to original */
.section-four .sec-video2 .video2,
.section-four .sec-video2 .sadas {
    height: 100% !important;
}

/* UNDO: Remove parallax-related transitions on video */
.section-four .sec-video2 .video2,
.section-four .sec-video2 .sadas {
    transition: none !important;
    transform: none !important;
}

/* Section Four: increase small header font size */
.section-four .cap-text {
    font-size: 18px !important;
    line-height: 24px !important;
}

/* Section Four: reduce main heading size */
.section-four .sec-text {
    font-size: 26px !important;
    line-height: 34px !important;
}

@media (max-width: 991px) {
    .section-four .sec-text {
        font-size: 24px !important;
        line-height: 32px !important;
    }
}

@media (max-width: 575px) {
    .section-four .sec-text {
        font-size: 22px !important;
        line-height: 30px !important;
    }
}

/* ====================================== Blog Section Styles (Updated to Match Site Design) ===================================== */
.blog-section {
    padding: 100px 0;
    background: #fff;
}

@media (min-width: 576px) {
    .blog-section {
        padding: 100px 0;
    }
}

/* Blog Section Header - Match other sections */
.blog-section .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 50px;
}

@media (min-width: 992px) {
    .blog-section .section-header {
        margin-bottom: 70px;
    }
}

/* IMPORTANT: Only apply these sizes to headings that are NOT using global .sec-text */
.blog-section .section-header h2:not(.sec-text) {
    margin-bottom: 15px;
    color: #222;
    font-weight: 700;
    font-family: "Rubik", sans-serif;
    font-size: 36px;
    line-height: 44px;
}

@media (min-width: 576px) {
    .blog-section .section-header h2:not(.sec-text) {
        font-size: 42px;
        line-height: 50px;
    }
}

/* IMPORTANT: Only apply these sizes to paragraphs that are NOT using global .sec-sub-text */
.blog-section .section-header p:not(.sec-sub-text) {
    margin-bottom: 0;
    font-weight: 400;
    color: #666;
    font-size: 16px;
    line-height: 26px;
    max-width: 600px;
    margin: 0 auto;
}

/* Spacing tweaks when using global heading styles */
.blog-section .section-header .sec-text {
    margin-bottom: 12px;
}

.blog-section .section-header .sec-sub-text {
    max-width: 760px;
    margin: 0 auto;
}

/* Blog Container and Slider */
.blog-section .section-wrapper {
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .blog-section .section-wrapper {
        margin: 0;
    }
}

.blog-section .section-wrapper .blog-slider {
    overflow: visible;
    padding: 20px 0 60px;
}

/* Blog Post Cards - Match site design system */
.blog-section .section-wrapper .post-item {
    margin-bottom: 30px;
    height: auto;
}

@media (min-width: 768px) {
    .blog-section .section-wrapper .post-item .post-item-inner {
        margin: 0;
    }
}

.blog-section .section-wrapper .post-item .post-item-inner {
    background: #fff;
    border-radius: 20px;
    border: 2px solid #F5F6F7;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.blog-section .section-wrapper .post-item .post-item-inner:hover {
    border-color: #FF6B35;
    box-shadow: 0 15px 45px rgba(255, 107, 53, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

/* Blog card shimmer effect */
.blog-section .section-wrapper .post-item .post-item-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: left 0.6s ease;
}

.blog-section .section-wrapper .post-item .post-item-inner:hover::after {
    left: 150%;
}

/* Blog Image Styling */
.blog-section .section-wrapper .post-item .post-item-inner .post-thumb {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    background: #f8f9fa;
    /* Add background for letterboxing */
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-thumb a {
    display: block;
    height: 100%;
    width: 100%;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-thumb a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Changed from cover to contain to show full image */
    transition: all 0.4s ease;
}

.blog-section .section-wrapper .post-item .post-item-inner:hover .post-thumb a img {
    transform: scale(1.05);
    /* Reduced scale to prevent overflow with contain */
}

/* Blog Content Area */
.blog-section .section-wrapper .post-item .post-item-inner .post-content {
    border: none;
    border-radius: 0;
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
}

@media (min-width: 576px) {
    .blog-section .section-wrapper .post-item .post-item-inner .post-content {
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area {
    width: 100%;
    padding-right: 0;
    flex: 1;
}

/* Blog Post Title */
.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area h5 {
    margin-bottom: 12px;
    line-height: 28px;
    font-size: 20px;
    margin-top: 0;
    font-weight: 600;
}

@media (min-width: 768px) {
    .blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area h5 {
        font-size: 22px;
        line-height: 30px;
    }
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area h5 a {
    color: #222;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area h5 a:hover {
    color: #FF6B35;
}

/* Blog Meta Information */
.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area .meta-post {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area .meta-post .by {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area .meta-post .by a {
    position: relative;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area .meta-post .by a:hover {
    color: #FF6B35;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area .meta-post .by .date {
    color: #666;
    font-weight: 500;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area .meta-post .by .name {
    color: #333;
    font-weight: 600;
    text-decoration: none;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area .meta-post .by .name:hover {
    color: #FF6B35;
}

/* Remove the dot separators */
.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area .meta-post .by a::after {
    display: none;
}

/* Blog Post Description */
.blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area p {
    font-size: 15px;
    line-height: 24px;
    color: #666;
    margin-bottom: 0;
    margin-top: 10px;
}

/* Social Area - Simplified */
.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area::before {
    display: none;
}

/* Admin/Author Info */
.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .admin {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .admin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .admin::after {
    display: none;
}

/* View Count */
.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .count {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .count span {
    display: inline;
    font-weight: 700;
    color: #FF6B35;
}

/* Social Media Icons */
.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .social-media {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .social-media span {
    font-size: 12px;
    color: #666;
    margin-right: 8px;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .social-media ul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .social-media ul li {
    padding: 0;
    margin: 0;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .social-media ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f8f9fa;
    color: #666;
    font-size: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .social-media ul li a:hover {
    background: #FF6B35;
    color: #fff;
    transform: translateY(-2px);
}

/* Blog Pagination */
.blog-section .section-wrapper .blog-pagination {
    text-align: center;
    margin-top: 30px;
    position: relative;
}

.blog-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: #ddd;
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.blog-pagination .swiper-pagination-bullet:hover {
    background: #FF6B35;
    transform: scale(1.2);
}

.blog-pagination .swiper-pagination-bullet-active {
    background: #FF6B35;
    transform: scale(1.3);
}

/* Responsive Design */
@media (max-width: 991px) {
    .blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .social-media {
        align-self: stretch;
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .blog-section .section-wrapper .post-item .post-item-inner .post-thumb {
        height: 200px;
    }

    .blog-section .section-wrapper .post-item .post-item-inner .post-content {
        padding: 20px;
    }

    .blog-section .section-wrapper .post-item .post-item-inner .post-content .content-area h5 {
        font-size: 18px;
        line-height: 26px;
    }

    .blog-section .section-wrapper .post-item .post-item-inner .post-content .social-area .social-media ul {
        justify-content: center;
    }
}

/* ====================================== End Blog Section Styles ===================================== */

/* Newsletters: use same gradient accent line style as other sections */
#newsletters .section-header .cap-text {
    color: #19b3b6 !important;
}

#newsletters .section-header .cap-text::after {
    background: linear-gradient(90deg, #FF6B35 0%, #19b3b6 100%) !important;
}

#newsletters .section-header .sec-text {
    padding-bottom: 0 !important;
}

#newsletters .section-header .sec-text::after {
    content: none !important;
}

/* === Fix: Center the underline exactly under the NEWSLETTERS label === */
#newsletters .section-header .cap-text {
    display: inline-block !important;
    /* shrink to text width */
    position: relative !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
}

#newsletters .section-header .cap-text::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    /* perfectly centered under the text */
}

/* Equal-height cards for Newsletters carousel */
#newsletters .post-item .post-item-inner {
    display: flex;
    flex-direction: column;
    min-height: 520px;
    /* ensures equal visual height across slides */
    margin-bottom: 10px;
    /* Add bottom margin for hover effect space */
}

#newsletters .post-item .post-item-inner .post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#newsletters .post-item .post-item-inner .post-content .content-area {
    flex: 1;
}

#newsletters .post-item .post-item-inner .post-thumb {
    height: 240px;
}

#newsletters .post-item .post-item-inner:hover {
    z-index: 10;
    /* Bring hovered card to front */
}

@media (max-width: 767px) {
    #newsletters .post-item .post-item-inner {
        min-height: unset;
    }

    #newsletters .post-item .post-item-inner .post-thumb {
        height: 200px;
    }
}

/* === Fix: prevent About/other sections from overlapping the hero === */
.hero-slider-section {
    position: relative;
    z-index: 5;
    overflow: hidden;
}

/* Ensure following sections form their own stacking context */
.section-two,
.section-three,
.section-four {
    position: relative;
    z-index: 1;
}

/* Constrain Section Four’s absolute child (was leaking into hero) */
.section-four {
    position: relative;
}

/* The hero’s customer pill was placed outside via bottom:-100px; keep it inside */
.hero-slider-section .cutomer-img-main-text {
    bottom: 20px;
    left: 0;
}

@media (max-width: 991px) {
    .hero-slider-section .cutomer-img-main-text {
        display: none;
    }
}

/* === Contact section: Services Design System === */
.contact-form-section {
    --ip-teal: #4A7C7C;
    --ip-teal-dark: #3A6565;
    --ip-teal-light: #D4E3E3;
    --ip-orange: #FF6B35;
    --ip-dark: #1f2e2e;
    --text-grey: #5f6c7b;
    --bg-off-white: #f8fcfc;

    background: var(--bg-off-white);
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

/* Background Animations */
.contact-form-section .bg-gradient-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(74, 124, 124, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 107, 53, 0.06) 0%, transparent 50%);
    z-index: 0;
}

.contact-form-section .bg-creative {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.contact-form-section .bg-shape {
    position: absolute;
    pointer-events: none;
}

.contact-form-section .shape-ring-1 {
    width: 350px;
    height: 350px;
    border: 2px solid rgba(74, 124, 124, 0.12);
    border-radius: 50%;
    top: -100px;
    right: -50px;
    animation: float-y 8s ease-in-out infinite;
}

.contact-form-section .shape-ring-2 {
    width: 250px;
    height: 250px;
    border: 2px dashed rgba(255, 107, 53, 0.15);
    border-radius: 50%;
    bottom: -50px;
    left: -80px;
    animation: float-y 10s ease-in-out infinite reverse;
}

.contact-form-section .shape-dot-1 {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(74, 124, 124, 0.15), transparent 70%);
    border-radius: 50%;
    top: 40%;
    left: 10%;
    animation: float-y 6s ease-in-out infinite;
}

.contact-form-section .shape-dot-2 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.12), transparent 70%);
    border-radius: 50%;
    top: 20%;
    right: 15%;
    animation: float-y 9s ease-in-out infinite reverse;
}

/* Container with z-index */
.contact-form-section .container {
    position: relative;
    z-index: 2;
}

/* Layout and spacing */
.contact-form-section .form-sec-row {
    align-items: center;
    gap: 40px 30px;
}

@media (max-width: 991px) {
    .contact-form-section .form-sec-row {
        gap: 30px 20px;
    }
}

/* Badge Pill */
.contact-form-section .badge-pill {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--ip-teal-light);
    color: var(--ip-teal);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-bottom: 10px;
}

/* Main Title */
.contact-form-section .main-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ip-dark);
    margin-bottom: 12px;
    line-height: 1.1;
}

.contact-form-section .main-title span {
    background: linear-gradient(90deg, var(--ip-orange), #ff8a65, var(--ip-orange));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    animation: shimmer 3s linear infinite;
}

.contact-form-section .main-title span::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 107, 53, 0.2);
    z-index: -1;
    border-radius: 4px;
}

/* Sub Text */
.contact-form-section .sub-text {
    font-size: 0.95rem;
    color: var(--text-grey);
    line-height: 1.55;
    margin-bottom: 18px;
}

/* Left column typography cleanup */
.contact-form-section .cap-text {
    margin-bottom: 8px;
}

.contact-form-section .sec-text {
    margin-bottom: 10px;
}

.contact-form-section .sec-sub-text {
    margin-bottom: 18px;
    color: #222;
}

/* Form card */
.contact-form-section .contac-form-main {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    padding: 24px;
    /* tighter to match compact system */
}

@media (min-width: 576px) {
    .contact-form-section .contac-form-main {
        padding: 28px;
    }
}

@media (min-width: 992px) {
    .contact-form-section .contac-form-main {
        padding: 32px;
    }
}

/* Labels */
.contact-form-section .input-label-text {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.2px;
}

/* Grid for name/email */
.contact-form-section .contac-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

@media (max-width: 575px) {
    .contact-form-section .contac-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Inputs and textarea */
.contact-form-section .contac-form input,
.contact-form-section .your-message-input textarea {
    width: 100%;
    border: 2px solid #E9EDF2;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.contact-form-section .contac-form input::placeholder,
.contact-form-section .your-message-input textarea::placeholder {
    color: #A8A9AD;
}

/* Focus state using brand teal */
.contact-form-section .contac-form input:focus,
.contact-form-section .your-message-input textarea:focus {
    border-color: #19b3b6;
    box-shadow: 0 0 0 4px rgba(25, 179, 182, 0.15);
}

/* Textarea sizing */
.contact-form-section .your-message-input {
    margin-top: 16px;
}

.contact-form-section .your-message-input textarea {
    min-height: 140px;
    resize: vertical;
}

/* CTA alignment */
.contact-form-section .send-main-btn {
    display: flex;
    justify-content: flex-start;
    margin-top: 18px;
}

.contact-form-section .send-main-btn .btn-quote {
    padding: 14px 24px;
    border-radius: 12px;
}

/* Contact info blocks - Stacked with 2-column details */
.contact-form-section .contact-info-section {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-form-section .info-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form-section .info-block .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
}

.contact-form-section .info-block.address-block .address-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.contact-form-section .info-heading {
    color: var(--ip-teal);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.contact-form-section .info-text {
    color: var(--ip-dark);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-form-section .info-text:hover {
    color: var(--ip-orange);
}

.contact-form-section .info-text strong {
    font-weight: 700;
    display: inline;
    margin-right: 5px;
}

@media (max-width: 768px) {

    .contact-form-section .info-block .info-grid,
    .contact-form-section .info-block.address-block .address-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Legacy contact info tweaks */
.contact-form-section .call-support-text {
    color: #19b3b6;
    font-weight: 600;
}

.contact-form-section .tel-num {
    display: inline-block;
    margin: 8px 0 14px;
}

.contact-form-section .adres-main-home {
    gap: 40px;
}

@media (max-width: 575px) {
    .contact-form-section .adres-main-home {
        gap: 20px;
        flex-direction: column;
    }
}

/* Ensure subscribe banner never collides visually with form card on short viewports */
footer .subscribe-section {
    margin-top: 40px;
}

/* === Contact row wrap fix: remove horizontal gap that broke Bootstrap grid === */
.contact-form-section .form-sec-row {
    column-gap: 0 !important;
    row-gap: 0 !important;
}

@media (max-width: 991px) {
    .contact-form-section .form-sec-row {
        row-gap: 20px !important;
    }
}

/* === Contact: mobile number with country dropdown styles === */
.contact-form-section .contac-form .full-span {
    grid-column: 1 / -1;
}

.contact-form-section .iti {
    width: 100%;
}

.contact-form-section .iti input[type="tel"],
.contact-form-section #contact-phone {
    width: 100%;
    border: 2px solid #E9EDF2;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px 12px 14px;
    /* plugin adjusts left internally */
    font-size: 16px;
    line-height: 24px;
    color: #000;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Focus + valid/invalid states */
.contact-form-section #contact-phone:focus {
    border-color: #19b3b6;
    box-shadow: 0 0 0 4px rgba(25, 179, 182, 0.15);
}

.contact-form-section #contact-phone.is-valid {
    border-color: #19b3b6;
}

.contact-form-section #contact-phone.is-invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

/* Dial code area tweaks */
.contact-form-section .iti__selected-flag {
    border-radius: 10px 0 0 10px;
}

.contact-form-section .iti__country-list {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #E9EDF2;
    border-radius: 10px;
}

/* Small screens: keep full width */
@media (max-width: 575px) {
    .contact-form-section .contac-form .full-span {
        grid-column: 1 / -1;
    }
}

/* === Contact cap-text underline alignment fix === */
.contact-form-section .cap-text {
    display: inline-block !important;
    /* shrink to text width */
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    position: relative;
}

.contact-form-section .cap-text::after {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    /* cancel global centering */
}

/* === Contact: reduce phone/address/email sizes in left column === */
.contact-form-section .tel-num {
    font-size: 20px !important;
    /* was 36px global */
    line-height: 28px !important;
    font-weight: 500 !important;
}

.contact-form-section .phone-list .tel-num {
    font-weight: 700 !important;
    /* emphasize phone numbers */
    display: block;
    margin: 6px 0;
}

@media (min-width: 992px) {
    .contact-form-section .tel-num {
        font-size: 22px !important;
        line-height: 30px !important;
    }
}

/* === Contact: refine phone/address typography and spacing === */
.contact-form-section .phone-list {
    margin-top: 8px;
}

.contact-form-section .phone-list .tel-num {
    font-size: 18px !important;
    /* smaller, consistent */
    line-height: 26px !important;
    font-weight: 600 !important;
    /* lighter than 700 */
    color: #222 !important;
}

/* Address and mail values */
.contact-form-section .addees {
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    color: #222 !important;
}

/* Slightly tighten the label spacing above phone list */
.contact-form-section .call-support-text {
    margin-bottom: 6px;
}

/* === Contact: lighten numbers and align digits === */
.contact-form-section .phone-list .tel-num {
    font-weight: 500 !important;
    /* lighter */
    color: #333 !important;
    /* softer than pure black */
    font-variant-numeric: tabular-nums;
    /* align digits */
    letter-spacing: 0.2px;
}

.contact-form-section .addees {
    font-weight: 500 !important;
    color: #333 !important;
    letter-spacing: 0.2px;
}

/* === Contact: style service dropdown like inputs === */
.contact-form-section .contac-form select {
    width: 100%;
    border: 2px solid #E9EDF2;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    appearance: none;
    /* remove native arrow */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23999" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}

.contact-form-section .contac-form select:focus {
    border-color: #19b3b6;
    box-shadow: 0 0 0 4px rgba(25, 179, 182, 0.15);
}

/* Tighten spacing between phone numbers */
.contact-form-section .phone-list .tel-num {
    margin: 4px 0 !important;
}

/* === Subscribe banner: overlap half into Contact section === */
footer .subscribe-section {
    position: relative;
    z-index: 3;
    margin-top: -150px !important;
    /* pull up into contact section */
    margin-bottom: 100px;
    /* keep bottom spacing */
}

@media (max-width: 1199px) {
    footer .subscribe-section {
        margin-top: -130px !important;
    }
}

@media (max-width: 991px) {
    footer .subscribe-section {
        margin-top: -100px !important;
    }
}

@media (max-width: 575px) {
    footer .subscribe-section {
        margin-top: -80px !important;
    }
}

/* ====================================== Blog Section (Newsletters) - Services Design System ====================================== */

/* Section styling with Services design */
#newsletters {
    --ip-teal: #4A7C7C;
    \n --ip-teal-dark: #3A6565;
    --ip-teal-light: #D4E3E3;
    --ip-orange: #FF6B35;
    --ip-dark: #1f2e2e;
    --text-grey: #5f6c7b;
    --bg-off-white: #f8fcfc;

    background: var(--bg-off-white);
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

/* Background Animations */
#newsletters .bg-gradient-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(74, 124, 124, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 107, 53, 0.06) 0%, transparent 50%);
    z-index: 0;
}

#newsletters .bg-creative {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

#newsletters .bg-shape {
    position: absolute;
    pointer-events: none;
}

#newsletters .shape-ring-1 {
    width: 350px;
    height: 350px;
    border: 2px solid rgba(74, 124, 124, 0.12);
    border-radius: 50%;
    top: -100px;
    right: -50px;
    animation: float-y 8s ease-in-out infinite;
}

#newsletters .shape-ring-2 {
    width: 250px;
    height: 250px;
    border: 2px dashed rgba(255, 107, 53, 0.15);
    border-radius: 50%;
    bottom: -50px;
    left: -80px;
    animation: float-y 10s ease-in-out infinite reverse;
}

#newsletters .shape-dot-1 {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(74, 124, 124, 0.15), transparent 70%);
    border-radius: 50%;
    top: 40%;
    left: 10%;
    animation: float-y 6s ease-in-out infinite;
}

#newsletters .shape-dot-2 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.12), transparent 70%);
    border-radius: 50%;
    top: 20%;
    right: 15%;
    animation: float-y 9s ease-in-out infinite reverse;
}

/* Container with z-index */
#newsletters .container {
    position: relative;
    z-index: 2;
}

#newsletters .section-header {
    max-width: 800px;
    margin: 0 auto 35px;
    text-align: center;
}

/* Badge Pill */
#newsletters .section-header .badge-pill {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--ip-teal-light);
    color: var(--ip-teal);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-bottom: 10px;
}

/* Main Title */
#newsletters .section-header .main-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ip-dark);
    margin-bottom: 10px;
    line-height: 1.1;
}

#newsletters .section-header .main-title span {
    background: linear-gradient(90deg, var(--ip-orange), #ff8a65, var(--ip-orange));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    animation: shimmer 3s linear infinite;
}

#newsletters .section-header .main-title span::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 107, 53, 0.2);
    z-index: -1;
    border-radius: 4px;
}

/* Sub Text */
#newsletters .section-header .sub-text {
    font-size: 0.95rem;
    color: var(--text-grey);
    line-height: 1.55;
    max-width: 90%;
    margin: 0 auto;
}

/* Legacy styles for compatibility */
#newsletters .section-header .cap-text {
    color: var(--ip-teal);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

#newsletters .section-header .cap-text::after {
    /* Center the accent line under the NEWSLETTERS label */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #FF6B35 0%, #19b3b6 100%);
    border-radius: 2px;
}

#newsletters .section-header .sec-text {
    color: #222;
    font-size: 42px;
    line-height: 52px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 0 !important;
}

#newsletters .section-header .sec-sub-text {
    color: #666;
    font-size: 16px;
    line-height: 26px;
    max-width: 700px;
    margin: 0 auto;
}

/* CRITICAL: Container and slider constraints to show exactly 3 cards */
#newsletters .section-wrapper {
    margin: 0 auto;
    max-width: 1200px;
    /* Constrain total width */
    padding: 0 15px;
    overflow: hidden;
    /* Hide any overflow */
}

#newsletters .blog-slider {
    overflow: hidden !important;
    /* Critical: hide partial cards */
    padding: 20px 0 60px;
    margin: 0;
    width: 100%;
}

#newsletters .swiper-wrapper {
    align-items: stretch;
}

/* Let Swiper handle the layout - DO NOT use fixed widths */
#newsletters .swiper-slide {
    height: auto;
    /* Swiper will control width via breakpoints */
}

/* Card styling */
#newsletters .post-item {
    height: auto;
    margin-bottom: 0;
    width: 100%;
}

#newsletters .post-item .post-item-inner {
    display: flex;
    flex-direction: column;
    height: 460px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

#newsletters .post-item .post-item-inner:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #FF6B35;
    z-index: 10;
}

/* Image styling */
#newsletters .post-item .post-thumb {
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#newsletters .post-item .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

#newsletters .post-item .post-thumb:hover img {
    transform: scale(1.05);
}

/* Content area */
#newsletters .post-item .post-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
    flex: 1;
}

#newsletters .post-item .content-area {
    flex: 1;
    margin-bottom: 20px;
}

#newsletters .post-item .content-area h5 {
    margin-bottom: 15px;
}

#newsletters .post-item .content-area h5 a {
    color: #222;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#newsletters .post-item .content-area h5 a:hover {
    color: #FF6B35;
}

#newsletters .post-item .meta-post {
    margin-bottom: 12px;
}

#newsletters .post-item .meta-post .by {
    display: flex;
    gap: 15px;
    font-size: 13px;
}

#newsletters .post-item .meta-post .date,
#newsletters .post-item .meta-post .name {
    color: #666;
    text-decoration: none;
    font-weight: 500;
}

#newsletters .post-item .meta-post .date:hover,
#newsletters .post-item .meta-post .name:hover {
    color: #FF6B35;
}

#newsletters .post-item .content-area p {
    color: #666;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Social area */
#newsletters .post-item .social-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #f0f1f3;
    margin-top: auto;
}

#newsletters .post-item .admin img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

#newsletters .post-item .count {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

#newsletters .post-item .social-media {
    display: flex;
    align-items: center;
    gap: 10px;
}

#newsletters .post-item .social-media span {
    color: #666;
    font-size: 12px;
    font-weight: 600;
}

#newsletters .post-item .social-media ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#newsletters .post-item .social-media ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #f8f9fa;
    color: #666;
    border-radius: 6px;
    font-size: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
}

#newsletters .post-item .social-media ul li a:hover {
    background: #FF6B35;
    color: white;
    transform: translateY(-2px);
}

/* Pagination styling */
#newsletters .blog-pagination {
    text-align: center;
    margin-top: 40px;
}

#newsletters .blog-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: #ddd;
    opacity: 1;
    border-radius: 6px;
    transition: all 0.3s ease;
}

#newsletters .blog-pagination .swiper-pagination-bullet:hover {
    background: #FF6B35;
    transform: scale(1.2);
}

#newsletters .blog-pagination .swiper-pagination-bullet-active {
    background: #FF6B35;
    transform: scale(1.3);
    box-shadow: 0 3px 10px rgba(255, 107, 53, 0.4);
}

/* Responsive design */
@media (max-width: 1200px) {
    #newsletters .section-wrapper {
        max-width: 100%;
        padding: 0 30px;
    }

    #newsletters .post-item .content-area h5 a {
        font-size: 17px;
        line-height: 24px;
    }

    #newsletters .post-item .post-thumb {
        height: 220px;
    }
}

@media (max-width: 1024px) {
    /* Swiper handles tablet layout via breakpoints */
}

@media (max-width: 768px) {
    #newsletters {
        padding: 60px 0;
    }

    #newsletters .section-wrapper {
        padding: 0 20px;
    }

    #newsletters .section-header .sec-text {
        font-size: 30px;
        line-height: 38px;
    }

    #newsletters .section-header .sec-sub-text {
        font-size: 15px;
        line-height: 24px;
    }

    #newsletters .blog-slider {
        padding: 10px 0 50px;
    }

    /* Swiper handles mobile layout via breakpoints */

    #newsletters .post-item .post-thumb {
        height: 180px;
    }

    #newsletters .post-item .post-content {
        padding: 20px;
    }

    #newsletters .post-item .content-area h5 a {
        font-size: 16px;
        line-height: 22px;
    }

    #newsletters .post-item .content-area p {
        font-size: 13px;
        line-height: 20px;
    }

    #newsletters .post-item .social-area {
        flex-wrap: wrap;
        gap: 10px;
    }

    #newsletters .post-item .social-media {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    #newsletters {
        padding: 50px 0;
    }

    #newsletters .section-wrapper {
        padding: 0 15px;
    }

    #newsletters .section-header {
        margin-bottom: 40px;
    }

    #newsletters .section-header .sec-text {
        font-size: 26px;
        line-height: 34px;
    }

    #newsletters .post-item .post-content {
        padding: 15px;
    }

    #newsletters .post-item .social-area {
        flex-wrap: wrap;
        gap: 10px;
    }

    #newsletters .post-item .social-media {
        width: 100%;
        justify-content: center;
    }
}

/* Animation enhancements */
@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#newsletters .post-item {
    animation: slideInUp 0.6s ease-out forwards;
}

#newsletters .post-item:nth-child(1) {
    animation-delay: 0.1s;
}

#newsletters .post-item:nth-child(2) {
    animation-delay: 0.2s;
}

#newsletters .post-item:nth-child(3) {
    animation-delay: 0.3s;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    #newsletters .post-item,
    #newsletters .post-item .post-item-inner,
    #newsletters .post-item .post-thumb img,
    #newsletters .post-item .social-media ul li a {
        transition: none !important;
        animation: none !important;
    }
}

/* Contact section: match design system (card, inputs, spacing) === */

/* ====================================== Creative Hero Section Styles ====================================== */

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
}

/* Animated Background Elements */
.hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(255, 107, 53, 0.1), rgba(25, 179, 182, 0.1));
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 80%;
    animation-delay: 0s;
}

.shape-2 {
    width: 80px;
    height: 80px;
    top: 70%;
    left: 85%;
    animation-delay: -2s;
}

.shape-3 {
    width: 60px;
    height: 60px;
    top: 30%;
    left: 75%;
    animation-delay: -4s;
}

.shape-4 {
    width: 40px;
    height: 40px;
    top: 50%;
    left: 90%;
    animation-delay: -1s;
}

.shape-5 {
    width: 100px;
    height: 100px;
    top: 80%;
    left: 70%;
    animation-delay: -3s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-20px) rotate(120deg);
    }

    66% {
        transform: translateY(10px) rotate(240deg);
    }
}

.animated-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 107, 53, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 107, 53, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 5;
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 24px;
    animation: slideInUp 0.8s ease-out;
}

.badge-icon {
    font-size: 16px;
}

.badge-text {
    font-size: 14px;
    font-weight: 600;
    color: #FF6B35;
}

.hero-title {
    margin-bottom: 24px;
    line-height: 1.1;
}

.title-line-1,
.title-line-2,
.title-line-3 {
    display: block;
    animation: slideInUp 0.8s ease-out forwards;
    opacity: 0;
}

.title-line-1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #222;
    animation-delay: 0.2s;
}

.title-line-2 {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    background: linear-gradient(135deg, #FF6B35 0%, #19b3b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation-delay: 0.4s;
    margin: -8px 0;
}

.title-line-3 {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 400;
    color: #666;
    animation-delay: 0.6s;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 32px;
    max-width: 540px;
    animation: slideInUp 0.8s ease-out 0.8s both;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    animation: slideInUp 0.8s ease-out 1s both;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 32px;
    font-weight: 900;
    color: #FF6B35;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Hero Actions */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    animation: slideInUp 0.8s ease-out 1.2s both;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #FF6B35 0%, #19b3b6 100%);
    color: white;
    padding: 16px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.hero-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #19b3b6 0%, #FF6B35 100%);
    transition: left 0.3s ease;
    z-index: -1;
}

.hero-btn-primary:hover::before {
    left: 0;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255, 107, 53, 0.4);
    color: white;
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 16px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border: 2px solid rgba(255, 107, 53, 0.2);
    transition: all 0.3s ease;
}

.play-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FF6B35;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hero-btn-secondary:hover {
    background: #FF6B35;
    color: white;
    border-color: #FF6B35;
    transform: translateY(-2px);
}

.hero-btn-secondary:hover .play-icon {
    background: white;
    color: #FF6B35;
}

/* Trusted By */
.hero-trusted {
    animation: slideInUp 0.8s ease-out 1.4s both;
}

.trusted-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    font-weight: 500;
}

.trusted-logos {
    display: flex;
    gap: 24px;
    align-items: center;
}

.logo-item {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
}

.logo-item:hover {
    background: #FF6B35;
    color: white;
    border-color: #FF6B35;
}

/* Hero Visual */
.hero-visual {
    position: relative;
    z-index: 3;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Innovation Hub */
.innovation-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
}

.hub-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #FF6B35, #19b3b6);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(255, 107, 53, 0.3);
    animation: pulse 3s ease-in-out infinite;
}

.core-icon {
    font-size: 40px;
    margin-bottom: 8px;
}

.core-text {
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Orbiting Service Icons */
.orbit {
    position: absolute;
    border: 2px dashed rgba(255, 107, 53, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-1 {
    width: 160px;
    height: 160px;
    animation: rotate 20s linear infinite;
}

.orbit-2 {
    width: 200px;
    height: 200px;
    animation: rotate 25s linear infinite reverse;
}

.orbit-3 {
    width: 240px;
    height: 240px;
    animation: rotate 30s linear infinite;
}

.orbit-4 {
    width: 280px;
    height: 280px;
    animation: rotate 35s linear infinite reverse;
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.service-node {
    position: absolute;
    width: 50px;
    height: 50px;
    background: white;
    border: 3px solid #FF6B35;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FF6B35;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: counterRotate 20s linear infinite;
}

.orbit-2 .service-node {
    animation: counterRotate 25s linear infinite;
}

.orbit-3 .service-node {
    animation: counterRotate 30s linear infinite;
}

.orbit-4 .service-node {
    animation: counterRotate 35s linear infinite;
}

@keyframes counterRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.service-node:hover {
    background: #FF6B35;
    color: white;
    transform: scale(1.1);
}

.patent-node {
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.trademark-node {
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
}

.copyright-node {
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.enforcement-node {
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
}

/* Dashboard Preview */
.dashboard-preview {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: slideInRight 1s ease-out 0.5s both;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.dashboard-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.dashboard-controls {
    display: flex;
    gap: 6px;
}

.control {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
}

.control.active {
    background: #FF6B35;
}

.dashboard-content {
    padding: 20px;
}

.metric-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 107, 53, 0.05);
    border-radius: 8px;
}

.metric-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.metric-value {
    font-size: 18px;
    font-weight: 900;
    color: #FF6B35;
}

.metric-trend {
    font-size: 12px;
    color: #28a745;
    font-weight: 600;
}

.chart-placeholder {
    height: 60px;
    display: flex;
    align-items: end;
    gap: 4px;
    margin-top: 16px;
}

.chart-bars {
    display: flex;
    align-items: end;
    gap: 4px;
    width: 100%;
}

.bar {
    flex: 1;
    background: linear-gradient(to top, #FF6B35, #19b3b6);
    border-radius: 2px 2px 0 0;
    min-height: 20px;
    animation: growBar 2s ease-out;
}

@keyframes growBar {
    from {
        height: 0;
    }

    to {
        height: var(--bar-height, 50%);
    }
}

/* Floating Cards */
.floating-card {
    position: absolute;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
    animation: slideInUp 1s ease-out both;
}

.card-1 {
    bottom: 120px;
    left: 60px;
    animation-delay: 1.2s;
}

.card-2 {
    top: 80px;
    left: 20px;
    animation-delay: 1.4s;
}

.card-3 {
    bottom: 60px;
    right: 80px;
    animation-delay: 1.6s;
}

.card-icon {
    font-size: 24px;
}

.card-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: slideInUp 1s ease-out 2s both;
}

.scroll-text {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scroll-line {
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, #FF6B35, transparent);
    border-radius: 1px;
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 1;
        transform: scaleY(1);
    }

    50% {
        opacity: 0.5;
        transform: scaleY(0.5);
    }
}

/* Keyframe Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-stats {
        gap: 30px;
    }

    .stat-number {
        font-size: 28px;
    }

    .dashboard-preview {
        width: 240px;
    }
}

@media (max-width: 992px) {
    .hero-section {
        min-height: 80vh;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .hero-stats {
        justify-content: center;
        gap: 20px;
    }

    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .trusted-logos {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-visual {
        height: 400px;
    }

    .dashboard-preview {
        position: relative;
        top: auto;
        right: auto;
        margin: 20px auto;
    }

    .floating-card {
        position: relative;
        margin: 10px auto;
    }

    .innovation-hub {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 20px auto;
    }
}

@media (max-width: 768px) {
    .hero-stats {
        gap: 15px;
    }

    .stat-number {
        font-size: 24px;
    }

    .stat-label {
        font-size: 12px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 15px;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .dashboard-preview {
        width: 100%;
        max-width: 300px;
    }

    .floating-shapes .shape {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 80px 0 40px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }

    .stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .trusted-logos {
        flex-direction: column;
        gap: 10px;
    }

    .hero-visual {
        height: 300px;
    }

    .innovation-hub {
        width: 150px;
        height: 150px;
    }

    .hub-core {
        width: 100px;
        height: 100px;
    }

    .core-icon {
        font-size: 30px;
    }

    .core-text {
        font-size: 12px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .floating-shapes,
    .animated-grid,
    .orbit {
        animation: none !important;
    }
}

/* Contact section: match design system (card, inputs, spacing) === */

/* ====================================== Contact Section Button Colors ====================================== */

/* Contact Form Send Button - Match About Section Learn More Button Style */
.contact-form-section .btn-primary-custom,
.get-cost-estimate .btn-primary-custom {
    background-color: var(--ip-teal);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 137, 123, 0.2);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.contact-form-section .btn-primary-custom:hover,
.get-cost-estimate .btn-primary-custom:hover {
    background-color: var(--ip-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(0, 137, 123, 0.3);
    color: white;
}

/* Subscribe Button - Also Change to Teal Theme */
.subscribe-input-main .btn-quote {
    background: #19b3b6 !important;
    border: 2px solid #19b3b6 !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.subscribe-input-main .btn-quote:hover {
    background: #16a1a4 !important;
    border-color: #16a1a4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(25, 179, 182, 0.4) !important;
}

/* ====================================== COMPREHENSIVE MOBILE OPTIMIZATIONS ====================================== */

/* Mobile-First Base Styles */
@media (max-width: 480px) {

    /* Global Mobile Optimizations */
    html {
        font-size: 14px;
        /* Reduce base font size for small screens */
    }

    body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Button and Touch Target Optimization */
    .btn-quote,
    .get-quote-btn,
    .our-services-btn {
        min-height: 44px;
        /* iOS recommended touch target */
        padding: 12px 20px !important;
        font-size: 14px !important;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: nowrap;
    }

    /* Typography Scaling */
    .sec-text,
    h1,
    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        word-break: break-word;
        hyphens: auto;
    }

    .cap-text {
        font-size: 12px !important;
        line-height: 1.4 !important;
        letter-spacing: 0.8px !important;
    }

    .sec-sub-text,
    p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }

    /* Section Padding Optimization */
    .section-two,
    .section-three,
    .section-four,
    .section-five,
    .blog-section,
    .lector-services,
    .services.style-2,
    .testimonial.style-3,
    .counter-up.style-2,
    .contact-form-section {
        padding: 40px 0 !important;
    }

    /* Header Mobile Optimization */
    .header {
        padding: 8px 15px !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        z-index: 1000;
    }

    .logo img {
        max-width: 120px !important;
        height: auto;
    }

    .hamburger {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
    }
}

/* Section Two (About) Mobile Optimization */
@media (max-width: 768px) {
    .section-two .row {
        flex-direction: column-reverse;
    }

    .section-two .col-xxl-6 {
        padding: 0 15px;
        margin-bottom: 30px;
    }

    .section-two .about-grid-box-main {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 25px !important;
    }

    .about-box-main {
        padding: 20px !important;
        text-align: center;
        border-radius: 12px;
        background: #f8f9fa;
    }

    .about-svg-main {
        margin-bottom: 15px !important;
    }

    .about-svg-main img {
        max-width: 50px !important;
        height: auto !important;
    }

    .expeStaff {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .fessional {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .about-sec-main {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        margin-top: 25px !important;
    }

    .about-sec-main .call {
        width: 100% !important;
        justify-content: center !important;
    }

    .sub-img-main {
        margin-top: 30px !important;
    }

    .about-img1 {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 15px !important;
    }
}

/* Lector Services Mobile Optimization */
@media (max-width: 768px) {
    .lector-services .section-header {
        margin-bottom: 30px !important;
    }

    .lector-services-slider {
        padding-bottom: 50px !important;
    }

    .lector-services .post-item .post-item-inner {
        margin: 10px !important;
        padding: 25px 20px !important;
        min-height: 280px !important;
    }

    .lector-services .post-thumb {
        margin-bottom: 20px !important;
    }

    .lector-services .round-1,
    .lector-services .round-2 {
        width: 60px !important;
        height: 60px !important;
    }

    .lector-services .service-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .lector-services .post-content h5 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .lector-services .post-content p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .services-pagination {
        margin-top: 25px !important;
    }
}

/* Services Grid Mobile Optimization */
@media (max-width: 768px) {
    .services.style-2 .section-wrapper {
        margin: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .services.style-2 .post-item {
        margin: 0 !important;
    }

    .services.style-2 .post-item-inner {
        padding: 25px 20px !important;
        text-align: center;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .services.style-2 .post-item-inner:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
    }

    .services.style-2 .content-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .services.style-2 .post-thumb {
        margin-bottom: 15px !important;
        margin-right: 0 !important;
    }

    .services.style-2 .post-content h5 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .services.style-2 .post-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* Industries Section Mobile Optimization */
@media (max-width: 768px) {
    .industries-section {
        padding: 50px 0 !important;
    }

    .industries-section .col-xxl-8 {
        padding: 0 20px !important;
    }

    .industries-section .sec-text {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    .industries-section .sec-sub-text {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}

/* Section Four (Why Choose) Mobile Optimization */
@media (max-width: 768px) {
    .section-four .why-choose-row {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .section-four .col-xxl-6 {
        padding: 0 20px !important;
    }

    .section-four .check-box-main {
        margin-top: 25px !important;
    }

    .section-four .check-box-main-sub {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 15px !important;
        margin-top: 20px !important;
        padding: 15px !important;
        background: #f8f9fa;
        border-radius: 12px;
        transition: all 0.3s ease;
    }

    .section-four .check-box-main-sub:hover {
        background: #fff;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    .section-four .why-icon {
        font-size: 24px !important;
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 107, 53, 0.1);
        border-radius: 50%;
        flex-shrink: 0;
    }

    .section-four .check-box-main-sub h2 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .section-four .check-box-main-sub p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .section-four .sec-video2 {
        margin: 30px 0 !important;
        display: block !important;
    }

    .section-four .check-box-main {
        margin-top: 0 !important;
    }

    .section-four .video2 {
        border-radius: 16px !important;
        width: 95% !important;
        max-width: 320px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover;
        display: block !important;
    }
}

/* Section Five Mobile Optimization */
@media (max-width: 768px) {
    .section-five .col-xxl-8 {
        padding: 0 20px !important;
    }

    .section-five .fami-cal {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }

    .section-five .residents {
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        max-width: 100% !important;
    }
}

/* Counter Section Mobile Optimization */
@media (max-width: 768px) {
    .counter-up.style-2 .counter-area ul {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center !important;
    }

    .counter-up.style-2 .counter-area li {
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
        padding: 25px !important;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    }

    .counter-up.style-2 .post-thumb {
        margin-bottom: 20px !important;
    }

    .counter-up.style-2 .post-inner {
        width: 80px !important;
        height: 80px !important;
    }

    .counter-up.style-2 .post-inner img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
    }

    .counter-up.style-2 .post-content h3 {
        font-size: 36px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    .counter-up.style-2 .post-content p {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
}

/* Testimonials Mobile Optimization */
@media (max-width: 768px) {
    .testimonial.style-3 {
        padding: 50px 0 !important;
    }

    .testimonial.style-3 .section-wrapper {
        padding: 0 20px !important;
    }

    .testimonial.style-3 .testimonial-slider {
        padding: 30px 20px !important;
        border-radius: 20px !important;
        background: #fff;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    }

    .testimonial.style-3 svg {
        width: 300px !important;
        height: 300px !important;
    }

    .testimonial.style-3 svg circle {
        r: 150 !important;
        cx: 150 !important;
        cy: 150 !important;
    }

    .testimonial.style-3 h6 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 25px !important;
    }

    .testimonial.style-3 .post-item .post-inner {
        padding: 25px 20px !important;
        text-align: center !important;
    }

    .testimonial.style-3 .post-inner h5 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    .testimonial.style-3 .post-inner span {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
        display: block !important;
    }

    .testimonial.style-3 .post-inner p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    .testi-navigation {
        margin-top: 20px !important;
        gap: 20px !important;
    }

    .testi-next,
    .testi-prev {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .testi-pagination {
        margin-top: 25px !important;
        gap: 10px !important;
    }

    .testi-pagination span {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Blog Section Mobile Optimization */
@media (max-width: 768px) {
    .blog-section {
        padding: 50px 0 !important;
    }

    .blog-section .section-header {
        margin-bottom: 30px !important;
        padding: 0 20px !important;
    }

    .blog-section .blog-slider {
        padding: 20px 0 40px !important;
    }

    .blog-section .post-item {
        margin-bottom: 20px !important;
    }

    .blog-section .post-item-inner {
        margin: 10px !important;
        border-radius: 15px !important;
        overflow: hidden;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08) !important;
    }

    .blog-section .post-thumb {
        height: 200px !important;
        overflow: hidden;
    }

    .blog-section .post-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .blog-section .post-content {
        padding: 20px !important;
    }

    .blog-section .content-area h5 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .blog-section .content-area h5 a {
        color: inherit !important;
    }

    .blog-section .meta-post {
        margin-bottom: 12px !important;
    }

    .blog-section .meta-post .by a {
        font-size: 12px !important;
        padding-right: 15px !important;
    }

    .blog-section .content-area p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }

    .blog-section .social-area {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 15px !important;
    }

    .blog-section .admin {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    .blog-section .count {
        font-size: 12px !important;
    }

    .blog-section .social-media {
        align-items: center !important;
    }

    .blog-section .social-media span {
        font-size: 12px !important;
        margin-right: 8px !important;
    }

    .blog-section .social-media ul {
        gap: 5px !important;
    }

    .blog-section .social-media li a {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 12px !important;
    }

    .blog-pagination {
        margin-top: 20px !important;
    }
}

/* Contact Form Mobile Optimization */
@media (max-width: 768px) {
    .contact-form-section {
        padding: 40px 0 80px !important;
    }

    .contact-form-section .form-sec-row {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .contact-form-section .col-xxl-6 {
        padding: 0 20px !important;
    }

    .contact-form-section .get-toch {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    .contact-form-section .phone-list {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }

    .contact-form-section .tel-num {
        font-size: 18px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        padding: 8px 15px !important;
        background: rgba(255, 107, 53, 0.05);
        border-radius: 8px;
        display: block !important;
    }

    .contact-form-section .adres-main-home {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }

    .contact-form-section .call-support-text {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .contact-form-section .addees {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .contac-form-main {
        padding: 25px 20px !important;
        margin-top: 20px !important;
        border-radius: 15px !important;
        background: #fff !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    }

    .calcult-from-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .calcult-from-grid .full-span {
        grid-column: 1 !important;
    }

    .contact-form-section input,
    .contact-form-section select,
    .contact-form-section textarea {
        padding: 12px 15px !important;
        font-size: 16px !important;
        /* Prevent zoom on iOS */
        border-radius: 8px !important;
        border: 2px solid #e5e5e5 !important;
        background: #fff !important;
        width: 100% !important;
    }

    .contact-form-section input:focus,
    .contact-form-section select:focus,
    .contact-form-section textarea:focus {
        border-color: #FF6B35 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1) !important;
    }

    .input-label-text {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        color: #333 !important;
    }

    .your-message-input textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }

    .send-main-btn {
        margin-top: 25px !important;
    }

    .send-main-btn .btn-quote {
        width: 100% !important;
        padding: 15px 25px !important;
        font-size: 16px !important;
        justify-content: center !important;
        min-height: 50px !important;
    }

    /* International Phone Input Mobile Optimization */
    .iti {
        width: 100% !important;
    }

    .iti__country-list {
        max-height: 200px !important;
        width: 100% !important;
    }

    .iti__selected-country {
        padding: 12px 15px !important;
    }
}

/* Footer Mobile Optimization */
@media (max-width: 768px) {
    footer {
        padding-top: 40px !important;
    }

    .subscribe-section {
        padding: 25px 20px !important;
        text-align: center !important;
        margin-bottom: 40px !important;
        border-radius: 15px !important;
    }

    .subscribe-section .sec-text {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }

    .subscribe-input-main {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .subscribe-input-main input {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        border: 2px solid #e5e5e5 !important;
        border-radius: 10px !important;
        background: #fff !important;
    }

    .subscribe-input-main .btn-quote {
        width: 100% !important;
        padding: 15px 25px !important;
        font-size: 16px !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .footer-row-quick {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .footer-row-quick .col-xxl-3,
    .footer-row-quick .col-xxl-4 {
        width: 100% !important;
        text-align: center !important;
    }

    .working-hours {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    .timing-hrw {
        justify-content: space-between !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }

    .quicklinks-main {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center !important;
    }

    .quicklinks-main ul {
        text-align: center !important;
    }

    .quicklinks-main ul li a {
        font-size: 15px !important;
        line-height: 1.5 !important;
        padding: 8px 0 !important;
        display: block !important;
    }

    .media-logo-call-footer {
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        text-align: center !important;
        margin: 30px 0 !important;
    }

    .call-detl {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .img-main-call {
        width: 50px !important;
        height: 50px !important;
    }

    .call-detl a {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .footer-med-icons-main {
        justify-content: center !important;
        gap: 15px !important;
    }

    .footer-med-icons {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .copyrights-main {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
        padding: 20px 0 30px !important;
    }

    .copyrights-main p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
}

/* Bottom to Top Button Mobile Optimization */
@media (max-width: 768px) {
    .bottom-top-button {
        right: 20px !important;
        bottom: 20px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        z-index: 999 !important;
    }
}

/* Landscape Mobile Optimization (480px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .section-two .about-grid-box-main {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .services.style-2 .section-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .counter-up.style-2 .counter-area ul {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .counter-up.style-2 .counter-area li {
        width: calc(50% - 15px) !important;
    }

    .contact-form-section .calcult-from-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .footer-row-quick {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .quicklinks-main {
        flex-direction: row !important;
        justify-content: space-around !important;
    }
}

/* Ultra Small Mobile (max 360px) */
@media (max-width: 360px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sec-text,
    h1,
    h2 {
        font-size: 22px !important;
    }

    .btn-quote,
    .get-quote-btn {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }

    .nav {
        width: 260px !important;
    }

    .logo img {
        max-width: 100px !important;
    }

    .hamburger {
        width: 40px !important;
        height: 40px !important;
    }

    .section-two,
    .section-three,
    .section-four,
    .section-five,
    .blog-section,
    .lector-services,
    .services.style-2,
    .testimonial.style-3,
    .counter-up.style-2,
    .contact-form-section {
        padding: 30px 0 !important;
    }
}

/* Touch and Accessibility Improvements */
@media (max-width: 768px) {

    /* Improve touch targets */
    a,
    button,
    .btn-quote,
    .get-quote-btn,
    input,
    select,
    textarea {
        min-height: 44px;
        min-width: 44px;
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Improve focus visibility */
    *:focus {
        outline: 2px solid #FF6B35 !important;
        outline-offset: 2px !important;
    }

    /* Improve text readability */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Performance Optimizations for Mobile */
@media (max-width: 768px) {

    /* Reduce expensive CSS properties on mobile */
    .section-four .check-box-main-sub::before,
    .section-four .check-box-main-sub::after {
        display: none !important;
    }

    /* Simplify animations on mobile */
    .fade_up,
    .fade_in,
    .zoom_in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Reduce box-shadow complexity */
    .blog-section .post-item-inner,
    .services.style-2 .post-item-inner,
    .contac-form-main {
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    }
}

/* ====================================== Counter Section - Clean Vertical Bobbing Animation ===================================== */

/* Simple vertical bobbing animation for circular images */
@keyframes counter-bob {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-28px);
    }
}

/* Apply bobbing animation to each counter image with different delays */
.counter-up.style-2 .counter-area li:nth-child(1) .post-thumb {
    animation: counter-bob 3s ease-in-out infinite;
    animation-delay: 0s;
}

.counter-up.style-2 .counter-area li:nth-child(2) .post-thumb {
    animation: counter-bob 3s ease-in-out infinite;
    animation-delay: -0.75s;
    /* 1/4 cycle behind */
}

.counter-up.style-2 .counter-area li:nth-child(3) .post-thumb {
    animation: counter-bob 3s ease-in-out infinite;
    animation-delay: -1.5s;
    /* 1/2 cycle behind */
}

.counter-up.style-2 .counter-area li:nth-child(4) .post-thumb {
    animation: counter-bob 3s ease-in-out infinite;
    animation-delay: -2.25s;
    /* 3/4 cycle behind */
}

/* Enhanced circular image styling */
.counter-up.style-2 .post-inner {
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 107, 53, 0.1);
}

.counter-up.style-2 .post-inner:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(255, 107, 53, 0.2);
    border-color: rgba(255, 107, 53, 0.3);
}

.counter-up.style-2 .post-inner img {
    transition: transform 0.3s ease;
}

.counter-up.style-2 .post-inner:hover img {
    transform: scale(1.1);
}

/* Pause animations on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .counter-up.style-2 .post-thumb {
        animation: none !important;
    }
}

/* Mobile optimizations for counter animations */
@media (max-width: 768px) {
    @keyframes counter-bob {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-15px);
        }
    }

    .counter-up.style-2 .post-inner {
        border-width: 2px;
    }
}

/* ====================================== Counter Section - FORCE Horizontal Layout ===================================== */

/* Add Services Section Design Variables and Styling */
.counter-up.style-2 {
    --ip-teal: #4A7C7C;
    --ip-teal-dark: #3A6565;
    --ip-teal-light: #D4E3E3;
    --ip-orange: #FF6B35;
    --ip-dark: #1f2e2e;
    --text-grey: #5f6c7b;
    --bg-off-white: #f8fcfc;
    padding: 50px 0;
    position: relative;
    background: linear-gradient(135deg, #fff 0%, var(--bg-off-white) 100%);
    overflow: hidden;
}

/* Animated Gradient Background Layer */
.counter-up.style-2 .bg-gradient-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(0, 137, 123, 0.03) 0%, rgba(255, 255, 255, 0) 50%);
    z-index: 0;
}

/* Creative Background Container (Shapes) */
.counter-up.style-2 .bg-creative {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Abstract Shapes */
.counter-up.style-2 .bg-shape {
    position: absolute;
    opacity: 1;
}

.counter-up.style-2 .shape-ring-1 {
    top: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    border: 50px solid rgba(0, 137, 123, 0.05);
    border-radius: 50%;
    animation: spin-slow 25s linear infinite;
}

.counter-up.style-2 .shape-ring-2 {
    bottom: -120px;
    right: -80px;
    width: 500px;
    height: 500px;
    border: 70px solid rgba(255, 107, 53, 0.04);
    border-radius: 50%;
    animation: spin-slow 30s linear infinite reverse;
}

.counter-up.style-2 .shape-dot-1 {
    top: 15%;
    right: 10%;
    width: 15px;
    height: 15px;
    background: var(--ip-teal);
    opacity: 0.2;
    border-radius: 50%;
    animation: float-y 6s ease-in-out infinite;
}

.counter-up.style-2 .shape-dot-2 {
    bottom: 25%;
    left: 5%;
    width: 25px;
    height: 25px;
    background: var(--ip-orange);
    opacity: 0.2;
    border-radius: 50%;
    animation: float-y 7s ease-in-out infinite 1s;
}

/* Container positioning */
.counter-up.style-2 .container {
    position: relative;
    z-index: 2;
}

/* Section Header Styling */
.counter-up.style-2 .section-header {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}

.counter-up.style-2 .badge-pill {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--ip-teal-light);
    color: var(--ip-teal);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.counter-up.style-2 .main-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ip-dark);
    margin-bottom: 12px;
    line-height: 1.1;
}

.counter-up.style-2 .main-title span {
    background: linear-gradient(90deg, var(--ip-orange), #ff8a65, var(--ip-orange));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    animation: shimmer 3s linear infinite;
    white-space: nowrap;
}

.counter-up.style-2 .main-title span::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 107, 53, 0.2);
    z-index: -1;
    border-radius: 4px;
}

.counter-up.style-2 .sub-text {
    font-size: 0.95rem;
    color: var(--text-grey);
    line-height: 1.55;
    max-width: 90%;
    margin: 0 auto;
}

/* Override existing styles with high specificity to force horizontal layout */
.counter-up.style-2 .container .row .counter-area {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.counter-up.style-2 .container .row .counter-area ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 30px !important;
    flex-wrap: nowrap !important;
}

.counter-up.style-2 .container .row .counter-area ul li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
    min-width: 200px !important;
    max-width: 250px !important;
    position: relative !important;
    margin: 0 !important;
    padding: 20px 10px !important;
}

/* Force circular image styling */
.counter-up.style-2 .post-thumb {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 20px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.counter-up.style-2 .post-inner {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border: 3px solid rgba(255, 107, 53, 0.2) !important;
    background: #fff !important;
    position: relative !important;
}

.counter-up.style-2 .post-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Force proper text styling */
.counter-up.style-2 .post-content {
    text-align: center !important;
    width: 100% !important;
}

.counter-up.style-2 .post-content h3 {
    font-size: 48px !important;
    font-weight: 900 !important;
    color: #19b3b6 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1 !important;
    font-family: "Rubik", sans-serif !important;
}

.counter-up.style-2 .post-content p {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Vertical bobbing animation */
@keyframes vertical-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Apply animation to each image with staggered delays */
.counter-up.style-2 .counter-area ul li:nth-child(1) .post-thumb {
    animation: vertical-float 4s ease-in-out infinite;
    animation-delay: 0s;
}

.counter-up.style-2 .counter-area ul li:nth-child(2) .post-thumb {
    animation: vertical-float 4s ease-in-out infinite;
    animation-delay: -1s;
}

.counter-up.style-2 .counter-area ul li:nth-child(3) .post-thumb {
    animation: vertical-float 4s ease-in-out infinite;
    animation-delay: -2s;
}

.counter-up.style-2 .counter-area ul li:nth-child(4) .post-thumb {
    animation: vertical-float 4s ease-in-out infinite;
    animation-delay: -3s;
}

/* Hover effects */
.counter-up.style-2 .post-inner:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 20px 50px rgba(255, 107, 53, 0.3) !important;
    border-color: rgba(255, 107, 53, 0.5) !important;
}

.counter-up.style-2 .post-inner:hover img {
    transform: scale(1.1) !important;
}

/* Mobile responsive - stack vertically only on very small screens */
@media (max-width: 767px) {
    .counter-up.style-2 .container .row .counter-area ul {
        flex-direction: column !important;
        gap: 40px !important;
        align-items: center !important;
    }

    .counter-up.style-2 .container .row .counter-area ul li {
        min-width: auto !important;
        max-width: 300px !important;
        width: 100% !important;
    }

    .counter-up.style-2 .post-thumb,
    .counter-up.style-2 .post-inner {
        width: 120px !important;
        height: 120px !important;
    }

    .counter-up.style-2 .post-content h3 {
        font-size: 36px !important;
    }

    @keyframes vertical-float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-8px);
        }
    }
}

/* Tablet - keep horizontal but adjust spacing */
@media (min-width: 768px) and (max-width: 991px) {
    .counter-up.style-2 .container .row .counter-area ul {
        gap: 20px !important;
    }

    .counter-up.style-2 .post-thumb,
    .counter-up.style-2 .post-inner {
        width: 120px !important;
        height: 120px !important;
    }

    .counter-up.style-2 .post-content h3 {
        font-size: 40px !important;
    }

    .counter-up.style-2 .post-content p {
        font-size: 14px !important;
    }
}

/* Ensure no conflicting display properties */
.counter-up.style-2 .counter-area ul li .post-thumb::after,
.counter-up.style-2 .counter-area ul li .post-thumb::before {
    display: none !important;
}

/* Remove any existing transform or positioning conflicts */
.counter-up.style-2 .post-thumb {
    position: relative !important;
    z-index: 1 !important;
}

/* === Counter-Up Section background (similar to IP Solutions) === */
.counter-up.style-2 {
    position: relative;
    padding: 100px 0;
    /* keep spacing */
    background: linear-gradient(180deg, #f8fbfd 0%, #ffffff 55%, #f8fbfd 100%);
    overflow: hidden;
}

.counter-up.style-2::before,
.counter-up.style-2::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(60px);
}

/* Top-right orange glow */
.counter-up.style-2::before {
    width: 720px;
    height: 720px;
    right: -300px;
    top: -320px;
    background: radial-gradient(closest-side, rgba(255, 107, 53, 0.25), rgba(255, 107, 53, 0) 70%);
}

/* Bottom-left teal glow */
.counter-up.style-2::after {
    width: 820px;
    height: 820px;
    left: -360px;
    bottom: -360px;
    background: radial-gradient(closest-side, rgba(25, 179, 182, 0.25), rgba(25, 179, 182, 0) 70%);
}

/* Ensure content sits above decorative background */
.counter-up.style-2>* {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .counter-up.style-2::before {
        width: 380px;
        height: 380px;
        right: -160px;
        top: -180px;
        filter: blur(32px);
    }

    .counter-up.style-2::after {
        width: 420px;
        height: 420px;
        left: -180px;
        bottom: -200px;
        filter: blur(32px);
    }
}

@media (max-width: 575px) {
    .counter-up.style-2 {
        background: linear-gradient(180deg, #f9fbfc 0%, #ffffff 60%, #f9fbfc 100%);
    }

    .counter-up.style-2::before {
        width: 260px;
        height: 260px;
        right: -120px;
        top: -140px;
        filter: blur(24px);
    }

    .counter-up.style-2::after {
        width: 300px;
        height: 300px;
        left: -140px;
        bottom: -160px;
        filter: blur(24px);
    }
}

/* ====================================== Gallery Section CSS - FIXED ZOOM FUNCTIONALITY ====================================== */
.gallery-section {
    --ip-teal: #4A7C7C;
    --ip-teal-dark: #3A6565;
    --ip-teal-light: #D4E3E3;
    --ip-orange: #FF6B35;
    --ip-dark: #1f2e2e;
    --text-grey: #5f6c7b;
    --bg-off-white: #f8fcfc;
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: linear-gradient(135deg, #fff 0%, var(--bg-off-white) 100%);
}

/* Radial Gradient Overlay */
.gallery-section::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 137, 123, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

/* Background Animations */
.top-right-bg-animation-gallery {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-gallery 60s linear infinite;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.top-left-bg-animation-gallery {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%2300897B' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-gallery 60s linear infinite reverse;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

/* Bottom Background Animations */
.bottom-right-bg-animation-gallery {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-gallery 60s linear infinite;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.bottom-left-bg-animation-gallery {
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C 80 20, 50 20, 30 0 S 0 50, 20 80 S 80 80, 100 50 Z' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Cpath d='M100 10 C 70 30, 40 30, 10 10' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Cpath d='M90 90 C 60 70, 30 70, 0 90' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23FF6B35' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: spin-slow-gallery 60s linear infinite reverse;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

@keyframes spin-slow-gallery {
    0% {
        transform: rotate(0deg) scale(1.5);
    }

    50% {
        transform: rotate(180deg) scale(1.4);
    }

    100% {
        transform: rotate(360deg) scale(1.5);
    }
}

.gallery-section .container {
    position: relative;
    z-index: 2;
}

/* Gallery Header Typography - Services Section Style */
.gallery-section .gallery-header {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}

.gallery-section .badge-pill {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--ip-teal-light);
    color: var(--ip-teal);
    /* Match standard capsule size used in other sections */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.gallery-section .main-title {
    /* Use hero heading scale for visual parity with other large sections */
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--ip-dark);
    margin-bottom: 12px;
    line-height: 1.05;
    letter-spacing: -1px;
}

.gallery-section .main-title .title-line-1 {
    display: inline-block;
}

.gallery-section .main-title .title-highlight {
    /* Force second word onto its own line and allow JS to set its left offset */
    display: block;
    position: relative;
    color: var(--ip-orange);
    font-weight: 800;
    padding-left: 6px;
    /* Use the computed --title-offset directly so it aligns to the anchor char */
    margin-left: calc(var(--title-offset, 0px));
    white-space: nowrap;
}

.gallery-section .main-title .title-highlight::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 107, 53, 0.2);
    z-index: -1;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .gallery-section .main-title {
        text-align: center;
    }

    .gallery-section .main-title .title-line-1,
    .gallery-section .main-title .title-highlight {
        font-size: inherit;
        font-weight: inherit;
    }

    .gallery-section .main-title .title-highlight {
        display: inline;
        margin-left: 0;
        padding-left: 4px;
    }
}

.gallery-section .sub-text {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 0 40px 0;
    font-weight: 400;
}

.gallery-carousel-wrapper {
    position: relative;
    margin-top: 60px;
}

.gallery-slider {
    overflow: visible;
}

.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 280px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.gallery-image {
    position: relative;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease;
}

.gallery-image:hover img {
    transform: scale(1.1);
}

/* FIXED: Gallery Overlay with proper zoom icon */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.8), rgba(255, 107, 53, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
}

.gallery-image:hover .gallery-overlay {
    opacity: 1;
}

/* === Override: remove hover zoom icon and make images open in popup on click === */
.gallery-overlay::before {
    display: none !important;
    content: none !important;
}

.gallery-image,
.gallery-overlay {
    cursor: zoom-in;
}

/* Like Button - positioned in corner */
.gallery-like-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 25px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
    backdrop-filter: blur(10px);
}

.gallery-like-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.gallery-like-btn.liked {
    color: #FF6B35;
}

.gallery-like-btn i {
    transition: all 0.3s ease;
}

.gallery-like-btn.liked i {
    color: #FF6B35;
    animation: heartBeat 0.6s ease;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

/* Gallery Navigation - Restored and properly styled */
.gallery-navigation {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
    z-index: 4;
    pointer-events: none;
}

.gallery-prev,
.gallery-next {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    pointer-events: all;
}

.gallery-prev:hover,
.gallery-next:hover {
    background: #FF6B35;
    color: white;
    transform: scale(1.1);
}

.gallery-prev i,
.gallery-next i {
    font-size: 18px;
}

/* Gallery Pagination */
.gallery-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    gap: 10px;
}

.gallery-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-pagination .swiper-pagination-bullet-active {
    background: #FF6B35;
    transform: scale(1.2);
}

/* ====================================== Gallery Modal CSS ====================================== */
.gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.gallery-modal.active {
    opacity: 1;
    visibility: visible;
}

.gallery-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.gallery-modal-image {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    transition: opacity 0.3s ease;
}

.gallery-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.gallery-modal-close:hover {
    background: #FF6B35;
    transform: scale(1.1);
}

.gallery-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.gallery-modal-nav:hover {
    background: #FF6B35;
    transform: translateY(-50%) scale(1.1);
}

.gallery-modal-prev {
    left: 20px;
}

.gallery-modal-next {
    right: 20px;
}

.gallery-modal-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 10;
}

.gallery-modal-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 30px 20px 20px;
    text-align: center;
}

.gallery-modal-info span {
    font-size: 18px;
    font-weight: 600;
}

/* Prevent body scroll when modal is open */
body.gallery-modal-open {
    overflow: hidden;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .gallery-item {
        height: 220px;
    }

    .gallery-navigation {
        padding: 0 10px;
    }

    .gallery-prev,
    .gallery-next {
        width: 40px;
        height: 40px;
    }

    .gallery-modal-content {
        max-width: 95vw;
        max-height: 95vh;
        margin: 20px;
    }

    .gallery-modal-nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .gallery-modal-close {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

/* Gallery Slide Content - Grid Layout for 3 Images Per Slide */
.gallery-slide-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 15px !important;
}

/* Responsive Grid Layout */
@media (max-width: 1024px) {
    .gallery-slide-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
}

@media (max-width: 768px) {
    .gallery-slide-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }
}

/* Ensure gallery items fill the grid cells properly */
.gallery-slide-content .gallery-item {
    width: 100% !important;
    height: 450px !important;
    margin: 0 !important;
}

@media (max-width: 1200px) {
    .gallery-slide-content .gallery-item {
        height: 420px !important;
    }
}

@media (max-width: 1024px) {
    .gallery-slide-content .gallery-item {
        height: 400px !important;
    }
}

@media (max-width: 768px) {
    .gallery-slide-content .gallery-item {
        height: 380px !important;
    }
}

@media (max-width: 576px) {
    .gallery-slide-content .gallery-item {
        height: 360px !important;
    }

    .gallery-slide-content {
        padding: 0 5px !important;
    }
}

/* ====================================== Gallery Section - 3 Small Cards Per Slide Like Newsletters ===================================== */

.gallery-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: #f8f9fa;
}

.gallery-carousel-wrapper {
    position: relative;
    margin-top: 60px;
}

.gallery-slider {
    overflow: hidden;
    padding: 20px 0 60px;
}

.gallery-slider .swiper-wrapper {
    align-items: stretch;
    display: flex;
}

/* Gallery Slide Content - Grid Layout for 3 Cards Per Slide */
.gallery-slide-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    padding: 0 15px !important;
}

/* Gallery Item - Small Card Style Like Newsletters */
.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 400px !important;
    /* Compact card height like newsletters */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Gallery Image Container - Like Newsletter Thumbnails */
.gallery-image-wrapper {
    position: relative;
    height: 250px !important;
    /* Image area height like newsletters */
    overflow: hidden;
    flex-shrink: 0;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

/* Gallery Overlay with Zoom Icon */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.8), rgba(255, 107, 53, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
    cursor: pointer;
}

.gallery-image-wrapper:hover .gallery-overlay {
    opacity: 1;
}

.gallery-zoom-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-zoom-icon i {
    font-size: 24px;
    color: white;
}

.gallery-overlay:hover .gallery-zoom-icon {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3);
}

/* Gallery Content Area - Like Newsletter Content */
.gallery-content-area {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gallery-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
    line-height: 1.3;
}

.gallery-description {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 12px;
    flex: 1;
}

/* Like Button - positioned in corner */
.gallery-like-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 25px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
    backdrop-filter: blur(10px);
}

.gallery-like-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.gallery-like-btn.liked {
    color: #FF6B35;
}

.gallery-like-btn i {
    transition: all 0.3s ease;
}

.gallery-like-btn.liked i {
    color: #FF6B35;
    animation: heartBeat 0.6s ease;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

/* Gallery Pagination - Match newsletters style exactly */
.gallery-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    gap: 10px;
}

.gallery-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    margin: 0 5px;
}

.gallery-pagination .swiper-pagination-bullet:hover {
    background: #FF6B35;
    transform: scale(1.2);
}

.gallery-pagination .swiper-pagination-bullet-active {
    background: #FF6B35;
    transform: scale(1.3);
    box-shadow: 0 3px 10px rgba(255, 107, 53, 0.4);
}

/* Remove navigation arrows completely */
.gallery-navigation,
.gallery-prev,
.gallery-next {
    display: none !important;
}

/* Loading State */
.gallery-loading {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.gallery-loading i {
    font-size: 2rem;
    margin-bottom: 15px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design - Match newsletters breakpoints exactly */
@media (max-width: 1200px) {
    .gallery-item {
        height: 380px !important;
    }

    .gallery-image-wrapper {
        height: 230px !important;
    }
}

@media (max-width: 1024px) {
    .gallery-slide-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }

    .gallery-item {
        height: 360px !important;
    }

    .gallery-image-wrapper {
        height: 220px !important;
    }
}

@media (max-width: 768px) {
    .gallery-section {
        padding: 60px 0;
    }

    .gallery-slide-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }

    .gallery-item {
        height: 340px !important;
    }

    .gallery-image-wrapper {
        height: 200px !important;
    }

    .gallery-carousel-wrapper {
        margin-top: 40px;
    }

    .gallery-slider {
        padding: 15px 0 50px;
    }

    .gallery-like-btn {
        padding: 6px 10px;
        font-size: 13px;
    }

    .gallery-zoom-icon {
        width: 50px;
        height: 50px;
    }

    .gallery-zoom-icon i {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .gallery-section {
        padding: 50px 0;
    }

    .gallery-item {
        height: 320px !important;
    }

    .gallery-image-wrapper {
        height: 180px !important;
    }

    .gallery-carousel-wrapper {
        margin-top: 30px;
    }

    .gallery-zoom-icon {
        width: 45px;
        height: 45px;
    }

    .gallery-zoom-icon i {
        font-size: 18px;
    }

    .gallery-slide-content {
        padding: 0 5px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .gallery-item,
    .gallery-image,
    .gallery-overlay,
    .gallery-zoom-icon,
    .gallery-like-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== Gallery Modal (Lightbox) ===== */
.gallery-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.gallery-modal.active {
    display: flex;
}

.gallery-modal-content {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
}

.gallery-modal-image {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.gallery-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
}

.gallery-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
}

.gallery-modal-prev {
    left: 10px;
}

.gallery-modal-next {
    right: 10px;
}

.gallery-modal-counter {
    position: absolute;
    top: 12px;
    left: 14px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 2;
}

.gallery-modal-info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    color: #fff;
    border-radius: 0 0 8px 8px;
}

.gallery-modal-info #gallery-modal-title,
.gallery-modal-info .caption {
    font-weight: 600;
}

/* Make sure overlay inside gallery card doesn't block clicks */
.gallery-item {
    position: relative;
}

.gallery-image-wrapper,
.gallery-image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Like button always clickable */
.gallery-like-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #FF6B35;
    border: none;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.gallery-like-btn i {
    transition: transform .25s ease;
}

.gallery-like-btn.liked i {
    transform: scale(1.15);
    color: #ff4d4f;
}

/* Card text area under images */
.gallery-content-area {
    padding: 12px 2px 0;
}

.gallery-title {
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 6px;
}

.gallery-description {
    color: #6B7280;
    font-size: 14px;
    line-height: 1.5;
}

/* Responsive 3-up grid inside each swiper slide (desktop) */
.gallery-slide-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 1023px) {
    .gallery-slide-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 639px) {
    .gallery-slide-content {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Prevent transformed ancestors from breaking fixed positioning when modal is open */
body.gallery-modal-open {
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

/* ====================================== Services Section ====================================== */

/* --- 1. Global Variables --- */
.services-section {
    --ip-teal: #4A7C7C;
    --ip-teal-dark: #3A6565;
    --ip-teal-light: #D4E3E3;
    --ip-orange: #FF6B35;
    --ip-dark: #1f2e2e;
    --text-grey: #5f6c7b;
    --bg-off-white: #f8fcfc;
    --bg-color: #ffffff;
    --card-radius: 12px;
    --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    --card-hover-shadow: 0 12px 30px rgba(0, 137, 123, 0.12);
}

/* --- 2. Creative Animations --- */

/* Background Gradient Flow */
@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Floating Background Shapes */
@keyframes float-y {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Pulse Ring for Icons */
@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 137, 123, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 137, 123, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 137, 123, 0);
    }
}

/* Gradient Text Shimmer */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Subtle Icon Float */
@keyframes icon-float-subtle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Card Entrance Animation */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 3. Section Styling --- */
.services-section {
    padding: 50px 0;
    position: relative;
    background: linear-gradient(135deg, #fff 0%, var(--bg-off-white) 100%);
    overflow: hidden;
}

/* Animated Gradient Background Layer */
.services-section .bg-gradient-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(0, 137, 123, 0.03) 0%, rgba(255, 255, 255, 0) 50%);
    z-index: 0;
}

/* Creative Background Container (Shapes) */
.services-section .bg-creative {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Abstract Shapes */
.services-section .bg-shape {
    position: absolute;
    opacity: 1;
}

.services-section .shape-ring-1 {
    top: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    border: 50px solid rgba(0, 137, 123, 0.05);
    border-radius: 50%;
    animation: spin-slow 25s linear infinite;
}

.services-section .shape-ring-2 {
    bottom: -120px;
    right: -80px;
    width: 500px;
    height: 500px;
    border: 70px solid rgba(255, 107, 53, 0.04);
    border-radius: 50%;
    animation: spin-slow 30s linear infinite reverse;
}

.services-section .shape-dot-1 {
    top: 15%;
    right: 10%;
    width: 15px;
    height: 15px;
    background: var(--ip-teal);
    opacity: 0.2;
    border-radius: 50%;
    animation: float-y 6s ease-in-out infinite;
}

.services-section .shape-dot-2 {
    bottom: 25%;
    left: 5%;
    width: 25px;
    height: 25px;
    background: var(--ip-orange);
    opacity: 0.2;
    border-radius: 50%;
    animation: float-y 7s ease-in-out infinite 1s;
}

.services-section .container {
    position: relative;
    z-index: 2;
}

/* --- 4. Typography --- */
.services-section .section-header {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}

.services-section .badge-pill {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--ip-teal-light);
    color: var(--ip-teal);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.services-section .main-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ip-dark);
    margin-bottom: 12px;
    line-height: 1.1;
}

.services-section .main-title span {
    background: linear-gradient(90deg, var(--ip-orange), #ff8a65, var(--ip-orange));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    animation: shimmer 3s linear infinite;
    white-space: nowrap;
}

/* Underline decoration */
.services-section .main-title span::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 107, 53, 0.2);
    z-index: -1;
    border-radius: 4px;
}

.services-section .sub-text {
    font-size: 0.95rem;
    color: var(--text-grey);
    line-height: 1.55;
    max-width: 90%;
    margin: 0 auto;
}

/* --- 5. Creative Card Design --- */
.services-section .swiper-slide {
    padding: 20px 15px 40px 15px;
    height: auto;
}

.services-section .service-card {
    background: #fff;
    border-radius: var(--card-radius);
    padding: 20px 22px;
    text-align: left;
    position: relative;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(0, 0, 0, 0.03);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
    overflow: hidden;
    animation: cardFadeIn 0.6s ease-out forwards;
    opacity: 0;
}

.services-section .swiper-slide-active .service-card {
    animation-delay: 0.1s;
}

.services-section .swiper-slide-next .service-card {
    animation-delay: 0.2s;
}

/* Bottom Gradient Line (Hidden initially) */
.services-section .service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--ip-teal), var(--ip-orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.services-section .service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(0, 137, 123, 0.2);
}

.services-section .service-card:hover::after {
    transform: scaleX(1);
}

/* Icon Container */
.services-section .icon-box {
    width: 40px;
    height: 40px;
    background: var(--ip-dark);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Remove pulse animation for consistency - cleaner look */

.services-section .service-icon {
    font-size: 17px;
    color: #fff;
    transition: all 0.3s ease;
}

/* Hover: 3D Flip Icon */
.services-section .service-card:hover .icon-box {
    background: var(--ip-teal);
    transform: rotateY(180deg);
}

.services-section .service-card:hover .service-icon {
    transform: rotateY(-180deg);
}

/* Content */
.services-section .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ip-dark);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.services-section .service-card:hover .card-title {
    color: var(--ip-teal);
}

.services-section .card-desc {
    font-size: 0.85rem;
    color: var(--text-grey);
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
    transition: color 0.3s ease;
}

.services-section .service-card:hover .card-desc {
    color: var(--ip-dark);
}

/* Action Link */
.services-section .card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ip-teal);
    text-decoration: none;
    transition: all 0.3s ease;
}

.services-section .card-link i {
    transition: transform 0.3s ease;
}

.services-section .service-card:hover .card-link {
    color: var(--ip-orange);
}

.services-section .service-card:hover .card-link i {
    transform: translateX(5px);
}

/* --- 6. Pagination --- */
.services-section .services-pagination {
    position: relative;
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.services-section .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d1d5db;
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 5px !important;
}

.services-section .swiper-pagination-bullet-active {
    background: var(--ip-teal);
    width: 30px;
    border-radius: 5px;
}

/* --- 7. Responsive --- */

/* Large Desktop (1920px+) */
@media (min-width: 1920px) {
    .services-section .container {
        max-width: 1400px;
    }

    .services-section .section-header {
        max-width: 900px;
        margin-bottom: 70px;
    }
}

/* Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .services-section .container {
        max-width: 1320px;
    }

    .services-section .section-header {
        max-width: 850px;
    }
}

/* Standard Desktop (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .services-section .container {
        max-width: 1140px;
    }

    .services-section .service-card {
        padding: 32px 25px;
    }
}

/* Small Desktop/Large Laptop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .services-section {
        padding: 70px 0;
    }

    .services-section .container {
        max-width: 960px;
    }

    .services-section .section-header {
        max-width: 700px;
        margin-bottom: 50px;
    }

    .services-section .main-title {
        font-size: 2rem;
    }

    .services-section .service-card {
        padding: 30px 22px;
    }

    .services-section .card-title {
        font-size: 1.15rem;
    }

    .services-section .card-desc {
        font-size: 0.9rem;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .services-section {
        padding: 60px 0;
    }

    .services-section .section-header {
        max-width: 650px;
        margin-bottom: 45px;
        padding: 0 15px;
    }

    .services-section .main-title {
        font-size: 1.9rem;
    }

    .services-section .sub-text {
        font-size: 0.9rem;
    }

    .services-section .swiper-slide {
        padding: 15px 10px 35px 10px;
    }

    .services-section .service-card {
        padding: 28px 20px;
    }

    .services-section .icon-box {
        width: 45px;
        height: 45px;
        margin-bottom: 18px;
    }

    .services-section .service-icon {
        font-size: 18px;
    }

    .services-section .card-title {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .services-section .card-desc {
        font-size: 0.88rem;
        margin-bottom: 20px;
    }
}

/* Mobile (below 768px) */
@media (max-width: 767px) {
    .services-section {
        padding: 40px 0;
    }

    .services-section .main-title {
        font-size: 1.75rem;
        white-space: nowrap;
    }

    .services-section .section-header {
        padding: 0 20px;
        margin-bottom: 35px;
    }

    .services-section .sub-text {
        font-size: 0.85rem;
        max-width: 100%;
    }

    .services-section .swiper-slide {
        padding: 10px 5px 30px 5px;
    }

    .services-section .service-card {
        padding: 25px 18px;
    }

    .services-section .icon-box {
        width: 45px;
        height: 45px;
        margin-bottom: 15px;
    }

    .services-section .service-icon {
        font-size: 18px;
    }

    .services-section .card-title {
        font-size: 1.05rem;
    }

    .services-section .card-desc {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    .services-section .card-link {
        font-size: 0.88rem;
    }
}

/* Extra Small Mobile (below 480px) */
@media (max-width: 480px) {
    .services-section {
        padding: 35px 0;
    }

    .services-section .main-title {
        font-size: 1.3rem;
        white-space: nowrap;
    }

    .services-section .badge-pill {
        font-size: 10px;
        padding: 4px 10px;
    }

    .services-section .service-card {
        padding: 20px 15px;
    }

    .services-section .card-title {
        font-size: 1rem;
    }
}