*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: black;

    box-sizing: border-box;
    
}


/* start accordion */
html {
    scroll-behavior: smooth;
   }


body{
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

.container{
    max-width: 1200px;
    padding: 30px;
}


/* start header */

header{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 120px;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#logo>a>img{
    width: 293px;
}

.nav {
    width: 100%;
    background-color:#fff;
    display: flex;
    align-items: center;
  }

.nav > .nav-header {
  flex: 0.95;
  
}

.nav > .nav-header > .nav-title {
  font-size: 22px;
  color: #000;
}

.nav > .nav-list {
  display: flex;

}
.nav > .nav-list > li {
  list-style-type: none;
}
.nav > .nav-list > li a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}
.nav > #nav-check {
    display: none;
}

.hamburger{
    display: none;
}

.bar {
    display: block;
    background-color: #000;
    width: 24px;
    height: 2px;
    margin: 6px auto;

    transition: all 300ms ease-in-out;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }



@media (max-width: 992px) {
  .nav {
    padding: 1rem;
  }
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 0.2rem;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 30px 0;
  }

  .nav > .nav-list {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    background-color: #fff;
    height: 0;
    transition: all 0.3s ease-in;
    top: 68px;
    left: 0;
    overflow: hidden;
    padding-left: 15px;
  }

  .nav > .nav-list > li {
    width: 100%;
    margin-top: 1.5rem;
  }

  .nav > #nav-check:checked ~ .nav-list {
    height: calc(100vh - 50px);
  }

  .hamburger{
    display: block;
  }
  .nav-list.active {
    height: calc(100vh - 50px);
  }
.container{
    width: 100%;
}

#about_us>div{
    padding: 0;
}

}

nav>ul>li{
    display: inline;
    margin: 0 15px;
    text-transform: uppercase;
    font-weight: 700;

}

nav>ul>li a{
    position: relative;
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-block;

}

nav>ul>li a:hover{
    color: rgb(114, 109, 109);
    transform: translateY(-2px);
    
 }





@media (max-width: 1025px){
    #logo>a>img{
        width: 200px;
    }

    .nav > .nav-list{
       gap: 1rem;
    }

    nav>ul>li{
        margin: 0;
    }

}
/* end header */


/* start hero */

#hero{
    display: flex;
    justify-content: center;
    height: 543px;
    background: no-repeat url("../images/hero.jpg");
    background-size: cover;
    background-position: center;

}

#hero>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#hero>div>p>{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
#hero>div>p span {
    display:block;
    text-align: center;
    color: #1a7074;
    font-size: 24px;
    font-weight: 700;
}

h1{
    font-size: 42px;
    margin-top: 15px;
    
}

#hero_button{
    color: #fff;
    height: 45px;
    width: 200px;
    border-radius: 4px;
    border: none;
    background-color: rgb(255, 124, 124);
    padding: 10px 16px;
    margin-top: 50px;
    transition: transform 0.2s ease, background-color 0.2s ease;


}

@media (max-width: 397px){
    #hero>div{
        padding: 5px;
    }

    #hero>div>p span{
        font-size: 5vw;
    }
}

/* end hero */

/* start about us */

#about_us{
    display: flex;
    justify-content: center;
    background-color: #3c474c;
    height: 674px;
}


#about_us>div>div>h2, #about_us>div>div>p{
    color: #fff;
    margin: 15px 40px;
    text-align: left;

}

#about_us>div>img{
    width: 55%;
}


#about_us>div{
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 799px){
    #about_us>div>img{
        width: 80%;
    }
    #about_us>div{
        flex-direction: column;
        justify-content: space-around;
    }

}


@media (max-width: 480px) {
    h1{
        font-size: 7vw;
    }

    h2{
        font-size: 6vw;
    }

    #about_us>div>img {
        width: 100%;
    }

    #logo>a>img{
        width: 220px
    }


}



/* end about us */


/* start learning-formats */
#learning_formats{
    display: flex;
    justify-content: center;
    height: 580px;
}

#learning_formats>div{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 25px;

}

#learning_formats>div>div{
    display: flex;
    align-items: center;
    gap: 50px;
}

#learning_formats p{
    color: black;
}

#learning_formats img{
    height: 120px;
    width: 120px;
}

#learning_formats>div>div div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33%;
    height: 220px;
}

#learning_formats>div>div p span {
    display:block;
    text-align: center;
    font-weight: 700;
}


@media (max-width: 799px){
    #learning_formats{
        height: 100%;
    }

    #learning_formats>div>div{
        flex-direction: column;
        gap: 30px;
        
    }

    #learning_formats>div{
        margin-top: 50px;
        gap: 50px;
    }

    #learning_formats img{
        height: 200px;
        width: 200px;
    }

    #learning_formats>div>div div{
        width: 90%;
        height: 100%;
        
    }
}

/* end learning-formats */

#schedule{
    display: flex;
    justify-content: center;
    align-items: center;
}

#schedule>div{

    display: flex;
    flex-direction: column;
    gap: 25px;
}

#schedule>div> h3,h2 {
    text-align: center;

}


@media(max-width: 412px){
    #schedule>div{
        padding: 0;
    }
}


@media (max-width: 799px){
    #schedule>div{
        margin-top: 50px;
    }
}




 /* start cards */
.cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px 10px;
}

.card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
    max-width:300px ;
    margin-top: 50px;
    border-radius: 10px;
    box-shadow:0px 0px 20px 0px #3c474c30;
    padding: 15px;
    text-align: center;
}

.card>h4{
    color: #1e4ce4;
}
 
 /* end cards */

/* end learning-formats */


/* start instructors */

#instructors {
    background-color: #3c474c;
    display: flex;
    justify-content: center;
    height: 500px;

}

#instructors>div{
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

#instructors>div>img{
    height: 120px;
    width: 120px;
}

#instructors>div>h2, #instructors>div>div> p span{
    color: #fff;
}



@media (max-width: 799px){
    #instructors{
        height: 100%;
    }
    #instructors>div{
        margin-top: 50px;
       
    }
    #instructors>div>img{
        height: 200px;
        width: 200px;
    }
}

/* end instructors */


/* start benefits */

#benefits{
    background-color: #3c474c;
    display: flex;
    justify-content: center;
    height: 500px;
    gap: 25px;
}

#benefits>div{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 25px;
}         


#benefits>div div>img{
    height: 100px;
    width: 100px;
}


#benefits>div>div{
    display: flex;
    gap: 35px;
}

#benefits>div>h2, #benefits>div>div>div h3{
    color: #fff;
}

#benefits>div>div>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    max-width: 50%;
}

#benefits>div>div>div ul{
    list-style: none;
}

#benefits>div>div>div ul>li{
    color: #fff;
    margin-top: 20px;
}

@media (max-width: 799px){
    #benefits{
        height: 100%;
    }
    
    #benefits>div{
        margin-top: 50px;
    }

    #benefits>div>div{
        flex-direction: column;
    }

    #benefits>div div>img{
        height: 150px;
        width: 150px;
    }

    #benefits>div>div>div{
        margin: 40px;
        gap: 15px;
        max-width: 90%;
  
    }

    #benefits>div>div>div h3{
        text-align: center;
    }

}

/* end benefits */

/* start sertificat */

#sertificat{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 460px;
}

#sertificat>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;

}

#sertificat>div>img{
    height: 120px;
    width: 120px;
}

#sertificat>div>p{
    color: #000;
}

@media (max-width: 799px){
    #sertificat{
        height: 100%;
    }

    #sertificat>div{
        margin-top: 50px;
        padding: 0 30px;
    }

    #sertificat>div>img{
        height: 200px;
        width: 200px;

    }
}

/* end sertificat */


/* start document */

#documents{
    display: flex;
    justify-content: center;
    height: 550px;
    
}

#documents>div{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 50px;
}

#documents>div>div img{
    height: 200px;
    width: 190px;
    cursor: pointer;

}

#documents>div>div>p span{
    color: #000;
    text-align: center;

}

#documents>div>div div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    max-width: 50%;
    height: 350px;
}

#documents>div>div{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

@media (max-width: 799px){
    #documents{
        height: 100%;
    }
    #documents>div{
        margin-top: 100px;
    }

    #documents>div>div{
        flex-direction: column;
        gap: 30px;

    }

    #documents>div>div div{
        max-width: 80%;
        padding-top: 10px;
        height: 100%;
    }
}

/* end document */



/* start feedback */


#feedback{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    background-color: #88989f;
    position: static;
}

#feedback>div{
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;


}

form{
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow:0px 0px 20px 0px #3c474c30;

}


form>div{
    display: flex;
    flex-direction: column;

    
}

form>div> div{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
    margin-bottom: 15px;


    
}

form>div> div>input, #phone {
    border-radius: 5px ;
    background-color: #fff;
    height: 36px;
    width: 450px;
    border: 1px rgba(128, 128, 128, 0.46) solid;
    text-align: left;

    
}

form>div div>label span{
    color: red;
}

#name, #email{
    padding-left: 5px;
}

.ckeckbox_block>div div{
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    padding-left: 5px;
    gap: 5px;
    
}

.ckeckbox_block>div div>label{
    font-size: 18px;
}


.ckeckbox_block{
    display: flex;
    gap: 15px;
}

textarea{
    padding: 5px;
    height: 100px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    resize: none;
}

 
.button{

    text-align: center;
    color: #fff;
    height: 45px;
    width: 200px;
    border-radius: 4px;
    border: none;
    background-color: rgb(255, 124, 124);
    padding: 10px 16px;
    margin-top: 20px;
    align-self: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

form>div>div:last-child{
    display: flex;
    
    
}

.button:hover
 {
   background-color: rgb(227, 93, 93);
   transform: translateY(-2px);
   
}

@media (min-width: 769px) and (max-width: 1024px) {
    form{
        width: 50%;

    }

    form>div> div>input, #phone {
        width: 43vw;
        }

}

@media (min-width: 481px) and (max-width: 768px) {
    #feedback{
        height: 100%;
    }

    #feedback>div{
        flex-direction: column;
        padding: 10px;
    }

    form>div> div>input, #phone {
        width: 85.3vw;
    }

}


@media (max-width: 480px) {

    #hero{
        height: 100svh;
    }

    #feedback{
        height: 100%;
    }

    #feedback>div{
        flex-direction: column;
        padding: 2.91vw;
    }
    form>div> div>input, #phone {
        width: 81.4vw;
    }
}

/* end feedback */

/* start onlineSubmission */

#onlineSubmission{
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    border-radius: 10px;
    box-shadow:0px 0px 20px 0px #3c474c30;

}

#onlineSubmission>div {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 30px;
    border-radius: 10px;
    box-shadow:0px 0px 20px 0px #3c474c30;

}

#onlineSubmission>div>p{
    color: #000;
    padding: 15 0;
}

.button-box{
    display: flex;
    justify-content: center;
}

.social-box{
    display: flex;
    justify-content: end;
    gap: 5px;
}


.social-box img{
    height: 36px;
    width: 36px;
}

/* end onlineSubmission */

/* start contact */
#contact{
    display: flex;
    justify-content: center;
    background-color: rgba(10, 30, 46, 0.81);
}

.contact-social-box{
    display: flex;
    justify-content: flex-start;
    gap: 5px;
}

.contact-social-box>a{
    width: 40px;
}

#contact>div>h3, #contact>div>p {
    color: #fff;
}



#contact>div> p>a>img{
    height: 18px;
}

.contact-social-box>a>img{
    display: flex;
    height: 36px;
    width: 36px;

    
}

#contact>div{
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding: 30px;
    margin-top: 50px;
    width: 1200px;
}

.contact_social_icon{
    width: 22px;
}

.contact__user{
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}


.contact__item--white{
    color: white;

}


.contact__user--flex{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
}

@media (max-width: 480px){

    #contact>div{
        display: flex;
        flex-direction: column;
        gap: 25px;

    }

    .contact__user--flex{
        flex-direction: column;
        align-items: start;
        gap: 12px;
    }

}


/* end contact */

/* start footer */
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

footer>div{
    display: flex;
    justify-content: center;
}

.copywrite{
    color: #000;
}
/* end footer */

/* start popup img */
#popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    
  }
  
  #popup.show {
    opacity: 1;
    visibility: visible;
    
  }
  
  #popup-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2);
    transform: scale(0.8);
    transition: transform 0.5s ease;
    
  }
  
  #popup.show #popup-img {
    transform: scale(1);
    
  }
  

  .popup-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: white;
    cursor: pointer;
  }

  @media (min-width: 481px) and (max-width: 768px) {
    .popup-close{
        top: 2px;
        right: 30px;
        font-size: 50px;
    
        }

  }


  @media (max-width: 480px) {
    .popup-close{
    font-size: 70px;

    }

  }
  /* end popup img */


  /* start accourdion */
  :root {
    --color-plus-grey: #a1a3a5;
    --color-border-grey: #dee2e6;
    --color-text-dark: #212529;
    --color-background-white: #fff;
    --color-border-active-blue: #0dcaf0;
}



.accordion{
    display: flex;
    flex-direction: column;
    width: 100%;

}

.accordion__title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid var(--color-border-grey);
    border-top: none;
    color: var(--color-text-dark);
    background-color: var(--color-background-white);
}

.accordion:first-child {
    border-top: 1px solid var(--color-border-grey);
}

.accordion__title.active{
    box-shadow: 0 0 12px 1px var(--color-border-active-blue);
}

.accordion__title span{
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    background-color: transparent;
    transform: rotate(0);
    transition: transform 0.5s ease-out;
}

.accordion__title.active span{
    transform: rotate(45deg);
}

.accordion__title span::before{
    content: "";
    position: absolute;
    width: 50%;
    height: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-plus-grey);
}

.accordion__title span::after{
    content: "";
    position: absolute;
    width: 2px;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-plus-grey);
}

.accordion__content{
    font-size: 20px;
    line-height: 1.3;
    overflow: hidden;
    padding: 0 20px;
    box-sizing: content-box;
    border: 1px solid var(--color-border-grey);
    border-top: none;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, opacity 0.1s ease-out 0.5s, visibility 0.1s ease-out 0.5s;
}

.accordion__content.active{
    visibility: visible;
    opacity: 1;
    padding: 20px;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, opacity 0.1s ease-out, visibility 0.1s ease-out;
}

.accordion__content>span{
  margin: 10px;
}

  /* end accourdion */