body
{ background-color: rgb(42,62,101); }

body, a
{ color: rgb(59,85,136); }

h2,h3, .menu a
{ color: rgb(65,74,98); }

.wrapper
{ background-color: rgb(240,243,245); box-shadow: 0 0 15px -7px rgba(0,0,0,0.5); }

.header
{ background-color: rgba(255,255,255,0.8); }

.about header
{ background-color: rgb(85,110,145); background: linear-gradient(to right bottom,rgb(62,74,90),rgb(96,125,162)); }

.about header, .about header a
{ color: rgb(255,255,255); }

.about header a.contacts-btn, .sned-button
{ background-color: rgb(255,255,255); border-color: rgb(255,255,255); color: rgb(65,74,98); }

.about-image
{ border-color: rgba(255,255,255,0.4); }

.about-text a, .footer
{ background-color: rgb(59,85,136); color: rgb(255,255,255); }

.about header p, .form-area, .form-area textarea::placeholder
{ color: rgb(208,228,232); }

.form-area .f-input, .form-area .f-textarea
{ background-color: rgb(62,82,121); border-color: rgb(81,101,151); }

.form-area input, .form-area input::placeholder, .form-area textarea, .footer h2
{ color: rgb(255,255,255); }

.form-area textarea::placeholder
{ color: rgb(169,187,212); }

@media all and (min-width:1020px) {
    .header
    { background-color: rgba(255,255,255,0.3); }
    
    .menu a
    { color: rgb(255,255,255); }
    
    .about header
    { background-color: rgb(85,110,145); background: linear-gradient(to right bottom,rgb(114,138,166),rgb(78,92,128)); }
}

@font-face{font-family:'Rubik'; font-weight: normal; font-style: normal; src:url(../font/Rubik-Regular.ttf) format("truetype"); font-display: swap; }
@font-face{font-family:'Rubik'; font-weight: bold; font-style: normal; src:url(../font/Rubik-Bold.ttf) format("truetype"); font-display: swap; }

html { scroll-behavior: smooth; }

body,html,div,p,a,ul,li,span,img,h1,h2,h3,img,main,article,section,footer { margin: 0; padding: 0; }

body { font-family: 'Rubik', Arial, sans-serif; text-align: left; font-size: 14px; line-height: 24px; }
button { font-family: 'Rubik', Arial, sans-serif; background-color: none; border: 0 none; cursor: pointer; box-sizing: content-box; -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease;}
input, textarea { font-family: 'Rubik', Arial, sans-serif; box-sizing: content-box; }

a { -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; text-decoration: none; }

h1 { font-size: 22px; line-height: 32px; margin: 30px 20px 0 20px; font-weight: bold; }
h2 { font-size: 20px; line-height: 30px; padding: 40px 0 0 0; font-weight: bold; }
h3 { font-size: 16px; line-height: 24px; margin: 20px 0 0 0; font-weight: bold; }

.wrapper { overflow: hidden; max-width: 1440px; margin: 0 auto; position: relative; }

.header { overflow: hidden; position: absolute; z-index: 99999; top: 0; left: 0; width: 100%; height: 56px; }
a.logo { background-image: url(../images/logo.png); background-size: auto 100%; background-repeat: no-repeat; margin: 12px 0 0 20px; display: block; float: left; width: 75px; height: 32px; }
.menu { float: right; overflow: hidden; padding-top: 12px; }
.menu a { font-size: 15px; display: block; float: left; height: 32px; line-height: 32px; margin-right: 20px; margin-left: 4px; }

.about header { position: relative; overflow: hidden; padding: 0 0 40px 0; }
.about-image { border-bottom-width: 3px; border-bottom-style: solid; border-left-width: 3px; border-left-style: solid; position: relative; border-radius: 0 0 0 40%; left: -3px; width: 100%; padding-bottom: 120%; overflow: hidden; }
.about-image img { width: auto; height: 100%; left: 50%; transform: translateX(-50%); position: absolute; top: 0; border-radius: 0 0 0 40%; }
.about header p { margin: 15px 20px 0 20px; }
.about header .buttons { overflow: hidden; padding: 10px 0 0 20px; }
.about header .buttons a { font-size: 15px; display: block; float: left; margin: 10px 10px 0 0; height: 54px; line-height: 54px; padding: 0 20px; min-width: 90px; text-align: center; border-radius: 30px; border-style: solid; border-width: 1px; }

.about-text { overflow: hidden; padding: 0 20px; }
.about-text p { margin: 15px 0 0 0; text-align: justify; }
.about-text a { font-size: 15px; display: block; margin: 28px 0 0 0; height: 56px; line-height: 56px; padding: 0 20px; text-align: center; border-radius: 30px; }

.img { position: relative; padding-bottom: 100%; border-radius: 50%; overflow: hidden; margin-top: 40px; }
.img img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }

.services { overflow: hidden; text-align: justify; padding: 20px 20px 0 20px; }
.services h2, .services h3 { text-align: center; }
.service-p { overflow: hidden; }
.services p { margin: 10px 0 0 0; }
.services .img { margin: 40px auto 0 auto; width: 150px; padding: 0; height: auto; }
.services .img img { position: relative; }

.footer { overflow: hidden; margin: 60px 20px 40px 20px; border-radius: 36px; padding: 0 20px 20px 20px; }
.footer h2 { padding-top: 30px; }
.form-area { padding-top: 20px; overflow: hidden; }
.form-area label { font-size: 15px; }
.form-area .f-input { position: relative; margin-top: 5px; height: 48px; line-height: 48px; text-align: center; border-radius: 25px; border-style: solid; border-width: 1px; }
.form-area input { border: 0 none; outline: 0 none; background: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 20px; }

.form-area.comments { float: none; width: auto; clear: both;  }
.form-area .f-textarea { border-style: solid; border-width: 1px; padding: 15px; margin-top: 5px; overflow: hidden; border-radius: 25px; }
.form-area textarea { background: none; max-width: 100% !important; width: 100% !important; min-height: 100px !important; height: 100px; max-height: 300px !important; border: 0 none; outline: 0 none; line-height: 24px; }

.send-button { font-weight: bold; display: block; margin: 20px 0 0 0; padding: 0; height: 56px; line-height: 56px; width: 100%; text-align: center; border-radius: 30px; font-size: 15px;}


@media all and (min-width:500px) {
    .about-text .img { margin: 40px auto 0 auto; width: 460px; height: 460px; padding: 0; }
    .about-text a { float: right; padding: 0 40px; }
    .send-button { float: right; padding: 0 40px; width: auto; }

}

@media all and (min-width:744px) {
    .header { height: 88px; }
    a.logo { margin: 20px 0 0 48px; width: 112px; height: 48px; }
    .menu { padding: 20px 10px 0 0; }
    .menu a { height: 48px; line-height: 48px; margin-right: 38px; margin-left: 0; font-size: 18px; }
    h1 { margin: 48px 48px 0 48px; font-size: 26px; line-height: 36px; }
    h2 { font-size: 24px; line-height: 34px; }
    .about header { padding: 0 0 48px 0; }
    .about header p { margin: 18px 48px 0 48px; }
    .about header .buttons { padding: 18px 0 0 48px; }
    .about-image { border-radius: 0 0 40% 40%; left: 50%; transform: translateX(-50%); width: 150%; }
    .about-image img { border-radius: 0; }
    .about header .buttons a { padding: 0 30px; }
    .about-text { padding: 0 48px; }
    .about-text a { float: right;}
    .services { padding: 48px 48px 0 48px; }
    .services, .services h3 { text-align: left; }
    .service-p { display: flex;  align-items: center; }
    .service-p .img { width: 278px; flex-shrink: 0; }
    .service-p.alt { flex-direction: row-reverse; }
    .service-text  { padding-left: 48px; }
    .service-p.alt .service-text { padding-left: 80px; padding-right: 48px; }
    h3 { font-size: 20px; line-height: 26px;}
    .services p {font-size: 16px; }

    .form-area { float: left; width: 50%; }
    .form-area .f-input { margin-right: 20px; }
    .form-area.comments { padding-right: 20px; }
    
    .footer { margin: 100px 48px 48px 48px; padding: 0 8px 28px 28px; }
    .footer h2 { padding-top: 48px; }
    .send-button {  margin-right: 20px; }
}


@media all and (min-width:1020px) {
    .header { height: 111px; }
    a.logo { margin: 28px 38px 0 80px; width: 128px; height: 55px; }
    .menu { padding: 28px 0 0 0; float: left; }
    .menu a { height: 55px; line-height: 55px; font-size: 20px; }
    .about header { height: 724px; padding: 0; }
    .about-image {border-top-width: 3px; border-top-style: solid; border-radius: 40% 0 0 40%; left: auto; top: -3px; right: 0; transform: none; width: 440px; height: 724px; padding: 0; position:absolute; }
    .about-image img {  border-radius: 0; }
    .about-header-text { top: 50%; left: 0; position: absolute; transform: translateY(-50%); padding-right: 520px; }
    h1 { font-size: 38px; line-height: 50px; margin: 111px 80px 0 80px; }
    h2 { font-size: 32px; line-height: 44px; }
    .about header p { font-size: 20px; line-height: 34px; margin: 28px 80px 0 80px; }
    .about header .buttons { padding: 28px 0 0 80px; }
    .about header .buttons a { margin-right: 20px; }
    .about-text { padding: 60px 80px 0 80px; display: table; align-items: center; position: relative; }
    .about-img { display: table-cell; }
    .about-text .img { width: 400px; height: 400px; }
    .about-info { padding-left: 60px; display: table-cell; vertical-align: middle; }
    .about-text p { font-size: 16px; line-height: 26px; }
    .about-text a { float: left; font-size: 16px; }
    .services { width: 910px; margin: 0 auto; }
    .service-p.alt .service-text { padding-left: 120px; }
    .footer { margin: 120px 80px 80px 80px; padding: 0 420px 80px 80px; background-image: url(../images/footer-bg.png); background-size: auto 100%; background-repeat: no-repeat; background-position: top right; }
    .footer h2 { padding-top: 80px; }
}

@media all and (min-width:1280px) {
    h1 { font-size: 50px; line-height: 64px;}
    .about-image { width: 600px; height: 1024px;}
    .about header { height: 1024px;}
    .about-header-text { padding-right: 680px; }
    .about-text .img { width: 480px; height: 480px; }
    .service-p.alt .service-text { padding-left: 160px; }
    .form-area textarea { font-size: 16px; line-height: 26px; }

}

@media all and (min-width:1360px) {
    h1 { font-size: 54px; line-height: 68px;}
    h2 { font-size: 36px; line-height: 46px; }
    .about-text .img { width: 596px; height: 596px; }
    .about-text p { font-size: 18px; line-height: 30px; }
    .footer { padding-right: 440px; }
}