@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: inherit;
}

ul{
    list-style: none;
}

body{
    font-family: "Inter", sans-serif;
    font-size: 16px !important;
    color: #475467 !important;
    font-weight: 500 !important;
    padding-top: 80px; 
    overflow-x: hidden;
}
header{
    top: 0;
    right: 0;
}
.navbar-toggler-list{
    top: -300%;
}

.navbar-toggler-list.top-100 {
    top: 100px;
}
.navbar-toggler-list ul li{
    background: #e1e3e7;
    transition: all 0.1s ease-in-out;
}
.navbar-toggler-list ul li:hover{
    background: #a8a8a8;
    color: #000000;
}

.bg-body-tertiary{
    background-color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.s-2left{
    max-width:520px
}

.fa-solid{
    color: #6B46FF;
}

.cta-outline{
    border-radius: 999px;
    padding: 10px 24px;
    border: 1px solid #D0D5DD;
    color: #101828;
}

.cta-outline:hover{
    background: #F9F5FF;
}


.text-custom{
    color: #6B46FF;
}
.top-section h1{
    color: #101828;
    text-shadow: 0px 4px 4px #00000040;
    font-size: clamp(25px, 4vw, 60px);
    font-weight: 600;
    line-height: 1.3;
}

.hero-badge{
    background: #F9F5FF;
    color: #6B46FF;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 600;
}
.course-icon-front{
    position: absolute;
    top: 20px;
    left: 18px;
}
.features-heading{
    color: #101828;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 36px);
}

.features-sub{
    font-size: 20px;
    font-weight: 400;
    color: #667085;
}

.feature-card,.course-card{
    background: #fff;
    border-radius: 24px;
    padding: 32px 28px;
    border: 1px solid #edf0f7;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
    text-align: left;
    height: 100%;
    transition: all 0.3s ease;
}

.feature-card:hover,.course-card:hover{
    box-shadow: 0 1px 50px rgba(0, 0, 0, 0.12);
}

.feature-icon-wrap{
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
}

.feature-icon-bg{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-icon-front{
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.feature-title{
    font-size: 20px;
    font-weight: 600;
    color: #101828;
    margin-bottom: 8px;
}

.feature-text{
    font-size: 14px;
    font-weight: 400;
    color: #667085;
}

.sec4-heading{
    color: #101828;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 36px);
}

.sec4-sub{
    font-size: 18px;
    font-weight: 400;
    color: #667085;
}

.sec4-list li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #475467;
    margin-bottom: 12px;
}

.sec4-icon{
    flex: 0 0 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec4-icon img{
    max-width: 100%;
    height: auto;
}

.sec4-image{
    max-width: 100%;
    height: auto;
}

.phone-img-left{
  height: 518px;     
  width: auto;
  object-fit: contain;
  display: block;
  transform: translateY(-30px);
}

.phone-img-right{
  height: 494px;    
  width: auto;
  object-fit: contain;
  display: block;
}
.col-12.col-lg-6.d-flex img{
  min-width: 0;
}

.trending-text{
    font-size: 14px;
    line-height: 1.7;
    color: #4B5563;
}

.about-text{
    font-size: 14px;
    line-height: 1.7;
    color: #4B5563;
}
footer{
    background: #fafbfc;
}

.footer-link{
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover{
    color: #4B5563;
}

.footer-social{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer-social:hover{
    background: #6B46FF;
    color: #fff;
    border-color: #6B46FF;
}