:root {
    --BaseFont: "Roboto", sans-serif;
    --BaseSize: 18px;
    --BigSize: 1.2em;

    --BlueColor: #34BAF0;
    --RedColor: #E8212E;
    --GrayColor: #565656;
    --WhiteColor: #fff;
    --BlackColor: #000;
    --GrayUltraLightColor: #F5F7FA;
    --GrayLightColor: #E2E8EF;
    --GrayMediumColor: #8FA1B3;
    --GrayDarkColor: #1F2933;
    --BlueLightColor: #27405C;
    --BlueMediumColor: #16273B;
    --BlueDarkColor: #101B29;

    --LightFont: 300;
    --RegularFont: 400;
    --BoldFont: 600;

    --Border2: 2px solid;
    --Border6: 6px solid;
    --Border8: 8px solid;
    --BorderRadius: 20px;
    --BorderRadiusBig: 99px;

    --MarginXSmall: 10px;
    --MarginSmall: 20px;
    --MarginMedium: 30px;
    --MarginBig: 40px;
    --MarginXBig: 50px;

    --Wrapper: 1240px;
    --Transition: all ease-out .3s;
}

/* GENERALS */

* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    font-family: var(--BaseFont);
    font-size: var(--BaseSize);
    font-weight: var(--LightFont);
    font-style: normal;
    color: var(--GrayColor);
    line-height: 1.4;
    background-color: var(--WhiteColor);
}

img {
    width: 100%;
    vertical-align: bottom;
}

hr {
    width: 35px;
    display: inline-block;
    border: none;
    border-top: var(--Border6);
}

hr.blue {
    border-top-color: var(--BlueColor);
}

hr.red {
    border-top-color: var(--RedColor);
}

a {
    color: var(--GrayColor);
    transition: var(--Transition);
    text-decoration: none;
    cursor: pointer;
}

a:hover, header a.active {
    color: var(--RedColor);
}

strong {
    font-weight: var(--BoldFont);
}

article {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 120px 0;
}

article section {
    width: var(--Wrapper);
}

/* TEXTS */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--BoldFont);
    color: var(--GrayDarkColor);
}

h1 {
    font-size: 2.5em;
}

h2 {
    margin: var(--MarginXSmall) 0 var(--MarginSmall) 0;
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: .7em;
    text-transform: uppercase;
    color: var(--BlueColor);
}

p.big {
    width: 75%;
    font-size: var(--BigSize);
}

/* HEADER */

header {
    position: fixed;
    width: 100%;
    padding: var(--MarginSmall) 0;
    display: flex;
    justify-content: center;
    font-weight: var(--RegularFont);
    border-bottom: var(--Border6) var(--GrayLightColor);
    background-color: var(--WhiteColor);
    z-index: 10;
}

header section {
    width: var(--Wrapper);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header figure {
    width: 200px;
}

header ul {
    display: flex;
    transition: var(--Transition);
}

header li {
    margin: 0 10px;
    padding-right: var(--MarginSmall);
    border-right: 2px solid var(--GrayColor);
}

header li:last-child, header li:nth-child(5) {
    padding-right: 0;
    border-right: none;
}

header li:last-child a {
    padding: var(--MarginXSmall) var(--MarginBig);
    font-weight: var(--BoldFont);
    color: var(--WhiteColor);
    border-radius: var(--BorderRadiusBig);
    background-color: var(--RedColor);
}

header li:last-child a:hover, .home p a:hover, .technology .benefit a:hover, .pricing .get a:hover, .contact input[type=submit]:hover {
    background-color: var(--GrayColor);
}

header p {
    display: none;
}

/* HOME */

.home {
    padding: 220px 0 120px 0;
    background: var(--GrayUltraLightColor) url(../images/circles-transparent.webp) no-repeat right 75px;
}

/*.home h2, .home h6, .home p.big {
    text-shadow: 2px 0 var(--GrayUltraLightColor), -2px 0 var(--GrayUltraLightColor), 0 2px var(--GrayUltraLightColor), 0 -2px var(--GrayUltraLightColor), 1px 1px var(--GrayUltraLightColor), -1px -1px var(--GrayUltraLightColor), 1px -1px var(--GrayUltraLightColor), -1px 1px var(--GrayUltraLightColor);
}*/

.home .flexslider {
    width: var(--Wrapper);
}

.home span {
    color: var(--BlueColor);
}

.home p a, .technology .benefit a, .pricing .get a, .contact input[type=submit] {
    display: inline-block;
    margin-top: var(--MarginMedium);
    padding: var(--MarginSmall) var(--MarginXBig);
    font-size: var(--BigSize);
    font-weight: var(--BoldFont);
    text-align: center;
    color: var(--WhiteColor);
    border-radius: var(--BorderRadiusBig);
    background-color: var(--RedColor);
}

/* PROBLEM */

.problem .cases, .solution .cases {
    display: flex;
    margin: var(--MarginMedium) 0;
    justify-content: space-between;
}

.problem .cases div {
    width: 31.5%;
    padding: var(--MarginMedium);
    border: var(--Border2) var(--GrayLightColor);
    border-top: var(--Border6);
    border-radius: 0 0 var(--BorderRadius) var(--BorderRadius);
}

.problem .cases div.blue {
    border-top-color: var(--BlueColor);
}

.problem .cases div.red {
    border-top-color: var(--RedColor);
}

.problem .cases div.blue h4 {
    color: var(--BlueColor);
}

.problem .cases div.red h4 {
    color: var(--RedColor);
}

.problem .cases div.gray h4 {
    color: var(--GrayColor);
}

.problem h4 {
    margin-bottom: var(--MarginXSmall);
}

/* SOLUTION */

.solution .cases div {
    width: 31.5%;
    padding: var(--MarginMedium);
    border: var(--Border2) var(--GrayLightColor);
    border-radius: var(--BorderRadius);
}

.solution .cases i {
    width: 40px;
    height: 40px;
    display: block;
    margin-bottom: var(--MarginXSmall);
    border: var(--Border8);
    border-radius: var(--BorderRadiusBig);
}

.solution .cases i.blue {
    border-color: var(--BlueColor);
}

.solution .cases i.red {
    border-color: var(--RedColor);
}

.solution .cases i.gray {
    border-color: var(--GrayColor);
}

.solution .cases + h6 {
    color: var(--GrayColor);
}

.solution .platforms {
    margin: var(--MarginSmall) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.solution .platforms + p {
    text-align: center;
}

.solution .platforms figure {
    width: 15%;
}

.solution .platforms figure:first-child {
    width: 4%;
}

.solution .platforms figure:nth-child(4) {
    width: 12%;
    margin-top: -10px;
}

.solution ul {
    display: flex;
    margin: var(--MarginXSmall) 0;
}

.solution li {
    margin-right: var(--MarginXSmall);
    padding: var(--MarginXSmall) var(--MarginSmall);
    font-size: .8em;
    font-weight: var(--BoldFont);
    border: var(--Border2) var(--GrayLightColor);
    border-radius: var(--BorderRadiusBig);
    background-color: var(--GrayUltraLightColor);
}

.solution .notes, .deliverables .notes {
    margin-top: var(--MarginMedium);
    padding: var(--MarginSmall) var(--MarginMedium);
    color: var(--WhiteColor);
    border-radius: var(--BorderRadius);
    background-color: var(--BlueDarkColor);
}

.solution .step {
    display: flex;
    align-items: center;
    margin: var(--MarginXSmall) 0 var(--MarginMedium) 0;
}

.solution .step .number {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 var(--MarginSmall) 0 var(--MarginXSmall);
    font-size: var(--BigSize);
    font-weight: var(--BoldFont);
    color: var(--WhiteColor);
    border-radius: var(--BorderRadiusBig);
    background-color: var(--RedColor);
}

.solution .step .number.blue {
    background-color: var(--BlueColor);
}

.solution .step .number::after {
    position: absolute;
    width: 3px;
    height: 70px;
    display: block;
    margin-top: 110px;
    content: '';
    background-color: var(--GrayLightColor);
    z-index: -1;
}

.solution .last .number::after {
    display: none;
}

.solution .step .info {
    width: 80%;
}

.solution section + section {
    margin-top: var(--MarginBig);
}

/* DELIVERABLES */

.deliverables, .contact {
    background-color: var(--GrayUltraLightColor);
}

.deliverables .spec {
    display: flex;
    justify-content: space-between;
}

.deliverables .spec ul {
    width: 45%;
    margin-left: var(--MarginSmall);
}

.deliverables .spec li {
    margin: var(--MarginXSmall) 0;
    list-style-image: url(../images/arrow-blue.webp);
}

.deliverables .spec ul + ul li {
    list-style-image: url(../images/arrow-red.webp);
}

.deliverables strong {
    color: var(--GrayDarkColor);
}

/* TECHNOLOGY */

.technology {
    background: var(--BlueDarkColor) url(../images/circles.webp) no-repeat right 75px;
}

.technology h2, .technology p {
    color: var(--WhiteColor);
}

.technology h4 {
    color: var(--BlueColor);
}

.technology .connect {
    margin: var(--MarginMedium) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--MarginSmall);
}

.technology .connect div {
    width: 48%;
    padding: var(--MarginMedium) var(--MarginBig);
    border: var(--Border2) var(--BlueLightColor);
    border-radius: var(--BorderRadius);
    background-color: var(--BlueMediumColor);
}

.technology .benefit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--MarginMedium);
}

.technology .benefit div {
    width: 65%;
    padding: var(--MarginSmall) var(--MarginBig);
    font-size: var(--BigSize);
    font-weight: var(--BoldFont);
    text-align: center;
    border-radius: var(--BorderRadiusBig);
    border: var(--Border2) var(--RedColor);
}

.technology .benefit a, .pricing .get a, .contact input[type=submit] {
    margin-top: 0;
    background-color: var(--BlueColor);
}

/* PRICING */

.pricing .big strong {
    color: var(--RedColor);
}

.pricing h5 {
    padding: var(--MarginXSmall) 0;
    text-align: center;
    color: white;
    background-color: var(--BlueDarkColor);
}

.pricing h5.red {
    background-color: var(--RedColor);
}

.pricing h5.gray {
    background-color: var(--GrayColor);
}

.pricing h5.blue {
    background-color: var(--BlueColor);
}

.pricing .weeks {
    margin: var(--MarginBig) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--MarginSmall);
}

.pricing .weeks .column {
    width: 23%;
    display: flex;
    flex-direction: column;
}

.pricing .weeks .column div {
    padding: var(--MarginSmall) var(--MarginMedium);
    flex: 1;
    border: var(--Border2) var(--GrayLightColor);
    border-top: none;
    border-radius: 0 0 var(--BorderRadius) var(--BorderRadius);
}

.pricing .get {
    margin-top: var(--MarginBig);
    font-style: italic;
    text-align: center;
}

.pricing .get a {
    margin-bottom: var(--MarginSmall);
    display: inline-block;
    font-style: normal;
    background-color: var(--BlueColor);
}

/* CONTACT */

.contact {
    text-align: center;
}

.contact form {
    width: 70%;
    margin: 0 auto;
    padding: var(--MarginBig);
    display: flex;
    flex-direction: column;
    border: var(--Border2) var(--GrayLightColor);
    border-radius: var(--BorderRadius);
    background-color: var(--WhiteColor);
}

.contact label {
    margin-bottom: var(--MarginXSmall);
    font-weight: var(--BoldFont);
    text-align: left;
}

.contact input + label {
    margin-top: var(--MarginSmall);
}

.contact label.error {
    margin: var(--MarginXSmall) 0 var(--MarginSmall) 0;
    color: var(--RedColor);
}

.contact input[type=text], .contact input[type=email], .contact textarea {
    padding: var(--MarginSmall);
    font-size: var(--BaseFont);
    resize: none;
    outline: none;
    border: var(--Border2) var(--GrayLightColor);
    border-radius: var(--BorderRadius);
    background-color: var(--GrayUltraLightColor);
}

.contact input[type=text].error, .contact input[type=email].error, .contact textarea.error {
    border-color: var(--RedColor);
}

.contact textarea {
    height: 160px;
}

.contact input[type=submit] {
    margin: var(--MarginMedium) 0;
    text-transform: uppercase;
    transition: var(--Transition);
    border: none;
    cursor: pointer;
}

/* FOOTER */

footer {
    padding: var(--MarginBig);
    display: flex;
    justify-content: center;
    font-size: .8em;
    color: var(--GrayMediumColor);
    background-color: var(--BlueDarkColor);
}

footer section {
    width: var(--Wrapper);
}

footer figure {
    width: 150px;
    margin-bottom: var(--MarginSmall);
}

footer div {
    display: flex;
    justify-content: space-between;
}