@media all and (min-width: 992px) {
    .dropdown-menu li{ position: relative;  }
    .nav-item .submenu{ 
        display: none;
        position: absolute;
        left:100%; top:-7px;
    }
    .nav-item .submenu-left{ 
        right:100%; left:auto;
    }
    .dropdown-menu > li:hover{ display: block; }
    .dropdown-menu > li:hover > .submenu{ display: block; }
}   
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu{
      margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
      display:  inline-block; 
  }
}   
/* ============ small devices .end// ============ */

body{
  overflow-x: hidden;


}
a{
  text-decoration:  none;
}
a:hover{
  color:darkgrey;
}

.dropdown-item li,a{
  font-weight: bold;
}
body{
  font-family: Arial, Helvetica, sans-serif;
 
}


/* ============ Navbar and Header Styles ============ */
.header{
  width:100%;
  height:30px;
  background-color: #3d6b33;
  }
  .header a{
 text-decoration: none;
 color:white;
 font-size:13px;
  
  }
 
.container{
  box-shadow: -1px 3px 13px -1px rgba(0,0,0,0.44);
-webkit-box-shadow: -1px 3px 13px -1px rgba(0,0,0,0.44);
-moz-box-shadow: -1px 3px 13px -1px rgba(0,0,0,0.44);
}


    
   
.navbar-collapse{
  background-color: white !important;
}

.dropdown-menu{min-width:300px;}
/* ============ Navbar and Header Styles Ends============ */

/*Carousel starts*/
.carousel { height: calc(100vh - 100px);}
    .carousel-inner,.carousel-item { height: 100%;}
    .carousel-item { background-color: #000;}
    .carousel-item img { height: 100%; object-fit: cover; object-position: center;}
    
       /*carousel*/
       
       .carousel-inner{
         height:100%;
       }

   @media (max-width:780px) {
    .carousel { height: calc(100vh - 200px);}
    .carousel-inner,.carousel-item { height: 100%;}
    .carousel-item { background-color: #000;}
    .carousel-item img { height: 100%; object-fit: cover; object-position: center;}
    
       /*carousel*/
       
       .carousel-inner{
         height:100%;
       }
}
@media (max-width:490px) {
        
       }
       
}
.flag img{
  margin-top:-10px;
}

.navbar{
  z-index:900;
}
.main{
  height:1px;
}


.navbar{
  height:120px;
}
.navbar li{
  font-size: 13px;
  color:black !important;
}
.navbar a{
  font-size: 13px;
  color:black !important;
}

.dropdown-menu a{
  color:black;
  background-color: white;

}
.dropdown-menu{
  min-height:300px;

}
.dropdown-
.home .owl-carousel .item{
  height:250px;
  width:340px;
}
.home .owl-carousel img{
  height:200px;
  width:340px;
}
.blank{
  height:50px;
  width:100%;
}
.project{
  border-style: solid;
   border-width: thin;
   padding:20px;
   height:auto;
   width:100%;
}
.project1{
   border-style: solid;
   border-width: thin;
   padding:20px;
   height:auto;
   width:100%;
   background-color:#3d6b33;
   color:white;
}

.project img{
  height:100px;
  width:210px;
}
h3 {
  font-weight: bold;
}
h4{
  font-weight: bold;

}
h5{
  font-weight: bold;
}
h6{
  font-weight: bold;
}
p{
  font-weight: bold;
  font-size: 13px;
}
.project1 a{
  text-decoration: none;
  color:white;
}
.news img{
  height:200px;
}

.topic{
  width:100%;
  height:60px;
  background-color: #3d6b33;
  }
  .topic h4{
    text-align: center;
    color: white;
    padding-top:20px ;
  }

  /*********************** Demo - 16 *******************/
      .box16{
        margin-bottom:40px;
      }
      
      .box16 h3{
        color:white;
      }
      .box16 a{
        text-decoration:none;
      }
.box16{text-align:center;color:#fff;position:relative}
.box16 .box-content,.box16:after{width:100%;position:absolute;left:0}
.box16:after{content:"";height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.08) 69%,rgba(0,0,0,.76) 100%);top:0;transition:all .5s ease 0s}
.box16 .post,.box16 .title{transform:translateY(145px);transition:all .4s cubic-bezier(.13,.62,.81,.91) 0s}
.box16:hover:after{background:linear-gradient(to bottom,rgba(0,0,0,.01) 0,rgba(0,0,0,.09) 11%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.19) 20%,rgba(0,0,0,.29) 28%,rgba(0,0,0,.29) 29%,rgba(0,0,0,.42) 38%,rgba(0,0,0,.46) 43%,rgba(0,0,0,.53) 47%,rgba(0,0,0,.75) 69%,rgba(0,0,0,.87) 84%,rgba(0,0,0,.98) 99%,rgba(0,0,0,.94) 100%)}
.box16 img{width:100%;height:270px;}
.box16 .box-content{padding:20px;margin-bottom:20px;bottom:0;z-index:1}
.box16 .title{font-size:22px;font-weight:700;text-transform:uppercase;margin:0 0 10px}
.box16 .post{display:block;padding:8px 0;font-size:15px}
.box16 .social li a,.box17 .icon li a{border-radius:50%;font-size:20px;color:#fff}
.box16:hover .post,.box16:hover .title{transform:translateY(0)}
.box16 .social{list-style:none;padding:0 0 5px;margin:40px 0 25px;opacity:0;position:relative;transform:perspective(500px) rotateX(-90deg) rotateY(0) rotateZ(0);transition:all .6s cubic-bezier(0,0,.58,1) 0s}
.box16:hover .social{opacity:1;transform:perspective(500px) rotateX(0) rotateY(0) rotateZ(0)}
.box16 .social:before{content:"";width:50px;height:2px;background:#fff;margin:0 auto;position:absolute;top:-23px;left:0;right:0}
.box16 .social li{display:inline-block}
.box16 .social li a{display:block;width:40px;height:40px;line-height:40px;background:#6d3795;margin-right:10px;transition:all .3s ease 0s}
.box17 .icon li,.box17 .icon li a{display:inline-block}
.box16 .social li a:hover{background:#bea041}
.box16 .social li:last-child a{margin-right:0}
@media only screen and (max-width:990px){.box16{margin-bottom:30px}
}


/*start of footer*/

.footer-bg1{
  background-color: #3d6b33;
  margin-left: 0.5px;
  height:auto;
  padding:10px;
  
}
.ftr-color1 {
  color: white;
}
.ftr-color1 a{
  color:#A2A7A1 ;
  text-decoration: none;
  font-weight: lighter;
}
.ftr-color1 p{
  color: white;
 
  font-weight: lighter;
}
.ftr-color2 a{
  color: white;

/*border: 1px solid white;*/
  padding: 5px;
  padding-right: 40px;
  text-decoration: none;
  display:flex;
  margin-bottom: -24.3px;
  font-weight: lighter;
  font-size: 12.5px;
transition: 1s;

}
.ftr-color2 a:hover{
  padding-left: 25px;
}
.ftr-color2 {
  margin-top: -30px;
}
.ftr-color3 h3{
  margin-bottom: 40px;
  margin-top: 30px;
}

.ftr-4{
  color: white;
 
}
.ftr-6{
  margin-top: -7px;
}


.ftr-7 h3{
margin-top: 25px;

}
.ftr-7 p{
  line-height: 1;
}

/*end of footer*/
/*start of teams*/


    :root {
  --card-height: 40vw;
  --card-margin: 4vw;
  --card-top-offset: 1em;
  --numcards: 4;
  --outline-width: 0px;
}

#cards-2 {
  padding-bottom: calc(var(--numcards) * var(--card-top-offset)); /* Make place at bottom, as items will slide to that position*/
  margin-bottom: var(--card-margin); /* Don't include the --card-margin in padding, as that will affect the scroll-timeline*/
}

#card_1 {
  --index: 1;
}

#card_2 {
  --index: 2;
}

#card_3 {
  --index: 3;
}

#card_4 {
  --index: 4;
}

.card-teams {
  position: sticky;
  top: 0;
  padding-top: calc(var(--index) * var(--card-top-offset));
}

@supports (animation-timeline: works) {

  @scroll-timeline cards-element-scrolls-in-body {
    source: selector(body);
    scroll-offsets:
      /* Start when the start edge touches the top of the scrollport */
      selector(#cards) start 1,
      /* End when the start edge touches the start of the scrollport */
      selector(#cards) start 0
    ;
    start: selector(#cards) start 1; /* Start when the start edge touches the top of the scrollport */
    end: selector(#cards) start 0; /* End when the start edge touches the start of the scrollport */
    time-range: 4s;
  }

  .card-teams {
    --index0: calc(var(--index) - 1); /* 0-based index */
    --reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
    --reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
  }
  
  .card__content {
    transform-origin: 50% 0%;
    will-change: transform;

    --duration: calc(var(--reverse-index0) * 1s);
    --delay: calc(var(--index0) * 1s);

    animation: var(--duration) linear scale var(--delay) forwards;
    animation-timeline: cards-element-scrolls-in-body;
  }

  @keyframes scale {
    to {
      transform:
        scale(calc(
          1.1
          -
          calc(0.1 * var(--reverse-index))
        ));
    }
  }
}




/*start of contact*/
                .contact-1{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 25px;
            background-color: #3d6b33;
        }
        .contact-1 p{
            font-size: 15px;
        }
        .hr-contact{
            width: 11%;
            height: 2px;
    background: orange;
            color: orange;
        }
        .h2-contact{
            font-size: 20px;
            color: white;
        }
        .contact-items{
            display: flex;
            margin: 30px auto;
            flex-wrap: wrap;
            align-items: center;

        }
        .form-contact,.email-contact,.ph-contact{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 30%;
            margin: 30px auto;
            padding: 35px 15px;
            border-radius: 15px;
            text-align: center;
            min-width: 250px;
            background-color: white;
            
        }
        .form-contact{
            height: 250px;
            box-shadow: 1px 7px 7px 1px black;
            border: 1px solid white;
        }
        .email-contact{
            height: 250px;
            box-shadow: 1px 7px 7px 1px black;
            border: 1px solid white;
        }
        .ph-contact{
            height: 250px;
            box-shadow: 1px 7px 7px 1px black;
            border: 1px solid white;
        }
        .icon-contact{
            font-size: 40px;
        }
        .btn-contact1{
            padding-right: 20px;
            padding-left: 20px;
            border: none;
            margin-top: 10px;
            font-size: 17px;
        }
        .btn-contact2{

            border: none;
            margin-top: 26px;
            font-size: 17px;
        }
        .btn-contact3{

            border: none;
            margin-top: 7px;
            font-size: 17px;
        }
   
/*end of 1st part*/

input[type=text]{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.form-contact1 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  box-shadow: 1px 7px 7px 3px black;
}
.form-contact1 label{
    line-height: 4;
    margin-left: 10px;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
.p1{
  min-height:400px;
  width:100%;
  background-image:url(../img/component1.jpg);
}
.p2{
  height:400px;
  width:100%;
  background-image:url(../img/component2.jpg);
}
.p3{
  height:400px;
  width:100%;
  background-image:url(../img/component3.jpg);
}
.mark li{
 display:inline;
 padding-right:40px;
 color:white;
 font-weight: bold;
}
.mark{
  background-color:#3d6b33;
  height:40px;
}
.e1{
  height:400px;
  width:100%;
  background-image:url(../img/event1.jpg);
}
.e2{
  height:400px;
  width:100%;
  background-image:url(../img/event2.jpg);
}
.e3{
  height:400px;
  width:100%;
  background-image:url(../img/event3.jpg);
}
/*start of teams-1*/
.our-team{
    padding: 20px 15px 30px;
    background: #fff;
    border-radius: 15px;
    text-align: center;
}
.our-team .pic-teams{
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 10px;
    margin-bottom: 25px;
    transition: all 0.5s ease 0s;
}


.pic-teams img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.our-team .title{
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #2e282a;
    text-transform: uppercase;
    margin: 0 0 7px 0;
}
.our-team .post{
    display: block;
    font-size: 15px;
    color: #3d6b33;
    text-transform: capitalize;
    margin-bottom: 15px;
    font-weight: bold;
}
.our-team .social{
    padding: 0;
    margin: 0;
    list-style: none;
}
.our-team .social li{
    display: inline-block;
    margin-right: 5px;
}
.our-team .social li a{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 15px;
    color: #3d6b33;
    border: 1px solid #3d6b33;
    transition: all 0.5s ease 0s;
    text-decoration: none;
}
.our-team:hover .social li a{
    background: #3d6b33;
    color: #fff;
}



@media only screen and (max-width: 990px){
    .our-team{ margin-bottom: 30px; }
}
 .hr-teams1{
            width: 11%;
            height: 2px;
    background: orange;
            color: orange;
        }
.teams1-1{
           align-items: center;
            
            background-color: #3d6b33;
        }




.headi{
  height:60px;
  padding-top:20px;
  width:100%;
  text-align: center;
  color:white;
  background-color: #3d6b33;
}
.news{
  height:300px;
}

/*gallery*/
img{
  max-width: 100%;
}
.gallery{
  background-color: #dbddf1;
  padding: 80px 0;
}
.gallery img{
  background-color: #ffffff;
  padding: 15px;
  height:200px;
  width: 400px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  cursor: pointer;
}
#gallery-modal .modal-img{
  width: 100%;
}
*start of contact us*/


             .contact-1{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 25px;
            background-color: #3d6b33;
        }
        .contact-1 p{
            font-size: 15px;
        }
        .hr-contact{
            width: 11%;
            height: 2px;
    background: orange;
            color: orange;
        }
        .h2-contact{
            font-size: 20px;
            color: white;
        }
        .contact-items{
            display: flex;
            margin: 30px auto;
            flex-wrap: wrap;
            align-items: center;

        }
        .form-contact,.email-contact,.ph-contact{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 30%;
            margin: 30px auto;
            padding: 35px 15px;
            border-radius: 15px;
            text-align: center;
            min-width: 250px;
            background-color: white;
            
        }
        .form-contact{
            height: 250px;
            box-shadow: 1px 7px 7px 1px black;
            border: 1px solid white;
        }
        .email-contact{
            height: 250px;
            box-shadow: 1px 7px 7px 1px black;
            border: 1px solid white;
        }
        .ph-contact{
            height: 250px;
            box-shadow: 1px 7px 7px 1px black;
            border: 1px solid white;
        }
        .icon-contact{
            font-size: 40px;
        }
        .btn-contact1{
            padding-right: 20px;
            padding-left: 20px;
            border: none;
            margin-top: 10px;
            font-size: 17px;
        }
        .btn-contact2{

            border: none;
            margin-top: 26px;
            font-size: 17px;
        }
        .btn-contact3{

            border: none;
            margin-top: 7px;
            font-size: 17px;
        }
   
/*end of 1st part*/

input[type=text]{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.form-contact1 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  box-shadow: 1px 7px 7px 3px black;
}
.form-contact1 label{
    line-height: 4;
    margin-left: 10px;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}

/*end os contact us*/
.footer-bg1{
  min-height:450px;
}