/* Media Querry */

/* Mobile */
@media (min-width:220px) and (max-width: 768px) {
    body{
        margin-left: 12px;
        margin-right: 12px;
    }
    .HeroSection{
     padding: 20px !important;
    
}
    .Buttons{
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        
    }
    .btn-signUp{
    padding: 10px 25px 10px 25px;
    }
    .btn-login{
    padding: 10px 25px 10px 25px;
    }
   .hero-image{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 350px;
    height: auto;
    
   }
  
   .play-butto{
    margin-left: 0px !important;
   }
   
   
   .play-icon{
    width: 32px;
   }
   .btn-hero{
    padding: 10px 15px 10px 15px !important;
   }
   .star-section{
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    align-items: center;
   }
   .star-svg{
    width: 150px;
   }
  .rating-des{
    margin-top: 15px;
    max-width: 250% !important;
    width: 100%;
    text-align: center;
  }
  .Services{
    padding: 20px !important;
  }

.Features-heading{
    font-size: 30px !important;
    padding: 20px !important;
    
}
.Advance-Feature{
    padding:31px 34px 51px 34px !important; 
}

  

}

@media (min-width:769px) and (max-width: 1024px) {

    .navbar-nav  {
        gap: 10px;
    }
    .Services{
        padding: 60px !important;
        margin-bottom: 50px !important;
    }
}

/* body */

body {
    margin-left: 150px;
    margin-right: 150px;
    
}

/* NavBar */
#Navbar{
    padding: 53px ;
}


.navbar-nav  {
   
    gap: 25px;
    font-size: 16px;
    color: #343434;
    font-family: "DM Sans", sans-serif;
}

.dropdown-item{
    font-size: 16px;
    color: #343434;
    font-family: "DM Sans", sans-serif;
}
.navbar-nav {
    align-items: center;
    justify-content: center;
    margin: auto;
  }

.btn-login{
    margin-right: 10px;
    font-family: "DM Sans", sans-serif;
    font-size:16px;
    font-weight: 500;
    color: #125B50;
    border: 1px solid #125B50;
    padding: 15px 30px 15px 30px;
    border-radius: 5px;
    background-color:#fff;
}

.btn-signUp{
    font-family: "DM Sans", sans-serif;
    font-size:16px;
    font-weight: 500;
    color: #fff;
    border: 1px solid #125B50;
    padding: 15px 30px 15px 30px;
    border-radius: 5px;
    background-color:#125B50;
}


/* Hero-Section */

.HeroSection{
    padding: 150px;
    
}

h1{
    margin-bottom: 12px !important;
}
.hero-des{
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    margin-bottom: 40px !important;
}
.btn-hero{
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    padding: 20px 25px 20px 25px;
    background-color: #125B50;
    color: white;
    border: none;
    border-radius: 5px;

}

.hero-text{
    
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
}

.play-butto{
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: none;
    background-color: transparent;

}

.desc-button{
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
}
.play-icon{
   margin-right: 20px;
}

.star-section{
    display: flex;
    direction: flex-row;
    gap: 17px;
    
}

.rating-des{
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    margin-bottom: 0px;
}

/* Logo Icons */

.IconSection{
    padding: 15px;
}

.logo-slider {
  background-color: #f9f9f9;
}

.logo-track {
  animation: scroll 7s linear infinite;
  display: flex;
  width: max-content;
}

.logo-item {
  flex: 0 0 auto;
  max-width: 150px;
}

.logo-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Optional: slower scroll on hover */
.logo-track:hover {
  animation-play-state: paused;
}


/* Services Section */

.Services{
    padding: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.Services-heading{
    font-size: 40px;
    font-family: "DM Sans", sans-serif;
    text-align: center;
   
}
.Card-Container{
   
    padding: 62px 86px;
}
.Card{
    border: 1.5px solid #EEEEEE;
    padding: 41px 44px 61px 44px !important;
    text-align: center;
    border-radius: 10px;
    
}
h4{
    color: #125B50 !important;
    
}

/* Advance Feature  */

.AdvanceFeatures{
    background-color: #125B50;
    padding-bottom: 86px;
}
.Features-heading{
 color: #FFF;
 font-size: 40px;
    font-family: "DM Sans", sans-serif;
    text-align: center;
    padding-top: 62px;
}

.Advance-Feature{
    background-color: #FAF5E4;
    padding: 41px 44px 61px 44px;
    text-align: center;
    border-radius: 10px;
    
}

/* Keep Image Section */

.monitor-section {
    padding: 80px 0;
    background-color: #fdfdfd;
    position: relative;
  }
 
  .stats-box {
    background-color: #0f5c4d;
    font-family: "DM Sans", sans-serif;
    color: white;
    padding: 30px 9px 32px;
    text-align: center;
    border-radius: 10px;
  }
  .stat-number {
    font-size: 40px;
    font-weight: bold;
  }
  .stat-label {
    font-size: 16px;
    margin-top: 10px;
  }

  .Keep-heading{
    font-family: "DM Sans", sans-serif !important;
    color: #343434 !important;
    font-size: 40px !important;

  }

  .Keep-para{
    font-family: "DM Sans", sans-serif !important;
    color: #000 !important;
    font-size: 16px !important; 
    margin-top: 32px;
    width: 288px;
  }