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

html, body {
  overflow-x: hidden;
}


.container-fluid{
    background-color: black !important;
}

.background{
    height: 100vh;
    width: 100%;
    background-color: rgb(0, 112, 560) !important;
}

.background h1{
     color: white;
    font-weight: 700;
    text-align: center;
    padding: 197px;
    font-size: 47px;
    margin-bottom: 10px;
}

.background h2{
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 100;
    margin-top: -193px;
}

.navbar{

    z-index: 1000;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
        font-weight: 700 !important;
    font-family: 'Segoe UI', sans-serif;
    background-color: black !important;

}

.background button {
        padding: 19px;
    margin-top: 19px;
        background-color: rgb(0, 126, 560);
    border-radius: 7px;
    color: white;
    font-size: 20px;
    margin-left: 43%;
        border: none;
}

.navbar-nav {
    margin-left: auto; 
        cursor: pointer;
        margin-right: 40px;
        font-weight: 500;
        
}

.navbar-brand{
        margin-left: 55px;
}

.background button:hover{
       background: rgb(0, 112, 220) !important;
}

.courses-section{
    min-height: 100vh;
}

.courses-section h1{
    color: black;
    font-weight: 700;
    text-align: center;
        padding: 44px;
            font-size: 32px;
}

.main{
    display: flex;
    justify-content: center;
    gap: 30px;
}

.boxes{
  display: flex;
  justify-content: center;
  gap: 30px;
   
}


.box1{
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        width: 28%;
    margin-top: -491px;
    margin-left: 73px;
    height: 172px;
    position: relative;
}

.box1 i{
    text-align: center;
}

.box1 h1{
    text-align: center;
        font-size: 20px;
}

.box1 h2{
    text-align: center;
        font-size: 16px;
    font-weight: 400;
}

.box1 .icon{
    color: rgb(0, 112, 560);
    text-align: center;
        font-weight: 1000;

    
}

.box3{
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 28%;
    margin-top: -491px;
    margin-right: 73px;
    height: 172px;
    position: relative;
}

.box2{
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 28%;
    margin-top: -491px;
    margin-right: auto;
    margin-left: auto;
    height: 172px;
    position: relative;
}

.box1 button{
    background-color: white;
    border-color: rgb(0, 112, 560);
    color: rgb(0, 112, 560);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
     text-align: center;
         margin-left: auto;
    border-radius: 6px;
    border-width: thin;
    font-size: 15px;
    margin-right: auto;
    padding: 6px;
    position: relative;
}

.box2 i, .box3 i{
     color: rgb(0, 112, 560);
     display: flex;
  justify-content: center;
    align-items: center;
        font-weight: 1000;
        font-size: 30px;
}

.box2 h2,.box3 h2{
        text-align: center;
        font-size: 20px;
        position: relative;

}

.box2 h3,.box3 h3{
        text-align: center;
        font-size: 16px;
    font-weight: 400;
}

.box2 button, .box3 button{
    background-color: white;
    border-color: rgb(0, 112, 560);
    color: rgb(0, 112, 560);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
     text-align: center;
         margin-left: auto;
    border-radius: 6px;
    border-width: thin;
    font-size: 15px;
    margin-right: auto;
    padding: 6px;
}

.box1 button:hover{
        background-color: rgb(0, 112, 220) !important;
        color: white !important;
    
}

.box1 button:active {
    background-color: rgb(0, 80, 180) !important;
    color: white !important;
}

.box2 button:hover{
        background-color: rgb(0, 112, 220) !important;
        color: white !important;
    
}

.box2 button:active {
    background-color: rgb(0, 80, 180) !important;
    color: white !important;
}

.box3 button:hover{
        background-color: rgb(0, 112, 220) !important;
        color: white !important;
    
}

.box3 button:active {
    background-color: rgb(0, 80, 180) !important;
    color: white !important;
}



.why{
    background-color: rgba(80,80,80,0.03);
    height: 50vh;
    width: 100%;
        margin-top: -244px;
}

.why h1{
    text-align: center;
    font-weight: 700;
    font-size: 30px;
    padding: 20px;
}

.features{
    gap: 80px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
   margin: 50px auto;
   align-items: flex-start;
}

.why .features .feature:nth-of-type(1) i{
    color: #007bff;
    display: block; 
    align-items: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.why .features .feature:nth-of-type(2) i{
    color: #007bff;
      flex: 1;
    min-width: 250px;
    max-width: 350px;

}


.why .features .feature:nth-of-type(3) i{
    color: #007bff;
      flex: 1;
    min-width: 250px;
    max-width: 350px;

}

.why .feature h3 {
    font-size: 20px;
    margin: 15px 0 10px 0; 
    color: #333;
}

.why .feature p {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    max-width: 200px; 
    margin: 0; 
}

.meet h1{
        text-align: center;
    color: black;
        font-weight: 700;
    font-size: 30px;
    padding: 20px;
}

.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
      padding: 61px;
    
}

.memb1, .memb2, .memb3, .memb4 {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  text-align: center;
}

.grey{
    background-color: rgba(80,80,80,0.03);
    height: 66vh;
    width: 100%;
    text-align: center;
}

.grey h1{
     text-align: center;
    font-weight: 700;
    font-size: 30px;
    padding: 20px;
  
}

.prices{
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
        padding: 62px;
            margin-top: -60px
}

.price, .price1{
    overflow: hidden;
    text-align: center;
    min-height: 300px;
    height: 300px;
        padding: 26px;

}

.whitebox, .whitebox1{
    background-color: #ffffff;
    border-radius: 10px;
    justify-content: center; 
    align-items: center;
    text-align: center;    
     display: flex; 
         height: 245px;

}

.price h2, .price1 h2{
    padding: 14px;
    font-size: 21px;
}

.price h1, .price1 h1{
        margin-top: -30px;
        font-weight: 500;
        color: #007bff;
}

.price button{
    color: #007bff;
    border-width: thin;
    border-radius: 6px;
        width: 288px;
    background-color: white;
    height: 34px;
}

.price1 button{
       color: white;
    border-width: thin;
    border-radius: 6px;
        width: 288px;
    background-color: #007bff;
    height: 34px;
}

.price button:hover{
    background-color: #007bff;
    color: white;
    transition: 10ms;
}

.whitebox1{
    border-color: #007bff;
    border-style: solid;
    border-width: 1px;
}

.FAQ h1{
        text-align: center;
    font-weight: 700;
    font-size: 30px;
    padding: 20px;
            margin-top: 0px;
    font-weight: 700;
}

.accordion{
    padding: 60px;
}

.Contact h1{
    text-align: center;
    color: white;
}

.contactback{
    background-color: #333333;
    height: 73vh;
}

.copyright{
    background-color: black;
    width: 100%;
    height: 10vh;
    align-items: center;
    justify-content: center;
}

.copyright p{
    color: white;
    font-size: 10px;
    text-align: center;
    
    
}