:root {
    --sm-txt-clr   : #455769;
    --read-more-clr: #4F6882;
    --fs-lg-1      : 2.5rem;
    --fs-lg-6      : 1.1rem;
}

.sm-txt-clr {
    color: var(--sm-txt-clr);
}

.read-more-clr {
    color: var(--read-more-clr);
}

.appearance-none {
    appearance: none;
    outline   : none;
}

.border-none {
    border: none;
}

.cursor-pointer {
    cursor: pointer;
}

.info-dropdown i {
    right: 3%;
}

.info-cards {
    border    : 1px solid #DEE5EC;
    box-shadow: 0px 0px 2px 0px #98ACC3, 0px 8px 0px 0px #F1F4F7;
    height    : fit-content;
}

#cards-container-info h3,
.info-cards p {
    overflow          : hidden;
    display           : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow     : ellipsis;
    height            : 40px;
}

.info-view-more button {
    border: 1px solid #01203D;
}

.info-view-more button:hover {
    border    : 1px solid #000;
    box-shadow: 0 2px 8px #707070;
}

.info_course_form,
.info_nav {
    border    : 1px solid #718AA5;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    height    : max-content;
}

.info_course_form_border {
    border    : 1px solid #DEE5EC;
    box-shadow: 0px 3px 4px 0px rgba(12, 22, 32, 0.03), 0px 1px 0px 0px rgba(222, 229, 236, 0.24);
}

#info-landing-form-phone input {
    padding-left: 82px;
}

.info-cards:hover {
    box-shadow: 0 2px 8px #707070;
}

.form-info_i {
    right: 2.5rem;
}

/* #info-landing-form-phone input:focus, #info-landing-form-courses select:focus, #info-landing-form-msg textarea:focus,
#course-info-landing-form .form-control:focus {
    border: 1px solid #86b7fe;
    box-shadow: 0 3px 4px rgba(12, 22, 32, 0.03), 0 1px rgba(222, 229, 236, 0.24);
} */
#info-landing-form-phone ul {
    width : max-content;
    height: 200px;
}

#info-landing-form-phone li {
    border-bottom: 1px solid #80808030;
}

#info-landing-form-phone li:hover {
    color           : black;
    background-color: #aaacb1;
}

#info-landing-form-phone li:hover {
    background-color: #002163;
    color           : white;
}

.grp-dot-img {
    left  : 17rem;
    bottom: 3rem;
}

/* #course-info-landing-form button:hover{
    background-color: #01203d;
    opacity: 0.9;
} */
.info-course-selected {
    background-color: #01203D;
    color           : #fff !important;
    border-radius   : 4px;
}

.info-course-selected:hover {
    color: #fff !important;
}

@media (min-width: 992px) {
    .fs-lg-1 {
        font-size: var(--fs-lg-1) !important;
    }

    .fs-lg-6 {
        font-size: var(--fs-lg-6) !important;
    }

    .sticky-form-nav {
        top          : 5%;
        position     : sticky;
        margin-bottom: 3.5rem;
    }

    .form-info_i {
        right: 1.5rem;
    }
}



.card-info {
    display   : none;
    opacity   : 0;
    transition: opacity 0.5s ease-in-out;
}

.card-info.show {
    display: block;
    opacity: 1;
}

#form_dailer.selectize-control .option .flag-icon,
#form_dailer.selectize-control .item .flag-icon {
    margin-right: 10px;
}

#form_dailer.selectize-dropdown .flag-icon {
    margin-right: 10px;
}

#inf0-main-ban {
    margin-right: 5rem;
}

/* Container for the cards */
.cards-container {
    display              : grid;
    grid-template-columns: 1fr;
    /* Single column layout by default */
    gap                  : 20px;
    /* Space between cards */
    max-width            : 1200px;
    /* Center the container */
    margin               : 0 auto;
}

.card {
    background   : white;
    padding      : 20px;
    border-radius: 10px;
    box-shadow   : 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Skeleton styles (same as before) */
.skeleton {
    background-color: #ddd;
    border-radius   : 5px;
    position        : relative;
    overflow        : hidden;
}

.skeleton-image {
    width : 100%;
    height: 150px;
}

.skeleton-title {
    width : 80%;
    height: 20px;
    margin: 10px auto;
}

.skeleton-text {
    width : 90%;
    height: 15px;
    margin: 5px auto;
}

.skeleton-link {
    width : 30%;
    height: 15px;
    margin: 15px auto;
}

.skeleton::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : -150px;
    height    : 100%;
    width     : 150px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation : loading 1.5s infinite;
}

@media (min-width: 768px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.all-res-sec a{
    text-decoration: none;
    color: black;
}

.card-grid {
    display              : grid;
    grid-template-columns: 1fr;
    gap                  : 10px;
    /* Space between cards */
    max-width            : 1200px;
    /* Center the container */
    margin               : 0 auto;
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cards per row */
    }
}

@media (min-width: 1200px) {
    .all-res-sec .fs-5 {
        font-size    : 1.65rem !important;
        margin-bottom: 1.5rem !important;
    }
}

.all-res-sec .info-cards p {
    height: 37px;
}


@media (max-width: 575px) {

    #individual_form .has-items,
    #corporate_form .has-items {
        transform: scale(0.8) !important;
        top      : 9px !important;
        overflow : hidden;
    }
}

@media (min-width: 768px) {
    .all-res-sec .info-cards p {
        height: 45px;
    }
}