*,::after,::before {
    box-sizing:border-box;margin:0;padding:0;
}
::placeholder, textarea {
    font-family:Roboto, Arial,sans-serif;
    font-size:1rem;
}
html {
     scroll-behavior:smooth;
}
body {
    color:#fff;
    font-family:Roboto, Arial, sans-serif;
    font-size: 1rem;
    font-style:normal;
    font-weight:400;
    letter-spacing:.2ch;
    line-height:1.6;
    margin:0;
    padding:0;
    width: 100%;
}
a {
    text-decoration:none;
}
ul {
    list-style-type:none;
}
h1 {
    font-size:3rem;
}
h2 {
    font-size:2rem;
}
h3 {
    font-size:1rem;
    font-weight:700;
}
b {
    font-weight:700;
}

.cta-button,
footer,
nav ul li {
    text-align:center;
}
nav ul li a:hover {
    border-bottom:.06 solid #fff;
}
.header {
    align-items:center;
    background:#3f70d7;
    display:flex;
    flex-direction:column;
    min-height: 10rem;
    padding: 2rem;
    width:100%;
}
.brand,
.slogan {
    display:flex;
    flex-direction:column;
    width:100%;
}
.brand {
    align-items:center;
}
.logo {
    display:flex;
    justify-content:center;
}
.logo img {
    animation:2s linear 250ms rotation;
    margin:0 auto;
    top:0;
    width:5em;
}
@keyframes rotation {
    from {transform:rotate(0)
    }to {
    transform:rotate(360deg)}
}
.blog,
.intro {
    flex-direction:column;
}
.intro {
    display:flex;
    gap:1rem;
    height:auto;
    justify-content:space-between;
    margin:2rem auto 4rem 0;
    max-width:36rem;
    top:5rem;
}
.cta-button {
    background-color:#00f;
    border-radius:.25rem;
    border:none;
    color:#fff;
    cursor:pointer;
    font-weight:700;
    height:2.2rem;
    width:12em;
}
a.cta-button {
    align-items:center;
    display:inline-flex;
    justify-content:center;
}
.cta-button:hover {
    background-color:#0c95ca;
}
.cta-button:active {
    color:#fff;background-color:rgb(38, 38, 245);
}
nav ul {
    display:flex;
    flex-direction:row;
    gap:1.25rem;
    justify-content:flex-end;
    overflow:hidden;
    position: absolute;
    right: 1rem;
}
nav ul li {
    align-items:center;
    width:5rem;
}
nav ul li a {
    color:#fff;text-decoration:none;
}
nav ul li a:hover {
    color:#fff;font-weight:700;overflow:hidden;
}
nav ul li a:active {
    color:#a8cce9;font-weight:700;
}
main {
    background:#fff;
    display:flex;
    justify-content: center;
    margin-top: 1rem;
}
.content{
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    margin: 0 auto;
    width: 100%;


}
.content,.operations-item {
    display:flex;
    flex-direction:column;
}
.about,
.content {
    gap:1rem;
}
.blog {
    color:#333;
    display:none;
    height:auto;
    padding:1rem;
    right:0;
    top:2.25rem;
}
.blog ul {
    color:#058bf2;
    font-weight:700;
}
.blog a {
    text-decoration:none;color:hwb(206 2% 5%);
}
.blog a:hover {
    color:#055a9c;border-bottom:.063rem solid #055a9c;
}
.blog h2,.blog h3 {
    font-size:80%;letter-spacing:.1ch;
}
.section-operations {
    background-color:#3f70d7;
    border-radius:.5rem;  
    display:flex;
    flex-direction:column;
    flex-shrink: 0;
    flex-wrap:wrap;
    gap: 1rem;
    justify-content:center;
    margin: 0 auto;
    padding: 1rem;
    transition:.5s ease-in-out;
}
.operations-item {
    align-items:center;
    background-color:#fff;
    border-radius:.5rem;
    color:#000;
    flex-direction: column;
    flex-shrink: 0;
    padding: 1rem;
    transition:.5s ease-in-out;
    width:20rem;
    
}
.operations-item header {
    align-content:center;
}
.operations-item ul {width:100%;margin-block-start:.625rem;
}
.active {
    height:auto;
    width:100%;
}
.about {
    background-color:#3f70d7;
    border-radius:.5rem;
    display:flex;
    flex-direction:column;
    margin: 0 auto;
    max-width:64rem;
    padding: 1rem;
    position:relative;
    width: 100%;
}
.first-container, .second-container {
    margin:0 auto;
    max-width:64rem;
    overflow: hidden;
}
.first-container img,.second-container img {
    border-radius:.5rem;
    width:50%;
}.first-container img {
    float:left;
    margin:0 1rem 0 0;
}
.wrapper img {
    float:right;
    margin:0 0 0 1rem;
}
.contact-form-section {
    background:linear-gradient(.25turn,#3f87a6,#ebf8e1,#f69d3c);
    border-radius: .5rem;
    box-shadow:0 0 .5rem .5rem #6e7d8d20;
    gap:1rem;
    margin: 0 auto;
    max-width: 64rem;
    padding: 1rem;
    width: 100%;
}.contact-form {
    color:#333;
    flex-direction:column;
    margin:1rem;
    padding: 0 6rem;
}
.contact-info {
    width: 100%;
}
.contact-form ul {
    list-style:none;
}
.contact-form fieldset {
    position:relative;display:block;border:none;
}
.contact-form .form-item {
    display:flex;
    flex-direction:column;
    margin:.4rem auto;
    position:relative;
}
.sr-only {
  position: absolute;
  width: .63rem;
  height: .63rem;
  padding: 0;
  margin: -.63rem;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  white-space: nowrap;
}
.contact-form input {
    border-radius:.25rem;
    border:.063rem solid #333;
    box-sizing: border-box;
    color:#333;
    height:2.25rem;
    margin:.25rem auto;
    padding:.5rem;
    width:100%;
}
.contact-form textarea {
    border-radius:.5rem;
    border:.063rem solid #333;
    box-sizing: border-box;
    font-size:1rem;
    padding:.5rem;
}
.contact-form input,
.contact-form textarea,
.contact-form button,
.cta-button {
  min-height: 2.75rem;
}
input:focus,
textarea:focus,
button:focus,
a:focus {
  outline: .125rem solid #3f70d7;
  outline-offset: .125rem;
}
.contact-form .cta-button {
    align-self:self-start;
    margin-top: 2rem;
    position:relative;
    width:10rem;
}
.contact-form .warning {
    color:red;
    font-size:0.8rem;
    position:absolute;
    right:.2rem;
    text-align:end;
}
.validationMsg {
    bottom:1.25rem;
    font-size:.8rem;
}
.contact-info ul a,
.contact-info ul li,
.contact-info ul p {
    text-decoration:none;
    font-size:1rem;
    color:#333;
    line-height:2rem;
}
footer {
    background-color:#333;
    color:#fff;
    height:auto;
    margin-top: 1rem;
    min-height:10em;
    padding: 2rem 0;
    width:100%;
    
}.privacyPolicy a,footer .contact-info a,footer p a {
    color:#fff;text-decoration:none;
}footer .contact-info span {
    color:#3f70d7;
}footer .contact-info a:hover,footer p a:hover {
    border-bottom:.63rem solid #fff;
    font-weight:700;
    text-decoration:none;
}.privacyPolicy {
    color:#000;
    height:100vh;
    margin:4rem auto;
    width:80%;
}.privacyPolicy header {
    background-color:#fff;
    margin:0;padding:0;
}
.privacyPolicy h1,
.privacyPolicy h2,
.privacyPolicy h3 {
    margin:0;padding:0;
}

.blog,.contact-form-section .contact-info {
        display:none;
    }
@media (max-width:600px) {
    .content {
        padding: 1rem 0;
    }
    header nav {
        bottom: 1rem;
    }
    .brand {
        text-align:center;
    }
    .about {
        max-width: 37.5rem;
        width: 100%;
    }
    .contact-form-section {
        width: 100%;
    }
    .contact-form {
        padding: 0 .5rem;
    }
    .about img, .wrapper img {
        margin-bottom: 1rem;
    }
    .contact-form legend h2 {
        font-size:1.5rem;
    }
    footer .contact-info a,
    footer a,footer p {
        font-size:0,8rem;
        line-height:2;
    }
}
@media (max-width:780px) {
    .section-operations {
        margin: 0 auto;
        width: 100%;
    }
    .operations-item {
        margin: 0 auto;
    }
    .logo,
    header nav ul {
        justify-content:center;
        position: relative;
    }
    .contact-form {
        padding: 0 2rem;
    }
    .contact-form-section .contact-form {
        margin:auto;
    }
    .intro {
        top:1rem;
        margin:2rem 0 4rem;
    }
    .logo img {
        margin:0 auto;
        top:0;
    }
    .slogan {
        align-items:center;
        top:.625;
    }
    header nav ul {
        width:100%;
    }
    .content {
        align-items:center;
        background-color:#3f70d7;
        justify-content:center;
        padding:1rem;
    }
    .section-operations header {
        text-align:center;
    }
    header h2 {
        font-size: 90%;
    }
    .contact-form-section {
        align-items:center;
        justify-content:center;
        padding:.75rem;
        width:100%;
    }
    .contact-form {
        flex-direction:column;
    }
    .contact-form legend h3 {
        font-size:1.25rem;
    }
    .contact-form label {
        display:inline-block;
        top:-1rem;
    }
}
@media (min-width:781px) {
    a.cta-button {
        align-self:flex-start;
        left:0;
        position:relative;
    }main {
        flex-direction:row-reverse;
    }
    .intro {
        display:inline-flex;
    }
    .section-operations {
        flex-direction:row;
        flex-wrap:wrap;
    }
    .operations-item {
        background-color: #FFFFFF;
    }
    .operations-item header {
        margin-block-end:0.75rem;
    }
    .operations-item h2 {
        font-size:90%;
    }
    footer .company p {
        line-height:2.4;
    }
    footer .contact-info a,
    footer a,footer p {
        font-size:1rem;line-height:1.6;
    }
    nav ul {
        padding-inline-end:1.25rem;margin-inline-end:.75rem;
    }
}