@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

  h1{
      font-family: "Merriweather Sans", sans-serif; 
  }
  h2{
      font-family: "Merriweather Sans", sans-serif; 
      text-align: center;
      color: #0a607e;
      font-weight: 600;
      background: -webkit-linear-gradient(#5e5d5e, #0a607e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  h2 span{
      border-bottom: 2px solid #0a0c7e;
  }

  h3{
      font-family: "Merriweather Sans", sans-serif; 
  }
  h4{
      font-family: "poppins", sans-serif; 
  }
  p{
      font-family: "inter", sans-serif;  
  }
  span{
      font-family: "poppins", sans-serif;  
  }
  @media screen and (max-width: 450px) {
     h2{
      font-size: 20px;
      padding: 20px 0 5px;
      }
      h2 span{
          border-bottom: 1px solid #0a0c7e;
      }
  }



  .top-nav{
      display: flex;
      justify-content: end;   
      gap: 20px;
      padding: 0 20px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  }
  .top-nav a{
      font-size: 14px;
      padding: 5px 10px;
      text-decoration: none;
      color: #111;
  }
  .top-nav a i{
      padding: 5px 7px;
      border-radius: 50%;
      background: #111;
      color: #fff;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  }
  header{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;      
  }

  .navbar {
      background: #fff;
      box-shadow: 0 4px 6px rgba(22, 22, 26, 0.18);
      padding: 0 20px;
  }
  .navbar .navbar-nav  {
    padding: 5px 0;
  }
  .navbar .navbar-nav a  {
      animation: none;
  }
  .navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
  }
  .navbar .navbar-nav .nav-link:hover {
    transform: scale(1.1);
  }

  .btn-nav {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  }
  .btn-nav:hover {
    background: #111;
    color: #fff;
  }
  .btn-nav:hover a{
    color: #fff;
  }
  .btn-nav a{
    text-decoration: none;
    color: #111;
  }

  .btn-outline:focus {
    box-shadow: none;
  }
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  @media screen and (max-width: 767px){
     .navbar {
        padding: 10px 0;
    }
    .navbar .navbar-nav .nav-link:hover {
      transform: scale(1);
    }
  }
  
  @media screen and (max-width: 450px) {
    .top-nav{  
        gap: 0px;
        padding: 10px 0 0;
    }
    .top-nav a span{
       display: none;
    }
  }
  
  /*============================================ footer ==============================================================*/

  .footer{
    background: #3b3939;
    padding: 3% 0 0;
    background: linear-gradient(47deg,rgba(59, 57, 57, 1) 8%, rgba(1, 26, 23, 1) 100%);
  }
  .footer h2{
    background: -webkit-linear-gradient(#e2e2e2, #00d7fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
  }
  .footer p a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
  }
  .footer p a:hover{
    transform: scale(1.5);
    color: #00d7fd;
  }




  .social-icons{
    text-align: center;
  }
  .social-icons a{
    color:#fff;
    line-height:30px;
    font-size:30px;
    margin: 0 5px;
    text-decoration:none;
  }
  .social-icons a i{
    line-height:30px;
    font-size:30px;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
  }
  .social-icons a:hover i{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
  }

  .copyright {
    color: #fff;
    animation: none;
  }
  .copyright p{
    color: #fff;
    animation: none;
  }
  
  @media (max-width:450px){
    .footer p a{
      font-size: 12px;
    }
    .copyright{
      font-size: 12px;
    }
  }






  h2, p , img, a{
   animation: app linear;
   animation-timeline: view();
   animation-range: entry 0% cover 30%;
  }

  @keyframes app {
    from {
      transform: scale(0.4);
    }
    to {
      transform: scale(1);
    
    }
  }