* {
  margin:0;
  padding:0;
  transition: 0.7s ease-in-out;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

/*navbar*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
overflow:scroll;
margin-bottom:0;
overflow-x:hidden;
padding:0;
}


.nav body {
  font-family: 'Open Sans', sans-serif;
  z-index:2;
  color: #222;
  padding-bottom: 0px;
  padding-top:0px;
  margin-top:0;
}

.container1 {
  position:absolute;
  max-width: 100px;
  z-index:2;
  margin: 0 auto;
  margin-top:0;
  padding-top:0;
}
.title1 {
 position:relative;
 overflow:hidden;
 color:white;
 font-size:30px;
 color:darkgreen;
 width:200px;
 height:30px;
 padding:0;
 margin:0;
 top:10px;
 left:80px;
 whitespace:nowrap;
}
 

.nav {
  position: sticky;
  z-index:99;
  margin-top:0;
  padding:0;
  height:60px;
  background-color: #222;
  top: 0px;
  left: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
}

.nav .container1 {
  display: fixed;
  z-index:2;
  margin-top:0;
  justify-content: space-between;
  align-items: left;
  padding: 0px 0;
  transition: all 0.3s ease-in-out;
}

.nav ul {
  display: flex;
  z-index:2;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  z-index:99;
}

.nav a {
  position:relative;
  left:700px;
  z-index:99;
  color: #fff;
  font-size:20px;
  text-decoration: none;
  padding: 0px 65px;
  transition: all 0.3s ease-in-out;
  top:-10px;
}

.nav.active {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav.active a {
  color: #000;
}

.nav.active .container1 {
  padding: 5px 0;
}

.nav a.current,
.nav a:hover {
  color: #c0392b;
  font-weight: bold;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 15px;
  border: none;
  outline: none;
  background-color:transparent;
  cursor: pointer;
  padding: 5px;
  border-radius: 50px;
}
.modal {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding: 1px;
  margin:0; /* Location of the box */
  left: 1200px;
  width: 600px; /* Full width */
  height: 55px; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.10); /* Black w/ opacity */
  border: 2px solid #888;
}

/* Modal Content */
.modal-content {
  position:absolute;
  display:inline-block;
  overflow:hidden;
  float:left;
  background-color: black 90%;
  height:50px;
  width:500px
  margin: auto;
  padding: 5px;
  width: 100%;
  whitespace:nowrap;

}
.modal-content li {
  display:inline-block;
  text-align:center;
  float:left;
  width:20%;
  padding:7px;
  whitespace:nowrap;
}

.modal-content a {
color:white;
text-decoration:none;
 white-space:nowrap;
 font-size:20px;
}
.nowrap: a {
white-space: nowrap;
}


#myBtn1 {
position:relative;
float:left;
left:800px;
top:-10px;
color:white;
font-size:20px;
cursor:pointer;
z-index:100;
}

/* The Close Button */
.close {
  position:relative;
  color: #aaaaaa;
  bottom:3px;
  float: left;
  font-size: 30px;
  font-weight: bold;
  cursor:pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
 
/*title banner */

.shop-window::before {
  content: "";
  position:absolute;
  height:500px;
  width:100%;
  margin:0;
 background-color: rgba(0, 0, 0, 35%); /* Change the color and opacity as needed */
} 


.shop-window {
  position:absolute;
  overflow:hidden;
  height:500px;
  width:100%;
  margin-bottom:0px;
  background-image: url('window.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  }



.shop-window h1,  h3 {
  position:absolute;
  text-align:center;
  height:15px;
  left:40%;
  top:30%;
  color:white;
  padding-top:10px;

}
.shop-window h1 {
  font-size:50px;
  top:35%;
  left:35%;
}

.form-main {
  }
  .main-wrapper {
    position:absolute;
    background: linear-gradient(to bottom, #00000024, #00000024);
    display:block;
    margin-top:50px;
    margin-bottom:10px;
    z-index:100;
    float:left;
    margin-left: auto;
    margin-right: auto;
    top:65%;
    left:27%;
    border-radius: 10px;
    padding: 45px;
    width: 40%;
    box-shadow: 0 0 5px 5px #00000020;
    backdrop-filter: blur(5px);
    background-color: #ffffff85;
    @media screen and (max-width: 991px) {
      width: 70%;
    }
    @media screen and (max-width: 767px) {
      width: 90%;
    }
    .form-head {
      font-size: 30px;
      line-height: 40px;
      font-weight: 600;
      text-align: center;
      margin: 0px 0 25px;
    }
    .form-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 15px;
      .form-card {
        position: relative;
        width: 100%;

        .form-input {
          padding: 20px 25px 15px;
          width: 100%;
          border: 1px solid $color-black;
          border-radius: 5px;
          background: transparent;
          outline: none;
          font-size: 20px;
          line-height: 30px;
          font-weight: 400;
              box-sizing: border-box;

          &:valid,
          &:focus {
            border: 1px solid $color-gray;
          }

          &:valid ~ .form-label,
          &:focus ~ .form-label {
            color: $color-gray;
            top: 30%;
            transform: translateY(-70%);
            font-size: 13px;
            line-height: 23px;
          }

          &:-webkit-autofill,
          &:-webkit-autofill:hover,
          &:-webkit-autofill:focus,
          &:-webkit-autofill:active {
            transition: background-color 9999s ease-in-out 0s;
          }
          &::-webkit-outer-spin-button,
          &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
        }

        .form-label {
          position: absolute;
          left: 25px;
          top: 50%;
          transform: translateY(-50%);
          pointer-events: none;
          transition: 0.3s;
          margin: 0;
          font-size: 18px;
          line-height: 28px;
          font-weight: 500;
        }
        .form-textarea {
          padding: 20px 25px 15px;
          width: 100%;
          border: 1px solid $color-black;
          border-radius: 5px;
          background: transparent;
          outline: none;
          font-size: 20px;
          line-height: 30px;
          font-weight: 400;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          resize: none;
              box-sizing: border-box;

          &:valid,
          &:focus {
            border: 1px solid $color-gray;
          }

          &:valid ~ .form-textarea-label,
          &:focus ~ .form-textarea-label {
            color: $color-gray;
            top: 18%;
            transform: translateY(-82%);
            font-size: 13px;
            line-height: 23px;
          }

          &:-webkit-autofill,
          &:-webkit-autofill:hover,
          &:-webkit-autofill:focus,
          &:-webkit-autofill:active {
            transition: background-color 9999s ease-in-out 0s;
          }
        }
        .form-textarea-label {
          position: absolute;
          left: 25px;
          top: 30%;
          transform: translateY(-70%);
          pointer-events: none;
          transition: 0.3s;
          margin: 0;
          font-size: 18px;
          line-height: 28px;
          font-weight: 500;
        }
      }
    }
  }
}
.btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
padding: 16px 0 0;
  }
.btn-wrap button {
  padding: 0 32px;
  font-size: 18px;
  line-height: 48px;
  border: 1px solid transparent;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.5s ease;
  cursor: pointer; box-shadow: 0 0 5px 5px #00000020;
}
.btn-wrap button:hover {
  border: 1px solid #000;
  background: transparent;  
}

.convoy {
  position:absolute;
  margin:0;
  top:1328px;
  width:100%;
  height:700px;
  background-image:url('convention.jpg');
  background-repeat:no-repeat;
  background-position: right; 
  background-size:contain;
  margin-bottom:40px;
}

.convoy h3 {
  position:relative;
  left:130px;
  top: 160px;
  text-align:left;
  color:black;
  font-size:30px;
}
.convoy h1  {
position:relative;
Left:130px;
top:180px;
font-size:50px;
}

.convoy p {
position:relative;
left:130px;
top:200px;
font-size:30px;
text-align:left;
}

/* Slideshow container */
.slideshow-container {
  width:100%;
  display:block;
  position: absolute;
  top:2030px;
  z-index:99;
}


/* The dots/bullets/indicators */
.dot {
  position:relative;
  bottom:30px;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

footer { 
  position:relative;
  top:2500px;
  height:400px;
  overflow:hidden;
  bottom:0px;
  padding:0;
  background-color:grey;
  height: 400px;
  max-width:100%;
  clear:both;
}


 .shoplst   {
  position:relative;
  list-style-type:none;
 font-size:15px;
  overflow:hidden;
  max-width:150px;
  top:5px; 
  left:450px;
  height:150px;
  display:flex;
 flex-direction:column;
}
  .shoplst h2{
  position:relative;
  width:100px;
  color:black;
 }
 .shoplst li {
 position:relative;
  width:150px;
  height:25px;
  list-style-type:none;
  top:1px; 
}
.shoplst li a {
  color:white;
}
.about1   {
 position:relative;
  list-style-type:none;
 font-size:15px;
  overflow:hidden;
  max-width:150px;
  bottom: 145px; 
  left:160px;
  height:150px;
  display:flex;
 flex-direction:column;
}

.about1 h2 {
 position:relative;
 width:280px;
 color:black; 
}

.about1 li {
   position:relative;
  color:white;
  position:relative;
  width:150px;
  height:25px;
  list-style-type:none;
  top:5px; 
}
.about1 li a {
  color:white;
}
.cusser1 {
 position:relative;
  list-style-type:none;
 display:block;
 font-size:15px;
  overflow:hidden;
  max-width:280px;
  bottom:295px; 
  left:450px;
  display:flex;
 flex-direction:column;
}  
.cusser1 h2 {
  position:relative;
  width:280px;
  color:black;
  white-space: nowrap; 
}
.cusser1 li  {
  position:relative;
  color:white;
  position:relative;
  width:150px;
  height:25px;
  list-style-type:none;
  top:4px; 
}
.cusser1 li a {
color:white;
}
.smicons li a {
  display:block;
  float:left;
  overflow:hidden;
  margin-right:10px;
}
.smicons li {
  position:relative;
  list-style-type:none;
}
.smicons h2 {
  position:relative;
  float:left;
  left:9%;
  top:-50px;
  font-family:copperplate;
  color:white;
}

.smicons {
  position:relative;
  left:80%;
  top:50px;
}
.footer_legal {
  display:block;
position:relative;
bottom:130px;
left:20px;
float:left;
color:white;
padding-left:80px;
padding-right:80px;
margin-left:80px;
margin-right:80px;
}
.paybanner img {
position:relative;
background-color:grey;
height:50px;
width:250px;
left:250px;
bottom:275px;
}
#copy {
position:relative;
bottom: 170px;
left:800px;
z-index:100;
color:white;
}