* {
    transition: 0.3s;
}

#about {
    color: #09A84E;
}

/* about */
.about-us {
    width: auto;
    height: 400px;
    background-color: #124B8D;
}

.about-us .us-quality {
    transform: translate(-50%, -50%);
    left: 50%;
    margin-top: 200px;
    width: 850px;
    height: 356px;
    padding: 60px 150px;
}

.us-quality .quality-header {
    font-size: 24px;
    color: #09A84E;
}

.us-quality .quality-title {
    font-size: 42px;
}

.us-quality .quality-body {
    font-size: 18px;
    margin-top: 40px;
}

/* years */
.years-center {
    width: 1250px;
    height: 590px;
    margin: auto;
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
}

.years-center img {
    width: 432px;
    height: 580px;
    object-fit: cover;
}

.years-center .center-text {
    height: 590px;
    padding-top: 10px;
    width: 780px;
}

.center-text .text-header {
    display: flex;
}

.center-text .text-header .year-body {
    font-size: 100px;
    font-weight: 800;
    margin-top: -20px;
}

.center-text .text-header .header-work {
    margin-left: 30px;
}

.text-header .header-work .work-title {
    font-weight: 800;
    font-size: 50px;
    color: #09A84E;
    margin-bottom: -20px;
}

.text-header .header-work .work-body {
    font-size: 50px;
    font-weight: 200;
}

.center-text .text-body div {
    margin-top: 19px;
    font-size: 21px;
}

.center-text .text-footer {
    background-color: #124B8D;
    justify-content: space-around;
    align-items: center;
    display: flex;
    margin-top: 0px;
    height: 74px;
}

.text-footer .footer-head .title {
    font-size: 30px;
}

/* choose-us */
.choose-us {
    margin-top: 80px;
    width: auto;
}

.choose-us .us-back {
    width: 1250px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.us-back .back-text {
    padding: 20px 0px;
    height: 434px;
    width: 610px;
}

.back-text .text-header .header-body {
    font-size: 50px;
    font-weight: 800;
}

.back-text .text-body {
    margin-top: 10px; 
    font-size: 18px;
}

.back-text .text-body div {
    margin-top: 10px;
}

.us-back img {
    width: 604px;
    height: 434px;
    object-fit: cover;
}

/* youtube */
.youtub {
    margin-top: 80px;
}

.youtub .video {
    width: 1250px;
    margin: auto;
}

.youtub .video iframe {
    width: 100%;
    height: 705px;
}

/* certificat */
.certificat {
    width: auto;
    margin-top: 80px;
}

.certificat .img {
    width: 1600px;
    margin: auto;  
}

.certificat .img div {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.certificat .img img {
    width: 380px;
    border:  rgb(82, 82, 82) 2px solid;
    object-fit: cover;
}

/* text */
.text {
    width: auto;
    margin-top: 80px;
}

.text .text-body {
    width: 1300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    padding: 30px;
    border-top: 2px solid #8b8b8b;
    border-bottom: 2px solid #8b8b8b;
}

.text-body .body-left {
    width: 550px;
}

.text-body .body-left .left-title {
    font-size: 40px;
}

#fullpage {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-color: black;
}

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

    /* about */
    .about-us {
        height: 270px;
    }

    .about-us .us-quality {
        width: 800px;
        padding: 60px 100px;
        margin-top: 150px;
    }
    .us-quality .quality-header{
        font-size: 28px;
    } 
    .us-quality .quality-title {
        font-size: 40px;
    }

    .us-quality .quality-body {
        margin-top: 20px;
    }


    /* years */
    .years-center {
        width: 1100px;
        height: 450px;
        margin: auto;
        margin-top: 60px;
    }

    .years-center img {
        width: 380px;
        height: 450px;
    }

    .years-center .center-text {
        height: 450px;
        width: 700px;
    }

    .center-text .text-header .year-body {
        font-size: 80px;
        margin-top: -10px;
    }

    .text-header .header-work .work-title {
        font-size: 34px;
        margin-bottom: -10px;
    }

    .text-header .header-work .work-body {
        font-size: 34px;
    }

    .center-text .text-body div {
        margin-top: 6px;
        font-size: 18px;
    }
    .center-text .text-footer{
        margin-top: -2px;
    }
    .text-footer .footer-head .title {
        font-size: 24px;
    }


    /* choose-us */
    .choose-us {
        margin-top: 60px;
    }

    .choose-us .us-back {
        width: 1100px;
    }

    .us-back .back-text {
        height: 400px;
        width: 600px;
    }

    .back-text .text-header .header-body {
        font-size: 40px;
    }

    .back-text .text-body {
        margin-top: 20px;
        font-size: 16px;
        width: 590px;
    }

    .back-text .text-body div {
        margin-top: 15px;
    }

    .us-back img {
        width: 504px;
        height: 400px;
    }

    /* youtube */
    .youtub {
        margin-top: 60px;
    }

    .youtub .video {
        width: 1100px;
    }

    .youtub .video iframe {
        height: 620px;
    }

    /* certificat */
    .certificat {
        margin-top: 60px;
    }

    .certificat .img {
        width: 1100px;  
    }  
    .certificat .img .src div{   
        width: 250px;  
    }

    .certificat .img img {
        width: 250px;  
        background-color: #09A84E;
    }

    /* text */
    .text {
        margin-top: 60px;
    }

    .text .text-body {
        width: 1050px;
        padding: 15px;
    }

    .text-body .body-left {
        padding: 5px;

    }

    .text-body .body-left .left-title {
        font-size: 30px;
    }
}

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

    /* about */
    .about-us {
        height: 230px;
    } 

    .about-us .us-quality {
        margin-top: 160px;
        width: 600px;
        height: 270px;
        padding: 10px 10px;
    }

    .us-quality .quality-header {
        font-size: 18px;
    }

    .us-quality .quality-title {
        font-size: 28px;
    }

    .us-quality .quality-body {
        font-size: 16px;
        margin-top: 10px;
    }

    /* years */
    .years-center {
        width: 750px;
        height: auto;
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
    }

    .years-center img {
        width: 300px;
        height: 400px;
    }

    .years-center .center-text {
        height: 400px;
        width: 440px;
    }

    .center-text .text-header .year-body {
        font-size: 60px;
        margin-top: -0px;
    }

    .text-header .header-work .work-title {
        font-size: 40px;
    }

    .text-header .header-work .work-body {
        font-size: 20px;
    }

    .center-text .text-body {
        margin-top: -10px;
        height: 220px;
        width: 100%;
    }

    .center-text .text-body div {
        margin-top: 10px;
        font-size: 14px;
    }

    .center-text .text-footer {
        padding-top: 0px;
        margin-top: -10px;
        height: 66px;
    }

    .text-footer .footer-head .title {
        font-size: 14px;
    }

    .footer-head .title span {
        font-size: 25px;
    }

    .footer-head .body {
        font-size: 12px;
    }

    /* choose-us */
    .choose-us {
        margin-top: 40px;
    }

    .choose-us .us-back {
        width: 750px;
        height:360px;
    }

    .us-back .back-text {
        padding: 0px;
        height: 360px;
        width: 330px;
    }

    .back-text .text-header .header-body {
        font-size: 30px;
        font-weight: 800;
    }

    .back-text .text-body {
        margin-top: 0px;
        width: 335px;
        height: 250px;
    }

    .back-text .text-body div {
        margin-top: 5px;
        font-size: 13px;
    }
.us-img{
     display:flex;
    justify-content:center;
    align-items: flex-start;
    height:90%;
}
    .us-back img {
        width: 400px;
        height: 280px;
    }

    /* youtube */
    .youtub {
        margin-top: 40px;
    }

    .youtub .video {
        width: 750px;
    }

    .youtub .video iframe {
        height: 423px;
    }

    /* certificat */
    .certificat {
        margin-top: 40px;
    }

    .certificat .img {
        width: 750px;
        margin: auto;
    }

    .certificat .img .src {
        width: 95%;
        margin: auto;
        margin-top: 10px; 
        gap: 5px; 
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    } 

    .certificat .img img {
        width: 90%;  
        text-align: center;
    }

    /* text */
    .text {
        margin-top: 40px;
    }

    .text .text-body {
        width: 750px;
        display: block;
        padding: 10px;
    }

    .text-body .body-left {
        width: 98%;
        text-align: center;
        margin-top: 10px;
    }

    .text-body .body-left .left-title {
        font-size: 20px;
    }

    .text-body .body-left .left-body {
        font-size: 14px;
    }
}

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

    /* about */
    .about-us {
        height: 230px;
    } 

    .about-us .us-quality {
        margin-top: 90px;
        width: 90%;
        height: 140px;
        padding: 15px 10px;
    }

    .us-quality .quality-header {
        font-size: 16px;
        width: 100%;
    }

    .us-quality .quality-title {
        font-size: 20px;
    }

    .us-quality .quality-body {
        font-size: 15px;
        margin-top: 10px;
    }

    /* years */
    .years-center {
        width: 90%;
        height: auto;
        margin-top: 40px;
        display: block;
        text-align: center;
    }

    .years-center img {
        width: 99%;
        height: 60vw;
    }

    .years-center .center-text {
        height: auto;
        padding-top: 0px;
        width: 98%;
    }

    .center-text .text-header {
        display: flex;
        margin: auto;
        justify-content: left;
        text-align: left;
        margin-top: 5px;
        width: 98%;
    }

    .center-text .text-header .year-body {
        font-size: 55px;
        margin-top: -10px;
    }

    .center-text .text-header .header-work {
        margin-left: 10px;
    }

    .text-header .header-work .work-title {
        font-size: 30px;
        margin-bottom: -20px;
    }

    .text-header .header-work .work-body {
        font-size: 30px;
    }

    .center-text .text-body {
        height: auto;
        overflow-y: hidden;
        border: none;
    }

    .center-text .text-body div {
        padding: 5px;
        text-align: left;
        margin-top: 0px;
        font-size: 15px;
    }

    .center-text .text-footer {
        padding-top: 0px;
        margin-top: 0px;
        width: 100%;
        height: 50px;
        font-size: 12px;
    }

    .text-footer .footer-head .title {
        font-size: 12px;
    }

    .footer-head .title span {
        font-size: 15px;
    }

    .footer-head .body {
        font-size: 10px;
    }

    /* choose-us */
    .choose-us .us-back {
        width: 90%;
        display: block;
        height: auto;
    }

    .us-back .back-text {
        padding: 5px 0px;
        height: auto;
        width: 100%;
    }

    .back-text .text-header .header-title {
        font-size: 15px;
    }

    .back-text .text-header .header-body {
        font-size: 28px;
        margin-bottom: -10px;
    }

    .back-text .text-body {
        margin-top: 0px;
        width: 98%;
        height: auto;
    }

    .back-text .text-body div {
        margin-top: 15px;
        font-size: 15px;
    }

    .us-back img {
        width: 99%;
        height: 60vw;
    }

    /* youtube */
    .youtub .video {
        width: 89%;
    }

    .youtub .video iframe {
        height: 48vw;
        margin: auto;
    }

    /* certificat */
    .certificat .img {
        width: 100%;
    }

    .certificat .img .src { 
        display: grid;
        width: 90%;  
        gap: 5px;
        grid-template-columns: repeat(2, 1fr);
      
    } 
    .certificat .img .src div{
        width: 100%; 
    }
    .certificat .img img {
        width: 90%;
    }

    /* text */
    .text {
        margin-top: 40px;
    }

    .text .text-body {
        width: 85%;
        padding: 5px;
    }

    .text-body .body-left {
        width: 95%;
        margin: auto;
        padding: 10px;
    }

    .text-body .body-left .left-title {
        font-size: 22px;
        font-weight: 600;
    }

    .text-body .body-left .left-body {
        font-size: 15px;
    }
}