.hero-section {
background: linear-gradient(to bottom right, #f7faff, #ffffff);
padding: 100px 0;
}


.highlight {
color: #2ABAF7;
font-weight: 600;
}


.sub-text {
color: #6c757d;
}


.info-badge {
font-size: 18px;
font-weight: 600;
color: #f9a825;
display: flex;
align-items: center;
gap: 8px;
}


.hero-img {
width: 100%;
max-width: 600px;
}


.btn-custom1 {
background: #2ABAF7;
color: #fff;
font-weight: 600;
}


.btn-custom2 {
background: #f9a825;
color: #fff;
font-weight: 600;
}

/* ANIMATED DOTTED BORDER */
.circle-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin: auto;
}

.circle-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px dashed #9cc5e4;
    border-radius: 50%;
    animation: rotateBorder 6s linear infinite;
}

@keyframes rotateBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background: #e4f3ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    font-weight: 600;
}
/*program flow*/
section {
            padding: 60px 0;
        }

        .program-title {
            font-size: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .course-card {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            background: white;
            transition: .3s;
        }

        .course-card:hover {
            transform: translateY(-5px);
        }

        .top-box {
            height: 100px;
            padding: 20px;
            position: relative;
        }

        .offline-badge {
            position: absolute;
            right: 20px;
            top: 15px;
            color: white;
            font-size: 14px;
            font-weight: 500;
        }

        .bottom-box {
            padding: 22px;
            background: white;
        }

        .explore-btn {
            background: #1e73be;
            color: white;
            padding: 6px 20px;
            border-radius: 20px;
            border: none;
        }

        .explore-btn:hover {
            background: #0d58a0;
        }

        .duration-text i {
            margin-right: 5px;
        }


        /* Popup styling */
        .custom-modal {
            border-radius: 35px !important;
            overflow: hidden;
        }

        .popup-header {
            background: linear-gradient(90deg, #ffffff, #dfe6ff);
            padding: 30px;
            display: flex;
            gap: 25px;
            border-bottom: none;
            border-radius: 35px 35px 0 0;
        }

        .popup-header img {
            width: 100px;
            border-radius: 20px;
        }

        .popup-title {
            font-size: 28px;
            font-weight: 700;
            color: #c62828;
        }

        .offline-text {
            font-size: 18px;
            color: #333;
        }

        .duration-section {
            padding: 30px;
            font-size: 18px;
            
        }

        .duration-section strong {
            color: #1e73be;
        }

        .includes-box {
            border: 2px solid #e7cfff;
            padding: 25px;
            border-radius: 25px;
            background: #fff2ff;
            width: 60%;
        }

        .includes-title {
            font-size: 20px;
            font-weight: 700;
            color: #c62828;
            margin-bottom: 10px;
        }

        .footer-buttons {
            padding: 25px 40px;
            display: flex;
            justify-content: space-between;
        }

        .btn-custom {
            padding: 12px 35px;
            border-radius: 18px;
            border: none;
            font-size: 18px;
        }

        .btn-back {
            background: #f3dcff;
        }

        .btn-register {
            background: #f3dcff;
        }

        /* CARD STYLING */
        .course-card {
            border-radius: 20px;
            background: white;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: .3s;
        }

        .course-card:hover {
            transform: translateY(-5px);
        }

        .top-box {
            height: 150px;
            padding: 20px;
            position: relative;
        }

        .offline-badge {
            position: absolute;
            right: 20px;
            top: 10px;
            color: white;
            font-weight: 600;
        }
        
        /*contact*/

        .left-box {
          
            border-radius: 25px;
            padding: 40px 30px;
            height: 100%;
        }

        .form-wrapper {
            background: #ffffff;
            border-radius: 20px;
            padding: 50px 40px;
        }

        input.form-control {
            height: 55px;
            border-radius: 12px;
        }

        .submit-btn {
            width: 200px;
            height: 50px;
            border-radius: 12px;
            font-size: 18px;
            border: none;
            background: #0d6efd;
            color: white;
        }

        @media(max-width: 992px){
            .left-box {
                margin-bottom: 30px;
            }
        }