@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman';
}
  html{
  margin: 0;
  width: 100%;

  overflow-x: hidden;
}

body
{
    background-image: url('landing-bg\ \(1\).png');
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow-x: hidden;

}
.firtnav {

    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    top: 0;
    height: 35px;
    position: relative;
}
.right ul
{
    position: relative;
    left: -60px;
    padding: 0;
  margin: 0;
  list-style-type: none;
}
.right ul li{
    display: inline-block;
    margin-right: 7px;
}
.left a,
.right a {
    color: white;
    text-decoration: none;
    padding: 15px;
    position: relative;
    top: 8px;
}
.youtube i {

    color: white;
}
.Instagram i {

    color: white;
}
.mainsection
{
    height: 95%;
    width: 100%;
}
.logo
{
    height: 15%;
    font-size: 24px;
}
.logo span a
{
    font-family: 'Righteous';
    font-size: 54px;
    position: relative;
    top: -33px;
    text-decoration: none; 
    color: white;

}
.logo span a span
{
    font-family: 'Righteous';
}
.formobview
{
    display: none;
}
.navigation
{
    display: none;
}

.mainshow
{
    height: 100%;
display: flex;
}
.Ourservices
{
    width: 65%;
    height: 100%;
}
.sceinfo
{
    position: relative;
    left: 142px;
    top: 50px;
    width: 80%;
}

.sceinfo ul
{
    list-style-type: none;
}
.sceinfo ul li
{
    margin-top: 15px;
}
.sceinfo ul li i{
    list-style-type: none; 
    color: white;
    font-size: 24px;
    position: relative;
    top: -3px;
}

.sceinfo ul li a {
    text-decoration: none;
    font-family: 'Crimson Text', serif;
    font-size: 35px;
    color: white;
    text-transform: uppercase;
}
.sceinfo ul li .serviceinfo {
    display: none;
    position: relative;
    left: 30px;
    background-color: white;
    padding: 8px;
    border: 1px solid #ddd;
    width: 525px;
    height: 57px;
    border-radius: 26px;
    font-family: 'Crimson Text', serif;

}
.Ourservices .sceinfo li :hover {
    color: rgb(25, 235, 203);
    font-size: 38px;
}
.Ourservices .sceinfo li a:hover + .serviceinfo {
    display: block;
}
.scrolldiv
{
    width: 35%;
    height: 100%
}
.outerlayer {
    height: 418px;
width: 418px;
border: 2px solid white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: 40px;
  left: 23px;
  }
  .innerlayer {
    height: 350px;
    width: 350px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
  }


svg {
width: 107%;
height: 100%;
position: relative;
top: -3px;
left: -16px;

}

.text ,.text-extra  {
  font-size: 31px;
  fill: white;
 
}

#curve {
  fill: transparent; 
}

.slideshow-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 350px;
    margin-left: -175px;
    margin-top: -175px;
    border-radius: 50%;
    
}


.images {
    height: 229px;
    width: 273px;
    position: relative;
    top: 60px;
    left: 38px;
}

.outterlayer svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.slide {
    display: none;
    align-items: center;
}

.slide img {
    width: 100%;
    height: auto;
}

.fade {
    animation: fade 1.5s ease-in-out;
}

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.formoblogo
{
    display: none;
}
@media screen and (max-width: 1275px) {
 
 
    
 .scrolldiv
 {
    left: -41px;
    position: relative;
 }


}
@media screen and (max-width: 1150px) 
{
    .sceinfo
    {
        position: relative;
        left: 76px;
    }
    .outerlayer
    {
        position: relative;
        left: -25px;
    }
}
@media screen and (max-width: 991px) {
  body
  {
    height: 107vh;
  }
    .left {
        display: flex; 
        position: relative;
        left: 10px;
        top: -14px;
    }
    .left a 
    {
        margin-right: -19px;
        font-size: 16px;
    }
     
    .right {
        display: flex; 
    }
    .right ul li
    { 
        margin-right: -8px;
        position: relative;
        left: 54px;
    }
    .mainshow
    {
        display: block;
        
    }
    .logo {
        height: 10%;
    }
    .Ourservices
    {
        width: 100%;
        height: 50%;
    }
    .Ourservices .sceinfo
    {
       
        width: 81%;
    }
    .sceinfo ul li
    {
       margin-top: 10px;
    }
    .sceinfo ul li a
    {
        font-size: 31px;
    }
    .scrolldiv
    {
     
        width: 100%;
    height: 50%;
    position: relative;
    left: 0px;
    top: 117px;
        
    }
    .outerlayer
    {
        position: relative;
    left: 183px;
    top: 0px;
    }
    .Ourservices .sceinfo li :hover {
        
        font-size: 31px;
    }

}
@media screen and (max-width: 768px) {
    body
    {
      height: 108vh;
    }
    .left {
        display: flex; 
        position: relative;
        left: 10px;
        top: -14px;
    }
   
    .right {
        display: flex; 
    }
    .right ul li
    {
        margin-right: -1px;
    }
    .left a span
    {
        display: none;
    }
    .Ourservices
    {
        position: relative;
        top: 10px;
    }
    .Ourservices .sceinfo {
        width: 81%;
        position: relative;
        top: 10px;
      }
      .sceinfo ul li {
        margin-top: 20px;
      }
   
    .sceinfo ul 
    {
        position: relative;
        top: -12%;
    }
    .sceinfo ul li a
    {
        font-size: 29px;
    }
    .sceinfo ul li i{
        font-size: 24px;
        position: relative;
        top: 3px;
    }
    .Ourservices .sceinfo li :hover {
        
        font-size: 29px;
    }
    .scrolldiv {
        position: relative;
        top: 111px;
    }
    .outerlayer {
        position: relative;
    top: 39px;
    left: 111px;

      }

}
@media screen and (max-width: 651px) {
    body
    {
       height: 115vh; 
    }
   .left
   {
    position: relative;
    left: -8px;
   }
    .left a span
    {
        display: none;
    }
    .right ul li {
        margin-right: -4px;
      }
    
   .logo span a
   {
    font-size: 40px;
   }
   
   .Ourservices .sceinfo
   {
    position: relative;
    top: -2px;
    left: 58px;
    width: 88%;

   }
   .sceinfo ul li a
   {
    font-size: 23px;
   }
   .sceinfo ul li i{
    font-size: 23px;
}

.scrolldiv {
    position: relative;
    top: 107px;
    width: 100%;
    left: -12px;
}
.sceinfo ul li .serviceinfo
{
    width: 377px;
  height: 57px;
  font-size: 14px
} 
.outerlayer
{
    position: relative;
    left: 60px;
    top: -73px;
}
.Ourservices .sceinfo li :hover {
        
    font-size: 23px;
}
}
@media screen and (max-width: 480px) {
   
    .firtnav
    {
        display: none;
    }
    .mainsection
    {
        position: relative;
        top: 0;
    }
    .logo
    {
        position: relative;
        top: 0;
        width: 334px;
        text-align: center;
    }
    .logo img
    {
        height: 60px;
        width: 60px;
    }
    .logo span a
    {
        position: relative;
        top: -27px;
        font-size: 32px;
    }
    .logo span a span {
        position: relative;
        top: -12px;
        font-size: 32px;
        left: 71px;
    }
    .formobview
    {
        display: block;
    }
    .formobview input[type="checkbox"] {
        display: block;
        opacity: 0;
    }
    .hamburger {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
        left: 33px;
        color: white;
        top: -15px;
        
      }
      
      .line {
        width: 100%;
        height: 2px;
        background-color:white;
        position: absolute;
        left: 0;
        transition: transform 0.3s ease;
        
      }
      
      /* Styling for each line of the hamburger icon */
      .line:nth-child(1) {
        top: 0;
      }
      
      .line:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }
      
      .line:nth-child(3) {
        bottom: 0;
      }
      
      /* Rotate lines to form the hamburger icon when checkbox is checked */
      input[type="checkbox"]:checked ~ .hamburger .line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }
      
      input[type="checkbox"]:checked ~ .hamburger .line:nth-child(2) {
        opacity: 0;
      }
      
      input[type="checkbox"]:checked ~ .hamburger .line:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
      }
    .navigation
    {   background: rgba(0, 0, 0, 0.7);
        position: relative;
        top: 1px;
        height: 169px;
    }
    .navigation ul
    {
        position: relative;
    top: 14px;
    left: 28px;
    list-style: none;
    }
    .navigation ul li
    {
margin-bottom: 10px;
text-align: center;

    }
    .navigation ul li a
    {
        text-decoration: none;
        color: white;
        font-size: 20px;
        text-align: center;
    }
    .Ourservices {
        position: relative;
        top: -1px;
      }
.Ourservices .sceinfo
{
    position: relative;
    left: 33px;
}
.sceinfo ul
{
    width: 340px;
}
.sceinfo ul li a
{
font-size: 22px;
}
/* .sceinfo ul li i{
    font-size: 20px;
} */
.Ourservices .sceinfo li :hover {
        
    font-size: 22px;
}
.scrolldiv
{
    position: relative;
    top: 45px;
}
.sceinfo ul li .serviceinfo {
    width: 343px;
    height: 60px;
    font-size: 14px;
    position: relative;
    left: -6px;
  }
.sync-container
{
    display: none;
}
.formoblogo
{
    display: block;
}
.formoblogo img
{
    position: relative;
    left: 17px;
    top: 11px;
    width: 350px;
    height: 350px
}
.slideshow-container
{
  
    height: 251px;
    width: 251px;
    position: relative;
    top: -117px;
    left: 242px;
}
.images
{
    position: relative;
    top: 27px;
    height: 194px;
    width: 170px;
    left: 36px;
}
.mobslide img
{
    position: relative;
    top: -3px;
     height: 208px;
    width: 239px;
    left: -29px;
}
.mobslide {
    display: none;
    align-items: center;
}


.mobfade {
    animation: fade 1.5s ease-in-out;
}

@keyframes mobfade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

}
@media screen and (max-width: 375px) 
{

    .logo img {
      margin-left: -22px;
      }
      .logo span a span {
        position: relative;
        
        left: 58px;
      }
      .Ourservices .sceinfo {
        position: relative;
        left: 20px;
      }
      .sceinfo ul {
        width: 299px;
      }
      .sceinfo ul li a
      {
        font-size: 20px;
      }
      .Ourservices .sceinfo li :hover {
        
        font-size: 20px;
    }
      .scrolldiv {
        position: relative;
        left: -33px;
      }
      .sceinfo ul li .serviceinfo {
        width: 299px;
      }
}