:root{
       --yellow:#f5bf23;
       --black:#111;
       --white:#fff;
       --light-color: #666;
       --light-bg:#eee;
       --box-shadow: 0 .5rem rgba(0,0,0,0.1);
   --border:.1rem solid rgba(0,0,0,0.3);


   } 
   *{margin: 0;
    padding: 0;
    outline: none;
    box-sizing: content-box;
    outline: none;
    border:"none";
    text-decoration:"none";
   
  
}
.web{
    background-color: rgb(24, 24, 54);
}
/* @mixin grid($val){
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax($val, 1fr));
    gap:2rem;
}
@mixin titleText($titleSize){
    font-size:$titleSize;
  color: var(--black);
  text-transform:capitalize;
}

@mixin graphText($graphSize){
    font-size:$graphSize;
  color: var(--light-color);
  text-transform:capitalize;
  line-height:1.5;
}
@mixin iconBox(){
    height:5rem;
    width: 5rem;
    line-height: 5rem;
    font-size:2rem;
    background: var(--light-bg);
    color:var(--blac);
    cursor:pointer;
    text-alagn:center;

    &:hover{
        background:var(--black);
        color:var(--white);
    }
} */

    
    /* &::-webkit-scrollbar{
    width: 1rem;
}
&::-webkit-scrollbar-track{
    background:transparent;
}
&::-webkit-scrollbar-thumb{
    background:var(--yellow);
}} */

.header{
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    
}
.logo img{
   width: 25%;
}
nav.navbar{
    font-size: 1.5rem;
    display: flex;
    width: 50%;
   text-align: center;

    
}
.ga{
  flex-basis: 20%;}
  a{
      text-decoration: none;
      list-style: none;
      color:var(--white)
  }
  a:hover{
      background-color: aqua;
      color: rgb(11, 11, 83);
  }
 p{
     
      text-align: justify;
      padding: 1%;
      color: white;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      line-height: 140%;
  }
  .pics{
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .p1{
      width: 45%;
      margin: 1% 5%;
      background-color:var(--white);
      justify-content: center;
      align-items: center;
      padding: 3%;
  }
  .p1 img{
    width: 100%;
  }
  .p2{
    width: 45%;
      margin: 1% 5%;
      background-color:var(--white);
      justify-content: center;
      align-items: center;
      padding: 3%;
}
.p2 img{
    width: 100%;
}
h1{
    color: var(--yellow);
    text-align: center;
}