/* GLOBAL */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
/* ================= HEADER ================= */

.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 114px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 130px;
    z-index: 1000;
}

.header-container {
    width: 898px;
    height: 82px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-radius: 32px;
    border: 1px solid #272835;
}
/* NAVIGATION */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .nav-menu a {
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        line-height: 155%;
        color: #F8FAFB;
        display: flex;
        align-items: center;
        padding: 4px 8px;
    }

.contact-btn {
    background: #CB0969;
    color: white !important;
    padding: 16px 24px;
    border-radius: 999px;
}
/* ================= HERO ================= */

.hero {
    position: relative;
    width: 100%;
    min-height: 804px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
    }

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 868px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.title-line1, .title-line2 {
    font-size: 82px;
    line-height: 120%;
    letter-spacing: -0.02em;
    margin: 0;
}

.title-line2 {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    background: linear-gradient(91deg, #FFFFFF 13%, #FF2C94 94%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* BUTTONS */

.button-group {
    display: flex;
    gap: 16px;
}

.explore-btn, .book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border-radius: 32px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}

.explore-btn {
    border: 1px solid #F8FAFB;
    background: transparent;
    color: #FFFFFF;
}

.book-btn {
    background: #CB0969;
    color: #FFFFFF;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

    /* HEADER */
    .main-header {
        padding: 8px 16px;
        height: auto;
    }

    .header-container {
        width: 100%;
        height: 48px;
        padding: 8px 16px;
        border-radius: 32px;
    }

    .nav-menu {
        gap: 16px;
    }

        .nav-menu a {
            font-size: 14px;
            padding: 4px 6px;
        }

    .contact-btn {
        padding: 8px 16px;
        font-size: 14px;
    }


    /* HERO SECTION */

    .hero {
        min-height: 570px;
        padding: 80px 16px 56px;
    }

    .hero-content {
        max-width: 370px;
        gap: 24px;
    }

    .title-line1,
    .title-line2 {
        font-size: 42px;
        line-height: 120%;
    }


    /* BUTTONS */

    .button-group {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

    .explore-btn,
    .book-btn {
        width: 100%;
        height: 48px;
        border-radius: 32px;
        padding: 16px;
        font-size: 14px;
    }
}
/* ================= STATS SECTION ================= */

.stats-section {
    padding: 96px 130px;
}

.stats-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    gap: 32px;
}

.stat-item {
    flex: 1;
    padding-bottom: 16px;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
}

.stat-value {
    font-weight: 600;
    font-size: 56px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #CB0969;
}

.stat-title {
    font-weight: 600;
    font-size: 16px;
}

.stat-text {
    font-size: 14px;
    color: #6B7280;
}
/* ================= ABOUT SECTION ================= */

.block-section {
    width: 100%;
    padding: 96px 0px;
    display: flex;
    flex-direction: column;
}

.block-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* important for vertical alignment */
    gap: 229px;
    margin-top:56px;
    
}
/* LEFT IMAGES */

.about-left {
    display: flex;
    gap: 9px;
    align-self: flex-end; /* 👈 pushes images to bottom */
}

    .about-left img {
        width: 88px;
        height: 88px;
        border-radius: 4px;
        object-fit: cover;

    }
/* RIGHT CONTENT */

.block-right {
    max-width: 668px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.block-text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.block-heading {
    width: 668px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.02em; /* -2% */
    text-transform: capitalize;
    color: #0D0D12;
    margin: 0;
}

.block-highLight {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 82px;
    line-height: 120%;
    letter-spacing: -2%;
    text-align: center;
}
    /* Second styled part */

    .block-heading span {
        font-family: 'DM Serif Display', serif;
        font-weight: 400;
        font-style: italic;
        line-height: 140%;
    }

/* ===== ABOUT DESCRIPTION ===== */

.block-description {
    width: 668px;
    height: 104px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.02em; /* -2% */
    color: #36394A; /* text color */
}

.block-button {
    display: inline-block;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    color: #E6007E;
    border-bottom: 1px solid #E6007E;
    padding-bottom: 3px;
    width: fit-content;
}

/* ===== ABOUT SECTION ARROW FIX ONLY ===== */

.block-section .block-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color:#CB0969;
}

.block-section .btn-arrow {
    position: static; /* override absolute */
    width: 13.48px;
    height: 13.48px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(4500%) hue-rotate(323deg) brightness(94%) contrast(102%);
}

.client-logo-section {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 0px;
    border-top: 1px solid #E5E5E5;
}
.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: scrollLogos 25s linear infinite;
}

/*.client-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 72px;
}**/
 /*All logos same height */
.clientLogo {
    height: 79px;
    width: auto;
    max-width: 202px;
    object-fit: contain;
}
@keyframes scrollLogos {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
/* Service Section */
.service-section {
    background: #141414;
    padding: 96px 0px;
}


   
.service-container {
    width: 1180px;
    margin: 0 auto;
}
.whatWeDosection-header {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* exact figma gap */
    text-align: center;
}
.section-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #E91E63; /* use your primary pink */
}
.whatWeDosection-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.02em; /* -2% converted properly */
    text-transform: capitalize;
    margin: 0;
    color: #F8FAFB;
}
    .whatWeDosection-title .highlight {
        display: block;
        font-family: 'DM Serif Display', serif;
        font-weight: 400;
        font-style: italic;
        font-size: 40px;
        line-height: 140%;
        letter-spacing: -0.02em;
    }
.service-wrapper {
    max-width: 1180px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 57px;
}
.service-left {
    width: 428px;
    display: flex;
    flex-direction: column;
}
.service-list-item {
    width: 100%;
    min-height: 108px;
    padding: 16px;
    border-bottom: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: #888888;
    cursor: pointer;
    transition: 0.3s ease;
}
    .service-list-item.active {
        font-weight: 600;
        color: #CB0969; /* pink */
      
    }
.service-right {
    width: 695px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.service-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.service-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #B0B0B0;
}
.service-btn {
    width: fit-content; /* better for dynamic text */
    opacity: 1;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 155%;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #CB0969;
    text-decoration: none;
    border-bottom: 1px solid #CB0969;
    padding-bottom: 2px;
}
.service-bottom {
    width: 695px;
    height: 168px;
    display: flex;
    gap: 26px;
    align-items: center;
}
.service-image img {
    width: 228px;
    height: 152px;
    object-fit: cover;
    border-radius: 8px;
}
.service-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

    
.service-list-item.active::before {
    content: "";
    display: block;
    width: 39px;
    height: 0;
    border-top: 2px solid #CB0969;
    margin-top: 8px;
}
.service-content {
    display: none;
    flex-direction: column;
    gap: 32px; /* gap between top and bottom */
}

    .service-content.active {
        display: flex;
    }

.service-features {
    width: 404px;
    height:168px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .service-features li {
        width: auto;
        height: auto;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 400;
        font-size: 16px;
     
        gap:8px;
        line-height: 26px;
        letter-spacing: 0;
        display: flex;
        align-items: center;
        color: #FFFFFF;
    }
    .service-features li::before {
            content: "";
            width: 4px;
            height: 4px;
            background: #CB0969;
            
            left: 6px;
            top: 6px;
        }
.service-section .btn-arrow {
    position: static; /* override absolute */
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(4500%) hue-rotate(323deg) brightness(94%) contrast(102%);
}
/* MOBILE VIEW */
/* MOBILE VIEW */
@media (max-width: 430px) {

    .service-section {
        padding: 64px 0;
    }

    .service-container {
        width: 100%;
        padding: 0 16px;
    }

    /* wrapper */
    .service-wrapper {
        width: 100%;
        flex-direction: column;
        gap: 32px;
    }

    /* left list */
    .service-left {
        width: 100%;
    }

    .service-list-item {
        width: 100%;
        min-height: 80px;
        padding: 16px;
        border-bottom: 1px solid #F8FAFB;
        font-size: 24px;
    }

        /* collapsed item */
        .service-list-item:not(.active) {
            min-height: 56px;
        }

    /* right content */
    .service-right {
        width: 100%;
        padding: 16px 0;
    }

    /* service content */
    .service-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    /* top section */
    .service-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    /* bottom */
    .service-bottom {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    /* image */
    .service-image img {
        width: 100%;
        height: auto;
    }

    /* features */
    .service-features {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Portfolio Section */
.portfolio-section {
    width: 100%;
    background: #FFFFFF;
    padding: 96px 50px;
}

/* Container */
.portfolio-container {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* Header */
/* Portfolio Header */
.portfolio-header {
    width: 1180px; /* exact width from Figma */
    height: 133px; /* exact height */
    display: flex; /* to handle spacing between items */
    justify-content: space-between; /* use gap from Figma as spacing */
    gap: 315px; /* spacing between elements inside header */
    transform: rotate(0deg); /* angle */
    opacity: 1; /* visibility */
    margin: 0 auto; /* center the header in the container */
}
/* Left side */
.portfolio-title-wrapper {
    max-width: 432px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Small title */
.portfolio-small-title {
    color: #EE4096;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 155%;
}

/* Heading */
.portfolio-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    text-transform: capitalize;
    margin: 0;
}

    .portfolio-heading span {
        font-family: 'DM Serif Display', serif;
        font-style: italic;
    }

/* Description */
.portfolio-description {
    max-width: 433px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    color: #555;
}
.portfolio-images-wrapper {
    width: 1180px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}
portfolio-slider {
    display: flex; /* horizontal layout */
    gap: 24px; /* spacing between slides */
    transition: transform 0.5s ease; /* smooth sliding */
    will-change: transform; /* optimize for transform */
}

.portfolio-item {
    flex: 0 0 auto; /* prevent shrinking */
    width: 1180px; /* exact width of a slide */
}
/* WRAPPER */
/* WRAPPER */
.portfolio-item-wrapper {
    position: relative;
    width: 1180px;
    overflow: visible;
}

/* MAIN GRID */
.portfolio-item-container {
    width: 1180px;
    height: 408px;
    display: grid;
    grid-template-columns: 293px 562px 293px;
    grid-template-rows: 194px 194px;
    gap: 24px;
} 

/* SMALL LEFT IMAGE */
.small-left {
    grid-column: 1;
    grid-row: 2;
    width: 293px;
    height: 194px;
    border-radius: 8px;
    overflow: hidden;
}

/* BIG IMAGE */
.big-image {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 562px;
    height: 408px;
    border-radius: 8px;
    overflow: hidden;
}

/* RIGHT COLUMN */
.right-column {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 293px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* TEXT BLOCK */
.portfolio-text {
    width: 293px;
}
.portfolio-section .btn-arrow {
    position: static; /* override absolute */
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(4500%) hue-rotate(323deg) brightness(94%) contrast(102%);
}

/* SMALL RIGHT IMAGE */
.small-right {
    width: 293px;
    height: 194px;
    border-radius: 8px;
    overflow: hidden;
}

/* CAROUSEL IMAGE (outside container) */
.carousel-image {
    position: absolute;
    right: -317px; /* 293 width + 24 gap */
    bottom: 0;
    width: 293px;
    height: 194px;
    border-radius: 8px;
    overflow: visible;
}

    /* IMAGE FIT */
    .small-left img,
    .small-right img,
    .big-image img,
    .carousel-image img {.slick 
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /*TestimonialSection*/
    /*SEction Container*/
.testimonial-section {
    width: 100%;
    max-width: 1440px;
    padding: 96px 130px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*header*/
.testimonial-header {
    max-width: 1180px;
    height: 141px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* moves arrows to bottom */
    opacity: 1;
    margin-bottom: 40px;
}

/*title*/
.testimonial-small-title {
    width: 90px;
    height: 22px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 155%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
  color: #EE4096;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.testimonial-heading {
    width: 493px;
    height: 111px;
    gap:4px;
    margin:0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    opacity: 1;
}
.testimonial-heading .highlight {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 40px;
    line-height: 140%;
    letter-spacing: -0.02em;
    text-transform: capitalize;
}
/*slide container*/
.testimonial-slider {
    width: 100%;
    
}
/*testimonial layout*/
.testimonial-item {
    max-width: 1056px;
    min-height: 400px;
    flex-direction: row;
    
    display: flex;
    gap: 32px;
    align-items: center;
}/*image*/
.testimonial-image img {
    width: 400px;
    height: 400px;
    border-radius: 8px;
    object-fit: cover;
}
/*testimonial text*/
.testimonial-text-container {
    max-width: 622px;
    display: flex;
    flex-direction: column;
    /*gap: 32px;*/
}
.testimonial-text {
    max-width: 622px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #0D0D12;
}
/*client info*/
.client-info {
    max-width:68px;
    max-height:51px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.client-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 155%;
    letter-spacing: 0%;
    color: #0D0D12;
}
.client-role {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 155%;
    color: #6B6B6B;
}
.testimonial-image {
    flex-shrink: 0;
}

.testimonial-slider .slick-slide {
    display: flex !important;
    
}
.testimonial-arrows {
    width: 88px;
    height: 32px;
    display: flex;
    align-items: center;
   
    gap: 24px;
}
.prev-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.next-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.testimonial-slider .slick-list {
    overflow: visible;
}

.testimonial-slider .slick-track {
    display: flex;
}

.testimonial-slider .slick-slide {
    display: flex;
    height: auto;
    margin-right: 32px;
}

.testimonial-item {
    display: flex;
    gap: 32px;
    align-items: center;
    width: 100%;
}
/*CTA section*/
/* CTA Section */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=DM+Serif+Display:ital@1&display=swap');


/* HERO SECTION (Background Image) */

.hero-section {
    width: 100%;
    max-width: 1442px;
   /* height: 371px;*/
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}


/* CTA OVERLAY SECTION */

.cta-section {
    width: 100%;
    height: 100%;
    background: #3C0922DE;
    padding-top: 56px;
    padding-bottom: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* CTA CONTAINER */

.cta-container {
    width: 706px;
    
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}


/* TEXT WRAPPER */

.cta-text {
    width: 706px;
/* display:flex;*/
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
}


/* HEADING */

.cta-title {
    width: 706px;
  
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -2%;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
}


/* HIGHLIGHT TEXT */

.cta-highlight {
    display:block;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -2%;
    text-transform: capitalize;
    color: #ECEFF3;
}


/* DESCRIPTION */

.cta-description {
    width: 678px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: center;
    color: #FFFFFF;
}


/* CTA BUTTON */

.cta-button {
    width: 185px;
    height: 48px;
   background-color: #CB0969;
    border-radius: 56px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}


    /* BUTTON TEXT */

    .cta-button span {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 155%;
        color: #FFFFFF;
    }


    /* OPTIONAL ICON */

    .cta-arrow {
        width: 13.48px;
        height: 13.48px;
        color: #FFFFFF;
    }  
   /*News Section*/
/* NEWS SECTION */

.news-section {
    width: 100%;
    max-width: 1440px;
    padding: 96px 0px 96px 130px;
    margin: auto;
}

/* CONTAINER */

.news-container {
    max-width: 1180px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* HEADER */

.news-header {
    width: 493px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-title {
  
  
    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    font-weight: 400;
    line-height: 155%;
    text-align: center;
    color: #CB0969;
    
}

.section-heading {
    font-family: "Plus Jakarta Sans";
    font-size: 32px;
    font-weight: 600;
    margin-top:0;
}
.highlight {
    font-family: "DM Serif Display", serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
    text-transform: capitalize;
    vertical-align: middle;
}
/* ARTICLES GRID */

.news-articles {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 32px;
}
.news-label-icon {
    width: 16px;
    height: 16px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    .news-label-icon svg,
    .news-label-icon img {
        width: 12px;
        height: 13px;
        position: absolute;
        top: 1px;
        left: 2px;
        fill: #CB0969; /* icon color */
    }

/* CARD */

.news-card {
    width: 275px;
    /*height: 183px;*/
    display: flex;
    flex-direction: row;
    gap: 16px;
}

    .news-card img {
        width: 275px;
        height: 183px; 
        border-radius: 8px;
        object-fit: cover;
    }

/* META */

.news-meta {
    display: flex;
    gap: 16px;
    font-size: 14px;
}

/* TITLE */

.news-card h3 {
   width: 275px;
    height:58px;
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -2%;
    
}

/* BUTTON */

.news-button {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

    .news-button a {
        display: flex;
        gap: 8px;
        text-decoration: none;
        color: #CB0969;
        justify-content: center;
    }
.news-arrow {
    width: 13.48px;
    height: 13.48px;
    color: #CB0969;
    ;
}  
    /*Footer Section*/
.footer {
    width: 100%;
    max-width: 1440px;
    margin: auto;
    padding: 56px 130px 32px 130px;
    background: #0D0D12;
    
}

.footer-container {
    display: flex;
    justify-content: space-between;
}

.footer-left {
    width: 466px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.footer-copyright {
    /*/width: 155px;
    height: 21px;*/
    font-family: "Plus Jakarta Sans";
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;
    opacity: 1;
    color: #F8FAFB;
}

.footer-services {
    /*display: flex;*/
    flex-direction: column;
    gap: 24px;
}

.footer-service {
    font-family: "Plus Jakarta Sans";
    font-weight: 500;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: -2%;
    color: #F8FAFB;
}

.footer-company {
    margin-top: 40px;
}

.footer-company-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    
}

    .footer-company-links a {
        font-family: "Plus Jakarta Sans";
        font-size: 15px;
        line-height: 145%;
        color: #F8FAFB;
    }

.footer-label {
    font-family: "Plus Jakarta Sans";
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
    color: #CB0969;

}
    .footer-label::before {
        content: "";
        width: 7px;
        height: 7px;
        background: #CB0969;
        display: inline-block;
        border-radius: 50%; /* makes it a circle bullet */
        margin-right: 6px; /* space between dot and label */
    }

.footer-right {
    width: 698px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.footer-right-top {
    display: flex;
    justify-content: space-between;
}

.footer-contact {
    width: 311px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.footer-contact-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-text {
    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    color: #F8FAFB;
    line-height: 155%;
}

.footer-text-title {
    font-weight: 500;
}

.footer-location {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #F8FAFB;
}

.footer-social {
    width: 136px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   
}

.footer-icons {
    display: flex;
    gap: 8px;
}

    .footer-icons a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.iso-badge {
    width: 60px;.info
    
   
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    position:relative;
}

.footer-links {
    display: flex;
    gap: 32px;
  
}

    .footer-links a {
        font-family: "Plus Jakarta Sans";
        font-size: 14px;
        color: #F8FAFB;
    }
    /*What We Do Menu*/
.mega-overlay {
    position: absolute;
    top: 104px;
    left: 0;
    width: 100%;
    height: 694px;
    background: rgba(13,13,18,0.34);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: flex-start;
    z-index: 999;
}
    .mega-overlay.active {
        display: flex;
    }
.whatwedo-menu {
    position: relative;
}
.mega-column li a {
    text-decoration: none;
    color: #0D0D12;
    width: 100%;
}

.mega-column li:hover a {
    color: #CB0969;
}
.mega-column li {
    transition: background 0.2s ease;
}
.mega-container {
    width: 886px;
    padding: 24px;
    margin-top: 30px;
    background: #FFFFFF;
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(3,258px);
    gap: 32px;
}
.mega-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
    .mega-column h4 {
        width: 258px;
        height: 19px;
        font-family: "Plus Jakarta Sans";
        font-weight: 500;
        font-size: 12px;
        line-height: 155%;
        color: #CB0969;
    }
    .mega-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .mega-column li {
        width: 258px;
        padding: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: "Plus Jakarta Sans";
        font-weight: 400;
        font-size: 14px;
        line-height: 155%;
        background: #FFFFFF;
        border-radius: 6px;
        cursor: pointer;
    }
        .mega-column li:hover {
            background: #F7E6EE;
        }

        .mega-column li.active {
            background: #F7E6EE;
            color: #CB0969;
        }
    .mega-column img {
        width: 18px;
        height: 18px;
    }
    /*About Us Page*/
    /*About us Section*/
.aboutUs-section {
    width: 100%;
    max-width: 1442px;
    margin: 0 auto;
    background: linear-gradient(178.7deg,#870043 1.08%,rgba(250,250,250,0) 98.09%);
}


/* upper container */
.header-inner {
    height: 85px;
    background: #000000;
    border-radius: 100px;
}
.aboutUs-upper {
    width: 100%;
    max-width: 1180px;
    height: 544px;
    padding: 56px 130px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.about-small {
    width: 100%;
    max-width: 866px;
    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    font-weight: 400;
    line-height: 155%;
    color: #F8FAFB;
}

.about-heading {
    width: 100%;
    max-width: 866px;
    font-family: "Plus Jakarta Sans";
    font-size: 82px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -2%;
    color: #F8FAFB;
}

.about-highlight {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 82px;
    line-height: 120%;
    letter-spacing: -2%;
    text-align: center;
}

.about-sub {
    width: 100%;
    max-width: 866px;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-weight: 400;
    line-height: 155%;
    color: #F8FAFB;
}

/* lower container */

.about-lower {
    width: 100%;
    max-width: 1442px;
    padding: 56px 130px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

    /* Image */

    .about-lower img {
        width: 100%;
        max-width: 1182px;
        height: 541px;
        border-radius: 8px;
        object-fit: cover;
    }.content-section {
    width: 100%;
    max-width: 1442px;
    background: #FFFFFF;
    padding: 96px 130px;
    margin: 0 auto;
}

.content-container {
    max-width: 1182px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
}

.content-title {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 40px;
    line-height: 140%;
    letter-spacing: -2%;
    text-transform: capitalize;
}

.content-description {
    max-width: 1010px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
}
/*Team Section*/
.team-section {
    width: 100%;
    max-width: 1442px;
    margin: 0 auto;
    padding:96px 130px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    opacity: 1;
}
.team-container {
    display: flex;
    gap: 8px;
}
.team-label {
    display: inline-block;
    padding: 2px 8px;
 
    border-radius: 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 155%;
    letter-spacing: 0;
    
    color: #EE4096;
}

.team-left {
    width: 364px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.team-heading {
 
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 140%;
    letter-spacing: -0.02em;
     padding:2px;
    text-transform: capitalize;
    margin: 0;
}
.team-highlight {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 30px;
    line-height: 140%;
    letter-spacing: -0.02em;
    text-transform: capitalize;
  
}


.team-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
    width: 784px;
}

.team-card img {
    width: 100%;
    border-radius: 8px;
}
.team-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #0D0D12;
    margin: 0;
}
.team-role {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0;
    color: #36394A;
    margin: 0;
}

/* Dark Section */
.dark-section {
    width: 100%;
    max-width: 1440px;
    margin: auto;
    padding:96px 130px;
    background: #141414;
    display: flex;
    flex-direction: column;
    gap:55px;
}
    .dark-section .section-container {
        max-width: 1180px; /* or 1200 / 1440 */
        margin: 0 auto;
        padding: 0 20px;
    }
    /* Header */
.dark-header {
    width: 853px;
    margin:0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
  
}

    .dark-header span {
        font-family: "Plus Jakarta Sans";
        font-weight: 400;
        font-size: 14px;
        line-height: 155%;
        color:#EE4096;
        padding: 4px 10px;
        border-radius: 4px;
        display: inline-block;
        margin: auto;
    }

    .dark-header .heading {
        width: 853px;
        /*height: 111px;
 */       font-family: "Plus Jakarta Sans";
        font-weight: 500;
        font-size: 40px;
        line-height: 120%;
       letter-spacing: -2%;
        text-align: center;
        color: #ffffff;
    }

    .dark-header p {
        width: 853px;
       /* height: 52px;*/
        font-family: "Plus Jakarta Sans";
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        text-align: center;
        color: #ECEFF3;
    }
    .dark-header .heading-highlight {
        font-family: 'DM Serif Display', serif;
        font-style: italic;
        font-weight: 400;
        font-size: 40px; /* keeps same size as h2 */
        line-height: 120%;
        letter-spacing: -0.02em; /* optional if used in design */
        color: #FFFFFF;
    }

/* Bottom Cards Grid */
.dark-cards {
    display: grid;
    grid-template-columns: 377px 1fr; /* left role-card, right flexible */
    gap: 24px;
}

/* Role Card */
.role-card {
    width: 377px;
    height: 628px;
    background: #1A1B25;
    border: 1px solid #272835;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #F8FAFB;
}
.role-card-image {
    width: 304px;
    height: 430px;
    border: 1px solid #232323;
    overflow: hidden;
}

    .role-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Right Cards Container */
.right-cards {
    display: grid;
    grid-template-rows: auto auto; /* top row feature cards, bottom row info card */
    gap: 24px;
    width: 779px;
}

/* Top feature cards row */
.top-cards {
    display: grid;
    grid-template-columns: 470px 285px; /* your Figma widths */
   
}

/* Feature Card */
.feature-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #272835;
    background: #1A1B25;
   padding: 24px;
    color: #F8FAFB;
}

/* Bottom info card row */
/* ================= INFO CARD ================= */

.info-card {
    background: #1A1B25;
    padding: 24px;
    border-radius: 12px;
}

/* 3 COLUMN LAYOUT: LEFT TAGS | IMAGE | RIGHT TAGS */
.info-card-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

/* ================= TAGS ================= */

.tags {
    display: flex;
    flex-direction: column; /* ✅ vertical tags */
    gap: 10px;
}

/* Left side tags */
.tags-left {
    align-items: flex-start;
}

/* Right side tags */
.tags-right {
    align-items: flex-end;
}

/* Individual tag style */
.tag {
    background: #272835;
    border-radius: 32px;
    padding: 8px 14px;
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
}

/* ================= IMAGE ================= */

.info-image {
    display: flex;
    justify-content: center;
}

    .info-image img {
        width: 220px; /* adjust based on design */
        height: auto;
        object-fit: cover;
    }/* Responsive */
@media(max-width:1024px) {
    .dark-cards {
        grid-template-columns: 1fr; /* stack left/right */
    }

    .top-cards {
        grid-template-columns: 1fr; /* stack feature cards vertically */
    }

    .info-card {
        width: 100%;
    }
}
/* =========================
   HELP SECTION (DESKTOP)
========================= */

.help-section {
    width:100%;
    max-width:100%;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
}

.help-container {
    max-width: 1442px;
    width: 100%;
    height: 608px;
    padding: 96px 130px;
    display: flex;
    gap: 163px;
    box-sizing: border-box;
}

/* LEFT SIDE */
.help-left {
    width: 419px;
}

.help-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
    color: #EE4096;
}

.help-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: 0%;
    color: #111111;
}

    .help-heading .heading-highlight{
        font-family: 'DM Serif Display', serif;
        font-style: italic;
        font-weight: 400;
    }

/* RIGHT SIDE */
.help-right {
    width: 597.5px;
}

/* CARD */
.help-card {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* FORM ROW */
.form-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

/* FORM GROUP */
.form-group {
    width: 262.75px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full {
        width: 100%;
    }

    /* LABEL */
    .form-group label {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #111111;
    }

    /* INPUT */
    .form-group input,
    .form-group textarea {
        border: none;
        border-bottom: 1px solid rgba(17,17,17,0.3);
        padding: 8px 0;
        font-size: 14px;
        outline: none;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

/* TEXTAREA */
textarea {
    height: 100px;
    resize: none;
}

/* BUTTON */
.help-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 16px 24px;
    border-radius: 56px;
    background: #CB0969;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    border: none;
    cursor: pointer;
}



/* =========================
   MOBILE (FIGMA MATCH)
========================= */

@media (max-width: 768px) {

    .help-section {
        width:100%;
        background: #111111;
    }
    ;
    .help-container {
        width: 100%;
        max-width:100%
        height: auto;
        padding: 32px 16px;
        flex-direction: column;
        gap: 32px;
    }

    /* TEXT */
    .help-left {
        width: 100%;
    }

    .help-label {
        color: #FFFFFF;
        font-size: 14px;
        line-height: 155%;
    }

    .help-heading {
        font-size: 32px;
        line-height: 120%;
        letter-spacing: -0.02em;
        color: #FFFFFF;
    }

    /* CARD */
    .help-right {
        width: 100%;
    }

    .help-card {
        width: 100%;
        padding: 24px;
        border-radius: 8px;
    }

    /* FORM */
    .form-row {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 0;
    }

    .form-group {
        width: 100%;
    }

    textarea {
        height: 80px;
    }

    /* BUTTON */
    .help-btn {
        width: 206px;
        padding: 16px;
        border-radius: 56px;
        background: #CB0969;
        color: #FFFFFF;
    }
}
/*CONTACT uS PAGE*/
.contact-banner {
    width: 100%;
    
    padding: 96px 130px;
    text-align: center;
    color: #fff;
    
}

.contact-banner-inner {
    max-width: 866px; /* from figma */
    margin: 0 auto;
}
/* REMOVE these */
.contact-page-bg {
    background: linear-gradient(178.7deg, #870043 1.08%, rgba(250, 250, 250, 0) 98.09%), #FFFFFF;
}
.banner-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 155%;
    margin-top: 96px;
    opacity: 0.9;
   
}

.banner-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 82px; /* figma */
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -2%;
    margin-top:0;
}

    .banner-title span {
        font-family: 'DM Serif Display', serif;
        font-style: italic;
        font-weight: 400;
    }

.banner-desc {
    margin-top: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    line-height: 155%;
    opacity: 0.9;
}

/*CONTACT section*/
.contact-section {
    width: 100%;
   
    padding: 96px 130px; 
    /* figma exact */
}
/*figma typography*/
.contact-heading {
    max-width: 717px;
  
    display: flex;
    flex-direction: column;
    gap: 8px;
    
}
/* Remove extra gap between sections */
.contact-banner {
    padding-bottom: 30px; /* reduce from 80px */
}

.contact-section {
    padding-top: 30px; /* reduce top spacing */
}

    .contact-heading h2 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 500;
        font-size: 40px;
        line-height: 120%;
        letter-spacing: -2%;
        text-transform: capitalize;
    }

        .contact-heading h2 span {
            font-family: 'DM Serif Display', serif;
            font-style: italic;
            font-weight: 400;
        }


.contact-container {
    max-width: 1182px;
    margin: 0 auto;
    display: flex;
    gap: 38px;
    align-items: flex-start;
}

/*Left Image*/
.contact-image {
    width: 531px;
}

    .contact-image img {
        width: 100%;
        height: 509px;
        object-fit: cover;
        border-radius: 8px;
    }
    /*right form*/
.contact-form {
    width: 608px;
    height: 447px;
   
    padding: 32px;
    border-radius: 8px;
}
/*form fields*/
    .contact-form form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

.row {
    display: flex;
    gap: 16px;
}

    .row input {
        flex: 1;
    }

input,
textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #D0D5DD;
    padding: 10px 0;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: transparent;
    outline: none;
}

textarea {
    height: 100px;
}
,.contact-form .full-width {
    display: flex;
    justify-content: flex-end;
}
.contact-form button {
    margin-top: 10px;
    background: linear-gradient(90deg, #FF007A 0%, #FF4DA6 100%);
    color: #fff;
    padding: 14px 24px;
    border: none;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
}
@media (max-width: 1024px) {
    .contact-section {
        padding: 60px 40px;
    }

    .contact-container {
        flex-direction: column;
    }

    .contact-image,
    .contact-form {
        width: 100%;
    }

        .contact-image img {
            height: auto;
        }
}

@media (max-width: 768px) {
    .contact-banner {
        padding: 60px 20px;
    }

    .banner-title {
        font-size: 42px;
    }

    .contact-section {
        padding: 40px 20px;
    }

    .row {
        flex-direction: column;
    }
}
body {
    margin: 0;
}
/*Connect Section*/
/* SECTION */
.connect-section {
    padding: 96px 130px;
    background: #ffffff;
    gap:56px;
}

.connect-container {
    max-width: 1442px;
    margin: 0 auto;
}

/* ================= HEADER ================= */
.connect-header {
    max-width: 1182px;
   
    margin-bottom: 56px;
}

    .connect-header h2,headingl  {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 40px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: -0.02em;
        color: #0D0D12;
        text-transform: capitalize;
    }

        /* ✨ Highlight Text */
        .connect-header h2 span {
            font-family: 'DM Serif Display', serif;
            font-style: italic;
            font-weight: 400;
            line-height: 140%;
            color: #0D0D12;
        }

/* ================= CONTENT BOX ================= */
.connect-content {
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    gap: 200px;
    padding: 40px;
    border-radius: 8px;
}

/* ================= LEFT SIDE ================= */
.contact-info {
    width: 446px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.info-block {
    border-bottom: 1px solid #A4ACB9;
    padding-bottom: 16px;
}

/* Labels (EMAIL, PHONE etc.) */
.label {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #CB0969;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

/* Values */
.info-block p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 155%;
    color: #0D0D12;
    margin: 0;
}

/* ================= RIGHT IMAGE ================= */
.connect-image {
    width: 531px;
    height: 535px;
}

    .connect-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
    .connect-section {
        padding: 60px 20px;
    }

    .connect-content {
        flex-direction: column;
        gap: 40px;
    }

    .contact-info,
    .connect-image {
        width: 100%;
    }

    .connect-header h2 {
        font-size: 28px;
    }
}
/*Career Page section*/
/* ================= GLOBAL ================= */
/* ================= GLOBAL ================= */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ================= MAIN PAGE ================= */
.career-page {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient( 178.7deg, #870043 1.08%, rgba(250, 250, 250, 0) 98.09% );
}

/* ================= HERO ================= */
.career-hero {
    width: 100%;
    padding: 56px 20px;
    display: flex;
    justify-content: center;
}

.career-hero-content {
    width: 100%;
    max-width: 866px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

/* LABEL */
.career-label {
    font-size: 18px;
    font-weight: 400;
    line-height: 155%;
    margin-top: 96px;
    color: #F8FAFB;
}

/* SUBTITLE */
.career-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 155%;
}

/* TITLE */
.career-title {
    font-size: 82px;
    font-weight: 600;
    line-height: 120%;
    margin: 0;
   color: #F8FAFB;
}

    .career-title span {
        font-family: 'DM Serif Display', serif;
        font-style: italic;
        font-weight: 400;
        color: #F8FAFB;
    }

/* DESCRIPTION */
.career-desc {
    font-size: 18px;
    line-height: 155%;
    color: #F8FAFB;
}

/* ================= BOTTOM SECTION ================= */
.career-bottom {
    width: 100%;
    max-width: 1442px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start; /* 🔥 FIX */

    gap: 40px;
    padding: 96px 130px;
}

/* ================= FILTER ================= */
.career-filter {
    width: 250px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
   background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(25, 26, 38, 0.06);
}

/* FILTER TITLE */
.filter-label {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
}
.filter-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    color: #0D0D12;
}
.filter-header {
    display: flex;
    align-items: center;
    gap: 6px; /* space between label & arrow */
    cursor: pointer;
}

/* Rotate when open */
.filter-group.active .filter-arrow {
    transform: rotate(180deg);
    
}

.filter-group {
    display: flex;
    align-items: center; /* vertical align */
    gap: 10px; /* space between label & dropdown */
}

/* OPTION */
.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .filter-option span {
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
    }

    .filter-option input {
        width: 14px;
        height: 14px;
        accent-color: #CB0969; /* 🔥 This makes it pink when selected */
        cursor: pointer;
    }
.search-wrapper {
    position: relative;
    width: 250px; /* or 100% if needed */
}

.search-input {
    width: 100%;
    padding-left: 40px !important; /* 🔥 force space */
    height: 40px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 16px;
}
.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    z-index: 3;
}/*================= JOBS ================= */
.career-jobs {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* JOB CARD */
.job-card {
    width: 100%;
    max-width: 866px;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    margin-top: 32px;
    border: 1px solid #CB0969;
    background: #FFFCFE;
    
}
.job-head {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2; /* 120% */
    letter-spacing: -0.02em; /* -2% */

    color: #F8FAFB;
    ; /* optional (recommended for visibility) */
    margin: 0;
}
.job-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 🔥 pushes search to right */

    width: 100%;
    max-width: 876px;
    
    padding: 0 16px;
    border-radius: 8px;
    gap:8px;
}
.job-search {
    width: 362px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #8C8C8C;
    background: #FFFFFF;
}

/* HEADER */
.job-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .job-header h3 {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 28px;
        color: #0D0D12;
        margin: 0;
    }
.job-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.job-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* TAG */
.job-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px 2px 8px;
    border-radius: 16px;
    border: 1px solid #CB0969;
    background: #FFEAF4;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #CB0969;
}

/* DESC */
.job-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55; /* 155% */

    color: #36394A;
   
}
/* META */
/* Job Meta Container */
.job-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Job Meta Text (Location & Type) */
.job-meta-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #272835;
}
.job-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.job-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.meta-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
/* BUTTON */
.view-job {
    margin-left:auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.55;
    color: #CB0969;
    text-decoration: none;
    border-bottom: 1px solid #CB0969;
     /* small spacing for underline */
}


.arrow-icon {
    width: 13px;
    height: 13px;
    color: #CB0969;
}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 1024px) {
    .career-title {
        font-size: 48px;
    }

    .career-bottom {
        flex-direction: column;
    }

    .career-filter {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .career-title {
        font-size: 32px;
    }

    .career-hero {
        padding: 40px 16px;
    }

    .career-bottom {
        padding: 20px 16px;
    }

    .job-card {
        padding: 16px;
    }
}
/*Position Detail Section*/
.site-header {
    max-width: 1440px;
    height: 114px;
    margin: 0 auto;
    padding: 96px 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.position-detail-section {
    max-width: 1440px;
    margin-top:80px;
    padding: 80px 130px;
}

.position-detail-layout {
    display: flex;
    gap: 72px;
}
.position-detail-content {
    width: 606px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.related-openings {
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.page-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

.page-breadcrumbs__link {
    font-weight: 400;
}

.page-breadcrumbs__current {
    font-weight: 600;
}

.position-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
   /* font-size: 40px;*/
    line-height: 120%;
    letter-spacing: -2%;
    text-transform: capitalize;
    margin-bottom:0px;
}
.position-meta {
    display: flex;
    gap: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    line-height: 155%;
}
.position-section {
    max-width: 606px;
    flex-direction: column;
    /*display: flex;
    gap: 12px;*/
}

.position-section__title {
    font-size: 24px;
    font-weight: 500;
}

.position-section__text {
    font-size: 16px;
    line-height: 160%;
    text-align: justify;
    color: #0D0D12;
}
.primary-cta-button {
    background: #CB0969;
    color: #fff;
    border: none;
    border-radius: 56px;
    padding: 16px 24px;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.opening-card {
    max-width:497px;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opening-card__header {
    display: flex;
    gap:2px;
}

.opening-card__tag {
    background: #ffe6f0;
    color: #CB0969;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}
.opening-card__description {
    max-width: 449px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 155%;
    letter-spacing: 0;
    color: #6B7280;
}
.opening-card__footer {
    display: flex;
    gap:8px;
    font-size: 14px;
}
.opening-card__link {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 155%;
    letter-spacing: 0;
    color: #CB0969;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
/*Apply Page*/
/* ===============================
   APPLY CONTAINER
================================= */
.apply-container {
    max-width: 1440px;
    width: 100%;
    margin-top: 80px;
    padding: 80px 130px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ===============================
   BREADCRUMBS
================================= */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-link {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    color: #CB0969; /* Pink from your design */
    text-decoration: none;
}
.breadcrumb-current {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600; /* SemiBold */
    line-height: 100%;
    letter-spacing: 0%;
    color: #36394A; /* Use your design color */
}
/* ===============================
   HEADING
================================= */
.apply-heading {
    text-align: center;
}

    .apply-heading h1 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 40px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: -2%;
        color: #0D0D12;
        text-transform: capitalize;
        text-align:left;
    }

/* ===============================
   JOB CARD (RENAMED)
================================= */
.apply-job-card {
    width: 100%;
    border-radius: 8px;
    padding: 80px 130px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

/* ===============================
   FORM FIELDS
================================= */
.apply-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ROW */
.apply-form-row {
    display: flex;
    gap: 24px;
    width: 100%;
}

/* ===============================
   FORM GROUP (RENAMED)
================================= */
.apply-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* LABEL */
    .apply-form-group label {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 155%;
        color: #0D0D12;
    }

    /* INPUTS */
    .apply-form-group input,
    .apply-form-group textarea
    .apply-form-group select {
        width: 100%;
        padding: 8px 8px 8px 0;
        border: none;
        border-bottom: 1px solid #A4ACB9;
        outline: none;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px;
        font-weight: 400;
        background: transparent;
    }

.required {
    color: #CB0969;
    margin-left: 2px;
}
        /* FOCUS */
        .apply-form-group input:focus,
        .apply-form-group textarea:focus,
        .apply-form-group select:focus {
            border-color: #CB0969;
        }

/* ===============================
   BUTTON
================================= */
.apply-form-actions {
    display: flex;
    justify-content: flex-end;
}

.apply-submit-btn {
    width: 262px;
    height: 48px;
    border: none;
    border-radius: 56px;
    padding: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    color: #fff;
    background: #CB0969;
    box-shadow: -10px 8px 20px rgba(255,123,188,0.66) inset, -5px 5px 15px rgba(255,255,255,0.03) inset, 0px 0px 20px rgba(203,9,105,0.43);
    cursor: pointer;
}
.work {
    background: #F8FAFB;
    padding: 56px 130px;
    text-align: center;
    box-shadow: 20px 20px 30px 0px rgba(103, 5, 54, 0.09);
    background: linear-gradient( 178.7deg, #870043 1.08%, rgba(250, 250, 250, 0) 98.09% );
}
}

.work-inner {
    max-width: 866px;
    margin: 0 auto;
}

/* Top Content */
.work-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    margin-top: 96px;
    color: #F8FAFB;
}

.work-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 82px;
    line-height: 120%;
    letter-spacing: -2%;
    margin-top: 0px;
    color: #F8FAFB;
}


.work-title span {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: #F8FAFB;

    }

.work-desc {
    font-size: 18px;
    line-height: 155%;
    margin-top: 0px;
    color: #F8FAFB;

}

/* Bottom Section */
.work-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
}

.work-bottom-title {
    max-width: 283px;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
}

.work-carousel {
    display: flex;
    gap: 69px;
}

.work-item img {
    height: 79px;
    object-fit: contain;
}
/* ===== work iten ECTION ===== */


/* ===== WORK ITEM SECTION ===== */
.work-item-section {
    width: 100%;
    max-width: 1440px;
    margin: auto;
    padding: 96px 130px;
}
    

    /* TAG */
    .work-item-section .tagstyle {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #EE4096;
        text-align: center;
    }

    /* SECTION TITLE */
    .work-item-section .title {
        font-size: 48px;
        font-weight: 600;
        line-height: 1.2;
        color: #0D0D12;
        margin-top: 8px;
        text-align: center;
    }
        .work-item-section .title span {
            font-family: 'DM Serif Display', serif; /* optional */
            font-style: italic;
            color: #0D0D12; /* 🔥 visible brand color */
        }

    /* ===== FILTER BAR ===== */
    .work-item-section .filter-bar {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 24px;
        flex-wrap: wrap;
    }

        .work-item-section .filter-bar input,
        .work-item-section .filter-bar select {
            height: 58px;
            min-width: 200px;
            padding: 0 16px;
            border-radius: 8px;
            border: 1px solid #A4ACB9;
            background: #F8FAFB;
            font-size: 16px;
            color: #666D80;
            outline: none;
        }

        /* Custom select arrow */
        .work-item-section .filter-bar select {
            appearance: none;
            background-image: url('/icons/arrow-down.svg');
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 12px;
        }
    /* FILTER BAR LAYOUT */
    .work-item-section .filter-bar {
        width: 100%;
        max-width: 1180px;
        margin: 24px auto 0;
        display: flex;
        justify-content: space-between; /* 🔥 LEFT + RIGHT */
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

/* LEFT SIDE */
.filter-left {
    flex: 1;
}

/* RIGHT SIDE */
.filter-right {
    display: flex;
    gap: 16px;
}

/* SEARCH WIDTH */
.filter-left input {
    width: 294px;
}

/* DROPDOWN WIDTH */
.filter-right select {
    width: 180px;
}

    /* ===== GRID ===== */
    .work-item-section .work-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 60px;
    }

    /* ===== CARD ===== */
    .work-item-section .work-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

        .work-item-section .work-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        /* IMAGE */
        .work-item-section .work-card img {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
        }

    /* CARD CONTENT */
    .work-item-section .card-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 8px 16px 8px;
    }

    /* CATEGORY BADGE */
.work-item-section .category {
    font-size: 16px;
   color: #272835;
    /*background: #FFF0F7;
        padding: 4px 10px;*/
    border-radius: 50px;
    display: inline-block;
}

    /* CARD TITLE */
    .work-item-section .card-title {
        font-size: 20px;
        font-weight: 500;
        line-height: 120%;
        color: #0D0D12;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .work-item-section {
        padding: 80px 80px;
    }

        .work-item-section .work-grid {
            grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 768px) {
    .work-item-section {
        padding: 40px 20px;
    }

        .work-item-section .title {
            font-size: 32px;
        }

        .work-item-section .filter-bar {
            flex-direction: column;
            align-items: center;
        }

            .work-item-section .filter-bar input,
            .work-item-section .filter-bar select {
                width: 100%;
                max-width: 300px;
            }

        .work-item-section .work-grid {
            grid-template-columns: 1fr;
        }

        .work-item-section .card-title {
            font-size: 18px;
        }
}