.theBody{
    background: rgb(6,93,169);
  background: linear-gradient(123deg, rgba(6,93,169,1) 6%, rgba(113,157,197,1) 64%, rgba(219,220,225,1) 100%);
  }
  
  .logo{
    filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(240deg) invert(100%);
  
  }
  
  .bg-custom{
    display: flex;
    justify-content: end;
  }
  
  /* Target the <li> element with the class 'nav-item' */
  .nav-link{
    color: #FFF;
  }
  li.nav-item a.nav-link.active {
    color: #FFF;
  }
  
  
  @media (max-width: 850px) {
    .logo{
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      margin: 0 auto;
    
    }
     
  }


  /* --- */
  .box{
    position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow-x: hidden;
scroll-behavior: smooth;

}

.homeBox{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 50vh;
top: 25px;
padding-bottom: 100px;

}

.homeText{
position: relative;
color: #FFF;
}

.homeText h1{
font-size: 3rem;
}

.homeText .homedesc {
margin: 0 auto;
max-width: 50%;
padding: 25px;
}

.click {
position: relative;
background-color:#065DA9;
border-radius:10px ;
/* left: 27%; */
color: #FFF;
max-height:50px;
width: 300px;
font-size: 18px;
background: rgba(255, 255, 255, 0.3); 
backdrop-filter: blur(5px);
top: 25px;
margin: 0 auto;
height: 100px;
}

.click p {
position: relative;
top: 5px;
font-size: 24px;
}

.click:hover{
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

span{
color: #0096FF;
}


.divimg {

border-radius: 25px;
}

.online,
.services
{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: fit-content; 
width: 100vw;


}
h1{
/* margin: 10px 0; */
}
.online h1,
.online p,
.online ul.onlineList {
text-align: center;
margin: 10px 0;
color: #FFF;

}

.online p {
    max-width: 400px;
}

.services ul.serviceList{
text-align: center;
margin: 10px 0;
color: #065DA9;
}
.icons{
position: relative;
bottom: 10px;
}


.onlineText,
.onlineList,
.services {
width: 100vw; 
justify-content: space-evenly;
}

.online ul.onlineList,
.services ul.serviceList{
list-style: none; 
display: flex;
flex-direction: row;
padding-right: 20px;



}


.onlineList li,
.serviceList li{

display: flex;
flex-direction: column;
align-items: center;
text-align: center; 
margin: 10px 0; 
padding: 50px;
}

.onlineText{
padding-bottom: 100px;
}

.divBox{
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
border: 1px solid #2980b9;
margin-bottom: 10px;
border-radius: 10px;

}

.divimg {
padding: 10px;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20px;
}

.services{
background-color: #FFF;
width: 100vw;
padding-bottom: 100px;

}

.serviceList li {
display: flex;
flex-direction: column;
}

.services h1,h5{
color: #065DA9;

}

.serviceList p {
width: 300px;
font-size: .8rem;
}

/* What we do  */
.whatWeDo{
min-height: 100vh;
min-width: 100vw;
padding-bottom: 100px;
background: rgb(44,57,69);
background: linear-gradient(123deg, rgba(44,57,69,1) 6%, rgba(111,155,195,1) 85%, rgba(219,220,225,1) 100%);

}


.grid {
  position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
grid-gap: 100px;
text-align: center; /* Center align the content */
padding-right: 15px;
padding-top: 35px;
min-height: fit-content;
top: 100px;
position: relative;
right: 10px;
}


.grid h3 {
color: #FFF;
}

.gridText {
font-size: 50rem;
}





.grid li {
list-style: none;
}

.whatWeDo ul.grid li{

color: #FFF;
margin: 0 auto;
}

.whatWeDo h1{
    position: relative;
    top: 25px;
    color: #FFF;
    left: 7px;
    font-size: 2.5rem;

}

.whatWeDo ul.grid li .title {

background-color: white;
border-radius: 10px;
color: #065DA9;
margin: 0 auto;
}

.whatWeDo ul.grid li p{
font-size: 1rem;
}

.whatWeDo ul.grid li h3{
font-size: 1.6rem;
}

.whatWeDo ul.grid li img:hover {
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}


.whyus h1{
color: #065DA9;
position: relative;
left: 20px;
padding: 25px;
}
.whyus{
position: relative;
background-color: #FFF;
min-width: 100vw; 
padding-bottom: 50px;
padding-top: 25px;

}

.whyus h1, .whyus p{
position: relative;
left: 5px;

}
.whyus ul {
list-style: none;
display: flex;
flex-direction: column;
max-width: 40%;
margin: 0 auto;

padding-bottom: 25px;

}

.whyus ul li:nth-child(odd){
color: #0096FF;
padding-top: 75px;
width: fit-content;
margin: 0 auto;
}

.offer a:any-link{
  text-decoration: none;
}

.pageFoot{
width: 100vw;
min-height:fit-content;
background-color: white;
color:#464646;
display: flex;
flex-direction: column;

}

.firstList ul{
  list-style: none;
}

.firstList li{
padding-bottom: 15px;
}

.pageFoot a:any-link{
    text-decoration: underline;
    color:#464646;

    
}



.AllLists{
  display: flex;
flex-direction: row;
margin: 0 auto;
padding-top: 15px;
}

.footerPara{
  width: 400px;

}

.getStarted {
text-align: center; 
}



.getStarted{
position: relative;
width: 200px;
background-color: #0096FF;
color: #FFF;
border-radius: 10px;
margin: 0 auto;


}




.setUpCall {
    width: 100vw;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    padding-top: 25px;
    padding-bottom: 25px;

}

.offerTitle{
    font-size: 1.1rem;
    font-weight: 600;
}
.price{
    font-weight: 600;
}
.offer{
    width: fit-content;
    background-color: white;
    min-height: 8rem;
    border-radius: 10px;
}


.callList {
    list-style: none;
    padding: 0;
    display: flex;
    margin: 0 auto;
  }
  .callList li:hover .offer {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
     rgba(0, 0, 0, 0.12) 0px -12px 30px, 
     rgba(0, 0, 0, 0.12) 0px 4px 6px, 
     rgba(0, 0, 0, 0.17) 0px 12px 13px, 
     rgba(0, 0, 0, 0.09) 0px -3px 5px;
}


  li {
    margin-right: 20px; 
  }

  .offer {
    border: 1px solid #111111;
    padding: 10px;
    width: 300px; /* Adjust the width as needed */
    text-align: center;
  }

  .extras li p{
    text-align: left;
    color: #464646;
  }






@media (max-width: 850px) {

.homeBox{
    padding-bottom: 125px;
}


.homeText h1{
font-size: 2.5rem;
}


.onlineText{
position: relative;
top: 100px;
}

.onlineText,
.onlineList{

justify-content: start; 
overflow-x: auto;
width: 100vw;
}
.homeText{
color: #FFF;
}
.homeText .homedesc {
margin: 0 auto;
max-width: 100vw;
}

span{
color: #0096FF;
}



.services {
min-height: 100vh;
display: inline-block;
position: relative;
padding-top: 100px;
grid-template-columns: repeat(2,150px); 
grid-template-rows: repeat(0,0);
grid-gap:20px 20px; 

}

.services ul.serviceList{
list-style: none; 
display: flex;
flex-direction: column;
position: relative;
right: 5px;



}

.services h1,h5{
  color: #065DA9;
  position: relative;
  bottom: 15px;
  }

.grid {
display: inline-block;
position: relative;
/* padding-top: 100px; */
grid-template-columns: repeat(2,150px); 
grid-template-rows: repeat(0,0);
grid-gap:20px 20px; 
/* margin: 0 auto; */
right:5px ;
top: 10px;

}

.whatWeDo h1{
  position: relative;
  font-size: 2.5rem;
  padding-bottom: 50px;

}

.whatWeDo ul li{
padding-top: 0px;
color: #FFF;
margin: 0 auto;
}


.whyus ul{
position: relative;
right: 15px;
margin: 0 auto;
}

.whyus h1{
position: relative;
left: 5px;

}

.whyus ul {

max-width: 80%;

}


.title{
  min-height: 50px;
  max-height: 75px;
}

.getStarted{
left: 10px;
}

.callList {
  position: relative;
    list-style: none;
    padding: 0;
    display: block;
    margin: 0 auto;
  }

  .callList li{
    padding-bottom: 15px;
    margin-right: 0px;
  }

  .projects li {
    position: relative;
    right: 115px;
    margin-bottom: 30px;

  }


  .AllLists{
    display: flex;
  flex-direction: column;
  margin: 0 auto;
  }
}

/* End of mobile */




/* Styles for screens with a width between 850px and 1000px */
@media (min-width: 850px) and (max-width: 1200px) {
    /* Your CSS styles for this range of screen widths go here */
  
      .onlineList{
        overflow-x: scroll;
        justify-content: start; 
overflow-x: auto;
width: 100vw;
    }

    .projects li {
      position: relative;
      right: 35px;
  
    }


}

.hover-underline-animation {
display: inline-block;
position: relative;
color: black
}

.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: 
#0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}







.AllLists{
  display: flex;
flex-direction: row;
margin: 0 auto;
padding-top: 15px;
font-size: 18px;
}

.footerPara{
  display: block;
margin: 0 auto;
  width: 400px;

}
  
  @media (max-width: 850px) {
    .logo{
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      margin: 0 auto;
    
    }

    .pageFoot{
      font-size: 13px;
      
    }

    .AllLists{
    display: flex;
  flex-direction: column;
  font-size: 13px;
  }

  .footerPara{
    width: 90vw;
  }

  .firstList{
    display: none;
  }
     
  }






  .footer-clean {
  padding:50px 0;
  background-color:#fff;
  color:#4b4c4d;
}

.footer-clean h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-clean ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;

}

.footer-clean ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.8;
}

.footer-clean ul a:hover {
  opacity:1;
}

.footer-clean .item.social {
  text-align:right;
}

@media (max-width:767px) {
  .footer-clean .item {
    text-align:left;
    padding-bottom:20px;
    
  }
}

@media (max-width: 768px) {
  .footer-clean .item.social {
    text-align:left;
  }
}

.footer-clean .item.social > a {
  font-size:24px;
  width:40px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  border:1px solid #ccc;
  margin-left:10px;
  margin-top:22px;
  color:inherit;
  opacity:0.75;
}

.footer-clean .item.social > a:hover {
  opacity:0.9;
}

@media (max-width:991px) {
  .footer-clean .item.social > a {
    margin-top:40px;
  }
}

@media (max-width:767px) {
  .footer-clean .item.social > a {
    margin-top:10px;
  }
}

.footer-clean .copyright {
  margin-top:14px;
  margin-bottom:0;
  font-size:13px;
  opacity:0.6;
}



.ig{
  position: relative;
  bottom: 3px;
  max-width: 25px;
  
}