body{
    margin: 0;
    padding: 0;
}
/*
     first body is here
 */
#first-body
{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    grid-row: 50% 50%;
}
#left{
    margin-top: 159px;
    margin-right: 20px;
    margin-left: 150px;
    width: 687px;
}
#left h3{
    font-size: 35px;
    color: red;
}
#left h1{
    font-size: 45px;
}
#right{
    float: right;
    margin: 50px;
    
}
#right img{
    height: 80vh;
    width: 450px;
}
#contact-us{
    background-color: red;
    color: white;
    height: 40px;
    width: 160px;
    font-size: 17px;
    border: white solid 2px;
    border-radius: 10px;
    cursor: pointer;
}
/* 
    Contact Us bar
*/
#contact{
    position: fixed;
    top: 0;
    background: rgba(245, 245, 220, 0.902);
    width: 100%;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;

}
#contact-box{
    width: 500px;
    height: 400px;
    background-color: #ffffff;
    position: absolute;
    top: 180px;
    left: 500px;
}
#contact-box h2{
    font-size: 2.5rem;
    position: relative;
    left: 20px;
}

#contact-box img{
    height: 25px;
    position: relative;
    left: 430px;
    bottom: 70px;
    cursor: pointer;
}
#email{
    font-size: 1.2rem;
    width: 400px;
    border-bottom: black solid 2px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    padding: 5px;
}
#Firstname{
    margin-left: 27px;
    width: 190px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    padding: 5px;
    font-size: 1.2rem;
}

#Lastname{
    width: 190px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    padding: 5px;
    font-size: 1.2rem;
    margin-left: 5px;
    margin-top: 20px;
}
#checkbox{
    position: relative;
    right: 420px;
    top: 50px;
    border: pink solid 2px;
}
#checkbox input:checked ~ .checkmark{
    background-color: rgb(191, 99, 114);
}
#contact-box p{
    margin: 20px 50px;
    font-size: 1.2rem;

}
#contact-button{
    width: 450px;
    height: 50px;
    background-color: rgb(208, 52, 104);
    color: white;
    font-size: 1.5rem;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    left: 25px;
}
/* 
    Second Body is here
*/
#second-body{
    position: relative;
    margin: 50px;
}
#second-inner{
    display: flex;
    margin: 48px;
}
#what-we-do{
    margin-left: 85px;
}
#what-we-do p{
    font-size: 30px;
    color: red;
}
#what-we-do h1{
    font-size: 40px;
    width: 450px;
    
}
#para{
    margin-top: 101px;
    padding-left: 181px;
    font-size: 22px;
}
#imagess{
    display: flex;
    height: 550px;
    width: 1142px;
    margin: 100px;
    margin-left: 170px;
    /* overflow-x: scroll; */
    
}
.slide{
    position: relative;
    opacity: 1;
    margin-left: 10px;
    width: 370px;
    height: 500px;
    border-radius: 8px;
    /* object-fit: contain; */
}
.image-container {
    position: relative;
    display: inline-block; /* Ensures block elements stack horizontally */
  }
  .inner-datass{
    position: absolute;
    top: 50%;
    left: 49%;
    display: flex;
    background-color: rgb(195, 47, 72);
    margin-left: 10px;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 500px;    
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease; 
  }
  .inner-data:hover{
    opacity: 1;
}
#innerimage{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 120px;
}
.inner-data{
    position: absolute;
    top: 46%;
    left: 49%;
    display: flex;
    background-color: rgb(195, 47, 72);
    margin-left: 10px;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 550px;    
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease; 
    /* background-color: aqua; */
}
.inner-data:hover{
    opacity: 1;
}
#innerimage{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 120px;
}
.inner-data p{
    position: absolute;
    top: 250px;
    margin: 30px;
    color: white;
}
.inner-data a{
    position: absolute;
    top: 420px;
    /* left: 30px; */
    width: 200px;
    height: 40px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 2px solid white;
    color: rgb(241, 17, 17);
    background-color: rgb(255, 255, 255);
    cursor: pointer;
}
#inimg{
    position: absolute;
    top: 438px;
    right: 105px;
    width: 40px;
}
/* 
    Third body
*/
#third-body{
    text-align: center;
}
#third-body spam{
    color: red;
    font-size: 35px;
}
#third-body h1{
    font-size: 50px;
}
#card{
    display: flex;
    justify-content: center;
}
#a{
    margin-top: 5px;
}
.a{
    width: 250px;
    margin-left: 25px;
    text-align: left;

}
.a h3{
    font-size: 22px;
}
.a p{
    font-size: 20px ;
    
}
#fourth-body{
   
}
#our-project{
    display: grid;
    justify-content: center;
    margin: 50px;
}
#our-project p{
    text-align: center;
    font-size: 2rem;
    color: red;
    margin: 0;
}
#our-project h1{
    font-size: 2.5rem;
}
#frouth-body-imgwithdata{
    display: flex;
    width: fit-content;
}
#frouth-body-imgwithdata img{
    margin: 50px;
    margin-right: 25px;
    border-radius:15px;
}
#had{
    margin: 50px;
    margin-left: 25px;
    border-radius: 15px;
}
.had{
    width: 400px;
    height:150px;
    background-color: rgb(241, 241, 241);
    padding: 37px 50px 0px 50px;
    /* margin: 50px; */
}
#had :hover{
    background-color: red;
    color: white;
}
.had h2{
    font-size: 1.5rem;
    margin: 0;
    text-align: center;
}
.had p{
    font-size: 1.5rem;
    margin: 0;
}
/* 
    Fifth body part start
*/
#fifth-body{
    height: 500px;
    background-color: rgba(214, 210, 210, 0.45);
}
#fifth-body-heading{
    padding: 25px;
    text-align: center;
}
#fifth-body-heading p{
    margin-top: 20px;
    font-size: 2rem;
    color: red;
}
#fifth-body-heading h1{
    font-size: 3rem;
}
#hadofcards{
   display: flex;
   justify-content: center;
   flex-wrap: wraps;
}
#hadofcards :hover{
    box-shadow: 9px 13px 40px 3px rgba(0, 0, 0, 0.2);
    transition: 0.2s;
}
.cards{
    text-align: center;
    width: 200px;
    height: 160px;
    margin: 20px;
    padding-top: 30px;
    background-color: white;
}

.cards p{
    font-size: 1.2rem;
    font: bold;
}
/* 
    sixth body
*/
#sixth-body{
    text-align: center;
}
#client{
    font-size: 2rem;
    color: red;
}
#sixth-body h1{
    font-size: 2rem;
}
#jannat{
    text-align: left ;
    font-size: 1.5rem;
    margin: 0 400px 30px 400px;
    background: url(img/Home/Quotemarks-left.svg);
    background-repeat: no-repeat;
}

#sixth-body span{
    font-size: 1.5rem;
}
.spann{
    margin: 0 400px 30px 400px;
    text-align: left;
}
#tumpa{
    color: red;
}
/* 
    seventh body
*/
#seventh-body {
    width: 100%;
    background-color: rgba(255, 68, 68, 0.929);
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}