@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap');

html,
body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

.section-2-pattern {
    background-image: url('../img/home-section2-pattern.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
    min-height: 200px;
}

.section-3-bg {
    background: #FFF4EF;
}

/* Home Section 2 Typography & Layout */
.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 48px;
    letter-spacing: 0%;
    color: #D45052;
}

.hero-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #323031 !important;
}

.course-card-img {
    height: 200px;
    object-fit: cover;
}

.kg-card-img {
    height: 220px;
    object-fit: cover;
}

.course-title {
    font-size: 1.25rem;
}

.course-desc {
    color: #323031 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
}

.course-desc-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0%;
    color: #323031 !important;
}

.course-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0%;
    color: #D28D8D;
}

.course-val {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0%;
    color: #323031 !important;
}

.course-link {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #F3743C;
}

/* Custom CSS for home page typography and buttons */
.text-teal {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: 0%;
    color: #D45052 !important;
}

.text-teal-course {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center;
    color: #D45052 !important;
}

.text-teal-sub-head {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #D45052 !important;
}

.text-secondary-course {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
    text-align: center;
    color: #323031 !important;
}

.text-teal-head {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #D45052 !important;
}

.text-orange {
    color: #F3743C !important;
}

.btn-orange {
    background-color: #F3743C;
    color: white;
    border: 1px solid #F3743C;
    transition: background-color 0.3s;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active {
    background-color: #F3743C !important;
    border-color: #F3743C !important;
    color: white !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-outline-orange {
    background-color: transparent;
    color: #F3743C;
    border: 1px solid #F3743C;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
    text-transform: uppercase;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus,
.btn-outline-orange:active {
    background-color: transparent !important;
    border-color: #F3743C !important;
    color: #F3743C !important;
    box-shadow: none !important;
    transform: none !important;
}

.bg-light-blue {
    background-color: #eaf6fc !important;
}

.border-light-blue {
    border: 1px solid #cceeff !important;
}

.course-outer-card {
    background-color: #FFF6F0;
    border: 1.5px solid #CCE1E8;
}

.border-charcoal {
    border: 1px solid #5D5D5D !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.border-charcoal-1 {
    border: 1px solid #5D5D5D !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    overflow: hidden;
}

/* Home Section 4 Typography & Layout */
.sec4-img-container {
    min-height: 500px;
}

.sec4-img {
    object-fit: cover;
    object-position: left;
    left: 0;
    top: 0;
}

.sec4-text-container {
    max-width: 650px;
}

.sec4-title {
    font-size: 2.7rem;
    line-height: 1.2;
}

.sec4-highlight-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
    color: #39B54A;
}

.sec4-body-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #323031 !important;
}

/* Home Section 5 */
.sec5-card-img {
    height: 120px;
    object-fit: cover;
}

.sec5-level {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0%;
    color: #323031 !important;
    padding-bottom: 8px;
}

.sec5-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0%;
    color: #D45052;
}

.sec5-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
    color: #323031 !important;
}

.sec5-card-footer {
    border-top: 1px solid #EAE0E0;
}

.sec5-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sec5-icon-link circle,
.sec5-icon-link path {
    transition: all 0.3s ease;
}

.sec5-icon-link:hover circle,
.sec5-icon-link:focus circle,
.sec5-icon-link:active circle {
    fill: none !important;
}

/* Home Section 6 */
.sec6-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0%;
    color: #D45052;
    padding-bottom: 20px;
}

.sec6-card-img {
    height: 240px;
    width: 100%;
    object-fit: cover;
    padding-bottom: 32px;
}

.sec6-card-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0%;
    color: #39B54A;
    padding-bottom: 12px;
    padding-left: 18px;
}

.sec6-card-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0%;
    color: #323031 !important;
    padding-left: 18px;

}

.sec6-join-btn {
    background-color: #F3743C;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #fff;
    padding: 18px 36px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(247, 124, 68, 0.2);
    
}

.sec6-join-btn:hover,
.sec6-join-btn:active {
    background-color: #F3743C !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: 0 4px 10px rgba(247, 124, 68, 0.2) !important;
}

/* Section 6 - Gallery Area */
.sec6-gallery-outer {
    position: relative;
    margin-top: 80px;
    padding: 60px 0 60px 40px;
}

.sec6-gallery-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -50vw;
    /* Stretch infinitely to the right */
    left: 0;
    background: #F2FFF3;

    /* Only round the left corners */
    z-index: 0;
}

.sec6-pattern-top-left {
    position: absolute;
    top: -70px;
    left: -50px;
    max-width: 180px;
    z-index: 10;
}

.sec6-pattern-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 200px;
    z-index: 1;
}

.sec6-gallery-content {
    position: relative;
    z-index: 2;
}

.sec6-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
}

.sec6-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.sec6-gallery-img-tall {
    grid-row: 1 / 3;
    height: 100%;
}

.sec6-gallery-img-normal {
    height: 150px;
}

.sec6-gallery-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    letter-spacing: 0%;
    color: #D45052;
    margin-bottom: 24px;
}

.sec6-gallery-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #D45052;
}

.sec6-gallery-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0%;
    color: #39B54A;
}

.sec6-gallery-btn {
    border: 1px solid #F3743C;
    background: transparent;
    color: #F3743C;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0%;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.sec6-gallery-btn:hover,
.sec6-gallery-btn:active {
    border: 1px solid #F3743C;
    background: transparent;
    color: #F3743C;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0%;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Mobile Responsive Font Sizes */
@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
        line-height: 36px;
    }

    .hero-subtitle {
        font-size: 14px;
        line-height: 24px;
    }
}