style.css

* {
  margin:0;
  padding:0;
  box-sizing:border-box
 }

 html {
  font-size:62.5%;
 
 }


 :root {
  --darkcolor: #1F2937;
  --bluecolor: #3882F6;
  --graycolor:gray;
  --lightgray: #E5E7EB;
  --blackcolor: #000;
  --quotecolor: #1f2937;
}

body {
  font-size:1.6em;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }


.wrapper {
  display:flex;
  flex-direction: column;
  min-height:10rem;
}

.nav-2 {
  display:none
}

.nav-1 {
  min-height:6rem;
  background:var(--darkcolor);
  display:flex;
  justify-content:space-between;
  padding:2%;
  align-items:center;
}

.nav-1 .logo {
  color:#fff;
  font-size:3rem;
  font-weight:900;
}

.nav-1 ul {
  list-style-type:none;
  background:var(--blackcolor);
  width:100%;
  position:absolute;
  top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  left:-300rem;
  transition:all 1.5s steps(300);
  min-height:35rem;
  z-index:3;
}

.nav-1 li {
  display:block;
  width:100%;
  text-align: center;
  font-size:2.4rem;
  border-left:0.1rem solid var(--blackcolor);
  transition:all 0.3s linear
}

.nav-1 li a  {
  display:block;   
  text-decoration:none;
  color:#fff;
  width:100%;
  padding:1.6rem 1.8rem
}

.nav-1 li:last-child {
  margin-bottom:0;
}

.nav-1 ul li:hover {
  background:#111111;
  transition:all 0.125s linear
}

.active {
  background:var(--bluecolor)
}

 

.btn1 {
  background:#fff;
  height:3rem;
  width:3rem;
  position:absolute;
  right:1.2rem;
 
}

.btn2 {
  background:#fff;
 height:2.5rem;
 width:2.5rem;
 position:absolute;
 right:0rem;
}

img {
  width:100%; 
}

#check {
  display:none;
}


#check:checked~ul {
 left:0;
 transition: all .45s ease-out;
}


/*///////////////////// nav-ends-here /////////////////////*/



  /* nav-2-starts-here */
   
  .nav-2 .links-2 .active-2 {
    color:var(--bluecolor);
   
  }

  .nav-2 .links-2 li a:hover {
    color:var(--bluecolor);
    transition:all 0.3s linear
  }

  

  
  /* nav-2-ends-here */




.hero-div {
  min-height:30rem;
  width:100%;
  background:var(--darkcolor);
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-items: center;
}

.herodiv {
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;
  justify-items:center;
  align-items:center;
    color:#fff;
}

.herodiv:nth-child(1) {
  display:grid;
  width:80%;
  min-height:25rem;

}

.herodiv:nth-child(1) h1 {
  font-size:3.5rem;
}

.herodiv:nth-child(1) p {
  font-size:2rem;
  margin-bottom:2rem
}
 
 
.herodiv:nth-child(1) button {
  border-radius:1rem;
  padding:0.3rem 1.8rem;
  font-size:2.2rem;
  border-radius:1rem;
  background:var(--bluecolor);
  color:#fff;
  border:none;
  font-weight:700;
  overflow: hidden;
  z-index: 2;
  position:relative;
  transition:0.5s
}



.herodiv:nth-child(1) button:hover {
  transition:0.5s;
  color:var(--bluecolor);
}

.herodiv:nth-child(1) button::before {
  content:"";
  display:block;
  background:#fff;
  width:0%;
  position:absolute;
  z-index: -2;
  top:0;
  right:0;
  height:100%;
  transition:0.5s
}

.herodiv:nth-child(1) button:hover::before {
  right:0;
  width:100%;
  transition:0.5s  
}

.herodiv:nth-child(2) {
  min-height:30rem;
  width:100%;
  display:grid;
  grid-template-rows:1fr;
  justify-content:center;
  align-items:center;
} 

.herodiv:nth-child(2) div {
  background: gray;
  width:80%;
  height:25rem;
  display:grid;
  justify-content:center;
  align-items:center;
}

/* ////////////////////hero-ends-here///////////////// */


.boxcontent {
  min-height:50rem;
  background:#ffff;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows: 5rem 1fr;
  width:100%;
  justify-content: center;
  row-gap: 2rem;;
 
}

.boxcontent-text {
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:2.2rem;
  font-weight:700;
  width:100%;
  padding:3%;
  text-align: center;;
}

.boxcontainer {
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
}

.boxcontainer .box {
  min-height: 30rem;
  width:17rem;
  border-radius:1rem;
  margin-bottom:2rem;
}

.boxcontainer .box div:nth-child(1){
  
  min-width:5rem;;
  height:60%;
  border:0.5rem solid var(--bluecolor);
  border-radius:1rem;
  margin-bottom:0.6rem;
}

.boxcontainer .box div:nth-child(2) {
  text-align:center;
}

/*//////////////// boxcontent-ends-here////////////////// */


.quotesection {
  min-height:45rem;
  background:var(--lightgray);
  display:grid;
  grid-template-rows:1fr ;
  grid-template-columns:1fr;
  width:100%;
  align-items:center;  
  justify-content:center; 
}

.quotesection div {
  margin:0 auto;
  width: 90%;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 4rem;
  justify-content:center;
  align-items:center;
  min-height:10rem;
 
}

.quotesection div p:nth-child(1) {
 font-size:3rem;
 color:var(--quotecolor);
 margin-bottom:1rem;
}

.quotesection div p:nth-child(2) {
  font-size:2.5rem;
  display:flex;
  justify-content:end;
  margin-right:2rem;
  font-weight:800;
 }

 /*////////////// quotesection-ends-here//////////////// */


 .signupsection {
  min-height:40rem!important;
  background:#fff;
  width:100%;
  display:grid;
  justify-items:center;
  align-items:center;
 }

 .signupsection-div1  {
  min-height:30rem;
  width:90%;
  background: var(--bluecolor);
  display:grid;
  justify-items:center;
  align-items:center;
  border-radius:1rem;
 }

 
.signupsection-div2 {
  width:80%;
  min-height:25rem;
  display:grid;
  justify-items:center;
  align-items:center;
  grid-template-columns:1fr  ;
  grid-template-rows:1fr 4rem;
 
}


.signupsection {
  width:100%;
  min-height:35rem;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fff;

}

.signupsection-div1 {
  flex-basis:70%;
  min-height:20rem;
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--bluecolor);
  border-radius:1.2rem;
}

.signupsection-div2{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  align-items:center;
  min-height:15rem;
  width:70%;

  
}

.signupsection-div2 div {
  

  display:grid;
  align-items:center;
  justify-items:center;

}


.signupsection-div2 div:nth-child(1)  {
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  display:grid;
  align-items:center;
  justify-items:center;

}


.signupsection-div2 div p:nth-child(1){
  font-size:3rem;
  font-weight:900;
  margin-top:2rem;
  font-size: 2.5rem;
  font-weight:600;
  color:#fff;;
  width:100%;
  text-align:center;
  
}
 

.signupsection-div2 div p:nth-child(2) {
  font-size: 2.2rem;
  color:#fff;;
  text-align:center;
  width:100%;
   font-size: 1,8rem;
  color:#fff;;
  text-align:center;
  width:100%;
  margin-top:0.3rem!important
 
} 

.signupsection-div2 div:nth-child(2) button {
  padding:0.2rem 1.8rem;
  font-size:2.2rem;
  border-radius:1rem;
  background:var(--bluecolor);
  border:0.3rem solid #fff;
  color:#fff;
  font-weight:700;
  overflow: hidden;
  z-index: 2;
  position:relative;
  transition:0.5s;
  margin  : 0.8rem 0 2rem!important;
}

.signupsection-div2 div:nth-child(2) button:hover {
  transition:0.5s;
  color:var(--bluecolor)
}

.signupsection-div2 div:nth-child(2) button::before {
  content:"";
  display:block;
  background:#fff;
  width:0%;
  position:absolute;
  z-index: -2;
  top:0;
  left:0;
  height:100%
}

.signupsection-div2 div:nth-child(2) button:hover::before {
  right:0;
  width:100%;
  transition:0.5s  
}

/* /////////////////signupsection-ends-here/////////////// */



.footer{
  width:100%;
  min-height:13rem;
  background:var(--darkcolor);
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items:center;
  align-items:center;
  color:#fff;
  font-size:1.8rem
}

 /*/////////////////////////footer-ends-here/////////////// */