/* +++++++++++++++++++++++ media query for phone +++++++++++++++++++++++++++++++++++ */


@media screen and (min-width:0px) and (max-width:500px){

/* page 0 */

.grid{
    
    height: 100%;
}

.navbar .logo{
position: relative;
bottom: 40PX;
left: 00px;
}


.navbar .btnn{
position: relative;
top: 400px;
right: 0px;
width: 200px;

}

.navbar .links{
    width: 100%;
    position: relative;
    top: 30px;
    height: 50px;
    padding: 0px 0px 60px 0px;
}

.navbar .links{
   
    padding: 0px 0px 0px 30px;
}

.navbar .links .b{
    display: none;
}


.centercontent h1{
    position: relative;
    bottom: 200px;
    padding: 5px;
}

.centercontent p{
    position: relative;
    bottom: 200px;
    padding: 5px;
}



/* ++++++++++++++  page one  ++++++++++++++++ */

.formmain {
    display: flex;
    gap: 50px;
    width: 100%;
    position: relative;
    bottom: -100px;
}

.formmain  .redbg{
width: 100%;
}

.formmain .topimg-a img {
    position: relative;
    bottom: 200px;
}

.formmain .redbg .topimgg{
    opacity: 0;
}

.formmain .redbg .bottomimg{
    opacity: 0;
}




.formmain  .redbg input{
    width: 100%;
    }

.formbottem{
    flex-wrap: wrap;
   margin-top: 1300px;

}

.formbottem .imgone img{
    padding: 0px 0px 0px 55px;
}

.formbottem .imgtwo img{
    padding: 0px 0px 0px 70px;
}

.formbottem .imgthree img{
    padding: 0px 0px 0px 40px;
}

.formbottem .imgfour img{
    padding: 0px 0px 0px 80px;
}
/* ++++++++++++ pagetwo ++++++++++++++ */

.pagetwo{
   margin-top: 3100px;
}

.pagetwo .bottomimg img{
    display: none;
}

.pagetwo .ifram {
 padding: 0;
}

.ifram iframe{
   width: 300px;
  position: relative;
  top: 300px;
  left: 40px;
}
/* ++++++++++++ page three ++++++++++++++ */
.pagethree{
    margin: top;
}


/* ++++++++++++ pagefour ++++++++++++++ */
.pagefour{
    margin-top: 3200px;
    height: 800px;
    background-color: #ff4444;
    width: 80%;
 }
 services-container{
    
  
 }

 services-container2{
  
 }

 .service-box2{
    background-color: #ff4444; 
 }

.contct{
   margin-top: 00px;
   height: 100vh;
}

.afterhr{
    margin-top: 43px;
}
.contct{
    
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    }


}

/* ++++++++++++++++++++++   media query for phone end     ++++++++++++++++++++++++ */


/* +++++++++++++++++++++++ media query for tab +++++++++++++++++++++++++++++++++++ */

@media screen and (min-width:500px) and (max-width:900px){
    .navbar button{
        position: relative;
        top: 450px;
    }
.formbottem{
    margin-top:1200px;
}
    .pagetwo{
        margin-top: 00px;
    }

    .pagefour{
        margin-top: 600px;
    }

    .formmain{
        
    }
}

/* ++++++++++++++++++++++   media query for tab end     ++++++++++++++++++++++++ */

.grid{
    width: 90%;
    margin: auto;
}



*{
    padding: 0;
    margin: 0;
    text-decoration:none;
    scroll-behavior: smooth;
}

.bgmainbg{
    background-image: url(../img/main\ bg\ img.png);
    height:715px;
    width: 100% ; 
    /* background: #ff4444; */
    border-radius: 20px;
    position: relative;
    top: 5px;
}   


/*------------ top nav bar area------------- */

.navbar{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-evenly;
    position: relative;
    top: 50px;
}

.navbar button a{
    color: #000000;
}


/* links */

 .a{    
    color: white;
    padding: 0px 12px;
}

.b{
    color: rgb(255, 255, 255);
    padding: 0px 12px;
}


.c{
    color: white;
    padding: 0px 12px;
}

.d{
    color: white;
    padding: 0px 12px;
}

.e{
    color: white;
    padding: 0px 12px;
}


.links{
    
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    list-style: none;
    font-family: "Ubuntu", sans-serif;
    font-weight: 900;
    font-size: 15px;
    position: relative;
    top: 0px;
    left: 0px;

}

.a li a{
    
    color: rgb(255, 255, 255);
}

.b li a{
    
    color: rgb(255, 255, 255);
}

.c li a{
    
    color: rgb(255, 255, 255);
}

.d li a{
    
    color: rgb(255, 255, 255);
}

.e li a{
    color: rgb(255, 255, 255);
}


      /*    button s  */
 

 .btnn{
   width: 200px;
    transition: all .5s ease;
    font-weight: 700;
    color: #000000;
    border: 3px solid white;
    background-color: white;
    text-align: center;
    line-height: 1;
    font-size: 14px;
    padding: 10px 17px;
    outline: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.9;
    font-family: "Open Sans", sans-serif;
}

.btnn:hover {
    color: #fbfbfb;
    opacity: 1;
    background-color:transparent;
}



    

/* center section area */ 


.centercontent {
    width: 100%;
    text-align: center;
    margin-top: 250px  
}

.centercontent h1{
    width: 100%;
    color: white;
    font-family: "Ubuntu", sans-serif;
    font-size: 50px;
    padding: 0px 0px 50px 0px;
    

}

.centercontent p{

    font-size: 17px;
    font-family: "Open Sans", sans-serif;
    
    color: white;
    font-size: 15px;
   
}


/* form section */

.formmain{
    padding: 50px 0px 0px 0px ;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
}


.formmain .redbg{
    
    background-color: #ff4444;
    height: 500px;
    width: 100%; 
    max-width: 400px;  
    padding: 60px 45px; 
    border-radius: 15px;
}

.formmain .redbg .topimgg {
    position: relative;
    left: -30px;
    width: 100%;
    opacity: 0;
}

.formmain .redbg .bottomimg{
    width: 100%;
    opacity: 0;
}

.formmain .redbg input{
    width: 100%;
    border-radius: 7px;
}

.formmain .redbg button{
    width: 100%;
    border-radius: 7px;
}

/* inside  form top bottom div */

.formmain .redbg .img{
position: relative;
top: -55px;
right: 44px;
width: 122% ;

}



.formmain {

   width: 100%;
   position: relative;
   top: 300px;
   height: 700px;
}

.formmain .redbg h1{
    color: white;
    font-family: "Ubuntu", sans-serif;
    font-size: 30px;
    position: relative;
    bottom: 50px;
}

.redbg p{
    font-family: "Ubuntu", sans-serif;
    color: white;
    position: relative;
    bottom: 30px;
    font-weight: 500;
}

/* input type  area*/

input {
    border: 2px;
    border-color: white;
    padding: 0px 0px 0px 15px;
    
}

.redbg .inputone{

    height: 48px;
    width: 380px;
    font-size: 13px;
    margin: 30px 0px 30px 0px;
    
}


.redbg .inputtwo{
    height: 48px;
    width: 383px;
    font-size: 13px;
    margin-bottom: 30px;
}

.redbg .inputthree{
    height: 48px;
    width: 385px;
    font-size: 13px;
    margin-bottom: 30px;
}

.redbg .btn{
    height: 48px;
    font-size: 13px;
}



/*    formbottem    */


.formbottem{
    display: flex;
    gap: 50px;
    position: relative;
    top:343px;
    padding: 30px 0px 30px 0px;
}

.imgone img{
    margin: 0px 0px 20px 80px ;
}

.imgtwo img{
    margin: 0px 0px 20px 60px ;
}


.imgthree img{
   
    margin: 0px 0px 20px 90px ;
}

.imgfour img{
   
    margin: 0px 0px 15px 70px ;
}

.imgone p{
    color: #999;
    font-size: 13px;
    font-family: "Ubuntu", sans-serif;
    text-align:center;
    padding: 10px 5px 5px 5px;
   
}

.imgtwo p{
    color: #999;
    font-family: "Ubuntu", sans-serif;
    text-align:center;
    padding: 10px 5px 5px 5px;
    font-size: 13px;        
}


.imgthree p{
    color: #999;
    font-family: "Ubuntu", sans-serif;
    text-align:center;
    font-size: 13px;
    padding: 10px 5px 5px 5px;
    
}

.imgfour p{
    color: #999;
    font-size: 13px;
    font-family: "Ubuntu", sans-serif;
    text-align:center;
    padding: 10px 5px 5px 5px;
    
}

.imgone h1{
    color: #222;
    font-size: 1.2rem;
    font-weight: 550;
    font-family: "Ubuntu", sans-serif;
    text-align:center;
  
}

.imgtwo h1{
    font-size: 1.2rem;
    font-weight: 550;
    font-family: "Ubuntu", sans-serif;
    text-align:center;
  
}


.imgthree h1{
    font-size: 1.2rem;
    font-weight: 550;
    font-family: "Ubuntu", sans-serif;
    text-align:center;
}

.imgfour h1{
    font-size: 1.2rem;
    font-weight: 550;
    font-family: "Ubuntu", sans-serif;
    text-align:center;
}


/* ---------------------page two--------------------------- */

.pagetwo{
    background-color: #648cff;
    position: relative;
    top: 390px;
    height: 800px;
    width: 100%;
    border-radius: 15px;
}

.pagetwo .contents{
    width: 100%;
}

.topimg {
    top: 1px;
    width: 100%;
    position: relative;
    left: 1px;
}

.topimg img{
    position: relative;
}

.pagetwo .bottomimg img{
    position: relative;
    bottom: 650px;
    width: 100%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}


.ifram{
    width: 100% ;
    position: relative;
    bottom: 22rem;
    padding: 0px 0px  100px 650px;
    width:fit-content;
    z-index: 2;
}

.contents{
    color: white;
    font-family: "Ubuntu", sans-serif;
    position: relative;
    top: 30px;
    /* left: 100px; */
    height: 300px;
    width:100%;
    padding: 0px 0px 0px 0px;
}

.contents h1{
    width:fit-content;
    font-size: 40px;
    font-family: "Ubuntu", sans-serif;
    margin-bottom: 25px;
    padding: 0px 20px 0px 20px;
}

.contents p{
    font-size: 18px;
    padding: 0px 20px 0px 20px;
    width:fit-content;
}

.contentsone{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: 0rem;
    color: white;
    font-family: "Ubuntu", sans-serif;
}

.contentsone .one{ 
    padding: 0px 0px 10px 20px;
    z-index: 2;
}

.contentsone .two{
    padding: 0px 0px 0px 20px;
    z-index: 2;
}

.contentsone .one h1{
  font-size: 2.5rem;
  padding-bottom: 1rem;
  
}

.contentsone .two h1{
    font-size: 2.5rem;
    padding-bottom: 1rem;
  
  }

  

/* ---------------------------- pagethree ------------------------------------- */


.pagethree{

    position: relative;
    top: 38.5rem;
    width: 100%;
    height: 700px;

}

.pagethree .header h1{

    text-align: center;
    color: #ff4444;
    font-size: 38px;   
    font-family: "Ubuntu", sans-serif;    
    padding-bottom: 1.5rem; 
    padding: 25px 0px 55px 0px;
}

.pagethree .header p{
    color: #999;
    font-weight: 300;
    text-align: center;
    font-family: "Ubuntu", sans-serif;  
    padding-bottom: 100px;
}
.imgs{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.firstcloud img{
    height: 400px;
    width: 300px;
}

.secondcloud img{
    height: 400px;
    width: 300px;
}

.thridcloud img{
    height: 400px;
    width: 300px;
}

/* ---------------------------- pagefour ------------------------------------- */

.pagefour{
   
    position: relative;
    top: 3000px;
    width: 100%;
    height: 100%;
   
    background: #ff4444  url(../img/our-services.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

}



.pagefour img{
   position: relative;
   top: 0px;
}

.pagefour .imgg{
    position: relative;
    top: 10px;
 }
 .pagefour{
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    justify-content: last baseline;
}


.services-container{
   
    display: flex;
    flex-wrap: wrap;
    padding: 150px 50px 0px 10px ;
    gap: 20px;
    width: 300px;
    height: 500px;
   
}

.services-container2{
    display: flex;
    flex-wrap: wrap;
    
    gap: 20px;
    padding: 10px;
    width: 300px;
    height: 500px;
    padding: 150px 50px 0px 10px ;
}

.service-box{
    float: left;
    align-content: center;
    color: white;
    /* width: 300px; */
}

.service-box h1{
    font-family: "Ubuntu", sans-serif; 
    font-size: 20px;
    padding:10px 0px 0px 0px ;
    
}

.service-box p{
    font-size: 15px;
    font-family: "Ubuntu", sans-serif; 
    color: rgba(255, 255, 255, 0.85);
    padding:10px 0px 0px 0px ;
    
}


.service-box2{  
    align-content: center;
    color: white;
    /* width: 300px; */

}

.service-box2 h1{
    font-family: "Ubuntu", sans-serif; 
    font-size: 20px;
    padding:10px 0px 0px 0px ;
    
}

.service-box2 p{
    color: rgba(255, 255, 255, 0.85);
    font-family: "Ubuntu", sans-serif; 
    font-size: 20px;
    padding:10px 0px 0px 0px ;
    font-size: 15px;
}


.contct{
font-family: "Ubuntu", sans-serif; 
 display: flex;
 background-color: #ff4444;
 justify-content: space-around;
 position:relative;
 top:2900px;
 flex-wrap: wrap;
 align-content: center;
 height: 300px;
gap: 30px;
padding: 10px 10px 10px 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

.contct .a{ width: 400px;}

.contct .b{ width: 400px;}

.contct .c{ width: 400px;}

.contct .a h1{ font-size: 20px; padding: 0px 10px 10px 10px; }

.contct .b h1{ font-size: 20px; padding: 0px 10px 10px 10px ;}

.contct .c h1{ font-size: 20px; padding: 0px 10px 10px 10px ;}


.contct .a p{font-size: 14px; padding: 0px 10px 10px 10px ;}

.contct .b p{font-size: 14px; padding: 0px 10px 10px 10px ;}

.contct .c p{font-size: 14px; padding: 0px 10px 10px 10px ;}

.afterhr{
    position: relative;
    top: 2400px;    
    display: flex;
    flex-wrap: wrap;
}



/* -------------------------------footer part------------------------------------- */
footer{
    position: relative;
    top: 500px;
    background-color: #000000;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 100px;
    align-items: center;

}

.pdiv{
    width: fit-content;
    color: #fbfbfb;

}

footer .footerdiv{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* -------------------------------fab button part---------------------------------- */


.fab img{
    height: 100px;
    width: 50px;
    position: fixed;
    top: 600px;
    left: 1440px;
}



/* -------------------------------------------------------------------------------- */