:root {
      --header-height: 3.5rem;
      --first-color: hsl(0, 0%, 100%);
      --title-color: #ffffff;
      --text-color: hsl(0, 0%, 100%);
      --body-color: hsl(230, 100%, 98%);
      --container-color: hsl(230, 100%, 97%);
      --border-color: hsl(0, 0%, 100%);
    
    
      --body-font: "Syne", sans-serif;
      --h2-font-size: 2.5rem;
      --normal-font-size: .938rem;
    
    
      --font-regular: 400;
      --font-medium: 500;
      --font-semi-bold: 600;
    
    
      --z-fixed: 100;
      --z-modal: 1000;
    }
    
    @media screen and (min-width: 1023px) {
      :root {
        --h2-font-size: 1.5rem;
        --normal-font-size: 1rem;
      }
    }
    
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    body,
    input,
    button {
        font-family: Verdana, sans-serif;
      font-size: var(--normal-font-size);
      
    }
    
    body {
      background-color: var(--body-color);
      color: var(--text-color);
      
    }
    
    input,
    button {
      border: none;
      outline: none;
    }
    
    ul {
      list-style: none;
      
    }
    
    a {
      text-decoration: none;
    }
    
    img {
      display: block;
      max-width: 100%;
      height: auto;
      
    }
    
    
    .container {
      max-width: 1120px;
      margin-inline: 1.5rem;
      
    }
    
    .main {
      position: relative;
      height: 100vh;
      
    }
    
    .main__bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: -1;
    }
    
    .search,
    .login {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: var(--z-modal);
      background-color: hsla(230, 75%, 15%, .1);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px); 
      padding: 8rem 1.5rem 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s;
    }
    
    .search__close {
      position: absolute;
      top: 2rem;
      right: 2rem;
      font-size: 1.5rem;
      color: rgb(0, 255, 0);
      cursor: pointer;
    }
    
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #2861D3; /* Black background color */
      box-shadow: 0 2px 16px hsla(230, 75%, 32%, .15);
      z-index: var(--z-fixed);
    }
    
    .nav {
      height: var(--header-height);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav__logo {
      color: #fff; /* White color for the logo */
      font-weight: var(--font-semi-bold);
    
    }


    .nav__logo:hover {
      color: #fff !important;  /* White color for the logo */
      

    }
    
    .nav__actions {
      display: flex;
      align-items: center;
      column-gap: 1rem;
    }
    
    .nav__search, 
    .nav__login, 
    .nav__toggle, 
    .nav__close {
      font-size: 1.25rem;
      color: #fff; /* White color for the icons */
      cursor: pointer;
 
    }
  
    
    
    @media screen and (max-width: 1023px) {
      .nav__menu {
        position: fixed;
        top: -100%;
        left: 0;
        background-color: #2861D3; /* Black background color for the menu */
        box-shadow: 0 8px 16px hsla(230, 75%, 32%, .15);
        width: 100%;
        padding-block: 4.5rem 4rem;
      
      }
    }
    
    .nav__list {
      display: flex;
      flex-direction: column;
      row-gap: 2.5rem;
      text-align: center;
    }
    
    .nav__link {
      color: #fff; /* White color for the links */
      font-weight: var(--font-semi-bold);
      transition: color .4s;
    }
    
    .nav__close {
      position: absolute;
      top: 1.15rem;
      right: 1.5rem;
      
       
    }
    
    
    .show-menu {
      top: 0;
    }
    
    
    .search__form {
      display: flex;
      align-items: center;
      column-gap: .5rem;
      background-color: var(--container-color);
      box-shadow: 0 8px 32px hsla(230, 75%, 15%, .2);
      padding-inline: 1rem;
      border-radius: .5rem;
      transform: translateY(-1rem);

    }
    
    .search__icon {
      font-size: 1.25rem;
      color: var(--title-color);
    }
    
    .search__input {
      width: 100%;
      padding-block: 1rem;
      background-color: var(--container-color);
      color: var(--text-color);
    }
    
    .search__input::placeholder {
      color: var(--text-color);
    }
    
    
    .show-search {
      opacity: 1;
      pointer-events: initial;
    }
    
    .show-search .search__form {
      transform: translateY(0);
    }
    
    
    
    @media screen and (min-width: 576px) {
      .search,
      .login {
        padding-top: 10rem;
      }
    
      .search__form {
        max-width: 450px;
        margin-inline: auto;
      }
    
      .search__close,
      .login__close {
        width: max-content;
        top: 5rem;
        left: 0;
        right: 0;
        margin-inline: auto;
        font-size: 2rem;
      }
    
      .login__form {
        max-width: 400px;
        margin-inline: auto;
      }
    }
    
    /* For large devices */
    @media screen and (min-width: 1023px) {
      .nav {
        height: calc(var(--header-height) + 2rem);
        column-gap: 3rem;
      }
      .nav__close, 
      .nav__toggle {
        display: none;
      }
      .nav__menu {
        margin-left: auto;
      }
      .nav__list {
        flex-direction: row;
        column-gap: 3rem;
      }
    
      .login__form {
        padding: 3rem 2rem 3.5rem;
      }
    }
    
    @media screen and (min-width: 1150px) {
      .container {
        margin-inline: auto;
      }
    }
    
    

    
    
    
    @media (min-height: 1050px) {
      .resp {
       display: flex;
      }
     }   
     
     
     .resp {
      display: none;
     }