/**=================================*/
/**============ GENERAL ============*/
/**=================================*/
@font-face {
   font-family: 'RobotoMono';
   src: url('/resources/fonts/RobotoMono-VariableFont_wght.ttf');
}

:root {
   --main-color: #66b3ff;
   --white-color: #fff;
}

html {
   font-size: 62.5%;
}

body {
   font-size: 1.6rem;
   font-family: 'RobotoMono';
}

main {
   height: 100vh;
   background-image: url('/resources/img/hero-img.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

/**================= */
/** HEADER ========= */
/**================= */

header {
   display: flex;
   align-items: center;
   position: absolute;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.5);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(6.3px);
   -webkit-backdrop-filter: blur(6.3px);
}

.header-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.header-wrapper button {
   border-radius: 100px;
   color: var(--white-color);
   background-color: var(--main-color);
   font-weight: 700;
   letter-spacing: 0.8px;
   border-radius: 100px;
   border: 2px solid var(--main-color);
   padding: 5px 15px;
   font-size: 18px;
   transition: all ease 0.3s;
}

.header-wrapper button:hover {
   background-color: #137de5;
   transform: scale(1.1);
}

.header-wrapper button a {
   text-decoration: none;
   color: inherit;
}

.logo {
   padding: 2rem 0;
}

.logo img {
   width: 140px;
}

.logo span {
   text-transform: uppercase;
   margin: 0;
   font-size: 3rem;
}

.logo span:first-child {
   border-radius: 100px;
   border: 2px solid var(--main-color);
   padding: 5px 15px;
   background-color: var(--main-color);
   color: var(--white-color);
}

.logo span:last-child {
   font-weight: 300;
   color: var(--main-color);
   padding-left: 5px;
}

/**================= */
/** MAIN =========== */
/**================= */

.hero {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh; /* Full viewport height */
   text-align: center;
}

.main-content {
   position: relative;
   top: 42.5px;
}

/** List of Services */

.heading {
   font-size: 4rem;
   text-transform: capitalize;
   font-weight: bold;
   background-color: rgba(255, 255, 255, 0);
   border-radius: 12px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(30px);
   -webkit-backdrop-filter: blur(30px);
   padding: 2rem;
   text-align: center;
   color: var(--white-color);
}

.list-wrapper {
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
   color: #000;
   padding: 4rem;
   background-color: rgba(255, 255, 255, 0);
   border-radius: 12px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(30px);
   -webkit-backdrop-filter: blur(30px);
   color: var(--white-color);
}

.list-wrapper p {
   width: 80%;
   margin-bottom: 4rem;
   text-align: center;
}

.list-wrapper ul {
   font-size: 1.6rem;
   padding: 0;
}

.list-wrapper ul li {
   list-style-type: none;
   margin: 1.5rem 0;
   display: flex;
   align-items: center;
}

.list-wrapper ul li img {
   margin-right: 1rem;
}

.list-wrapper ul li:first-child {
   margin-top: 0;
}

.list-wrapper ul li:last-child {
   color: #959595;
   font-size: 1.3rem;
   margin: 0;
   text-shadow: 1px 2px 8px #2e2e2e5e;
   font-weight: bold;
}

.list-wrapper ul li i {
   margin-right: 1rem;
   color: var(--main-color);
   font-size: 2rem;
}

/** =========================== */
/** MEDIA QUERIES ============= */
/** =========================== */

@media only screen and (max-width: 768px) {
   html {
      font-size: 60.5%;
   }
}

@media only screen and (max-width: 499px) {
   html {
      font-size: 52.5%;
   }
}

@media only screen and (max-width: 425px) {
   html {
      font-size: 45.5%;
   }
}