SS.css

*{
  margin:0; 
  padding:0; 
  box-sizing: border-box; /*This makes sure that the padding and eventually borders are included in the total width and height of the elements. */ 
  font-size: 16px; 

  --colorBtn: hsl(228, 45%, 44%);
 /* Font Values */
  --fontxxs:0.6; 
  --fontxs:0.8rem; 
  --font100:1rem; 
  --font110:1.1rem;
  --font200:2rem; 
  --font250:2.5rem;
  --font300:3rem; 
  --font350:3.5rem; 
  --font370:3.7rem;
  --font400:4rem;
  --font450:4.5rem;
  --font500:5rem; 

  /* Font Family */
  --ff: "Be Vietnam Pro", sans-serif;
  /* Font weight */ 
 --fs400:400; 
 --fs500:500; 
 --fs700:700; 
 
/* Colors */ 
--white:#fff;
--brightred: hsl(12, 88%, 59%); 
--darkblue: hsl(228, 39%, 23%);
--darkgrayblue : hsl(227, 12%, 61%);
--verydarkblue : #040720; 
--verypalered: hsl(13, 100%, 96%);
--verylightgray : hsl(0, 0%, 98%);


  /* Padding Values */
  --pad50:0.5rem; 
  --pad80:0.8rem; 
  --pad100:1rem; 
  --pad150:1.5rem; 
  --pad200:2rem; 
  --pad300:3rem; 
  --pad400:4rem;
  --pad450:4.5rem;
  --pad500:5rem; 

  font-family: var(--ff);

  /* SPACING */ 
  --spacing50:0.5rem; 
  --spacing75:0.75rem;
  --spacing100:1rem; 
  --spacing150:1.5rem; 
  --spacing200:2rem; 
  --spacing250:2.5rem; 
}
/*************************************************************************************************************************/
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.headerMain{
	--max-width:1110px; 
  --padwidth:1rem;    /*    // Padding for Navbar width is here !!!! */ 
  color:var(--verydarkblue);

 width: min( var(--max-width) , 100% - (var(--padwidth) * 2));
 margin-inline: auto;
}
.headerlogo{
  max-width: 6.5rem;
  cursor:pointer;
}
.headerNav{
	display: flex; 
	align-items: center; 
  font-size: 2rem;
  padding: var(--pad300) 0rem;     /* Padding for Navbar is here */
  justify-content: space-between;
}
.navUL{
  width:45%;
  max-width:60%;
  min-width: 40%;

	display: flex; 
	justify-content: space-around; 
	align-items: center; 
}
.Liclass{
	text-decoration: none;
  color: var(--verydarkblue)!important; 
	list-style: none;
	font-size: var(--fontxs); 
  cursor:pointer;
}
.Liclass:hover{

    text-decoration:; 
    opacity: 0.7;  
   }

.close{
  display: none;

}
.ham{
  display: none;
}
.div-ham-close{
display: none;
}

.btngetstarted{
  padding: 0.75rem 1.9rem; 
  cursor: pointer;
  border-radius: 1rem;
  border:0;
  font-size: var(--fontxs); 
  color:var(--white);
  background-color: var(--brightred);

  box-shadow: 0px 2px 5px var(--brightred);
}
.btngetstarted:hover{
  opacity: 0.75;
}

/**********************MEDIA QUERIES FOR NAVBAR */

@media (max-width:45rem){           /* Media query for mobile  */ 
  .navUL{
   display: none; 
  }
  .btngetstarted{
    display: none; 
  }
  .div-ham-close{
    display: block;
  }
  .close{ 
    z-index: 10;
    cursor:pointer;
  }
  .ham{
    display: inline-block;
    cursor:pointer;
  }
  .navDropDown{
    position: absolute;

    display: flex; flex-direction: column; justify-content: space-around; align-items: center;
     width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    inset: 5.5rem auto 26rem auto; 
    background-color: var(--white);
    border-radius: var(--pad50);
    z-index: 20;
   }
   .navDropDown li{
       padding: var(--pad50) 0rem;
       color: red;
       height: 100%;   
       font-size: 1rem; 
   }
   .Liclass:hover{
    text-decoration:; 
    opacity: 0.7;  
   }
}

/************************************************* Hero Section *************************************************/ 

.div1{
  margin-top: var(--pad400); /* Margin for the div1 */
  --max-width:1110px; 
  --padwidth:1rem;    /*    // Padding for Navbar width is here !!!! */ 

   background-color: transparent;
   width: min( var(--max-width) , 100% - (var(--padwidth) * 2));
   margin-inline: auto;

   display: grid;
   grid-template-columns: 1fr 1fr  ; 
   grid-template-rows: 1fr ; 
   position: relative;
}
.dd1{
     background-color: transparent;
     display: flex; justify-content: center; align-items: start; flex-direction: column; 
}
.dd1 h4{
     font-size: var(--font370);
}
.dd1 p{
     font-size: var(--font110) ;
     padding-right: 35%;
     margin-top:1.5rem; 
     word-spacing: 0.26rem;
     letter-spacing: 0.05rem;
     opacity: 0.8;
}
.dd1 button{
  margin-top: 1.5rem;

  padding: 0.75rem 1.9rem; 
  cursor: pointer;
  border-radius: 1rem;
  border:0;
  font-size: var(--fontxs); 
  color:var(--white);
  background-color: var(--brightred);

  box-shadow: 0px 2px 5px var(--brightred);
}
.dd1 button:hover{
  opacity: 0.75;
}
.dd2{
  background-color: transparent; 
  display: flex; justify-content: center; align-items: center;
  overflow:hidden; 

}
.dd2 img{
  width: 100%; 
}
/*******************DIV 1 MEDIA QUERIES */

@media (max-width:45rem){
    .div1{
      grid-template-columns: 1fr;
      grid-template-rows: 0.9fr 1fr;
    }
    .dd2{
      grid-row: 1;
    }
    .dd1{
       background-color: transparent;
       display: flex;  justify-content: center; align-items: center; flex-direction: column; 
  }
    .dd1 h4{
       font-size: var(--font300);
       margin-top: 3rem; 
       padding: 0rem 3rem 0rem 3rem; 
       text-align: center;
  }
  .dd1 p{
      font-size: var(--font110) ;
      padding: 0rem 0.7rem;
      padding: 0rem 3rem 0rem 3rem; 
      margin-top: 3rem; 
      text-align: center;

  }
}
/* ********************************************MEDIA QUERIES FOR MOBILE ******************/
@media (max-width:26.5rem){
    .div1{
      margin-top: var(--pad200);
    }
    .dd2{
      grid-row: 1;
    }
    .dd1{
       background-color: transparent;
       display: flex; justify-content: space-around; align-items: center; flex-direction: column; 
  }
      .dd1 h4{
       font-size: var(--font250);
       margin-top: 1rem; 
       padding: 0rem 0rem 0rem 0rem; 
       text-align: center;
  }
  .dd1 p{
      font-size: var(--font100) ;
      padding: 0rem 0.7rem;
      padding: 0rem 0rem 0rem 0rem; 
      margin-top: 2rem; 
      text-align: center;

  }
  .dd1 button{
  margin-top: 2rem;

  padding: 0.75rem 1.9rem;
 }
}





/************************************************DIV 2 STARTS HERE ****************************************************/
.div2{
   margin-top: var(--pad500); /* Margin for div2 */
  --max-width:1110px; 
  --padwidth:1rem;    /*    // Padding for Navbar width is here !!!! */ 

   background-color: white;
   width: min( var(--max-width) , 100% - (var(--padwidth) * 2));
   margin-inline: auto;

   display: grid;
   grid-template-columns: 1fr 1fr  ; 
   grid-template-rows: 1fr ; 
}
.dd21{
  display: flex; flex-direction: column; justify-content: start; align-items: start; 
}
.dd21 h4{
  font-size: var(--font250);
  padding: 3rem 0rem 0rem 0rem
}
.dd21 p{
  margin-top: 1.5rem;
  font-size: var(--font100) ;
  padding-right: 20%;
  word-spacing: 0.26rem;
  letter-spacing: 0.03rem;
}
.dd22{
  display: flex; flex-direction: column; 
}
.ic-num{
  height: 100%; width: 15%; 
  background-color: white;
  display: flex; justify-content: center; align-items:start;flex-direction: row;
}
.ic-num p{
     font-size: var(--font100) ;
     margin-top:3rem; 
     width:70% ;
     box-shadow: 0px 1px 3px var(--brightred);
     word-spacing: 0.26rem;
     letter-spacing: 0.02rem;
     border-radius: 1rem;
     text-align: center;
     background-color: var(--brightred);
     color: var(--white);
}
.ic-info{
  height: 100%; 
  width: 85%; 
  padding: 3rem 1rem 3rem 0rem; 
}
.ic-info h4{
  font-size: var(--font100);
}
.ic-info p{
    font-size: var(--font100); 
     margin-top:1.5rem;    
     word-spacing: 0.26rem;
     letter-spacing: 0.02rem;
     opacity: 0.8;
}

.infocard1{
 display: flex; justify-content: left; align-items: center; flex-direction: row; 
}
.infocard2{
   display: flex; justify-content: left; align-items: center; flex-direction: row; 
}
.infocard3{
 display: flex; justify-content: left; align-items: center; flex-direction: row; 

}

/********************DIV 2 MEDIA QUERIES */

@media (max-width:45rem){
  .div2{
    grid-template-columns: 1fr;
    grid-template-rows: .33fr 1fr;
  }
  .dd21{
    grid-row: 1; 
  }
}

/* ********************************************MEDIA QUERIES FOR MOBILE ******************/
@media (max-width:26.5rem){
.dd21{
  display: flex; flex-direction: column; justify-content: start; align-items: center; 
}
.dd21 h4{
  font-size: var(--font200);
  padding: 3rem 0rem 0rem 0rem; 
  text-align: center;
}
.dd21 p{
  margin-top: 1.5rem;
  font-size: var(--font100) ;
  padding:0rem 0.7rem; 
  text-align: center;
  word-spacing: 0.26rem;
  letter-spacing: 0.03rem;
}


}

/**************************************************BANNER STARTS HERE*************************************************/
.banner{
  margin-top: var(--pad500); /* Margin for banner */
  width: 100%; 
  padding: 4rem 0rem; 
 background-color: var(--brightred);
   display: flex; justify-content: center; align-items: center; 

}
.banner-div{
  --max-width:1110px; 
  --padwidth:1rem;
  width: min( var(--max-width) , 100% - (var(--padwidth) * 2));
  display: flex; justify-content: space-between; align-items: center; flex-direction: row; 

} 
.banner h4{
 font-size: var(--font250);
 width: 50%;
 color: var(--white);
}
.banner button{
  padding: 0.75rem 1.9rem; 
  cursor: pointer;
  border-radius: 1rem;
  border:0;
  font-size: var(--fontxs); 
  color:var(--brightred);
  background-color: var(--white);

  box-shadow: 0px 2px 5px var(--white);
}
.banner button:hover{
  opacity: 0.8;
}

/* ********************************************MEDIA QUERIES FOR MOBILE ******************/
@media (max-width:26.5rem){
  .banner-div{
  display: flex; justify-content: center; align-items: center; flex-direction: column; 

} 
.banner h4{
  margin-top: 3rem;
 font-size: var(--font200);
 width: 70%;
 color: var(--white);
 text-align: center;
}
.banner button{
  margin-top: 3rem; 
  margin-bottom: 1.5rem;
  padding: 0.75rem 1.9rem; 
  cursor: pointer;
  border-radius: 1rem;
  border:0;
  font-size: var(--fontxs); 
  color:var(--brightred);
  background-color: var(--white);

  box-shadow: 0px 2px 5px var(--white);
}
}










/**************************************************FOOTER STARTS HERE*************************************************/
.footer{
  width: 100%; 
  padding: 4rem 0rem; 
  background-color: black; 
  display: flex; justify-content: center; align-items: center;

}
.footer-div{
  --max-width:1110px; 
  color: var(--white);
  --padwidth:1rem;
  width: min( var(--max-width) , 100% - (var(--padwidth) * 2));

  display: grid; 
  grid-template-rows: 1fr 1fr; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-areas: 
   'logo links1 links2 subscribe'
   'socials links1 links2 copyright';
  gap: 6rem 2rem;
}

.logo{
 grid-area: logo;

}
.socials{
grid-area: socials;
display: flex; flex-direction: row; justify-content: space-around; align-items: center;
}
.socials img{
  width: 1.2rem; 
}
.links1{
 grid-area: links1;
 display: flex; flex-direction: column;
  justify-content: space-around; align-items: center;

}

.links2{
grid-area: links2;
 display: flex; flex-direction: column; justify-content: space-around; align-items: center;

}
.links2 p , .links1 p{
  font-size: var(--font100); 
  opacity: 0.9;
}
.subscribe{
grid-area: subscribe;
display: flex; flex-direction: row; 
}
.subscribe button{
  width: 20%;
  padding: 0.6rem 1.1rem; 
  cursor: pointer;
  border-radius: 0rem 0.5rem 0.5rem 0rem;
  border:0;
  font-size: var(--fontxs); 
  color:var(--white);
  background-color: var(--brightred);
}
.subscribe input{
  border:none;
  box-sizing: border-box;
  padding: 0.5rem 0rem 0.5rem 0rem; 
  border-radius: 0.5rem 0rem 0rem 0.5rem;

}
.subscribe button:hover{
  opacity: 0.8; 
}
.copyright{
grid-area: copyright;
opacity: 0.75;
font-size: var(--fontxs); 
}

@media (max-width:45rem){
 
   .footer-div{
    display: grid; 
    grid-template-rows: 1fr 1fr 1f 1fr 1fr; 
    grid-template-columns: 1fr 1fr ;
    grid-template-areas: 
     'subscribe subscribe'
     'links1 links2'
     'socials socials'
     'logo logo'
     'copyright copyright';
    gap: 3rem 2rem;
   }
   .subscribe{
      display: flex; justify-content: center; flex-direction: row; align-items: center ;
   }
   .subscribe input{
      width: 50%; 
   }
   .subscribe button{
      width: 20%; 
   }
   .links1{
     opacity: 0.9;
   }
   .links2{
     opacity: 0.9;
   }
   .logo{
      display: flex; justify-content: center;
   }
   .copyright{
      text-align: center;

   }
   .socials{
      display: flex; flex-direction: row; justify-content: space-around; align-items: center; 
      width: 100%; 
      padding: ;
   }
   .socials img{
    width: 1.8rem;  
   }
}



/*************************************************************MOBILE MEDIA QUERIES *********************/
@media (max-width:26.5rem){
  .subscribe input{
      width: 70%; 
      height: 2.2rem; 
   }
  .subscribe button{
     border:none;
     box-sizing: border-box;
  

  }
}