*{
    margin: 0px;
    padding: 0px;
    font-family: "Nata Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight:300px;
  font-style: normal;
}
body{
    background-color: black;
}
/* novbar end */
.navbar{
   display: flex;
   flex-wrap: wrap;
   column-gap: 40px;
   width: 100%;
   padding: 10px;
}
.navbar>a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    position: relative;
    left: 300px;
    align-self: center;
}
.navbar>.b1{
    color: white;
    padding: 10px;
    background-color: black;
    border-radius: 30px;
    width: 130px;
    height: 50px;
    position: relative;
    left: 300px;
     font-size: 13px;
     border: 0.6px solid white;
}
.navbar>.b2{
    color: white;
    padding: 10px;
    background-color:red;
    border:none;
    border-radius: 30px;
    width: 130px;
    height: 50px;
    position: relative;
    left: 300px;
    font-size: 13px;
}
/* novbar end */
/* slider start */
.slider>img{
    width: 100%;
}/* slider end */
/* card start */
.card{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.card>h3>.s1{
    color: white;
    font-size: 45px;
}
.card>h3{
    color: white;
    font-size: 30px;
     position: relative;
    left: 170px;
}
.card>h3>.s2{
    color: white;
    font-size: 30px;
     position: relative;
    left: -400px;
    top: 60px;
}
.card>p{
    color: white;
    position: relative;
    top: 80px;
    
}
.card>.cc1{
   display: flex;
   flex-wrap: wrap;
}
.card>.cc1>.c1{
    
  position: relative;
  left: 70px;
}

.card>.cc1>.c1>img{
    width: 200px;
    height: 130px;
    background-color: white;
    position: relative;
    top: 150px;
    border-radius: 5px;
}
.card>.cc1>.c1>button{
   border: 0.7px solid white;
   background-color: black;
   color: white;
   padding: 15px;
    position: relative;
    top: 200px;
    left: -170px;
    border-radius: 30px;
}
/* card end */
/* Franchises start */
.franchises{
    background-image: url(a4195117-d4ae-45d4-9088-21162bacdfb1.webp);
   
}
.franchises>h1{
    color: white;
    font-size: 50px;
      position: relative;
    top: 430px;
    left: 500px;
}
.franchises>h2{
    color: white;
     font-size: 30px;
     position: relative;
    top: 450px;
    left: 490px;
}
.franchises>p{
    color: white;
     position: relative;
    top: 470px;
    left: 270px;
     
}
.franchises>.f1{
    display: flex;
    flex-wrap: wrap;
   flex-direction: column;
}
.franchises>.f1>.r2{
    color: red;
      position: relative;
      letter-spacing: 10px;
    top: 530px;
    left: 80px;
}
.franchises>.f1>h2>.s3{
    font-size: 50px;
}
.franchises>.f1>h2{
    color: white;
      position: relative;
    top: 530px;
    left: 80px;
}
.franchises>.f1>.p1{
    color: rgb(219, 219, 219);
      position: relative;
    top: 560px;
    left: 80px;
}
.franchises>.f1>button{
    border: 0.7px solid white;
   background-color: black;
   color: white;
   padding: 10px;
    position: relative;
    top: 590px;
    left: 80px;
    width: 200px;
    border-radius: 30px;
}
.franchises>.f1>button>i{
    font-size: 25px;
}
.franchises>.f1>img{
   width: 500px;
   align-self: flex-end;
    position: relative;
    top: 360px;
    right: 80px;
}
.franchises>.f2{
    display: flex;
    flex-wrap: wrap;
   flex-direction: column;
}
.franchises>.f2>.r2{
    color: red;
      position: relative;
      letter-spacing: 10px;
   top: 140px;
   left:650px;
}
.franchises>.f2>h2>.s3{
    font-size: 50px;
}
.franchises>.f2>h2{
    color: white;
      position: relative;
    top: 150px;
   left:650px;
}
.franchises>.f2>.p1{
    color: rgb(219, 219, 219);
      position: relative;
    top: 170px;
   left:650px;
}
.franchises>.f2>button{
    border: 0.7px solid white;
   background-color: black;
   color: white;
   padding: 10px;
    position: relative;
    top: 200px;
   left:650px;
    width: 200px;
    border-radius: 30px;
}
.franchises>.f2>button>i{
    font-size: 25px;
}
.franchises>.f2>img{
   width: 500px;
   align-self: flex-end;
    position: relative;
    top: 390px;
   right: 650px;
}
.franchises>.f3{
    display: flex;
    flex-wrap: wrap;
   flex-direction: column;
}
.franchises>.f3>.r2{
    color: red;
      position: relative;
      letter-spacing: 10px;
    top: 300px;
    left: 80px;
}
.franchises>.f3>h2>.s3{
    font-size: 50px;
}
.franchises>.f3>h2{
    color: white;
      position: relative;
    top: 300px;
    left: 80px;
}
.franchises>.f3>.p1{
    color: rgb(219, 219, 219);
      position: relative;
    top: 320px;
    left: 80px;
}
.franchises>.f3>button{
    border: 0.7px solid white;
   background-color: black;
   color: white;
   padding: 10px;
    position: relative;
    top: 360px;
    left: 80px;
    width: 200px;
    border-radius: 30px;
}
.franchises>.f3>button>i{
    font-size: 25px;
}
.franchises>.f3>img{
   width: 500px;
   align-self: flex-end;
    position: relative;
    top: 80px;
    right: 80px;
}
/* Franchises END */
/*  Express start */
.Express>h1{
    font-weight: bold;
 font-size: 50px;
 color: white;
  position: relative;
    top: 200px;
    left: 450px;
}
.Express>h2{
 font-size: 30px;
 color: white;
  position: relative;
  letter-spacing: 9px;
    top: 200px;
    left: 400px;
}
.cc2{
    display: flex;
    flex-wrap: wrap;
}
.cc2>.c2{
    width: 350px;
    height: 490px;
      position: relative;
    top: 250px;
    left: 50px;
    margin: 15px;
}
.cc2>.c2>img{
    width: 100%;
    height: 50%;
}
.cc2>.c2>.r2{
   color: red;
   font-size: 12px;
   letter-spacing: 7px;
      position: relative;
      top: 20px;
    left: 120px;
}
.cc2>.c2>h2{
   color:white;
   font-size: 20px;
      position: relative;
      top: 20px;
    left: 35px;
}
.cc2>.c2>h2>.s3{
   color:white;
   font-size: 30px;
     font-weight: bold;
}
.cc2>.c2>.p1{
   color:rgb(225, 225, 225);
   font-size: 15px;
      position: relative;
      top: 35px;
    left: 10px;
}
.cc2>.c2>.p2{
   color:rgb(225, 225, 225);
   font-size: 15px;
      position: relative;
      top: 45px;
    left: 75px;
}
.cc2>.c2>button{
   border: 0.7px solid white;
   background-color: black;
   color: white;
   padding: 10px;
    position: relative;
     top: 80px;
    left: 75px;
    width: 200px;
    border-radius: 30px;
}
/*  Express end */
/* Village start */
.Village{
 display: flex;
 flex-wrap: wrap;
}
.Village>h1{
     font-weight: bold;
 font-size: 50px;
 width: 40%;
 color: white;
  position: relative;
    top: 300px;
    left: 370px;
    letter-spacing: 3px;
}
.Village>h1>.s3{
     font-weight: bold;
 font-size: 60px;
 color: white;
  position: relative;
   left: 30px;
}
.Village>.v1>img{
  position: relative;
    top: 480px;
    right: 500px;
    width: 600px;
}
.Village>.v1>.r2{
  color: red;
   letter-spacing: 10px;
      position: relative;
      top: 180px;
    left: 120px;
}
.Village>.v1>h2{
   color:white;
   font-size: 20px;
      position: relative;
      top: 180px;
    left: 120px;
    letter-spacing: 3px;
}
.Village>.v1>h2>.s3{
   color:white;
   font-size: 40px;
     font-weight: bold;
}
.Village>.v1>.p1{
   color:rgb(225, 225, 225);
   font-size: 15px;
   margin: 8px;
      position: relative;
      top: 200px;
    left: 110px;
}
.Village>.v1>button{
   background-color:rgb(40, 143, 40);
   color: white;
   border: none;
   font-size: 18px;
   padding: 15px;
    position: relative;
    top: 240px;
    left: 120px;
    width: 200px;
    height: 50px;
    border-radius: 30px;
}
/* Village end */
/* Opening start */
.Opening>h1{
    font-weight: bold;
 font-size: 60px;
 color: white;
  position: relative;
     top: 400px;
    left: 500px;
}
.Opening>h2{
 font-size: 40px;
 color: white;
  position: relative;
     top: 400px;
    left: 350px;
}
.cc3{
    display: flex;
    flex-wrap: wrap;
}
.cc3>.c3{
    border-radius: 15px;
    background-color: white;
    width: 350px;
    height: 230px;
      position: relative;
    top: 450px;
    left: 20px;
    margin: 20px;
}
.cc3>.c3>img{
    position: relative;
    top: 20px;
    left: 150px;
}
.cc3>.c3>.r2{
   color: red;
   font-size: 11px;
   letter-spacing: 5px;
      position: relative;
      top: 30px;
    left: 120px;
}
.cc3>.c3>.r3{
   font-size: 20px;
   width: 80%;
  position: relative;
      top: 30px;
    left: 50px;
}
.cc3>.c3>.r3>.bold{
   font-size: 30px;
  font-weight: bold;
}
.cc3>.c4{
    border-radius: 15px;
    background-color: white;
    width: 350px;
    height: 230px;
      position: relative;
    top: 450px;
    left: 400px;
    margin: 20px;
}
.cc3>.c4>img{
    position: relative;
    top: 20px;
    left: 150px;
}
.cc3>.c4>.r2{
   color: red;
   font-size: 11px;
   letter-spacing: 5px;
      position: relative;
      top: 30px;
    left: 120px;
}
.cc3>.c4>.r3{
   font-size: 20px;
   width: 80%;
  position: relative;
      top: 30px;
    left: 50px;
}
.cc3>.c4>.r3>.bold{
   font-size: 30px;
  font-weight: bold;
}
.cc3>h2{
     font-size: 35px;
 color: white;
   position: relative;
      top: 900px;
    left: 100px;
}
/* Opening end */
/* footer start */
footer{
    margin: 30px;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(13, 13, 13);
}
footer>.f1{
    background-image: url(bb1bd702-431a-4f3a-a0ca-c5966a1f7985.webp);
    background-size: cover;
    position: relative;
     top: 800px;
     left: 50px;
    width: 400px;
}
footer>.f1>p{
   color: rgb(218, 216, 216);
   margin-top: 10px;
}
footer>.f1>a{
   color: rgb(218, 216, 216);
    position: relative;
     top: 30px;
   text-decoration: none;
}
footer>ul{
     position: relative;
     top: 800px;
     left: 100px;
}
footer>ul>li{
   margin: 15px;
  width: 190px;
    color: rgb(218, 216, 216);
    list-style-type: none;
}
footer>ul>li>a{
    color: rgb(218, 216, 216);
    text-decoration: none;
}
footer>ul>li>h3{
    color: rgb(218, 216, 216);
}
footer>ul>li>i{
  background-color: red;
  font-size: 30px;
  width: 30px;
  border-radius: 50%;
}
footer>.p1{
     color: rgb(218, 216, 216);
      position: relative;
     top: 900px;
     right: 1000px;
     align-self: flex-end;
}
footer>.p2{
     color: rgb(218, 216, 216);
      position: relative;
     top: 880px;
     left: 900px;
     align-self: flex-end;
}