.carousel-3d-container,
.slide-3d {
    background-color: #fff;
    overflow: hidden
}

.about-button,
.action-btn {
    text-decoration: none;
    text-transform: uppercase
}

.about-button,
.about-subtitle,
.action-btn {
    text-transform: uppercase
}

.carousel-3d-container {
    position: relative;
    width: 100%;
    height: 800px;
    perspective: 1800px;
    padding: 60px 0 100px;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto
}

.carousel-3d-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(245, 245, 245, .3) 0, rgba(255, 255, 255, .8) 100%);
    z-index: -1
}

.carousel-3d {
    position: relative;
    width: 95%;
    max-width: 1600px;
    height: 100%;
    transform-style: preserve-3d;
    transform: translateZ(-300px);
    transition: transform 1s;
    margin: 0 auto
}

.carousel-3d-title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: var(--heading-color, #5f687b);
    margin-bottom: 70px;
    position: relative
}

.carousel-3d-title::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 4px;
    background: var(--accent-color, #0078c8);
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%)
}

.slide-3d {
    position: absolute;
    width: 550px;
    height: 600px;
    left: 50%;
    top: 50%;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
    transition: .5s;
    opacity: .7;
    transform-origin: center;
    transform: translateX(-50%) translateY(-50%)
}

.slide-3d.active {
    opacity: 1;
    box-shadow: 0 30px 70px rgba(0, 0, 120, .25);
    z-index: 10
}

.slide-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.about-image-wrapper:hover .about-image,
.slide-3d:hover img {
    transform: scale(1.05)
}

.slide-3d-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    padding: 25px;
    transform: translateY(100%);
    transition: transform .3s
}

.about-button,
.about-paragraph,
.about-subtitle,
.about-title {
    transform: translateY(20px)
}

.slide-3d:hover .slide-3d-content {
    transform: translateY(0)
}

.slide-3d-content h3 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
    color: #fff
}

.slide-3d-content p {
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6
}

.carousel-3d-controls {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    z-index: 20
}

.carousel-3d-control {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    transition: .3s;
    border: none;
    font-size: 28px
}

.carousel-3d-control:hover {
    background-color: var(--accent-color, #0078c8);
    color: #fff;
    transform: scale(1.05)
}

.carousel-3d-indicators {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20
}

.carousel-3d-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: .3s
}

.action-btn,
.carousel-3d-indicator.active {
    background-color: var(--accent-color, #0078c8)
}

.carousel-3d-indicator.active {
    transform: scale(1.3)
}

.about-image-wrapper:hover,
.action-btn:hover {
    transform: translateY(-5px)
}

.action-btn {
    display: block;
    width: max-content;
    margin: 50px auto 0;
    padding: 18px 40px;
    color: #fff;
    border-radius: 40px;
    font-weight: 600;
    text-align: center;
    transition: .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 8px 30px rgba(0, 120, 200, .3);
    font-family: var(--heading-font, "Raleway", sans-serif);
    letter-spacing: 1px;
    font-size: 18px
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--secondary-color, #ff6b00);
    transition: width .4s;
    z-index: -1
}

.action-btn:hover {
    color: #fff;
    box-shadow: 0 15px 40px rgba(0, 120, 200, .4)
}

.action-btn:hover::before {
    width: 100%
}

@media (max-width:1400px) {
    .carousel-3d-container {
        height: 700px
    }

    .slide-3d {
        width: 480px;
        height: 520px
    }

    .carousel-3d-title {
        font-size: 38px
    }
}

@supports not (backdrop-filter:blur(5px)) {
    .slide-3d-content {
        background: rgba(0, 0, 0, .8)
    }
}

.about-modern {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 60px
}

.about-modern br {
    display: none
}

.about-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 0 80px;
    position: relative;
    z-index: 2
}

.about-modern::after,
.about-modern::before,
.floating-element {
    position: absolute;
    border-radius: 50%;
    z-index: 1
}

.about-modern::before {
    content: '';
    top: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: linear-gradient(45deg, rgba(0, 120, 200, .03), rgba(0, 120, 200, .01))
}

.about-modern::after {
    content: '';
    bottom: -30%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: linear-gradient(45deg, rgba(255, 107, 0, .02), rgba(255, 107, 0, .01))
}

.floating-element {
    background-color: var(--primary-color, #0078c8);
    filter: blur(10px);
    opacity: .05
}

.floating-element-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    right: 5%;
    animation: 15s ease-in-out infinite float1
}

.floating-element-2 {
    width: 150px;
    height: 150px;
    bottom: 15%;
    left: 10%;
    animation: 18s ease-in-out infinite float2
}

.about-grid-lines,
.about-image,
.about-image-overlay {
    left: 0;
    width: 100%;
    height: 100%;
    top: 0
}

@keyframes float1 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(-20px, 20px)
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(20px, -20px)
    }
}

.about-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    height: 100%;
    min-height: 600px;
    background-color: #eaeaea;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .1);
    transition: transform .5s
}

.certification-card,
.feature-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05)
}

.about-image {
    object-fit: cover;
    position: absolute;
    transition: transform .7s ease-out
}

.about-image-overlay {
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
    z-index: 2
}

.about-button:hover,
.animated-line {
    background-color: var(--primary-color, #0078c8)
}

.about-grid-lines {
    position: absolute;
    background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 3;
    opacity: .3
}

.about-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0
}

.about-title-wrapper {
    margin-bottom: 40px;
    position: relative
}

.about-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color, #0078c8);
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity .5s, transform .5s
}

.about-title {
    font-size: 56px;
    font-weight: 800;
    color: #333;
    margin: 0;
    line-height: 1.1;
    opacity: 0;
    transition: opacity .5s .1s, transform .5s .1s
}

.about-description {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
    max-width: 90%
}

.about-button,
.certification-card:hover .certification-name,
.expert-card:hover .expert-name,
.feature-card:hover .feature-title,
.feature-icon i {
    color: var(--primary-color, #0078c8)
}

.about-paragraph {
    opacity: 0;
    transition: opacity .5s, transform .5s;
    margin-bottom: 20px
}

.about-paragraph:first-child {
    transition-delay: 0.2s
}

.about-paragraph:nth-child(2) {
    transition-delay: 0.3s
}

.about-paragraph:nth-child(3) {
    transition-delay: 0.4s
}

.about-paragraph:nth-child(4) {
    transition-delay: 0.5s
}

.about-paragraph:nth-child(5) {
    transition-delay: 0.6s
}

.animated-line {
    width: 0;
    height: 3px;
    margin: 15px 0 30px;
    transition: width 1.2s
}

.certified-futuristic.reveal-visible .certification-card,
.certified-futuristic.reveal-visible .certified-description,
.certified-futuristic.reveal-visible .certified-subtitle,
.certified-futuristic.reveal-visible .certified-title,
.grand-opening-futuristic.reveal-visible .grand-opening-header,
.reveal-visible .about-button,
.reveal-visible .about-paragraph,
.reveal-visible .about-subtitle,
.reveal-visible .about-title,
.why-choose-futuristic.reveal-visible .feature-card,
.why-choose-futuristic.reveal-visible .why-choose-description,
.why-choose-futuristic.reveal-visible .why-choose-subtitle,
.why-choose-futuristic.reveal-visible .why-choose-title {
    opacity: 1;
    transform: translateY(0)
}

.certified-futuristic.reveal-visible .certified-title::after,
.grand-opening-futuristic.reveal-visible .title-decoration,
.reveal-visible .animated-line,
.why-choose-futuristic.reveal-visible .why-choose-title::after {
    width: 80px
}

.about-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    background-color: transparent;
    border: 2px solid var(--primary-color, #0078c8);
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    font-size: 14px;
    transition: .3s;
    opacity: 0;
    transition: opacity .5s .7s, transform .5s .7s, background-color .3s, color .3s;
    margin-top: 20px
}

.about-button:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 120, 200, .25)
}

.about-button-icon {
    margin-left: 8px;
    transition: transform .3s
}

.about-button:hover .about-button-icon {
    transform: translateX(5px)
}

@media (max-width:1200px) {
    .carousel-3d-container {
        height: 600px
    }

    .slide-3d {
        width: 420px;
        height: 460px
    }

    .carousel-3d-title {
        font-size: 34px
    }

    .carousel-3d-control {
        width: 60px;
        height: 60px;
        font-size: 24px
    }

    .about-container {
        padding: 0 50px
    }

    .about-title {
        font-size: 46px
    }
}

.certified-futuristic,
.why-choose-futuristic {
    position: relative;
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
    z-index: 1
}

.why-choose-futuristic::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 120, 200, .02) 0, rgba(0, 120, 200, 0) 70%);
    z-index: -1;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%)
}

.why-choose-futuristic::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 120, 200, .02) 0, rgba(0, 120, 200, 0) 70%);
    z-index: -1
}

.certified-container,
.testimonials-modern__container,
.why-choose-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative
}

.accent-line,
.cert-accent-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, rgba(0, 120, 200, 0), rgba(0, 120, 200, .5), rgba(0, 120, 200, 0));
    z-index: 0;
    transition: height 2.5s ease-out
}

.certification-card:hover::before,
.certified-futuristic.reveal-visible .cert-accent-line,
.feature-card:hover::before,
.grand-opening-futuristic.reveal-visible .grand-accent-line,
.why-choose-futuristic.reveal-visible .accent-line {
    height: 100%
}

.certified-header,
.why-choose-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2
}

.certified-subtitle,
.why-choose-subtitle {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary-color, #0078c8);
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: 1.2s
}

.certified-title,
.why-choose-title {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: 1.2s .3s
}

.certified-title::after,
.why-choose-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(to right, rgba(0, 120, 200, .3), var(--primary-color, #0078c8), rgba(0, 120, 200, .3));
    transition: width 1.8s .9s
}

.why-choose-description {
    max-width: 700px;
    margin: 0 auto 60px;
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    opacity: 0;
    transform: translateY(20px);
    transition: 1.2s .6s
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px
}

.feature-card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 35px;
    transition: .8s;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transform: translateY(40px);
    border: 1px solid rgba(0, 120, 200, .05)
}

.certification-card::before,
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--primary-color, #0078c8);
    transition: height 1s;
    z-index: -1
}

.certification-card:hover,
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .1)
}

.certification-card:first-child,
.feature-card:first-child {
    transition-delay: 0.9s
}

.feature-card:nth-child(2) {
    transition-delay: 1.2s
}

.certification-card:nth-child(4),
.feature-card:nth-child(3) {
    transition-delay: 1.5s
}

.feature-card:nth-child(4) {
    transition-delay: 1.8s
}

.feature-card:nth-child(5) {
    transition-delay: 2.1s
}

.feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f7fa 0, #e4e9f2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
    transition: .8s
}

.feature-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 120, 200, .2);
    transition: .8s
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, #e4e9f2 0, #f5f7fa 100%)
}

.feature-card:hover .feature-icon::after {
    transform: scale(1.1);
    border-color: rgba(0, 120, 200, .4)
}

.feature-icon i {
    font-size: 28px;
    transition: .8s
}

.certification-card:hover .certification-logo,
.feature-card:hover .feature-icon i {
    transform: scale(1.1)
}

.feature-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    transition: color .5s
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    transition: opacity .5s;
    opacity: .9
}

.certification-card:hover .certification-id,
.certification-card:hover .logo-glow,
.certified-futuristic.reveal-visible .cert-tech-circle,
.feature-card:hover .feature-description,
.why-choose-futuristic.reveal-visible .tech-circle {
    opacity: 1
}

.cert-tech-circle,
.tech-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 120, 200, .1);
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s
}

.cert-tech-circle-1,
.tech-circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    transition-delay: 0.5s
}

.cert-tech-circle-2,
.tech-circle-2 {
    width: 200px;
    height: 200px;
    bottom: 50px;
    left: -50px;
    transition-delay: 0.8s
}

.cert-tech-dot,
.tech-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0, 120, 200, .3);
    z-index: 0;
    opacity: 0;
    transform: scale(0);
    transition: 1.5s
}

.certified-futuristic.reveal-visible .cert-tech-dot,
.grand-opening-futuristic.reveal-visible .grand-tech-dot,
.why-choose-futuristic.reveal-visible .tech-dot {
    opacity: 1;
    transform: scale(1)
}

.cert-tech-dot-1,
.tech-dot-1 {
    top: 20%;
    left: 15%;
    transition-delay: 1.2s
}

.cert-tech-dot-2,
.tech-dot-2 {
    top: 60%;
    right: 10%;
    transition-delay: 1.5s
}

.cert-tech-dot-3,
.tech-dot-3 {
    bottom: 15%;
    left: 30%;
    transition-delay: 1.8s
}

.cert-tech-dot-4,
.tech-dot-4 {
    top: 30%;
    right: 25%;
    transition-delay: 2.1s
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(5px, -5px)
    }
}

.why-choose-futuristic.reveal-visible .tech-dot-1,
.why-choose-futuristic.reveal-visible .tech-dot-3 {
    animation: 8s ease-in-out infinite float
}

.why-choose-futuristic.reveal-visible .tech-dot-2,
.why-choose-futuristic.reveal-visible .tech-dot-4 {
    animation: 12s ease-in-out infinite reverse float
}

.counter-transition,
.section-transition {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.transition-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 120, 200, 0), rgba(0, 120, 200, .5) 50%, rgba(0, 120, 200, 0));
    z-index: 1
}

.transition-circle {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(0, 120, 200, .2);
    animation: 3s ease-in-out infinite pulse
}

.transition-pulse {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 120, 200, .1);
    animation: 2s ease-in-out infinite pulse
}

.counter-transition .transition-dots,
.transition-dots {
    display: flex;
    gap: 12px;
    margin-top: 80px
}

.counter-transition .dot,
.transition-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 120, 200, .3)
}

.transition-dots .dot:first-child {
    animation: 1.5s infinite fadeInOut
}

.transition-dots .dot:nth-child(2) {
    animation: 1.5s .5s infinite fadeInOut
}

.transition-dots .dot:nth-child(3) {
    animation: 1.5s 1s infinite fadeInOut
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .3
    }

    50% {
        transform: scale(1.2);
        opacity: .7
    }
}

.certified-futuristic::before,
.grand-opening-futuristic::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 120, 200, .02) 0, rgba(0, 120, 200, 0) 70%);
    z-index: -1;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 15% 100%)
}

.certified-description {
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    opacity: 0;
    transform: translateY(20px);
    transition: 1.2s .6s
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px
}

.certification-card,
.certification-icon-wrap {
    position: relative;
    display: flex;
    transition: .8s;
    overflow: hidden
}

.certification-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    z-index: 1;
    opacity: 0;
    transform: translateY(40px);
    border: 1px solid rgba(0, 120, 200, .05);
    flex-direction: column;
    align-items: center
}

.certification-card:nth-child(2) {
    transition-delay: 1.1s
}

.certification-card:nth-child(3) {
    transition-delay: 1.3s
}

.certification-card:nth-child(5) {
    transition-delay: 1.7s
}

.certification-card:nth-child(6) {
    transition-delay: 1.9s
}

.certification-icon-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f7fa 0, #e4e9f2 100%);
    align-items: center;
    justify-content: center;
    margin-bottom: 25px
}

.grand-transition,
.title-wrapper {
    justify-content: center;
    display: flex
}

.certification-logo {
    width: 80%;
    height: 80%;
    object-fit: contain;
    z-index: 2;
    transition: transform .8s
}

.logo-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 120, 200, .1) 0, rgba(0, 120, 200, 0) 70%);
    opacity: 0;
    transition: opacity .8s
}

.certification-content {
    text-align: center;
    width: 100%
}

.certification-name {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    transition: color .5s
}

.certification-divider {
    width: 40px;
    height: 2px;
    background-color: rgba(0, 120, 200, .3);
    margin: 12px auto;
    transition: width .5s, background-color .5s
}

.grand-opening-futuristic,
.grand-transition {
    position: relative;
    background-color: #fff;
    overflow: hidden
}

.certification-card:hover .certification-divider {
    width: 60px;
    background-color: rgba(0, 120, 200, .8)
}

.certification-id {
    font-size: 14px;
    color: #666;
    margin: 0;
    opacity: .9;
    transition: opacity .5s
}

@keyframes certFloat {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(5px, -5px)
    }
}

.certified-futuristic.reveal-visible .cert-tech-dot-1,
.certified-futuristic.reveal-visible .cert-tech-dot-3 {
    animation: 8s ease-in-out infinite certFloat
}

.certified-futuristic.reveal-visible .cert-tech-dot-2,
.certified-futuristic.reveal-visible .cert-tech-dot-4 {
    animation: 12s ease-in-out infinite reverse certFloat
}

.grand-transition {
    width: 100%;
    height: 220px;
    align-items: center
}

.grand-transition .transition-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 120, 200, 0), rgba(0, 120, 200, .5) 50%, rgba(0, 120, 200, 0));
    z-index: 1;
    animation: 8s ease-in-out infinite pulse-width
}

.grand-transition .transition-circle {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid rgba(0, 120, 200, .2);
    animation: 5s ease-in-out infinite pulse-and-rotate
}

.grand-transition .transition-pulse {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(0, 120, 200, .1);
    animation: 3s ease-in-out infinite pulse-and-wobble
}

.grand-transition .transition-dots {
    display: flex;
    gap: 14px;
    margin-top: 90px
}

.grand-transition .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 120, 200, .3);
    transform: translateY(0)
}

.grand-transition .dot:first-child {
    animation: 1.5s infinite fadeInOut, 3s .2s infinite jumpUp
}

.grand-transition .dot:nth-child(2) {
    animation: 1.5s .5s infinite fadeInOut, 3s .7s infinite jumpUp
}

.grand-transition .dot:nth-child(3) {
    animation: 1.5s 1s infinite fadeInOut, 3s 1.2s infinite jumpUp
}

@keyframes pulse-width {

    0%,
    100% {
        width: 2px
    }

    50% {
        width: 4px
    }
}

@keyframes pulse-and-rotate {

    0%,
    100% {
        transform: scale(1) rotate(0);
        opacity: .3
    }

    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: .7
    }
}

@keyframes pulse-and-wobble {

    0%,
    100% {
        transform: scale(1) translate(0, 0);
        opacity: .3
    }

    25% {
        transform: scale(1.1) translate(5px, -5px);
        opacity: .5
    }

    50% {
        transform: scale(1.3) translate(0, 0);
        opacity: .7
    }

    75% {
        transform: scale(1.1) translate(-5px, 5px);
        opacity: .5
    }
}

@keyframes fadeInOut {

    0%,
    100% {
        opacity: .2
    }

    50% {
        opacity: 1
    }
}

@keyframes jumpUp {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-15px)
    }
}

.grand-opening-futuristic {
    padding: 100px 0;
    z-index: 1
}

.grand-accent-line,
.grand-tech-circle,
.grand-tech-dot {
    position: absolute;
    z-index: 0
}

.grand-accent-line {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, rgba(0, 120, 200, 0), rgba(0, 120, 200, .5), rgba(0, 120, 200, 0));
    transition: height 2.8s ease-out;
    animation: 8s ease-in-out 2.8s infinite sway
}

@keyframes sway {

    0%,
    100% {
        transform: translateX(-50%)
    }

    25% {
        transform: translateX(calc(-50% - 5px))
    }

    75% {
        transform: translateX(calc(-50% + 5px))
    }
}

.grand-tech-circle {
    border-radius: 50%;
    border: 1px solid rgba(0, 120, 200, .1);
    opacity: 0;
    transition: opacity 1.8s
}

.grand-opening-futuristic.reveal-visible .grand-tech-circle {
    opacity: 1;
    animation: 60s linear infinite rotateSlowly
}

@keyframes rotateSlowly {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.grand-tech-circle-1 {
    width: 350px;
    height: 350px;
    top: -100px;
    right: -100px;
    transition-delay: 0.6s;
    border-width: 2px;
    border-style: dashed
}

.grand-tech-circle-2 {
    width: 250px;
    height: 250px;
    bottom: 50px;
    left: -80px;
    transition-delay: 0.9s
}

.grand-tech-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 120, 200, .3);
    opacity: 0;
    transform: scale(0);
    transition: 1.8s
}

.grand-tech-dot-1 {
    top: 20%;
    left: 15%;
    transition-delay: 1.4s;
    animation: 12s ease-in-out 1.4s infinite floatAndGlow
}

.grand-tech-dot-2 {
    top: 50%;
    right: 12%;
    transition-delay: 1.7s;
    animation: 15s ease-in-out 1.7s infinite reverse floatAndGlow
}

.grand-tech-dot-3 {
    bottom: 25%;
    left: 20%;
    transition-delay: 2.0s;
    animation: 18s ease-in-out 2s infinite floatAndGlow
}

@keyframes floatAndGlow {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        box-shadow: 0 0 5px rgba(0, 120, 200, .3)
    }

    25% {
        transform: translate(15px, -10px) scale(1.5);
        box-shadow: 0 0 10px rgba(0, 120, 200, .5)
    }

    50% {
        transform: translate(0, -20px) scale(1);
        box-shadow: 0 0 5px rgba(0, 120, 200, .3)
    }

    75% {
        transform: translate(-15px, -10px) scale(1.5);
        box-shadow: 0 0 10px rgba(0, 120, 200, .5)
    }
}

.grand-opening-header {
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s 0.3s, transform 1.5s 0.3s
}

.title-wrapper {
    position: relative;
    align-items: center;
    margin-bottom: 30px
}

.title-decoration {
    height: 2px;
    width: 0;
    background: linear-gradient(to right, rgba(0, 120, 200, 0), rgba(0, 120, 200, .7));
    margin: 0 20px;
    transition: width 1.5s ease-out 1.2s
}

.title-decoration:last-child {
    background: linear-gradient(to left, rgba(0, 120, 200, 0), rgba(0, 120, 200, .7))
}

.grand-opening__title {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s 0.6s, transform 1.2s 0.6s
}

.grand-opening-futuristic.reveal-visible .grand-opening__title {
    opacity: 1;
    transform: translateY(0);
    animation: .5s 1.8s slight-bounce
}

@keyframes slight-bounce {

    0%,
    100% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(-10px)
    }

    50% {
        transform: translateY(5px)
    }

    75% {
        transform: translateY(-3px)
    }
}

.grand-opening__content-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s 0.9s, transform 1.2s 0.9s
}

.grand-opening-futuristic.reveal-visible .grand-opening__content-wrapper {
    opacity: 1;
    transform: translateY(0)
}

.grand-opening__content {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    text-align: center;
    position: relative
}

.grand-opening__content::after,
.grand-opening__content::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0;
    transition: opacity 1s 1.5s
}

.grand-opening__content::before {
    top: 0;
    left: 0;
    border-top: 2px solid rgba(0, 120, 200, .3);
    border-left: 2px solid rgba(0, 120, 200, .3)
}

.grand-opening__content::after {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid rgba(0, 120, 200, .3);
    border-right: 2px solid rgba(0, 120, 200, .3)
}

.grand-opening-futuristic.reveal-visible .carousel-glow,
.grand-opening-futuristic.reveal-visible .grand-opening__content::after,
.grand-opening-futuristic.reveal-visible .grand-opening__content::before {
    opacity: 1
}

.carousel-futuristic-wrapper {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    padding: 40px 20px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.5s 1.2s, transform 1.5s 1.2s;
    border-radius: 15px;
    background: rgba(255, 255, 255, .02);
    backdrop-filter: blur(5px);
    overflow: visible
}

.grand-opening-futuristic.reveal-visible .carousel-futuristic-wrapper {
    opacity: 1;
    transform: translateY(0);
    animation: .8s 2.7s slight-wobble
}

.carousel-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 120, 200, .15) 0, rgba(0, 120, 200, 0) 70%);
    transition: opacity 1.2s 2.1s
}

.carousel-glow.top-left {
    top: -40px;
    left: -40px
}

.carousel-glow.top-right {
    top: -40px;
    right: -40px
}

.carousel-glow.bottom-left {
    bottom: -40px;
    left: -40px
}

.carousel-glow.bottom-right {
    bottom: -40px;
    right: -40px
}

.touchable-carousel {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .12), 0 5px 15px rgba(0, 120, 200, .08);
    transition: box-shadow .5s, transform .5s;
    cursor: grab
}

.touchable-carousel:active {
    cursor: grabbing;
    transform: scale(.99)
}

.carousel-futuristic-wrapper:hover .touchable-carousel {
    box-shadow: 0 20px 50px rgba(0, 120, 200, .18), 0 8px 25px rgba(0, 120, 200, .1)
}

.carousel-progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(0, 0, 0, .1);
    z-index: 5;
    overflow: hidden
}

.carousel-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(0, 120, 200, .5), rgba(0, 180, 255, .8));
    transition: width .1s linear
}

.futuristic-indicators {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    z-index: 5
}

.indicator-dot,
.swipe-instruction {
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%
}

.futuristic-indicators button {
    background: 0 0;
    border: none;
    padding: 5px;
    margin: 0 5px;
    width: 30px;
    height: 20px;
    opacity: 1;
    transition: transform .3s
}

.indicator-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 120, 200, .2);
    box-shadow: 0 0 0 0 rgba(0, 120, 200, 0);
    transition: .5s;
    position: absolute
}

.caption-content,
.futuristic-inner {
    position: relative
}

.futuristic-indicators button.active .indicator-dot {
    background-color: #0078c8;
    box-shadow: 0 0 15px rgba(0, 120, 200, .5);
    transform: translate(-50%, -50%) scale(1.3)
}

.futuristic-indicators button:not(.active):hover .indicator-dot {
    background-color: rgba(0, 120, 200, .4);
    transform: translate(-50%, -50%) scale(1.2)
}

.carousel-item.active .carousel-item-inner img {
    filter: brightness(1);
    transform: scale(1);
    animation: 7s forwards subtle-zoom
}

@keyframes subtle-zoom {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.08)
    }
}

.carousel-item.active .modern-caption {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s
}

.caption-content {
    padding-left: 20px;
    max-width: 80%
}

.modern-caption h5 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .3)
}

.modern-caption p {
    font-size: 16px;
    color: rgba(255, 255, 255, .9);
    margin: 0
}

.swipe-instruction {
    position: absolute;
    color: #fff;
    background-color: rgba(0, 0, 0, .6);
    padding: 15px 25px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    animation: 4s ease-in-out forwards fade-out
}

.swipe-icon {
    position: relative;
    width: 30px;
    height: 20px
}

.swipe-arrow,
.swipe-arrow::after,
.swipe-arrow::before {
    height: 2px;
    position: absolute;
    background-color: #fff
}

.swipe-arrow {
    width: 20px;
    left: 0;
    top: 50%;
    animation: 2s infinite swipe-anim
}

.swipe-arrow::before {
    content: '';
    width: 8px;
    right: 0;
    transform: rotate(45deg);
    transform-origin: right center
}

.swipe-arrow::after {
    content: '';
    width: 8px;
    right: 0;
    transform: rotate(-45deg);
    transform-origin: right center
}

.swipe-instruction p {
    margin: 0;
    font-size: 14px;
    white-space: nowrap
}

@keyframes swipe-anim {

    0%,
    100% {
        transform: translateX(0);
        opacity: .5
    }

    50% {
        transform: translateX(10px);
        opacity: 1
    }
}

@keyframes fade-out {

    0%,
    100% {
        opacity: 0
    }

    10%,
    50% {
        opacity: 1
    }
}

@media (max-width:992px) {
    .carousel-3d-container {
        height: 550px
    }

    .slide-3d {
        width: 360px;
        height: 400px
    }

    .carousel-3d-title {
        font-size: 30px;
        margin-bottom: 50px
    }

    .modern-caption h5,
    .slide-3d-content h3 {
        font-size: 20px
    }

    .slide-3d-content p {
        font-size: 15px
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 40px
    }

    .about-image-wrapper {
        min-height: 400px;
        order: 1
    }

    .about-content {
        order: 2;
        padding: 40px 0 60px
    }

    .certified-futuristic,
    .why-choose-futuristic {
        padding: 80px 0
    }

    .certified-title,
    .why-choose-title {
        font-size: 36px
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
    }

    .certifications-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px
    }

    .certification-icon-wrap {
        width: 100px;
        height: 100px
    }

    .carousel-futuristic-wrapper {
        max-width: 90%
    }

    .modern-caption p {
        font-size: 14px
    }
}

@media (max-width:768px) {
    .carousel-3d-container {
        height: 500px;
        padding: 40px 0 80px
    }

    .slide-3d {
        width: 320px;
        height: 360px
    }

    .carousel-3d-title {
        font-size: 28px;
        margin-bottom: 40px
    }

    .carousel-3d-control {
        width: 55px;
        height: 55px;
        font-size: 22px
    }

    .action-btn {
        padding: 16px 34px;
        font-size: 16px
    }

    .about-container {
        padding: 0 20px
    }

    .about-title {
        font-size: 36px
    }

    .about-subtitle,
    .certified-description,
    .why-choose-description {
        font-size: 16px
    }

    .floating-element-1,
    .floating-element-2 {
        display: none
    }

    .certified-futuristic,
    .why-choose-futuristic {
        padding: 60px 0
    }

    .certified-title,
    .why-choose-title {
        font-size: 32px
    }

    .certification-card,
    .feature-card {
        padding: 25px
    }

    .feature-icon {
        width: 60px;
        height: 60px
    }

    .feature-icon i {
        font-size: 24px
    }

    .feature-title {
        font-size: 18px
    }

    .certification-name {
        font-size: 20px
    }

    .carousel-futuristic-wrapper {
        padding: 30px 10px
    }

    .modern-caption {
        padding: 40px 20px 20px
    }

    .caption-content {
        max-width: 100%
    }
}

.image-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff
}

.carousel-item-inner {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #fff;
    height: 0;
    padding-top: 56.25%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .1)
}

.carousel-item-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    pointer-events: none
}

.carousel-item-inner img {
    object-fit: cover;
    object-position: center;
    filter: brightness(.85);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 1.2s, filter .8s;
    filter: brightness(1);
    padding: 15px
}

.modern-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 120, 200, .9), rgba(0, 120, 200, 0));
    padding: 50px 30px 30px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: block !important;
    transform: translateY(0);
    opacity: 0;
    transition: opacity .8s, transform .8s
}

.caption-content::before {
    content: '';
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    height: 100%;
    width: 3px;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .3));
    border-radius: 3px
}

@keyframes subtle-zoom {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.03)
    }
}

.counter-transition .transition-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 120, 200, 0), rgba(0, 120, 200, .5) 50%, rgba(0, 120, 200, 0));
    z-index: 1;
    animation: 8s ease-in-out infinite sway-line
}

@keyframes sway-line {

    0%,
    100% {
        transform: translateX(-50%)
    }

    25% {
        transform: translateX(calc(-50% - 5px))
    }

    75% {
        transform: translateX(calc(-50% + 5px))
    }
}

.counter-transition .transition-circle {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(0, 120, 200, .2);
    animation: 4s ease-in-out infinite pulse-and-wobble
}

@keyframes pulse-and-wobble {

    0%,
    100% {
        transform: scale(1) translate(0, 0);
        opacity: .3
    }

    25% {
        transform: scale(1.1) translate(3px, -3px);
        opacity: .5
    }

    50% {
        transform: scale(1.2) translate(0, 0);
        opacity: .7
    }

    75% {
        transform: scale(1.1) translate(-3px, 3px);
        opacity: .5
    }
}

.counter-transition .dot:first-child {
    animation: 2s infinite jump-dot
}

.counter-transition .dot:nth-child(2) {
    animation: 2s .4s infinite jump-dot
}

.counter-transition .dot:nth-child(3) {
    animation: 2s .8s infinite jump-dot
}

@keyframes jump-dot {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-15px);
        opacity: .8
    }
}

.counter {
    position: relative;
    padding: 100px 0;
    background-image: linear-gradient(120deg, #2d3748 0, #1a202c 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s, transform .7s
}

.counter.reveal-visible {
    opacity: 1;
    transform: translateY(0);
    animation: .5s forwards slight-wobble
}

.counter.hide-section {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity .5s, transform .5s
}

@keyframes slight-wobble {

    0%,
    100% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-8px) rotate(-.5deg)
    }

    40% {
        transform: translateY(5px) rotate(.3deg)
    }

    60% {
        transform: translateY(-3px)
    }

    80% {
        transform: translateY(2px)
    }
}

.counter__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(45, 55, 72, .7);
    z-index: 1
}

.counter__container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    z-index: 2
}

.counter__icon,
.counter__wrapper {
    display: flex;
    opacity: 0;
    position: relative
}

.counter__item {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    transform: translateY(50px);
    opacity: 0;
    transition: transform .8s, opacity .8s, box-shadow .3s;
    position: relative;
    overflow: hidden
}

.counter__item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, rgba(0, 120, 200, .3), rgba(0, 120, 200, .8), rgba(0, 120, 200, .3));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s
}

.counter.reveal-visible .counter__item::before {
    transform: scaleX(1)
}

.counter.reveal-visible .counter__item {
    transform: translateY(0);
    opacity: 1
}

.counter__item:first-child {
    transition-delay: 0.1s
}

.counter__item:nth-child(2) {
    transition-delay: 0.3s
}

.counter__item:nth-child(3) {
    transition-delay: 0.5s
}

.counter__item:nth-child(4) {
    transition-delay: 0.7s
}

.counter__item:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
    transform: translateY(-5px)
}

.counter__icon {
    font-size: 0;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    margin: 0 auto 20px;
    align-items: center;
    justify-content: center;
    transition: .5s;
    transform: scale(.5)
}

.counter.reveal-visible .counter__icon {
    opacity: 1;
    transform: scale(1);
    animation: .6s forwards icon-bounce
}

@keyframes icon-bounce {
    0% {
        transform: scale(.5)
    }

    60% {
        transform: scale(1.2)
    }

    80% {
        transform: scale(.9)
    }

    100% {
        transform: scale(1)
    }
}

.counter__icon i {
    font-size: 32px;
    color: rgba(255, 255, 255, .9)
}

.counter__wrapper {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    align-items: center;
    justify-content: center
}

.counter__number,
.counter__plus {
    display: inline-block
}

.counter.reveal-visible .counter__wrapper {
    opacity: 1;
    animation: .8s .3s forwards fade-in-wobble
}

@keyframes fade-in-wobble {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    70% {
        opacity: 1;
        transform: translateY(-5px)
    }

    85% {
        transform: translateY(3px)
    }

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

.counter__plus {
    margin-left: 5px
}

.counter__title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    line-height: 1.4;
    position: relative;
    opacity: 0;
    transform: translateY(20px)
}

.counter.reveal-visible .counter__title {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s 0.5s, transform .5s 0.5s
}

.hiccup {
    animation: .5s ease-in-out hiccup-animation
}

@keyframes hiccup-animation {

    0%,
    100% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-8px) rotate(-.5deg)
    }

    40% {
        transform: translateY(4px) rotate(.3deg)
    }

    60% {
        transform: translateY(-2px) rotate(-.2deg)
    }

    80% {
        transform: translateY(1px) rotate(.1deg)
    }
}

.testimonials-modern {
    z-index: 1
}

.testimonials-modern::before {
    content: '';
    left: 0;
    background: linear-gradient(135deg, rgba(0, 120, 200, .02) 0, rgba(255, 255, 255, 0) 70%);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%)
}

.testimonials-modern::after {
    content: '';
    right: -50px
}

.testimonials-modern__title {
    opacity: 0;
    transform: translateY(20px);
    animation: .8s forwards fadeInUp
}

.testimonials-modern__title::after {
    content: '';
    background: linear-gradient(to right, rgba(253, 253, 253, .3), var(--primary-color, #768995), rgba(231, 243, 251, .3));
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    animation: 1.2s .5s forwards expandWidth
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

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

@keyframes expandWidth {
    0% {
        transform: translateX(-50%) scaleX(0)
    }

    100% {
        transform: translateX(-50%) scaleX(1)
    }
}

.quote-mark-left,
.quote-mark-right {
    opacity: 0;
    animation: 1s .8s forwards fadeIn
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.testimonials-modern__slider {
    padding: 20px 0
}

.testimonial-slide {
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    animation: .8s .5s forwards slideIn;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    overflow: hidden
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

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

.testimonial-slide::before {
    content: '';
    background: var(--primary-color, #0078c8);
    z-index: 1
}

.testimonials-modern::after,
.testimonials-modern::before {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%
}

.testimonial-slide:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08)
}

.testimonial-slide:hover::before {
    height: 100%;
    opacity: 1
}

.testimonial-image {
    position: relative;
    z-index: 2;
    transform: scale(.95);
    opacity: .9
}

.testimonial-slide:hover .testimonial-image {
    opacity: 1;
    box-shadow: 0 5px 15px rgba(0, 120, 200, .2);
    transform: scale(1.05);
    border-color: rgba(172, 198, 215, .3);
    box-shadow: 0 12px 30px rgba(0, 120, 200, .2)
}

.testimonial-slide:hover .testimonial-author {
    color: var(--primary-color, #81a5be);
    color: var(--primary-color, #f8fcff)
}

.testimonial-text {
    margin: 0
}

.testimonials-pagination-bullet.active {
    background-color: var(--primary-color, #0078c8);
    box-shadow: 0 0 10px rgba(0, 120, 200, .3)
}

@keyframes testimonialSlide {

    0%,
    100% {
        transform: translateX(0)
    }

    33.33% {
        transform: translateX(-33.333%)
    }

    66.66% {
        transform: translateX(-66.666%)
    }
}

.testimonials-modern::before {
    animation: 15s ease-in-out infinite float;
    top: -150px;
    right: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 120, 200, .03) 0, rgba(0, 120, 200, 0) 70%)
}

@media (max-width:992px) {
    .counter__container {
        grid-template-columns: repeat(2, 1fr)
    }

    .testimonials-modern {
        padding: 80px 0
    }

    .testimonials-modern__title {
        font-size: 36px;
        margin-bottom: 50px
    }

    .quote-mark-left,
    .quote-mark-right {
        font-size: 100px
    }
}

@media (max-width:768px) {
    .counter {
        padding: 80px 0
    }

    .counter__wrapper {
        font-size: 38px
    }

    .counter__icon {
        width: 60px;
        height: 60px;
        line-height: 60px
    }

    .counter__icon i {
        font-size: 28px
    }

    .counter__title {
        font-size: 16px
    }

    .testimonials-modern__title {
        font-size: 32px
    }

    .testimonial-slide {
        padding: 30px
    }

    .quote-mark-left,
    .quote-mark-right {
        font-size: 80px
    }

    .testimonial-author {
        font-size: 20px
    }

    .testimonial-text {
        font-size: 15px
    }
}

@media (max-width:576px) {
    .carousel-3d-container {
        height: 450px;
        padding: 30px 0 70px
    }

    .slide-3d {
        width: 280px;
        height: 320px
    }

    .carousel-3d-title {
        font-size: 26px;
        margin-bottom: 30px
    }

    .carousel-3d-control {
        width: 50px;
        height: 50px;
        font-size: 20px
    }

    .carousel-3d-indicator {
        width: 12px;
        height: 12px
    }

    .slide-3d-content {
        padding: 15px
    }

    .slide-3d-content h3 {
        font-size: 18px;
        margin-bottom: 5px
    }

    .slide-3d-content p {
        font-size: 14px
    }

    .action-btn {
        padding: 14px 30px;
        font-size: 15px
    }

    .about-title {
        font-size: 32px
    }

    .about-description {
        font-size: 15px
    }

    .about-image-wrapper {
        min-height: 300px
    }

    .about-button {
        padding: 10px 25px;
        font-size: 13px
    }

    .certified-container,
    .why-choose-container {
        padding: 0 20px
    }

    .certified-title,
    .testimonials-modern__title,
    .why-choose-title {
        font-size: 28px
    }

    .feature-icon {
        width: 50px;
        height: 50px
    }

    .feature-icon i {
        font-size: 20px
    }

    .certifications-grid {
        grid-template-columns: 1fr
    }

    .certification-icon-wrap {
        width: 90px;
        height: 90px
    }

    .counter-transition,
    .section-transition {
        height: 150px
    }

    .carousel-futuristic-wrapper {
        padding: 20px 5px
    }

    .carousel-glow,
    .testimonial-image {
        width: 80px;
        height: 80px
    }

    .modern-caption h5 {
        font-size: 18px
    }

    .modern-caption p {
        font-size: 12px
    }

    .futuristic-indicators button {
        margin: 0 3px;
        width: 20px
    }

    .counter__container {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .counter,
    .testimonials-modern {
        padding: 60px 0
    }

    .testimonial-slide {
        padding: 25px 20px
    }

    .quote-mark-left,
    .quote-mark-right {
        font-size: 60px
    }

    .quote-mark-left {
        top: -10px;
        left: 10px
    }

    .quote-mark-right {
        bottom: -30px;
        right: 10px
    }
}

.testimonials-modern {
    position: relative;
    padding: 100px 0;
    background-color: #f8f9fa;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: .8s forwards fadeInSection
}

@keyframes fadeInSection {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.testimonials-modern::after {
    bottom: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 120, 200, .02) 0, rgba(0, 120, 200, 0) 70%)
}

.testimonial-slide::before,
.testimonials-modern__title::after {
    background: linear-gradient(to right, rgba(0, 120, 200, .3), var(--primary-color, #0078c8), rgba(0, 120, 200, .3));
    content: '';
    height: 3px
}

.testimonials-modern__title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 60px;
    position: relative
}

.testimonials-modern__title::after {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px
}

.quote-mark-left,
.quote-mark-right {
    position: absolute;
    font-size: 120px;
    font-family: Georgia, serif;
    color: rgba(0, 120, 200, .1);
    line-height: 1;
    z-index: 1
}

.quote-mark-left {
    top: -30px;
    left: 0
}

.quote-mark-right {
    bottom: -60px;
    right: 0
}

.testimonials-modern__slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, .08)
}

.expert-image-container,
.testimonial-image {
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .1)
}

.testimonials-modern__wrapper {
    display: flex;
    display: flex;
    transition: transform .6s ease-in-out;
    width: 300%
}

.testimonial-slide {
    width: 33.333%;
    padding: 40px;
    background: #fff;
    position: relative;
    z-index: 2
}

.testimonial-slide::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity .3s
}

.testimonial-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 3px solid rgba(0, 120, 200, .1);
    transition: .3s
}

.expert-image,
.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.testimonial-author {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px;
    transition: color .3s
}

.testimonial-position {
    text-align: center;
    font-size: 15px;
    color: #666;
    margin: 0 0 20px;
    font-weight: 500
}

.testimonial-text {
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    position: relative;
    z-index: 1
}

.testimonials-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    gap: 10px
}

.testimonials-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 120, 200, .2);
    cursor: pointer;
    transition: .3s
}

.testimonials-pagination-bullet.active {
    background-color: var(--primary-color, #0078c8);
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(0, 120, 200, .4)
}

.testimonials-pagination-bullet:hover:not(.active) {
    background-color: rgba(0, 120, 200, .4);
    transform: scale(1.1)
}

@media (max-width:992px) {
    .testimonials-modern {
        padding: 80px 0
    }

    .testimonials-modern__title {
        font-size: 36px;
        margin-bottom: 50px
    }

    .quote-mark-left,
    .quote-mark-right {
        font-size: 100px
    }

    .testimonial-slide {
        padding: 30px
    }
}

@keyframes fadeInSlide {
    from {
        opacity: .7;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.testimonial-slide {
    opacity: .7;
    transform: scale(.95);
    transition: opacity .6s, transform .6s
}

.testimonial-slide.active {
    opacity: 1;
    transform: scale(1);
    animation: .6s forwards fadeInSlide
}

.expert-image-container {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 3px solid rgba(0, 120, 200, .1);
    transition: .3s
}

.expert-card:hover .expert-image-container {
    transform: scale(1.05);
    border-color: rgba(0, 120, 200, .3);
    box-shadow: 0 12px 30px rgba(0, 120, 200, .2)
}

.expert-card {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    transition: .3s;
    margin-bottom: 30px
}

.expert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .1)
}

.expert-name {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    transition: color .3s
}

.expert-designation {
    font-size: 16px;
    color: var(--primary-color, #0078c8);
    font-weight: 500;
    margin-bottom: 10px
}

.expert-education {
    font-size: 14px;
    color: #666;
    line-height: 1.6
}

.partner__card,
.partners,
.partners__subtitle,
.partners__title,
.placement,
.placement__card,
.placement__subtitle,
.placement__title {
    opacity: 1 !important;
    transform: translateY(0) !important
}

.partner-placement-transition {
    display: block;
    visibility: visible;
    opacity: 1
}

.partners {
    margin-top: 50px;
    padding-top: 80px;
    padding-bottom: 80px
}

.placement {
    padding-top: 80px;
    padding-bottom: 100px
}

.partners__grid,
.placement__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px
}

@media (max-width:768px) {
    .testimonials-modern__title {
        font-size: 32px
    }

    .quote-mark-left,
    .quote-mark-right {
        font-size: 80px
    }

    .testimonial-author {
        font-size: 20px
    }

    .testimonial-text {
        font-size: 15px
    }

    .testimonial-image {
        width: 80px;
        height: 80px
    }

    .partners__grid,
    .placement__grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
    }
}

@media (max-width:576px) {
    .testimonials-modern {
        padding: 60px 0
    }

    .testimonials-modern__title {
        font-size: 28px
    }

    .testimonial-slide {
        padding: 25px 15px
    }

    .quote-mark-left,
    .quote-mark-right {
        font-size: 60px
    }

    .quote-mark-left {
        top: -10px;
        left: 10px
    }

    .quote-mark-right {
        bottom: -30px;
        right: 10px
    }

    .testimonial-image {
        width: 70px;
        height: 70px
    }

    .testimonial-position,
    .testimonial-text {
        font-size: 14px
    }

    .partners__grid,
    .placement__grid {
        grid-template-columns: 1fr
    }
}

.partner__card:hover,
.placement__card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
    transition: .3s
}

.placement__icon i {
    font-size: 28px;
    color: #0078c8
}

.partner__logo {
    transition: transform .3s
}

.partner__card:hover .partner__logo {
    transform: scale(1.1)
}

.partners__title::after,
.placement__title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px !important;
    height: 3px;
    background: linear-gradient(to right, rgba(0, 120, 200, .3), #0078c8, rgba(0, 120, 200, .3))
}
/* Gallery Section Styles */
.gallery-section {
  padding: 80px 0;
  background-color: #f8f9fa;
  position: relative;
}

.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.gallery-header {
  text-align: center;
  margin-bottom: 50px;
}

.gallery-title {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.gallery-title:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, rgba(0,120,200,0.3), #0078c8, rgba(0,120,200,0.3));
}

.gallery-description {
  font-size: 16px;
  color: #666;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.gallery-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.gallery-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-item:hover .gallery-image {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 20px;
  color: white;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

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

.gallery-overlay h3 {
  font-size: 20px;
  margin: 0 0 8px;
  font-weight: 600;
}

.gallery-overlay p {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* Lightbox */
.gallery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.gallery-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  z-index: 10000;
}

.lightbox-image {
  max-width: 90%;
  max-height: 80vh;
  object-fit: contain;
  border: 3px solid rgba(255,255,255,0.1);
  border-radius: 4px;
}

.lightbox-caption {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 18px;
  padding: 15px;
  background-color: rgba(0,0,0,0.6);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.lightbox-nav:hover {
  background-color: rgba(0,120,200,0.5);
}

.prev-btn {
  left: 20px;
}

.next-btn {
  right: 20px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .gallery-title {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding: 60px 0;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .gallery-overlay h3 {
    font-size: 18px;
  }
  
  .gallery-overlay p {
    font-size: 12px;
  }
  
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .gallery-title {
    font-size: 28px;
  }
  
  .gallery-description {
    font-size: 14px;
  }
  
  .gallery-overlay {
    padding: 15px;
  }
  
  .gallery-overlay h3 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  
  .gallery-overlay p {
    font-size: 11px;
  }
}
.ev-lab-section {
    padding: 100px 0;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ev-lab-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

.ev-lab-header {
    text-align: center;
    margin-bottom: 70px;
}

.ev-lab-title {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    position: relative;
    margin-bottom: 15px;
}

.ev-lab-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #0078c8, rgba(0, 120, 200, 0.2));
}

.ev-lab-description {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
}

.ev-lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.ev-lab-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

.ev-lab-item:hover {
    transform: translateY(-6px);
}

.ev-lab-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
    display: block;
}

.ev-lab-item:hover .ev-lab-image {
    transform: scale(1.05);
}

.ev-lab-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 120, 200, 0.85);
    color: #fff;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    z-index: 2;
}

.ev-lab-item:hover .ev-lab-overlay {
    transform: translateY(0);
}

.ev-lab-overlay h3 {
    font-size: 20px;
    margin: 0 0 8px;
    font-weight: 600;
}

.ev-lab-overlay p {
    font-size: 14px;
    margin: 0;
    opacity: 0.85;
}
/* Enhanced EV Lab Section Styles */
.ev-lab-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ev-lab-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 120, 200, 0.02) 0%, rgba(0, 120, 200, 0) 70%);
    z-index: -1;
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.ev-lab-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

.ev-lab-header {
    text-align: center;
    margin-bottom: 80px;
}

.ev-lab-title {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    position: relative;
    margin-bottom: 25px;
}

.ev-lab-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, rgba(0, 120, 200, 0.3), #0078c8, rgba(0, 120, 200, 0.3));
}

.ev-lab-description {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    max-width: 900px;
    margin: 0 auto;
}

/* Program Overview */
.ev-program-overview {
    margin-bottom: 80px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 120, 200, 0.1);
    backdrop-filter: blur(10px);
}

.program-intro h3 {
    font-size: 28px;
    font-weight: 600;
    color: #0078c8;
    margin-bottom: 20px;
    text-align: center;
}

.program-intro p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Training Categories */
.ev-categories {
    margin-bottom: 80px;
}

.categories-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.categories-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #0078c8;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.category-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.4s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0078c8, rgba(0, 120, 200, 0.3));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.category-card:hover::before {
    transform: scaleX(1);
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 120, 200, 0.15);
    border-color: rgba(0, 120, 200, 0.2);
}

.category-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.category-card:hover .category-icon {
    background: linear-gradient(135deg, #0078c8, #42a5f5);
    transform: scale(1.1);
}

.category-icon i {
    font-size: 32px;
    color: #0078c8;
    transition: color 0.4s ease;
}

.category-card:hover .category-icon i {
    color: #fff;
}

.category-card h4 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    transition: color 0.4s ease;
}

.category-card:hover h4 {
    color: #0078c8;
}

.category-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* Key Domains */
.ev-domains {
    margin-bottom: 80px;
}

.domains-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.domains-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #0078c8;
}

.domains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 35px;
}

.domain-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    border-left: 4px solid transparent;
}

.domain-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 120, 200, 0.1);
    border-left-color: #0078c8;
}

.domain-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.domain-item:hover .domain-icon {
    background: linear-gradient(135deg, #0078c8, #42a5f5);
    transform: scale(1.05);
}

.domain-icon i {
    font-size: 24px;
    color: #0078c8;
    transition: color 0.4s ease;
}

.domain-item:hover .domain-icon i {
    color: #fff;
}

.domain-item h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    transition: color 0.4s ease;
}

.domain-item:hover h4 {
    color: #0078c8;
}

.domain-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.domain-item li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.domain-item li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: #0078c8;
    font-size: 10px;
    top: 2px;
}

/* Training Infrastructure */
.ev-infrastructure {
    margin-bottom: 80px;
}

.infrastructure-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

.infrastructure-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #0078c8;
}

.infrastructure-description {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    text-align: center;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.infrastructure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.equipment-category {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    border-top: 4px solid #0078c8;
}

.equipment-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 120, 200, 0.1);
}

.equipment-category h4 {
    font-size: 18px;
    font-weight: 600;
    color: #0078c8;
    margin-bottom: 20px;
    text-align: center;
}

.equipment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.equipment-list li {
    position: relative;
    padding: 8px 0 8px 25px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    border-bottom: 1px solid rgba(0, 120, 200, 0.1);
}

.equipment-list li:last-child {
    border-bottom: none;
}

.equipment-list li::before {
    content: '⚡';
    position: absolute;
    left: 0;
    color: #0078c8;
    font-size: 12px;
    top: 8px;
}

/* Enhanced Project Wings Section */
.project-wings-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

.project-wings-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

.project-wings-header {
    text-align: center;
    margin-bottom: 80px;
}

.project-wings-title {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    position: relative;
}

.project-wings-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, rgba(0, 120, 200, 0.3), #0078c8, rgba(0, 120, 200, 0.3));
}

.project-wings-description {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    max-width: 900px;
    margin: 0 auto;
}

/* Wing Sections */
.wing-section {
    margin-bottom: 100px;
    position: relative;
}

.wing-section:last-child {
    margin-bottom: 0;
}

.wing-header {
    text-align: center;
    margin-bottom: 50px;
}

.wing-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.wing-title i {
    color: #0078c8;
    font-size: 28px;
}

.wing-subtitle {
    font-size: 16px;
    color: #0078c8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wing-description {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.wing-description p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.wing-content {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.wing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Enhanced Project Cards */
.project-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    aspect-ratio: 4/3;
    cursor: pointer;
    background: #fff;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 120, 200, 0.15);
}

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

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

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
    padding: 25px;
    color: white;
    transform: translateY(60%);
    transition: transform 0.4s ease;
}

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

.project-overlay h4 {
    font-size: 18px;
    margin: 0 0 10px;
    font-weight: 600;
    color: #fff;
}

.project-overlay p {
    font-size: 14px;
    margin: 0 0 15px;
    opacity: 0.9;
    line-height: 1.5;
}

.project-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.detail-tag {
    background: rgba(0, 120, 200, 0.8);
    color: #fff;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
    background: rgba(0, 120, 200, 0.8);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.project-link:hover {
    background: #0078c8;
    color: #fff;
    transform: translateX(3px);
}

.project-link i {
    font-size: 12px;
}

/* Featured Project */
.featured-project {
    position: relative;
    border: 2px solid #0078c8;
}

.featured-project::before {
    content: 'LIVE PROJECT';
    position: absolute;
    top: 15px;
    right: 15px;
    background: #0078c8;
    color: #fff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 5;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Wing-specific styling */
.it-wing .wing-content {
    background: linear-gradient(135deg, rgba(0, 120, 200, 0.02), rgba(255, 255, 255, 0.8));
    border-left: 4px solid #0078c8;
}

.mechanical-wing .wing-content {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.02), rgba(255, 255, 255, 0.8));
    border-left: 4px solid #ff9800;
}

.mechanical-wing .wing-title i {
    color: #ff9800;
}

.other-wings .wing-content {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.02), rgba(255, 255, 255, 0.8));
    border-left: 4px solid #4caf50;
}

.other-wings .wing-title i {
    color: #4caf50;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ev-lab-container,
    .project-wings-container {
        padding: 0 20px;
    }
    
    .categories-grid,
    .domains-grid,
    .infrastructure-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    
    .wing-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 992px) {
    .ev-lab-section,
    .project-wings-section {
        padding: 80px 0;
    }
    
    .ev-lab-title,
    .project-wings-title {
        font-size: 36px;
    }
    
    .categories-title,
    .domains-title,
    .infrastructure-title,
    .wing-title {
        font-size: 28px;
    }
    
    .wing-content {
        padding: 30px 20px;
    }
    
    .categories-grid,
    .domains-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .infrastructure-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .ev-lab-section,
    .project-wings-section {
        padding: 60px 0;
    }
    
    .ev-lab-title,
    .project-wings-title {
        font-size: 32px;
    }
    
    .categories-title,
    .domains-title,
    .infrastructure-title {
        font-size: 24px;
    }
    
    .wing-title {
        font-size: 24px;
        flex-direction: column;
        gap: 10px;
    }
    
    .category-card,
    .domain-item,
    .equipment-category {
        padding: 25px 20px;
    }
    
    .wing-content {
        padding: 25px 15px;
        border-radius: 15px;
    }
    
    .categories-grid,
    .domains-grid,
    .infrastructure-grid,
    .wing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .project-overlay {
        padding: 20px;
        transform: translateY(40%);
    }
    
    .project-overlay h4 {
        font-size: 16px;
    }
    
    .project-overlay p {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .ev-lab-container,
    .project-wings-container {
        padding: 0 15px;
    }
    
    .ev-lab-title,
    .project-wings-title {
        font-size: 28px;
    }
    
    .categories-title,
    .domains-title,
    .infrastructure-title {
        font-size: 22px;
    }
    
    .wing-title {
        font-size: 22px;
    }
    
    .ev-program-overview,
    .wing-content {
        padding: 20px 15px;
    }
    
    .category-icon {
        width: 60px;
        height: 60px;
    }
    
    .category-icon i {
        font-size: 24px;
    }
    
    .domain-icon {
        width: 50px;
        height: 50px;
    }
    
    .domain-icon i {
        font-size: 20px;
    }
    
    .project-overlay {
        padding: 15px;
        transform: translateY(30%);
    }
    
    .detail-tag {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .project-link {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Animation Classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    animation: scaleIn 0.5s ease forwards;
}

@keyframes scaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* FIXED CSS for Advanced Testing & Analysis Labs - Override Existing Styles */

/* Force NDT & DT Labs Section Styling */
.ndt-dt-labs-section {
    padding: 120px 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.ndt-dt-labs-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(0, 120, 200, 0.03) 0%, rgba(0, 120, 200, 0) 70%) !important;
    z-index: -1 !important;
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
}

/* Labs Container */
.labs-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Labs Header */
.labs-header {
    text-align: center !important;
    margin-bottom: 80px !important;
}

.labs-title {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 25px !important;
    position: relative !important;
    display: inline-block !important;
}

.labs-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100px !important;
    height: 4px !important;
    background: linear-gradient(to right, rgba(0, 120, 200, 0.3), #0078c8, rgba(76, 175, 80, 0.8), rgba(0, 120, 200, 0.3)) !important;
    border-radius: 2px !important;
}

.labs-description {
    font-size: 1.2rem !important;
    line-height: 1.7 !important;
    color: #666 !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Individual Lab Sections */
.lab-section {
    margin-bottom: 100px !important;
    position: relative !important;
}

.lab-section:last-child {
    margin-bottom: 0 !important;
}

.lab-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 50px !important;
    border-radius: 25px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
}

.lab-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0078c8, #4caf50) !important;
}

.lab-content:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 60px rgba(0, 120, 200, 0.15) !important;
}

.lab-content.reverse .lab-image {
    order: -1 !important;
}

/* Lab Information */
.lab-info {
    padding: 20px 0 !important;
}

.lab-title {
    font-size: 2.2rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.lab-title i {
    font-size: 2rem !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 2px solid rgba(0, 120, 200, 0.2) !important;
    transition: all 0.4s ease !important;
}

.ndt-lab .lab-title i {
    color: #0078c8 !important;
    background: linear-gradient(135deg, rgba(0, 120, 200, 0.1), rgba(0, 120, 200, 0.05)) !important;
    border-color: rgba(0, 120, 200, 0.2) !important;
}

.dt-lab .lab-title i {
    color: #4caf50 !important;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05)) !important;
    border-color: rgba(76, 175, 80, 0.2) !important;
}

.lab-content:hover .lab-title i {
    transform: scale(1.1) !important;
}

.lab-description {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #555 !important;
    margin-bottom: 30px !important;
}

/* Features and Applications */
.lab-features,
.lab-applications {
    margin-bottom: 25px !important;
}

.lab-features h4,
.lab-applications h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #0078c8 !important;
    margin-bottom: 15px !important;
    position: relative !important;
    padding-left: 25px !important;
}

.lab-features h4::before {
    content: '⚙️' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

.lab-applications h4::before {
    content: '🔬' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

.features-list,
.applications-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.features-list li,
.applications-list li {
    position: relative !important;
    padding: 12px 0 12px 25px !important;
    font-size: 0.9rem !important;
    color: #666 !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid rgba(0, 120, 200, 0.1) !important;
    transition: all 0.3s ease !important;
    border-radius: 4px !important;
    margin: 2px 0 !important;
}

.features-list li:last-child,
.applications-list li:last-child {
    border-bottom: none !important;
}

.features-list li::before {
    content: '🔧' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    font-size: 12px !important;
}

.applications-list li::before {
    content: '▶' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    color: #0078c8 !important;
    font-size: 10px !important;
}

.features-list li:hover,
.applications-list li:hover {
    color: #0078c8 !important;
    transform: translateX(5px) !important;
    background: rgba(0, 120, 200, 0.05) !important;
    padding-left: 30px !important;
    font-weight: 500 !important;
}

/* Lab Images */
.lab-image {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.4s ease !important;
    aspect-ratio: 4/3 !important;
}

.lab-image:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 30px 70px rgba(0, 120, 200, 0.2) !important;
}

.lab-equipment-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
    filter: brightness(0.95) contrast(1.05) !important;
}

.lab-image:hover .lab-equipment-image {
    transform: scale(1.08) !important;
    filter: brightness(1.1) contrast(1.1) !important;
}

.lab-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, rgba(0, 120, 200, 0.9), rgba(0, 120, 200, 0.1)) !important;
    color: white !important;
    padding: 25px !important;
    transform: translateY(100%) !important;
    transition: transform 0.4s ease !important;
    backdrop-filter: blur(5px) !important;
}

.lab-image:hover .lab-overlay {
    transform: translateY(0) !important;
}

.lab-overlay h4 {
    font-size: 1.1rem !important;
    margin: 0 0 8px !important;
    font-weight: 600 !important;
    color: #fff !important;
    transform: translateY(20px) !important;
    opacity: 0 !important;
    transition: all 0.4s ease 0.1s !important;
}

.lab-overlay p {
    font-size: 0.9rem !important;
    margin: 0 !important;
    opacity: 0.9 !important;
    color: #fff !important;
    transform: translateY(20px) !important;
    transition: all 0.4s ease 0.2s !important;
}

.lab-image:hover .lab-overlay h4,
.lab-image:hover .lab-overlay p {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Integration Workflow Section */
.integration-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    padding: 80px 50px !important;
    border-radius: 30px !important;
    margin: 60px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 120, 200, 0.1) !important;
}

.integration-section::before {
    content: '' !important;
    position: absolute !important;
    top: -50px !important;
    right: -50px !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(0, 120, 200, 0.05), transparent) !important;
    border-radius: 50% !important;
}

.integration-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: -50px !important;
    left: -50px !important;
    width: 150px !important;
    height: 150px !important;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.05), transparent) !important;
    border-radius: 50% !important;
}

.integration-title {
    font-size: 2rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: center !important;
    margin-bottom: 50px !important;
    position: relative !important;
}

.integration-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 3px !important;
    background: linear-gradient(to right, #0078c8, #4caf50) !important;
}

.integration-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    position: relative !important;
}

.integration-grid::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(to right, transparent 0%, #0078c8 25%, #4caf50 75%, transparent 100%) !important;
    z-index: 0 !important;
}

.integration-step {
    background: white !important;
    padding: 30px 20px !important;
    border-radius: 15px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    z-index: 2 !important;
    border: 2px solid transparent !important;
}

.integration-step:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 50px rgba(0, 120, 200, 0.15) !important;
    border-color: rgba(0, 120, 200, 0.2) !important;
}

.step-number {
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #0078c8, #4caf50) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0 auto 20px !important;
    position: relative !important;
    transition: all 0.4s ease !important;
}

.integration-step:hover .step-number {
    transform: scale(1.1) !important;
}

.integration-step h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
}

.integration-step p {
    font-size: 0.9rem !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* CTA Section */
.cta-section {
    text-align: center !important;
    margin-top: 60px !important;
}

.lab-cta-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 18px 40px !important;
    background: linear-gradient(135deg, #0078c8, #4caf50) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 10px 30px rgba(0, 120, 200, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.lab-cta-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(0, 120, 200, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

.lab-cta-button i {
    font-size: 0.9rem !important;
    transition: transform 0.3s ease !important;
}

.lab-cta-button:hover i {
    transform: translateX(5px) !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .labs-container {
        padding: 0 20px !important;
    }
    
    .lab-content {
        gap: 40px !important;
        padding: 40px !important;
    }
    
    .integration-grid {
        gap: 20px !important;
    }
}

@media (max-width: 992px) {
    .ndt-dt-labs-section {
        padding: 80px 0 !important;
    }
    
    .labs-title {
        font-size: 2.5rem !important;
    }
    
    .lab-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 30px !important;
    }
    
    .lab-content.reverse .lab-image {
        order: 0 !important;
    }
    
    .integration-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .integration-grid::before {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .labs-title {
        font-size: 2rem !important;
    }
    
    .lab-title {
        font-size: 1.5rem !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    
    .lab-content {
        padding: 25px 20px !important;
        border-radius: 15px !important;
    }
    
    .integration-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .integration-step {
        padding: 25px 15px !important;
    }
    
    .lab-overlay {
        position: static !important;
        background: rgba(0, 120, 200, 0.1) !important;
        transform: none !important;
        margin-top: 15px !important;
        border-radius: 10px !important;
        padding: 15px !important;
        color: #333 !important;
    }
    
    .lab-overlay h4,
    .lab-overlay p {
        transform: none !important;
        opacity: 1 !important;
        color: #333 !important;
    }
}

@media (max-width: 576px) {
    .labs-container {
        padding: 0 15px !important;
    }
    
    .labs-title {
        font-size: 1.8rem !important;
    }
    
    .lab-section {
        margin-bottom: 60px !important;
    }
    
    .lab-content {
        padding: 20px 15px !important;
    }
    
    .lab-title {
        font-size: 1.3rem !important;
    }
    
    .lab-title i {
        font-size: 1.5rem !important;
        padding: 8px !important;
    }
    
    .integration-section {
        padding: 60px 20px !important;
        margin: 40px 0 !important;
    }
    
    .integration-title {
        font-size: 1.5rem !important;
    }
    
    .lab-cta-button {
        padding: 15px 30px !important;
        font-size: 0.9rem !important;
    }
    
    .lab-features h4,
    .lab-applications h4 {
        font-size: 1rem !important;
        text-align: center !important;
        padding-left: 0 !important;
    }
    
    .lab-features h4::before,
    .lab-applications h4::before {
        position: static !important;
        margin-right: 8px !important;
    }
    
    .features-list li,
    .applications-list li {
        text-align: center !important;
        padding: 10px !important;
        border-left: none !important;
    }
    
    .features-list li::before,
    .applications-list li::before {
        position: static !important;
        margin-right: 8px !important;
    }
}
/* Stagger animations for grid items */
.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.2s; }
.category-card:nth-child(3) { animation-delay: 0.3s; }
.category-card:nth-child(4) { animation-delay: 0.4s; }

.domain-item:nth-child(1) { animation-delay: 0.1s; }
.domain-item:nth-child(2) { animation-delay: 0.2s; }
.domain-item:nth-child(3) { animation-delay: 0.3s; }
.domain-item:nth-child(4) { animation-delay: 0.4s; }
.domain-item:nth-child(5) { animation-delay: 0.5s; }
.domain-item:nth-child(6) { animation-delay: 0.6s; }

.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(4) { animation-delay: 0.4s; }