*{
    font-family: DIN,Roboto,sans-serif;
    font-weight:300;
  }

  @media(max-width:600px){
    html,body{
     width: 100%;
      height: 100%;
      margin: 0;
      padding: 0px;
      overflow-x: hidden;
      flex-wrap: wrap;
    }
  }

/* =======================NAVBAR==================== */
  .logo{
    width: 69px;
    height: 61px;
    margin-left: 2em;
  }

  .top-navbar{
    display:flex;
    justify-content: space-between;
    background-color: rgb(0,0,0,.5);
    color:white;
  }

 .navbar {
      transition: all 0.5s;
      color:white;

    }

    .nav{
      padding-left: 12em;
      margin-top: 1em;
    }

    @media (max-width:1230px){
      .nav{
        padding-left:77px;
      }

      .navbar-nav{
        font-size:19px;
      }
    }


    .nav-link {
      padding: 3px;
    }

    .nav-link:hover {
     /* text-decoration: underline; */
     font-weight:bold;
    }

    .navbar-scrolled {

      margin-top: -2px;
      background: rgb(0,0,0,.5);

    }


  .fixed-top{
      padding-top:3em;

    }

    .navbar-nav .nav-link{
      /* margin-right:91px; */
      margin-right: 5px;
    }


 @media (max-width:1170px){
      .fixed-top{
        font-size:24px;
   }

      .container-fluid{
        padding-left: 6em;
        padding-top:3em;
      }
    }


  @media(max-width:992px){
      .fixed-top{
        font-size:20px;
      }
    }


  @media(max-width:390px){
      .fixed-top{
       left:169px;
      }
    }

    .submenu-1{
      display:none;
    }

 .nav-item:hover .submenu-1{
        display:block;
        position:absolute;
        background-color:#787778;
        opacity:0.9;
    }



    .nav-item:hover .submenu-1 ul li{
      width:140px;
      padding:10px;
      border-bottom:1px dotted #fff;
      background:#787778;
      opacity:0.9;
      border-radius:0;
      text-align: left;
    }




.nav-item:hover .submenu-1 ul li:last-child{
      border-bottom:none;
    }

    .nav-item:hover .submenu-1 ul li{
      list-style: none;
    }

    .nav-item:hover .submenu-1 ul li a{
      text-decoration: none;
      color:white;
    }

    .navbar-nav{
      font-weight: 600;
      padding-left: 11em
  }




  @media(max-width:1200px){
      .fixed-top{
       position: fixed;
          top: -49px;
          /* right: 38px; */
          left: 72px;
          z-index: 1030;
        }

    .navbar-nav{
      padding-left:1em;
    }
  }





  .banner{
    /* background-image: url(./../images/home-banner.webp); */
   background-image: url(./../images/banner/1.jpg);
    background-position: right;
    background-size: cover;
   height:50vh;
    background-repeat: no-repeat;
    position:relative;
    /* clip-path: polygon(0 0, 100% 0, 100% 76%, 77% 100%, 0 84%); */
    /* background-color: #F1F8FF ; */
  }




 .background-overlay{
    background-color: #000;
    opacity:0.4;
    height:50vh;
    /* clip-path: polygon(0 0, 100% 0, 100% 76%, 77% 100%, 0 84%); */
  }

  .banner-title{
    position: absolute;
    top: 15em;
    left: 39%;
    z-index: 1;
  }

  .banner-heading{

    color:#fff;
    text-align: center;
  }

  .banner-link{
    text-decoration: none;
    color:#fff;
  }

  .banner-link:hover{
    text-decoration: underline;
    font-weight:bold;
  }

  .banner-content{
    display:flex;
    justify-content: center;
    align-items: center;
  }


 /* =======================content on the banner============== */

    .border-left{
      border-left: 2px solid #FE5F5B; ;
    }

    .content{
      width:100%;
      color:white;
    }


     /* -------------------------------------space--------------- */

     .space{

        height: 18vh;


    }



/* -------------------------------------info--------------------------------------- */
.info{
    display: flex;
    flex-wrap: wrap;
    padding:20px 7px;
    justify-content: space-around;
    background-image: url(images/background-img.jpg);
    background-position-x: right;
}


@media(max-width:402px){
  .info-1{
    width: 117%;

    padding:10px;
  }

  .nav{
    padding-left: 0;
    margin-top: 0;
  }

}



.info-title{
  color: #e47979;
    font-weight: 700;
}



.para{
  font-size: 18px;
  text-align: justify;
}

.info-2{
  margin-top: 97px;
}


/* ------------------------------------footer--------------------------- */

.footer{
    font-size: 15px;
    /* background-image: url(./images/footer/wavy-footer.png);
    background-position: 52%; */
    /* background-color: #000;
    height: 10vh;
    width: 100%;
    background-repeat: no-repeat; */
    background-color: #000;
    height: 12vh;
}


.footer-link{
    text-decoration: none;
    color: #fff;
    padding: 0px 17px;
}

.footer-2{
    padding: 7PX;
    text-align: center;
}

.footer-link:hover{
    color:#fff;
}

.copyright{
    color: #fff;
    font-size: 14px;
}

/* CSS for mobile devices with a width between 320px and 767px */
@media (min-width: 320px) and (max-width: 767px) {
    /* Your mobile styles here */
    /* These styles will apply to screens between 320px and 767px in width */
.logo {
    /* width: 69px; */
    height: 61px;
    margin-left: -4em !important;
padding: 10px;
}


.navbar-nav {
    background-color: #000;
    margin-left: -82px;
padding: 20px;
}



/* body changes * /
.info-1 {
  width: 100% !important;
}


}

/* CSS for mobile devices with a width between 320px and 767px end */


/* CSS for mobile devices with a width between 320px and 767px */
@media (min-width: 320px) and (max-width: 767px) {
    /* Your mobile styles here */
    /* These styles will apply to screens between 320px and 767px in width */
.logo {
    /* width: 69px; */
    height: 61px;
    margin-left: -4em !important;
padding: 10px;
}


.navbar-nav {
    background-color: #000;
    margin-left: -82px;
padding: 20px;
}



/* body changes * /
.info-1 {
  width: 100% !important;
}


}

/* CSS for mobile devices with a width between 320px and 767px end */

