body {
   font-family: "Inter", sans-serif;
}

.home {
   min-height: 100vh;
   backdrop-filter: blur(0.3px);
   background: linear-gradient(to right, rgba(53, 128, 163, 0.5), rgb(210, 236, 248, 0.4), rgb(33, 24, 168, 0.5)), url('https://img-cdn.inc.com/image/upload/f_webp,c_fit,w_1920,q_auto/images/panoramic/getty_1224500457_c7gd6b.jpg');
}

.intro {
   min-height: 100vh;
   background: blue;
}

.home .avt>img {
   width: 40%;
   opacity: 0.9;
}

.home .text>div {
   width: 100%;
   padding: 10px 37px;
   backdrop-filter: blur(3px);
   box-shadow: 3px 3px 4px rgb(249, 249, 249, 0.3);
   border-top: 4px solid rgb(7, 29, 169, 0.5);
   background: linear-gradient(to right, rgba(4, 5, 61, 0.5), rgb(210, 236, 248, 0.3), rgba(98, 190, 230, 0.1));
}

.home .text > div > h4 {
   color: rgb(6, 2, 45);
}

.home .info {
   width: 100%;
   display: flex;
   justify-content: center;
   font-size: 120%;  
}

.home .info > div {
   border-top: 4px solid rgb(7, 29, 169, 0.5);
   background: rgb(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   color: white;
   padding: 20px;
   box-shadow: 3px 3px 10px rgb(255, 255, 255, 0.3);
}
.home .info h1{
   font-size: 130%;
   text-align: left;
   width: 30%;
   padding: 4px 0px;
   border-bottom: 5px solid rgba(9, 23, 116, 0.4);
}
.home .info .btn {
   margin: 6px 7px;
   background: rgb(69, 154, 215);
   color: white;
   opacity: 0.8;
   box-shadow: 3px 3px 10px rgb(255, 255, 255, 0.2);
   border-radius: 30px;
   padding: 7px 30px;
}

.bottom-nav {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   background: rgb(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: 30px;
   padding: 10px 0px;
   box-shadow: 3px 3px 10px rgba(14, 20, 186, 0.8);
   opacity: 0.9;
}

.bottom-nav a {
   color: #202020;
   text-decoration: none;
   font-weight: bold;

   padding: 12px 15px;
   border-radius: 30px;
}

.bottom-nav a:hover {
   text-decoration: underline;
   color: white;
   background: rgb(27, 14, 14);
   transition: 0.5s;
}

@media (max-width: 768px) {
   .home .avt>img {
      width: 25%;
   }

   .home .info{
      font-size: 110%;
   }
   .home .info h1{
   text-align: center;
   margin: 0px auto;
   width: 40%;
   padding: 4px 0px;
   }
}