@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



:root{
   --color-primary:#02a1df ;
   --color-primary-varient : #f9f22f;
   --color-gray-0: #f3f6f7;
   --color-gray-50: #d6e1e6;
   --color-gray-100: #bdcdd4;
   --color-gray-200: #a0b2b9;
   --color-gray-300: #8ea3ac;
   --color-gray-400: #7a8b93;
   --color-gray-500: #5a6d75;
   --color-gray-600: #3f4d53;
   --color-gray-700: #2a3439;
   --color-gray-800: #182023;
   --color-gray-900: #080b0c;
    --color-danger: #c72156;
    --color-success: #06c4c4;
    --color-info: #ffcd56;
    --color-purple: rgb(166, 27 ,191);

    --transition: all 300ms ease;

    --radius-1: 0.4rem;
     --radius-2:0.8rem;
      --radius-3:1.2rem;
       --radius-4:1.6rem;
        --radius-5:2rem;
         --radius-6:4rem;

    --container-w-lg: 84%;
    --container-w-md: 92%     
}
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   border: 0;
   background: transparent;
   outline: 0;
   list-style: none;
   text-decoration: none;
   
   
}
html{
   font-size: 14px
   ;
}
body{
   font-family: "Montserrat" , sans-serif;
   color: var(--color-gray-600);
   line-height: 1.6;
   background-color: var(--color-gray-50);
   font-weight: 500;
}
.dark{
   --color-gray-0: #080b0c;
   --color-gray-50: #182023;
   --color-gray-100: #2a3439;
   --color-gray-200: #33414f;
   --color-gray-300: #576471;
   --color-gray-400: #707d8b;
   --color-gray-500: #8e9cac;
   --color-gray-600: #a6acb1;
   --color-gray-700: #c8ccd2;
   --color-gray-800: #e7e6ed;
   --color-gray-900: #f9fbfc;

}
.container{
   width: var(--container-w-lg);
   margin-inline: auto;

}
a{
   color: var(--color-gray-900);
   transition: var(--transition);
}
img{
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
h1, h2, h3, h4, h5, h6{
   color: var(--color-gray-900);
   font-weight: 800;
   line-height: 1.2;
   text-transform: uppercase;
}
h1{
   font-size: 2.8rem;
}
h2{
   font-size: 1.8rem;
}
h3{
   font-size: 1.1rem;
}
h4{
   font-size: 0.92rem;
}
h5{
   font-size: 0.86;
}
h6{
   font-size: 0.7rem;
}
button{
   cursor: pointer;
   transition: var(--transition);

}
.btn{
   display: inline-block;
   width: fit-content;
   padding: 1.3rem 2.5rem;
   background: var(--color-gray-0);
   font-weight: 600;
   text-transform: uppercase;
   border-radius: var(--radius-3);
   box-shadow: 0 0.7rem 0 var(--color-gray-100);
}
.btn.primary{
   background: var(--color-primary);
   color: var(--color-gray-0);
}
.btn:hover{
   background: var(--color-gray-900);
   color: var(--color-gray-0);
   box-shadow: none;
}


/*=========NAVBAR==========*/

nav{
   background: var(--color-primary);
   box-shadow: 0 0.5rem0 rgba(0, 0, 0, 0.1);
   min-width: 100vw;
   height: 6rem;
   display: grid;
   place-items: center;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 2;

}
body.dark nav{
   box-shadow: 0 0.5rem 0 rgba(255, 255, 255, 0.1);

}
.nav__container{
   display: flex;
   justify-content: space-between;
   align-content: center;

}
.nav__content{
   display: flex;
   align-items: center;
   gap: 4rem;
}
.nav__menu{
   display: flex;
   gap: 4rem;
   align-items: center;
}
.nav__menu-open, .nav__menu-close{
   font-size: 2rem;
   color: var(--color-gray-0);
   display: none;

}
nav a{
   color: var(--color-gray-0);

}
.nav__logo{
   font-weight: 800;
   font-size: 1.3rem;

}
nav a:hover{
   color: var(--color-primary-varient);

}
nav a:active{
   color: var(--color-primary-varient);

}
.theme__btn{
   color: var(--color-gray-0);
   font-size: 1.5rem;
}
.theme__btn:hover{
   color: var(--color-primary-varient);
}


/*=========page header styles==========*/

.page__header{
   height: 15rem;
   background: url(./images/office\ reseachrs.jpg) center center/cover;
   display: grid;
   place-items: center;
   margin: 4rem 0;
   position: relative;
}
.page__header::before{
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   background:#030f1b;
   opacity: 0.75;
}
.page__header-content{
   width: 50%;
   text-align: center;
   z-index: 1;
}
.page__header-content * {
   color: white;
}
.page__header-content h2{
   margin-bottom: 0.7rem;
}





/*=========size for SMALL SCREEN SIZE==========*/








@media screen and (max-width: 600px) {
   h1{
      font-size: 2rem;
   }
   h2{
      font-size: 1.4rem;
   }
   h3{
      font-size: 1rem;
   }
   .btn{
      padding: 1.5rem;
      font-size: 0.8rem;
   }
   .container{
      width: var(--container-w-md);
   }
   .nav__content{
         gap: 3rem;
   }
   .nav__menu{
      position: fixed;
      top: 4rem;
      right: 4%;
      flex-direction: column;
      gap: 0;
      width: 16rem;
      display: none;
      perspective: 200px;
   }
   .nav__menu a {
      background: linear-gradient( var(--color-gray-800) , var(--color-gray-700)) ;
      color: var(--color-gray-0);
      height: 4rem;
      display: grid;
      place-items: center;
      width: 100%;
      box-shadow: -2rem 4rem 3rem rgba(0, 0, 0, 0.2);
      animation: animation1  300ms ease forwards;
      transform: rotateX(90deg);
      opacity: 0;
      transform-origin: top;
   }
   .nav__menu a:nth-child(2){
      animation-delay: 300ms;

   }
    .nav__menu a:nth-child(3){
      animation-delay: 550ms;
      
   }
   .nav__menu a:nth-child(4){
      animation-delay: 750ms;
      
   }
   .nav__menu a:nth-child(5){
      animation-delay: 900ms;
      
   }
    .nav__menu a:nth-child(6){
      animation-delay: 1050ms;
      
   }
   .nav__menu a:nth-child(7){
      animation-delay: 1220ms;
      
   }
  
  
  


   @keyframes animation1 {
      to{
         transform: rotateX(0);
         opacity: 1;
      }
   }

   .nav__menu a.active{
      background: var(--color-primary);
      color: var(--color-gray-0);
   }
   .nav__menu-open{
      display: inline-block;
   }
   .page__header{
      height: 20rem;
   }
   .page__header-content{
      width: var(--container-w-md);
   }
   .footer__container{
   flex-direction: column;
   gap: 5rem;
   }
   .footer__menu{
   flex-direction: column;
   gap: 1.5rem;
   }
   .footer__socials{
   gap: 2rem;
   }


}