@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
/*font-family: "DM Sans", sans-serif;*/
*::before,
*::after {
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;
  outline: none;
}

@font-face {
  font-family:'TT Satoshi';
  src: url('../font/tt-satoshi-regular.eot');
src: url('../font/tt-satoshi-regular.eot?#iefix') format('embedded-opentype'),
  url('../font/tt-satoshi-regular.woff2') format('woff2'),
  url('../font/tt-satoshi-regular.woff') format('woff'),
  url('../font/tt-satoshi-regular.svg#../font/tt-satoshi-regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-2074;
}

@font-face {
  font-family:'i';
  src: url('../font/tt-satoshi-medium.eot');
src: url('../font/tt-satoshi-medium.eot?#iefix') format('embedded-opentype'),
  url('../font/tt-satoshi-medium.woff2') format('woff2'),
  url('../font/tt-satoshi-medium.woff') format('woff'),
  url('../font/tt-satoshi-medium.svg#tt-satoshi-medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-2074;
}

@font-face {
  font-family:'Suisse Intl';
  src: url('../font/SuisseIntl-Book.eot');
src: url('../font/SuisseIntl-Book.eot?#iefix') format('embedded-opentype'),
  url('../font/SuisseIntl-Book.woff2') format('woff2'),
  url('../font/SuisseIntl-Book.woff') format('woff'),
  url('../font/SuisseIntl-Book.svg#SuisseIntl-Book') format('svg');
  font-weight: 450;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-00FE;
}

:root {
  --main-color: #E60000;
  --black-color: #000000;
  --title-font: 'Suisse Intl';
  --tt400: 'TT Satoshi';
  --tt500: 'i';
}

html, body {
  font-family: var(--tt400);
  font-weight: 400;
  font-size:18px;
  line-height:1.5;
  padding:0;
  margin:0;
}

a {
  color:var(--main-color);
  text-decoration:none;
  transition:all .5s ease;
  -webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  display: inline-block;
}


.main-wapper{padding-top: 0px;}
.container{max-width: 1565px; padding: 0 50px;}
.main-header{ padding: 56px 0; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 9; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; }
.main-header .container{display: flex; justify-content: space-between; align-items: center;}
.main-header .rightside{display: flex; align-items: center;}
.main-header .rightside ul.main-menu{margin: 0px; padding: 0px; list-style: none; display: flex;}
.main-header .rightside ul.main-menu li{margin-right: 56px;}
.main-header .rightside ul.main-menu li a{font-size: 16px; line-height: 20px; font-family: var(--title-font); color: var(--black-color); display: block; position: relative; padding: 7px 0;}
.main-header .rightside ul.main-menu li a::before{content: ''; width: 0px; left: 0px; bottom: 0px; height: 2px; background: var(--main-color); position: absolute; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; }
.main-header .rightside ul.main-menu li a:hover, .main-header .rightside ul.main-menu li.current-menu-item > a,
.main-header .rightside ul.main-menu li a.active{color: var(--main-color);}
.main-header .rightside ul.main-menu li a:hover::before, .main-header .rightside ul.main-menu li.current-menu-item > a::before,
.main-header .rightside ul.main-menu li a.active::before{width: 18px; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; }
.main-header .rightside .in-icon{width: 12px; height: 12px; display: flex; align-items: center; justify-content: center;}
.main-header .rightside .in-icon svg path{fill: var(--main-color);}
.main-header .rightside .in-icon:hover svg path{fill: var(--second-color);}

.main-header .btn-menu{width: 22px; height: 22px; border: none; background: transparent; position: relative; padding: 0px; transition: all .5s ease;  margin-left: 15px; display: none}
.main-header .btn-menu span{width: 100%; height: 2px; background: var(--main-color); display: block;  transition: all .5s ease;}
.main-header .btn-menu span:nth-of-type(3n+1){position: absolute; top: 0px; left: 0px; transition: all .5s ease;}
.main-header .btn-menu span:nth-of-type(3n+2){position: absolute; top: 10px; width:70%; left: 0px; transition: all .5s ease;}
.main-header .btn-menu span:nth-of-type(3n+3){position: absolute; bottom: 0px; left:0px; transition: all .5s ease;}
.main-header .btn-menu.active span:nth-of-type(3n+1){  transform: rotate(-45deg); left: 0px; top:10px; transition: all .5s ease;}
.main-header .btn-menu.active span:nth-of-type(3n+2){display: none;}
.main-header .btn-menu.active span:nth-of-type(3n+3){ transform: rotate(45deg);left: 0px; transition: all .5s ease; bottom: 10px;}

header.fixed .main-header{background:#fff; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;  padding: 30px 0; -webkit-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15); box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15);}

.top-main-slider-area{margin: 0px;}
.top-main-slider-area .inner-photo-block{width: 100%; height: 100vh; position: relative; overflow: hidden;}
.top-main-slider-area .inner-photo-block img{position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover; width: 100%; height: 100%;}
.top-main-slider-area .inner-photo-block::before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 292px; background: linear-gradient( #FFFFFF 7.44%, rgba(255, 255, 255, 0) 95.52%); z-index: 1;}
.top-main-slider-area .inner-photo-block .content-area{position: absolute; top: 0px; left: 0px; width: 100%; z-index: 1; padding:100px 0 0px 0; height: 100%; display: flex; align-items: center; justify-content: center;}
.top-main-slider-area .inner-photo-block .content-area .title{position: relative;}
.top-main-slider-area .inner-photo-block .content-area .title::before{content: ''; position: absolute; top: 50%; left: 50%; margin-left: -725px; margin-top: -244px; width: 1450px; height: 488px; background: url(../images/fade-bg.png) center center no-repeat; background-size: 100%;}
.top-main-slider-area .inner-photo-block .content-area h1{font-size: 72px; line-height: 92px; color: #fff; font-family: var(--title-font); text-transform: uppercase; text-align: center; max-width: 1150px; margin: 0 auto; position: relative;}

.about-portfolio-area{padding: 94px 0 0 0; position: relative;}
.about-portfolio-area::before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 722px; background: url(../images/gray-bg.jpg) center center no-repeat; background-size: cover;}
.about-portfolio-area .content-block{display: flex; margin-bottom: 80px; position: relative; z-index: 1;}
.about-portfolio-area .content-block h2{width: 55%; padding-right: 60px; margin: 0px; font-size: 40px; line-height: 52px; color: var(--black-color); font-family: var(--title-font);}
.about-portfolio-area .content-block .rightside{width: 45%;}
.about-portfolio-area .content-block .rightside p{font-size: 18px; line-height: 32px; color: var(--black-color); font-weight: 400; font-family: var(--tt400); margin: 0 0 30px 0;}
.about-portfolio-area .content-block .rightside .btn-read{background: var(--main-color); font-size: 12px; line-height: 16px; padding: 12px 42px; font-family: var(--title-font); color: #fff;}
.about-portfolio-area .content-block .rightside .btn-read:hover{background: var(--black-color);}
.about-portfolio-area ul.portfolio-list{margin: 0px -13px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap;}
.about-portfolio-area ul.portfolio-list li{width: 33.33%; padding: 0 13px;}
.about-portfolio-area ul.portfolio-list li .portfolio-block{margin: 0px;}
.about-portfolio-area ul.portfolio-list li .portfolio-block .photo{width: 100%; height: 498px; position: relative; overflow: hidden; margin: 0 0 25px 0;}
.about-portfolio-area ul.portfolio-list li .portfolio-block .photo img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover;  transform:scale(1); transition:all .5s ease}
.about-portfolio-area ul.portfolio-list li .portfolio-block h3{font-size: 40px; line-height: 52px; color: var(--black-color); font-family: var(--title-font); position: relative; margin: 0 0 12px 0; padding-top: 12px; transition: all .5s ease;}
.about-portfolio-area ul.portfolio-list li .portfolio-block h3::before{content: ''; position: absolute; top: 0px; left: 0px; background: var(--main-color); width: 18px; height: 2px; transition: all .5s ease;}
.about-portfolio-area ul.portfolio-list li .portfolio-block p{font-family: var(--tt400); font-size: 18px; line-height: 32px; color: var(--black-color); margin: 0px;}
.about-portfolio-area ul.portfolio-list li .portfolio-block:hover h3{color: var(--main-color); transition: all .5s ease;}
.about-portfolio-area ul.portfolio-list li .portfolio-block:hover h3::before{width: 30px; transition: all .5s ease;}
.about-portfolio-area ul.portfolio-list li .portfolio-block:hover .photo img{transform:scale(1.1); transition:all .5s ease}

.service-area{padding: 76px 0 90px 0;}
.service-area h2{font-size: 40px; line-height: 52px; color: var(--black-color); font-family: var(--title-font); margin: 0 0 22px 0;}
.service-area ul.service-list{margin: 0px -6px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap;}
.service-area ul.service-list li{width: 33.33%; padding: 0 6px; margin-top: 12px;}
.service-area ul.service-list li .photo-block{width: 100%; min-height: 412px; position: relative; overflow: hidden;}
.service-area ul.service-list li .photo-block img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover; transition:all .5s ease}
.service-area ul.service-list li .content-block{background: #F5F5F5; padding: 50px 44px; display: flex; flex-direction: column; height: 100%; justify-content: space-between; transition:all .5s ease}
.service-area ul.service-list li .content-block h3{font-size: 40px; line-height: 52px; color: var(--black-color); font-family: var(--title-font); margin: 0 0 10px 0; transition:all .5s ease}
.service-area ul.service-list li .content-block p{font-size: 18px; line-height: 32px; color: var(--black-color); font-weight: 400; font-family: var(--tt400); margin: 0px; transition:all .5s ease}
.service-area ul.service-list li:hover .photo-block img{transform:scale(1.1); transition:all .5s ease}
.service-area ul.service-list li:hover .content-block{background: var(--main-color); transition:all .5s ease}
.service-area ul.service-list li:hover .content-block h3,
.service-area ul.service-list li:hover .content-block p{color: #fff; transition:all .5s ease}

.footer-area{background: #000; padding: 80px 0 0 0; position: relative;}
.footer-area .container{position: relative; z-index: 1;}
.footer-area .first-row{display: flex; justify-content: space-between; padding-bottom: 54px;}
.footer-area .first-row .leftside{width: 65%; padding-top: 12px;}
.footer-area .first-row .leftside .logo{margin: 0 0 54px 0;}
.footer-area .first-row .leftside .d-flex{align-items: center;}
.footer-area .first-row .leftside ul.main-menu{margin: 0px; padding: 0px; list-style: none; display: flex;}
.footer-area .first-row .leftside ul.main-menu li{margin-right: 56px;}
.footer-area .first-row .leftside ul.main-menu li a{font-size: 16px; line-height: 20px; font-family: var(--title-font); color: #fff; display: block; position: relative;}
.footer-area .first-row .leftside ul.main-menu li a:hover,
.footer-area .first-row .leftside ul.main-menu li a.active{color: var(--main-color);}
.footer-area .first-row .leftside .in-icon{width: 12px; height: 12px; display: flex; align-items: center; justify-content: center;}
.footer-area .first-row .leftside .in-icon svg path{fill: #fff;}
.footer-area .first-row .leftside .in-icon:hover svg path{fill: var(--main-color);}
.footer-area .first-row .rightside{width: 35%;}
.footer-area .first-row .rightside h2{font-size: 40px; line-height: 52px; color: #fff; font-family: var(--title-font); margin: 0 0 30px 0; text-align: right;}
.footer-area .first-row .rightside .newsletter-area{display: flex;}
.footer-area .first-row .rightside .newsletter-area .wpcf7 {width: 100%;}
.footer-area .first-row .rightside .newsletter-area .wpcf7 .wpcf7-form p{display: flex; position: relative; align-items: flex-start;}
.footer-area .first-row .rightside .newsletter-area .wpcf7 .wpcf7-form p .wpcf7-spinner {position: absolute; top: 10px; right: 150px; margin: 0px;}
.footer-area .first-row .rightside .newsletter-area .form-control{border: #BFBFBF 1px solid; color: #fff; border-radius: 0px; background: transparent; font-size: 16px; line-height: 24px; padding: 10px 15px;}
.footer-area .first-row .rightside .newsletter-area .form-control:focus{box-shadow:none; border: var(--main-color) 1px solid;}
.footer-area .first-row .rightside .newsletter-area .form-control::-webkit-input-placeholder {color: #fff;}
.footer-area .first-row .rightside .newsletter-area .form-control::-moz-placeholder {color: #fff;}
.footer-area .first-row .rightside .newsletter-area .form-control:-ms-input-placeholder {color: #fff;}
.footer-area .first-row .rightside .newsletter-area .form-control:-moz-placeholder{color: #fff;}
.footer-area .first-row .rightside .newsletter-area .btn-send{margin-left: 8px; background: var(--main-color); border: none; padding: 0px 35px; color: #fff; line-height: 46px;}
.wpcf7 form .wpcf7-response-output{color: #fff; font-size: 15px; text-align: center; margin: 0; padding: 10px;}
.footer-area .copyright{border-top: #BFBFBF 1px solid; display: flex; justify-content: space-between; align-items: center; padding: 30px 0;}
.footer-area .copyright p{font-size: 14px; line-height: 24px; margin: 0px; color: #fff;}
.footer-area .copyright a{font-size: 14px; line-height: 24px; margin: 0px; color: #fff;}
.footer-area .logo-bg{position: absolute; top: 50%; left: 50%; margin-left: -838px; margin-top: -118px;}

.inner-top-area{width: 100%; height: 56vh; position: relative; overflow: hidden;}
.inner-top-area img{position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover; width: 100%; height: 100%;}
.inner-top-area::before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 292px; background: linear-gradient( #FFFFFF 7.44%, rgba(255, 255, 255, 0) 95.52%); z-index: 1;}
.inner-top-area .content-area{position: absolute; bottom: 0px; width: 100%; left: 0px;}
.inner-top-area .content-area h1{background: var(--main-color); display: inline-flex; margin: 0px; color: #fff; font-size: 50px; line-height: 64px; font-family: var(--title-font); align-items: center; padding: 13px 26px;}
.inner-top-area .content-area h1 img{position: relative; width: 30px; height: 40px; object-fit: contain; margin: 0 14px 0 0;}
.inner-top-area.content-banner .content-area{bottom: 115px;}
.about-content-area{background: url(../images/gray-bg.jpg) center center no-repeat; background-size: cover; padding: 88px 0;}
.about-content-area h2{font-size: 40px; line-height: 52px; color: var(--black-color); font-family: var(--title-font); margin: 0 auto 35px auto; text-align: center; max-width: 984px;}
.about-content-area p{font-size: 18px; line-height: 32px; color: #000; font-family: var(--tt400); max-width: 1086px; margin: 0 auto 30px auto; text-align: center;}
.about-content-area p:last-child{margin: 0px auto;}

.mission-vision-area{padding: 80px 0 68px 0;}
.mission-vision-area .main-block{display: flex; margin-bottom: 12px;}
.mission-vision-area .main-block .photo-block{width: 33.5%; padding-right: 12px; min-height: 412px;}
.mission-vision-area .main-block .photo-block .photo{width: 100%; height: 100%; position: relative; overflow: hidden;}
.mission-vision-area .main-block .photo-block .photo img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover; transform:scale(1); transition:all .5s ease}
.mission-vision-area .main-block .rightside{width: 66.5%; background: #F5F5F5; padding: 52px 48px; display: flex; flex-direction: column; justify-content: space-between;}
.mission-vision-area .main-block .rightside h2{font-size: 40px; line-height: 52px; color: var(--black-color); font-family: var(--title-font); margin: 0 0 22px 0;}
.mission-vision-area .main-block .rightside p{font-size: 18px; line-height: 32px; color: #000; font-family: var(--tt400); margin: 0px;}
.mission-vision-area .main-block:nth-child(2n){flex-direction: row-reverse;}
.mission-vision-area .main-block:nth-child(2n) .photo-block{padding-left: 12px; padding-right: 0px;}
.mission-vision-area .main-block:nth-child(2n) .rightside{background: #202020;}
.mission-vision-area .main-block:nth-child(2n) .rightside h2,
.mission-vision-area .main-block:nth-child(2n) .rightside p{color: #fff;}
.mission-vision-area .main-block:hover .photo-block .photo img{transform:scale(1.1); transition:all .5s ease}

.portfolio-page{padding: 90px 0;}
.portfolio-page ul.portfolio-list{margin: 0px; padding: 0px; list-style: none; border-top: #000000 1px solid;}
.portfolio-page ul.portfolio-list li{display: flex; align-items: center; padding: 32px 0; border-bottom: #000 1px solid;}
.portfolio-page ul.portfolio-list li .portfolio-content{width: 46%; padding-right: 80px;}
.portfolio-page ul.portfolio-list li .portfolio-content h2{font-size: 40px; line-height: 52px; color: var(--black-color); font-family: var(--title-font); margin: 0 0 16px 0;}
.portfolio-page ul.portfolio-list li .portfolio-content p{font-size: 18px; line-height: 32px; color: #000; font-family: var(--tt400); margin: 0px;}
.portfolio-page ul.portfolio-list li .portfolio-photo{width: 54%; height: 408px; position: relative; overflow: hidden;}
.portfolio-page ul.portfolio-list li .portfolio-photo img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover; transform:scale(1); transition:all .5s ease}
.portfolio-page ul.portfolio-list li:nth-child(2n){flex-direction: row-reverse;}
.portfolio-page ul.portfolio-list li:nth-child(2n) .portfolio-content{padding-left: 50px; padding-right: 30px;}
.portfolio-page ul.portfolio-list li:hover .portfolio-photo img{transform:scale(1.1); transition:all .5s ease}


.service-page{padding: 90px 0;}
.service-page ul.service-list{margin: 0px; padding: 0px; list-style: none; }
.service-page ul.service-list li{display: flex; background: #F5F5F5; align-items: center;}
.service-page ul.service-list li .service-photo{width: 50%; min-height: 630px; position: relative; overflow: hidden;}
.service-page ul.service-list li .service-photo img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover; transform:scale(1); transition:all .5s ease}
.service-page ul.service-list li .service-content{width: 50%; padding: 100px; position: relative;}
.service-page ul.service-list li .service-content .icon{width: 26px; height: 26px; display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 12px; left: -40px;}
.service-page ul.service-list li .service-content .icon span{width: 26px; height: 4px; background: var(--main-color);}
.service-page ul.service-list li .service-content h2{font-size: 40px; line-height: 52px; color: var(--black-color); font-family: var(--title-font); margin: 0 0 10px 0; max-width: 384px; position: relative;}
.service-page ul.service-list li .service-content h3{font-size: 22px; line-height: 36px; color: var(--main-color); font-family: var(--tt500); margin: 0px 0px 20px 0px; max-width: 470px;}
.service-page ul.service-list li .service-content p{font-size: 18px; line-height: 32px; color: #000; font-family: var(--tt400); margin: 0px;}
.service-page ul.service-list li:nth-child(2n){flex-direction: row-reverse; background: #202020;}
.service-page ul.service-list li:nth-child(2n) h2,
.service-page ul.service-list li:nth-child(2n) p{color: #fff;}
.service-page ul.service-list li:hover .service-photo img{transform:scale(1.1); transition:all .5s ease}

.contact-page{padding: 0 0 100px 0; margin-top: -115px; position: relative;}
.contact-page .flex-contact{display: flex;}
.contact-page .flex-contact .info-area{width: 42%; background: #000; padding: 80px;}
.contact-page .flex-contact .info-area h2{font-size: 40px; line-height: 52px; color: #fff; font-family: var(--title-font); }
.contact-page .flex-contact .info-area p{font-size: 18px; line-height: 32px; color: #fff; font-family: var(--tt400); margin: 0;}
.contact-page .flex-contact .info-area .info{padding: 0 0 0 50px; position: relative; font-size: 18px; line-height: 32px; margin: 40px 0 0 0;}
.contact-page .flex-contact .info-area .info a{color: #fff; display: block;}
.contact-page .flex-contact .info-area .info .icon{position: absolute; top: 2px; left: 0px; width: 28px; height: 28px;}
.contact-page .flex-contact .info-area .info .icon svg{vertical-align: top;}
.contact-page .flex-contact .form-area{width: 58%; background: #F5F5F5; padding: 86px 70px;}
.contact-page .flex-contact .form-area .input-block{margin-bottom: 25px;}
.contact-page .flex-contact .form-area label{display: block; margin: 0px; color: var(--main-color); font-size: 12px; line-height: 14px; font-family: var(--tt400);}
.contact-page .flex-contact .form-area .form-control{border: none; border-bottom: #000 1px solid; border-radius: 0px; font-size: 18px; font-weight: 500; color: #000; line-height: 25px; padding: 10px 0; background: transparent; height: auto;}
.contact-page .flex-contact .form-area .form-control:focus{box-shadow: none; border-bottom: var(--main-color) 1px solid;}
.contact-page .flex-contact .form-area .form-select{border: none; border-bottom: #000 1px solid; border-radius: 0px; font-size: 18px; font-weight: 500; color: #000; line-height: 25px; padding: 10px 0; background-color: transparent; height: auto; width: 25%; margin-right: 24px; background-position: right 0 center;}
.contact-page .flex-contact .form-area .form-select:focus{box-shadow: none; border-bottom: var(--main-color) 1px solid;}
.contact-page .flex-contact .form-area .wpcf7-form-control{width: 100%; border-radius: 0px; font-size: 18px; font-weight: 500; color: #000; line-height: 25px; padding: 10px 0; background: transparent; height: auto; border: none; border-bottom: #000 1px solid;}
.contact-page .flex-contact .form-area .wpcf7-form-control:focus{box-shadow: none; border-bottom: var(--main-color) 1px solid;}
.contact-page .flex-contact .form-area .wpcf7-form-control:focus-visible{outline: none;box-shadow: none;}
.intl-tel-input.separate-dial-code .selected-flag{background: transparent;}
.contact-page .flex-contact .wpcf7 form .wpcf7-response-output{color: #000;}
.contact-page .flex-contact .form-area .btn-send{background: red; border: none; margin-top: 12px; color: #fff; text-transform: uppercase; font-size: 12px; line-height: 16px; padding: 12px 60px; font-family: var(--title-font);}
.contact-page .flex-contact .form-area .btn-send:hover{background: var(--black-color);}