* {
    box-sizing: border-box;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}



.container {
    width: 90%;
    max-width: 1200px; /* Limits size on big screens */
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap; /* This is key for responsiveness */
    gap: 20px;
}

.column {
    flex: 1; /* Grows to fill space */
    min-width: 300px; /* Forces wrap when screen is smaller than 300px */
}



/* --- RESPONSIVE PATCH FOR MOBILE --- */

@media screen and (max-width: 768px) {
  /* 1. Reset Containers: Ensure they don't overflow the screen */
  .container, 
  .container-fluid {
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* 2. Grid Fix: Force columns to stack vertically on small screens */
  .row {
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Force all column types (col-md-8, col-6, etc.) to full width */
  [class*="col-"] {
    width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
padding: 10px 0px 0px 0px !important;
  }

  /* 3. Typography: Scale fonts so they aren't too small or too huge */
  h1, .h1 { font-size: 1.8rem !important; }
  h2, .h2 { font-size: 1.6rem !important; }
  h3, .h3 { font-size: 1.4rem !important; }
  p { font-size: 1rem !important; line-height: 1.6 !important; }

  /* 4. Images: Ensure all images are fluid */
  img {
    height: auto !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
  }

  /* 5. Navigation/Lists: Remove horizontal padding that pushes content off-screen */
  ul, ol {
    padding-left: 1.2rem !important;
  }

  /* 6. Form elements: Make inputs/buttons full width for easier tapping */
  input, button, select, textarea {
    width: 100% !important;
    margin-bottom: 10px;
  }

  /* 7. Tables: Enable horizontal scrolling for data tables */
  .table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Extra Small Devices (Phones under 480px) */
@media screen and (max-width: 480px) {
  .display-1 { font-size: 2.5rem !important; }
  .display-2 { font-size: 2.2rem !important; }
  .display-3 { font-size: 2rem !important; }
}



@media only screen and (min-width: 1200px) {



.col-sm-12.col-md-6.align-items-center.img-verti {
  position: absolute;
  overflow: hidden;
  align-items: center;
  left: 23%;
  top: 84%;
}


.logo-box {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 38%;
  z-index: 9999;
  top: 91.7%;
  background: transparent;
}




	
}





/* Tablet Styles (Screens smaller than 992px) */
@media (max-width: 992px) {
    .sidebar {
        display: none; /* Hide non-essential sidebars on tablets */
    }



h4.my-3 {
  color: #000000;
  font-weight: bold;
  padding-top: 0px;
  font-size: 50px;
  font-family: Dancing Script;
  text-transform: uppercase;
  text-align: left;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}


section {
  padding: 30px 00px;
}


.page-section {
  padding: 7rem 0rem 0rem 0rem;
  min-height: 500px;
}





.col-sm-12.col-md-6.align-items-center.img-verti {
  position: absolute;
  overflow: hidden;
  align-items: center;
  left: 23%;
  top: 84%;
}










}

/* Mobile Styles (Screens smaller than 768px) */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column; /* Stack navigation links vertically */
    }
    
    h1 {
        font-size: 1.8rem; /* Scale down large headings */
    }

    .hide-mobile {
        display: none;
    }








.navbar-toggler.collapsed {
  width: 14% !important;
}


.masthead-subheading {
  margin-top: -40px !important;
  margin-bottom: 0px !important;
}





header.masthead .masthead-heading {
  font-size: 1.8rem;}


  header.masthead {
  padding-top: 10.5rem;
  padding-bottom: 0px;
  text-align: center;
  color: #fff;
  background-image: url("../assets/img/Baner-Bagira.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  margin-top: -100px;
}


.page-section {
  padding: 3rem 0rem 3rem 0rem;
  min-height: 500px;
}


.section-subheading.text-muted {
  padding-bottom: 0px;
  margin-bottom: 30px !important;
}



#scrolling {
  padding: 40px 0px;
}

h4.my-3 {
    color: #000000;
  font-weight: bold;
  padding-top: 00px;
  font-size: 25px;
  font-family: Dancing Script;
  text-transform: uppercase;
  text-align: left;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;

}



img.vig-img {
  width: 69%;
  margin-left: 40px;
  float: left;
  margin-top: -25px;
}


.madebeer h2 {
  color: #000;
  font-size: 29px !important;
  line-height: 0.9;
}


.col-md-8.madebeer span {
  font-size: 26px !important;
}



section#about {
  min-height: 900px;
  background: #0a0db3;
  position: relative;
  text-align: left !important;
  padding: 2rem 0rem 8rem 0rem;
}


.col-sm-12.col-md-6.align-items-center.img-verti {
  position: absolute;
  overflow: hidden;
  align-items: center;
  left: 2%;
  top: 89%;
}



.col-md-12.col-sm-12.bagira_txt h2 {
  text-align: center;
  color: #000000;
  text-transform: capitalize !important;
  font-size: 42px !important;
  letter-spacing: 4px;
  padding-top: 0px;
  line-height: 1.2;
}


.reveal.slide-top.active span {




	font-size: 80px !important;
color: #0a0cb3;
line-height: 1.4;


	margin-top: ;
}



section#feature {
  background: url("../assets/img/home/bg.jpg");
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: auto;
  padding: 10rem 0rem 0rem 0r !important;
  min-height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 0px;
  background-attachment: fixed;
}



.logo-box {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 8%;
  z-index: 9999;
  top: 90.3%;
  background: transparent;
}


.comi-txt h4 {
  font-size: 32px;
  margin-top: 5px;
  padding-left: 13px;
}


.comi-txt h3 {
  font-size: 55px;
  line-height: 1;
  color: #0a0eb5;
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 13px;
}


.comi-txt h5 {
  font-size: 20px;
  padding-left: 13px;
}


.col-md-6.col-sm-6.comi-txt.reveal.slide-right.active p {
  padding-left: 13px;
}


.news-heading {
  font-size: 22px !important;
  line-height: 1.4;
  color: #fff;
  font-weight: normal;
  padding-top: 80px;
}


.bt {
  margin-left: 0px;
  font-size: 16px;
  display: inline-block;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background-color: #f37801;
  color: #fff;
}



#commitment {
  width: 90%;
}


.navbar-toggler {
  max-width: 90px;
}

.page-section {
  padding: 7rem 0rem 0rem 0rem;
  min-height: 500px;
}

.logo-box {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 32%;
  z-index: 9999;
  top: 91.7%;
  background: transparent;
}


}





@media only screen and (max-width: 600px) {

.navbar-toggler.collapsed {
  width: 14% !important;
}


.masthead-subheading {
  margin-top: -40px !important;
  margin-bottom: 0px !important;
}





header.masthead .masthead-heading {
  font-size: 1.8rem;}


  header.masthead {
  padding-top: 10.5rem;
  padding-bottom: 0px;
  text-align: center;
  color: #fff;
  background-image: url("../assets/img/Baner-Bagira.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  margin-top: -100px;
}


.page-section {
  padding: 3rem 0rem 3rem 0rem;
  min-height: 500px;
}


.section-subheading.text-muted {
  padding-bottom: 0px;
  margin-bottom: 30px !important;
}



#scrolling {
  padding: 40px 0px;
}

h4.my-3 {
    color: #000000;
  font-weight: bold;
  padding-top: 00px;
  font-size: 25px;
  font-family: Dancing Script;
  text-transform: uppercase;
  text-align: left;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;

}



img.vig-img {
  width: 69%;
  margin-left: 40px;
  float: left;
  margin-top: -25px;
}


.madebeer h2 {
  color: #000;
  font-size: 29px !important;
  line-height: 0.9;
}


.col-md-8.madebeer span {
  font-size: 26px !important;
}



section#about {
  min-height: 900px;
  background: #0a0db3;
  position: relative;
  text-align: left !important;
  padding: 2rem 0rem 8rem 0rem;
}


.col-sm-12.col-md-6.align-items-center.img-verti {
  position: absolute;
  overflow: hidden;
  align-items: center;
  left: 2%;
  top: 89%;
}



.col-md-12.col-sm-12.bagira_txt h2 {
  text-align: center;
  color: #000000;
  text-transform: capitalize !important;
  font-size: 42px !important;
  letter-spacing: 4px;
  padding-top: 0px;
  line-height: 1.2;
}


.reveal.slide-top.active span {




	font-size: 80px !important;
color: #0a0cb3;
line-height: 1.4;


	margin-top: ;
}



section#feature {
  background: url("../assets/img/home/bg.jpg");
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: auto;
  padding: 10rem 0rem 0rem 0r !important;
  min-height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 0px;
  background-attachment: fixed;
}



.logo-box {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 8%;
  z-index: 9999;
  top: 90.3%;
  background: transparent;
}


.comi-txt h4 {
  font-size: 32px;
  margin-top: 5px;
  padding-left: 13px;
}


.comi-txt h3 {
  font-size: 55px;
  line-height: 1;
  color: #0a0eb5;
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 13px;
}


.comi-txt h5 {
  font-size: 20px;
  padding-left: 13px;
}


.col-md-6.col-sm-6.comi-txt.reveal.slide-right.active p {
  padding-left: 13px;
}


.news-heading {
  font-size: 22px !important;
  line-height: 1.4;
  color: #fff;
  font-weight: normal;
  padding-top: 80px;
}


.bt {
  margin-left: 0px;
  font-size: 16px;
  display: inline-block;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background-color: #f37801;
  color: #fff;
}



#commitment {
  width: 90%;
}


.navbar-toggler {
  max-width: 90px;
}




.page-section {
  padding: 7rem 0rem 0rem 0rem;
  min-height: 500px;
}

section {
  padding: 10px 30px;
}


}