@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
        margin: 0;
        padding: 0;
        color: #fff;
        font-family: 'Montserrat';
}
html{
        scroll-behavior: smooth;
}
body {
        background-color: #161618;
}
header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        font-size: 26px;
}
.logo img {
        width: 100%;
        height: 53px;
}
ul {
        list-style: none;
        margin: 0;
        padding: 0;
}
header li {
        float: left;
        margin: 0 20px;
}
header ul li a {
        font-family: 'Montserrat';
        font-weight: 200;
        font-size: 26px;
}
header ul li::after {
        content: " ";
        position: absolute;
        background-color: #fff;
        height: 15px;
        width: 1px;
        margin-left: 20px;
        margin-top: 13px;
}
.pc-menu .active {
        color: #4dd1da;
}
header ul li a:hover {
        color: #4dd1da;
}
header ul li:last-child::after {
        display: none;
}
a {
        text-decoration: none;
        color: #fff;
}
.logo a {
        color: #fff;
}
header {
        position: relative;
        width: 100%;
        z-index: 1;
}
.main {
        margin-top: -94px;
}
.main-header {
        background-image: url(../img/header-bg.webp);
        background-size: cover;
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: overlay;
        height: 90vh;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
}
.main-header .title{
        font-size:40px;
        font-family: 'Montserrat';
        font-weight: 400;
        margin-bottom: 40px;
}
.main-header .text {
        font-family: 'Montserrat';
        font-size:20px;
        margin-top: 40px;
}
.container-title{
        color: #4dd1da;
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        width: auto;
}
.title-line{
        width: 170px;
        height: 1px;
        background-color: #4dd1da;
        opacity: .8;
        margin-left: 30px;
}
.service-row .text-box{
        max-width: 620px;
        width: 47%!important;
}
.service-row .text-box .long{
        font-size: 31px;
}
.service-row .image-title{
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 300;
        text-transform: uppercase;
        font-size: 33px;
}
.service-row .image-text{
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
}
.service-row .service-img-1 {
        background-image: url(../img/service/1.webp);
        background-size: cover;
        width: 450px;
        height: 550px;
        background-position: center;
}
.service-row .service-img-2 {
        background-image: url(../img/service/2.webp);
        background-size: cover;
        width: 450px;
        height: 550px;
        background-position: center;
}
.service-row .service-img-3 {
        background-image: url(../img/service/3.webp);
        background-size: cover;
        width: 450px;
        height: 550px;
        background-position: center;
}
.service-row .service-img-4 {
        background-image: url(../img/service/4.webp);
        background-size: cover;
        width: 450px;
        height: 550px;
        background-position: center;
}
.service-row .service-img-5 {
        background-image: url(../img/service/5.webp);
        background-size: cover;
        width: 450px;
        height: 550px;
        background-position: center;
}
.s-1{
        background-image: url(../img/seperator-1.webp);
        background-size: cover;
        background-position: center;
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: overlay;
        height: 450px;
}
.btn{
        border: 2px solid #4dd1da;
        border-radius: 0;
        color: #fff;
        padding: 15px;
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
}
.about-title{
        font-size: 30px;
        margin-bottom:20px;
        text-transform: uppercase;
}
.about-text{
        font-size: 16px;
}
.about-text span{
        color:#4dd1da;
}
.mt-auto hr{
        margin-top: 30px;
}
.contact{
        margin-bottom: 50px;
}
.contact-mail a{
        color: #4dd1da;
        font-size: 18px;
}
.contact-mail a:hover{
        color: #4dd1da;
}
.title-line-2{
        width: 170px;
        height: 1px;
        background-color: #4dd1da;
        opacity: .8;
        margin-right: 30px;
}
.btn:hover{
        background-color: #4dd1da;
        color: #fff;
}
.s-2{
        background-image: url(../img/seperator-2.webp);
        background-size: cover;
        background-position: center;
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: overlay;
        height: 450px;
}
.s-2 span{
        color: #4dd1da;
        font-weight: 600;
        font-size: 18px;
}
.s-2 .bot{
        font-size: 18px;
        width: 52%;
}
.legal h5{
        margin-top: -10px;
        margin-bottom: 25px;
}
.about-box{
        justify-content: center;
}
.legal ul li a{
        color: #fff;
}
.legal ul li a:hover{
        color: #fff;
}
.container-title-box-2 div{
        justify-content: flex-end;
}
.social h5{
        margin-bottom: 25px;
}
footer .container {
        border-top: 1px solid #fff;
        padding-top: 75px;
}
footer .f-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
}
footer p.d-inline-block.mt-5{
        max-width: 468px;
}
footer .content-footer{
        justify-content: space-between;
}
.mobile-menu{
        display: none;
}
.mobile-menu .container{
        cursor: pointer;
}
.bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #fff;
        margin: 6px 0;
        transition: 0.4s;
}
      
.change .bar1 {
        transform: translate(0, 11px) rotate(-45deg);
}
      
.change .bar2 {opacity: 0;}
      
.change .bar3 {
        transform: translate(0, -11px) rotate(45deg);
      }
.overlay {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 1);
        overflow-x: hidden;
        transition: 0.5s;
      }
      
      .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
      
      .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
      }
      
      .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
      }
      
      .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
      }
      .services{
          padding-top:100px!important;
      }
      .r-text{
          text-align:right;
      }
@media screen and (min-width:1350px) {
        .col-5.row.flex-row.align-items-center.container-title-box{
                justify-content: center;
        }
        .container-title-box-2 div{
                justify-content: center;
        }
        .col-5.d-flex.flex-column{
                width: 480px;
        }
        .about-box{
                justify-content: space-evenly;
                width: 90%;
                margin: 3rem auto!important;
        }
        footer .content-footer{
                justify-content: space-evenly;
        }
}
@media screen and (min-width:1550px) {
        .title-line{
                width: 200px;
                margin-left: -50px;
        }
        #service > div:nth-child(1),
        #service > div:nth-child(3),
        #service > div:nth-child(4),
        #service > div:nth-child(5),
        #service > div:nth-child(2){
                width: 90%;
                margin: 0 auto!important;
                justify-content: space-evenly!important;
        }
        .service-img-1,
        .service-img-2,
        .service-img-3,
        .service-img-4,
        .service-img-5{
                width: 550px!important;
        }
        #about > div.col-5.row.flex-row.align-items-center.container-title-box > span{
                margin-left: 0!important;
                width: 170px;
        }
}
@media screen and (max-width:1000px){
        .overlay a {font-size: 20px}
        .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
        }
        .pc-menu{
                display: none;
        }
        .mobile-menu{
                display: inline-block;
        }
        .main-header .title{
                font-size: 26px;
        }
        .main-header .text{
                width: 87%!important;
        }
        .container-title-box{
                width: 100%!important;
                justify-content: center!important;
                flex-direction: column-reverse!important;
        }
        .container-title-box-2{
                width: 100%!important;
                justify-content: center!important;
                flex-direction: column-reverse!important;
        }
        .container-title-box-2 .row{
                flex-direction: column!important;
        }
        .title-line{
                margin: 0 0 50px 0!important;
        }
        .title-line-2{
                margin: 0 0 50px 0!important;
        }
        .service-row{
                flex-direction: column!important;
                margin-left: auto!important;
                margin-right: auto!important;
                width: calc(90% - 20px);
                margin-bottom: 20px!important;
        }
        .service-row .text-box{
                width: 100%!important;
                margin: 0 auto!important;
        }
        .service-row .service-img-1,
        .service-row .service-img-2,
        .service-row .service-img-3,
        .service-row .service-img-4,
        .service-row .service-img-5{
                width: 600px!important;
                padding: 0 10px!important;
        }
        .about-box{
                flex-direction: column!important;
        }
        .about-box .col-5{
                margin-left: auto;
                margin-right: auto;
                width: calc(55% - 20px)!important;
                text-align: center;
        }
        footer .content-footer{
                flex-direction: column!important;
                align-items: center;
                text-align: center;
        }
        .legal{
                margin-top: 20px!important;
        }
        .social{
                margin-top: 20px!important;
                margin-bottom: 20px!important;
        }
        .mt-auto .col-4{
                width: 50%;
                margin-left: auto;
                margin-right: auto;
        }
        .mt-4 .col-4{
                width: 50%;
                margin-left: auto;
                margin-right: auto;
        }
        .r-text{
            text-align:left;
        }
}
@media screen and (max-width:750px){
        .overlay a {font-size: 20px}
        .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
        }
        .overlay-content li{
                list-style: none;
        }
        .pc-menu{
                display: none;
        }
        .mobile-menu{
                display: inline-block;
        }
        .main-header .title{
                font-size: 26px;
        }
        .main-header .text{
                width: 100%!important;
                font-size: 18px;
        }
        .about-box .col-5{
                margin-left: auto;
                margin-right: auto;
                width: calc(80% - 20px)!important;
                text-align: center;
        }
        
}
@media screen and (max-width:600px) {
        header .container{
                padding: 20px!important;
        }
        .logo img{
                height: 34px;
                max-width: 164px;
        }
        .main-header .title{
                font-size: 23px;
        }
        .main-header .title{
                margin-bottom: 10px;
        }
        .main-header .text{
                margin-top:10px;
        }
        .main-header .text{
                font-size:16px;
        }
        .main-header{
                height: 90vh;
        }
        .service-row .image-title{
                font-size: 22px;
        }
        .service-row .text-box .long{
                font-size: 22px;
        }
        .service-row .image-text{
                font-size: 16px;
        }
        .service-row .text-box{
                padding:  0!important ;
        }
        .seperator{
                height: 35vh;
        }
        .s-2 .bot{
                width: 90%;
                font-size: 16px;
        }
        a.btn.col-5{
                width: 60%;
                font-size: 16px;
        }
        p.col.text-center.text.mt-2{
                margin-top:0!important;
        }
        .col-5.d-flex.flex-column{
                margin-bottom: 30px;
        }
        #contact .mt-5{
                margin-top: 0!important;
        }
        .about-box .col-5{
                margin-left: auto;
                margin-right: auto;
                width: calc(100% - 20px)!important;
                text-align: center;
        }
}