@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/Vazirmatn.woff');
  src: url('../fonts/Vazirmatn.ttf');
  font-weight: normal;
 }
 
 /* Base styles */
 body {
   font-family: 'Vazirmatn', Vazirmatn;
   background-color: #171d34;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 :root {
   --e-global-color-primary: #242b44;
   --e-global-color-secondary: #ffffff;
   --e-global-color-accent: #4aa5f0;
   --e-global-color-text: #afb6d2;
   --e-global-color-hover: #d88730;
   --e-global-color-dark-blue: #171d34;
   --e-global-color-yellow:#fdde47;
   --e-global-color-dark-blue2: #1c223a;
   --e-global-color-very-dark-blue: #1a2037;
   --e-global-color-soft-blue: #484d5f;
   --e-global-color-dark-blue3:#1d233c;
   --e-global-color-blue-f:#2a3150;
   --e-global-color-dark-bluish:#1f253e;
   --e-global-color-blue-best:#1b2137;
   --e-global-color-bar: #2f3449;
 }
 
 html {
   scroll-behavior: smooth;
 }
 
 /* Typography with responsive sizes */
 p {
   font-size: clamp(16px, 2vw, 28px);
   line-height: 1.4;
   font-weight: 400;
   padding-bottom: 20px;
 }
 
 a {
   line-height: 1.2;
   font-weight: 600;
 }
 
 /* Home header section */
 .home-header-section {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   background: var(--e-global-color-very-dark-blue);
   position: relative;
   overflow: hidden;
   width: 100%;
 }
 
 .home-header-section .banner-right-img {
   position: absolute;
   width: 100%;
   max-width: 1689px;
   height: auto;
   bottom: 0;
   right: -20%;
   z-index: 0;
 }
 
 .home-header-section:before {
   content: "";
   width: 30vw;
   max-width: 445px;
   height: 30vw;
   max-height: 445px;
   position: absolute;
   top: -12vw;
   left: -16vw;
 }
 
 .home-header-section .main-header .navbar-brand {
   margin-left: 0;
   padding-bottom: 0;
   margin-right: 5vw;
 }
 
 .home-header-section .main-header {
   padding: 26px 5% 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
 }
 
 .home-banner-section {
   padding-top: 10%;
   padding-bottom: 10%;
   position: relative;
 }
 
 .banner-img-content figure {
   margin-left: 0;
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
 }
 
 /* Animation */
 .star {
   animation: star 10s ease-out infinite;
 }
 
 @keyframes star {
   0% {
     opacity: 0;
     transform: scale(1.5) translateY(-0.75em);
   }
   20% {
     opacity: 1;
   }
   89% {
     opacity: 1;
     transform: scale(1);
   }
   100% {
     opacity: 0;
     transform: translateZ(-1000em);
   }
 }
 
 /* Footer */
 .footer-section {
   color: var(--e-global-color-secondary);
   overflow: hidden;
   position: relative;
   padding: 2% 5%;
 }
 
 .footer-section .footer-bar .footer-bar-content p {
   font-size: clamp(12px, 1.5vw, 16px);
   line-height: 1.5;
   font-weight: 400;
   color: var(--e-global-color-text);
   padding-top: 1%;
   padding-bottom: 1%;
 }
 
 .footer-bar .footer-bar-content {
   padding: 16px 0;
   border-top: 1px solid var(--e-global-color-bar);
 }
 
 /* Navigation */
 ul {
   list-style-type: none;
   overflow: hidden;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
 }
 
 li {
   float: none;
 }
 
 li a {
   color: #000;
   display: block;
   text-align: center;
   padding: 10px;
   text-decoration: none;
   font-size: clamp(12px, 1vw, 14px);
 }
 
 .grid {
   height: 23px;
   position: relative;
   bottom: 4px;
 }
 
 /* Button styles */
 .signbutton {
   background-color: #4885ed;
   color: #fff;
   border: none;
   border-radius: 3px;
   padding: 7px 10px;
   position: relative;
   font-weight: bold;
   display: inline-block;
 }
 
 .logo {
   margin-bottom: 20px;
   color: #fff;
 }
 
 /* Search bar */
 .bar {
   margin: 0 auto;
   width: 90%;
   max-width: 600px;
   border-radius: 30px;
   border: 1px solid #fff;
   background-color: #fff;
 }
 
 .searchbar {
   height: 50px;
   border: none;
   width: 95%;
   font-size: 16px;
   outline: none;
   border-radius: 20%;
   padding: 0 10px;
 }
 
 .buttons {
   margin-top: 30px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 .button {
   background-color: #f5f5f5;
   border: none;
   color: #707070;
   font-size: clamp(14px, 1.2vw, 17px);
   padding: 10px 45px;
   margin: 5px;
   border-radius: 25px;
   outline: none;
 }
 
 /* Media Queries */
 @media screen and (max-width: 1200px) {
   .home-header-section .main-header {
     padding: 26px 5% 0;
   }
   
   .home-header-section .banner-right-img {
     right: -30%;
   }
 }
 
 @media screen and (max-width: 992px) {
   .home-header-section .main-header .navbar-brand {
     margin-right: 0;
   }
   
   .home-banner-section {
     padding-top: 15%;
     padding-bottom: 15%;
   }
   
   .home-header-section .banner-right-img {
     opacity: 0.6;
     right: -40%;
   }
 }
 
 @media screen and (max-width: 768px) {
   .home-header-section .main-header {
     padding: 20px 5% 0;
     flex-direction: column;
   }
   
   ul {
     justify-content: center;
     margin-top: 15px;
   }
   
   .home-banner-section {
     padding-top: 20%;
     text-align: center;
   }
   
   .bar {
     width: 70%;
   }
   
   .button {
     padding: 8px 15px;
   }
   .logo {
    padding-top: 20%;
}
.stars {
  opacity: 50%;
}
   }
 
 @media screen and (max-width: 576px) {
   p {
     font-size: 14px;
     line-height: 1.3;
     padding-bottom: 15px;
   }
   
   .home-banner-section {
     padding-top: 25%;
     padding-bottom: 25%;
   }
   
   .signbutton {
     padding: 5px 8px;
     font-size: 12px;
   }
   
   .searchbar {
     height: 40px;
     font-size: 14px;
   }
   
   .buttons {
     flex-direction: column;
     align-items: center;
   }
   
   .button {
     width: 25%;
     margin: 5px 0;
     margin-top: -5;
     font-size: 12px;
   }
 }