/* ============================================
   THEME COLOR VARIABLES
   Change this value to update the accent color
   ============================================ */
:root {
  --primary-color: #BBF7D0;
}

/* Additional CSS styling elemenets */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-light-webfont.woff2') format('woff2');
    size-adjust: 105%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-regular-webfont.woff2') format('woff2');
    size-adjust: 105%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-medium-webfont.woff2') format('woff2');
    size-adjust: 105%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-semibold-webfont.woff2') format('woff2');
    size-adjust: 105%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-bold-webfont.woff2') format('woff2');
    size-adjust: 105%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}
/* Locally hosted Google Fonts replacements */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-Italic.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 100%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 100%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Override FontAwesome font-display for faster rendering */
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
}

/* Override icon fonts with font-display: swap */
@font-face {
  font-family: 'tri-o';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('../fonts/tri-o.woff') format('woff');
}

/* Add 2px black lines at top and bottom of header */
.header-area-wrapper {
    border-top: 2px solid #000000 !important;
    border-bottom: 2px solid #000000 !important;
}

/* Ensure sticky header also has the framing */
.header-area-wrapper.sticky-header.sticky {
    border-top: 2px solid #000000 !important;
    border-bottom: 2px solid #000000 !important;
}

/* Logo styling */
.logo-style {
    height: 40px;
}

/* Menu item hover effect with slanted green semitransparent box */
.dropdown-navbar {
    position: relative !important;
    margin: 0 5px !important;
}

.dropdown-navbar a {
    position: relative !important;
    z-index: 3 !important;
    transition: color 0.3s ease !important;
    padding: 15px 15px;
    display: block !important;
}

/* Create the slanted green semitransparent background */
.dropdown-navbar::before {
    content: '' !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    width: calc(100% + 0px) !important;
    height: calc(100% + 0px) !important;
    background-color: color-mix(in srgb, var(--primary-color) 50%, transparent) !important;
    transform: skewX(-15deg) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    z-index: 1 !important;
}

/* Show the slanted box on hover */
.dropdown-navbar:hover::before {
    opacity: 1 !important;
}

/* Change text color on hover for better contrast */
.dropdown-navbar:hover a {
    color: #000000 !important;
}

/*
@media only screen and (min-width: 1124px) and (max-width: 1299px), only screen and (min-width: 1200px) and (max-width: 1599px) {
    .dropdown-navbar {
        min-width: auto;
        line-height: 0.3;
        margin: 0 2px; 
    }
    .dropdown-navbar a {
        padding: 8px 1px !important; 
        font-size: 15px !important;
    }
 }

 @media only screen and (min-width: 992px) and (max-width: 1123px), only screen and (min-width: 992px) and (max-width: 1123px) {
    .dropdown-navbar {
        min-width: auto;
        line-height: 0.3;
        margin: 0 2px; 
    }
    .dropdown-navbar a {
        padding: 8px 1px !important; 
        font-size: 15px !important;
    }
 }*/

/* Make mobile menu bars icon black */
.mobile-menu {
    color: #000000 !important;
}

.mobile-menu i.fa-bars {
    color: #000000 !important;
    font-size: 1.7rem !important;
}

.page-header-share .share-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.page-header-share .share-item .share-label {
    color: #777777;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.page-header-share .share-item .share-link {
    color: #222222;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-header-share .share-item .share-link:hover,
.page-header-share .share-item .share-link:focus {
    color: var(--secondary-color);
}

.cart-button {
        font-size: 1.7rem !important;
}

.cart-button:hover {
    color: #64e656 !important;
}

/*.logo-wrap {
    padding-left: 0%;
    padding-right: 10%;
}*/
.hero-content-overlay {
    position: absolute;
    top: 9%;
    left: 35%;
    text-align: center;
    color: white;
    z-index: 10;
    padding: 1rem;
    background: rgba(255,255, 255.0, 0.75);
    border-radius: 0px;
    backdrop-filter: blur(5px);
    width: 40vw;
    min-width: 260px;
    max-width: 90vw;
}

/* Medium screens (tablets) - hide image to reduce height */
@media (max-width: 1800px) and (min-width: 1201px) {
    .hero-content-overlay {
        left: 56%;
        top: 9%;
        transform: translateX(-50%);
        padding: 1rem;
        width: 48vw;
        max-height: 350px;
        overflow: hidden;
        
    }
    .cart-button {
        font-size: 1.4rem !important;
    }
}

/* Medium screens (tablets) - hide image to reduce height */
@media (max-width: 1200px) and (min-width: 769px) {
    .hero-content-overlay {
        left: 50%;
        top: 10%;
        transform: translateX(-50%);
        padding: 1.5rem;
        width: 65vw;
        max-height: 300px;
        overflow: hidden;
    }
    .hero-content-overlay .d-none.d-md-block {
        display: none !important;
    }
    .bg-img {
        height: 420px;
    }
    .cart-button {
        font-size: 1.3rem !important;
    }
}

/* Small tablets and large phones */
@media (max-width: 768px) and (min-width: 601px) {
    .hero-content-overlay {
        left: 50%;
        top: 12%;
        transform: translateX(-50%);
        padding: 1.5rem;
        width: 80vw;
        max-height: 250px;
        overflow: hidden;
    }
    .hero-content-overlay .d-none.d-md-block {
        display: none !important;
    }
    .bg-img {
        height: 420px;
    }
    .cart-button {
        font-size: 1.7rem !important;
    }
}

/* Mobile phones */
@media (max-width: 600px) {
    .hero-content-overlay {
        left: 50%;
        top: 14%;
        transform: translateX(-50%);
        padding: 1rem;
        width: 95vw;
        min-width: unset;
        border-radius: 8px;
        max-height: 280px;
        overflow: hidden;
    }
    .cart-button {
        font-size: 1.7rem !important;
    }
    .bg-img {
        height: 420px;
    }
}

.hero-content-overlay h1 {
    color: #000000;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-content-overlay p {
    color: #000000;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.hero-btn {
    background: #764ba2;
    border: none;
    color: #fff;
    padding: 5px 30px;
    font-size: 1.1rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-btn:visited {
    color: #fff;
}

.hero-btn:hover {
    background: #38234d;
    border: none;
    color: #fff;
    padding: 5px 30px;
    font-size: 1.1rem;
}

/*.logo-wrap {
    padding-left: 6%;
    padding-right: 18%;
}*/

/* Expertise interactive cards */
.expertise-grid {
    row-gap: 0px;
}

.expertise-card {
    position: relative;
    border-radius: 0px;
    overflow: visible;
    padding: 10px 0px 10px 0px;
    transition: opacity 0.3s ease;
    margin-bottom: 6px;
}

.expertise-card .desc-number {
    font-size: 28px;
    font-weight: 600;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #232323;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    background: #fff;
    z-index: 2;
}

.expertise-card .busi-fea-info {
    position: relative;
    z-index: 2;
    padding-right: 4px;
}

.expertise-card .busi-fea-info h3 {
    text-transform: uppercase;
    font-size: 17.5px;
}

@media (min-width: 992px) {
    .expertise-grid {
        row-gap: 0;
    }

    .expertise-card {
        cursor: pointer;
        padding: 0px 0px 0px 0px;
        margin-bottom: 0px;
    }

    .expertise-card::before {
        content: '';
        position: absolute;
        top: -5%;
        left: -100%;
        right: -100%;
        bottom: -5%;
        background: #d9d9d9;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Individual clip-paths for each expertise item - thought bubble style */
    /* Left side items - pointer extends right toward center circle */
    /* Card occupies 33.33% to 66.67% of the extended canvas */
    .expertise-card--1::before {
        clip-path: polygon(33.33% 0, 68.67% 0, 68.67% 50%, 78% 100%, 68.67% 90%, 68.67% 100%, 33.33% 100%);
    }

    .expertise-card--2::before {
        clip-path: polygon(33.33% 0, 67% 0, 67% 23%, 72% 50%, 67% 77%, 67% 100%, 33.33% 100%);
    }

    .expertise-card--3::before {
        clip-path: polygon(33.33% 100%, 68.67% 100%, 68.67% 50%, 78% 0%, 68.67% 10%, 68.67% 0%, 33.33% 0%);
    }

    /* Right side items - pointer extends left toward center circle */
    .expertise-card--4::before {
        clip-path: polygon(31.33% 0, 66.67% 0, 66.67% 100%, 31.33% 100%, 31.33% 90%, 22% 100%, 31.33% 50%);
    }

    .expertise-card--5::before {
        clip-path: polygon(33% 0, 66.67% 0, 66.67% 100%, 33% 100%, 33% 77%, 28% 50%, 33% 23%);
    }

    .expertise-card--6::before {
        clip-path: polygon(31.33% 100%, 66.67% 100%, 66.67% 0%, 31.33% 0%, 31.33% 10%, 22% 0%, 31.33% 50%);
    }

    .expertise-card:hover::before,
    .expertise-card.is-active::before {
        opacity: 0.85;
    }

    .expertise-display {
        position: relative;
        max-width: 360px;
        margin: 0 auto;
        padding: 0;
        border-radius: 50%;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
        z-index: 10;
    }

    .expertise-display img {
        width: 100%;
        border-radius: 50%;
        transition: opacity 0.35s ease;
    }
}

@media (max-width: 991px) {
    .expertise-display {
        max-width: 320px;
        margin: 0 auto 40px;
        text-align: center;
    }

    .expertise-display img {
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    .expertise-card {
        background: #f5f5f5;
    }
}

/* Justify text in privacy policy content */
.privacy-content p {
    text-align: justify;
}

.text-justify {
    text-align: justify;
}

/* Restore bullets for lists in privacy policy */
.privacy-content ul:not(.list-unstyled) {
    padding-left: 20px;
    margin-bottom: 15px;
}

.privacy-content ul:not(.list-unstyled) li {
    list-style: disc;
    margin-bottom: 5px;
}

/* Juxtapose slider responsiveness */
.juxtapose {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.juxtapose .jx-slider {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure figure container doesn't overflow */
figure.port-details-thumb-item {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 991px) {
    .juxtapose {
        max-width: 100% !important;
    }
}

.juxtapose-title {
    position: absolute;
    padding: 0.22rem 0.42rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: none;
    z-index: 30;
    pointer-events: none;
    border-radius: 4px;
    color:#dddddd /*C9F9D9 */
}

.juxtapose-title--tl { top: 0px; left: 0px; text-align: left; }
.juxtapose-title--tc { top: 0px; left: 50%; transform: translateX(-50%); text-align: center; }
.juxtapose-title--tr { top: 0px; right: 0px; text-align: right; }
.juxtapose-title--bl { bottom: 0px; left: 0px; text-align: left; }
.juxtapose-title--bc { bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; }
.juxtapose-title--br { bottom: 0px; right: 0px; text-align: right; }

/* Figure-specific caption overrides */
figure .juxtapose-title {
    background: rgba(220, 220, 220, 0.65);
    color: #111;
    border-radius: 0;
    font-size: 0.6rem;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Center-aligned figure captions */
figure .juxtapose-title--tc,
figure .juxtapose-title--bc {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* Left-aligned figure captions */
figure .juxtapose-title--tl,
figure .juxtapose-title--bl {
    left: 0;
    text-align: left;
}

/* Right-aligned figure captions */
figure .juxtapose-title--tr,
figure .juxtapose-title--br {
    right: 0;
    left: auto;
    text-align: right;
}

@media (max-width: 768px) {
    .juxtapose-title {
        font-size: 0.75rem;
        padding: 0.2rem 0.35rem;
    }

    .juxtapose-title--tl,
    .juxtapose-title--tr {
        top: 0px;
    }

    .juxtapose-title--bl,
    .juxtapose-title--br {
        bottom: 0px;
    }
}

@media (max-width: 480px) {
    .juxtapose-title {
        font-size: 0.68rem;
        padding: 0.17rem 0.27rem;
        border-radius: 3px;
    }

    .juxtapose-title--tl,
    .juxtapose-title--tr,
    .juxtapose-title--tc {
        top: 0px;
    }

    .juxtapose-title--bl,
    .juxtapose-title--br,
    .juxtapose-title--bc {
        bottom: 0px;
    }
}

/* ============================================
   TEXT ALIGNMENT UTILITIES
   ============================================ */
.m-0 {
    text-align: left;
}

.text-justify {
    text-align: justify;
}

/* ============================================
   TEAM MEMBER STYLING
   ============================================ */
.team-member-area-wrapper .speaker-info .designation,
.team-member-area-wrapper .speaker-info .text-justify {
    font-size: 16px;
}

/* ============================================
   IMAGE CROSSFADE EFFECT
   - Chrome iOS compatible version
   ============================================ */
.image-crossfade {
    position: relative;
    display: block;
    overflow: hidden;
}

/* First image sets the container size and is always in flow */
.image-crossfade .crossfade-img:first-child {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
}

/* Second image overlays the first with absolute positioning */
.image-crossfade .crossfade-img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover;
    object-fit: cover;
    opacity: 0;
}

/* Base transition for all crossfade images */
.image-crossfade .crossfade-img {
    -webkit-transition: opacity 0.8s ease-in-out !important;
    -moz-transition: opacity 0.8s ease-in-out !important;
    -o-transition: opacity 0.8s ease-in-out !important;
    transition: opacity 0.8s ease-in-out !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Active image is visible - use !important to ensure it applies */
.image-crossfade .crossfade-img.crossfade-img--active {
    opacity: 1 !important;
}

/* --- Overlay mode: base image always visible, overlay fades in/out --- */
/* Class added by JS for maximum iOS compatibility (attribute selectors can be unreliable) */
.image-crossfade.crossfade-overlay,
.image-crossfade[data-overlay="true"] {
    /* Isolate compositing so layers don't leak into parent */
    isolation: isolate;
}

.image-crossfade.crossfade-overlay .crossfade-img:first-child,
.image-crossfade[data-overlay="true"] .crossfade-img:first-child {
    opacity: 1 !important;
    /* No transition — base must be rock-solid, never animate */
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
    /* Own GPU layer to prevent re-composite bleed */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.image-crossfade.crossfade-overlay .crossfade-img:nth-child(2),
.image-crossfade[data-overlay="true"] .crossfade-img:nth-child(2) {
    opacity: 0;
    /* No CSS transition — JS drives opacity via rAF */
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
    /* Own compositing layer */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity;
}

/* ============================================
   CUSTOM X (TWITTER) ICON
   ============================================ */
.fa-x::before {
    content: "𝕏";
    font-weight: 600;
    font-size: 1em;
}

/* ============================================
   SECTION TITLE ADJUSTMENTS
   ============================================ */
.section-title-wrap.layout--2 p {
    font-size: calc(1em + 2pt);
}

/* ============================================
   MOBILE EXPERTISE IMAGES
   Alternating image/card layout on phones
   ============================================ */
.expertise-mobile-img {
    max-width: 320px;
    margin: 20px auto;
}

.expertise-mobile-img img {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* ============================================
   HEADING-LEVEL FIXES
   Keep h2/h3 visually identical to old h3/h6
   after correcting the heading hierarchy.
   ============================================ */
.speaker-member-wrap .speaker-info h2 {
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.speaker-member-wrap .speaker-info h3.designation {
    color: #666;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 0;
}

.contact-info-wrap h2 {
    font-size: 1.375rem;
}

.contact-info-item h3 {
    font-size: 1.05rem;
}

/* ============================================
   TECHNOLOGY PAGE – FULL-WIDTH MEDIA ON MOBILE
   Override startup-banner-image constraints so
   videos & images span the full column on phones.
   ============================================ */
@media only screen and (max-width: 767px) {
    .single-post-details__body .startup-banner-image {
        max-width: 100%;
    }

    .single-post-details__body .startup-banner-image img,
    .single-post-details__body .startup-banner-image video {
        max-width: 100%;
        width: 100%;
    }
}

/* --- Blockquote left-align override --- */
.single-post-details__body .blockquote--2 {
    text-align: left;
}