@import url('https://fonts.googleapis.com/css2?family=Edu+QLD+Hand:wght@400..700&display=swap');

.video-banner { position: relative;  width: 100%; height: 100vh;  overflow: hidden; }
.video-banner video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%;  width: auto;
      height: auto;   z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.banner-content { position: relative; z-index: 2; color: white;  text-align: center; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.video-banner::after {content: "";  position: absolute; top: 0; left: 0; width: 100%; height: 100%;   background: rgba(255, 255, 255, 0.4); 
      z-index: 1; } */

.c_navbar{position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}

.responsive-bar{ display: none;}
nav{  width: 100%; position: fixed; top: 0; left: 0; height: 100px; padding: 10px;  box-sizing: border-box; transition: .5s; z-index: 999;}
nav.black{ background: rgba(252, 237, 237, 0.8); height: 80px;  padding: 10px 50px;}
nav .logo{ float: left;}
nav .logo img{ height: 50px;  transition: .5s;}
nav.black .logo img{ height: 60px;}
nav > ul{ /* width: 80%; */ margin: 0 auto;  padding: 0;  float: right;}
nav > ul > li{ list-style: none; display: inline-block;}
nav > ul > li > a:hover{ background: #a84942;  color: #fff;}
nav > ul > li > a{ color: #a84942; text-decoration: none; line-height: 80px; padding: 5px 10px; transition: .5s; font-weight: 600;}
nav.black > ul > li > a{  line-height: 60px;}
.active{ background: #a84942; color: #fff; border-radius: 20px; padding: 7px 20px; }

.banner-content h1{ font-size: 4rem; color: #ffffff; font-family: "Edu QLD Hand", cursive; }
.banner-content p{ font-size: 5rem; color: #424242;font-size: 1.5rem; line-height: 1.6; margin-top: 20px; max-width: 800px; margin: 0 auto; }
.section{ padding: 100px 0;}
.footer{position: relative;}
.footer_cont{position: absolute; bottom: 0; left: 0; width: 100%;  color: #fff;font-size: 14px; z-index: 555;}
ul{list-style: none; margin: 0; padding: 0;}
.social-icons li{font-size: 20px; color: #fff; margin-right: 15px;}
.social-icons li a{font-size: 20px; color: #fff;}
.heading2{ font-size: 3rem; color: #a84942; font-weight: 600; margin-bottom: 20px; text-align: center;font-family: "Edu QLD Hand", cursive;  }
.section1 p{ font-size: 20px; line-height: 1.6; margin-top: 30px; max-width: 800px; margin: 0 auto; text-align: center; color: #424242; }
.section2 img{ height: 300px; max-width: 600px;  position: relative; z-index: 10;  }
.section2 h3{ font-size: 2rem; color: #a84942; font-weight: 600; margin-top: 20px; text-align: center; font-family: "Edu QLD Hand", cursive; }


.section1 ,.section2 ,.section3 ,.section4, .section5 ,.section6 ,.section7 ,.section8{  padding: 100px 0; }
.section4 .card img{width: 100px; margin: 15px auto }
.section4{text-align: center;}
.btn-primary{background: #a84942; color: #fff; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; transition: background .3s;}
.btn-primary:hover{background: #8b9994; color: #fff; text-decoration: none;}
.card1{
  width:100%;
  height: 300px;
  background-color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 35px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  z-index: 1;
}

.card1 img {
  position: relative;
  color: #262626;
  transition: .5s;
  z-index: 900;
}

.card1:hover img {
  color: #fff;
  filter: brightness(0) invert(1);

  transform: rotateY(360deg);
}

.card1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #a84942;
  transition: .5s;
  z-index: 2;
}

.card1:hover:before {
  top: 0;
}

.card:before{
  background: #a84942;
}

.card2:before{
  background: #554c1b;
}

.card3:before {
  background: #8b9994;
}

.card4:before {
  background: #a84942;
}



@media(max-width:768px){


.responsive-bar{ display: block; width: 100%;  height: 60px;  background: #262626; position: fixed;  top: 0; left: 0; padding: 5px 20px;
        box-sizing: border-box;  z-index: 1;}
.responsive-bar .logo img{ float: left; height: 50px; }
.responsive-bar .menu h4{ float: right;  color: #fff;  margin: 0; padding: 0; line-height: 50px;  cursor: pointer; text-transform: uppercase;   }
    nav{ padding: 0;}
    nav,  nav.black{ background: #262626; height: 60px; padding: 0;  }
    nav .logo{ display: none; }
    nav ul{ position: absolute; width: 100%;  top: 60px; left: 0;  background: #262626;   float: none;   display: none; }
    nav ul.active{ display: block; }
    nav ul li{ width: 100%; }
    nav ul li a{ display: block;  padding: 0; width: 100%;  text-align: center; line-height: 30px !important; color: #fff;  } 
    nav > ul{ width: 100%;   display: none;  }
    nav > ul > li{ display: block; text-align: center;  }
    .active{ display: block; }
}