/* single row for shatis company details */
.shatisBaseStructure{
  display: block;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 40px;
}

.shatisContactsBase{
  color: #484846d8;
  /* padding: 0.8rem; */
  container-type: inline-size;
  border: 1px solid #084b048b;
  border-radius:45px;
  padding-bottom: 30px;
}

.shatisContactsBase h1{
  font-size: clamp(1rem, 6cqw, 3rem);
  text-transform: capitalize;
  margin: 0 0 0.25em 0;
  padding: 0;
  color: rgba(231, 151, 33, 0.826);
  -webkit-text-stroke: 0.09rem #189811;
  paint-order: stroke;
}

.shatisContactsBase h3{
  color: rgba(231, 151, 33, 0.826);
  font-size: 120%;
  margin-top: 0.5em;
  text-transform: capitalize;
}

.shatisTopHeading{
  padding: 0;
  padding: 0.5em 0 0 0;
  text-align: center;
  position: relative;
  z-index: 10;
  color: rgba(244, 82, 147, 0.8);
}

.shatisTopHeading h1{
  font-family: "KaushanScript", sans-serif;
  
  
  
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: capitalize;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.566);
  animation:
    textBg 3s ease-in-out alternate,
    h1Movement 3s ease-in-out alternate;
}

.shatisTopHeading p{
  margin: -0.3em auto 0 auto;
  font-size: 110%;
  color: #484846d8;
  
  animation: fadeInUp 1s ease-out 0.3s both;

  text-transform: lowercase;
  text-justify: auto;
}

.shatisTopHeading a{
    color: darkgreen;
  }

.shatisTopHeading a:hover{
    color: #189811;
    text-decoration: underline;
  }

@media (width <= 899px){
  .shatisTopHeading p{ 
    font-size: 2.6vw;
  }
}


/*topHeading class begins */
.topHeading {
  padding: 0.5em 0 0 0;
  text-align: center;
  position: relative;
  z-index: 10;
  color: rgba(244, 82, 147, 0.8);
}

.customerHeading{
  text-align: center;
  text-transform: none;
}

.customerHeading h2{
  margin: 1rem 0;
}

.customerHeading h2::first-letter {
  text-transform: uppercase;
}

/* .topHeading h1 {
  font-family: "KaushanScript", sans-serif;
  /* font-size: clamp(3rem, 6vw, 5rem); */
  /* font-size: 5vw; */
  /*color: white;*/
  /* margin-bottom: 20px;
  font-weight: 700;
  text-transform: capitalize;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.566);
  animation:
    textBg 3s ease-in-out alternate,
    h1Movement 3s ease-in-out alternate; */
/*} */

/* single item per row on small screens and 2 items per row on larger screens using css flexbox start */
/* home flex container */
.customerFlexBaseStructure{
  display: flex;
  flex-wrap: wrap; /* allows items to drop to the next row */
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 40px;
}

/* flex items, mobile first: 1 item per row */
.customerFlexItem{
  flex: 1 1 100%; /* flex basis takes up 100% of the row width*/
  /* background-color: #293f50; */
  color: #484846d8;
  padding: 1rem;
  container-type: inline-size;
  /* box-shadow: 1px 1px 20px -8px #fe7903; */
  border: 1px solid #084b048b;
  border-radius: 15px;
}

.customerFlexItem:hover{
  box-shadow: 1px 1px 20px -8px rgba(231, 151, 33, 0.826);
}

/* .customerFlexItem label{
  padding: 0;
  font-size: 0.8rem;
  text-transform: capitalize;
  color: #fff;
  -webkit-text-stroke: 0.09rem #fe7903;
  paint-order: stroke;
} */

.customerFlexItem h1{
  /* font-size: 1em; */
  font-size: clamp(1rem, 6cqw, 3rem);
  text-transform: capitalize;
  margin: 0 0 0.25em 0;
  padding: 0;
  /* background-color: #03fe63; */
  text-align: left;
  color:rgba(231, 151, 33, 0.826);
  -webkit-text-stroke: 0.09rem #189811;
  paint-order: stroke;
}

.customerFlexItem h3{
  color:rgba(231, 151, 33, 0.826);
  font-size: 0.96em;
  margin-top: 0.5em;
  text-transform: capitalize;
}

.customerFlexItemContent{
  font-size: 95%;
}

.customerFlexItemContent p{
  margin: 0.5em 0 0 0;
  font-weight: 500;
}

.customerFlexItemContent a{
    color: darkgreen;
  }

.customerFlexItemContent a:hover{
    color: #189811;
    text-decoration: underline;
  }

/* single item per row on small screens and 2 items per row on larger screens using css flexbox ends */

/* flex items for larger screens, 2 items per row */
@media (min-width: 600px) {
  .customerFlexItem{
    /* flex basis takes up 50% of the row width, minus half width of parent container gap */
    flex: 0 0 calc(50% - 8px);
    padding: 0.8rem; 
  }

  /* .customerFlexItem h1{
    font-size: 2.14vw;
  } */

  .customerAddress{
    padding: 0;
    margin: 0;
  }
}



/* parent flex container start */
.parentFlexContainer{
  display: flex;
  /* flex-direction row or column */
  flex-direction: row;
  /* flex-wrap allows items to adjust for responsive */
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

/* child flex container starts */

/* child flex container which is both a flex item and a flex container */
.childFlexContainer{
  flex: 1 1 calc(25%); /* shorthand for (grow: 1, shrink: 1, sets a base responsive basis width: of 300px */
  /* defines a nested inner child flex container inside nested child flex container */
  display: flex;
  /* aligns nested inner child direction */
  flex-direction: row;
  /* inner child flex container flex-wrap allows internal nested items to stack on small screens */
  flex-wrap: wrap;
  gap: 50px;
}

/* inner child container item starts */
.innerChildContainerItem{
  flex: 1 1 calc(33.33%); /* wraps when screens hit mobile dimensions */
  background-color:blueviolet ;
  padding: 10px;
  max-width: 400px;
}
/* inner child container item ends */
/* sibling item of child flex container but is not a flex container */
.sibling-item{
  flex: 1 1 200px;
  background-color: crimson;
}

/* child flex container ends */

/* media query for responsive mobile changes */
@media(width < 400px){
  .parentFlexContainer{
    flex-direction: column;
  }
  .innerChildContainerItem{
    flex-direction: column;
    /* max-width: 100%; */
    flex: 1 1 100%;
  }
  .parentFlexContainer{
    flex-direction: column;
  }
}

@media(400px <= width < 899px){
  .innerChildContainerItem{
    flex: 1 1 50%;
    flex-direction: row;
  }
}
/* parent flex container ends */



/* start of with mobile-first default - 1 column */
.customerContainer{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.customerContainerColumn{
  flex: 1 1 100%; /* shorthand for (grow: 1, shrink: 1, basis: 100% */ 
}

@media (width < 899px){
  .customerContainerColumn{
    /* flex-basis uses calc method for column percentage width and gap width */
    flex-basis: calc(50% - 10px);
    min-width: 600px; 
  }
}

@media (899px <= width ){
  .customerContainerColumn{
    /* flex-basis uses calc method for column percentage width and gap width */
    flex-basis: calc(25% - 10px);
  }
}

/* @media (width >= 1100px){
  .customerContainerColumn{
    /* flex-basis uses calc method for column percentage width and gap width */
    /* flex-basis: calc(25% - 10px);  */
  /* } */
/* } */ 

.formContentItem{
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out both, itemFloat 6s ease-in-out both;
    margin: 0 auto;
    width: 100%;
    text-align: left;
    text-transform: lowercase;
    flex-basis: 33.33%;
    flex: 0 0 calc(33.33% - 6.7px);
    box-sizing: border-box;
}

.customerContent{
  border: 0;
  margin: 0 1em;
  padding: 0;
}

.customerContent label{
  padding: 1em;
  font-size: 0.8rem;
  text-transform: capitalize;
  color: #fff;
  -webkit-text-stroke: 0.09rem #fe7903;
  paint-order: stroke;
}



.customerContentGrid{
    display:flex;
    flex-direction: row;
    /*grid: auto auto / auto auto auto auto;*/
    /* grid-template-columns: 1fr 1fr 1fr;  Three equal columns */
    gap: 3rem;  /*Space between rows and columns */
    margin: 1% 0;
}

.radioSelection {
    background: rgba(226, 64, 64, 0.532);
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 15px;
    margin: 0;
    padding: 2%;
    border: 1px solid rgba(244, 82, 147, 0.8);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width:100%;
    z-index: 1;
    text-transform: capitalize;
}

.radioSelectionCheckbox {
    background: rgba(226, 64, 64, 0.532);
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 15px;
    margin: 0;
    padding: 2%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width:100%;
    z-index: 1;
    text-transform: capitalize;
}

/*form { 

  border: 1px solid #cc56a5; 
  border-radius: 5px; 
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 
  overflow: hidden; 
  width:auto; 
} */
 
*, 
*:before, 
*:after { 
   box-sizing: border-box; 
} 
form { 
  border: 1px solid #c6c7cc; 
  border-radius: 5px; 
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 
  overflow: hidden; 
  width: 100%; 
} 
fieldset { 
  border: 0; 
  margin: 0; 
  padding: 0; 
} 
input { 
  border-radius: 5px; 
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 
  margin: 0; 
} 
.account-info { 
  padding: 0 20px; 
} 
/* .account-info label { 
  color: #395870; 
  display: block; 
  font-weight: bold; 
  padding: 1em 0 0 0; 
}  */


.account-info input { 
  background: #fff; 
  border: 1px solid #c6c7cc; 
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); 
  color: #636466; 
  padding: 6px; 
  margin-top: 6px; 
  width: 100%; 
} 
.account-action { 
  background: #f0f0f2; 
  border-top: 1px solid #c6c7cc; 
  padding: 20px; 
} 
.account-action .btn { 
  background: linear-gradient(#49708f, #293f50); 
  border: 0; 
  color: #fff; 
  cursor: pointer; 
  font-weight: bold; 
  float: left; 
  padding: 8px 16px; 
} 
.account-action label { 
  color: #7c7c80; 
  font-size: 12px; 
  float: left; 
  margin: 10px 0 0 20px; 
}