@import url('https://fonts.googleapis.com/css2? family= Montserrat:wght@100 & display=swap');
@import url('https://fonts.googleapis.com/css2? family= Montserrat:wght@300 & family= Mulish:wght@300 & display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.main {
    padding-top: 8.75rem;
}

#banner {
    background: linear-gradient(44deg, #398FF4 0%, #C6E0FF 100%);
    width: 100%;
    position: relative;
    border-radius: 0rem 1.25rem 1.25rem 0rem;
}


#banner .banner-content {
    display: flex;
    width: 70%;
    /* height: calc(100vh - 8.75rem); */
    min-height: fit-content;
    border-radius: 0rem 1.25rem 1.25rem 0rem;
    position: relative;
    background: linear-gradient(44deg, #398FF4 0%, #C6E0FF 100%);
    z-index: 1;
}

#banner .blank {
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 60%;
}

#banner .image {
    width: 45%;
    right: 0;
    top: 50%;
    height: 60vh;
    border-radius: 1.25rem 0rem 0rem 1.25rem;
    z-index: 10;
    object-fit: cover;
    position: absolute;
    transform: translateY(-50%);
}




#banner .image img {
    min-height: 30vh;
    width: 100%;
    border-radius: 1.25rem 0rem 0rem 1.25rem;
    /* box-shadow: 0px 32px 44px 0px #818A8C; */

}

#banner .text-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

}

#banner .text-content .title {
    
    color: #001A49;
    font-family: Montserrat;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem;
    width: 91%;
    }

#banner .text-content .description {
    color: #4F596A;
    font-family: Mulish;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem;
   
    text-align: justify;
    width: 70%;
}

#teachers {
    background: #FFF;
    padding: 11.25rem 0;
    width: 100%;

}


#teachers .teacher-content {
    display: flex;
    align-items: stretch;
    gap: 4.6rem;

}

#teachers .teacher-content .content-text {
    display: flex;
    justify-content: end;
    flex-direction: column;
    gap: 3.5rem;
}

#teachers .content-description p {
    color: #4F596A;
    font-family: Mulish;
    font-size: 1.25rem;
    padding-bottom: 1.62rem;
    
}
#teachers .list-content{
    margin-left: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.7rem;
}
#teachers  .list{
    list-style-image: url('/assets/imgs/two-circles.png');
    font-weight: 400;
    color: #4F596A;
    font-family: Mulish;
    font-size: 1.5rem;
    font-weight: 400;
}

#teachers .content-title h2 {
    color: #072153;
    font-family: Montserrat;
    font-size: 2.5rem;
    line-height: 3.5rem;
    

    
}
#teachers .content-picture{
        object-fit:cover;
        display:flex;
        align-items:center;
        border-radius:20px;
}
#teachers .content-picture img{
    width:26rem;
    height:auto;
    display:flex;
    align-items:center;
}
#banner .banner-content  .buttons{
    display: flex;
    align-items: center;
    gap: 2.62rem;
}


/*enterprises*/


#teacher {
    background: #6ABE9F;
    width: 100%;
    

}


#teacher .teacher-content {
    display: flex;
    padding-bottom: 2rem;
    align-items: stretch;
    gap: 4.6rem;

}

#teacher .teacher-content .content-text {
    display: flex;
    justify-content:end;
    flex-direction: column;
    gap: 3.5rem;
}

#teacher .content-description p {
    color: #4F596A;
    font-family: Mulish;
    font-size: 1.25rem;
}

#teacher .content-title h2 {
    color: #072153;
    font-family: Montserrat;
    font-size: 2.5rem;
    line-height: 3.5rem;
    font-weight: 700;
    
}
#teacher .content-picture{
        object-fit:cover;
        display:flex;
        align-items:center;
        border-radius:20px;
}
#teacher .content-picture img{
    width:26rem;
    height:auto;
    display:flex;
    align-items:center;
}


@media screen and (max-width: 1400px) {

    #trainning .trainning-content {
        width: 100%
    }

    #trainning .trainning-content .card-trainning {

        flex-wrap: wrap;
    }

    #trainning .trainning-content .card-trainning .card {
        height: 100%;
        width: 100%;
    }

    #trainning .trainning-content .card-trainning img {
        height: 100%;
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {

    #certifying-trainning .content-banner .form-group .form-content {
        flex-wrap: wrap;

    }

    #trainning .trainning-content {
        width: 100%
    }

    #trainning .trainning-content .card-trainning {

        flex-wrap: wrap;
    }

    #trainning .trainning-content .card-trainning .card {
        height: 100%;
        width: 100%;
    }

    #trainning .trainning-content .card-trainning img {
        height: 100%;
        width: 100%;
    }
    #banner{
        border-radius:none;
        width:100%;
        background:none; 
    }
    #banner .blank{
        display:none;
    }
    #banner .banner-content{
        width:100%;
        border-radius:1.25rem;
        height:auto;
    }
    #banner .text-content {
        width:100%;
        padding:10px;
    
    }
    #banner .image{
        /* position: relative;
        width: 100%;
        height: auto;
        transform:none;
        top:none;
        left:none;
        border-radius: 1.25rem ; */

    }
    #banner .text-content .description{
        width:100%;
    }
    #banner .image{
        border-radius:1.25rem;
    }
    #informations  .content-informations .items{
        width:100%;

    }
    #informations  .content-informations .items .item{
        border-top: 1px solid #E7EAEB;
        border-bottom: 1px solid #E7EAEB;
    }
    
    #informations  .content-informations{
        flex-direction:column;
        width:100%;
    }

}

@media screen and (max-width: 992px) {

   
    #trainning .trainning-content {
        width: 100%
    }

    #trainning .trainning-content .card-trainning {
        width: calc((100% / 3) - 2.2rem);
        flex-wrap: wrap;
        height: 100%;
    }
    #trainning .trainning-content .card-trainning .fee {
        left: 60%;
        top: 0;
    }
    #banner{
        border-radius:none;
        width:100%;
        background:none;
        
    }
    #banner .blank{
        display:none;
    }
    #banner .banner-content{
        width:100%;
        border-radius:1.25rem;
        height:auto;
    }
    #banner .text-content {
        width:100%;
        padding:10px;
    }
    #informations  .content-informations .items .item{
        border-top: 1px solid #E7EAEB;
        border-bottom: 1px solid #E7EAEB;
    }
    
    #informations  .content-informations{
        flex-direction:column;
        width:100%;
    }
    
    #teachers .circle-img{
        display:none;
    }
    #teachers .teacher-content{
    display:block;
    align-items:center;
    justify-content:center;
}

#teachers .teacher-content .content-text{
    align-items:center;
   
}
#teachers .content-picture{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
}
    #teacher .circle-img{
        display:none;
    }
    #teacher .teacher-content{
    display:block;
    align-items:center;
    justify-content:center;
}

#teacher .teacher-content .content-text{
    align-items:center;
   
}
#teacher .content-picture{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
}
#teachers .content-title h2{
    text-align:center;
}
#teachers .content-description p{
    text-align:center;
}
#teacher .content-title h2{
    text-align:center;
}
#teacher .content-description p{
    text-align:center;
}
#trainning .title{
    text-align:center;
}
}



@media screen and (max-width: 768px) {
    #fre-courses {
        width: 100%;

    }

    #free-courses .content-banner {
        width: 100%;

    }

    #free-courses .content-banner .form-group {
        width: 100%;
        flex-wrap: wrap;
        display: flex;

    }

    #free-courses .content-banner .form-group .form-content {
        flex-wrap: wrap;

    }
    #banner .image{
        padding-top: 20px;
    }

    #trainning .trainning-content {

        width: 100%;
    }

    #trainning .trainning-content .card-trainning {
        width: calc((100% / 2) - 2.2rem);
        height: 100%;
    }
    #banner .text-content .title {
        width: 100%;
    }
    #banner{
        border-radius:none;
        width:100%;
        background:none; 
    }
    #banner .blank{
        display:none;
    }
    #banner .banner-content{
        width:100%;
        border-radius:1.25rem;
        height:auto;
    }
    #banner .text-content {
        width:100%;
        padding:10px;
    
    }
    #banner .image{
        position: relative;
        width: 100%;
        height: auto;
        transform:none;
        top:none;
        left:none;
        border-radius: 1.25rem ;

    }
    #banner .text-content .description{
        width:100%;
    }
    #banner .image{
        border-radius:1.25rem;
    }
    #informations  .content-informations .items{
        width:100%;

    }
    #informations  .content-informations .items .item{
        border-top: 1px solid #E7EAEB;
        border-bottom: 1px solid #E7EAEB;
    }
    
    #informations  .content-informations{
        flex-direction:column;
        width:100%;
    }
    #teachers .circle-img{
        display:none;
    }
    #teacher .circle-img{
        display:none;
    }
    #banner .text-content .title{
        width: 100%;
    }
    #teachers {
        padding: 5rem 0;
    }

}

@media screen and (max-width: 576px) {


    #trainning .trainning-content {
        width: 100%
    }

    #trainning .trainning-content .card-trainning {

        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

}

@media screen and (max-width: 320px) {

    #trainning .trainning-content .card-trainning {
        width: 100%;
        height: 100%;

    }

}