@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import "./reset.css";
@import "./variable.css";


/* 3. Study Programs Section) */

.why-study-cards {
    position: relative; 
    padding-right: 40px !important; 
    border: 1px solid #00000033; 
    border-radius: 10px;
    box-shadow: none; 
}

.why-study-cards .toggle-icon {
    width: 9px; 
    height: 9px;
}

.why-study-cards .p-3 {
    position: absolute;
    top: 30px;
    right: 15px; 
    padding: 0 !important;
    line-height: 1; 
}

.why-study-cards h5 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600 !important; /* SemiBold */
    font-size: 22px !important; 
    line-height: 25px !important;
    color:#000000; /* Black */
    margin-top: 5 !important;
    text-align: left !important;
}

.blue-highlights {
    font-family: 'Outfit', sans-serif;
    font-weight: 500 !important;
    font-size: 17px !important; 
    line-height: 25px !important;
    color: #2F77C7 !important; 
}

.toggle-study-display {
    background-color: var(--accent) !important; 
    border-left: 3.5px solid var(--primary) !important; 
    border-radius: 5px !important;
    width: fit-content;
    max-width: 45ch;             
    padding: 8px 16px;
    display: inline-block;
}


.toggle-study-display h5 {
    font-family: 'Outfit', sans-serif;
    font-weight: 500 !important; 
    font-size: 18px !important; 
    line-height: 25px !important;
    color: #000000 !important;
    margin: 0 !important;
}

.toggle-study-display .main-para {
    font-family: 'Outfit', sans-serif;
    font-weight: 400 !important;
    font-size: 16px !important; 
    line-height: 25px !important;
    color:#000000 !important;
    margin: 0 !important;
    white-space: nowrap !important; 
}


/* Responsive */

/*
** Mobile Screen Adjustments (< 768px) **
*/
@media (max-width: 767px) {
    
    /* Force 1-column layout for all cards on mobile */
    .col-lg-6, .col-md-12, .col-sm-12, .col-12 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Add vertical spacing between stacked cards */
    .row.row-gap-3.gx-5.gy-3 {
        --bs-gutter-y: 1.5rem; 
    }

    /* Text Size Adjustments for Mobile */
    .why-study-cards h5 {
        font-size: 15px !important; 
        line-height: 22px !important;
        text-align: left !important;
    }

    .blue-highlights {
        font-size: 13px !important; 
        line-height: 22px !important;
        white-space: normal !important; /* Allow wrapping */
    }

    .toggle-study-display h5 {
        font-size: 14px !important; 
    }

    .toggle-study-display .main-para {
        font-size: 12px !important; 
        line-height: 17px !important;
        white-space: normal !important; /* Allow wrapping */
    }
    
    /* Padding/Positioning */
    .why-study-cards {
        padding: 15px !important; 
        padding-right: 40px !important; 
    }
    
    .why-study-cards .p-3 {
        top: 20px; 
        right: 10px; 
    }

    .why-study-cards .toggle-icon {
        height: 6px;
    }
}

/*
** Tablet and Mini Desktop Screens (768px to 1199px) **
*/
@media (min-width: 768px) and (max-width: 1199px) {

    /* Force 2-column layout for tablets and small desktops */
    .col-lg-6, .col-md-12, .col-sm-12 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Add horizontal spacing between columns */
    .row.row-gap-3.gx-5.gy-3 {
        --bs-gutter-x: 2rem; /* Ensure horizontal gap */
    }

    /* Text Size Adjustments for Tablet/Small Desktop */
    .why-study-cards h5 {
        font-size: 20px !important;
        text-align: left;
    }

    .blue-highlights {
        font-size: 18px !important;
    }

    .toggle-study-display h5 {
        font-size: 17px !important;
    }

    .toggle-study-display .main-para {
        font-size: 15px !important;
      
        white-space: normal !important;
    }
    
    /* Padding/Positioning */
    .why-study-cards {
       margin-right:0px !important ;
       margin-left: 0px !important;
    }
    
    .why-study-cards .p-3 {
        top: 25px; 
        right: 15px; 
    }
    
    /* Increase container padding for these screens */
    .container,
    .container-fluid-custom {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (min-width: 912px)
{
        /* Padding/Positioning */
    .why-study-cards {
       margin-right:0px !important ;
       margin-left: 0px !important;
    }
    
    .why-study-cards .p-3 {
        top: 25px; 
        right: 15px; 
    }
    
}

@media (min-width: 1024px)
{
        /* Padding/Positioning */
    .why-study-cards {
       margin-right:0px !important ;
       margin-left: 0px !important;
    }
}