@font-face {font-family: regular; src: url("fonts/IBMPlexSans-Regular.ttf")}
@font-face {font-family: SemiBold; src: url("fonts/IBMPlexSans-SemiBold.ttf")}
@font-face {font-family: black; src: url("fonts/IBMPlexSans-Bold.ttf")}
@font-face {font-family: medium; src: url("fonts/IBMPlexSans-Medium.ttf")}
html, body { font-family: regular, Arial, Sans-serif; background-color: white; color: aqua; margin: 0; scroll-behavior: smooth;} 
.main {width: 100%; height: 100%; min-height: 100%; }
.header {width: 1310px; height: 120px; margin: auto; z-index: 100; top: 0; background-color:rgba(255,255,255,0.85);}
.menu {font-size: 24px; color: #0E2E99; margin: 40px -30px 0 0; float: right;}
.menu_item {margin: 60px 0; padding: 10px 30px; text-decoration: none; transition: 0.5s;}
.menu_item:link {display: inline; color: #0E2E99;}
.menu_item:visited {display: inline; color: #0E2E99;}
.menu_item:hover {display: inline; color: #003BFF; background-color: #F6F6F6; border-radius: 30px;}
.menu_item:active {display: inline; color: #003BFF; background-color: #F1F1F1; border-radius: 30px;}
.header .logo {background: url("img/logo.png"); width: 335px; height: 64px; float: left; margin: 30px 0 0 0;}
.footer {width: 1310px; height: 200px; bottom: 0; background-image: linear-gradient(to bottom right, #41BBFF, #1456F2); border-radius:  25px; color: white; margin: 0 auto;}
.footer .logo {width: 500px; height: 116px; margin: 45px 0 0 65px; float: left;  background-image:  url("img/logo2.png"); background-repeat: no-repeat;}
.footer .contact {font-size: 26px; font-family: regular; margin-right: 65px; text-align: right; padding-top: 35px; line-height: 30px;}
.footer .email {font-size: 26px; font-family: regular; text-decoration: none; color: white; }
.footer a {line-height: 50px;}
.content .banner {height: 606px; width: 1310px; background-image: url("img/home2.png"); background-repeat: no-repeat; background-position: bottom; margin: 0 auto;}
.content .order {width: 1310px; height: 53px; margin: -48px auto 0;}
.content .order .button {width: 315px; height: 53px; border-radius: 18px; font-size: 27px; color: white; text-transform: uppercase; font-family: black; text-align: center; margin-top: 300px; text-decoration: none; padding: 13px 32px; transition: 1s;}
.content .order .button:link {background: #174EFF;}
.content .order .button:hover {opacity: 0.8; }
.content .order .button:visited {background: #174EFF;}
.content .banner .title {width: 700px; font-size: 70px; font-family: semibold; color: white; text-transform: uppercase; padding: 45px 0 0 60px;}
.content .banner .text {width: 380px; font-size: 24px; color: white; padding: 30px 0 0 60px;}
.content .banner .text b {font-family: semibold;}
.content .about {height: 455px; width: 1310px; background-color: #F5F5F5; border-radius: 25px; margin: 80px auto 0;background-image: url("img/logo5.gif"); background-position: right; background-repeat: no-repeat;}
.content .about .title {width: 760px; font-size: 64px; font-family: semibold; color: #0E2E99; padding: 80px 0 0 60px;}
.content .about .text {width: 760px; font-size: 25px; color: #475FB0; padding: 50px 0 0 60px;}
.content .about .text b {font-family: black;}
.content .achievment {width: 1320px; display: flex; margin: 0 auto; color:white;}
.content .achievment span {font-size: 64px; padding:25px 25px 20px 25px; font-family: semibold; display: table-cell; vertical-align: bottom; line-height: 45px;}
.content .achievment p {font-size: 24px; display: table-cell; vertical-align: bottom;}
.content .achievment .block {border-radius: 25px; margin: 10px 5px; flex: 1; display:flex; aspect-ratio: 1/1; }
.content .achievment .b1 {background-color: #00A3FF;}
.content .achievment .b2 {background-image: url("img/block2.png"); background-repeat: no-repeat; display:table;}
.content .achievment .b3 {background-image: url("img/block3.png"); background-repeat: no-repeat;}
.content .achievment .b4 {background-image: url("img/block4.png"); background-repeat: no-repeat; display:table;}
.content .portfolio {width: 1310px; height: 558px; margin: 80px auto; font-size: 30px; color: #475FB0; font-family: medium; position: relative;}
.content .portfolio .btn {width:auto; height: 132px; margin-bottom: 10px; margin-left: 10px; border-radius: 25px; background-color: #F6F6F6; background-image: url("img/arrow_def.png"); background-repeat: no-repeat; background-position: 440px 20px; text-decoration: none; transition: 0.3s; cursor: pointer; display: flex;}
.content .portfolio .btn p {padding: 26px 80px 0 26px; margin: 0;}
.content .portfolio .btn:link {color:#475FB0;}
.content .portfolio .btn:visited {color:#475FB0;}
.content .portfolio .btn:hover {background-image: url("img/arrow_hover.png"); background-color: #00A3FF; color: #F6F6F6;}
.content .portfolio .btn:active {color: #F6F6F6; background-color: #00A3FF; opacity: 0.6; }
.content .portfolio #slider {width:510px; float: right; margin: 0;}
.page {width: 790px; height: 558px; overflow: hidden; position: absolute; border-radius:25px; background:white;}
#p2, #p3, #p4 {width: 0; height: 0;}
#t2:target #p2, #t3:target #p3, #t4:target #p4 {width: 790px; height: 558px;}

.content .stages {width: 1310px; margin: 0 auto 80px; font-size: 24px; color: #475FB0;}
.content .stages h1 {font-size: 36px; padding-left: 110px; font-family: semibold; color: #0E2E99; margin: 0;}
.content .stages p {font-size: 24px; padding-left: 110px; margin: 0;}
.content .stages .right {width: 597px; height: 876px; background-image: url("img/stage.png"); background-repeat: no-repeat; background-position: right;}
.content .stages .right h2 {font-size: 60px; width: 500px; font-family: semibold; color: white; display:inline-block; margin-top: -400px; text-align: center; float: right;}
.content .stages .stage1 {background-image: url("img/stage1.png"); background-repeat: no-repeat; background-position: left;}
.content .stages .stage2 {background-image: url("img/stage2.png"); background-repeat: no-repeat; background-position: left;}
.content .stages .stage3 {background-image: url("img/stage3.png"); background-repeat: no-repeat; background-position: left;}
.content .stages .stage4 {background-image: url("img/stage4.png"); background-repeat: no-repeat; background-position: left;}
.content .stages .stage5 {background-image: url("img/stage5.png"); background-repeat: no-repeat; background-position: left;}
.scroll {width: 60px; height: 60px; background-image: url("img/scroll.png"); position: fixed; opacity: 0.6; transition: opacity 0.3s; bottom: 20px; right: 20px;}
.scroll:hover {opacity: 1;}
.date {text-align: center; margin: 30px 0; color: lightgrey; }