@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic&display=swap');

:root{
   --blue-color: #003049;
   --red-color: #d62828;
   --like-white-color: #eae2b7;

   --aqua-color: #009FE2;
   --filter-color: #2F2483;
}

*{
   margin: 0;
   padding: 0;
   font-family: 'Noto Kufi Arabic', sans-serif;
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-padding-top: 7rem;
   scroll-behavior: smooth;
}

.success-msg{
   width: 50%;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
}

.success-msg img{
   width: 90%;
}

body{
   background: url("images/background\(1920\ ×\ 1080\ px\).png");
}

footer{
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: white;
   font-size: 1.7rem;
   gap: 1rem;
}

.aquafilter{
   margin: 1rem auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.header{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   overflow: hidden;
   margin-bottom: 1rem;
}

.header img{
   width: 15%;
}

.first-section , .second-section , .photo{
   display: flex;
   justify-content: center;
   align-items: center;
}

.first-section img , .second-section img , .photo img{
   width: 35rem;
}


form{
   width: 35rem;
   background-color: var(--filter-color);
   margin: 2rem auto;
   padding: 2rem 1rem;
   border: none;
   border-radius: .5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1.5rem;
}

form h1{
   width: 100%;
   background-color: var(--aqua-color);
   color: white;
   font-size: 2rem;
   text-align: center;
   padding: 1rem 0;
   line-height: 3.5rem;
}

form input{
   width: 100%;
   text-align: center;
}

#sub{
   text-align: center;
}

#msg{
   background-color: var(--filter-color);
   color: white;
   text-align: center;
   padding: 1rem;
}

.signature{
   color: var(--blue-color);
   text-align: center;
   letter-spacing: .2rem;
   text-transform: lowercase;
   font-size: 1.7rem;
   margin-top: 1rem;
   position: absolute;
   bottom: 1rem;
   width: 100%;
}



/* media queries */

@media (max-width: 991px){

   html{
      font-size: 55%;
   }

   .header img{
      width: 30%;
   }

   form input{
      margin: 1rem 0;
   }

   .success-msg{
      width: 90%;
   }
}


@media (max-width: 450px){

   html{
      font-size: 50%;
   }
}