html {
  position: relative;
  min-height: 100%;
}

/* fonts to be used  */
/* font-family: "Montserrat", sans-serif; */
/* font-family: "Playfair Display", serif; */



body {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: #666;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

:root{
  --black:#1D1E1C ;
    --red:#B93751;
    --white:#FFFFFF;
    --grey:#ACACAC;
    --light-grey:#F6F6F6;
    --blue:#0081C9;
}

a { text-decoration: none;}
a:hover { text-decoration: none;}

/* header style  */

.site-header{ top: 0 ;left: 0;  transition: all 0.6s ease; position: fixed; background: var(--white); width: 100%; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); z-index: 999; }
.toggler-bar:last-child{margin-bottom: 0;}
.nav-list {position: absolute; left: -100% ; top: 69px; height: 100vh; width: 80%; transition: left 0.6s linear;  padding: 22px; background-color: var(--black); } 
.nav-list ul li {list-style: none; color: var(--black);     padding-bottom: 22px; }
.nav-list ul li a{color: var(--white);}
.nav-list ul {padding: 0;}
.nav-bar{ display: flex; justify-content: space-between; align-items: center !important ;     padding: 10px 0;}
.nav-bar .site-logo {max-width: 100px;}
.nav-list.show{left: 0 ; transition: left 0.6s linear;}
.toggler-bar{width: 20px; height: 2px; margin-bottom: 4px; background-color: var(--black) ; display: block; transition: transform 0.3s ease;}
.nav-toggler.active .toggler-bar:nth-child(1){ transform: rotate(45deg);     margin-bottom: -1px;}
.nav-toggler.active .toggler-bar:nth-child(2){ display: none; }
.nav-toggler.active .toggler-bar:nth-child(3){ transform: rotate(-45deg); }
.nav-toggler.active .toggler-bar{background-color: var(--black);}
.site-header.scrolled {  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);  transition: all 0.6s ease;}



/* banner style  */
.main-banner .container {     padding-top: 30px; }
.main-banner .banner-data{color: var(--white); }
.banner-data h1{ margin-bottom: 15px; text-transform: capitalize; color: var(--white);}
.banner-data h1::before{ content: "";  position: absolute;  background: url("../images/banner-bg.png") no-repeat   ;  background-size: contain  ;  display: none;
position: absolute;  z-index: -1;  right: 58px;  width: 190px;  height: 71px;  top: 18px; }
.banner-img{ box-shadow: 0px 0px 15px #ccc;  border-radius: 20px; }

/* media quiries  */


.popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  padding: 40px 0; 
  box-sizing: border-box;
}



.popup-content {
  background-color: #fff;
  padding: 0px;
  /* border-radius: 10px; */
  position: relative;
  max-width: 90%;
  max-height: 90vh; 
  overflow: auto; 
  text-align: center;
  align-items: center;
}

.close-btn {
  width: 20px; 
  height: 20px;
  background-color: white;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px; 
  cursor: pointer;
  border-radius: 50%;
  /* border: 1px solid #ddd; */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  line-height: 1;
}


.close-btn:hover {
  background-color: var(--red);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


@media (min-width: 575px) {
  .container { max-width: 540px; }


  .popup-content {
  max-width: 70%;
  max-height: 90vh; 
}
}
@media (min-width: 768px) {
   .popup-content {
  max-width: 55%;
  max-height: 90vh; 
}

  .container { max-width: 720px; }
  .banner-img{ border-radius: 48px; }
}
@media (min-width: 992px) {

  .popup-content {
  max-width: 46%;
  max-height: 90vh; 
}

  .close-btn {
  width: 30px;
  height: 30px;
  font-size: 26px; 
}
  
  .banner-data h1::before{display: block;}
.container { max-width: 960px; }
.site-header{box-shadow: none;}
.nav-list ul li a{color: var(--black);}
.toggler-bar{display: none;}
.nav-list{position: unset; height: auto; background-color: var(--white); }
.nav-list ul {display: flex ; justify-content: flex-end; gap: 40px;}
.nav-list ul li {padding: 0; position: relative;}
.nav-list ul li:hover a,
.nav-list ul li.current-menu-item a{color: var(--red);}
.nav-list ul li::after{  content: ""; position: absolute; width: 0;  background-color: var(--red); height: 2px;  left: 50%; bottom: -13px;
 transform: translateX(-50%); transition: width 0.5s ease ; }
.nav-list ul li:hover::after,
.nav-list ul li.current-menu-item:after{  width: 80%; transition: width 0.5s ease ; }

.main-banner .banner-data{  text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);   }
.banner-heading {position: relative; }
.banner-data h1 { z-index: 2;  position: relative;}
.nav-bar {padding: 20px 0; }
.nav-list { padding: 0; }
.main-banner .container {    padding-top: 14px;}
}

@media (min-width: 1200px) {

   .popup-content {
  max-width: 39%;
  max-height: 90vh; 
}
 
  .container {  max-width: 1140px; }
  .nav-bar .site-logo {max-width: 125px;}
  .nav-list ul {font-size: 15px;}
  .banner-data h1 {margin-bottom: 20px;}
  .banner-data h1::before { width: 248px; height: 104px; top: 29px;}
}
@media (min-width: 1400px) {
   .popup-content {
  max-width: 40%;
  max-height: 90vh; 
}
  .container { max-width: 1320px; }
}
@media (min-width: 1600px) {

 .popup-content {
  max-width: 42%;
  max-height: 90vh; 
}

  .container { max-width: 1560px; }
  .nav-list ul {font-size: 16px;}
  .nav-bar .site-logo {max-width: unset;}
  .banner-data h1 {margin-bottom: 40px;}
  .banner-data h1::before { width: 341px; height: 135px;}
}