.container{
  max-width: 1024px;
  margin:0 auto;
  margin-bottom: 50px;
}


body{
  font-family: 'Public Sans',sans-serif;
  font-weight: 400;
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  background-color: hsl(217, 28%, 15%) ;
  color: #ffffff;
  font-size: 14px;
  /* outline: 2px solid lime;  */
}

h1,h2,h3,h4,h5,h6,a:not(.active){
  font-family: 'Raleway',sans-serif;
  font-weight: 700;
}

.pos-ab{
  position: absolute;
  z-index: -1;
}
a:not(.active){
  text-decoration: none;
  color: #ffffff;
}

a:hover:not(.active){
  text-decoration: underline;
  text-underline-offset: 5px;
}
.flex-row{
  display: flex;
  flex-direction: row;

}

.jc-b{
  justify-content: space-between;
}
.flex-column{
  display: flex;
  flex-direction:column;
}
.mobile{
  display: none;
}

.desktop{
  display:block;
}
button{
  padding:10px  50px;
  border-radius: 30px;
  border-style: none;
  background: linear-gradient(to right,hsl(176, 68%, 64%),hsl(198, 60%, 50%));
  font-weight: 600;
  color: #f1f1f1;
}
.center{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}.center-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
input:placeholder-shown{
  padding:15px 5px;
  width: 140%;
  border-radius: 40px;
  text-align: left !important;

}
.input{
  width: fit-content;
  padding:20px 40px;
  box-shadow: 2px 3px 5px black;
  transform: translate(0px,110px);
  z-index: 1;
  background:  hsl(217, 28%, 15%)
}

i{
  border: 1px solid gray;
  border-radius: 50%;
}
i:hover{
  color: aqua;
  border-color: aqua;
}

.logo-f{
  width: 150px;
  margin-bottom: 20px;
}

/* textEdit */

.underline{
  /* text-decoration: underline;
  text-underline-offset: 5px;
  display: inline-block; */


  display: inline-block; /*for content to get underline only */
  border-bottom: 1.5px solid rgb(73, 230, 238) ;
  padding-bottom:7px ;
  /* box-shadow: 0px 1px 3px #ffffff; */
  
}
.td-none{
  text-decoration: none;
}

.textCenter{
  text-align: center;
}
.w-500{
  font-size:30px ;
}
.fs-5{
  font-size:10Px ;
}
.fs-6{
  margin-top: -6px;
  font-size: 8px;
}
.align{
  margin-left:-90px;
  margin-top: -20px;
}

/* images */

.cury-d{
  transform: translate(0%,-150px);
  width:100%
}
.img2{
  width: 90%;
  z-index: -3;
}

.author{
  border-radius: 50%;
  width:20%;
}
.quote{
  transform: translate(-10px,-220px);
  
}

/* color */
.lightBlue{
  color: aqua;
}
.textNavy{
  color:  hsl(217, 13%, 43%) !important; 
}
.navyBlue{
  /* background-color: hsl(218, 30%, 11%); */
  background-color: hsl(218, 28%, 13%);
}


/* sizes */

.p-5{
  padding: 10px;
}
.m-20{
  margin: 20px;
}
.mt-50{
  margin-top:30px;
}
.mt{
  margin-top:18%;
}
.mb-50{
  margin-bottom: 50px;
}
.h-50{
  height: 80px;
  padding: 10%;
  margin-top: 5%;
  z-index: -1;
  
}

/* girds */

.grid1{
  display: grid;
  grid-template-areas: "computer security"
                        "clock file";
  }
    .computer{
    grid-area: computer ;}
    .security{
    grid-area: security }
    .clock{
    grid-area: clock ;}
    .file{
    grid-area: file ;}


.grid2{
  display:grid;
  column-gap: 2px;
  grid-template-areas:" img   side";
}
    .img{
    
      grid-area: img;    }
    .side{
      ma
      grid-area: side;    }

.grid3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap :10px;


}
  .card1{
    grid-area: 1/1/2/2;
    background-color: rgb(31, 46, 78);
    padding:20px;
    font-size: 13px;
    box-shadow: 0px 3px 6px rgb(52, 60, 95);
    z-index: 1;}

  .card2{
    grid-area: 1/2/2/3;
    background-color: rgb(31, 46, 78);
    padding:20px;
    font-size: 13px;
    box-shadow: 0px 3px 6px rgb(52, 60, 95);}
  .card3{
    grid-area: 1/3/2/4;
    background-color: rgb(31, 46, 78);
    padding:20px;
    font-size: 13px;
    box-shadow: 0px 3px 6px rgb(52, 60, 95);}


.gap{
  gap: 8%; 
}

.logo{
  display: block !important;
  width: 20%;
}
.icon{
  height: fit-content ;
  padding-top: 20px;
}
.flex-footer{
  display: flex;
  flex-direction: row;

}
/* media */
@media    (max-width:650px) {
  .container{
    max-width: 550px;
    margin: 0 auto;
    padding: 0%;
    margin-bottom:50px ;
  }
/* textEdit */
/* sizes   */
.m-20{
  margin: 10px;
  }
.p-5{
  padding:5px;
}
/* images */
.quote{
  transform: translate(0px,-610px);
  
}

.logo{
  width: 30%;
  /* height: 10px; */
}
.mobile{
  display: block;
}
.desktop{
  display: none;
}

/* grids */
.grid1{
  display: grid;
  grid-template-areas: "computer "
                        "security"
                        "clock "
                        "file";
  }
    .computer{
    grid-area: computer ;}
    .security{
    grid-area: security }
    .clock{
    grid-area: clock ;}
    .file{
    grid-area: file ;}


.grid2{
  display:grid;
  column-gap: 2px;
  grid-template-areas:" img "  
                      "side";
}
    .img{
    
      grid-area: img;    }
    .side{
      ma
      grid-area: side;    }

.grid3{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap :30px;
  padding: 0px 20px;
  margin: 0 80px;

}
  .card1{
    grid-area: 1/1/2/2;
    background-color: rgb(31, 46, 78);
    padding:20px;
    font-size: 13px;
    box-shadow: 0px 3px 6px rgb(52, 60, 95);
    z-index: 1;}
  .card2{
    grid-area: 2/1/3/2;
    background-color: rgb(31, 46, 78);
    padding:20px;
    font-size: 13px;
    box-shadow: 0px 3px 6px rgb(52, 60, 95);}
  .card3{
    grid-area: 3/1/4/2;
    background-color: rgb(31, 46, 78);
    padding:20px;
    font-size: 13px;
    box-shadow: 0px 3px 6px rgb(52, 60, 95);}

.flex-footer{
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
  align-items: flex-start;
}
.input{
  width: fit-content;
  padding:20px 40px;
  box-shadow: 2px 3px 5px black;
  transform: translate(0px,10px);
  z-index: 1;
  background:  hsl(217, 28%, 15%);
  margin: 50px;
}
.gap-m{
  gap: 30%;
}
.ml-50{
  margin-left: 50%;
}
footer{
  height:250px;
}
}