:root{
    --black: #575555;
    --test:#0f4ecb8a;
    --topics: #868282;
    --nav-bg: #d0d0d0ec;
    --light-nav-bg: #f3f3f3;
    --main-bg:#ebebebfb;
    --nav-hover: #1845c1;
    --nav-border: #0f4ecb;
    --white: #fff;
    --empty:#5afd90;
    --green:#00c2108a;
    --logout:#ec260c;
    --guest-login:#ffd207;
    --border:.2rem solid #ccc;
    --box-shadow:0 .5rem 1rem #4e4b4b1a;
    --topbar-border: 0 7px 25px #16161657;
}
*{
    padding: 0px;
    margin: 0px;
    scroll-behavior: smooth;
    text-decoration: none;
  }
  
  ::-webkit-scrollbar{
    width: 5px;
  }
  ::-webkit-scrollbar-thumb{
    background: linear-gradient(transparent, var(--white), transparent);
  }
  
/* Styles for service swiper slides start */

section{
    width: 98% auto;
    margin: 0px 3%;
    overflow-x: scroll;
    scrollbar-color: var(--nav-hover) !important;

    /* border: 2px solid red; */
  }
  .service .service-slider{
    width: 100% auto;
    height: 100%;
  }
  
  .service .service-slider .slider-wrapper{
    width: 100dvw;
    height: 100%;
    z-index: 1;
    display: flex;
    overflow-x: scroll;
  
  }
  
  .service .service-slider .slider-slide{
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: .5rem;
    height: 400px;
    min-width:300px;
    margin: 0px 3px;
    position: relative;
  }
  
  .service .service-slider .slider-slide:hover{
    cursor: pointer;
  }
  
  .service .service-slider .slider-slide:hover .statement{
    cursor: pointer;
    position: absolute;
    top: 0px;
    transition: .6s;
  }
  .service .service-slider .slider-slide img{
    height:100%;
    width:100%;
    object-fit: cover;
  }
  
  .service .service-slider .slider-slide .statement{
    height:100%;
    width:98%;
    padding: 5px;
    background: var(--white);
    color: var(--nav-hover);
    padding-top: -400px;
    position: absolute;
    top: 100%;
    transition: .6s;
  }
  .service .service-slider .slider-slide .statement h2{
    font-size: 30px;
    text-align: center;
  
  }
  .service .service-slider .slider-slide .statement h3{
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 15px;
  }
  
  .service .service-slider .slider-slide .statement p{
    text-align: justify;
    color: var(--black);
    padding: 5px;
    
  }
  
  
  /* Styles for service swiper slides ends */