*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.assets{
  background-color: rgba(18, 60, 18, 1);
  background-color: rgba(30, 30, 30, 1);
  background-color: rgba(18, 60, 90, 1);
  background-color: rgba(252, 0, 150,1);
  background-color: rgba(90, 240, 252, 1);
}

.std{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.scrollChange{
  background-color: rgba(30,30,30,0.60);
}


.std1Txt{
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: 600;
margin: 0;
padding: 0;
text-shadow: 6px 6px 6px rgba(30, 30, 30,1.0);
}

.std2Txt{
  font-size: 27px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  text-shadow: 6px 6px 6px rgba(30, 30, 30,1.0);
}

.std3Txt{
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  text-shadow: 4px 4px 4px rgba(30, 30, 30,1.0);
}

.std4Txt{
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  text-shadow: 4px 4px 4px rgba(30, 30, 30,1.0);
}

.std5Txt{
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  text-shadow: 4px 4px 4px rgba(30, 30, 30,1.0);
}

.std6Txt{
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  text-shadow: 4px 4px 4px rgba(30, 30, 30,1.0);
}

.std1Btn {
  width: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 3px;
  background-color: rgba(0, 129, 222, 0.75);
  border: 1px solid whitesmoke;
  border-radius: 9px;
  color: whitesmoke;
  font-weight: 600;
  transition: background-color 0.3s ease, border 0.3s ease, box-shadow 1s ease;
}

.std1Btn:hover {
  background-color: rgba(0, 129, 222, 1);
  border: 3px solid whitesmoke;
  box-shadow: 0px 0px 18px whitesmoke;
  cursor: pointer;
}



.std2Btn {
  width: 100px;
  height: 25px;
  background-color: rgba(18, 60, 18, 0);
  color: rgba(90, 240, 252, 1);
  border-radius: 9px;
  font-weight: 600;
  transition: text-shadow 0.6s ease, border-bottom 1s ease, font-size 0.3s ease; 
}

.std2Btn:hover {
  cursor: pointer;
  text-shadow: 0px 0px 12px rgba(200, 200, 200, 1);
  border-bottom: 1px solid rgba(252, 0, 150, 1);
  font-size: 16px;
}


body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: whitesmoke;
  background-color: rgba(30, 30, 30, 1);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: start;
}

.mainDiv {
  background-color: rgba(18,54,36,1);
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 0px; 
  margin-bottom: 0px;
  overflow: auto;
  padding-top: 54px;
  padding-bottom: 90px;
  position: absolute;
}





















/*Header Div Contols*/
.headerDiv {
  width: calc(100% - 108px);
  height: 80px;
  position: fixed; /* Fixed position for the header */
  top: 0; /* Position at the top of the screen */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.headerBarDiv{
  width: 100%;
  height: 50px;
  flex-direction: row;
  background-color: rgba(30,30,30,0.75);
  padding: 0px 3px 0px 3px;
}

.headerLanguageBarDiv{
  width: 100%;
  height: 30px;
  justify-content: end;
  align-items: center;
  flex-direction: row;
}


.hLogoDiv{
  width: 210px;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.hlImage{
  width: 40px;
  height: 40px;
  background-color: rgba(252,252,252, 1);
  margin-left: 3px;
  margin-right: 3px;
  overflow: none ;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hlImageDisp{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hlText{
  width: 160px;
  height: 40px;
  align-items: start;
  justify-content: start; 
  text-shadow: 9px 9px 9px rgba(30,30,30, 1);
}

.hBtn{
  height: 45px;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}


.hCTA{
  width: 200px;
  height: 36px;
  background-color: brown;
  border-radius: 27px;
}




























/*Body Div Contols*/

.section{
  width: calc(100% - 108px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 27px 0px 27px 0px;
  box-shadow: 9px 9px 6px rgba(30,30,30,1);
  border-radius: 9px;  
}

.bkImg{
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: rgba(200,200,200,0.09);
  
}

.sctImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  
}

.maskLayer{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  backdrop-filter: blur(1px);
  transition: backdrop-filter 0.6s ease;
}

.maskLayer:hover{
  backdrop-filter: blur(3px) ;
}

.txtLayer{
  height: 400px;
  width: calc(100% - 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position:absolute;
  z-index: 3;
  box-shadow: 0 0 12px rgba(200,200,200,0.60);
  background-color: rgba(60,60,60,0.60);
  border: 1px solid rgba(200,200,200,0.25);
  transition: box-shadow 0.6s ease, background-color 0.6s ease, border-radius 0.6s ease;
}

.txtLayer:hover{
  box-shadow: 0 0 24px rgba(200,200,200,0.60);
  background-color: rgba(60,60,60,0.9);
  border-radius: 9px;
}





.txtHeading{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 27px;
  margin-bottom: 18px;
}

#webCtn6{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: calc(100% - 27px);
  background-color: rgba(252,252,252,0.90);
  border-radius: 9px;
}

.txtBody{
width: 100%;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(to right,
  rgba(252, 0, 150,0)5%,
  rgba(252, 0, 150,1)20%,
  rgba(252, 0, 150,1)80%,
  rgba(252, 0, 150,0)95%
  );
  margin-top: 27px;
}

.section1TxtBody{
  padding: 3px;
}

.secondIntroBodyDiv{
  text-align: center;
  padding: 36px;
}











/*Categories Sytle Controls*/

.cateSection{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: start;
  position: relative;
  box-shadow: 9px 9px 6px rgba(30,30,30,1);
}

.cateMain{
  width: 100%;
  height: auto;
  background-color: rgba(200, 250,120, 1); 
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 9px;
}

.cateImgDisplay{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0px 0px 9px 0px;
  overflow: hidden;
}


.cateImg1{
  width: 240px;
  height: 240px;
  position: relative;
  background-color: blueviolet;
  margin: 9px;
  border-radius: 9px;
  box-shadow: 9px 9px 6px rgba(30,30,30,0.60);
  
  
}

.cateImg2{
  width: calc(100% - 290px);
  height: 240px;
  position: relative;
  background-color: blueviolet;
  margin: 9px;
  border-radius: 9px;
  box-shadow: 9px 9px 6px rgba(30,30,30,0.60); 
}

.cateImgDisp{
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 9px;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease ;
}

.cateImgDisp:hover{
  box-shadow: 0px 0px 18px rgba(252, 0, 150, 1);
  transform: scale(1.02);
  object-fit: cover;
}


.cateImgTxt{
  color: rgba(200, 250,120, 1);
  font-weight: bolder;
  position: absolute;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 180px;
  text-align: center;
  background-color: rgba(27,54,42,1);
  z-index: 11;
  width: 100%;
}

#webCtn6{
  color: rgba(200, 250,120, 1);
  background-color: rgba(27,54,42,1);
}


































/*Footer Div Contols*/
.introLastDiv{
  width: 100%;
  height: 500px;
  position: relative;
  display: flex;
  z-index: 9;
  overflow: none;

}

.introLastDivBkImg{
  width: 100%;
  height: 100%;
  overflow: none;
  backdrop-filter: blur(5px);
}

.introLastDivBkImgDisp{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
;
}

.introLastDivTxtMain{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center
}

.introLastTxt1{
  width: 100%;
  height: 60px;
  margin-top: 30px;
  padding: 12px 0px 30px 30px;
  background-color: rgba(30,30,30,0.60);
}

.introLastTxt2{
  width: 100%;
  height: 60px;
  padding: 12px 0px 30px 170px;
  background-color: rgba(30,30,30,0.60);
}

.introLastTxt3{
  width: 100%;
  height: 60px;
  padding: 12px 0px 30px 290px;
  background-color: rgba(30,30,30,0.60);
  margin-bottom: 30px;
}

.introLastTxt4{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: rgba(60,252,60, 1);
  text-shadow: 9px 9px 16px rgba(30,30,30, 1);
  -webkit-text-stroke: 2px rgba(30,30,30,0.60);
}

.addressContactDiv{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
}


#webCtn11, #webCtn13{
  margin-bottom: 12px;
}

#webCtn12, #webCtn14{
  margin-bottom: 9px;

}

.addressDiv, .contactDiv{
  width: 300px;
  height: 120px;
  border: 1px solid whitesmoke;
  border-radius: 9px;
  margin: 9px;
  padding: 9px;
  background-color: rgba(30,30,30,0.60);
  transition: transform 0.6s ease;
}


.addressDiv:hover, .contactDiv:hover{
  transform: scale(1.05);
  background-color: rgba(30,30,30,0.9);
}





/*About Us Div Style Control*/



.abtMainDiv1{
  width:100%;
  height: 600px;
  background-color: rgba(18, 90, 18, 1);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
}

.abtSect1LogoDiv{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.abtSect1Text1{
  text-align: center;
}


.abtMainDiv2{
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 45px;
  background-color: rgba(27,54,45,1);
  border: 3px solid rgba(27, 90, 27, 0.75);
  border-radius: 9px;
}

#webCtn17{
  margin: 27px;

}

#webCtn18{
  padding: 54px;
  line-height: 27px;
}

.abtMainDiv3{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(27,54,45,1);
  border: 3px solid rgba(27, 90, 27, 0.75);
  border-radius: 9px;
}

#webCtn19{
  margin: 45px;
}

.abtSect3DispImg{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  justify-content:center;
  align-items: center;
  flex-wrap: wrap;
  margin: 27px;
}


.abtSect3ImgTxt{
  text-align: center;
  margin: 27px;
}

.abtSect3Img{
  width: 450px;
  height: 300px;
  margin: 9px;
  border-radius: 9px;
  object-fit: cover;
}

#webCtnRegInfo1, #webCtnRegInfo2{
  text-align: center;
  margin-bottom: 45px;
  padding: 27px;
}


.abtMainDiv4{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(27,54,45,1);
  border: 3px solid rgba(27, 90, 27, 0.75);
  border-radius: 9px;
  padding: 27px 0px 108px 0px;
}

#webCtn23,#webCtn25,#webCtn27{
  margin-top: 63px;
}

#webCtn24,#webCtn26,#webCtn28{
 text-align: center;
 line-height: 27px;
 padding: 0px 108px 0px 108px;
}


.dispatchAreaImage{
  width: 100%;
  object-fit: cover;
  position: relative;
}


.abtMainDiv5{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(27,54,45,1);
  border: 3px solid rgba(27, 90, 27, 0.75);
  border-radius: 9px;
  padding: 27px 0px 108px 0px;
}

#webCtn29, #webCtn31{
  width: 100%;
  height: 50px;
  padding: 9px 108px 0px 108px;
}

#webCtn30, #webCtn32, #webCtn33, #webCtn34{
  width: 100%;
  padding: 9px 126px;
  line-height: 27px;
  text-justify: inter-word;
}

#webCtn33{
  color: rgba(54, 252, 54, 1);
  margin: 27px;
}





/*jQuery style control*/



.std1BtnClicked{
  background-color: red;
  border: 5px solid whitesmoke;
}

.cttMainDiv1{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(27,54,45,1);
  border: 3px solid rgba(27, 90, 27, 0.75);
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}

.cttSect1Img{
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.cttTextLayer{
  width: 100%;
  height: 120px;
  position: absolute;
  background-color: rgba(30,30,30,0.60);
  box-shadow: 0px 0px 9px rgba(200,200,200,0.60);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cttMainDiv2{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(27,54,45,1);
  border: 3px solid rgba(27, 90, 27, 0.75);
  border-radius: 9px;
  overflow: hidden;
  position: relative;

}

#webCtn35, #webCtn39{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  text-align: center;
  margin: 36px opx 9px 0px;
  margin-top: 27px;
}

#webCtn36, #webCtn40{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 36px;
}


.mapLocationDiv{
  width: 100%;
  height: 600px;
}

.mapImg{
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  border-radius: 9px;
}




@media screen and (max-width: 800px) {
  .hlText{
    display: none;
  }
  .hLogoDiv{
    width: 45px;
  }

  .worldBorder {
    max-width: 180px;
    max-height: 180px;
  }

  .logoLeaveDiv{
    max-width: 85%;
    max-height: 85%;
    padding: 10px;
  }

  .logoLeaveImg{
    padding-top: 0;
  }
}


@media screen and (max-width: 500px) {
  .headerDiv {
    width: calc(100% - 27px);
    height: 80px;
    position: fixed; /* Fixed position for the header */
    top: 0; /* Position at the top of the screen */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }

    .hBtn{
      justify-content: center;
    }

    .hLogoDiv{
      width: 45px;
    }

    .hlText{
      display: none;
    }

    .std1Btn {
      width: 60px;
      height: 36px;
      font-size: 12px;
    }
    .std2Btn{
      width: 60px;
      font-size: 10px;
    }

    .headerLanguageBarDiv{
      justify-content: space-around;
      margin-top: 6px;
    }

    .hCTA{
      width: 72px;
      color: whitesmoke;
      font-size: 10px;
    }

    .txtBody{
      flex-direction: column;
      height: 90px;
    }

    .section{
      width: calc(100% - 9px);
    }

    .std1Txt{
      font-size: 27px;
      font-weight: 400;
      }

    .std2Txt{
      font-size: 18px;
      font-weight: 300;
    }

    .std3Txt{
      font-size: 15px;
      font-weight: 300;
    }

    .std4Txt{
      font-size: 12px;
      font-weight: 200;
    }

    .abtMainDiv1, .abtMainDiv2, .abtMainDiv3, .abtMainDiv4, .abtMainDiv5{
      padding: 0px;
    }

    #abtCtn8, #webCtn15, #webCtn16, #webCtn17, #webCtn18, #webCtn19, #webCtn20, #webCtn21, #webCtn22, #webCtn23, #webCtn24, #webCtn25, #webCtn26, #webCtn27, #webCtn28, #webCtn29, #webCtn30, #webCtn31, #webCtn32, #webCtn33, #webCtn34{
      padding: 0px 9px 0px 9px;
      text-align: center;
    }

    .worldBorder {
      max-width: 130px;
      max-height: 130px;
    }

    .logoLeaveDiv{
      padding: 10px;
    }

    .logoLeaveImg{
      padding-top:0;
    }
}





























.logoFrame {
  width: 800px;
  height: 500px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: fill;
  background-position: left;
  position: relative;
  border-radius: 9px;
}

.starsDiv{
  width: 100%;
  height: 100%;
  position: relative;

}

.stars{
  width: 120%px;
  height: 120%;
  position: relative;
  z-index: 1;
  object-fit: contain;
  animation: starsMove 54s infinite linear;
}
@keyframes starsMove {
  0% {
    transform: translateX(-20%); /* Start from initial position */
    transform: translateY(-10%);
  }
  50% {
    transform: translateX(-10%); /* Move completely to the left */
    transform: translateY(0%);
  }
  100%{
    transform: translateX(-20%); /* Move completely to the left */
    transform: translateY(-10%);
  }
}



.worldMap {
  width: 400px;
  height: 300px;
  object-fit: contain;
  animation: moveRightToLeft 36s infinite linear;
  box-shadow: 9px 9px 18px rgba(0,0,0,1);
}

@keyframes moveRightToLeft {
  0% {
    transform: translateX(0%); /* Start from initial position */
  }
  50% {
    transform: translateX(-35%); /* Move completely to the left */
  }
  100% {
    transform: translateX(0%); /* Move completely to the left */
  }
}

.worldBorder {
  /* Your existing styles */
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 50%;
  position: absolute; /* Needed for shadow placement */
  z-index: 10;
  overflow: hidden; /* Ensure content remains within the border */
  background-image: radial-gradient(circle, rgba(90,90,225,1) 0%, rgba(0,0,0,1) 100%);
}

.worldBorder::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 15px 0 27px -15px white, inset -15px 0 108px -15px black;
  border-radius: 50%;
}


.logoLeaveDiv{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 11;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 54px;
}

.logoLeaveImg{
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}