/* font and color  */
:root {
  --font-1: 'Montserrat', sans-serif;
  --font-2: 'Cabin', sans-serif;
  --font-3: "Kristi", sans-serif;
  --font-4: "Playfair Display", serif;
  --color-1: #354155;
  --color-2: #ffcc05;
  --color-3: #bbb;
  --color-4: #303030;
  --color-5: #818181;
  --color-6: #383838;
  --color-7: #3f3f3f;
  --color-8: #808285;
  --color-9: #b7b7b7;
  --color-10: #c2c2c2;
  --color-11: #1c1c1c;
  /* man eye hadapo colours methana na. akai me number 1 dunne */
  --color-20: #012246;
  --color-21: #de9b26;
  --color-22: #fff;
  --color-23:#6f6c5b;
/* after resived logo */
  --color-24: #de7105;
  --color-25: #eeb618;
  --color-26: #1b2817;
  --color-27:#798824;


}
/* common css  */
*{margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;}

.w{width: 1200px;margin: 0 auto;}
/* .w{width: 96%;margin: 0 2%;} */
.fsb{display: flex;justify-content: space-between;}
.fsa{display: flex;justify-content: space-around;}
li{list-style: none;}
a{text-decoration: none;font-family: var(--font-1);color: #ffffff; font-size: 12px;text-transform: uppercase;letter-spacing: 2px;font-weight: 700;cursor: pointer;}
a:hover{color: var(--color-25);}
body{background-image: url(../images/background.webp);}
p{font-family: var(--font-2); color: var(--color-4);}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-4);
}
/* button 01  */
/* .za2{text-decoration: none;color: #ffffff;font-family: var(--font-1);text-transform: uppercase;font-weight: 700;letter-spacing: 2;background: var(--color-2);padding: 18px 50px;font-size: 12px;display: block;width: fit-content;transition:0.5s all;} */
.za2{ display: block;
  width: fit-content;
  margin: 20px auto;
  padding: 15px 40px;
  font-size: 15px;
  background-color: var(--color-26);
  color: white;
  border-radius: 5px;
  transition:0.5s all;}
.za2:hover{background-color: var(--color-24); color: #fff;}
/* see more 01 */
.za1{color: var(--color-2);padding-bottom: 3px;position: relative;}
.za1::before{content: "";width: 80px;height: 2px;background: var(--color-2);position: absolute;top: 20px;transition: 0.4s;}
.za1::after{display: none;content: "";width: 0px;height: 2px;background: var(--color-2);position: absolute;top: 20px;left: 0;transition: 0.4s;}
.za1:hover::before{width: 0px;}
.za1:hover::after{width: 80px;display: initial;}
.za3{color: var(--color-26);}
.za3::before {background: var(--color-26);}
/* header */
#hd{display: flex;flex-direction: column;position: fixed;width: 100%;top: 0px;z-index: 15;}
/* changed...............feb 23 */
#d1{background: var(--color-26) ;color: #ffffff; font-size: 10px;padding: 8px 0px;font-family: var(--font-1);font-weight: 800;text-transform: uppercase;letter-spacing: 1px;}
.s30{color: var(--color-22);}
#d3, #d4, #a1{align-items: center;}
#d4{display: flex; gap: 8px;}
#a1{display: flex;gap: 15px;}
.i1{width: 25px; height: 25px; margin-right: 7px;}
#s11 { border-radius: 6px;background: #ffffff8f;display: none;color: #137004;font-size: 30px;padding: 0 7px;}
#bt1{background:#2e2e2e;border: none;color: #ffffff;letter-spacing: 2px;text-transform: uppercase;font-size: 10px;font-weight: 900;cursor: pointer;}
#d7{background: transparent;}
#d8{padding: 10px 0px;align-items: center;transition: 0.5s all;}
.n2 {visibility: visible;}
#u1{display: flex;gap: 45px;}
#i2{width: 100px;transition: 0.5s all;}
.i3{width: 25px; height: 25px;}
#d9 >a{margin-left:25px;}
#u1 >li{list-style: none;}
.a16:hover{color: var(--color-2);}
.a16.scrolled { color: var(--color-26);}
.a16.scrolled:hover {
  color: var(--color-2); /* Hover effect while scrolled */
}

.a10{font-size: 14px;line-height: 24px;color: var(--color-3);font-family: var(--font-2);text-transform: capitalize;font-weight: 400;letter-spacing: 0.5px;}
.u2 >li{margin-bottom: 15px;}
.l1 >a{padding: 34px 0;}
.u2{display: none;position: absolute;margin: 32px 0 0 -50px ;padding: 30px 110px 15px 30px;background: #000000;}
#l2:hover #u3{ display: block;}
#l3:hover #u4{ display: block;}
#l4:hover #u5{ display: block;}
#u5, #u9, #u11{padding-right: 0px;}
.s1{padding: 0px 20px 0 100px;font-size: 19px;}
#l5:hover #u7{ display: block;}
.u6{display: none; position: absolute;margin:-50px 0 0 189px;padding: 30px 90px 15px 30px;background: #000000;width: 216px;}
.u6 >li{margin-bottom: 15px;}
#l6:hover #u8{ display: block;}
#s2{ padding-left: 106px;}
#l7:hover #u9{ display: block;}
#u10, #u12{margin-left: 177px;}
#l8:hover #u10{ display: block;}
#l9:hover #u11{ display: block;}
#l10:hover #u12{ display: block;}
#u12{margin-left: 213px;}
#s4{padding-left: 107px;}
/* #d10{display: block;position: absolute;background: #000000;width: 87.7%;margin:32px 0 0 -66.5%;}
.u13{width: 20%;background: green;} */


/* footer  */
/* (87deg, #3b3b3ba1 -4%, #5a554db0 55%) */
#ft {background: linear-gradient(345deg, #1b2817c9 28%, #798824c7 80%), url(../images/moonstone.webp); background-repeat: no-repeat; background-position: right; background-size: cover; position: relative; overflow: hidden; color: var(---color-22);}
#d20{display: flex; gap: 20px; margin-top: 100px; margin-bottom: 30px;}
.d21{width: 25.5%;}
#d23{padding-left: 5%;}
#d24{width: 33%;}
#i20{width: 50%;}
#d26{text-align: center; padding: 20px 0;}
#d27{gap: 20px; display: flex; align-items: center; flex-direction: column;}
.s10{font-family: var(--font-2); color: var(--color-22); border-bottom: 1px solid var(--color-22); display: inline-block; padding-bottom: 10px; font-size: 20px; letter-spacing: 2px; text-transform: uppercase;}
.a10{text-decoration: none; font-family: var(--font-1); font-size: 15px; letter-spacing: 2px; cursor: pointer; color: var(--color-22);}
.p10 , .l10 ,.l11 {color: var(--color-22);font-family: var(--font-1); font-size: 15px; letter-spacing: 2px; padding-top: 20px; line-height: 1.5;}
.p10::first-letter{font-size: 20px; font-weight: bold;}
.s11{display: block; padding-left: 80px;}
.l4{padding-top: 15px; line-height: 1.5;}
.l11{line-height: 2;}
/* #i12{padding-right: 10px;} */
.i25{width: 20px; height: 20px; margin-right: 10px;}
.d28{display: flex; align-items: center;}
.a11{font-size: 15px;}
#a12{text-transform: lowercase; font-weight: 400;}
#d99{ width: 100%; border-top: 1px solid var(--color-22); margin: 0 auto; text-align: center; padding-top: 15px;}
.i22{width: 100%;height: 100%;transition: 0.7s ease;}
.i23{width: 18px;height: 15px;}
.i23:hover{color: var(--color-2);}
.i21{width: 15px;height: 20px;}
.p0 , .p1{color: var(--color-22);font-family: var(--font-1); font-size: 15px; letter-spacing: 2px; line-height: 1.6;}
.p1{font-size: 10px; margin-top: 15px;}
.i24{ width: 35px;}
#i100 {
  width: 40px;
  padding: 5px;
  border-radius: 68px;
}
#pageTop {
  position: fixed;
  bottom: 0;
  right: 20px;
  display: none;
  border-radius: 7px;
  background-color: #e3ff007a;
  color: white;
  border: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  z-index: 1000;
}



/* Whatsapp Button Styles */

#d16 {
  z-index: 2;
  position: fixed;
  bottom: 88px;
  right: 70px;
  width: 50%;
}

#d17 {
  position: absolute;
  right: -50px;
  top: -7px;
  cursor: pointer;
}

#i9 {
  width: 37px;
}

#d18 {
  width: 365px;
  display: none;
  position: fixed;
  bottom: -75px;
  right: -100px;
  transform: translate(-50%, -50%); 
  background: #fff;
  padding: 20px 15px;
  z-index: 2;
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #000000c7;

}

#s5 {
  position: absolute;
  top: -4px;
  right: 6px;
  color: red;
  font-size: 25px;
  cursor: pointer;
}

#d18.open {
  display: block;
  /* width: 340px; */
  /* bottom: -110px; */
  /* z-index: 1; */
}

#ta1 {
  font-size: 12px;
  width: 100%;
  height: 200px;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
}

#bt1 {
  padding: 10px 15px;
  background-color: #4caf50;
  color: #fff;
  text-transform: capitalize;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}


.ko1 {
  color: red;
  font: normal 12px var(--font1);
  margin-top: 5px;
  word-spacing: 1px;
}

/* footer responsive  */
@media screen and (max-width: 992px){
  #d20{flex-wrap: wrap; justify-content: space-around;}
  #d22{width: 45%; margin-bottom: 50px;}
  #i20{width: 30%;}
  #p11{padding-right: 60px;}
  #d23{order: 3; width: 30%; padding-left: 0;}
  #d24{width: 40%;}
  #d25{order: 4;  width: 33%;}
  #d27{order: 5;}
}

@media screen and (max-width: 768px){
  #p11{padding-right: 40px;}
}

@media screen and (max-width: 600px){
  #d22{width: 95%; display: flex; gap: 20px; align-items: center;} 
  #i20{width: 100%;} 
  #p11{padding: 0;}
  #d24{width: 45%; margin-bottom: 50px;}
  #d25{width: 40%;}
  #d27{width: 35%;}
  #d37{width: 35%;}
  .p0{font-size: 12px; letter-spacing: 1.3px; line-height: 1.2;}
  .p1{font-size: 8px;}
  #i100 {width: 32px;}
  #s11 {font-size: 28px;padding: 0px 5px;}
}

@media screen and (max-width: 480px){
  #s1{display: none;}
  #d3 {justify-content: center;}
  #a1 {margin-bottom: 2px;background: var(--color-24);border-radius: 50%;padding: 3px;}
  #d20{display: block; text-align: center;}
  #d22{display: flex; flex-direction: column;  }
  #i20{width: 50%;}
  .d21 , #d23 , #d24 , #d25 {text-align: center; width: 100%; margin-bottom: 50px;}
  #d27{width: 70%; display: flex; flex-direction: row; justify-content: space-around; margin: 0 auto;}
  .d28{justify-content: center;}
  #d16 {right: 67px;}
  #d18 {right: -135px;width: 300px;}
  #d17 {top: 8px;}

}

@media screen and (max-width: 405px){
  .p0{font-size: 10px;}
}

/* footer responsive end */



.sticky {
  position: fixed !important;
  top: 0;
  width: 100% !important;
  background: #fff !important;
  transition: ease-in 0.1s;
}

/* responsive  */
@media screen and (max-width: 1240px) {
  .w {
    width: 96%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 850px) {
    #s11 {display: block;}
    .n2{visibility: hidden;}
    #u1 {
      top: 135px;
      left: 0;
      text-align: center;
      width: 100%;
      background:#355037;
      /* 18pm */
      padding: 20px;
      position: absolute;
      flex-direction: column;
      gap: 25px;
  }
}