@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
:root{
    --fontcolor:#43b9dc;
    --backgroundcolor:#34d3b4;
}
*{
    margin: 0;
    padding: 0;
    font-family:gilroy;
    box-sizing: border-box;
    transition: all .2s linear;
    text-transform: capitalize;
    text-decoration: none;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 2rem 7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:white;
    box-shadow: 0 1rem 1rem rgb(0, 0, 0, .1);
    z-index: 10000000;

}
#guna{
    font-size: 15px;
    
}
header #logo{
    font-size: 3rem;
    color: black;
}
header #logo span{
    color: var(--fontcolor);
}
header .navbar a{
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--fontcolor);
    margin-left: 1.5rem;
}
.icons i{
font-size: 2rem;
color: var(--fontcolor);
margin-left: 1rem;
}
header #menu_bars{
    font-size: 2rem;
    color: var(--fontcolor);
    display: none;
}
header .navbar.active{
    left: 0;
    transition: .5s;
}
.main-image{
    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    margin-top: 75px;
    height: 100vh;
}
.container{
    background: url("./images/headerimage.jpg");
    width: 100%;
    padding-top: 8.5rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.container .main-text{
    width: 50%;
    position: absolute;
    top: 200px;
    padding: 0 2rem;
    text-align: center;
}
.container .main-text h2{
    font-size:3.5rem;
    color: #fff;
    padding-bottom: 1.5rem;
}
.container .main-text button{
    padding: 1.5rem 3.5rem;
    background: #3FC1D1;
    color: white;
    border: none;
    border-radius:1px;
    
    font-weight: 700;
}
.service-section{
    padding: 2rem 7%;
    background: linear-gradient(#43b9dc, #34d3b4);
    min-height: 50vh;
    overflow: hidden;
    position: relative;
}
#ourservices{
    color: #111;
    font-size: 30px;
    padding: 2rem 0;
    text-align: center;
}
.inner-service-section{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    text-align: center;
}
.service-box{
    flex: 1 1 200px;
    padding: 5rem 0;
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, .1);
}
.service-box img{
    color: white;
     height: 10rem;
    padding: .5rem 0;
}

.service-box h2{
    color: #fff;
    font-size: 1.8rem;
    padding: 1rem 0;
}
.service-box p{
    color: white;
    font-size: 1.5rem;
    padding: 0 1rem;
}
.work-section{
    padding: 4rem 7%;
    display: grid; 
     grid-template-columns: 2fr 1fr;
     display: flex;
    justify-content: center; 
     width: 100%;
     position: relative;
     overflow: hidden;
  

}
.inner-work-section img{
    width:  80rem; 
    border: 2px solid #34d3b4;
    margin-top: 10px;
}


.inner-work-section h2{
    font-size: 2rem;
    padding: .5rem 0;
 
}
.inner-work-section h2 span{
    color:#34d3b4;
   
}
.scnclass{
    padding: 0 1rem;
}
.myimages{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 1rem;
}
.btn{
    padding: 1rem 3rem;
    background: var(--backgroundcolor);
    border-radius: 15px;
   display: inline-block;
   color: white;
   font-size: 18px;
   margin-top: 5px;
}
.creative-text{
    padding: 2rem 0;
}
.depart{
    background: var(--backgroundcolor);
    min-height: 85vh;
    padding: 2rem 9%;
    position: relative;
     overflow: hidden;
}
.depart h1{
    color:#111;
    display: flex;
    align-self: center;
    justify-content: center;
    font-size: 2rem;
}

/* .galleryheading{ */
    /* color: #111;
    padding: 2rem 0;
    text-align: center;
    font-size: 20px;
}
.galleryheading span{
    color: var(--fontcolor);
}
.main-gallery .gallery-box{
    flex: 1 1 300px;
}
.main-gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.gallery-box img{
    width: 100%;
} */
.ourteam-section{
    padding: 7rem;
    position: relative;
    overflow: hidden;
}
.ourteam-section h2{
    padding: 2rem;
    font-size: 3rem;
    text-align: center;
}
.ourteam-section h2 span{
    color: var(--fontcolor);
}
.ourteam-inner{
    display: flex;
    /* flex-wrap: wrap; */
    text-align: center;
    gap: 15px;
}
.ourteam-inner .section-box{
    flex: 1 1 250px;
}
.ourteam-inner .section-box img{
    width: 100%;
}
.section-box h3{
    padding: 1rem 0;
    font-size: 2rem;
}
.team-social-links i{
    color: var(--fontcolor);
    font-size: 2rem;
    padding:1rem 0;
}
.main-footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #222;
    padding: 2rem 9%;
    position: relative;
    overflow: hidden;
    /* height: 70vh; */
}
.inner-footer{
    flex: 1 1 200px;
}
.inner-footer h2{
    color: white;
    font-size: 2rem;
    padding: 2rem 0;
}
.inner-footer a{
    display: block;
    color: white;
    font-size: 1.5rem;
    padding: 1rem;
}












@media (max-width:768px) {

    #hmse{
        margin-top: 50px;
    }

    #ma{
        transform: translateY(-20px);
        margin-left: 45px;
    }
    html{
        font-size: 50%;
    }
    header #menu_bars{
        display: initial;
    }

    header .navbar{
        position: absolute;
        top: 100%;
        left: 100%;
        right: 0;
        background: var(--backgroundcolor);
        height: 100vh;
        text-align: center;

    }
    header .navbar a{
        display: block;
       
        background: white;
        margin-top: 1rem;
        padding: 2rem;
        width: 90%;
        border-radius: 10px;
    }
    .container .main-text{
        width: 70%;
        padding: 0 ;
    }
   .work-section{
       display: grid;
       grid-template-columns: 1fr;
     
   }
   .myimages img{
       width: 100%;
   }
   .btn{
       display: block;
   }
   .inner-work-section h2{
    font-size:1.2rem;
   display: flex;
   flex-wrap: wrap;
   align-self:center;
   justify-content: center;
}

.depart{
    background: var(--backgroundcolor);
    min-height:65vh;
    padding: 2rem 9%;
}

.depart h1{
    color:#111;
    display: flex;
    align-self: center;
    justify-content: center;
    font-size: 1.9rem;
}
.ourteam-inner{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    gap: 15px;
}
.ourteam-section h2{
    padding: 2rem;
    font-size: 2.7rem;
    text-align: center;
}
.inner-work-section img{
    width: 35rem; 
    border: 2px solid #34d3b4;
    margin-top: 10px;
}
.inner-work-section h2{
    font-size:1rem;
   display: flex;
   flex-wrap: wrap;
   align-self:center;
   justify-content: center;
}


.container .main-text h2{
    font-size:2rem;
    color: #fff;
    padding-bottom: 1.5rem;
}

.container{
    background: url("./images/headerimage.jpg");
    width: 100%;
    padding-top: 8.5rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 93vh;
}
#ser{
    margin-top: -10px;
}
}

/* 
.gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vh;
    margin-inline: auto;
    max-width: 70rem;

    background: #141414;
    background: var(--backgroundcolor);
    padding: 1vh;
}

 .gallery > img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: all 0.3s ease;
    border-radius:2px;

}

.gallery:has(img:hover) img:not(:hover) {
    scale: 0.8;
    opacity: 0.5;
    filter: grayscale(70%);
}
 */

 
#keyservice {
    padding-top: 4vw;
    padding-left: 2vw;
    font-family: g-r;
    /* background-color: crimson; */
    height: 55vh;
    display: flex;
    justify-content: space-between;
}

#keyservice h3 {
    color: #ffffff;
    display: flex;
    cursor: pointer;
    font-family: g-r;
    font-weight: 300;
    font-size: 1.5rem;
 
     line-height: 2rem;
 
}

#keyservice h3:hover {
    color: yellow;
    font-weight: 500;
}

#keyservice h3 span {
    color: #ffffff;
    margin-right: 4px;
}

#keyservice h3 a {
    text-decoration: none;
    color: #fff;
}

#keyservice h3 a:hover {
    color: yellow;
}

#bx1 {
    /* background-color: #77b9d7; */
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45%;
    border-right: 2px solid white;
}

#bx2 {
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 25.5vh; */
    width: 50%;
    /* background-color: #9477d7; */
}

section-container {
    min-height: 100vh;
    /* background: #34d3b4; */
    margin: auto;
    /* padding: 20px; */
    display: flex;
    align-items: center; /* Align the scroll icon vertically */
    /* margin-top: 40px; */
  }
  
  .product-list-container {
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #333 #ccc;
    cursor: pointer;
  }
  
  .product-list {
    display: flex;
    flex-direction: row;
  }
  
  .product-card {
    position: relative;
    flex: 0 0 auto;
      width:300px;
      height: 300px;
    margin: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
        background: #fff;
  }

  
.product-card img{
    width: 100%;
    height: 100%;
}
  
  /* Style scrollbar for Chrome, Safari, and Opera */
  .product-list-container::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  .product-list-container::-webkit-scrollbar-thumb {
    background: #333;
  }
  
  .product-list-container::-webkit-scrollbar-thumb:hover {
    background:#34d3b4;
  }

  .gallery{
    min-height: 80vh;
    background-color:#34d3b4;
    padding: .5rem;
    overflow: hidden;
    position: relative;

  }

  .gallery h1{
    display: flex;
    align-self:center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }


  #page6 {
    position: relative;
    height: 70vh;
    width: 100%;
    overflow: hidden;
    /* background-color: violet; */
}

.buttonsss {
    position: absolute;
    height: 3vw;
    border-radius: 50%;
    width: 3vw;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 0 10px #464548;
}

.buttonsss i {
    font-size: 1.5vw;
    font-weight: 900;
}

#buttonsss1 {
    top: 50%;
    left: 5%;
}

#buttonsss2 {
    top: 50%;
    left: 92%;
}

#headingwords {
    /* position: relative; */
    height: 10vh;
    font-size: 1vw;
    padding: 1vw 5vw;
    width: 100%;
    display: flex;
    align-items:center;
    justify-content: center;
    /* background-color: wheat; */
}

#headingwords span{
    color:#34d3b4;
}
#slideboxtestimonial {
    position: relative;
    height: 55vh;
    width: 100vw;
    display: flex;
    /* background-color: blue; */

}

#testimonialsSlide {
    position: absolute;
    height: 55vh;
    width: 700vw;
    display: flex;
    /* background-color: blue; */
}

.sll {
    height: 55vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    gap: 5vw;
    position: relative;
}

#imboxdown {
    position: absolute;
    top: 60%;
    display: flex;
    align-items: center;
    flex-direction: column;
    left: 70%;
    gap: .6vw;
}

.sll1 {
    position: relative;
    height: 55vh;
    width: 37vw;
    gap: 2vw;
    display: flex;
    flex-direction: column;
    padding: 2vw 2vw;
    /* background-color: yellow; */
}

.sll2 {
    position: relative;
    height: 55vh;
    width: 37vw;
    gap: 2vw;
    display: flex;
    flex-direction: column;
    padding: 2vw 2vw;
    /* background-color: yellow; */
}

#paraoftestimonial {
    font-size: 1.4vw;
    line-height: 2.5vw;
}

#imbox {
    height: 7vw;
    width: 7vw;
    display: flex;
    border-radius: 50%;
    overflow: hidden;
    background-color: #357df1;
}

#imbox img {

    /* display: flex; */
    object-fit: contain;
}

#slider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.3vw;
    /* background-color: tomato; */
}

#movingslider {
    position: relative;
    height: 4.5vh;
    /* box-shadow: 0 0 10px #222223; */
    width: 15vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: turquoise; */
}

#pointsliderdiv {
    box-shadow: 0 0 4px #4c4c4e;
    position: absolute;
    height: .6vw;
    width: .6vw;
    z-index: 9;
    border-radius: 50%;
    background-color: #4c8ef7;
}

.points {
    position: absolute;
    height: .6vw;
    width: .6vw;
    background-color: #c2bfbf;
    border-radius: 50%;
}

#point1 {
    left: 0%;
}

#point2 {
    left: 14%;
}

#point3 {
    left: 28%;
}

#point4 {
    left: 42%;
}

#point5 {
    left: 56%;
}

#point6 {
    left: 70%;
}

#point7 {
    left: 84%;
}
.main-footer h3{
    position: absolute;
   display: flex;
  left: 43%;
   align-self:flex-end;
    color:#fff;
}



@media (max-width:768px){

    #headingwords h1 {
        scale: 2;
        margin-left: 10vw;
        margin-top: 5vw;
        font-size: 2vw;
        
    }

  
    .main-footer h1{
    
       color:#fff;
    transform: translate(-55px,-50px);
       font-size: 3rem;
    
   }
   .main-footer h3{
    position: absolute;
   display: flex;
  left: 20%;
   align-self:flex-end;
    color:#fff;
}
    #page6 {
        position: relative;
        height: 55vh;
        width: 100%;
        overflow: hidden;
        padding: 10px;
   
    }

    #headingwords h1 {
        scale: 2;
        margin-left: 10vw;
        margin-top: 5vw;
        
    }

    .buttonsss {
        position: absolute;
        height: 3vw;
        border-radius: 50%;
        width: 3vw;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        box-shadow: 0 0 10px #464548;
        scale: 2;
        padding-left: -1vw;
        padding-top: .5vw;
    }

    .buttonsss i {
        scale: 1.5;
        font-size: 2.5vw;
        font-weight: 900;
    }

    #buttonsss1 {
        top: 50%;
        left: 5%;
        padding-right: .3vw;
        padding-top: .5vw;
    }

    #buttonsss2 {
        top: 50%;
        left: 92%;
    }

    #headingwords {
        /* position: relative; */
        height: 10vh;
        font-size: 1.5vw;
        padding: 1vw 5vw;
        width: 100%;
        /* background-color: wheat; */
    }

    #slideboxtestimonial {
        position: relative;
        height: 55vh;
        width: 100vw;
      
        display: flex;
        /* background-color: blue; */

    }

    #testimonialsSlide {
        position: absolute;
        height: 42vh;
        width: 700vw;
        display: flex;
        /* background-color: blue; */
    }

    .sll {
        height: 40vh;
        /* background-color: red; */
        width: 100vw;
        display: flex;
        justify-content: center;
        gap: 5vw;
        position: relative;
    }

    #imboxdown {
        position: absolute;
        top: 60%;
        display: flex;
        align-items: center;
        flex-direction: column;
        left: 70%;
        gap: .6vw;
    }

    .sll1 {
        position: relative;
        height: 38vh;
        width: 37vw;
        gap: 2vw;
        display: flex;
        flex-direction: column;
        padding-top: 10vw;
        padding-left: 9vw;
        /* background-color: yellow; */
    }

    .sll2 {
        position: relative;
        height: 38vh;
        width: 37vw;
        gap: 2vw;
        display: flex;
        flex-direction: column;
        padding-top: 10vw;
        padding-left: 9vw;
        /* background-color: yellow; */
    }

    #paraoftestimonial {
        font-size: 1.4vw;
        line-height: 2vw;
        scale: 2.2;
        width: 60%;
      
        /* background-color: #00436a; */
    }

    #imbox {
        height: 7vw;
        width: 7vw;
        display: flex;
        border-radius: 50%;
        overflow: hidden;
        background-color: #357df1;
        scale: 1.5;
    }

    #imbox img {
        /* display: flex; */
        object-fit: contain;
        /* scale: 1.5; */
    }

    #imboxdown {
        /* background-color: tomato; */
        margin-left: -20vw;
        margin-top: 5vw;
    }

    #imboxdown h3 {
        margin-top: 2vw;
        scale: .7;
    }

    #slider {
        position: absolute;
        top: 95%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.3vw;
        /* background-color: tomato; */
        scale: 2;
    }

    #movingslider {
        position: relative;
        height: 4.5vh;
        /* box-shadow: 0 0 10px #222223; */
        width: 15vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* background-color: turquoise; */
    }

    #pointsliderdiv {
        box-shadow: 0 0 4px #4c4c4e;
        position: absolute;
        height: .6vw;
        width: .6vw;
        z-index: 9;
        border-radius: 50%;
        background-color: #4c8ef7;
    }

    .points {
        position: absolute;
        height: .6vw;
        width: .6vw;
        background-color: #c2bfbf;
        border-radius: 50%;
    }

    #point1 {
        left: 0%;
    }

    #point2 {
        left: 14%;
    }

    #point3 {
        left: 28%;
    }

    #point4 {
        left: 42%;
    }

    #point5 {
        left: 56%;
    }

    #point6 {
        left: 70%;
    }

    #point7 {
        left: 84%;
    }

}

.inner-footer a .loc{
   position: absolute;
   transform: translateX(-25px);
}

.main-footer {
    overflow: hidden;
}
.main-footer h1{
     margin-top: 80px;
    color:#fff;
    margin-left: 100px;
    font-size: 3rem;
 
}

.main-footer h1 span{
    color:#34d3b4;
   

}

#con{
    height: 100vh;
    display: flex;
    align-items: center;
}

#con h1{
    margin-top: -10px; 

    
}
  @media screen and (max-width: 768px) {
    .product-card {
      width: 90%;
      margin: 10px;
    }
  }