* {position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

html {scroll-behavior: smooth;}

a, button {-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

img {vertical-align: middle;}

body {margin: 0; font-family: "Figtree", sans-serif; font-size: 26px; color: #23252E; line-height: 130%;}

section {padding: 100px 0; }

.wrap {width: 1170px; margin: 0 auto; display: flex; flex-direction: column;}

h1, h2, h3, h4 {font-family: "Kanit", sans-serif; margin:0; line-height: 110%;}

.header, .contact {background: #23252E;}

.header .wrap {flex-direction: column; }

.header {padding: 100px 0;}

h1, h2 {font-size: 100px; color: white; font-weight: bold; margin: 0 0 30px 0;}

h4 {color: white; font-size: 50px; font-family: "Figtree", sans-serif; font-weight: 400; }

h1 span, h2 span {color: #FF9045;}

.services .wrap {flex-wrap: wrap; justify-content: space-between; gap: 100px; flex-direction: row;}

.service {flex-basis: calc(50% - 50px);}

.services h3 {font-size: 50px; font-weight: bold; padding: 0 0 30px 0; margin: 0 0 30px 0; }

.services h3:after {content: ""; width: 62px; height: 13px; background: #FF9045; position: absolute; bottom: 0; left: 0;}

.h2_holder {display: flex; padding: 0 0 70px 0; justify-content: space-between;}

.h2_holder .img_holder {max-width: 300px; margin: -45px 0 0 0;  }

.h2_holder .img_holder img {width: 100%; height: auto; }

.contact h3 {font-size: 50px; font-weight: bold; padding: 30px 0 0 0; margin: 0 0 30px 0; font-family: "Figtree", sans-serif; color: white; font-weight: 400; }

.contact h3:after {content: ""; width: 62px; height: 13px; background: #FF9045; position: absolute; top: 0; left: 0;}

.form {display: flex; gap: 50px 100px; justify-content: space-between; flex-wrap: wrap; padding: 60px 0 0 0; }

::placeholder {color: white; }

.form input, 
.form textarea {
    width: 100%; color: white; font-family: "Figtree", sans-serif; color: white; font-weight: 400; font-size: 30px;
    background: transparent; border: none; border-bottom: 1px solid #FF9045; padding: 30px 0; 
}

.form input:focus, 
.form textarea:focus {
    outline: none; 
}

.captcha img {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}

.inp {flex-basis: calc(50% - 50px); }

.inp2 {width: 100%; }

.info {color: #FF9045; font-size: 20px; text-align: right;}

.right {text-align: right;}

button {background: transparent; border: none; color: white; font-family: "Figtree", sans-serif; font-weight: 400; font-size: 30px; cursor: pointer;}
button:hover {color: #FF9045; }


.footer .wrap {flex-direction: row; justify-content: space-between; align-items: center;}

.menu {display: flex; flex-direction: row;}

.menu ul {list-style: none; margin: 0; padding: 0; font-size: 20px; }

.menu ul + ul {margin-left: 80px; }

.menu a {color: #23252E; text-decoration: none; }
.menu a:hover {color: #FF9045;}

.info2 {font-size: 15px; color: white; line-height: 120%;}


.service_paid {
    padding-top: 52px;
}





@media (max-width: 1180px){

    .wrap {width: 950px; }

    h1, h2 {font-size: 70px; }

    h4 {font-size: 35px; }

    .services h3, .contact h3 {font-size: 35px; }

    .form input, .form textarea {
        font-size: 24px;
        padding: 20px 0;
    }

}







@media (max-width: 990px){

    .wrap {width: 760px; }

    h1, h2 {font-size: 50px; }

    h4 {font-size: 30px; }

    .services h3, .contact h3 {font-size: 30px; }

    .form input, .form textarea {
        font-size: 20px;
        padding: 20px 0;
    }

    .footer img {max-width: 300px; height: auto; }

}







@media (max-width: 767px){

    .wrap {width: 90%; }

    .service {
        flex-basis: 100%;
    }

    .footer .wrap {flex-direction: column;}

    .footer img {max-width: 300px; width: 100%; height: auto; margin: 0 0 50px 0; }

    .menu ul + ul {
        margin-left: 0px;
    }

    .menu {
        width: 100%; justify-content: space-between;
    }

    .inp {
        flex-basis: 100%;
    }

    .form {gap: 20px 20px;  }

    .form input, .form textarea {
        font-size: 20px;
    }

    .services .wrap {
        gap: 50px;
    }

    .h2_holder {flex-direction: column;    }

    .h2_holder .img_holder {
        order: 1;
        margin: 0 0 20px 0;
    }

    .h2_holder h2 {
        order: 2; 
    }

}

@media (max-width: 400px) {    

    .captcha img {
        width: 100px; height: auto;
    }
}








/**/