/* ===================================================================
   FEATURES PAGE STYLES
   - Main stylesheet for TalentzQ features pages
   - Organized by sections for better maintainability
   - Includes responsive design for all screen sizes
=================================================================== */

/* ===================================================================
   SECTION: FEATURES HERO SECTION STYLES
   - Main landing area with title, description, and CTA button
   - Two-column layout with content on left and image on right
=================================================================== */

section.features_hero_section {
    padding: 60px 0 80px 0;
}

.container.features_hero_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

/* Hero Tag Styling */
p.features_hero_tag.overline {
    border-radius: 8px;
    background: var(--color-light-bg);
    padding: 8px 12px;
    display: inline;
}

/* Hero Title Styling */
h1.features_hero_title {
    margin: 12px 0 16px 0;
    color: var(--color-heading);
    font-weight: 700;
    font-size: 24px;
}
.container.features_core_container{
    padding: 0px;
}

/* Hero Description Styling */
p.features_hero_descp.body {
    margin-bottom: 32px;
    color: var(--color-body);
}

/* Hero CTA Button Styling */
button.features_hero_btn {
    border-radius: 16px;
    background: var(--color-cta-bg);
    padding: 14px 20px;
    color: var(--color-white);
    border: 1px solid var(--CTA-BG);
    color: var(--color-white);
}

/* Hero Right Image Styling */
.features_hero_right img {
    width: auto;
    border-radius: 16px;
}

/* ===================================================================
   SECTION: FEATURES BENEFITS SECTION STYLES
   - Grid layout showcasing feature benefits
   - Desktop grid and mobile carousel implementations
=================================================================== */

section.features_benefits_section {
    padding: 80px 0;
    background: var(--color-light-bg);
}

h1.features_benefits_title {
    margin-bottom: 40px;
    text-align: center;
    color: var(--color-heading);
}

/* Desktop Grid Layout */
.features_benefits_desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 32px;
}   

/* Benefits Card Styling */
.features_benefits_card {
    border-radius: 16px;
    border: 1px solid var(--Stroke, #DEDDE1);
    background: var(--White, #FFF);
    box-shadow: 0px 0px 40px 0px rgba(211, 204, 229, 0.20);
    padding: 31px;
}

/* Benefits Card Title */
p.features_benefits_card_title.big-body {
    margin: 24px 0 12px 0;
    color: var(--color-text);
}

/* Benefits Card Description */
p.features_benefits_card_descp.small-body {
    color: var(--color-body);
}

/* Mobile Carousel Controls - Hide Navigation Arrows */
.carousel-control-prev,
.carousel-control-next {
    display: none;
}

/* Mobile Carousel Dots Styling */
.carousel-indicators {
    position: relative;
    margin-top: 24px;
    justify-content: center;
    gap: 8px;
}

.carousel-indicators [data-bs-target] {
    width: 24px !important;
    border-radius: 20px !important;
    background: var(--Stroke, #DEDDE1);
    height: 8px !important;
    transition: all 0.3s ease;
    margin: 0;
    border: none !important;
}

.carousel-indicators .active {
    background: var(--color-cta-bg);
    width: 24px;
    height: 8px;
    border-radius: 4px;
}

/* ===================================================================
   SECTION: FEATURES VIDEO SECTION STYLES
   - Video showcase section with title and video player
=================================================================== */

section.features_video_section {
    padding: 80px 0;
    text-align: center;
}

h1.features_video_title {
    color: var(--color-heading);
    margin-bottom: 40px;
}

/* Video Player Styling */
video.features_video {
    width: -webkit-fill-available;
    border-radius: 24px;
}

/* ===================================================================
   SECTION: FEATURE CTA SECTION STYLES
   - Call-to-action section with demo request
   - Two-column layout with content and animation/image
=================================================================== */

section.feature_cta {
    padding: 64px 0;
    background: var(--CTA-BG, #340C97);
    color: var(--color-white);
}

.container.feature_cta_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

/* CTA Heading */
h1.feature_cta_heading {
    width: 66%;
}

/* CTA Description */
p.feature_cta_descp.body {
    padding: 16px 0 32px 0;
    width: 50%;
}

/* CTA Button Styling */
.home_cta_btn,
.feature_cta_btn {
    border-radius: 16px;
    background: var(--White, #FFF);
    padding: 16px 24px;
    border: none !important;
}

/* ===================================================================
   SECTION: FEATURES CORE SECTION STYLES
   - Core functionality showcase with alternating layouts
   - Left-right and right-left content arrangements
=================================================================== */

section.features_core_section {
    padding: 80px 0;
    background: var(--color-light-bg);
}

h1.features_core_title {
    margin-bottom: 40px;
    text-align: center;
    color: var(--color-heading);
}

/* Core Feature Layout Containers */
.features_core_1, 
.features_core_2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* Star List Items Styling */
.star_list {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

img.star_list_icon {
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

/* ===================================================================
   SECTION: FEATURES OTHER SECTION STYLES
   - Additional helpful features showcase
   - Grid layout for feature cards
=================================================================== */

section.features_other_section {
    padding: 80px 0;
}

h1.features_other_title {
    margin-bottom: 40px;
    text-align: center;
    color: var(--color-heading);
}

/* Other Features Card Title */
p.other_help_card_title.big-body {
    padding: 16px 0 12px 0;
}

/* Other Features Grid Layout */
.features_other_slides {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    gap: 32px;
}

/* Other Features Card Image */
img.other_help_card_image {
    width: 100%;
}

/* ===================================================================
   RESPONSIVE STYLES
   - Mobile, tablet, and desktop responsive adjustments
   - Organized by breakpoint for better maintainability
=================================================================== */

/* ===================================================================
   MOBILE STYLES (max-width: 575.98px)
=================================================================== */

@media (max-width: 575.98px) {
    /* Hero Section Mobile */
    section.features_hero_section {
        padding: 40px 0;
        text-align: center;
    }
    h1.features_hero_title{
        text-align: center;
    }
    
h1.features_core_title {
    margin-bottom: 40px;
    text-align: center;
    color: var(--color-heading);
    font-size: 24px !important;
    font-weight: 700;
    padding: 16px;
    border-radius: 16px;
    margin: 10px;
}
.features_core_1 {
    display: flex;
    flex-direction: column-reverse !important;
    text-align: center;
    padding: 16px;
    border: 1px solid #ccc;
    margin: 10px;
    border-radius: 16px;
    margin-bottom: 16px;
}
h1.features_other_title{
    font-size: 24px;
    margin-bottom: 16px;
}
.other_help_card{
    margin-bottom: 36px;
}

    
    .container.features_hero_container {
        gap: 32px;
        flex-direction: column;
    }
    
    .features_hero_right img {
        width: 100%;
    }
    
    button.features_hero_btn {
        width: 100% !important;
    }

    /* Benefits Section Mobile */
    section.features_benefits_section {
        padding: 40px 0;
        background: var(--color-light-bg);
    }
    
    h1.features_benefits_title {
        margin-bottom: 20px;
    }
    
    .features_benefits_desktop {
        display: none;
    }
    
    .features_benefits_mobile {
        display: block;
    }
    
    .features_benefits_desktop {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
    
    .features_benefits_card {
        padding: 24px;
    }

    /* Video Section Mobile */
    section.features_video_section {
        padding: 40px 0;
    }
    
    h1.features_video_title {
        margin-bottom: 20px;
    }
    
    video.features_video {
        border-radius: 12px;
    }

    /* Feature CTA Section Mobile */
    section.feature_cta {
        padding: 40px 0 0px 0;
    }
    
    .container.feature_cta_container {
        justify-content: space-between;
        gap: 24px;
        flex-direction: column;
    }
    
    h1.feature_cta_heading {
        width: 100%;
    }
    
    p.feature_cta_descp.body {
        padding: 12px 0 24px 0;
        width: 100%;
    }

    /* Feature Core Section Mobile */
    section.features_core_section {
        padding: 40px 0;
    }
    
    h1.features_core_title {
        margin-bottom: 20px;
    }
    
    p.features_hero_descp.body {
        margin-bottom: 24px;
        color: var(--color-body);
    }
    
    .features_core_1 {
        flex-direction: column;
        gap: 16px;
    }

    .features_core_2 {
        gap: 16px;
        margin: 24px 0;
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        margin: 10px;
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .features_core_2_right img, 
    .features_core_1_left img {
        width: 100%;
    }

    /* Other Features Section Mobile */
    section.features_other_section {
        padding: 40px 0;
    }
    
    h1.features_other_title {
        margin-bottom: 24px;
    }

    p.other_help_card_title.big-body {
        padding: 12px 0 8px 0;
    }
    
    .features_other_slides {
        grid-template-columns: 1fr;
        display: grid;
        gap: 24px;
    }
}

/* ===================================================================
   TABLET STYLES (min-width: 768px)
=================================================================== */

@media only screen and (min-width: 768px) {
    /* Hide mobile carousel, show desktop grid */
    .features_benefits_mobile {
        display: none;
    }

    /* Feature CTA Section Tablet */
    .container.feature_cta_container {
        justify-content: space-between;
        gap: 24px;
        flex-direction: column;
    }
    
    h1.feature_cta_heading {
        width: 100%;
    }
    
    p.feature_cta_descp.body {
        padding: 12px 0 24px 0;
        width: 100%;
    }

    .features_hero_right img {
        width: 100%;
    }
    /* Core Features Section Tablet */
    .features_core_1 {
        flex-direction: column;
        gap: 24px;
    }

    .features_core_2 {
        flex-direction: column-reverse;
        gap: 24px;
        margin: 40px 0;
    }
    
    .features_core_2_right img, 
    .features_core_1_left img {
        width: 100%;
    }

    /* Other Features Section Tablet */
    .features_other_slides {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: 24px;
    }
}

/* ===================================================================
   MEDIUM DESKTOP STYLES (992px - 1199.98px)
=================================================================== */

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Feature CTA Section Medium Desktop */
    .container.feature_cta_container {
        justify-content: space-between;
        gap: 24px;
        flex-direction: row;
    }
    
    h1.feature_cta_heading {
        width: 80%;
    }
    
    p.feature_cta_descp.body {
        padding: 12px 0 24px 0;
        width: 50%;
    }
    .features_hero_right img {
        width: auto;
    }

    /* Core Features Section Medium Desktop */
    .features_core_1, 
    .features_core_2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px !important;
        flex-direction: row !important;
    }   
    
    .features_core_2_right img, 
    .features_core_1_left img {
        width: auto;
    }
    
    .features_core_2 {
        margin: 60px 0;
    }

    /* Other Features Section Medium Desktop */
    .features_other_slides {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
        gap: 32px;
    }
}

/* ===================================================================
   LARGE DESKTOP STYLES (1200px - 1439.98px)
=================================================================== */

@media (min-width: 1200px) and (max-width: 1439.98px) {
    /* Feature CTA Section Large Desktop */
    .container.feature_cta_container {
        justify-content: space-between;
        gap: 24px;
        flex-direction: row;
    }
    
    h1.feature_cta_heading {
        width: 72%;
    }
    
    p.feature_cta_descp.body {
        padding: 12px 0 24px 0;
        width: 50%;
    }
    .features_hero_right img {
        width: auto;
    }

    /* Core Features Section Large Desktop */
    .features_core_1, 
    .features_core_2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 80px !important;
        flex-direction: row !important;
    }

    .features_core_2_right img, 
    .features_core_1_left img {
        width: auto;
    }
    
    .features_core_2 {
        margin: 80px 0;
    }

    /* Other Features Section Large Desktop */
    .features_other_slides {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
        gap: 32px;
    }
}

/* ===================================================================
   EXTRA LARGE DESKTOP STYLES (min-width: 1440px)
=================================================================== */

@media (min-width: 1440px) {
    /* Feature CTA Section Extra Large Desktop */
    .container.feature_cta_container {
        justify-content: space-between;
        gap: 24px;
        flex-direction: row;
    }
    
    h1.feature_cta_heading {
        width: 72%;
    }
    
    p.feature_cta_descp.body {
        padding: 12px 0 24px 0;
        width: 65%;
    }
    .features_hero_right img {
        width: auto;
    }

    /* Core Features Section Extra Large Desktop */
    .features_core_1, 
    .features_core_2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 80px !important;
        flex-direction: row !important;
    }
    
    .features_core_2_right img, 
    .features_core_1_left img {
        width: auto;
    }
    
    .features_core_2 {
        margin: 80px 0;
    }

    /* Other Features Section Extra Large Desktop */
    .features_other_slides {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
        gap: 32px;
    }
}