*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: system-ui;
    min-height: 100vh;
    overflow-x: hidden;
}

main {
   overflow-x: hidden;
}

a, p, li {
    text-decoration: none;
    font-size: 1.6rem;
}

/* Start of header section */

header {
   width: 100vw;
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    box-shadow: 0rem 0rem 1rem .1rem lightgray;
    list-style: none;
}

.navigation a {
    display: inline-block;
    padding: .8rem 1.6rem .8rem 1.6rem;
    color: gray;
    font-weight: bold;
    font-size: 1.4rem;
}

.navigation a:hover {
    color: black;
}

.navigation .sub-nav {
    display: none;
    position: absolute;
    list-style: none;
    top: 3.3rem;
    background-color: white;
}

@media (max-width: 33.44rem) {
   .navigation .sub-nav {
      top: 4.92rem !important;
   }
 }

 @media (max-width: 26.44rem) {
   .navigation .sub-nav {
      top: 6.57rem !important;
   }
 }

 @media (max-width: 22.5rem) {
   .navigation .sub-nav {
      top: 8.22rem !important;
   }
 }

 @media (max-width: 22.32rem) {
   .navigation .sub-nav {
      top: 9.87rem !important;
   }
 }

.sub-nav li:first-of-type {
    border-bottom: solid .1rem rgba(211, 211, 211, 0.584);
}

.hover:hover ~ .sub-nav {
    display: block;
}

.sub-nav:hover {
    display: block;
}

.sub-nav li:hover {
    background-color: whitesmoke;
}

.navigation .sub-nav li {
    padding: .3rem 0 .3rem 0;
}

.navigation .item::after {
    content: '';
    border: solid .1rem lightgray;
}
 .navigation .item:last-of-type::after {
    border: none;
 }

 /* End of header section */

 /* Start of main section */

 main {
    display: block;
    background-color: rgba(211, 211, 211, 0.46);
    width: 100vw;
 }

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: calc(100% - 3rem);
    max-width: 126rem;
    margin: auto;
    padding: 7.5rem 0;
}

 .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 25%;
    padding: 2rem 0;
    min-width: 29rem;
 }

 @media (max-width: 75rem) {
    .container {
        width: 100%;
    }
 }

 .container .sub-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 12rem;
    height: 10.8rem;
    border-radius: 48%;
    box-shadow: 0 0 3rem 0 rgba(0, 0, 0, 0.3);
 }

 .sub-container a {
    display: flex;
    font-size: 4.8rem;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: rgba(0, 68, 255, 0.736);
 }

 .container .container-name {
    margin: 1rem 0 0 0;
 }

 .container-name a {
    font-weight: bold;
    font-size: 2.3rem !important;
    color: rgb(112, 109, 109);
 }

 .container-name a:hover {
    color: black;
 }

 .c-one {
    background-color: whitesmoke;
 }

 .c-two {
    background-color: gainsboro !important;
 }

 .c-three {
    background-color: lightgrey;
 }

 .c-four {
    background-color: white;
 }

 .c-five {
   background-color: rgba(214, 211, 211, 0.888);
 }

 /* End of main section */

 /* Start of footer section */

footer {
   width: 100vw;
}

 .contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    box-shadow: 0 -1rem 2.5rem 0 rgba(0,0,0,0.3);
 }

 .contacts ul {
    list-style: none;
    text-align: center;
 }

 .contacts li {
    font-size: 1.8rem;
    font-weight: 600;
 }

 .contacts a {
    color: rgb(97, 97, 97);
 }


 .social {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
 }

 .social a {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
    margin: 1rem 0.5rem 0 .5rem;
 }

 .social .whatsapp {
    background: center / contain no-repeat url(social/whatsapp.png);
 }

 .social .instagram {
    background: center / contain no-repeat url(social/instagram.webp);
 }