*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

/* navigation bar */


/* .navi{
  background: rgba(0, 0, 0, 0.5) !important ; 
  
} */

.navi{
  height: 45px !important;
  width: 95% !important;
}
.name{
  padding-right: 15px !important;
  padding-left: 10px !important;
  color: white !important;
  font-size: 25px !important;
  font-weight: bold !important;
}
 .name:hover{
  color: rgb(220, 216, 216) !important;
}

.name1{
  /* color: black !important; */
  font-size: 20px !important;
  font-weight: 500 !important;
}
.name1:hover{
  color: red !important;
}
 .navbar  a{
  float: right;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  transition: 0.1s;
  font-weight: bold;
}

.navbar a::after{
  content: '';
  width: 0;
  height: 2px;
  background: red;
  display: block;
  transition: 0.2s linear;
}

.navbar  a:hover::after{
  width: 100%;
}

/* .navbar a:hover{
  color:black;
} */



.sub {
  background-color: red;
  border-radius: 25px;
}
.navbar a i{
  font-size: 30px;
}
.picture img{
  height: 60vh;
}

.b .btn {
  width: 12%;
  height: 6.5vh;
  position: absolute;
  bottom: 5%;
  left: 5%;
  background-color: red;
  color: white;
  font-size: 22px;
  border: none;
  /* cursor: pointer; */
  border-radius: 5px;
}

.btn i{
  padding-left: 5%;
  padding-right: 5%;
  text-align: center;
}


/* middle */
.bg{
  width: 100%;
  height: 13vh;
  background-color: black;
}
.bgrap{
  width: 95%;
  height: 10vh;
  margin: auto;
}
.bgrap h1{
  color: white;
  font-size: 28px;
  padding-top: 3%;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight:bold ;
}

.mid1 {
  width: 100%;
  padding-left: 3%;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  height: 50vh;
  /* padding: 0 35px; */
  background: black;
}
.wrapper {
  /* max-width: 1100px; */
  width: 100%;
  position: relative;
  
}



.wrapper .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((60% / 4));
  /* gap: 16px; */
  column-gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: 0;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel :where(.card, .img) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.carousel.no-transition {
  scroll-behavior: auto;
}

.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}

.carousel .card {
  scroll-snap-align: start;
  /* height: 340px; */
  height: 100%;
  list-style: none;
  background: black;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  max-width: 300px;
}

.card .img {
  width: 100%;
  /* height: 100%; */
  display: block;
  height: auto;
}

.card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15%;

  -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      
}
.card p{
  font-size: 15px;
  color: white;
}

.card img:hover {
  /* transition: 0.5s;
  margin-top: -30px; */
  cursor: pointer;

  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

 

.social{
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: left;
  font-weight: bold;
}

.card:hover .social {
  opacity: 1;
}
.social a{
  text-decoration: none;
  float: right;
  
}
.social a i{
  display: inline;
  font-size: 20px;
  color: white;
  
}










.bg1{
  width: 100%;
  height: 13vh;
  background-color: black;
}
.bgrap1{
  width: 95%;
  height: 10vh;
  margin: auto;
}
.bgrap1 h1{
  color: white;
  font-size: 28px;
  padding-top: 3%;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight:bold ;
}

/* footer */
.footer1{
  width: 100%;
  height: 15vh;
  background-color: black;
}
.line{
  padding-top: 5%;
  border-bottom: 1px solid white;
}


footer{
   
  width: 100%;
  background-color:black ;
  height: 35vh;
}

footer .footer_main{
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  
}

footer .footer_main .footer_tag{
  text-align: center;
  
}

footer .footer_main .footer_tag h2{
  color: white;
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: bold;
}

footer .footer_main .footer_tag p{
  margin: 1px 0;
  color: #ece3e3;
}

footer .footer_main .footer_tag i:hover{
  color: crimson;
}

footer .end{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}


.footer_tag img{
  width: 50%;
  height: 60%;
 
}
.icon i{
  font-size: 30px;
  color: #ece3e3;
  padding: 10px;
  margin-top: 30px;
}


/* footer images */
.fi{
  width: 100%;
  height: 15vh;
  background-color: black;
}
.firap{
  width: 92%;
  margin: auto;
  height: 15vh;
  background-color: black;
}
.firap img{
  width: auto;
  height: 40%;
  padding: 1px 35px ;
  /* padding-right: 75px; */
  color: #fff;
}



/* copyright */
.last_footer{
  width: 100%;
  background-color: black;
  height: 4vh;
}
.last_text{
  width: 20%;
  margin: auto;
}
.last_text  p{
  color: #ece3e3;
  font-weight: bold;
}