/* ============================================================ */
/* BANNER SECTION */
/* ============================================================ */
/* Header on top*/
body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) #masthead,
body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) .ast-primary-header-bar,
body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) .site-primary-header-wrap {
    position: relative !important;
    z-index: 999 !important;
    isolation: isolate;
}

@keyframes buildCursorBlink {
    to { visibility: hidden; }
}
.elevate-banner {
    width: 100%;
    position: relative;
    overflow: hidden;

/* Tablet Landscape + Desktop */
@media screen and (min-width: 1024px) {
   &::before {
    content: '';
    position: absolute;
    bottom: 0;
    background-image: url(/wp-content/uploads/2026/07/Banner%20Part%20.svg);
    background-size: cover;
    z-index: 99;
    pointer-events: none;
    width: 100%;
    top: 0%;
}
	}

/* Tablet landscape */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	&::before {
        content: '';
        position: absolute;
        bottom: 0;
        background-image: url(/wp-content/uploads/2026/07/Banner%20Part%20.svg);
        background-size: cover;
        z-index: 99;
        pointer-events: none;
        width: 100%;
        top: 0%;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/*     .elevate-banner {
        position: relative;
        overflow: hidden;
  */
        &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            background-image: url(/wp-content/uploads/2026/07/Gradient%202.svg);
            background-size: cover;
            background-position: top center;
            background-repeat: no-repeat;
            z-index: 1;
            pointer-events: none;
        }
    }
	
/* Mobile (all mobile screens) */
@media screen and (max-width: 767px) {
    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        background-image: url(/wp-content/uploads/2026/07/MOB%20-%201st%20Header%20until%20Countown%20END.svg);
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
		z-index:1;
        pointer-events: none;
    }
}
    .banner-content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        padding-left: 22%;
        padding-right: 22%;
        padding-top: 5.3%;
        z-index: 2;

        .text-above-logo {
            width: 100%;
            text-align: center;
            color: var(--adro-electric-green);
            font-weight: 500;
            margin-bottom: 3%;
        }

        .logo-wrapper {
            width: 58.11%;
/*             margin-bottom: 3.73%; */

            .elevate-logo {
                width: 100%;
                height: auto;
                aspect-ratio: 625/135;
                background-size: cover;
            }
        }



.elevate-title {
            width: 58.2%;
	        aspect-ratio: 570 / 184;
            text-align: left;
            font-weight: 600;
            font-size: 8.7vw;             /* "Build" line — 200px on 1920 */
            line-height: 1;                 /* tighten the two lines */
/*             margin-bottom: 3.73%; */
        }

        .build-cursor {
            display: inline-block;
            width: 5.84vw;                 
            aspect-ratio: 112 / 22;             
            background: var(--adro-electric-green);
            margin-left: 0.5vw;
            vertical-align: 0.3vw;          /* nudges toward baseline of "Build" */
            animation: buildCursorBlink 1s steps(2, start) infinite;
        }
		
		

        .banner-tagline-italic {
            width: 60.24%;                  /* 33.8% of 1920 ÷ 56% container ≈ 60.24% */
            text-align: center;
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-size: 1.667vw;             /* 32px on 1920 */
            font-style: italic;
            font-weight: 500;
            line-height: normal;
            margin-bottom: 3.03%;
        }

.text-below-title {
            width: 132.94%;                 /* 74.58% of 1920 ÷ 56% container = 132.94% */
           
            text-align: center;
            font-weight: 600;
            color: var(--adro-electric-green);
            font-size: 2.083vw;             /* 40px on 1920px viewport */
            font-family: 'Montserrat', sans-serif;
            margin-bottom: 3.03%;
        }

        .banner-date-venue {
            width: 84.27%;                  /* 47.19% of 1920 ÷ 56% container = 84.27% */
            text-align: center;
            margin-bottom: 3.03%;

            .banner-date {
                color: var(--adro-electric-green);
                font-weight: 500;
                font-size: 2.083vw;         /* 40px on 1920 */
                font-family: 'Montserrat', sans-serif;
                line-height: 1.825;         /* 73px ÷ 40px */
                margin: 0;
            }

            .banner-venue {
                color: #fff;
                font-weight: 500;
                font-size: 1.667vw;         /* 32px on 1920 */
                font-family: 'Montserrat', sans-serif;
                margin: 0;
            }
        }

        a .elevate-get-in-touch {
            background-color: var(--adro-deep-blue);
            color: var(--adro-electric-green);
            border-color: 2px solid var(--adro-electric-green);
        }

        a {
            margin-bottom: 20%;
        }

        a .elevate-get-in-touch:hover {
            background-color: var(--adro-electric-green);
            color: var(--adro-deep-blue);
        }
    }
}
@media screen and (max-width: 1024px) and (orientation: portrait) { 

        .elevate-banner {
        width:100% ;
	    position: relative;
        overflow: hidden;

        .banner-content {
            width:100% ;
			padding: 13% 14.7% 0;
    
            .logo-wrapper {
                 width:65.7%;
                 aspect-ratio:387/70;
             
			
            .elevate-logo {
               height:100%;
            }
			}

			.elevate-title {
/*              aspect-ratio: 430 / 213; */
                width: 64.7%;
                font-size: 13.5vw;
          
            }
             .elevate-title::first-line {
                 font-size: 13.5vw;
            }
			
            .banner-tagline-italic {
               font-size: 3.84vw;
               margin: 0;
               padding-bottom: 5%;
            }

.text-below-title {
                width: 84.5%;
                font-size: 3.84vw;

            }

            .banner-date-venue {
                font-size: 3.36vw;

                .banner-date {
                   font-size: 3.36vw; 
                }

                .banner-venue {
                  font-size: 2.88vw;  
                }
            }
        }
    }
}
@media screen and (max-width: 767.5px) and (orientation: portrait) {
    .elevate-banner {
        width: 100%;
        height: 84.25vh;

        .banner-content {
            padding-top:19.3%;
			padding-left:8%;
            padding-right:8%;
    
            .logo-wrapper {
             aspect-ratio:278/60;
             width:85%;
			
            .elevate-logo {
               width: 100% !important;
                aspect-ratio: 278 / 60 !important;
                margin-bottom: 0 !important;
            }
			}

			.elevate-title {
             font-size: clamp(40px, 20vw, 75px);
/*             
                line-height: 1;
				color: #FFF; */
                width: 80%;
                aspect-ratio: 213 / 80;   
/*                 font-style: normal;
                font-weight: 600; */
/*                 line-height: normal; */
/* 				margin-bottom:4%; */
				padding-top:1%;
            }
             .elevate-title::first-line {
                font-size:clamp(40px, 20vw, 75px);
            }


            .build-cursor {
                width:12%;
                aspect-ratio:50/9;
/*                 margin-left: 1.5vw;
                vertical-align: 0.8vw; */
            }

            .banner-tagline-italic {
                width: 100%;
                font-size: 6.2vw;
                margin-bottom:7.3%;
            }

.text-below-title {
                width: 100%;
                margin-left: 0;
                font-size: 6.2vw;

            }

            .banner-date-venue {
                width: 100%;
                margin-bottom: 7.37%;

                .banner-date {
                    font-size: 4.9vw;
                    line-height: 1.4;
                }

                .banner-venue {
                    font-size: 4.9vw;
                }
            }
        }
    }
}


/* ============================================================ */
/* COUNTER SECTION */
/* ============================================================ */
.counter-section {
    width: 100%;
    height: 15.94vh;
    background-color: var(--adro-electric-green);
    color: var(--adro-deep-blue);
    padding: 1.41% 3.34%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;

    .event-start-title {
        width: auto;
        font-weight: 500;
        text-align: left;
        color: var(--adro-deep-blue);
        margin: 0;
        margin-left: unset !important;
        margin-right: unset !important;
    }

    .counter {
        color: var(--adro-deep-blue);
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-left: 9.27%;
        width: 62.51%;
        justify-content: space-between;

        .counter-style {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            min-width: 11.08%;

            span:nth-child(1) {
                font-weight: 700;
                font-family: Roboto !important;
            }

            span:nth-child(2) {
                font-weight: 400;
            }
        }
    }

    /* Event started state - hide counter and center title */
    &.event-started {
        justify-content: center;

        .event-start-title {
            width: 100%;
            text-align: center;
            margin: 0 !important;
        }

        .counter {
            display: none;
        }
    }
}

@media screen and (max-width: 1024px) {
    .counter-section {
        height: 16.05vh;
        padding: 1.92% 4.08%;
        flex-direction: column;
        align-items: center;

        .event-start-title {
            margin-bottom: 2.1%;
            text-align: center;
        }

        .counter {
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            margin-left: 0 !important;
            margin-right: 0 !important;

            .counter-style {
                text-align: center;
                min-width: 16.19%;
            }
        }

        &.event-started {
            justify-content: center;

            .event-start-title {
                margin-bottom: 0;
                width: 100%;
                text-align: center;
            }
        }

        @media screen and (orientation: landscape) {
            height: 20.94vh;
            padding: 1.41% 3.34%;
            flex-direction: row;
            align-items: center;

            .event-start-title {
                margin-bottom: 0;
                text-align: left;
				width:32%;
            }

            .counter {
                width: 62.51%;
                flex-direction: row;
                justify-content: space-between;
                margin-left: 9.27% !important;
                margin-right: 0 !important;
                height: auto;
                display: flex;
                grid-template-columns: none;
                grid-template-rows: none;
                gap: 0;

                .counter-style {
                    text-align: center;
                    min-width: 11.08%;
                }
            }

            &.event-started {
                justify-content: center;

                .event-start-title {
                    text-align: center;
                    width: 100%;
                }
            }
        }
    }
}

@media screen and (max-width: 767.5px) and (orientation: portrait) {
    .counter-section {
        height: 34.38vh;
        padding: 4.62% 6.16%;
        flex-direction: column;
        align-items: center;

        .event-start-title {
            margin-bottom: 5.27%;
            text-align: center;
			font-size: 1.3rem;
        }

        .counter {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 3%;
            margin-left: 0 !important;
            margin-right: 0 !important;

            .counter-style {
                text-align: center;
                min-width: 16.19%;
				
				span:nth-child(1) {
                    font-size:2rem;
               }
            }
        }

        &.event-started {
            height: 15.94vh;
            justify-content: center;

            .event-start-title {
                margin-bottom: 0;
                width: 100%;
                text-align: center;
            }
        }
    }
}


/* ============================================================ */
/* INTRODUCTION (OUR EXPERTISE) SECTION */
/* ============================================================ */
.our_expertise_container {
    .portrait-only-header {
        display: none;
    }

    display: flex;
    align-items: start;
    padding:1.6% 3.37% 3.37% 0;
    position: relative;
    justify-content: space-between;

    .video-container {
        width: 55%;
        aspect-ratio: 16 / 9;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
		margin-top: 1.1%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

	
	.video-container {
        position: relative;
    }

.video-container .expertise-video-poster {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: auto;
        aspect-ratio: 16 / 9;
        max-width: none;
        background-color: var(--adro-deep-blue);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        z-index: 1;
        transition: opacity 0.4s ease;
    }

.video-container iframe.expertise-vimeo-lazy {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: auto;
        aspect-ratio: 16 / 9;
        max-width: none;   /* stop any theme rule clamping the overflow width */
        border: 0;
        z-index: 2;
        background: transparent;
    }

    .content {
        width: 42.63%;
        margin-left: 0 !important;
        margin-right: 0 !important;

        .main-header {
            margin-bottom: 3%;
        }

        .main-header,
        .description {
            color: white;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .our_expertise_container {
        padding: 3.4% 3.4% 3.4% 0;

        .portrait-only-header {
            margin-bottom: 1em;
        }

        .owl-carousel .owl-dots .owl-dot {
            border-color: var(--adro-electric-green) !important;
        }

        .owl-carousel .owl-dots .owl-dot.active {
            background-color: var(--adro-electric-green) !important;
        }

        .video-container {
            width: 62.82%;
            aspect-ratio: 1.39;
        }

        .content {
            width: 34.32%;

            .main-header {
                margin-bottom: 1.4em;
            }
        }
    }
}

@media screen and (max-width: 767.5px),
       screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .our_expertise_container {
        flex-direction: column;
        align-items: center;
        padding: 10% 6.41%;

        .portrait-only-header {
            display: block;
            margin-bottom: 0 !important;
        }

        .owl-carousel .owl-dots .owl-dot {
            border-color: var(--adro-electric-green) !important;
        }

        .owl-carousel .owl-dots .owl-dot.active {
            background-color: var(--adro-electric-green) !important;
        }

        .content {
            width: 100%;

            .main-header {
                display: none;
            }
        }

.video-container {
            width: 100%;
            aspect-ratio: 16 / 9;
/*             margin-bottom: 2em; */
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .our_expertise_container {
            padding: 4.89%;

            .portrait-only-header {
                margin-bottom: 1em !important;
            }

            .video-container {
                aspect-ratio: 1.72;
                margin-bottom: 2.5em;
				margin-top:0 !important;
            }
        }
    }
		   @media screen and (max-width: 767.5px) {
			   .our_expertise_container {
				   .video-container {
					 margin-bottom: 2em;
				margin-top:0 !important;   
				   }
                  .portrait-only-header {
                margin-bottom: 1em !important;
            }
        }
    }
}


/* ============================================================ */
/* SPEAKERS SECTION */
/* ============================================================ */
.speakers-page-carousel-wrapper {
    padding: 0 3.34%;

    a {
        text-decoration: none !important;
    }

    circle {
        stroke: var(--adro-electric-green);
    }

    svg path,
    line {
        fill: var(--adro-electric-green) !important;
    }

    .owl-carousel {
        .owl-dots .owl-dot {
            border: 2px solid var(--adro-electric-green) !important;
        }

        .owl-dot.active {
            background-color: var(--adro-electric-green) !important;
        }
    }

    .section-central-heading {
        margin-bottom: 2.7% !important;
        text-align: left;

        h2,
        .sub-heading {
            margin-bottom: 2.7%;
         @media (max-width: 1024px) and (orientation: portrait) {
         text-align:left;
			}
        }
    }

    .speakers-page-item {
        position: relative;

        img {
            aspect-ratio: 72/43;
            border-radius: 18px;
        }
    }

    .image-wrapper {
        position: relative;
        border: 2px solid var(--adro-electric-green);
        border-radius: 20px;
    }

    .speaker-name {
        position: absolute;
        width: 78.2%;
        bottom: 0;
        left: 0;
        color: var(--adro-deep-blue);
        background-color: var(--adro-electric-green);
        padding: 1.5% 2.8%;
        border-radius: 0px 18px;
        z-index: 10;
    }

    .cta-with-icon {
        width: 81.3%;
        margin-bottom: 7%;
        margin-top: 0%;
    }

    .speakers-page-item .cta-with-icon:hover {
        color: var(--adro-electric-blue);
    }

    .description-text {
        margin: 8% 0 8.5% 0;
        width: 81.3%;
        color: white;
    }

    .title-icon {
        vertical-align: text-top;
        margin-left: 1%;
    }

    .carousel-controls {
        margin-bottom: 2.2%;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        padding: 0;

        .section-central-heading {
            margin-bottom: 4.8% !important;
            text-align: left;

            h2 {
                margin: 0 4.8% 2.9% 4.8%;
            }

            .sub-heading {
                margin: 0 4.8% 4.8% 4.8%;
            }
        }

        .speaker-name {
            width: 84.7%;
            padding: 2.2% 4.4%;
        }

        .description-text {
            width: 100%;
            margin: 7% 0 8.8% 0;
        }

        .carousel-controls {
            margin-bottom: 3.5%;
        }
    }

    @media screen and (max-width: 767.5px) {
        padding: 0;

        .section-central-heading {
            margin-bottom: 10.3% !important;

            h2 {
                margin: 0 6.32% 6.32% 6.32%;
            }

            .sub-heading {
                margin: 0 6.32% 8.32% 6.32%;
            }
        }

        .speaker-name {
            width: 87%;
            padding: 3% 5.8%;
        }

        .description-text {
            width: 100%;
            margin: 8.4% 0 17% 0;
        }

        .carousel-controls {
/*             margin-bottom: 24.5%; */
        }
    }
}

.speakers-page-carousel-wrapper .carousel-controls #playPauseBtn {
    display: none !important;
}


/* ============================================================ */
/* LATEST NEWS / HIGHLIGHTS SECTION */
/* ============================================================ */
.latest-news-section {

    .service-button-cta:after {
        background-image: url(/wp-content/uploads/2025/09/Button%20icons%20Solid%20%26%20Non%20Solid%20button%20large%20%26%20Small%20x%20small%20%281%29.svg);
        filter: brightness(0) invert(1);
    }

    .underline-on-hover span::before {
        background-color: #fff;
    }

    .owl-carousel .owl-dots { border-color: white; }
    .owl-carousel .owl-dots .owl-dot { border-color: white !important; }
    .owl-carousel .owl-dots .owl-dot.active { background-color: white !important; }
    .owl-carousel .owl-dots .owl-dot.adjacent { border-color: rgba(255, 255, 255, 0.7) !important; }
    .owl-carousel .owl-dots .owl-dot.near { border-color: rgba(255, 255, 255, 0.5) !important; }
    .owl-carousel .owl-dots .owl-dot.far,
    .owl-carousel .owl-dots .owl-dot.edge-indicator {
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    #playPauseBtn,
    .owl-nav button {
        svg path,
        line {
            fill: white;
            stroke: white;
        }
        circle { stroke: white; }
    }

    /* ── Section header (shared all breakpoints) ── */
    .our-latest-news-header {
        padding: 2.6% 3.34% 0;

        .main-header { margin-bottom: 0.5em; }
        .sub-heading { text-align: left; }
    }

    /* ── Card section wrapper (shared) ── */
    .card-section {
        display: flex;
        padding: 3% 4% 5.3%;
    }

    .card-section .latest-news-accordion .item.card .card-collapsed-title {
        display: none;
    }

    /*  DESKTOP + LANDSCAPE TABLET  (≥1025px  OR  768-1024 landscape) */
    @media screen and (min-width: 1025px),
           screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

        .card-wrapper[data-alignment="left"]   { background-position: left center; }
        .card-wrapper[data-alignment="right"]  { background-position: right center; }
        .card-wrapper[data-alignment="center"] { background-position: center center; }

        .card-section .small-cards.latest-news-accordion {
            display: flex !important;
            flex-direction: row !important;
            gap: 24px;
            width: 98.7% !important;
            overflow: visible !important;
            transform: none !important;
            transition: none !important;
        }

        .card-section .small-cards.latest-news-accordion .owl-stage-outer,
        .card-section .small-cards.latest-news-accordion .owl-stage {
            display: contents !important;
        }

        .card-section .small-cards.latest-news-accordion .owl-item {
            display: contents !important;
            width: auto !important;
            transform: none !important;
        }

        .card-section .small-cards.latest-news-accordion .owl-dots,
        .card-section .small-cards.latest-news-accordion .owl-nav,
        .card-section .small-cards.latest-news-accordion .owl-stage-outer::after {
            display: none !important;
        }

        .card-section .latest-news-accordion .item.card {
            flex: 1;
            height: 31.3vw;
            min-width: 0;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            background-size: cover;
            background-position: center;
            transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
        }

        .card-section .latest-news-accordion .item.card.active { flex: 4.6; }

        .card-section .latest-news-accordion .item.card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 10px;
            background: linear-gradient(180deg,
                rgba(67, 102, 143, 0.14) 11.22%,
                rgba(5, 9, 14, 0.60)     74.68%);
            z-index: 1;
            transition: background 0.5s ease;
        }

        .card-section .latest-news-accordion .item.card.active::before {
            background: linear-gradient(180deg,
                rgba(67, 102, 143, 0.14) 37.59%,
                rgba(5, 9, 14, 0.60)     63.32%);
        }

        .card-section .latest-news-accordion .item.card .card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            padding: 0 7% 1% 7%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            overflow: hidden;
        }

        .card-section .latest-news-accordion .item.card .card-title {
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            color: #fff;
            text-transform: uppercase;
            white-space: normal;
            margin: 0 0 1% 0;
            transition: opacity 1.4s ease, transform 1.4s ease;
        }

        .card-section .latest-news-accordion .item.card.active .card-title {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition-delay: 0.5s;
        }

        .card-section .latest-news-accordion .item.card .card-description {
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            color: #fff;
            text-align: left;
            width: 100%;
            margin: 0 0 6.8% 0;
            transition: opacity 1.4s ease, transform 1.4s ease;
        }

        .card-section .latest-news-accordion .item.card.active .card-description {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition-delay: 0.6s;
        }

        .card-section .latest-news-accordion .item.card .card-cta {
            display: none;
            color: #fff;
            text-align: left;
        }

        .card-section .latest-news-accordion .item.card.active .card-cta {
            display: inline-block;
            animation: lnSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
            animation-delay: 0.36s;
        }

        @keyframes lnSlideUp {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .card-section .latest-news-accordion .item.card .card-collapsed-title {
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 69px;
            height: 253px;
            overflow: hidden;
            border-radius: 10px 0 0 0;
            background: rgba(0, 0, 0, 0.00);
            -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(1.05);
            backdrop-filter: blur(18px) saturate(160%) brightness(1.05);
            z-index: 2;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        .card-section .latest-news-accordion .item.card .card-collapsed-title::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(-45deg,
                rgba(255, 255, 255, 0.30) 0%,
                rgba(255, 255, 255, 0.00) 45%,
                rgba(255, 255, 255, 0.00) 60%,
                rgba(255, 255, 255, 0.12) 100%);
            mix-blend-mode: overlay;
            pointer-events: none;
        }

        .card-section .latest-news-accordion .item.card .card-collapsed-title-text {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 253px;
            height: 69px;
            margin-top: -34.5px;
            margin-left: -126.5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--ADROSONIC-White-Base, #FFF);
            text-align: center;
            transform: rotate(-90deg);
            font-family: "Montserrat", sans-serif;
        }

        .card-section .latest-news-accordion .item.card.active .card-collapsed-title {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        @media screen and (min-width: 1025px) and (max-width: 1200px) {
            .card-section .latest-news-accordion .item.card { height: 700px; }
        }

        @media screen and (min-width: 768px) and (max-width: 1110px) and (orientation: landscape) {
            .card-section .latest-news-accordion .item.card { height: 500px; }
        }
    }

    /* MOBILE + PORTRAIT TABLET */
    @media screen and (max-width: 767.5px),
           screen and (max-width: 1024px) and (orientation: portrait) {

        .our-latest-news-header {
            padding: 4.31% 6.16% 0;

            .main-header {
                font-size: clamp(24px, 5vw, 24px) !important;
                text-align: center !important;
                line-height: normal !important;
                margin-bottom: 1em;
            }

            .sub-heading {
                font-size: clamp(18px, 5vw, 18px) !important;
                text-align: center !important;
                line-height: 1.4 !important;
                margin-bottom: 2.5rem;
            }
        }

        .card-section {
            display: flex;
            flex-direction: column;
            padding: 0;
            gap: 0;
            overflow-x: clip;
            overflow-y: hidden;

            .owl-stage-outer {
                overflow: hidden !important;
                margin-bottom: 0;
            }

            .owl-stage {
                display: flex !important;
                align-items: center !important;
            }

            .owl-nav { display: none !important; }

            .center-outside-content {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
                padding-top: 4%;
                padding-bottom: 0;

                .card-description {
                    margin: 0;
                    line-height: 1.5 !important;
                    color: #fff;
                    text-align: left;
                }

                .card-cta {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.75rem;
                }
            }

            .owl-dots {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                gap: 0.5rem !important;
                margin-top: 8% !important;
                padding: 0 !important;
                margin-bottom: 16.3%;
            }

            .small-cards {
                display: block;

                .owl-item { display: flex !important; }

                .card {
                    border-radius: 4vw;
                    position: relative;
                    background-size: cover;
                    background-position: center;
                    display: inline-flex;
                    flex-direction: column;
                    align-items: center;
                    overflow: hidden !important;
                    margin: 0 !important;
                    transform: none;
                    padding: 0 !important;
                    box-sizing: border-box;
                    flex-shrink: 0;
                }

                .card::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-radius: inherit;
                    background: linear-gradient(180deg,
                        rgba(67, 102, 143, 0.65) 0%,
                        rgba(55, 82, 114, 0.75)  30%,
                        rgba(5, 9, 14, 0.75)     100%);
                    z-index: 1;
                }

                .card .card-content {
                    z-index: 2;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    padding-left: 6.4%;
                    padding-top: 6.4%;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                }

                .card .card-title {
                    display: block;
                    margin: 0 !important;
                    color: #fff;
                    text-align: left;
                    font-size: clamp(13px, 5vw, 18px) !important;
                    font-family: "Montserrat", sans-serif !important;
                }

                .owl-item:not(.center) .card .card-title { display: none !important; }
                .owl-item.active.center .card .card-title { display: block !important; }

                .card .card-description,
                .card .card-cta { display: none !important; }

                .card .card-collapsed-title { display: none !important; }

                .owl-item.active.center {
                    z-index: 3 !important;
                    position: relative;
                    justify-content: center !important;
                }

                .owl-item.active.center .card {
                    border-radius: 2.5vw !important;
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                    width: 75vw !important;
                    max-width: none !important;
                    height: 82vw !important;
                    padding: 0 !important;
                    top: 0;
                    z-index: 3;
                }

                .owl-item.active.center .card::before {
                    border-radius: inherit;
                    background: linear-gradient(0deg, rgba(67, 102, 143, 0.00) 55.16%, rgba(21, 35, 55, 0.67) 83.99%);
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                }

                .owl-item:not(.center) {
                    z-index: 1 !important;
                    position: relative;
                    justify-content: center !important;
                }

                .owl-item.center + .owl-item { justify-content: flex-start !important; }
                .owl-item:has(+ .owl-item.center) { justify-content: flex-end !important; }

                .owl-item:not(.center) .card {
                    width: 55vw !important;
                    max-width: none !important;
                    height: 69vw !important;
                    padding: 0 !important;
                    z-index: 1;
                }
            }
        }
    }

    /* Portrait tablet overrides (768–1024) */
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

        .our-latest-news-header {
            padding: 8.7% 4.8% 0;

            .main-header {
                font-size: clamp(32px, 5vw, 40px) !important;
                line-height: normal !important;
                margin-bottom: 1.2em;
            }

            .sub-heading {
                font-size: clamp(16px, 3.5vw, 24px) !important;
                line-height: normal !important;
                text-align: center !important;
            }
        }

        .card-section {

            .owl-stage-outer { margin-bottom: 0; }

            .owl-dots {
                margin-top: 4.7% !important;
                margin-bottom: 11.4%;
            }

            .center-outside-content {
                padding-top: 3%;

                .card-description { font-size: clamp(24px, 3.5vw, 24px) !important; }
                .card-cta { font-size: clamp(24px, 3.5vw, 24px) !important; }
            }

            .small-cards {

                .card .card-title {
                    font-size: clamp(16px, 4.5vw, 32px) !important;
                    font-family: "Montserrat", sans-serif !important;
                }

                .owl-item.active.center { z-index: 10 !important; }

                .owl-item.active.center .card {
                    width: 55vw !important;
                    max-width: none !important;
                    height: 62vw !important;
                    padding: 0 !important;
                    top: 0;
                    z-index: 10;
                }

                .owl-item:not(.center) .card {
                    width: 45vw !important;
                    max-width: none !important;
                    height: 51vw !important;
                    padding: 0 !important;
                    z-index: 1;
                }

                .owl-item.center + .owl-item .card { transform: translateX(0vw) !important; }
                .owl-item:has(+ .owl-item.center) .card { transform: translateX(0vw) !important; }
            }
        }
    }
}

.latest-news-section {
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        & .our-latest-news-header {
            .main-header {
                text-align: left !important;
            }
        }
    }
}
/* ============================================================ */
/* ROUNDTABLE SECTION */
/* ============================================================ */
/* Removed the decorative SVG background pattern
   (bg_roundtable.svg) that previously showed at ≥1024px. */

.round-table {
/*     padding-top: 5%;
    padding-bottom: 6.4%; */

    .fade-text {
        transition: opacity 0.4s ease;
    }

    .fade-out {
        opacity: 0;
    }

    .main-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .main-header-inner {
            width: 57.29%;
            display: flex;
            justify-content: center;
            align-items: center;

            .round-table-header {
                margin-bottom: 1.73%;
            }
        }
    }

    .container {
        display: flex;

        .left-box {
            width: 42.49%;
            padding: 0 0.5% 0 3.34%;
            box-sizing: border-box;

            .round-table-header {
                margin-bottom: 5.4%;
            }

            .sub-header {
                display: none;
            }
        }

        .carousel-container {
            flex: 1;
            width: 100%;
            overflow: hidden;

            .carousel {
                will-change: transform;
                display: flex;
                width: calc(20.2vw * var(--slide-count) * 2 + 1.67vw * (var(--slide-count) * 2 - 1));
                animation: slideLoop calc(3.5 * var(--slide-count) * 1s) linear infinite;

                .panel-slide[data-after-target="true"] .speaker .title,
                .panel-slide[data-after-target="true"] .speaker:hover .caption,
                .panel-slide[data-after-target="true"] .speaker .caption {
                    background-color: var(--adro-lilac);
                }

                .panel-slide {
                    margin: 0;
                    width: 20.2vw;
                    box-sizing: border-box;
                    margin-right: 1.67vw;

                    .speaker {
                        position: relative;
                        background: none;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        will-change: transform;
                        transform: translateZ(0);
                        backface-visibility: hidden;

                        img {
                            border-radius: 20px;
                            aspect-ratio: 388 / 361;
                            object-fit: cover;
                        }
                    }

                    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape),
                    screen and (min-width: 1024px) {
                        .speaker {
                            .title {
                                padding: 3.14%;
                                text-align: center;
                                position: absolute;
                                margin: 0;
                                opacity: 0.85;
                                bottom: 0;
                                color: var(--adro-deep-blue);
                                background-color: var(--adro-electric-green);
                                border-radius: 0 0 20px 20px;
                                width: 100%;
                            }

                            .caption {
                                display: none;
                            }
                        }

                    }
                }
            }

            @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
                .carousel {
                    width: calc(31.25vw * var(--slide-count) * 2 + 2vw * (var(--slide-count) * 2 - 1));

                    .panel-slide {
                        width: 31.25vw;
                        margin-right: 2vw;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 768px),
    screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        padding-left: 0;

        .main-header {
            display: none;
        }

        .container {
            display: flex;
            flex-direction: column;

            .left-box {
                padding-left: 6.16%;
                width: 100%;
                padding-right: 6.16%;
                text-align: center;

                .round-table-header {
                    margin-bottom: 9.36%;
                }

                .round-table-text {
                    margin-bottom: 9.36%;
                }

                .sub-header {
                    justify-content: center;
                    height: auto;
                    display: block;

                    .round-table-header {
                        margin-bottom: 6.15%;
                    }

                    .sub-header-inner {
                        width: 100%;
                        text-align: center;
                    }
                }
            }

            .carousel-container {
                width: 100%;

                .carousel {
                    width: calc(53.84vw * var(--slide-count) * 2 + 4.1vw * (var(--slide-count) * 2 - 1));
                    animation: slideLoop calc(4 * var(--slide-count) * 1s) linear infinite;
                    display: flex;
                    align-items: stretch;

                    .panel-slide {
                        margin-right: 4.1vw;
                        width: 53.84vw;
                        display: flex;
                        flex-direction: column;
                        flex: 1 1 auto;

                        .speaker {
                            flex: 1 1 auto;
                            display: flex;
                            flex-direction: column;

                            .title {
                                display: none;
                            }

                            img {
                                border-radius: 20px 20px 0 0;
                            }

                            .caption {
                                height: 100%;
                                padding: 2.85%;
                                text-align: center;
                                position: static;
                                margin: 0;
                                top: 0;
                                color: var(--adro-deep-blue);
                                background-color: var(--adro-electric-green);
                                border-radius: 0 0 20px 20px;
                                width: 100%;
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        .container {
            .left-box {
/*                 padding-left: 4.8%;
                padding-right: 4.8%; */

                .round-table-header {
                    margin-bottom: 5.31%;
                }

                .round-table-text {
                    margin-bottom: 5.31%;
                }

                .sub-header {
                    .round-table-header {
                        margin-bottom: 3.45%;
                    }
                }
            }

            .carousel-container {
                .carousel {
                    width: calc(46.52vw * var(--slide-count) * 2 + 3.8vw * (var(--slide-count) * 2 - 1));

                    .panel-slide {
                        margin-right: 3.8vw;
                        width: 46.52vw;
                    }
                }
            }
        }
    }
}

/* Roundtable: disable card movement on Desktop + Tablet Landscape only */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape),
       screen and (min-width: 1025px) {
    .round-table .container .carousel-container .carousel {
        animation: none !important;
        transform: none !important;
    }
}

@keyframes slideLoop {
    0%   { transform: translateX(1vw); }
    100% { transform: translateX(calc(-1 * (20.2vw * var(--slide-count) + 1.67vw * (var(--slide-count) - 1)))); }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    @keyframes slideLoop {
        0%   { transform: translateX(0); }
        100% { transform: translateX(calc(-31.25vw * var(--slide-count) - 2vw * var(--slide-count))); }
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    @keyframes slideLoop {
        0%   { transform: translateX(-2vw); }
        100% { transform: translateX(calc(-46.52vw * var(--slide-count) - 3.8vw * var(--slide-count))); }
    }
}

@media screen and (max-width: 767.5px) {
    @keyframes slideLoop {
        0%   { transform: translateX(-2vw); }
        100% { transform: translateX(calc(-53.84vw * var(--slide-count) - 4.1vw * var(--slide-count))); }
    }
}


/* ============================================================ */
/* AGENDA SECTION */
/* ============================================================ */
.agenda-section-head {
    text-align: center;

    .section-head {
        margin-bottom: 0;
    }
}
@media (max-width: 768px) {
.agenda-section-head {
    .section-head {
        margin-bottom: 0;
        padding-left: 6.2%;
        padding-right: 6.2%;
	}
	}
}
/* Removed the decorative SVG background pattern
   (bg_agenda_latest.svg) that previously showed at ≥1024px. */

.svg-background-section {
    position: relative;
    overflow: hidden;

    .only-space-div {
        height: 11vh;
    }

    .only-space-div-bottom {
        height: 13.4vh;
    }

    .content {
        position: relative;
        z-index: 1;
    }

    .timeline-container {
        position: relative;
        width: 56.05%;
        margin: auto;

        .timeline-line-wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            .timeline-head,
            .timeline-foot {
                height: 24px;
                transform: translateX(1px);
            }

            .timeline-line {
                flex: 1;
                width: 2px;
                background: var(--adro-electric-green);
                margin-top: -8px;
                margin-bottom: -8px;
                margin-left: 1px;
            }
        }

        .timeline-item {
            width: 50%;
            padding: 0 5.91%;
            position: relative;
            box-sizing: border-box;

            .content {
                background: var(--adro-electric-green);
                border-radius: 15px;
                padding: 3.9% 4.87%;
                position: relative;
                z-index: 1;
                gap: 8px;
                display: flex;
                flex-direction: column;

                * {
                    color: var(--adro-deep-blue);
                }
            }

            .svg-connector {
                position: absolute;
                top: 50%;
                bottom: 50%;
                transform: translateY(-50%);
                z-index: 0;

                svg circle,
                svg path {
                    fill: var(--adro-deep-blue);
                }
            }
        }

        .timeline-item.left {
            left: 0;

            .svg-connector {
                right: -10px;
            }
        }

        .timeline-item.right {
            left: 50%;
            text-align: left;

            .svg-connector {
                left: -8px;
                transform: scaleX(-1);
            }
        }

        @media screen and (min-width: 768px) {
            .timeline-item.right:not(:first-child) {
                margin-top: -4vh;
            }

            .timeline-item.left.translateup:not(:first-child) {
                margin-top: -4vh;
            }
        }

        .only-space-empty {
            height: 24px;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
        .timeline-container {
            width: 100%;

            .timeline-item {
                padding: 0 3.34%;
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        .only-space-div {
            height: 4.2vh;
        }
		 .only-space-div-bottom {
        height: 8vh !important;
    }
        .timeline-container {
            width: 100%;

            .timeline-item .content {
                padding: 4.85%;
            }

            .timeline-item.left {
                padding-right: 5.64%;
                padding-left: 4.8%;
            }

            .timeline-item.right {
                padding-left: 5.64%;
                padding-right: 4.8%;
            }
        }
    }

    @media (max-width: 767.5px) {
        .only-space-div {
            height: 5vh;
        }

        .timeline-container {
            width: 100%;

            .timeline-line-wrapper {
                right: 4.11%;
                left: unset;
                transform: none;

                .timeline-line {
                    left: 0;
                }
            }

            .timeline-item,
            .timeline-item.left,
            .timeline-item.right {
                width: 95.9%;
                left: 0;
                text-align: left;
                padding: 0;
            }

            .timeline-item.left.translateup:not(:first-child) {
                margin-top: 9.75%;
            }

            .timeline-item.right:not(:first-child) {
                margin-top: 9.75%;
            }

            .timeline-item {
                margin-top: 0;

                .content {
                    margin-left: 4.55%;
                    margin-right: 5.09%;
                    width: 88.24%;
                    padding: 2.14% 4.28%;
                }
            }

            .timeline-item.left {
                .svg-connector {
                    right: -0.54%;
                }
            }

            .timeline-item.right {
                .svg-connector {
                    right: 0;
                    left: unset;
                    transform: scaleX(1);
                }
            }
        }
    }
}
@media only screen and (max-width: 767px) {
.our-industry-container .card-title.industry-title-font {
    font-family: 'Montserrat', sans-serif !important;
}
}

/* Tablet Portrait (768px to 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .our-industry-container .card-title.industry-title-font {
    font-family: 'Montserrat', sans-serif !important;
}
}

/* Tablet Landscape (768px to 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
.our-industry-container .card-title.industry-title-font {
    font-family: 'Montserrat', sans-serif !important;
}
}


@media (min-width: 1024px) {
.our-industry-container .card-title.industry-title-font {
    font-family: 'Montserrat', sans-serif !important;
}
	
	@media (min-width: 1024px) {
  .our-industry-container .card-column--right .card .card-title,
  .our-industry-container .card-column--left .card .card-title {
    font-size: clamp(24px, 2.1vw, 40px)!important;
    width: 79% !important;
    aspect-ratio: 549 / 104  !important;
    padding-left: 10.7% !important;
	  justify-content: left !important;
  }
  .our-industry-container .card-column--right .card .card-title,
  .our-industry-container .card-column--left .card .card-title {
    justify-content: left !important;
    width: 94% !important;
    aspect-ratio: 548 / 104 !important;
    text-align: left !important;
  }
}

/* body:is(.page-id-41080,  .page-id-41555 , .page-id-41583) {

    .our-industry-container {

        * {
            animation: none !important;
            transition: none !important;
        }

        .card {
            opacity: 1 !important;
            transform: none !important;
            -webkit-transform: none !important;

            &.show {
                opacity: 1 !important;
                transform: none !important;
            }

            &.swap-fade {
                opacity: 1 !important;
            }

            &.active .icon-container {
                animation: none !important;
                transition: none !important;
            }
        }

        .card-column--left,
        .card-column--right {
            opacity: 1 !important;
            transform: none !important;
            -webkit-transform: none !important;

            &.in-view {
                opacity: 1 !important;
                transform: none !important;
            }
        }

        .icon-container {
            animation: none !important;
            transition: none !important;
        }
    }
}
 */
}
/* ============================================================ */
/* HEADER / FOOTER GLOBALS */
/* ============================================================ */
.site-above-footer-wrap[data-section="section-above-footer-builder"] {
    background-color: var(--adro-electric-green);
}

header {
    background-color: var(--adro-deep-blue);
}

header:hover {
    background-color: var(--adro-blue);
}


/* ============================================================ */
/* SPACERS (matching the section flow) */
/* ============================================================ */
.spacer-between-banner-introduction     { height: 8.2vh; }
.spacer-between-introduction-industries { height: 10vh; }
/* .spacer-between-industries-speakers     { height: 14.3vh; } */
/* .spacer-between-speakers-latest-news    { height: 9.7vh; } */
/* .spacer-between-latest-news-roundtable  { height: 4.4vh; } */
/* .spacer-between-roundtable-agenda       { height: 8vh; } */
/* .spacer-after-agenda                    { height: 8vh; } */
/* .spacer-after-problem-statement          {height : 7.6vh;} */

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .spacer-between-banner-introduction     { height: 3.8vh; }
    .spacer-between-introduction-industries { height: 6.5vh; }
/*     .spacer-between-industries-speakers     { height: 10vh; } */
/*     .spacer-between-speakers-latest-news    { height: 1vh; }
    .spacer-between-speakers-latest-news    { height: 4.7vh; } */
    .spacer-between-latest-news-roundtable  { height: 1.3vh; }
/*     .spacer-between-roundtable-agenda       { height: 7vh; } */
    .spacer-after-agenda                    { height: 0vh !important;  } 
	.spacer-after-problem-statement         { height:  0vh !important; }
}

@media screen and (max-width: 767.5px) {
    .only-space-div-bottom                  { height: 0 !important; }
    .spacer-between-banner-introduction     { height: 0vh; }
    .spacer-between-introduction-industries { height: 5vh; }
/*     .spacer-between-industries-speakers     { height: 9vh; } */
/*     .spacer-between-speakers-latest-news    { height: 8vh; } */
/*     .spacer-between-latest-news-roundtable  { height: 3vh; } */
/*     .spacer-between-roundtable-agenda       { height: 7vh; } */
    .spacer-after-agenda                    { height: 8vh; }
	.spacer-above-roundtable                {height:10vh;  }
	.spacer-after-problem-statement         {height:0vh !important; }
}

/* ============================================================
   PROBLEM STATEMENT SECTION
   ============================================================ */
.problem-statement-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
/*     width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 48px 63px 76px 76px; */
    box-sizing: border-box;

    /* -------- Heading -------- */
    .section-central-heading {
        width: 100%;
/*         max-width: 1781px;
        margin-bottom: 55px; */

        h2 {
/*             color: #FFF; */
            margin: 0;
			text-align: left;
            padding-left: 3.34%;
            padding-bottom: 2.5%;
            /* .large-size .font-bold utility classes handle typography */

         @media (max-width: 1024px) and (orientation: portrait) {
         text-align: center;
			}
			@media (max-width: 768px) {
         text-align: center !important;
			}
        }
    }

    /* -------- Cards wrapper -------- */
    .problem-statement-cards-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 2%;
        width: 100%;
		padding: 0 3.34% 2.5% 3.34%;
/*         max-width: 1781px; */
      @media (max-width: 1024px) and (orientation: portrait) {
				 padding: 0 4% 5.8% 5%;
			 }
    }

    /* -------- Individual card -------- */
    .problem-statement-card {
        position: relative;
        flex: 1 1 0;
/*         max-width: 568.056px;
        min-height: 596.717px; */
        border-radius: 20px;
        border: 1px solid #23E4BA;
        overflow: hidden;
        background-color: #0a1a2e;         /* fallback while lazy-loading */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        /* Dark overlay for text legibility over bg image */
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(10, 26, 46, 0.35) 0%,
                rgba(10, 26, 46, 0.75) 100%
            );
            z-index: 1;
            pointer-events: none;
        }

        .problem-statement-card-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 10% 6.9% 30% 7%;        /* bottom padding leaves space for btn */
            box-sizing: border-box;

            h3 {
                width: 94%;
                margin-bottom: 10%;
                color: #FFF;
                font-family: 'Montserrat', sans-serif;
                font-size: 32px;
                font-weight: 500;
                line-height: normal;
            }

            p {
                width: 97%;
                margin: 0;
                color: #FFF;
                font-family: 'Montserrat', sans-serif;
                font-size: 24px;
                font-weight: 400;
                line-height: normal;
            }
        }

        /* Download button — bottom-right, no rotation needed */
        .problem-statement-btn {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;

            height: 83px;
            width: 58.3%;
            padding: 0 2.8%;
            box-sizing: border-box;
            border-radius: 16px 0 5px 0;
            background: #23E4BA;
            color: #1A2C47;
            font-family: 'Montserrat', sans-serif;
            font-size: 24px;
            font-weight: 500;
            line-height: 1.1;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.3s ease, color 0.3s ease;

			&:hover,
            &:focus-visible {
                background: #1fc9a3;
                color: #1A2C47;
                text-decoration: none;
            }
        }
    }

    /* ---- Tablet LANDSCAPE only: shrink button to keep desktop shape ---- */
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
        .problem-statement-card .problem-statement-btn {
            height: 3.7vw;          /* was fixed 83px — now scales with card */
            min-height: 44px;
            font-size: 1.7vw;       /* proportional to the smaller card */
            width: 58.3%;           /* same proportion as desktop */
            padding: 0 2.8%;
            border-radius: 12px 0 4px 0;
        }
        .problem-statement-card .problem-statement-card-content {
            padding: 8% 6.9% 22% 7%;  /* trims bottom gap so text isn't crowded */
        }
    }
}

.problem-statement-empty-msg {
    display: flex;
    width: 100%;
    aspect-ratio: 1792 / 40;
    flex-direction: column;
    font-size: 1.7vw;
	color: var(--ADROSONIC-Electric-green, #23E4BA) !important;

    }

@media (max-width: 768px) {
.problem-statement-empty-msg {
font-size: 4.62vw;
padding: 0 6.2% 13% 6.2%;
text-align:center;
}
}

/* ===PROBLEM STATEMENT — PHONE============= */
@media screen and (max-width: 767.5px) {
    .problem-statement-section {
        padding: 8.2% 0 0;       
    }
  
    .problem-statement-section .section-central-heading {
        width: 100%;
        padding: 0 6.15%;         
        box-sizing: border-box;
    }
    .problem-statement-section .section-central-heading h2 {
        padding-left: 0;
        padding-bottom: 5%;
        text-align: left;
        font-size: 6.15vw;
    }


    .problem-statement-section:has(.problem-statement-card) .section-central-heading h2 {
        padding-bottom: 7.69vw;
    }

.problem-statement-section .problem-statement-cards-wrapper.problem-statement-owl {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        gap: 0;
        overflow: hidden;          
    }
    .problem-statement-cards-wrapper.problem-statement-owl .owl-stage-outer {
        overflow: visible;         
    }
    .problem-statement-cards-wrapper.problem-statement-owl .owl-stage {
        align-items: stretch;     
    }

    /* Card — Figma 274 × 288 (border-box), radius 9.66, border 1.61 */
    .problem-statement-cards-wrapper.problem-statement-owl .problem-statement-card {
        flex: 0 0 auto;
        width: 70.26vw;              /* 274 ÷ 390 */
        aspect-ratio: 274 / 288;     /* was 280/297 → rendered 290.6px tall */
        min-height: 0;
        border-radius: 2.48vw;       /* 9.66 ÷ 390 */
        border-width: 1.61px;
        box-sizing: border-box;
        margin: 0 auto;              /* owl-item is ~287px wide; centring the 274px card
                                        makes the neighbour peeks symmetric */
    }


    .problem-statement-cards-wrapper.problem-statement-owl
    .problem-statement-card .problem-statement-card-content {
        padding: 6.92vw 6.15vw calc(max(9.89vw, 36px) + 3.08vw);  
        box-sizing: border-box;
    }

	
    .problem-statement-cards-wrapper.problem-statement-owl
    .problem-statement-card-content h3 {
        width: 100%;
        margin: 0 0 4.1vw;                              /* 16px @ 390 */
        font-size: clamp(14px, 4.1vw, 16px) !important;
        font-weight: 600 !important;
        line-height: normal !important;
        flex: 0 0 auto;
    }

    .problem-statement-cards-wrapper.problem-statement-owl
    .problem-statement-card-content p {
        width: 100%;
        margin: 0;
        font-size: clamp(12px, 3.59vw, 14px) !important;
        font-weight: 400 !important;
        line-height: normal !important;
    }


    .problem-statement-cards-wrapper.problem-statement-owl
    .problem-statement-card .problem-statement-btn {
        width: 37.44vw;                      /* 146 ÷ 390 */
        height: 9.89vw;                      /* 38.589 ÷ 390 */
        min-height: 36px;                    /* floor for 320px phones, below Figma so it
                                                never inflates the button at 390 */
        padding: 0 1.59vw;                   /* leaves 133.61px for the text */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #1A2C47;
        font-family: 'Montserrat', sans-serif;
        font-size: clamp(10px, 2.975vw, 11.603px) !important;   /* 11.603 ÷ 390 */
        font-weight: 500 !important;
        line-height: normal !important;
        border-radius: 10px 0 4px 0;
    }

   
    .problem-statement-cards-wrapper.problem-statement-owl .owl-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 32px;
        margin-top: 10%;
        padding-bottom: 11%;       
    }

    .problem-statement-cards-wrapper.problem-statement-owl .owl-dots .owl-dot {
        border: 2px solid var(--adro-electric-green) !important;
    }
    .problem-statement-cards-wrapper.problem-statement-owl .owl-dots .owl-dot.active {
        background-color: var(--adro-electric-green) !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.problem-statement-empty-msg {
/* font-size: 3.9vw; */
text-align:left;
}	
}

/* ==========PROBLEM STATEMENT — TABLET PORTRAIT ==== */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .problem-statement-section {
        padding: 5% 0 0;        
    }
   
    .problem-statement-section .section-central-heading {
        width: 100%;
        padding: 0 4.8%;           
        box-sizing: border-box;
    }
    .problem-statement-section .section-central-heading h2 {
        padding-left: 0;
        padding-bottom: 7.7%;       
        text-align: left;
        font-size: 4.8vw;   
		 @media (max-width: 1024px) and (orientation: portrait) {
          padding-bottom: 5.4%;
		}
    }

   

    .problem-statement-section .problem-statement-cards-wrapper.problem-statement-owl {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        gap: 0;
        overflow: hidden;           
    }
    .problem-statement-cards-wrapper.problem-statement-owl .owl-stage-outer {
        overflow: visible;        
    }
    .problem-statement-cards-wrapper.problem-statement-owl .owl-stage {
        align-items: stretch;      
    }

   
    .problem-statement-cards-wrapper.problem-statement-owl .problem-statement-card {
        flex: 0 0 auto;
        width: 100%;               
        aspect-ratio: 368 / 387;   
        min-height: 0;
        border-radius: 1.56vw;   
        border-width: 2px;
    }


    .problem-statement-cards-wrapper.problem-statement-owl .owl-item {
        display: flex;
    }
    .problem-statement-cards-wrapper.problem-statement-owl .owl-item .problem-statement-card {
        height: 100%;
    }

    .problem-statement-cards-wrapper.problem-statement-owl
    .problem-statement-card .problem-statement-card-content {
        padding: 9.5% 6% 22% 6.4%; 
    }
    .problem-statement-cards-wrapper.problem-statement-owl
    .problem-statement-card-content h3 {
        width: 91.1%;                
        margin-bottom: 7.5%;       
        font-size: 2.4vw !important; 
		font-weight: 600 !important; 
    }
    .problem-statement-cards-wrapper.problem-statement-owl
    .problem-statement-card-content p {
        width: 93.2%;        
    }

   
    .problem-statement-cards-wrapper.problem-statement-owl
    .problem-statement-card .problem-statement-btn {
        width: 48.9%;              
        height: 6.23vw;             
        min-height: 44px;
        font-size: 1.87vw;        
        border-radius: 12px 0 4px 0;
    }

  
    .problem-statement-cards-wrapper.problem-statement-owl .owl-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 32px;
        margin-top: 4%;
        padding-bottom: 4.9%;      
    }

    .problem-statement-cards-wrapper.problem-statement-owl .owl-dots .owl-dot {
        border: 2px solid var(--adro-electric-green) !important;
    }
    .problem-statement-cards-wrapper.problem-statement-owl .owl-dots .owl-dot.active {
        background-color: var(--adro-electric-green) !important;
    }
}

.hackathon-svg-bg-wrapper {
    position: relative;
}

@media (max-width: 767px) {
    .hackathon-svg-bg-wrapper {
        background-image: url('/wp-content/uploads/2026/07/MOBILE%20MID%20SEC%20BG%20ORB%202.svg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }
    .hackathon-svg-bg-wrapper > * {
        position: relative;
        z-index: 1;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .hackathon-svg-bg-wrapper {
        background-image: url('/wp-content/uploads/2026/07/MOBILE%20MID%20SEC%20BG%20ORB.svg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }
    .hackathon-svg-bg-wrapper > * {
        position: relative;
        z-index: 1;
    }
}


@media (min-width: 1025px) {
    .hackathon-svg-bg-wrapper {
        background-image: url('https://website-qa.adrosonic.com/wp-content/uploads/2026/08/FINAL%20HACKATHON%20WEBPAGE%20%281%29.svg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }
    .hackathon-svg-bg-wrapper > * {
        position: relative;
        z-index: 1;
    }
}
@media (orientation: landscape) {
    .hackathon-svg-bg-wrapper {
        background-image: url('https://website-qa.adrosonic.com/wp-content/uploads/2026/08/FINAL%20HACKATHON%20WEBPAGE%20%281%29.svg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }
    .hackathon-svg-bg-wrapper > * {
        position: relative;
        z-index: 1;
    }
}

/* Industry  */

/* Desktop */
@media screen and (min-width: 1025px) {
body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) .our-industry-container .card-column--left > .card {
        border: 2px solid var(--adro-electric-green, #23E4BA) !important;
    }
}

/* Tablet (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
body:is(.page-id-41080, .page-id-41420, .page-id-41548 , .page-id-41604) .our-industry-container .card.active {
        border-color: var(--adro-electric-green, #23E4BA) !important;
    }
}

/* Mobile */
@media screen and (max-width: 767.5px) {
    body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) .our-industry-container .card.active {
        border-color: var(--adro-electric-green, #23E4BA) !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583) .our-industry-container .card .icon-container {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Closed cards — collapse the hidden icon's width so the title moves left */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583) .our-industry-container .card:not(.active) .icon-container {
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}


@media screen and (max-width: 767.5px) {
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583) .our-industry-container .card .icon-container {
        visibility: hidden !important;
        opacity: 0 !important;
    }



    /* STEP A — give the closed card its own intrinsic width instead of inheriting
       one from the column. Figma: 342px on a 390px phone → 342 ÷ 390 = 87.69vw.
       This is what the icon-container used to supply, so collapsing it no longer
       shrinks the card, and the card can't overshoot its column either. */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) {
        width: 87.69vw !important;
        max-width: 87.69vw !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }

    /* STEP B — only now is it safe to collapse the hidden icon's box,
       so card-title can claim the full Figma 236px text width */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) .icon-container {
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}


@media screen and (min-width: 1025px) {
   body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) .our-industry-container .card-column--left .card .icon-container {
        display: none !important;
    }
}


/* ---------- DESKTOP (card-column--left) ---------- */
@media screen and (min-width: 1025px) {
   body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) .our-industry-container .card-column--left .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
/*         gap: 5% !important; */
    }

    body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) .our-industry-container .card-column--left .card .card-desc {
      
        transform: none !important;
        translate: none !important;
        width: 84% !important;
        text-align: left !important;
        left: auto;
        margin-bottom: 5.5%;
    }
	body:is(.page-id-41080, .page-id-41420, .page-id-41555 , .page-id-41583) .our-industry-container .card-column--left .card .card-title{
		text-align: left;
        top: 1.4%;
        left: 38%;
        margin-top: 0%;
        padding-left: 8%;
        position: relative;
		justify-content: left;
		font-size:2.92vw !important;	
        width: 90.8% !important;
        aspect-ratio: 804 / 130 !important;
		font-weight:600 !important;
    }
	
}
/* ---------- TABLET (768px - 1024px) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Active-card content slide-up. Only transform + opacity animate, and neither
       participates in layout — so this cannot bring the jump back. That came from
       the plugin's percentage margin-top / top being re-resolved against the card's
       height while it was still animating. 0.8s ease-out matches the plugin's own
       inline transition on the card. */
    @keyframes prizeContentRise {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
            .our-industry-container .card.active .card-title.industry-title-font,
        body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
            .our-industry-container .card.active .card-desc {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }

    /* Description alignment — one rule for both columns */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card .card-desc {
        text-align: left;
    }

    /* ACTIVE card box —  */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active {
        aspect-ratio: 368 / 288 !important; 
        height: auto !important;
        min-height: auto !important;       
        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding: 0 7.61% 6.79% !important;   /* 28px sides (368 − 312 = 56) + 25px bottom */
        gap: clamp(8px, 1.08vw, 10px) !important;   /* Figma 9px title → description */
        overflow: hidden !important;
    }

    /* ACTIVE title — Figma 312 × 62, Montserrat 24 / 600 / line-height 28 (= 1.1667).
       Every plugin offset is neutralised here; the box is plain flow so its
       height comes from the text alone. */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active .card-title.industry-title-font {
        display: block !important;
        width: 100% !important;              /* = 312px inside the padded card */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;                /* kills the plugin's negative margin-top */
        padding: 0 !important;
        position: static !important;         /* kills the plugin's position offsets */
        top: auto !important;
        right: auto !important;
        overflow: visible !important;
        animation: prizeContentRise 0.8s ease-out both;
                                          
        text-align: left !important;
        font-size: clamp(20px, 2.88vw, 24px) !important;
        font-weight: 600 !important;
        line-height: 1.1667 !important;      /* 28 ÷ 24 */
        flex: 0 0 auto !important;
        flex-basis: auto !important;
    }

    /* ACTIVE description — Figma 312 × 119, Montserrat 16 / 400 / normal.
       Width and the 25px bottom gap come from the card's padding, so the
       plugin's own side margins (18.375 / 17.25) are cleared. */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active .card-desc {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        animation: prizeContentRise 0.8s ease-out both;
        font-size: clamp(14px, 1.92vw, 16px) !important;
        font-weight: 400 !important;
        line-height: normal !important;
        flex: 0 0 auto !important;
        flex-basis: auto !important;
    }

    /* The hidden icon must not take vertical space in the column layout,
       otherwise it pushes the bottom-anchored block up */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active .icon-container {
        display: none !important;
    }

    /* Closed card title — 18px / 500 */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583) .our-industry-container .card:not(.active) .card-title.industry-title-font {
        font-size: clamp(16px, 2.16vw, 18px) !important;
        font-weight: 500 !important;
    }

    /* Closed card title — alignment + Figma 41px left inset (41 ÷ 368 ≈ 11.14%) */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) .card-title.industry-title-font {
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        line-height: 1.33 !important;
        padding-left: 11.14% !important;
        box-sizing: border-box !important;
    }
}



/* ---------- MOBILE (up to 767px) ---------- */
@media screen and (max-width: 767px) {


    /* Description — one rule for both columns (the old per-column
       padding-bottom: 18% / 2% was the reason the bottom gap differed) */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card .card-desc {
        text-align: left;
    }

    /* Active card title.
       line-height: Figma's 40px on 24px text (1.667) is leading baked into a
       single-line box — as soon as the title wraps, that 16px lands *between*
       the lines and reads far too loose. 1.25 sits between the desktop active
       title (65 ÷ 56 = 1.16) and the phone closed title (22.304 ÷ 16 = 1.394).
       margin-bottom: tightening the line-height removes the ~8px of leading
       that used to sit under the glyphs, so Figma's 4px gap is re-expressed as
       the ~12px it actually reads as. clamp keeps it sane from 320px to 430px. */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active .card-title.industry-title-font {
        display: block !important;           /* plain flow — a flex box with a constrained
                                                height lets the text overflow onto the desc */
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;                /* gap now comes from the card's `gap` */
        padding: 0 !important;
        position: static !important;         /* plugin uses position + offsets on this element */
        transform: none !important;          /* plugin also lifts it with translateY */
        overflow: visible !important;
        flex-basis: auto !important;         /* stop the flex column deriving a height from
                                                anything other than the text itself */
        text-align: left !important;
        font-size: clamp(20px, 6.15vw, 24px) !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        flex: 0 0 auto !important;           /* never let the column shrink it below its text */
    }

    /* Active card description — width and all three gaps now come from the
       card's own padding (see the active-card box rule), so nothing is
       positioned per card. Figma: 342 − 2 × 23 = 296 ≈ 295px */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active .card-desc {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        position: static !important;         /* plugin offsets this one too */
        transform: none !important;
        flex: 0 0 auto !important;           /* same reason as the title — the card is a flex
                                                column, so a child without this gets squeezed
                                                and its text spills over the neighbour */
        flex-basis: auto !important;
    }

    /* The hidden icon must not occupy vertical space in the column layout,
       otherwise it pushes the bottom-anchored title + description block up */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active .icon-container {
        display: none !important;
    }

    /* Closed card title — Figma: 44px left inset + 236.054 × 44.609 text box, vertically centred.
       44 ÷ 342 = 12.87% padding-left;  (44 + 236.054) ÷ 342 = 81.89% total border-box width;
       line-height 22.304 ÷ 16 = 1.394 */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) .card-title.industry-title-font {
        font-size: clamp(14px, 4.1vw, 16px) !important;
        font-weight: 500 !important;
        line-height: 1.394 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;          /* was -8% — this is what pushed text off the card */
        padding-left: 12.87% !important;
        width: 81.89% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        aspect-ratio: auto !important;
        box-sizing: border-box !important;
    }
}

/* ---------- DESKTOP-ONLY GRADIENT BORDER — Our Industry / Prizes (Hackathon page) ---------- */
@media screen and (min-width: 1025px) {

    /* Hide icons on both columns (desktop) */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card-column--left .card .icon-container,
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card-column--right .card .icon-container {
        display: none !important;
    }

    /* LEFT big card — keeps its own dark radial fill; gradient border via border-box.
       (This card owns its background, so the padding-box/border-box method is correct here.) */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card-column--left > .card {
        border: 2px solid transparent !important;
        border-radius: 20px !important;
        background:
            radial-gradient(50% 50% at 50% 50%,
                rgba(0, 204, 255, 0.05) 0%,
                rgba(0, 102, 128, 0.01) 100%) padding-box,
            radial-gradient(50% 65.83% at 50% 50%,
                #1c638d 16.5%,
                #1b4466 100%) padding-box,
            linear-gradient(180deg, #23E4BA 0%, #00CCFF 100%) border-box !important;
    }
/* RIGHT cards — keep the plugin's background untouched.
       Ring is drawn on ::after because the plugin already uses ::before. */
    /* keep position + radius on ALL right cards (needed for the ::after ring) */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card-column--right .card {
        position: relative !important;
        border-radius: 20px !important;
    }

    /* gradient tint ONLY on closed right cards; active keeps its image */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card-column--right .card:not(.active) {
        --bg-image: none !important;
        background: linear-gradient(180deg,
            rgba(35, 228, 186, 0.10) 0%,
            rgba(0, 204, 255, 0.10) 100%) !important;
    }

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card-column--right .card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: 20px !important;
        padding: 2px !important;                 /* border thickness */
        background: linear-gradient(180deg, #23E4BA 0%, #00CCFF 100%) !important;
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0) !important;
                mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0) !important;
        -webkit-mask-composite: xor !important;
                mask-composite: exclude !important;
        pointer-events: none !important;
        z-index: 3 !important;
    }
}

/* ---------- HACKATHON — Prizes: active left-card title box (Desktop) ---------- */
/* Figma: 804 × 130 box, Montserrat 56/600, line-height 65, text bottom-aligned,
   27px down to the description. Values in vw so they track the existing
   font-size: 2.92vw on the same element (both resolve against the 1920 frame). */
@media screen and (min-width: 1025px) {

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card-column--left .card .card-title.industry-title-font {

        /* give the box its real 130px height instead of letting it collapse to ~40px */
        aspect-ratio: auto !important;
        height: 6.77vw !important;            /* 130 ÷ 1920 */
        min-height: 6.77vw !important;
        max-height: none !important;
        flex-shrink: 0 !important;

        /* bottom-align the text inside that box */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: stretch !important;

        line-height: 1.1607 !important;        /* 65 ÷ 56 → 65px at the 2.92vw size */

        /* relative nudges were compensating for the broken box — not needed now */
        top: 0 !important;
    

        margin-bottom: 1.406vw !important;     /* 27 ÷ 1920 */
    }

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card-column--left .card .card-desc {
        margin-top: 0 !important;
        line-height: normal !important;    /* Figma: normal. Was ~49.8px (~2.07) */
    }
}

/* ---------- TABLET — Prizes gradient border + state bg  ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card {
        position: relative !important;
        border-radius: 20px !important;
    }

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: 20px !important;
        padding: 2px !important;                       
        background: linear-gradient(180deg, #23E4BA 0%, #00CCFF 100%) !important;
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0) !important;
                mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0) !important;
        -webkit-mask-composite: xor !important;
                mask-composite: exclude !important;
        pointer-events: none !important;
        z-index: 3 !important;
    }

    /* CLOSED cards → hide plugin photo, show Figma gradient fill */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) {
        --bg-image: none !important;
        background: linear-gradient(180deg,
            rgba(35, 228, 186, 0.10) 0%,
            rgba(0, 204, 255, 0.10) 100%) !important;
    }
	
	    /* Closed-card toggle arrow → Electric green + 24px right inset (24 ÷ 368 ≈ 6.52%) */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) .toggle-arrow {
        color: var(--adro-electric-green, #23E4BA) !important;
        margin-left: auto !important;
        margin-right: 6.52% !important;
        flex-shrink: 0 !important;
    }
}

/* ---------- PHONE  — Prizes gradient border + state bg  ---------- */
@media screen and (max-width: 767px) {

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card {
        position: relative !important;
        border-radius: 15px !important;              
    }

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: 15px !important;              
        padding: 1.859px !important;                  
        background: linear-gradient(180deg, #23E4BA 0%, #00CCFF 100%) !important;
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0) !important;
                mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0) !important;
        -webkit-mask-composite: xor !important;
                mask-composite: exclude !important;
        pointer-events: none !important;
        z-index: 3 !important;
    }

    /* CLOSED cards → hide plugin photo, show Figma gradient fill + lock the 342 × 80 shape */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) {
        --bg-image: none !important;
        background: linear-gradient(180deg,
            rgba(35, 228, 186, 0.10) 0%,
            rgba(0, 204, 255, 0.10) 100%) !important;
        aspect-ratio: 342 / 80 !important;
        height: auto !important;
        min-height: 0 !important;
    }
	
	    /* Closed-card toggle arrow → Electric green + 22.3px right inset (22.3 ÷ 342 ≈ 6.52%) */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) .toggle-arrow {
        color: var(--adro-electric-green, #23E4BA) !important;
        margin-right: 6.52% !important;
        flex-shrink: 0 !important;
    }

    /* ACTIVE card → Figma 342 × 288, same intrinsic-width approach as the
       closed card so it never depends on the column's content width.
       padding 23px (23 ÷ 390 = 5.9vw) is what supplies the description's
       23px left / right / bottom gaps and its 296px width in one go. */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active {
        width: 87.69vw !important;           /* 342 ÷ 390 — matches the closed card */
        max-width: 87.69vw !important;
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 73.85vw !important;      /* 288 ÷ 390 — Figma height as a floor, not a ceiling.
                                                A hard aspect-ratio clips the longest title on
                                                narrow phones (iPhone SE / small Android); this
                                                keeps the Figma proportion and still grows if a
                                                title wraps to a third line. */
        flex: 0 0 auto !important;
        align-self: center !important;
        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;  /* title + desc anchored to the bottom;
                                                  spare space collects above, so the
                                                  title may wrap to any number of lines
                                                  without moving the description */
        align-items: flex-start !important;
        padding: 0 5.9vw 5.9vw !important;     /* 23px sides + 23px bottom */
        gap: clamp(12px, 3.6vw, 16px) !important;  /* title → description.
                                                      Lives on the card, not on the title's
                                                      margin, so no plugin margin rule on
                                                      either child can collapse it. */
        overflow: hidden !important;               /* keeps any stray overflow inside the
                                                      rounded corners instead of over the
                                                      neighbouring card */
    }

    /* Active card ring → Figma 2px (closed card stays at 1.859px) */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active::after {
        padding: 2px !important;
    }
}

/* ---------- HACKATHON — Prizes: tablet landscape follows tablet portrait ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container {
        width: 90.4% !important;
    }

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .section-central-heading {
        text-align: center !important;
        padding-bottom: 5.34% !important;
    }

    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card {
        aspect-ratio: 23 / 6 !important;
    }

    /* Closed cards only — on an active card this 31/8 box constrains the title's
       height, so a wrapped title overflows onto the description */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card:not(.active) .card-title {
        aspect-ratio: 31 / 8 !important;
    }

    /* plugin forces 210px / 240px here in landscape only — it overrides the
       aspect-ratio and pushes the description out of the card */
    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .card.active {
        aspect-ratio: 23 / 18 !important;
        min-height: 0 !important;
    }



    body:is(.page-id-41080, .page-id-41420, .page-id-41555, .page-id-41583)
        .our-industry-container .icon-container {
        width: 18.7% !important;
        margin: 2.4% !important;
    }
}

/* AGENDA — Sequential scroll-triggered focus/pulse animation    */

@media screen and (min-width: 768px) {

    @keyframes agendaFocusPulse {
        0%   { transform: translateY(0)      scale(1);    }
       	45%  { transform: translateY(-6px)   scale(1.07); }
        100% { transform: translateY(0)      scale(1);    }
    }

    /* Card is the inner .content — transform origin centered so it grows in place */
    .svg-background-section .timeline-item .content {
        transform-origin: center center;
        will-change: transform;
    }

    /* When JS marks the item as active, run the pulse once */
    .svg-background-section .timeline-item.agenda-focus > .content {
        animation: agendaFocusPulse 1.2s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svg-background-section .timeline-item.agenda-focus > .content {
        animation: none !important;
    }
}
@media screen and (min-width: 1366px) and (max-width: 1536px) {
	.our_expertise_container {
		padding-right:  2.37% ;
	}
}
/* ============================================================
   SHORTLISTING SECTION (hardcoded — mirrors Problem Statement's
   empty-state look: heading + single message line, no cards)
   ============================================================ */
.shortlisting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;

    .section-central-heading {
        width: 100%;

        h2 {
            margin: 0;
            text-align: left;
            padding-left: 3.34%;
            padding-bottom: 2.5%;
			padding-top:8%;

            @media (max-width: 1024px) and (orientation: portrait) {
                text-align: left !important;
            }
            @media (max-width: 768px) {
                text-align: left !important;
				                padding-left: 6.15%;
            }
        }
    }

    .shortlisting-empty-msg {
        display: flex;
        width: 93.3%;
        aspect-ratio: 1792 / 78;
        flex-direction: column;
        font-size: 1.7vw;
        color: var(--ADROSONIC-Electric-green, #23E4BA) !important;
    }
}

@media (max-width: 768px) {
    .shortlisting-section .shortlisting-empty-msg {
        font-size: 4.62vw;
/*         padding: 0 6.2% 13% 6.2%; */
		padding-left: 3.15%;
        padding-right: 3.15%;
        text-align: left;
		padding-bottom: 6%
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .shortlisting-section .shortlisting-empty-msg {
        text-align: left;
    }
    .shortlisting-section {
        padding: 5% 0 0;
    }
}

@media screen and (max-width: 767.5px) {
    .shortlisting-section {
        padding: 8.2% 0 0;
    }
}

/* Spacer below Shortlisting — follows existing spacer pattern */
.spacer-after-shortlisting { height: 8vh; }

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .spacer-after-shortlisting { height: 6.5vh; }
}

@media screen and (max-width: 767.5px) {
    .spacer-after-shortlisting { height: 5vh; }
}
@media (max-width: 767px) {
  .our-industry-container .section-central-heading {
    padding-left: 4%;
    padding-right: 4%;
  }
}