* {
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;
      }
      @font-face {
        font-family: futurak;
        src: url(./fonts/futurak.ttf);
      }
      @font-face {
        font-family: butler;
        src: url(./fonts/Butler_Bold.otf);
      }
      @font-face {
        font-family: apercu;
        src: url(./fonts/apercu-medium.ttf);
      }
      body {
        background-color: #000;
      }
      header {
        width: 100%;
        background-color: black;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .logo img {
        width: 180px;
        height: 100px;
      }

     nav ul {
        display: flex;
      }

     nav ul  li {
        list-style: none;
        padding: 20px;
        /* gap: 50px; */
      }

      nav ul li a {
        color: white;
        text-decoration: none;
        gap: 50%;
      }
      .all-btn {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .btn {
        background: transparent;
        background-color: black;
        color: white;
        padding: 10px 20px;
        font-weight: 600;
        height: 45px;
        border-radius: 50px;
        border: 1px solid white;
      }

      .btn2 {
        background-color: #df1e1e;
        border: none;
        outline: none;
        color: white;
        padding: 10px 22px 10px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 30px;
        font-weight: 600;
      }
      .one {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 50%;
        width: 26px;
        height: 26px;
      }

      /* Arrow icon styling */
      .one {
        color: #d2391e;
        font-size: 14px;
      }
      .free {
        width: 100%;
        padding: 0;
      }
      .free img {
        width: 100%;
        padding: 0;
        height: auto;
        display: block;
      }
      #black-div {
        background-color: black;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        color: white;
        padding-top: 60px;
        padding-left: 17px;
        padding-right: 14px;
      }

      .brand {
        font-size: 40px;
        font-family: apercu;
      }

      #black-div span {
        color: white;
        font-size: 60px;
        font-family: futurak;
        font-weight: 100;
      }
      #black-div p {
        color: white;
        font-family: apercu;
      }

      .container {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .box1 {
        width: 100%;
        display: flex;
        gap: 15px;
        flex-direction: column;
        align-items: center;
      }

      .box1 img {
        width: 225px;
        height: 160px;
        padding: 9px;
        gap: 8px;
        background-color: white;
      }
      .box1 button {
        padding: 17px 30px;
        border-radius: 30px;
        outline: none;
        background: transparent;
        border: none;
        border: 1px solid #6d6d6d;
      }

      .box1 button a {
        color: white;
        text-decoration: none;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.5px;
      }

      /* restu view */
       
      .view {
        background-color: black;
        color: white;
        width: 100%;
        position: relative;
        padding: 100px 7px 0 7px;
      }
      
      .view2 {
        text-align: center;
      }

      .view #salt {
        font-family: futurak;
        font-size: 60px;
        font-weight: 100;
      }
      .view h1 {
        font-family: apercu;
        font-size: 48px;
      }
      .view p {
        padding-top: 10px;
      }

      .info {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding-top: 30px;
      }
     .s{
      position: absolute;
      top: 0;
      right: 0;
      
     }
      .info img {
        width: 400px;
      }

      .info p {
        letter-spacing: 10px;
        color: red;
      }

      .info h4 span {
        font-family: futurak;
        font-size: 32px;
        font-weight: 100;
      }
      .info h4 {
        font-size: 32px;
        font-family: butler;
      }

      .info .pt {
        color: white;
        letter-spacing: 0;
      }

      .loc i {
        background: transparent;
        gap: 10px;
      }
      .icon {
        padding-top: 60px;
      }
      .sp-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        outline: none;
        border: 1px solid #6d6d6d;
        color: white;
        padding: 0 22px;
        height: 45px;
        border-radius: 30px;
        cursor: pointer;
      }

      /* inside button */
      .sp-btn a {
        text-decoration: none;
        color: white;
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;

        display: flex;
        align-items: center;
      }

      /* White bubble */
      .icon-wrap {
        width: 26px;
        height: 26px;
        background-color: white;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-wrap i {
        color: #d2391e;
        font-size: 14px;
      }

      /* fsd */

      .fsd {
        width: 100%;
        background-color: black;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
        padding-top: 50px;
      }

      .fsd img {
        width: 400px;
      }

      .fsd p {
        letter-spacing: 10px;
        color: red;
      }

      .fsd .head {
        color: white;
      }
      .fsd .head span {
        font-family: futurak;
        font-size: 32px;
        font-weight: 100;
      }
      .fsd .head {
        font-size: 32px;
        font-family: butler;
      }

      .fsd .add {
        color: white;
        letter-spacing: 0;
        padding-top: 10px;
      }

      .location i {
        background: transparent;
        gap: 20px;
      }
      .ic {
        padding-top: 50px;
      }
      /* Main Button Styling */
      .b-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        outline: none;
        border: 1px solid #6d6d6d;
        color: white;
        padding: 0 22px;
        height: 45px;
        border-radius: 30px;
        cursor: pointer;
      }

      /*inside button */
      .b-btn a {
        text-decoration: none;
        color: white;
        font-weight: 600;
        font-size: 15px;

        display: flex;
        align-items: center;
      }

      /* White bubble */
      .ic-wrap {
        width: 26px;
        height: 26px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ic-wrap i {
        color: #d2391e;
        font-size: 14px;
      }

      /* fsd end */

      /* bwp start */

      .bwp {
        width: 100%;
        background-color: black;
        display: flex;
        justify-content: space-around;
        padding-top: 50px;
        padding: 50px;
      }

      .bwp img {
        width: 400px;
      }

      .bwp p {
        letter-spacing: 10px;
        color: red;
      }

      .bwp .out {
        color: white;
      }
      .bwp .out span {
        font-family: futurak;
        font-size: 32px;
        font-weight: 100;
      }
      .bwp .out {
        font-size: 32px;
        font-family: butler;
      }

      .bwp .main {
        color: white;
        letter-spacing: 0;
        padding-top: 10px;
      }

      .location i {
        background: transparent;
        gap: 20px;
      }

      /* Main Button Styling */
      .h-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        outline: none;
        border: 1px solid #6d6d6d;
        color: white;
        padding: 0 22px;
        height: 45px;
        border-radius: 30px;
        cursor: pointer;
      }

      /* inside button */
      .h-btn a {
        text-decoration: none;
        color: white;
        font-weight: 600;
        font-size: 15px;

        display: flex;
        align-items: center;
      }

      /* White bubble */
      .ico-wrap {
        width: 26px;
        height: 26px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ico-wrap i {
        color: #d2391e;
        font-size: 14px;
      }

      /* imgs sections */

      .section {
        background-color: black;
        color: white;
        padding-bottom: 40px;
        padding: 17px;
      }
      .futu {
        font-family: futurak;
        font-size: 60px;
        font-weight: 100;
      }
      .exp {
        text-align: center;
        font-family: apercu;
        font-size: 25px;
      }

      .exp-img {
        width: 100%;
        display: flex;
        gap: 7px;
      }
      .exp2 {
        width: 100%;
        text-align: center;
      }
      .exp2 img {
        width: 298px;
        padding-top: 25px;
      }
      #point{
        padding-top: 35px;
      }
      .city {
        letter-spacing: 6px;
        color: red;
        padding-top: 22px;
        padding-bottom: 15px;
      }
      .pepper {
        font-size: 27px;
        padding-bottom: 15px;
      }
      .pepper span {
        font-family: futurak;
        font-size: 27px;
        font-weight: 100;
        padding-bottom: 15px;
      }
      .salter {
        padding-bottom: 15px;
      }
      .front {
        display: flex;
        justify-content: center;
        padding-top: 30px;
      }

      .back {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        outline: none;
        border: 1px solid #6d6d6d;
        color: white;
        padding: 0 22px;
        height: 45px;
        border-radius: 30px;
        cursor: pointer;
      }

      /* inside button */
      .back a {
        text-decoration: none;
        color: white;
        font-weight: 600;
        font-size: 15px;

        display: flex;
        align-items: center;
      }

      /* White  bubble */
      .web {
        width: 26px;
        height: 26px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .web i {
        color: #d2391e;
        font-size: 14px;
      }

      /* scnd exp */
      .scnd-exp{
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
        gap: 22px;
      }
       .exp3 img {
        width: 298px;
        padding-top: 25px;
      }
         .front {
        display: flex;
        justify-content: center;
        padding-top: 30px;
      }
       .font {
        display: flex;
        justify-content: center;
        padding-top: 43px;
      }

      .back {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        outline: none;
        border: 1px solid #6d6d6d;
        color: white;
        padding: 0 22px;
        height: 45px;
        border-radius: 30px;
        cursor: pointer;
      }
      /* inside button */
      .back a {
        text-decoration: none;
        color: white;
        font-weight: 600;
        font-size: 15px;

        display: flex;
        align-items: center;
      }

      /* White bubble */
      .website {
        width: 26px;
        height: 26px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .website i {
        color: #d2391e;
        font-size: 14px;
      }

      /* thd exp */
  

      .thd-exp{
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
        gap: 22px;
      }
       .exp4 img {
        width: 298px;
        height: 240px;
        padding-top: 25px;
        
      }
       .front {
        display: flex;
        justify-content: center;
        padding-top: 30px;
      }
      /* fth exp */
      .fth-exp{
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
      }
      .exp5 img{
        width: 298px;
        padding-top: 25px;
      }

      /* village start */
      .gujar{
        width: 100%;
       background-color: rgba(255, 255, 255, 0.06);
        padding-top: 50px;
        padding-bottom: 20px;
      }
       .futu {
        font-family: futurak;
        font-size: 60px;
        font-weight: 100;
      }
      .write {
        text-align: center;
        font-family: apercu;
        font-size: 25px;
        color: white;
      }
       .city {
        letter-spacing: 6px;
        color: red;
        padding-top: 29px;
        padding-bottom: 18px;
      }
      .pepper {
        font-size: 27px;
        padding-bottom: 22px;
      }
      .pepper span {
        font-family: futurak;
        font-size: 27px;
        font-weight: 100;
        padding-bottom: 15px;
      }

      .dha{
        padding-top: 25px;
        gap: 30px;
        width: 100%;
        display: flex;
        color: white;
      }

      .dha-img img{
        width: 528px;
        height: 302px;
        padding-top: 25px;
      }
      .mob{
        display: flex;
        flex-direction: column;
      }

         .click {
        display: flex;
        justify-content: center;
        padding-top: 30px;
      }
       .touch {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        outline: none;
        border: 1px solid #777777;
        background-color: green;
        color: white;
        padding: 0 22px;
        height: 45px;
        border-radius: 30px;
        cursor: pointer;
      }

      /*  inside button */
      .touch a {
        text-decoration: none;
        color: white;
        font-weight: 600;
        font-size: 15px;

        display: flex;
        align-items: center;
      }

      /* White  bubble */
      .get {
        width: 26px;
        height: 26px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .get i {
        color: #d2391e;
        font-size: 14px;
      }
      /* village end */
  /* card  section start */

      .header{
        padding-top: 50px;
      }
      .header h1 {
        font-size: 55px;
        font-family: futurak;
        font-weight: 400;
        color: #fff;
        text-align: center;
      }

      .header h2 {
        font-size: 60px;
        font-family: apercu;
        color: #fff;
        text-align: center;
      }

      .header span {
        font-size: 18px;
        font-weight: normal;
      } 

      /* Cards */
      .cards{
        width: 100%;
        text-align: center;
        padding-top: 30px;
        color: black;
        padding-bottom: 30px;
        padding: 20px;
      }
.main-card{
  width: 100%;
 justify-content: center; 
  display: flex;
  gap: 20px;
}

.card{
  color: black;
  display: block;
  text-align: center;
  width: 290px;
  padding: 20px;
  height: 270px;
  background-color: white;
  border-radius: 10px;
 
}

.card .icon{
  border-radius: 50%;
 padding: 10px;
 display: flex;
 align-items: center;
 position: relative;
 left: 90px;
 justify-content: center;
  background-color: #EAEAEA;
  width: 60px;
  height: 60px;
 
}

.icon .sign{
  font-size: 30px;
  
}
.soon{
  color: red;
  letter-spacing: 6px;
  padding-top: 20px;
}
.soon2{
  padding-bottom: 20px;
}

.soon3{
  font-family: futurak;
  font-weight: 400;
  font-size: 25px;
}

.card span{
  font-family: apercu;
}

.scnd{
  padding-top: 30px;
}

      .footer {
            background-color: black;
            color: rgba(255, 255, 255, 0.7);
        padding: 50px 30px;
        width: 100%;
        position: relative;
      }

      .footer-container{
        display: flex;
      }
      
      .footer-coll{
        width: 400px;
      }

      #part{
        padding-bottom: 20px;
      }

     .footer-coll #dining{
            font-family: apercu;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
        padding-bottom: 20px;
      }

      .links a{
        text-decoration: none;
        padding-top: 20px;
         color: rgba(255, 255, 255, 0.7);
      }
       /* site links start */
      
      .footer-col .area {
        display: flex;
        flex-direction: column;
        font-size: 14px;
      }
      .footer-col .area li{
           padding-bottom: 16px;
        list-style: none;
        font-family: apercu;
        padding-right: 210px;
        
      }

       .footer-col h4{
         padding-bottom: 16px;
       }
       /* site links end */


       /* contact start */

      .footer-cole{
        display: flex;
        flex-direction: column;
        justify-content: end;
      }
      .footer-cole h4{
       line-height: 40px;
      }
      .footer-cole .blue{
        font-family: apercu;
       line-height: 40px;
       font-style: normal;
        font-weight: 400;
        font-size: 15px;
      }
      .footer-cole .office{
        font-family: butler;
        font-weight: 700;
        font-size: 16px;
      line-height: 40px;
      }

      .fo0ter-cole .break{
        font-family: apercu;
       line-height: 40px;
       font-style: normal;
        font-weight: 400;
        font-size: 15px;
      }
      /* contact end */

      /* social start */
      .foots{
      position: absolute;
      }
   .foots .footer-col{
  padding-top: 410px;
  
   }

   .foots .socials{
    font-size: 40px;
    
   }
   .foots .stores{
    display: flex;
    flex-direction: column;
    
   }
 .foots .stores img{
   padding: 10px 0 10px 0px;
   
 }
.footer .see{
  position: absolute;
      bottom: 0px;
      left: 0;
}
 /* social end */