*{
     margin: 0;
     padding: 0;
 }
 body{
     background-color: rgb(233, 232, 232);
 }

 .header{
     background-color: white;
    position: sticky;
    top: 0;
     width: 100%;
     margin-top: 0.3%;
     display: flex;
     border-bottom: 4px solid yellow;
     z-index: 1;
 }
 .logo{
     margin-left: 4%;
     
 }
 .logo img{
     padding-top: 10px;
     padding-bottom: 10px;
     height: 110px;
     width: 110px;
 }
 /* Navbar container */
 .navbar {
     
     margin-left: 2%;
    overflow: hidden;
    font-family: Arial;
  }
  .header p{
    border: 2px solid black;
    margin-top: 1.5vh;
    color: #50c96d;
    font-weight: 600;
    padding: 5px;
    background-color: rgb(253, 253, 6);
    border-radius: 30px;
    animation: animate 0.5s linear infinite;
  } 
   
  @keyframes animate{
    0%{
      opacity: 0;
    }
    50%{
      opacity: 0.7;
    }
    100%{
      opacity: 0;
    }
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    font-weight: 500;
    color: black;
    text-align: center;
    padding: 26px 16px;
    text-decoration: none;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 22px;
    border: none;
    outline: none;
    color: black;
    padding: 26px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  .dropdown .dropbtn {
      color: black;
      z-index: 1;
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    color: rgb(233, 233, 6);
    border-top: 2px solid red;
    border-bottom: 2px solid red;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  } 
  
  .slideshow{
      height: 78vh;
  }

.slimg{
        border:7px solid yellow ;
        
        width: 100%;
        height: 73vh;
        background-image:url('./images/modi.jpg');
          background-size: 100% 100%;
          position: absolute;
          margin-top: 1%;
          
          animation: slider 13s infinite linear;
    
      }
      @keyframes slider{
        0%{background-image:url('./images/modi.jpg');}
        20%{background-image:url('./images/azadi75.jpg');}
    
          40%{background-image:url('./images/govtnot.jpg');}
          55%{background-image:url('./images/azadi75.jpg');}
    
          70%{background-image:url('./images/list.jpg');}
          85%{background-image:url('./images/water.jpg');}
    
      }
      
  .section{
      margin-top: 5%;
      
  }
 /* Style the links inside the sidenav */

 #mySidenav a {
   margin-top: 54%;
  position: absolute; /* Position them relative to the browser window */
  left: -120px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 220px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
  padding-left: 130px;
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#about {
  top: 20px;
  position: sticky;
  background-color: #04AA6D;
}

#blog {
  top: 90px;
  background-color: #2196F3; /* Blue */
}

#projects {
  top: 160px;
  background-color: #f44336; /* Red */
}

#contact {
  top: 230px;
  background-color: #555 /* Light Black */
}
  .us{
      display: flex;
      border-bottom: 3px solid rgb(248, 180, 6) ;
      
  }
.us h1{
    background-color: rgb(228, 166, 9);
    font-size: 35px;
    width: 3.5%;
    text-align: center;
    height: 6vh;
    color: white;
}
.us h2{
  text-shadow: 2px 2px  rgb(248, 247, 247);
    font-size: x-large;
    font-weight: 500;
    /* padding-top: 10px; */
    text-align: center;
    padding-top: 7px;
    background-color: rgb(248, 180, 6);
    width: 14vw;
    height: 6vh;
}
.about{
margin-left: 15%;
width: 65%;
}
.about p{
    
    padding: 20px;
    font-size: larger;
    color: rgb(66, 65, 65);
}
.content{
    background-color: white;
    display: flex;
    box-shadow: 10px 10px rgb(179, 179, 179);
}

  .boxes{
    display: flex;
    height: 300px;
    justify-content:center;
    
}
.boxes a{
  color: white;
  text-decoration: none ;
}
  .box1{
    transition: 0.5s;
  }
  .box5{
    margin-left: 2%;
    transition: 0.5s;
  }
  .box5 :hover{
    /* background-image: url('./images/em.jpg'); */
    background-size: 100% 100%;
    transform: scale(1.1);
  }
  .box6{
    margin-left: 2%;
    transition: 0.5s;
  }
  .box6 :hover{
    /* background-image: url('./images/em.jpg'); */
    background-size: 100% 100%;
    transform: scale(1.1);
  }
  .box7{
    margin-left: 2%;
    transition: 0.5s;
  }
  .box7 :hover{
    /* background-image: url('./images/em.jpg'); */
    background-size: 100% 100%;
    transform: scale(1.1);
  }
  .box8{
    margin-left: 2%;
    transition: 0.5s;
  }
  .box8 :hover{
    /* background-image: url('./images/em.jpg'); */
    background-size: 100% 100%;
    transform: scale(1.1);
  }
  .box2{
    margin-left: 2%;
    transition: 0.5s;
  }
  .box2 :hover{
    background-image: url('./images/em.jpg');
    background-size: 100% 100%;
  }
  .box3{
    margin-left: 2%;
    transition: 0.5s;
  }
  .box3 :hover{
    background-image: url('images/eml.jpg');
    background-size: 100% 100%;
  
  }
  .box4{
    margin-left: 2%;
    transition: 0.5s;
  }
  .box4 :hover{
    background-image: url('images/ente.jpg');
    background-size: 100% 100%;
    
  }
  .box1:hover{
      transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  
  }
  .box2:hover{
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  
  }
  .box3:hover{
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  
  }
  .box4:hover{
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  
  }
  
  
  
  .a{
  
    color:white;
  text-align: center;
     background-color: #f88f06;
     height: 350px;
     width: 250px;
     border-radius: 6px;
      transition: 0.4s; 
  }
  .a h4{
    margin-top: 15%;
  }
  .a img{
    margin-top: 40%;
    height: 70px;
    width: 95px;
  }
   .box1 :hover{
   background-image: url('images/edu.jpg');
   background-size: 100% 100%;
   
  
  
  }
  .boxes h4:hover{
    background-image: none;
  }
  .sides{
    display: flex;
    height: 390px;
    justify-content:center;
    margin-top: 2%;
    background-color: white;
  }
  .b{
    background-color: white;
  text-align: center;
  color:#274054;
     height: 370px;
     width: 180px;
     border-radius: 6px;
     margin-left: 2%;
     transition: 0.6s;
    
  }
  .b img{
    border-radius: 6px;
    width: 100%;
    height: 55%;
  }
  .b h2{
    margin-top: 20%;
  }
  .b:hover{
    background-color: #274054;
    color: white;
  
  }
  .scroller{
    margin-top: 8%;
    display: flex;
    margin-left: 12.5%;
    width: 70%;
    height: 400px;
    
  }
  .scroller h2{
    text-align: center;
  }
  .scroller li{
    list-style: none;
  }
  .sca{
    width: 300px;
    background-color: #04AA6D;
    padding: 10px;

  }
  .scb{
    background-color: #62ba37;
    margin-left: 2%;
    padding: 10px;
  }
  .scc{
    width: 300px;
    background-color: #50c96d;
    margin-left: 2%;
    padding: 10px;
  }
   /* Style all font awesome icons */
.iconse{
    margin-left: 92%;
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin-top: 15%;
    position: fixed;
    top: 0;
  }
  .fa{
    transition: 0.3s;
  }
  /* Add a hover effect if you want */
  .fa:hover {
    transform: scale(1.5);
    background-color: #0c0c0c;
    color: #e8c020;
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-facebook {
     
      padding: 15px;
      background-color: #e4e3e3;
      border-color: #efefef;
      color: #e8c020;
    border-radius: 100px;
  }
  
  /* Twitter */
  .fa-twitter {
    margin-top: 20%;
      padding: 15px;
      background-color: #e4e3e3;
      border-color: #efefef;
      color: #e8c020;
    border-radius: 50px;
  } 
  .fa-instagram {
    margin-top: 20%;
    padding: 15px;
    background-color: #e4e3e3;
    border-color: #efefef;
    color: #e8c020;
  border-radius: 50px;
} 
.fa-envelope {
    margin-top: 20%;
    padding: 15px;
    background-color: #e4e3e3;
    border-color: #efefef;
    color: #e8c020;
  border-radius: 50px;
} 
.article{
  display: flex;
  
  
}
 .z{
 background-color: #ffffff;
 margin-top: 2%;
 margin-left: 2%;
 border-radius: 20px;
 padding: 10px;
 border: 5px solid yellow;
 height: 100%;
 box-shadow: 10px 10px rgb(147, 146, 146);
}
.z p{
  padding: 10px 2px;
  box-shadow: #274054;
  text-shadow: #274054;
  font-size: medium;
}
.z img{
  box-sizing: border-box;
  width: 100%;
  height: 250px;
  border: 10px solid green;
}
.read{
  background-color:  rgb(228, 166, 9);
  
  width: 110px;
  height: 30px;
  font-size: large;
  font-weight: 500;
  box-shadow: 5px 5px rgb(196, 194, 194);
  transition: 0.5s;
}
.read a{
  text-decoration: none;
  color: black;
}
.read:hover{
  background-color: #f12838;
  transform: scale(1.2);
}
.hi-slide{
  position: relative;
  width: 754px;
  height: 292px;
  margin: 115px auto 0;

}
.hi-slide .hi-next,
.hi-slide .hi-prev{
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  background-color: white;
  color: black;
  transition: all 0.7s ;
  font-size: 20px;
  font-weight: bold;

}
.hi-slide .hi-next:hover,
.hi-slide .hi-prev:hover{
opacity: 1;
background-color: white;

}
.hi-slide .hi-prev{
  left: -70px;
}
.hi-slide .hi-prev::before{
  content: '<';
}
.hi-slide .hi-next{
  right: -70px;
}
.hi-slide .hi-next::before{
  content: '>';

}
.hi-slide > ul{
  list-style: none;
  position: relative;
  width: 754px;
  height: 292px;
  margin: 0;
  padding: 0;
}
.hi-slide > ul > li{
  overflow: hidden;
  position: absolute;
  z-index: 0;
  left: 377px;
  top: 147px;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 3px solid white;
  background-color: #333;
  cursor: pointer;

}
.hi-slide > ul > li > img{
  width: 100%;
  height: 100%;
  background-position: center;

}
.container{
  margin-top: 7%;
  max-width: 1000px;
  /* margin: 50px auto; */
  text-align: center;
}
.item p{
  margin-top: 3%;
  color: white;
  font-size: larger;
}

.container h1{
 
  font-size: 30px;
  font-weight: 500;
  text-align: center;
  position:relative;
  margin-bottom: 60px;
}
.container h1:after{
  content: '';
  position: absolute;
  width: 100px;
  height: 4px;
  background-color: #FF8159;
  bottom: -20px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.logo-slider .item{
  background-color: rgb(28, 54, 115);
  box-shadow: 0 4px 5px #cacaca;
  border-radius: 8px;
  padding: 15px;
  height: 160px;
  border: 2px solid #111;
}
.logo-slider .slick-slide{
  margin:15px;
  
}
.slick-dots li.slick-active button:before{
  color:#ff5722;
}
.sliick-dots li button:before{
  font-size: 12px;
}
.slick-next:before,
.slick-prev:before{
  color: #ff8159;
  font-size: 24px;
}
.item:hover{
  display: block;
  transition: all ease 0.3s;
  transform: scale(1.1) translateY(-5px);
} 
.sliders{
  height: 250px;
  margin: auto;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.slide-track{
  display: flex;
  width: calc(250px * 18);
  animation: scroll 70s linear infinite;
}
.slide-track:hover{
  animation-play-state: paused;
}
@keyframes scroll{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(calc(-250px * 9));
  }
}
.slidee{
  height: 50px;
  width: 100px;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}
.slidee img{
  width: 100%;
  transition: transform 1%;
}
.slidee img:hover{
  transform: translateZ(20px);
}
.sliders::before,
.sliders::after{
  content: "";
  height: 100%;
  position: absolute;
  width: 15%;
  z-index: 2;
}
.sliders::before{
  left: 0;
  top: 0;
}
.sliders::after{
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.item img{
  width: 100%;
  height: 130px;
  
}
.fotter{
  background-color: rgb(28, 54, 115);
  display: flex;
  justify-content:space-between;
  margin-left: 0%;
  width: 100%;
  border-top: 15px solid  #e8c020;
  padding-top: 20px;
  height: 260px;
  padding-left: 20px;
  color: white;
}
.fotter li{
  width: 200px;
  list-style: none;
  padding-top: 10px;
 
}

#slidesho {
  overflow: hidden;
  height: 400px;
  width: 750px;
  /* margin: 0 auto; */
  margin-left: 2%;
  
}
 
/* Style each of the sides
with a fixed width and height */
.slid {
  float: left;
  height: 510px;
  width: 560px;
}
 
.slide-numbe{
  padding-top: 22.5vh;
  text-align: center;
  /* padding-left: 20px; */
}
/* Add animation to the slides */
.slide-wrappe {
   
/* Calculate the total width on the
  basis of number of slides */
  width: calc(560px * 4);
 
/* Specify the animation with the
  duration and speed */
  animation: slide 15s ease infinite;
}
 
/* Set the background color
of each of the slides */
.slid:nth-child(1) {
  background: green;
}
 
.slid:nth-child(2) {
  background: pink;
}
 
.slid:nth-child(3) {
  background: red;
}
 
.slid:nth-child(4) {
  background: yellow;
}
 
/* Define the animation
for the slideshow */
@keyframes slide {
   
/* Calculate the margin-left for
  each of the slides */
  20% {
    margin-left: 0px;
  }
 
  40% {
    margin-left: calc(-560px * 1);
  }
 
  60% {
    margin-left: calc(-560px * 2);
  }
 
  80% {
    margin-left: calc(-560px * 3);
  }
}