@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Jost:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

.top-bar { display: flex; justify-content: flex-end; align-items: center; background: linear-gradient(90deg, rgba(203, 27, 32, 1) 0%, rgb(183 38 49) 51%, rgb(173 32 32) 100%); color: #fff;padding: 10px 50px; position: relative; border-bottom-left-radius: 18px; /* Left side rounded */ width: 77%; /* Adjust the width as needed */ margin-left: auto; /* Align it to the right */}

/* If you want the stripe to start from the left side with a smooth curve */

/* Header Fixed - Single Class */

/* Basic Reset for Menu */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
}

a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

/* -------------------- DROPDOWN -------------------- */

.dropdown {
  position: relative;
}

.dropdown > a {
  color: #2C5E33;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown > a::after {
  content: "▼";
  font-size: 10px;
  margin-left: 6px;
  transition: transform 0.3s ease;
}

/* Dropdown menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  min-width: 180px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 8px 0;
  z-index: 1000;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 16px;
  font-size: 15px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s ease;
}

.dropdown-menu li a:hover {
  background-color: #fff;
  color: #000;
}

/* Show dropdown on hover for desktop */
@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }

  .dropdown:hover > a::after {
    content: "▲"; /* Show up arrow when active */
    transform: rotate(180deg);
  }
}

/* Show dropdown when clicked for mobile */
@media (max-width: 767px) {
  .dropdown.active .dropdown-menu {
    display: block;
  }

  .dropdown > a::after {
    content: "▼"; /* Default down arrow */
  }

  .dropdown.active > a::after {
    content: "▲"; /* Up arrow when active */
    transform: rotate(180deg);
  }
}

/* JavaScript to handle mobile dropdown click */


.header-fixed {
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 10001;
 background: #fff;
}

/* Top Bar Styling */
.header-fixed .top-bar {
 display: flex;
 justify-content: space-between;
}

.header-fixed .navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 50px;
 background: #fff;
}

body {
 padding-top: 100px; /* Adjusted for fixed header height */
}


.top-bar::before {
 content: "";
 position: absolute;
 left: -30px; /* Adjust this based on curve size */
 top: 0;
 width: 30px;
 height: 100%;
}

.top-bar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: red;
 padding: 10px 20px;
}

.top-bar .contact-info{
 display: flex;
 gap: 20px;
 color: #fff;
 align-items: center;
 justify-content: flex-start; /* Left side shift */
 font-family: 'jost';
 font-size: 14px;
 margin-left: 20px;
}

.top-bar .contact-info span{
 display: flex;
 align-items: center;
 gap: 5px;
 font-family: 'jost';
 font-weight: bold;
}

.top-bar .contact-info span i{
 padding: 2px;
}

.top-bar .social-icons {
 display: flex;
 gap: 17px;
 margin-left: auto;
 margin-right: 45px;
}

.top-bar .social-icons a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 25px; /* Circle size */
 height: 25px;
 background: white; /* White circular background */
 color: #6E0F0F; /* Red icon color */
 text-decoration: none;
 font-size: 12px;
 border-radius: 50%; /* Makes it a circle */
 transition: 0.3s ease-in-out;
}

.top-bar .social-icons a:hover {
 background: #fff;
 color: #900; /* Darker red on hover */
 transform: scale(1.1); /* Slight zoom effect */
}

.btn {
 background: linear-gradient(90deg, rgba(203, 27, 32, 1) 0%, rgb(183 38 49) 51%, rgb(173 32 32) 100%);
 color: #fff;
 padding: 9px 12px;
 border-radius: 20px;
 text-decoration: none;
 font-size: 14px;
 margin-top: -2px;
}

.menu-toggle {
 display: none;
 font-size: 25px;
 background: transparent;
 border: none;
 cursor: pointer;
 color: white;
}

/* Mobile Menu */
.mobile-menu {
 display: none;
 position: fixed;
 top: 0;
 right: -100%;
 width: 250px;
 height: 100vh;
 background: #CB1B20;
 padding: 20px;
 transition: right 0.4s ease-in-out;
 box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
}

.mobile-menu.active {
 right: 0;
}

.mobile-menu ul {
 list-style: none;
 text-align: left;
}

.mobile-menu ul li {
  margin: 15px 0;
}

.mobile-menu ul li a:hover {
 color: #f4f4f4;
 text-decoration: underline;
}

.mobile-menu .close-btn {
 background: white;
 color: #CB1B20;
 border: none;
 font-size: 22px;
 padding: 5px 10px;
 cursor: pointer;
 position: absolute;
 right: 10px;
 top: 10px;
 border-radius: 50%;
}

/* Dark Overlay */
.overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 z-index: 999;
}

.overlay.active {
 display: block;
}
/* Responsive */
@media (max-width: 768px) {
    .navbar ul {
        display: none;
    }

    .menu-toggle {
        display: block;
    }
    .header-fixed .top-bar {
    display: flex;
    justify-content: space-between;
    display: none;
    }
    .header-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
   }
   .header-fixed .navbar{
     padding: 30px 50px;
   }
}


.navbar img {
width: 178px; /* Adjust logo size */
margin-top: 0;
}

.navbar li {
display: inline-block;
}

.navbar li a {
text-decoration: none;
color: #333;
font-weight: 600;
font-family: 'Poppins', sans-serif;
font-size: 15px;
padding: 7px 10px;
transition: 0.3s;
}


.btn {
background: #c00;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
text-decoration: none;
font-size: 14px;
transition: 0.3s ease;
}

.btn:hover {
color: #fff;
background: linear-gradient(90deg, rgb(129 151 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
}

.menu-toggle {
display: none;
font-size: 25px;
background: transparent;
border: none;
cursor: pointer;
color: #c00;
}

/* Mobile Menu */
.mobile-menu {
 display: none;
 position: fixed;
 top: 0;
 right: -100%;
 width: 250px;
 height: 100vh;
 background: #CB1B20;
 padding: 20px;
 transition: right 0.4s ease-in-out;
 box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
}

.mobile-menu.active {
 right: 0;
}

.mobile-menu ul {
 list-style: none;
 text-align: left;
}

.mobile-menu ul li {
  margin: 15px 0;
}

.mobile-menu ul li a:hover {
 color: #f4f4f4;
 text-decoration: underline;
}

.mobile-menu .close-btn {
 background: white;
 color: #CB1B20;
 border: none;
 font-size: 22px;
 padding: 5px 10px;
 cursor: pointer;
 position: absolute;
 right: 10px;
 top: 10px;
 border-radius: 50%;
}

/* Dark Overlay */
.overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 z-index: 999;
}

.overlay.active {
 display: block;
}
/* Responsive */
@media (max-width: 768px) {
    .navbar ul {
        display: none;
    }

    .menu-toggle {
        display: block;
    }
    .header-fixed .top-bar {
    display: flex;
    justify-content: space-between;
    display: none;
    }
    .header-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
   }
   .header-fixed .navbar{
     padding: 30px 50px;
   }
}


.navbar img {
width: 178px; /* Adjust logo size */
margin-top: 0;
}

.navbar  li {
display: inline-block;
}

.navbar  li a {
text-decoration: none;
color: #333;
font-weight: 600;
font-family: 'Poppins', sans-serif;
font-size: 15px;
padding: 7px 10px;
transition: 0.3s;
}

.navbar a:hover {
color: #fff;
background-color: #B0CB1F;
border-radius: 10px;
}

.btn {
background: #c00;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
text-decoration: none;
font-size: 14px;
transition: 0.3s ease;
}

.btn:hover {
color: #fff;
background: linear-gradient(90deg, rgb(129 151 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
}

.menu-toggle {
display: none;
font-size: 25px;
background: transparent;
border: none;
cursor: pointer;
color: #c00;
}

/* Mobile Menu */
.mobile-menu {
display: none;
position: fixed;
top: 0;
left: -100%;
width: 250px;
height: 100vh;
background: #c00;
padding: 20px;
transition: left 0.3s ease-in-out;
}

.mobile-menu ul {
list-style: none;
padding: 0;
text-align: left;
margin-top: 50px;
}

.mobile-menu ul li {
/*margin: 22px 12px;
margin-top: 30px;*/
margin: 0px;
margin-top: 2px;
}
.sb_menus{
    margin-top:5px !important;
}

.mobile-menu ul li a {
color: white;
text-decoration: none;
font-size: 18px;
font-family: 'Bree Serif';
}

.mobile-menu .close-btn {
background: white;
color: #c00;
border: none;
font-size: 17px;
padding: 7px 10px;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
border-radius: 119%;
}

/* Responsive CSS */
@media (max-width: 768px) {
    .navbar ul {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .navbar img {
        width: 120px;
    }

    .btn {
        display: none;
    }
}

@media (max-width: 768px) {
    .navbar ul {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .navbar img {
        width: 120px;
    }

    .btn {
        font-size: 12px;
        padding: 8px 15px;
    }
}



@media (max-width: 768px) {
    .top-bar {
        display: none;
    }

    .top-bar .contact-info {
        flex-direction: column; /* Stack info in mobile */
        text-align: center;
        font-size: 12px; /* Thoda chhota font */
        gap: 5px;
    }

    .top-bar .social-icons {
        margin-left: 0; /* Center align */
        justify-content: center;
        margin-top: 5px;
    }

    .top-bar .social-icons a {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .navbar {
        padding: 10px 20px; /* Navbar spacing fix */
    }

    .navbar img {
        width: 160px;
        top: 14px;
        margin-left: -26px;
    }

    .btn {
        font-size: 12px;
        padding: 8px 12px;
        margin-left: auto; /* Proper align */
    }
}

@media (max-width: 768px) {
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px 20px;
        position: relative;
    }

    .btn {
        font-size: 12px;
        padding: 8px 15px;
        margin-right: 10px; /* Thoda gap de diya */
    }

    .menu-toggle {
        display: block;
        font-size: 22px;
        background: none;
        border: none;
        cursor: pointer;
        color: #fff;
        padding: 15px;
        background: #d62f2f;
        position: absolute;
        border-radius: 25px;
        right: 10px;
        top: 42%;
        transform: translateY(-50%);
    }

    .mobile-menu {
       display: none;
       position: fixed;
       top: 0;
       left: -250px;
       width: 250px;
       height: 100vh;
       background: #c00;
       padding: 20px;
       transition: left 0.3s ease-in-out;
       z-index: 9999; /* Sabse upar le aaya */
}

/* Dark overlay jab menu khule */
.mobile-menu.active {
left: 0;
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9998; /* Mobile menu se ek level neeche */
}


/* Ensure dropdown links are visible on hover in mobile menu */
.mobile-menu .dropdown-menu li a {
  color: #333; /* default text color */
  display: block;
  padding: 10px;
  text-decoration: none;
}

/* On hover – change background but keep text white */
.mobile-menu .dropdown-menu li:hover {
  background-color: #d62f2f; /* red or your theme color */
}

.mobile-menu .dropdown-menu li:hover a {
  color: #fff; /* make sure text turns white on hover */
}
}