/*----------------------------------------
Made by:-Balaji online cafe
Date:-October 2024
Owner name:-Akhilesh kumar
Address:K236,World bank barra,karrahi,kanpur
-------------------------------------------*/
*{
    
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
/**********************header*********************/
header {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(0, 0, 0) ;
}
header .logo {
  width: 680px;
  height: 70px;
  padding: 0;
}
.logo-img{
    width: 100%;
    height: 100%;
  }
header nav ul {
    display: flex;
}
header nav ul li a {
    display: inline-block;
    color: rgb(255, 255, 255);
    padding: 5px 0;
    margin: 0 10px;
    border: 3px solid transparent;
    text-transform: uppercase;
    transition: 0.2s;
}
header nav ul li a:hover,
header nav ul li a.active {
    border-bottom-color: dodgerblue;
}
.hamburger {
    cursor: pointer;
    display: none;
}
.hamburger div {
    width: 30px;
    height: 3px;
    margin: 5px 0;
    background: #ffffff;
}
/************************home-section-coding***********************/
.home-section{
    width: 100%;
    height: 500px;
}
.bg-big-box{
    width: 620px;
    height: 500px;
    margin: 50px auto;
    text-align: center;
}
.bg-boxa{
    width: 100%;
    height: 80px;
    /*background-color: chartreuse;*/
    font-size: 3rem;
    color: white;
    color: rgb(8, 0, 255);
    font-size: 3rem;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 1px;
}
.bg-boxb{
    width: 100%;
    height: 100px;
    font-size: 4rem;
    -webkit-text-fill-color: rgb(252, 0, 0);
    color: rgb(255, 255, 255);
}
.bg-boxc{
    width: 100%;
    height: 100px;
    /*    background-color: rgb(34, 0, 255);*/
    font-size: 3.2rem;
    -webkit-text-fill-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 2px;
    color: rgb(255, 0, 0);
}
.bg-link-box{
    width: 100%;
    height: 100px;
}
.link-btn{
    width: 40%;
    height: 50px;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(85, 85, 85);
    cursor: pointer;
    border: transparent;
    border-radius: 30px;
}
.link-btn:hover{
  background-color: red;
}
/****************************services section*********************************/
.top-box{
    width: 100%;
    height: 90px;
    display: flex;
}
.top-a-box{
    width: 60%;
    background-color: rgb(254, 70, 3);
}
.top-a-box h1{
    padding-top: 10px;
    padding-left: 80px;
    font-size: 55px;
    letter-spacing: 5px;
    word-spacing: 15px;
    font-family: century gothic;
}
.top-b-box{
    width: 40%;
    background-image: url(images/img\ top.png);
}
.top-b-box h1{
    padding-top: 10px;
    padding-left: 100px;
    font-size: 55px;
    letter-spacing: 5px;
    color: white;
}

.services-big-box{
    width: 100%;
    height: 1050px;
    margin-top: 5%;
    display: flex;
}
.row-a{
    width: 48%;
    height: 1050px;
    margin-left: 2%;
}
.services-box{
    width: 80%;
    height: 300px;
    margin-left: 10%;
    margin-top: 20px;
}
.sb-top{
    width: 100%;
    height: 50px;
    background-color: black;
    color: rgb(255, 255, 255);
    padding: 10px;
    font-size: 25px;
}
.sb-down:hover{
  background-color: rgb(0, 140, 255);
  transition: 0.1s;
}
.sb-down{
    width: 100%;
    height: 250px;
    background-color: orangered;
    color: white;
    padding: 10px;
    font-size: 25px;
}
.row-b{
    width: 48%;
    height: 1050px;
    margin-left: 2%;
}
/***********************about---section*************************/
.about-section{
  width: 100%;
  height: 481px;
}
.main-page{
  width: 100%;
  height: 481px;
  display: flex;
}
.lhs{
  width: 60%;
  height: 481px;
}
.main-line{
  width: 80%;
  height: 80px;
  margin-left: 40px;
  margin-top: 100px;
  display: flex;
}
.a-p{
  font-size: 40px;
  color: orangered;
}
.b-p{
  margin-left: 10px;
  margin-top: 5px;
  font-size: 35px;
  color: rgb(0, 0, 0);
}
.main-para{
  width: 80%;
  height: 250px;
  margin-left: 40px;
}
.main-para p {
  font-size: 25px;
}
.rhs{
  width: 40%;
}
.img-box-w{
  width: 100%;
  height: 100%;
}
.rhs img{
  width: 100%;
  height:98%;
}


/****************************contact--section***************************/
.contact-bg{
  width: 100%;
  height: 481px;
  display: flex;
  justify-content: center;
}
.contact-lhs,.contact-rhs{
  width: 415px;
  height: 445px;
  margin-top: 15px;
  padding: 30px;

}
.contact-lhs{
  background-color: rgb(255, 255, 255);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow:0px 0px 20px 0px rgb(0, 0, 0);
  padding: 30px;
}
.main-line-ct{
  width: 100%;
  height: 30px;
}
.main-line-ct p{
  color: #1abc9c;
  font-size: 24px;
}
.sub-line-ct{
  width: 100%;
  margin-top: 15px;
  font-size: 18px;
}
.lmp-box{
  width: 100%;
  margin-top: 30px;
  display: flex;
}
.lmp-img{
  width: 30px;
  height: 30px;
}
.lmp-img img{
  width: 100%;
  height: 100%;
}
.lmp-box p{
  margin-left: 30px;
  color: #555555;
 font-size: 15px;
}
.second-sub-line{
  width: 100%;
  height: 30px;
  margin-top: 25px;
  font-size: 20px;
}
.social-bg{
  width: 100%;
  height: 50px;
  margin-top: 10px;
  background-color: black;
}
.social-icons {
  display: flex;
  margin-top: 0.5rem;
}

.social-icons a {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: linear-gradient(45deg, #1abc9c, #149279);
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-right: 0.5rem;
  transition: 0.3s;
}

.social-icons a:hover {
  transform: scale(1.05);
}

.contact-rhs{
  background-color: #1abc9c;
  border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.main-line-ct-b{
  width: 100%;
  height: 30px;
}
.main-line-ct-b p{
  color: #ffffff;
  font-size: 24px;
}
input{
  width: 97%;
  height: 40px;
  margin-top: 15px;
  border-radius: 40px;
  background-color: inherit;
  border: inherit;
  border: 2px white solid;
  color: white;
  font-size: 16px;
  padding-left: 15px;
  transition: 1s;
}
::placeholder{
  color: white;
  font-size: 16px;
}
textarea{
  width: 97%;
  height: 120px;
  margin-top: 20px;
  border-radius: 20px;
  border: 2px white solid;
  background-color: inherit;
  padding: 15px;
  font-size: 18px;
  color: white;
}
input,textarea:focus{
  border: 1px white solid;
  outline: 1px white solid;
}
.btn {
  margin-top: 30px;
  padding: 0.6rem 1.3rem;
  background-color: #fff;
  border: 2px solid #fafafa;
  font-size: 0.95rem;
  color: #1abc9c;
  line-height: 1;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  margin: 0;
}
.btn:hover {
  background-color: transparent;
  color: #fff;
}

/***************************************/
footer{
  width: 100%;
  height: 350px;
  padding: 30px;
  background-color: black;
  text-align: center;
}
.footer-boxes{
  display: flex;
}
.top-line-box{
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  padding-top: 15px;
}
.foot-a-p{
  font-size: 40px;
  color: orangered;
  
}
.foot-b-p{
  margin-left: 10px;
  font-size: 40px;
  color: rgb(255, 255, 255);
}
.footer-a{
  width: 20%;
  height: 150px;
}
.footer-a p{
  color: white;
}
.footer-b{
  width: 25%;
  height: 180px;
}
.footer-b-main-line{
  font-size: 22px;
  color: rgb(255, 251, 0);
  margin-bottom: 10px;
}
.foot-li{
  font-size: 18px;
  padding-top: 10px;
}
a{
  color: white;
}
.footer-c{
  width: 25%;
  height: 230px;
}
.footer-d{
  width: 30%;
  height: 130px;
}
.footer-icons{
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.sb-footer{
  width: 100%;
  height: 40px;
  display: flex;
  padding: 10px;
  justify-content: center;
  background-color: rgba(207, 218, 218, 0.333);
}
.sb-footer p{
  color: rgb(0, 0, 0);
  font-size: 18px;
}
/**********************************************************/