/* about page design */
.about-hero-section{
    padding: 3rem 0 2rem 0;
    text-align: center;
    font-weight: 400;
}
.about-hero-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0px;
    color: #101828;
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: 400;
}
.about-hero-intro a{
    text-decoration: underline;
    font-weight: 500;
    color: var(--orange);
}
.about-hero-intro{
    font-size: clamp(1rem, 0.938vw, 1.125rem);
}
.blue{
    color: var(--blue);
}
.about-hero-description{
    border-radius: 16px;
    border: 0.2px solid rgba(0, 0, 0, 0.35);
    background: #F8FAFC;
    box-shadow: 7px 0 10px -6px rgba(0, 0, 0, 0.10);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-left: 30px solid var(--orange);
    font-size: clamp(1rem, 0.938vw, 1.125rem);
}
.about-hero-description .content{
    padding: 2rem 0px 5px 2rem;
    text-align: left;
    line-height: 170%;
}
.about-hero-description img {
    align-self: end;
}
.about-section-2{
    padding: 2rem 0;
}
.about-section-2-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}
.about-section-2-container .section-2-grid{
    position: relative;
    border-radius: 16px;
    padding: 1.5rem;
    color: var(--white);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.about-section-2-container .section-2-grid.orange{
    background: linear-gradient(180deg, #FF7F46 0%, #DA581E 100%);
}
.about-section-2-container .section-2-grid.green{
    background: linear-gradient(180deg, #1AB69D 0%, #0E937E 100%);
}
.about-section-2-container .section-2-grid.red{
    background: linear-gradient(180deg, #FF5B5C 0%, #E91A1B 100%);
}
.about-section-2 .section2-icons{
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.about-section-2-container .section-2-grid h4{
    margin: 1rem 0;
    width: 80%;
}
.about-section-2-container .section-2-grid p{
    margin: 10px 0 0 0;
}
.about-section-3{
    padding: 2rem 0;
}
.about-section-3 .container{
    background: rgba(255, 250, 248, 0.83);
    background: url(../images/pages/abt-section-3-bg.png);
    background-position: right center;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #fe7f46;
}
.about-section-3 .container h4{
    text-align: center;
    margin: 10px 0;
    color: #1C1C1C;
    font-size: 30px;
    font-weight: 500;
    text-transform: capitalize;
}
.about-section-3 ul{
    list-style-type: none;
    margin-bottom: 0;
}
.about-section-3 ul li{
    display: flex;
    gap: 15px;
    color: #1C1C1C;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 500;
    margin: 10px 0;
    align-items: center;
}
.about-section-4{
    padding: 2rem 0;
}
.about-section-4 .container{
    padding: 1.5rem;
    border-radius: 16px;
    background: #283043;
    color: white;
    box-shadow: -11px -1px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
}
.about-section-4 .container .about-stats{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    text-align: center;
    
}
.about-section-4 .about-stats h4{
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-style: normal;
    font-family: rubik;
    font-weight: 600;
    margin: 0.5rem 0;
}
.about-section-4 .about-stats span{
    color: #FAFAFA;
    font-family: Rubik;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 500;
}
.about-section-4 .about-stats h4.blue{
    color: #155DFC;
}
.about-section-4 .about-stats h4.purple{
    color: #9810FA;
}
.about-section-4 .about-stats h4.green{
    color: #00A63E;
}
.about-section-4 p{
    text-align: center;
    margin: 1.25rem 0 0 0;
    color: #FAFAFA;
    font-family: Rubik;
    font-size: clamp(1rem, 1.042vw, 1.25rem);
    font-weight: 600;
}
.about-section-4 p a{
    color: var(--orange);
    font-weight: 700;
}
.about-section-5{
    text-align: center;
    padding: 2rem 0;
}
.about-section-5 h4{
    color: #202020;
    font-size: 30px;
}
.about-section-5 p{
    color: #202020;
    font-family: Rubik;
    font-size: clamp(1rem, 1.042vw, 1.25rem);
    font-weight: 400;
    width: 60%;
    margin: auto;
}
.about-section-6{
    padding: 2rem 0;
    background: #FFF3ED;
    text-align: center;
}
.about-section-6 h4{
    color: #FF7F00;
    font-size: clamp(1.25rem, 1.67vw, 2rem);
    font-weight: 400;
    margin: 5px 0 0 0;
}






/* Grade apge design */
.grades-hero-section{
    background: url(../images/pages/grade-hero-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 4rem 0;
    text-align: center;
}
.grades-hero-section h2{
    color: #FFF;
    font-family: Lalezar;
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: 400;
    margin: 10px 0;
}
.grades-hero-section p{
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    font-weight: 500;
    width: 65%;
    margin: 10px auto;
}
.grades-section-2{
    padding: 4rem 0 2rem 0;
}
.grades-section-2 .grades-main-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
}
.grades-section-2 .grades-main-container .grade-grid{
    border: 2px solid;
    border-radius: 14px;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: pointer;
}
.grades-section-2 .grades-main-container .grade-grid h5{
    color: #101828;
    font-size: 30px;
}
.grades-section-2 .grades-main-container .grade-grid.purple{
    border-color: #8B5CF6;
    background: #F4EFFF;
}
.grades-section-2 .grades-main-container .grade-grid.green{
    border-color: #10B981;
    background: #F0FFFA;
}
.grades-section-2 .grades-main-container .grade-grid.orange{
    border-color: #F59E0B;
    background: #FFF8ED;
}
.grades-section-3{
    padding: 2rem 0 4rem 0;
}
.grades-section-3 .container{
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    padding: 2rem;
}
.grades-section-3 p{
    color: #3B3C3C;
    width: 80%;
    margin: auto;
    text-align: center;
    font-family: Rubik;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 500;
}
.grade-section-4{
    background: #F9FAFB;
    padding: 4rem 0;
}
.grade-section-4 .content-half, .grade-section-4 .image-half{
    align-self: center;
}
.grade-section-4 .grade-4-subheading{
    border-radius: 50px;
    padding: 8px 1rem;
    background: #FE7B37;
    display: flex;
    width: fit-content;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    font-weight: 500;
}
.grade-section-4 h4, .grade-section-5 h4{
    color: #101828;
    margin: 1rem 0 10px 0;
    font-family: Lalezar;
    font-size: clamp(1.5rem, 1.875vw, 2.25rem);
    font-weight: 400;
}
.grade-section-4 p, .grade-section-5 p{
    color: #3B3C3C;
    font-family: Rubik;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 400;
}
.grade-section-4 .grades-sec4-grid-container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 10px 0;
}
.grade-sec4-grid{
    display: flex;
    gap: 1rem;
    align-items: center;
    border-radius: 14px;
    padding: 1rem;
    border: 1px solid #E5E7EB;
    background: #FFF;
}
.grade-sec4-grid p{
    margin-bottom: 0;
}
.grade-sec4-box{
    border-radius: 14px;
    background: #FE7B37;
    padding: 1.5rem;
}
.grade-sec4-box p{
    color: #FFF;
    font-family: Rubik;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 600;
    margin-bottom: 0;
}
.image-box{
    width: fit-content;
    border-radius: 16px;
    border: 10px solid #FFF;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 5px;
    margin: auto;
}
.image-box img{
    border-radius: 10px;
}

.grade-section-5{
    padding: 4rem 0;
}
.grade-section-5 .grade-sec5-subheading{
    border-radius: 50px;
    padding: 8px 1rem;
    background: #00A63E;
    display: flex;
    width: fit-content;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    font-weight: 500;
}
.grade-sec5-grid-container{
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}
.grade-sec5-grid-container .grade-sec5-grid{
    text-align: center;
    padding: 1.5rem;
    border-radius: 10px;
    color: #fff;

}
.grade-sec5-grid-container .grade-sec5-grid h5{
    font-family: Rubik;
    font-size: clamp(1.5rem, 1.875vw, 2.25rem);
    font-weight: 600;
}
.grade-sec5-grid-container .grade-sec5-grid span{
    font-size: clamp(1rem, 1.042vw, 1.25rem);
    font-weight: 400;
}
.grade-sec5-grid-container .grade-sec5-grid.blue{
    background: linear-gradient(180deg, #6796FF 0%, #0048E8 100%);
}
.grade-sec5-grid-container .grade-sec5-grid.purple{
    background: linear-gradient(180deg, #C779FF 0%, #8503E3 100%);
}
.grade-section-5 .content-half, .grade-section-5 .image-half{
    align-self: center;
}

.grade-section-6{
    text-align: center;
    color: #fff;
}
.grade-section-6 .container{
    padding: 4rem 0;
    border-radius: 10px;
    background: linear-gradient(89deg, #000B24 0.23%, #002A87 35%, #2355C3 68.79%, #001E61 99.47%);
}
.grade-section-6 h4{
    font-family: Rubik;
    font-size: clamp(1.5rem, 1.875vw, 2.25rem);
    font-weight: 700;
}
.grade-section-6 p{
    font-family: Rubik;
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    font-weight: 500;
    margin: 10px 0;
}
.grade-section-6 .sec6-btn-container{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.grade-section-6 .sec6-btn-container .orange-btn{
    border-radius: 10px;
    background: #FF7F46;
    padding: 8px 12px;
    border: 2px solid #FF7F46;
}
.grade-section-6 .sec6-btn-container .orange-btn a,
.grade-section-6 .sec6-btn-container .white-btn a{
    color: #fff;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    font-weight: 500;
}
.grade-section-6 .sec6-btn-container .white-btn{
    border-radius: 10px;
    background: transparent;
    padding: 8px 12px;
    border: 2px solid #fff;
}

/* features page design */

.features-hero-section {
    background: url(../images/pages/features-hero.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5rem 0 2rem 0;
    text-align: center;
}
.features-hero-section h5{
    color: #FFF;
    font-family: Lalezar;
    font-size: clamp(1.5rem, 1.875vw, 2.25rem);
    font-weight: 400;
}
.features-hero-section h2{
    color: #FFF;
    font-family: Lalezar;
    font-size: clamp(2.25rem, 3.125vw, 3.75rem);
    font-weight: 400;
}
.feature-section-2{
    padding: 4rem 0;
}
.features-grid-container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}
.fetures-grid{
    display: flex;
    gap: 1.5rem;
    /* border: 1px solid grey; */
}
.features-vertical-line{
    height: 100%;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #FFB86A 0%, #FFDF20 100%);
}
.features-sec2-icon-box{
    display: flex;
    min-width: 70px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
}
.features-sec2-icon-box img{
    width: 64px;
    aspect-ratio: 1/1;
}
.features-grid-contentbox{
    padding: 1.5rem;
    border-radius: 24px;
    border: 1px solid #E5E7EB;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFF 100%);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.features-grid-contentbox h4{
    color: #101828;
    font-family: Lalezar;
    font-size: clamp(1.5rem, 1.875vw, 2.25rem);
    font-weight: 400;
}
.features-grid-contentbox .features-sec2-subheading{
    font-family: Rubik;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 600;
    background: linear-gradient( #F54900 0%, #D08700 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10PX;
}
.features-grid-contentbox p{
    color: #373737;
    font-family: Rubik;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 400;
}
.features-grid-contentbox .orange-box{
    padding: 10px 15px;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(90deg, #FF6900 0%, #F0B100 100%);
}
.features-grid-contentbox .italic-box{
    border-left: 4px solid #FF6900;
    padding: 10px 15px;
    border-radius: 10px;
    font-style: italic;    
}
.pad-025{
    padding: 0.25rem 0;
}
.features-stats-container{
    display: grid;
    grid-template-columns: 1fr 5px 1fr 5px 1fr;
    gap: 10px;
    text-align: center;
}
.vert-border{
    width: 2px;
    height: 100%;
    background: #FF7F00;
}
.features-stats-grid{
    padding: 1rem 0;
}
.features-stats-grid h5{
    color: #155DFC;
    font-family: Lalezar;
    font-size: clamp(1rem, 1.458vw, 1.75rem);
    font-weight: 500;
}
.features-stats-grid span{
    color: #464647;
    font-family: Rubik;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    font-weight: 500;
}
.features-grid-contentbox hr{
    border-top: 1px solid #E5E7EB;
    opacity: 1;
    margin: 0 0 1rem 0;
}

.features-sec2-3container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.features-sec2-3grid{
    padding: 1rem;
    display: flex;
    align-items: start;
    gap: 10px;
    border-radius: 14px;
    border: 1px solid #FFD6A8;
    background: #FFF;
}
.features-sec2-3grid p{
    color: #313131;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    margin-bottom: 0;
    font-weight: 400;
}



/* career page design */
.career-hero-section{
    background: linear-gradient(135deg, #FFF7ED 0%, #FEFCE8 50%, #FFF 100%);
    padding: 4rem 0 2rem 0;
}


.career-hero-subheading{
    border-radius: 50px;
    padding: 8px 1rem;
    display: flex;
    width: fit-content;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: #CA3500;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    font-weight: 500;
    background: #FFEDD4;
}
.career-hero-section h2{
    font-family: Lalezar;
    font-size: clamp(2.5rem, 3.438vw, 4.125rem);
    font-weight: 400;
    line-height: 100%;
}
.career-hero-section .career-hero-title1{
    margin-top: 10px;
    color: #101828;
}
.career-hero-section .career-hero-title2{
    background: linear-gradient(90deg, #FF6900 0%, #F0B100 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.career-hero-description{
    color: #373737;
    font-family: Rubik;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 400;
    margin: 1rem 0;
}
.career-hero-btn{
    width: fit-content;
    margin-bottom: 12px;
    border-radius: 50px;
    padding: 12px 16px;
    background: linear-gradient(90deg, #FF6900 0%, #F0B100 100%);
    
}
.career-hero-btn a{
    color: #FFF;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    font-weight: 500;
}

.career-hero-2half{
    border-radius: 16px;
    border: 1px solid #F3F4F6;
    background: #FFF;
    box-shadow: 0 4px 11.3px -12px rgba(0, 0, 0, 0.25);
    padding: 1rem;
}
.career-2half-grid-container {
    display: grid;
    grid-template-columns: 60% auto;
    gap: 10px;
    align-items: flex-end;
    justify-content: space-between;
}
.career-hero-2half h4{
    color: #101828;
    font-size: 26px;
}
.career-hero-2half p{
    color: #39393A;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 400;
}
.career-sec1-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 10px 0;
}
.career-sec1-grid{
    display: flex;
    gap: 1rem;
    align-items: center;
    border-radius: 14px;
    padding: 1rem;
    border: 1px solid #E5E7EB;
    background: #FFF;
}
.career-sec1-grid .content p {
    color: #3B3C3C;
    font-family: Rubik;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 400;
    margin-bottom: 0;
}

.career-section-2{
    padding: 4rem 0;
}
.career-section-2 h4{
    color: #101828;
    font-family: Lalezar;
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: 400;
}
.career-section-2 p.orange{
    color: #FE7000;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 500;
}
 .career-sec2-grid-container{
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
 }
.career-sec2-grid{
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    background: #FFF;
    padding: 1rem 1.5rem;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.career-sec2-grid h5{
    font-size: 24px;
    font-weight: 500;

}
.career-sec2-grid ul{
    display: flex;
    gap: 1rem;
    list-style-type: none;
    padding-left: 0;
    align-items: center;
    margin-bottom: 0;
}
.career-sec2-grid button{
    border-radius: 50px;
    padding: 12px 16px;
    border: none;
    background: linear-gradient(90deg, #FF6900 0%, #F0B100 100%);
    display: flex;
    gap: 10px;
    color: #fff;
}

/* .contact page design */
.contact-hero-section{
    padding: 4rem 0;
    background: url(../images/pages/contact-hero-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.contact-subheading{
    border-radius: 50px;
    padding: 8px 1rem;
    display: flex;
    width: fit-content;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    font-weight: 500;
    background: #155DFC;
}
.contact-title{
    background: linear-gradient(90deg, #FE7B37 0%, #F30 50%, #FF48A6 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Lalezar;
    margin-top: 10px;
    font-size: clamp(2.5rem, 3.75vw, 4.5rem);
    font-weight: 400;
}
.contact-description{
    color: #363637;
    font-family: Rubik;
    width: 80%;
    font-size: clamp(1rem, 1.042vw, 1.25rem);
    font-weight: 400;
}
.contact-hero-section img{
    display: flex;
    align-items: center;
    justify-self: end;

}
.contact-section-2{
    background: url(../images/pages/contact-section2-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 2rem 0;
}
.contact-section-2-container{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    align-items: center;
    justify-items: center;
}
.contact-sec2-grid{
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-top: 5px solid #FF7F00;
    padding: 2rem 1.5rem;
    text-align: center;

}
.contact-sec2-grid h4{
    color: #101828;
    font-size: clamp(1.5rem, 1.875vw, 2.25rem);
    font-weight: 500;
    margin: 1rem 0 10px 0;
}
.contact-sec2-grid p{
    color: #353536;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 170%;
}
.contact-section-3{
    padding: 4rem 0;
}
.contact-form{
    border-radius: 24px;
    border: 1px solid #F3F4F6;
    background: #FFF;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 2rem;
    margin-bottom: 10px;
}
.contact-form h4{
    color: #FF7F00;
    font-family: Lalezar;
    font-size: clamp(1.5rem, 1.875vw, 2.25rem);
    font-weight: 400;
}
.contact-form p{
    color: #4A5565;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 400;
}
.contact-input-box{
    padding: 10px 0;
}
.contact-input-box label{
    color: #3B3B3B;
    font-size: clamp(0.875rem, 0.833vw, 1.125rem);
    font-weight: 600;
    margin-bottom: 6px;
}
.contact-input-box label span{
    color: #FB2C36;
}
.contact-input-box input, .contact-input-box textarea{
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #E5E7EB;
    background: #F3F3F5;
}
.contact-form button{
    border-radius: 10px;
    border: 2px solid #FF7F00;
    width: 100%;
    padding: 10px;
    background: #FF7F46;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 700;
}
.contact-sec3-image-half{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    
}
.contact-sec3-image-half img{
    width: 100%;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.00);
    /* box-shadow: 0 0px 25px 10px hsla(305, 100%, 50%, 0.25); */
}
.contact-sec3-image-half .image-box{
    width: 100%;
}
.contact-sec-3content{
    border-radius: 14px;
    background: linear-gradient(135deg, #155DFC 0%, #6B99FF 100%);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
    padding: 1.5rem;
    color: #fff;
    height: fit-content;
}
.contact-sec-3content h4{
    color: #FFF;
    font-size: clamp(1.25rem, 1.67vw, 2rem);
    font-weight: 500;
}
.contact-sec-3content p{
    color: rgba(255, 255, 255, 0.90);
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    font-weight: 500;
    margin-bottom: 0;
}
.contact-inputbox-partition{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* grade modal design */
.grade-modal{

}
.grade-modal .modal-header{
    background: linear-gradient(to bottom, #ffece0 0%, #ffffff 100%);
    padding: 1rem;
    border: none;
    position: relative;
}
.grade-modal .modal-header .btn-close{
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: transparent;
    aspect-ratio: 1/1;
    height: 30px;
    width: auto;
}
.grade-modal .modal-header h4{
    color: #FF7F00;
    font-size: 28px;
    font-weight: 400;
}
.grade-modal .subjects-bar {
    background-color: #f4f7fb;
    color: #1a4a9c;
    padding: 12px 1rem;
    font-weight: 600;
    font-size: 1.05rem;
}
.grade-modal .modal-body {
    padding: 2rem 1rem;
    color: #555;
    background-image: url(../images/pages/modal-img.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}
.grade-modal .modal-body p{
    color: #4E4E5B;
    font-size: clamp(1rem, 0.938vw, 1.125rem);
    width: 90%;
    font-weight: 400;
    margin-bottom: 0;
}
.grade-modal .modal-footer{
    /* border-radius: 20px 20px 0 0; */
    background: linear-gradient(93deg, #F38603 17.23%, #FF5882 194.69%);
    color: white;
    padding: 1rem;
    text-align: center;
    font-weight: 500;
    font-size: 1.1rem;
}















@media only screen and (min-width: 1400px) {
    
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .grades-section-2 .grades-main-container {
        gap: 1rem;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .about-section-2-container {
        grid-template-columns: 1fr;
    }
    .grades-section-2 .grades-main-container {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 1rem;
    }
    .about-section-5 p, .grades-section-3 p {
        width: 100%;
    }
    .grade-section-4 .content-half, .grade-section-4 .image-half {
        margin-top: 1rem;
    }
    .grade-section-4, .career-section-2{
        padding: 2rem 0;
    }
    .grade-section-5 .image-half{
        order: 2;
    }
    .image-box{
        margin: 1rem auto;
    }
    









    .contact-section-3{
        padding: 2rem 0;
    }
    .contact-section-2-container {
        gap: 10px;
        grid-template-columns: 0fr 2fr 0fr;
    }
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 576px) and (max-width: 768px) {
    .about-section-2-container {
        grid-template-columns: 1fr;
    }
    .about-section-5 p {
        width: 100%;
    }
    .about-hero-description img{
        display: none;
    }
    .about-hero-description .content {
        padding: 1rem 1rem 1rem 1rem;
    }
    .grades-section-2 .grades-main-container {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
    .about-section-5 p, .grades-section-3 p, .grades-hero-section p {
        width: 100%;
    }
    .grade-section-4 .content-half, .grade-section-4 .image-half {
        margin-top: 1rem;
    }
    .grade-section-4{
        padding: 2rem 0;
    }
    .grade-section-5 .image-half{
        order: 2;
    }
    .image-box{
        margin: 1rem auto;
    }
    .grade-section-6 .container{
        padding: 2rem 1rem;
    }
    .career-sec2-grid {
        padding: 0.5rem 0.5rem;
    }
    .contact-section-2-container {
        grid-template-columns: 1fr;
    }
    .contact-hero-section img{
        display: none;
    }
    .about-section-3 .container {
        background: none;
        box-shadow: 0px 0px 30px 0px #ff7f46;
        border: 1px solid #fe7f46;
        border-radius: 10px;
    }

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 576px) {
    .about-section-2-container {
        grid-template-columns: 1fr;
    }
    .about-hero-description{
        flex-direction: column;
    }
    .about-section-5 p {
        width: 100%;
    }
    .about-hero-description .content {
        padding: 1rem 1rem 1rem 1rem;
    }
    .about-hero-description img {
        align-self: center;
    }
    .about-section-4 .container .about-stats {
        grid-template-columns: 1fr;
    }
    .about-section-3 .container {
        background: none;
        box-shadow: 0px 0px 30px 0px #ff7f46;
        border: 1px solid #fe7f46;
        border-radius: 10px;
    }
    
    .grades-section-2 .grades-main-container {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .about-section-5 p, .grades-section-3 p, .grades-hero-section p, .contact-description {
        width: 100%;
    }
    .grade-section-4 .content-half, .grade-section-4 .image-half {
        margin-top: 1rem;
    }
    .grade-section-4, .feature-section-2, .career-section-2, .contact-hero-section{
        padding: 2rem 0;
    }
    .grade-section-5 .image-half{
        order: 2;
    }
    .image-box{
        margin: 1rem auto;
    }
    .grade-section-6 .container{
        padding: 2rem 1rem;
    }
    .features-grid-contentbox {
        order: 2;
        padding: 1rem;
    }
    .features-grid-iconbox {
        order: 1;
    }
    .fetures-grid {
        flex-direction: column;
    }
    .features-vertical-line {
        height: 4px;
        width: 100%;
    }
    .features-sec2-icon-box{
        flex-direction: row;
    }
    .features-sec2-3container, .contact-section-2-container {
        grid-template-columns: 1fr;
    }
    .features-grid-container {
        gap: 2.5rem;
    }
    .career-sec2-grid {
        padding: 0.5rem 0.5rem;
    }
    .career-sec2-grid{
        flex-direction: column;
    }
    .career-sec2-grid button {
        padding: 8px 10px;
        align-self: flex-end;
    }
    .career-2half-grid-container{
        grid-template-columns: 1fr;
    }
    img.career-hero-img {
        margin: auto;
    }
    .contact-inputbox-partition{
        grid-template-columns: 1fr;
    }
}


/* Extra extra small devices (phones, 600px and down) */
@media only screen and (max-width: 360px) {
    .features-stats-container {
        display: grid;
        grid-template-columns: 1fr 4px 1fr 4px 1fr;
        gap: 1px;
    }
 }