@font-face { font-family: fontone; src: url(../Fonts/Poppins-Regular.ttf);}

:root {
  --primary-color: #073d3d;
  --sec-color: #f7a22b;
  --third-color: #7f7f7f;
  --fourth-color: #003369;
  --fifth-color: #001428;
}

* {
overflow: hidden; box-sizing: border-box; text-decoration: none; background-color: transparent; border: none; outline: none; color: var(--fourth-color);
padding: 0%; margin: 0%; font-family: fontone; font-weight: 500; font-size: .9rem;
}

button:active {
transform: scale(.97);
}

body {
width: 100vw; overflow-y: auto; height: 100vh; background-color: #FFFFFF !important; scroll-behavior: smooth;
}

::-webkit-scrollbar {
width: 8px; 
}
::-webkit-scrollbar-track {
background-color: #d9d9d9;
}
::-webkit-scrollbar-thumb {
background-color: #000000;
}
::-webkit-scrollbar-thumb:hover {
background-color: #D11116;
}

@media (min-width: 800px) { .mobinclude { display: none !important; }}
@media (max-width: 800px) { .deskinclude { display: none !important;  }}

/* -------------------------------------------------------------------------------------slide styling  ----------------------------------------------------------*/

.menuslide {
  position: fixed !important; top: 0; width: 100%; height: 100%; background-color: #0000001f;  transition: left 0.3s ease;  z-index: 1000; display: flex;
  align-items: flex-start; justify-content: flex-end; 
}
#menu {
  width: max-content;
}
.sider_menu {
  width: 100% !important;
}

.sider_menu a {
  width: 100%; color: #FFFFFF !important; font-size: .9rem; font-weight: 400;
}
.slideboxtwo {
width: 100%; height: max-content; background-color: #001428; padding: 0px; padding-top: 90px; 
}
.side-menu-items {
font-size: 1rem; border:  none !important; font-weight: 400; width: 100% !important; background-color: #001830b6; height: max-content; border-bottom: #001428 2px solid !important; padding: 20px !important; padding-left: 20px !important;
display: flex; align-items: center; justify-content: flex-start; color: #FFFFFF !important; 
}
@media (min-width: 1000px) { .deskinclude { .headertop {height: 50px;} }}

/*  ------------------------------------------------------------- header styling start here --------------------------------------------------------------------------- */

header {
width: 100vw; height: max-content; z-index: 999999;  position: fixed; background-color: transparent;  background-color: #FFFFFF;
}
.logolnk {
  width: max-content; height: max-content;
}
.logo {
  height: 60px; width: auto;
}
.headertop {
height: max-content; display: flex; align-items: center; justify-content: center; background-color: #FFFFFF; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.63), 0 1px 3px rgba(20, 20, 20, 0.507);  min-height: 50px;
padding: 10px 20px;
}
.header-section {
  display: flex; justify-content: space-between; align-items: center; padding: 0px !important;
}

#menu {
  width: max-24; height: max-content; display: flex; align-items: center; justify-content: center; 
}
.menu-items {
width: max-content; margin-right: 35px; height: max-content; padding: 2px; border-bottom: 2px solid #FFFFFF;
}
.menu-items a {
color: var(--fourth-color) !important; font-size: 1rem;  font-weight: 500; 
}
.accountlink  {
  width: 32px; height: 32px; border-radius: 100%;  display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
  padding-top: 5px;
}
.menu-items:hover {
border-bottom: solid 2px var(--sec-color);
}

.accountlink  img {
  width: 100%;  height: auto;
}
.prevbutton  {
  border-right: 1px solid #808080; margin-right: 15px;  width: max-content; 
}
.prevbutton a {
  display: flex; align-items: center; justify-content: flex-start; padding-right: 18px; width: max-content; 
}
.prevbutton-span {
  font-size: .8rem; color: #FFFFFF;
}
.prevbutton-mg {
  width: 22px; height: auto; margin-right: 2px;
}

.headerbottom::-webkit-scrollbar {
display: none !important;
  }
#menubtn {
  width: 28px; height: 28px; display: flex; align-items: center ; justify-content: center; padding: 2px; margin-left: 20px;
}
#menubtn img {
  width: 100%; height: auto;
}
.header-click-box {
  display: flex; align-items: center; justify-content: flex-end; 
}
/* --------------------------------------------------------------------  main styling  --------------------------------------------------------------------------*/

main {
width: 100vw; height: max-content;  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;  min-height: 90vh;   background-image: url(../graphic/403.jpg);
background-repeat: repeat-y; background-position: top; background-size: contain;
}

.breadcrumb {
width: 100%; display: flex; align-items: center; justify-content: flex-start;  padding-bottom: 3px;
}
.breadcrumb a {
  color: #FFFFFF !important; font-size: .8rem;  height: 1rem;
}
.breadcrumb-link, .breadcrumb-p {
  color: #FFFFFF; font-size: .8rem; font-weight: 500; height: 1rem; padding: 0% !important; display: flex; align-items: center;
}

.breadcrumb-icon {
  height: 12px; width: auto; margin: 2px;
}
 .box-section  {
width: 100%;  
}
.mainsection {
width: 100%; height: max-content; background-color: #fafafae7; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;padding: 20px; padding-bottom: 40px;
}
.introtext {
width: 100%; color: var(--fourth-color); font-size: 1.5rem; padding-bottom: 12px; font-weight: 550;
}

.mainscreenone {
width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; position: relative; overflow: visible;  background-image: url(../graphic/transport-logistics.jpg); background-position: center;
background-repeat: no-repeat; background-size: cover;
}
.mainscreenone video {
  width: 100%; height: 100%; object-fit:cover;
}
.msolayer {
width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; z-index: 5; background: linear-gradient(125deg, #003369ce , rgba(173, 216, 230, 0) 100%); overflow: visible; padding: 20px;
padding-top: 120px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; 
}
.msolayer h1 {
color: #FFFFFF; font-size: 1.6rem; font-weight: 500;
}
.msotrackbox {
position: absolute;  bottom: -85px;  width: 90%; min-height: 150px; background-color: #FFFFFF; box-shadow: 1px 1px 2px #00000042; z-index: 9; padding: 20px; height: max-content;
}
.msotrackboxtop {
  width: 100%; padding: 10px 0px; border-bottom: solid 1px #F5F5F5;
}
.msotrackboxtoptxt {
display: flex; align-items: center; justify-content: center; width: max-content; font-size: 1.2rem; font-weight: 600;
}
.msotrackboxtopmg {
height: 25px; width: auto; margin-right: 5px;
}

.msotrackboxform {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 10px 0px;;
}
.msotrackboxformput {
width: 100%; padding: 5px 10px; font-size: 1rem; color: var(--fourth-color); height: 50px; border: solid 1.5px var(--fourth-color); font-weight: 500; margin-bottom: 10px;
}
.msotrackboxformput:focus , .msotrackboxformput:active {
border-bottom: 1.5px #001428 solid !important; background-color: #FAFAFA;
}
.msotrackboxformsub {
width: 100%; height: 50px; background-color: var(--fourth-color); color: #FFFFFF; font-size: 1rem; text-align: center; display: flex; align-items: center; justify-content: center;
}
.msotrackboxformsub img {
  margin-left: 10px; height: 14px; width: auto;
}

.mainscreentwo {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 140px;
}
.inner-section {
width: 100%; 
}
.inner-section-left {
padding-bottom: 30px;
}
.mainsectionii {
  background-color: #ffffffdc;
}

.mainscreenthree {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 80px;
  } 
.headtext {
font-size: 2.5rem; padding-bottom: 20px; font-weight: 600; color: var(--fourth-color); 
}
.paratext {
  font-size: 1rem; line-height: 1.5rem; color: #393E46; padding-bottom: 40px;
}
.paratexti {
  padding-top: 20px;
}
.paralist {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; font-size: .9rem; padding-bottom: 8px; font-weight: 600;
  color: var(--fifth-color);
}
.paralist img {
  height: 24px; width: auto; margin-right: 5px;
}
.mainbtn {
width: 200px; height: 50px; background-color: var(--primary-color); font-size: 1rem; color: #FFFFFF; display: flex; align-items: center; justify-content: center;
}
.mainbtn img {
  height: 24px; width: auto; margin-left: 10px;
}

.mainimg {
width: 100%; height: auto; 
}

.iconboxhold {
display:flex; justify-content: space-between; align-items: flex-start; padding-top: 20px ; flex-wrap: wrap;
}
.iconboxi {
width: 100%; height: max-content; height: max-content; background-color: #FFFFFF; box-shadow: 1px 1px 2px #00000023; padding: 25px 20px; border-radius: 5px;
margin-bottom: 20px;
}
.iconboxi img {
height: 34px; width: auto; margin-bottom: 10px;
}

.iconboxi h3 {
font-size: 1.5rem; font-weight: 600; padding-bottom: 12px;
}

.iconboxi p {
font-size: .9rem; color: #393E46;
}

.finalsection {
padding-bottom: 120px;
}


@media (min-width: 800px)  { 
.carcollectionbox { width: 100%; } 
.box-section { width: 85%; } 
.form-group-second { width: 49%;}
.mstboxonebox { width: 49.5%; }
.blogbox { width: 49%;}
.sectbox-right {
  padding: 50px;
  }
.mainscreenone {
  background-color: #F1F4F5;
}

.msotrackboxformput  {
width: 70%; margin-bottom: 0%;  border: solid 1.5px #ffffff;   border-bottom: 1.5px var(--fourth-color) solid;
}
.msotrackboxformsub {
  width: calc(30% - 10px); margin-left: 10px;
}

}

@media (min-width: 1100px)  { 
.carcollectionbox { width: 70%; }  .carfilterbox { width: 30%; padding-right: 40px;} .box-section { width: 90%; max-width: 1200px; } 
.form-group  {width: 66%; } .form-group-second { width: 24%;} .sectbox {width: 50%; height: max-content;}
 .form-group-third { width:  33%;}
 .mainscreenone { background-color: #F1F4F5; height: 70vh; }
.mstboxonebox { width: 24.5%; } .inner-section {width: 50%;} .iconboxi { width: calc(33.5% - 10px) } .inner-section-left {padding-right: 40px; padding-bottom: 10px;}
  .inner-section-right {
  padding-left: 40px;
  }
}

/* ------------------------------------------------------------------------ Tracking page styling ----------------------------------------------------------------------------------------------*/

.trackingmain {
background-image: url(../graphic/caravan-trucks-road-sunset-created-with-generative-ai-technology_132358-10660.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;
width: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; height: max-content; 
}
.msotrackboxii{
bottom: -150px !important;
}
.shipresultsect {
width: 100%; height: max-content;  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
}
.shipresultboxest {
width: 100%; display: flex; align-items: end;  justify-content: space-between; color: #393E46;font-size: .9rem; padding: 10px 0px; margin-bottom: 15px; border-bottom: 1px solid #E8F3F8;
}
.shipresultboxest span {
  color: #001428; font-size: .8rem; font-weight: 600;
}

.shipresultsectone {
width: 100%; padding-right: 10px;
}
.shipresultsecttwo {
width: 100%; padding-left: 10px;
}
.shipresultbox {
width: 100%; border-radius: 3px; background-color: #FFFFFF; height: max-content;  box-shadow: 1px 1px 2px #00000017; padding: 25px 20px; margin-bottom: 20px; max-height: 450px;
overflow-y: auto;
}
.shipresultboxscroll {
  width: 100%; height: max-content; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.shipresultbox::-webkit-scrollbar {
  width: 4px;  
}
.shipresultbox::-webkit-scrollbar-track {
  background-color: transparent;
}
.shipresultbox::-webkit-scrollbar-thumb {
  background-color: #F5F5F5;
}
.shipresultbox::-webkit-scrollbar-thumb:hover {
  background-color: #E4E6E9;
}

.trackmapbox {
width: 100%; height: 400px;  border-radius: 3px;
}
.shipresultbox h3 {
font-size: 1rem; padding-bottom: 15px; font-weight: 600; width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between;
}
.shipresultbox h3 span {
padding: 4px 12px; border-radius: 30px; color: #4980AC; background-color: #E8F3F8; font-size: .7rem;
}
.shipresulttab {
width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 5px; background-color: #FAFAFA; height: max-content;
}
.shipresulttab img  {
width: 40px; height: 40px; margin-right: 5px; background-color: #F1F1F1; object-fit: contain; padding: 10px; border-radius: 2px;
}

.shipresulttab p {
width: calc(100% - 45px); color: #393E46; font-size: .9rem;
}
.shipresulttab p span {
  font-size: .6rem; font-weight: 600;
}
.trackline {
height: 20px; width: auto;
}

.shiplistingsect {
width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding-top: 40px; padding-bottom: 100px;
}
.shiplistingbox {
width: 100%; height: max-content; border-radius: 3px; box-shadow: 1px 1px 4px #00000036; background-color: #FFFFFF; margin-bottom: 20px; position: relative;
display: flex; align-items: center; justify-content: flex-start; padding: 10px 12px;
}
.shiplistingbox:hover, .shiplistingbox:active {
transform: scale(.998);
}
.shiplistingboxlnk {
width: 100%; height: 100%; position: absolute; z-index: 5; top: 0%; left: 0%;
}
.shiplistingboxmg {
width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; object-fit: contain; background-color: #F1F1F1; border-radius: 5px; padding: 15px;
}
.shiplistingboxcont {
width: calc(100% - 85px); padding: 5px 10px;
}
.shiplistingboxcontpi {
width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: .7rem;  height: 1.4rem; 
}
.shiplistingboxcontpi span {
  padding: 5px 15px; color: #003369; background-color: #E8F3F8; font-size: .7rem; border-radius: 26px; font-weight: 600;
}
.shiplistingboxcontpii {
color: var(--fifth-color); font-size: 1rem; font-weight: 600;
}

.emptytrackbox {
width: 100%; height: max-content; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.emptytrackbox img {
  width: 100%; margin-bottom: 20px; max-width: 350px;
}

.emptytrackbox p {
color: var(--primary-color); font-size: .9rem; text-align: center; max-width: 400px;
}
.trackclient {
width: 100%; font-size: .9rem; display: flex; align-items: center; padding-bottom: 5px; color: #393E46;
}
.trackclient span {
  font-size: .9rem; padding-right:  10px;  font-weight: 600; color: var(--fifth-color);
}
.clientshiptab {
width: 100%; border-radius: 3px; background-color: #FAFAFA; margin-top: 10px; padding: 10px;
}

@media (min-width: 1000px) {

.shipresultsectone {
width: 50%;
}
.shipresultsecttwo {
width: 50%;
}
.shiplistingbox {
  width: calc(50% - 10px);
}

}
/* ------------------------------------------------------------------------ login styling ----------------------------------------------------------------------------------------------*/

#lgnmain {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 50px; max-width: 700px; min-height: 80vh;
}
#lgnmain h1 {
font-size: 2rem;
}

#lgnmain p {
font-size: .9rem; color: #808080; 
}
.putbox,.signputbox {
width: 100%; height: 60px; margin-top: 10px;border-radius: 10px;
display: flex; justify-content: center;align-items: center; position: relative;
}
#loginform,#signupform {
width: 100%; height:max-content;padding: 10px; padding-top: 10vh;
}

.loginformput,.signupformput {
width: 100%; height: 100%; border: #A8BAC1 solid 1px; border-radius: 10px; padding: 10px; font-size: .9rem;
}
#loginformbtn,#signupformbtn {
width: 100%; height: 60px; color: #FFFFFF !important; background-color: #000000; font-size: .9rem;
border-radius: 10px; margin-bottom: 20px; margin-top: 30px;
}
.passeyebox {
position: absolute; width: max-content; height: max-content;right: 3%; display: flex; 
justify-content: center; align-items: center; z-index: 9; padding: 2px;
}
.passeyebox:active{
transform: scale(.96);
}
.passeyebox img {
width: auto; height: 24px;
}

#recoverpass {
width: 100%; text-align: end; color: #808080 !important; font-size: .9rem; font-weight: 590;
padding: 4px;
}

#tosignup span{
color: #098551 !important; text-decoration: underline; font-weight: 900;
} 
#tosignup {
width: 100%; color: #000000 !important; font-size: .9rem; padding: 4px;
}

.ls-box {
width: 100%; height: max-content; display: flex; border-radius: 16px; background-color: #FCEBEC;
}
.ls-box  img {
width: 20px; height: 20px; margin: 5px;
}
.ls-box p {
font-size: .4rem; color: #FF0000 !important; padding: 5px;
}

@media (min-width: 700px) {

  #signupform  {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  }
  .signputbox {
    max-width: 350px;
  }
  #loginform {
    width: 480px;
  }
}

/* -------------------------------------------------------------------------------------  user account ---------------------------------------------------------------------------------------------------- */

#accountsmain {
border: none; padding-bottom: 20px;
}
#userboxone {
width: 100%; height: 130px; border-radius: 10px; padding: 8px; background-color: #4980AC; display: flex; flex-direction: column; 
justify-content: space-between; margin-bottom: 26px;
}
.userboxonescreen {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between;
}
.userboxonescreen img {
background-color: #F7F5FE; width: 50px; height: 50px; border-radius: 100%; padding: 10px; 
margin-right: 10px;
}
.userboxonescreen h4 {
font-size: 1.2rem; color: #FFFFFF !important; width: 80%;
}

.userboxoneclk {
width: 30%; border: 2px #FFFFFF solid; height: 30px;border-radius: 12px; color: #FFFFFF !important; display: flex; justify-content: center;
align-items: center; font-size: .8rem; 
}
#userboxtwo {
width: 100%; height: max-content; margin-bottom: 26px; padding: 8px; max-width: 740px; padding-bottom: 26px;
}
.userboxtwoscreen {
width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; 
}
.userboxtwoscreen h5 {
color: #000000; font-size: .9rem;
}
.userboxtwoscreen a {
color: #000000 !important; font-size: .8rem; display: flex; justify-content: center; align-items: center; padding: 5px 8px 5px 8px;
}
.userboxtwoscreentwo {
width: 100%; display: flex; flex-wrap: wrap; align-items: center; 
}
.userboxtwoclk {
width: 48%; border: solid #000000 2px; height: 50px; display: flex; align-items: center; border-radius: 26px; margin: 10px 2% 0px 0px;
position: relative; padding: 10px; overflow: visible; max-width: 180px;
}
.userboxtwoclk img {
height: 24px; width: auto;  border-radius:  100%; margin-right: 12px;
}
.userboxtwoclk h6 {
font-size: .8rem; 
}
.userboxtwoclk a {
z-index: 99; width: 100%; height: 100%; position: absolute; top: 0%; left: 0%;
}

.userboxtwoclkcount {
position: absolute; top: -12%; right: -1%; width: 20px; height: 20px; background-color: #000000; border-radius: 100%; 
display: flex; justify-content: center; align-items: center; color: #FFFFFF !important; font-size: .8rem; border: solid 3px #FFFFFF;
}

#userboxthree {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; border-top: solid 2px #F1F4F5; padding-top: 10px;
padding-bottom: 26px; justify-content: space-between;
}
#userboxthree h2 {
width: 100%; font-size: 1rem; padding-bottom: 10px;
}

/* ----------------------------------------------------------- admin styling ----------------------------------------------------------------------------------*/
.adminmainscreen {
background-image: url(../graphic/caravan-trucks-road-sunset-created-with-generative-ai-technology_132358-10660.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;
width: 100%; height: 250px; display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; 
}
.admin-main {
display: flex; align-items: flex-start; justify-content:center; padding: 40px 20px 0px 20px; width: 100%; min-height: 400px;
}
.admin-box-intro {
  width: 100%; font-weight: 600; font-size: 2rem; padding-bottom: 40px;
}
.admin-mainintrobox {
  width: 100%; height: max-content; border-radius: 4px; background-color: #FFFFFF; box-shadow: 1px 1px 20px #00000017; margin-bottom: 20px; position: relative;
  display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px;
}
.admin-mainintrobox  a {
  position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;
}
.admin-mainintrobox img {
  width: 60px; height: auto; margin-bottom: 10px;
}
.admin-mainintrobox:hover {
  transform: scale(1.02);
}
.admin-mainintrobox p {
  color: #001428; font-size: 1rem;
}
.admin-box {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; 
}

@media (min-width: 700px) { 
  .admin-mainintrobox {
    width: 33%;
  }

}

@media (min-width: 1100px) { 
  .admin-mainintrobox {
    width: 24.2%;
  }
}

/* -----------------------------------------------------profile form ------------------------------------- */
.my-accountmain{
  padding-top: 120px;
}
.profile-form {
  max-width: 600px; margin: 0 auto; background-color: #f9f9f9; padding: 20px; border-radius: 8px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.profile-form h3 {
  text-align: center; margin-bottom: 20px;
}

.profile-form .form-box {
  margin-bottom: 15px;
}

.profile-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="password"] {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.profile-form button {
  width: 100%;
  padding: 10px;
  background-color: var(--fourth-color) ;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.profile-form button:hover {
  background-color: #001428;
}
.password-container {
display: flex;
align-items: center; position: relative;
}

.toggle-password {
background: none; border: none;cursor: pointer; position: absolute;   z-index: 8; right: 0%; padding: 10px; margin-right: 10px ;
}

/* -----------------------------------------------------------------------  control styling ---------------------------------------------------------------------- */
#reftest {
  width: 100%; padding-bottom: 10px;
}
.addformputheld {
display: flex; align-items: center; justify-content: flex-start; background-color: #F1F1F1;
}
.controltop {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px #000000 solid; 
}
.control-top-box {
  padding-bottom: 0px !important;
}
.controltop h3 {
font-size: .9rem;
}
.controltop h4 {
font-size: 2rem;
}

.addformsection  {
width: 100%; height: max-content; background-color:  #FFFFFF; border: 1px solid #e4e6e9;  border-radius: 8px;  margin-bottom: 20px;
}
.addformsectpush {
padding: 20px 10px; border-bottom: solid 1px #E4E6E9;
}
.addformsectdrop {
padding: 20px 10px; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between;
}


.controlbox { 
width: 100%; height: max-content;
}
#additemform {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center;
}
.addformbox {
width: max-content; height: max-content; width: 100%; max-width: 410px; margin-bottom: 10px;
}
.addformbox label {
font-size: .8rem;
}
.addformput,#pchecksel {
width: 100%; max-width: 410px; height: 50px; border: solid #A8BAC1 1px; padding: 10px; border-radius: 4px; font-size: .8rem;
}
#promoalertest {
font-size: .7rem; color: #ACD0A0; border: 1px solid #ACD0A0; width: max-content; height: max-content; padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
.addformtext {
width: 100%; height: 200px; border: solid #A8BAC1 1px; padding: 10px; border-radius: 4px; font-size: .8rem;
}
#addformbtn{
width: 100%; height: 50px; border-radius: 4px; color: #FFFFFF !important; background-color: #000000; max-width: 410px;
}
#addformmg {
width: 100%; border-radius: 4px; max-width: 360px;display: flex; padding: 12px ; margin-bottom: 10px;  height: 50px;
border: solid #A8BAC1 1px;
}
#controlalert {
width: max-content; max-width: 100%; padding: 4px; display: flex; align-items: center;
border: solid 1px #FF0000; background-color: #EF8F8F; margin: 2px;
}
#controlalert img {
width: 18px; height: 18px; margin-right: 10px;
}
#controlalert span {
font-size: .8rem; 
}
#currdateest {
width: 100%; color: #4b0505 ; font-size: .8rem; padding: 5px 0px;
}
.labelnote {
  color: #4b0505 ; font-size: .8rem; 
}
#currdateest span {
color: #000000;
}

@media (min-width: 700px) { 
.addformbox {
  width: 33%; min-width: 340px;  margin-bottom: 30px;
  }
  .addformput,#addformbtn {
  height: 45px;
  }
  #addformbtn {
  width: 100%; margin-top: .8rem;
  }
  .addformtext {
  height: 150px;
  }
  .textformbox {
  max-width: 500px; width: 30%;
  }
  #addformmg {
  margin-right: 10px; height: 45px;
  }
}

/* ------------------------------------------------------------------------------------------------------footer styling ------------------------------------------ */

.bottomcont {
width: 100%; height: max-content; display: flex;flex-wrap: wrap; flex-direction: column; background: var(--fifth-color); align-items: center; padding: 60px 20px 40px 20px;
justify-content: flex-end;   min-height: 200px; 
}

.bottomcontsect {
padding-bottom: 20px; 
}
.bottomcontsecti {
border-top: #011830 solid 1px; padding-top: 20px;
}
.bottomcontsectv {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; 
}
.bottomblock {
width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-bottom: 30px;
}

.footer_p {
  font-size: .8rem !important; color: #F4F4F4; padding-bottom: 10px; font-weight: 300 !important;
}
.footer_menu {
display: flex; flex-direction: column; align-items: flex-start !important; justify-content: flex-start; 
}
.footer-menu-items {
  width: 100%; padding-bottom: 10px; border: none !important; 
}
.footer-menu-items a {
text-align: left !important; color: #F4F4F4 !important;   font-weight: 300 !important; margin: 0%; font-size: .8rem !important;
}
.footer_heading {
  font-size: 1rem; font-weight: 500; padding-bottom: 14px;  color: #FFFFFF ; 
}

#pyrextag {
width: 54%; height: auto;  position: relative; 
}

#pyrextag img {
  width: 100%; height: auto; 
 }

 .footericonbox {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; 
 }
 .footericonbox a {
  width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background-color: var(--sec-color); border-radius: 100%;  padding: 7px;
 }
 .footericon {
  width: 100%; height: auto; 
 }
@media (min-width: 700px)  { 
  #pyrextag  {width: 30%;}
  .bottomblock {width: 30%;}
}
@media (min-width: 1200px)  {
  #pyrextag  {width: 18%;}
  .bottomblock {
    width: 21%; padding-right: 20px;
  }
  .bottomblock-first {
    width: 35%; padding-right: 40px;
  }
  .footer_p {
    max-width: 300px;
  }
 }

 /* --------------------------------------------------------------------------- Support styling------------------------------------------------------------------------------------- */

.contactdetail {
  width: max-content; height: max-content; list-style: none;   color: #000000 !important; display: flex; align-items: center; justify-content: center; padding-top: 10px;
}
.contactdetailmg {
  width: 16px; height: auto; margin-right: 6px;
}
.contactdetailspan {
  font-size: 1rem; font-weight: 600; color: var(--fifth-color);
}
.reachpara {
  padding-bottom: 30px !important; color: #6B6E74 !important; font-size: 1rem !important; padding-top: 5px;
}


  .vrsintro {
  font-size: 1.5rem; font-weight: 500; padding-bottom: 40px; padding-top: 5px; width: 100%;
  }
  #contactForm, #myForm {
  width: 100%; height: max-content !important; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding-top: 30px;
  }
  .formsplitone, .formsplittwo {
  width: 100%; height: max-content;
  }
  .cformputbox {
  width: 100%; padding-bottom: 20px; display: flex; flex-direction: column; overflow: hidden;
  position: relative;
  }
  
  .cfcomp {
  box-sizing: border-box; border-radius: 0% !important; height: 35px !important; font-size: .9rem!important; box-shadow: none !important;
  margin-top: 5px; border: none !important; font-weight:400 !important; font-size: .8rem !important;
  color: #000000 !important; padding: 5px 10px; text-align: left; border: none !important;
  }
  .cformputbox label {
  width: 100%; font-size: 1rem !important;
  }
  .cfput {
  width: 100%; border: none; margin: 0px; padding: 5px 10px;  font-weight: 400 !important; border: solid 1px #d9d9d9 !important;
  background-color: #FFFFFF !important; height: 45px !important;
  }
  #location,.cfdrop {
  width: 30%; box-sizing: border-box; background-color: #FFFFFF; background-color: #E8F3F8 !important; padding: 5px 10px; font-size: .9rem;
  width: 100%; height: 45px !important;
  }
  #message {
  height: 60px !important; background-color: #ffffff !important; padding: 5px 10px;
  }
  
  #subbtn {
  width: 100%; background-color: var(--fifth-color) !important; color: #FFFFFF !important; display: flex; align-items: center; justify-content: center;
  height: 45px !important;
  }
  #subbtn:active {
  transform: scale(.95);
  }
  #description, #address {
  height: 65px !important;
  }
  .cfintro {
  font-size: 1.2rem; font-weight: 500; padding-bottom: 5px; text-transform: capitalize;
  }
  .success-alert {
  width: 100%; height: max-content;
  }
  @media (min-width: 1200px)  {
.formsplitone {
width: 40%; height: max-content; padding-right: 30px;
 }
 .formsplittwo {
  width: 60%; height: max-content;
}
  .cformputbox { padding-bottom: 10px !important;}
  }

  .aboutintro {
    padding-bottom: 10px; font-size: 1.2rem; font-family: fontone; font-weight: 600;
  }
  .about-section {
    min-height: 400px; padding-bottom: 30px ;
  }
  .aboutsecttwo {
    padding: 0px 20px 0px 20px !important; min-height: max-content;
  }
  .aboutsectii {
    padding-top: 40px ;
  }
  .aboutpara {
    padding-bottom: 40px !important; font-size: 1rem; color: #393E46;
  }
  
  .intropara {
    color: #393E46; padding-bottom: 30px;
  }
  
  @media (min-width: 700px)  { 
    #viewmain {
      display: flex; justify-content: space-between; align-items: flex-start; height: max-content;
      }
      
      #itemshowbox{
      width: 100%; height:max-content; overflow-y: auto; overflow-x: hidden; padding: 0px 10px; flex-direction: column; align-items: flex-start;
      justify-content:flex-start; 
      }
      #sideshowbox {
      width: 100%; height: 48vw; display: flex;  justify-content: center; flex-wrap: wrap; align-items: flex-start; left: 0%;
      }
      .itempreviewmg {
      height: 100%; width: auto;
      }
   }
  @media (min-width: 1200px)  {
    #itemshowbox{
    width: 100%; overflow-y: auto; overflow-x: hidden;  padding: 0px !important; 
    }
    .viewboxsections {
      width: 70%; height: max-content; 
      }
      .viewsidebarbox {
      width: 30%; height: max-content;  padding: 10px; padding-top: 0px; 
      }
        .deskviewprice {
        width: 100%; border: solid 1px #E4E6E9; background-color: #FFFFFF; border-radius: 5px; padding: 15px;
        }
      #itemshowbox{
      width: 100%; overflow-y: auto; overflow-x: hidden;  padding: 0px !important; 
      }
      .idb-recomendbox {
      width: 50%; height: 100vh;  overflow-y:auto; display: inline; padding: 10px 0px 100px 2vw; 
      }
      
      #sideshowbox {
      width: 100%; height: 75vh; display: flex;  justify-content: center; flex-wrap: wrap; align-items: flex-start; padding: 0% !important; margin: 0% !important; left: 0%;
      }
   }