*{
  margin: 0;
  padding: 0;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
*,
*::before,
*::after{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
  scroll-padding top: 5ems;
}
img{
  max-width: 100%;
  height: auto;
  display: block;
}
img{
  vertical-align: bottom;
}
picture {
max-width: 100%;
display: block;
}
:root{
--ff-body:'Roboto';
--ff-headline:'Oswald';
--light:#fff;
--dark:#000;
--v-light-yellow:#fde2af;
--light-yellow:#ffcb05;
--dark-yellow: #ffaa17;
/* --dark-yellow:#f7b538; */
--v-light-gray:#a7a9ac;
--light-gray:#333333;
--dark-gray:#1c1e22;
--dark-blue:#141e2e;
--background-gray:#3d485a;
}
figure{}
figcaption{}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
h1{
  font-size: clamp(16px, 2vw, 32px);
  font-family: var(--ff-headline);
  font-weight: 700;
  text-transform: uppercase;
  /* line-height: 38px; */
  /* text-shadow: 1px 2px 4px rgba(0,0,0,0.25); */
}
h2{
  font-size: clamp(16px, 2vw, 24px);
  font-family: var(--ff-headline);
  font-weight: 500;
  text-transform: uppercase;
  /* line-height: 20px; */

}
h3{
  font-size: 18px;
  font-family: var(--ff-headline);
  font-weight: 500;
  text-transform: uppercase;
}
p{
  /* font-size: clamp(14px, 1.2vw, 16px); */
  font-size: 14px;
  font-family: var(--ff-body);
  font-weight: 300;
  text-align: justify;
  letter-spacing: 1px;
  color: var(--dark-gray);
}
button{
  outline: 0;
  border: 0;
  background: transparent;
}
.btn a{
  width: 160px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 20px;
  border-radius: 5px;
  font-size: 16px;
  font-family: var(--ff-body);
  font-weight: 300;
  color: var(--light);
  background-color: var(--dark-yellow);
  text-decoration: none;
}
.btn a:hover{
  color: var(--light-gray);
  background-color: var(--light);
  border: 1px solid var(--dark-yellow);
  text-decoration: none;
}
section{
  width: 100%;
  max-width: 1920px;
  margin: auto;
  height: auto;
  display: block;
}
.container{
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: auto;
  padding-inline: 20px;
}
.welcome-band{
  width: 100%;
  height: auto;
  background-color: var(--v-light-yellow);
}
.extra-links-top{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items:center ;
  justify-content: space-between;
  padding-block: 10px;
}
.extra-links-top p{
  font-size: 12px;
  font-weight: 400;
  color: var(--dark-gray);
}
.extra-links-top a{
  font-size: 12px;
  font-weight: 400;
  color: var(--dark-gray);
  text-decoration: none;
}
.extra-links-top a:hover{
  color: var(--dark-yellow);
  text-decoration: none;
}
.logo{
  width: 100%;
  height: auto;
  margin: auto;
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baseline{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baseline h2{
  font-size: clamp(16px, 2vw, 18px);
  letter-spacing: 5px;
  padding-bottom: 10px;
  color: var(--v-light-gray);
  text-decoration: overline;
}
header{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.top-nav{
  width: 100%;
  max-width: 62.5em; /*1000px*/
  margin: 0.625em auto; /*10px*/
}
.top-nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; 
}
.top-nav li {
  list-style-type: none;
}
.top-nav a {
  text-decoration:none;
  color: var(--dark-gray);
  font-size: 1rem; /* 18px; */
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  letter-spacing: 0.063em; /* 1px; */
  text-transform: uppercase;
}
.top-nav a:hover {
  color: var(--dark-yellow);
  text-decoration: none;
}
/* menu responsive */
.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  background: var(--dark-gray);
  height: 3px;
  width: 30px;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}
.hamburger::before {
  transform: translateY(-6px);
}
.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}
.open .hamburger::before {
  opacity: 0;
}
.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}
.menu-toggle {
  padding: 20px 15px;
  cursor: pointer;
  display: none;
  border-radius: 3px;
  background-color: var(--dark-yellow);
}
/* down arrow btn */

#down-arrow-btn {
  width: 100%;
  height: auto;
  margin: auto;
  display: block;
}
#down-arrow-btn a {
  color: var(--dark-yellow);
  text-decoration: none;
}
.arrow {
  text-align: center;
  margin: 25px 0px;
}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
/* down arrow btn end */
/* ----------------------------------Home page------------------------------*/
.welcome-text p, .intro-text p, .inner-page-text p{
  width: 100%;
  height: auto;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 200;
  line-height: 30px;
  text-indent: 24px;
  padding-block: 20px;
}
.welcome-text p span, .intro-text p span, .inner-page-text p span{
  text-transform: uppercase;
  font-weight: 300;
}
.intro{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-block: 20px;
}
.intro-text{
  width: 50%;
  height: auto;
}
.intro-text p{
  padding: 20px;
}

.intro-product{
  width: 50%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-text button{
  margin-left: 20px;
}
.home-applications{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-block: 25px;
}
.home-applications-heading{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-block: 40px;
  padding-left: 25px;
  background-image: url(../images/walking-man-sm.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}
.home-applications-heading h1{
  /* font-size: 38px; */
  color: var(--light);
}
.home-applications-heading h2{
  /* font-size: 28px; */
  color: var(--v-light-gray);
}
.home-applications-heading h3{
  /* font-size: 20px; */
  color: var(--v-light-gray);
}
.home-applications-gallery{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-block: 20px;
}
.item01{
  width: 275px;
  height: 275px;
  display: block;
}
.home-why-us{
  width: 100%;
  height: auto;
  display: block;
  padding-block: 50px;
  display: flex;
  flex-wrap: wrap;
}
.home-why-us-img{
  width: 50%;
  height: auto;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;

}

.home-why-us-text{
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-inline: 20px;
}
.home-why-us-text h1{
  font-size: clamp(18px, 3vw, 28px);
  line-height: 32px;
  font-weight: 500;
  color: var(--light-gray);
}
.home-why-us-text h2{
  font-size: clamp(16px, 2vw, 24px);
  line-height: 28px;
  color: var(--dark-yellow);
  padding-block: 20px;
}
.home-why-us-text h3{
  font-size: clamp(16px, 2vw, 18px);
  padding-block: 10px;
  letter-spacing: 1px;
  color: var(--light-gray);
}
.home-why-us-text p{
  width: 100%;
  height: auto;
  font-size: clamp( 14px, 1.5vw, 18px);
  line-height: 20px;
  text-align: left;
}
.promo{
  background-color:#fef3df;
}
.promotion{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap:20px;
  padding-block: 50px;
  padding-inline: 20px;
}
.video, .download{
  width: 50%;
  display: flex;
  flex-direction: column;
  flex: 1 1 275px;
}
.video h2, .download h2{
  font-size: clamp(14px, 2vw, 20px);
  padding-bottom: 20px;
  padding-left: 20px;
  /* text-shadow: 1px 2px 4px rgba(0,0,0,0.25); */
}
.responsive {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}
.responsive iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* .video-bg{
  width: 100%;
  max-width: 1920px;
  height: auto;
}
@media (min-aspect-ratio: 16/9){
	.video-bg{
	width: 100%;
	height:auto;
	}
}
@media (max-aspect-ratio: 16/9){
	.video{
	width: auto;
	height:100%;
	} */
.location{
  background-color: #feebc7;
}
.map{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-block: 30px;
}
.map h2{
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 900;
  color: var(--light-gray);
  padding-bottom: 20px;
  padding-left: 20px;
  /* text-shadow: 1px 2px 4px rgba(0,0,0,0.25); */
}
.map iframe{
  width: 100%;
  height: 300px;
}

/*------------------------------About-page------------------------------------*/
.hero, .hero-mobile{
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
  padding-bottom: 20px;
}
.hero-mobile{
  display: none;
}
.inner-page-text p{
  padding-bottom: 40px;
}

.inner-page-text h1{
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 500;
  color: var(--light-gray);
}
.mission{
  padding-block: 40px;
}
.mission p{
  color: var(--light);
  font-size: clamp(14px, 2vw, 24px);
  font-weight: 100;
  line-height: 26px;
  padding: 20px;
}
.mission h2{
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 400;
  color: var(--light);
  border-left: 2px solid var(--dark-yellow);
  padding-left: 20px;
  letter-spacing: 1px;
  /* text-transform: uppercase; */
}
/* image only--*/
.vision{
  background-image: url(../images/wall.jpg);
  background-repeat: repeat;
}

/*--------------------------------------------------product page--------------*/
.features-main{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}
.features-main h1{
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 400;
  color: var(--light);
  padding-block: 20px;
}
.features-row{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;

  /* gap: 20px; */
}
.features-row-one, .features-row-two{
  width: 50%;
  height: auto;
  display: block;
}
.features{
  width: 100%;
  height: auto;
  display: flex;
  padding-block: 20px;
}
.features-icon{
  width: 10%;
  height: auto;
  display: block;
}
.features-text{
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 30px;
}
.features-text h2 {
  font-size: 18px;
  /* font-size: clamp(1rem, 1.5vw, 24px); */
  font-weight: 400;
  color: var(--dark-yellow);
  padding-bottom: 5px;
  letter-spacing: 1px;
}

.features-text p{
    width: 100%;
    height: auto;
    color: var(--light);
    font-size: 16px;
    /* font-size: clamp(14px, 2vw, 20px); */
    line-height: 20px;
}
.specification{
  width: 100%;
  height: auto;
  padding-block: 25px;
  display: flex;
  flex-direction: column;
}
.specification h1{
  font-size: clamp(1rem, 1.5vw, 2rem);
  font-weight: 400;
  color: var(--dark-gray);
  padding: 20px 20px 20px 0px;
}
.specific{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;

}
.process-01, .process-02, .process-03, .process-04,
.specific-01, .specific-02, .specific-03{
  /* width: max(25%, 275px); */
  width: 265px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:end;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.process-01 h2, .process-02 h2, .process-03 h2, .process-04 h2,
.specific-01 h2, .specific-02 h2, .specific-03 h2{
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--dark-yellow);
  /* padding-bottom: 5px; */
  letter-spacing: 1px;
}
.process-01 h2, .process-02 h2, .process-03 h2, .process-04 h2{
  text-align: center;
  line-height: 20px;
  padding-bottom: 20px;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.5);

}
.specific-01 p, .specific-02 p, .specific-03 p, .specific-03 p{
  color: var(--light);
  padding-bottom: 20px;

}
.specific-01{
  background-image: url(../images/speci-icon-temp.jpg);
}
.specific-03{
  background-image: url(../images/speci-icon-storage.jpg);
}
.specific-02{
  background-image: url(../images/speci-icon-appli.jpg);
}
.specific-04{
  background-image: url(../images/speci-icon-appli.jpg);
}

.process-01{
  background-image: url(../images/appli-process-01.jpg);
}
.process-02{
  background-image: url(../images/appli-process-02.jpg);
}
.process-03{
  background-image: url(../images/appli-process-03.jpg);
}
.process-04{
  background-image: url(../images/appli-process-04.jpg);
}
/*------------------------Application- & Why Us-------------------*/
.application-gallery{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.application-img{
  width: 50%;
  height: auto;
}
.application-text{
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  gap:20px;
}

.application-text h3{
  font-size: 18px;
  color: var(--dark-yellow);
  font-weight: 400;
  text-transform: uppercase;
  width: 100%;
  height: auto;
  padding-bottom:10px ;
  letter-spacing: 1px;
}
.application-text h3 span{
  text-transform:none;
  color:var(--light);
}
.application-text p{
  width: 100%;
  height: auto;
  font-size: 14px;
  line-height: 18px;
  text-align: justify;
  color: var(--light);
}
#application-sub-title h2{
  font-size: 24px;
  /* font-size: clamp(1rem, 1.5vw, 24px); */
  font-weight: 400;
  color: var(--light);
  padding-block: 25px;
  letter-spacing: 1px;
  line-height: 28px;
  text-align: center;
}
.addition-application{
  padding-block: 25px;
}
.addition-application p{
  font-size: 16px;
  color: var(--light);
  text-align: left;
}
.addition-application h3{
  font-size: 18px;
  font-weight: 400;
  color: var(--dark-yellow);
  padding-bottom: 10px;
  letter-spacing: 1px;
}
.addi-appli-list{
  width: 100%;
  height: auto;
  display: flex;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--light);
  flex-wrap: wrap;
}
.addi-appli-list li{
  list-style-type: none;
  padding-inline: 5px;
}

.safety{
  border-top: 1px dashed var(--light);
}
.addition-application i{
  font-size: 14px;
  color: var(--dark-yellow);
  padding-inline: 5px;
}
.cold-mix-intro{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding-block: 20px;
}
.cold-mix-intro-text{
  width: 65%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-inline: 20px;
}
.cold-mix-intro-text h1{
  font-size: 28px;
  font-weight: 400;
  text-align: left;
  color: var(--light-gray);
  letter-spacing: 1px;
  text-transform: none;
}
.cold-mix-intro-text h2{
  font-size: 24px;
  font-weight: 400;
  text-align: left;
  color: var(--dark-yellow);
  letter-spacing: 1px;
  padding-block: 20px;
}
.cold-mix-intro-text p{
  font-size: 16px;
  font-weight: 300;
  text-align: justify;
  color: var(--dark-gray);
}
.cold-mix-intro-visual{
  width: 30%;
  height: auto;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}
--------------------------- Contact Page ------------------------------->
.contact {
  width: 100%;
  /* max-width: 1260px; */
  height: auto;
  display: block;
  /* flex-direction: column;
  margin: auto; */
  /* padding: 40px; */
}
.contact-list {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
}
.address {
  /* width: 46%; */
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 40px;
  margin: 0% 2% 4%;
  box-shadow: 7px 7px 10px 0px rgba(50, 50, 50, 0.2);
  background-color: var(--v-light-yellow);
  flex: 1 1 275px;
}
.address p {
  line-height: 18px;
  text-align: left;padding: 5px;
}
.address p span{
  font-weight: 500;
}
.address p a{
  color: var(--dark-gray);
  text-decoration: none;
}
.address p a:hover{
  color: var(--dark-yellow);
  text-decoration: none;
}
.address h3{
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
}
.map-contact-page {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 25px;

}
.map-contact-page iframe{
  flex: 1 1 275px;
  height: 400px;
}
.feedback {
  /* width: 46%; */
  height: auto;
  margin: 0% 2% 4%;
  padding: 40px;
  box-shadow: 7px 7px 10px 0px rgba(50, 50, 50, 0.2);
  border: 1px solid #ccc;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 300;
  flex: 1 1 275px;
}
/* form */

input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type="submit"] {
  background-color: var(--dark-yellow);
  color: var(--light);
  padding: 10px 30px;
  border: none;
  cursor: pointer;
  font-family: var(--ff-headline);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 5px;
}

input[type="submit"]:hover {
  color: var(--dark-gray);
  background-color: var(--dark-yellow);
  /* border: 1px solid var(--dark-yellow); */
  border-radius: 5px;
}

/* form ends */

/* ----disclaimer-text ----*/
.disclaimer-text{
  padding:50px 20px 20px 30px;
  /* border-top: 1px dotted var(--dark-gray); */
  background-color: var(--v-light-yellow);
}
#sitemap-img{
  background-image: url(../images/sitemap-bk.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
}
.disclaimer-text p{
  font-size: 16px;
  font-weight: 300;
  text-align: justify;
  padding-bottom: 20px;
  padding-left: 20px;
}
.disclaimer-text p span{
  font-weight: 400;
}
.disclaimer-text h1{
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 20px;
}
.disclaimer-text a{
  color: var(--dark-gray);
  text-decoration: none;
}
.disclaimer-text a:hover{
  color: var(--dark-yellow);
  text-decoration: none;
}
.thank-you{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 50px;
}
.thank-you h1{
  font-size: 32px;
  font-weight: 400;
  padding-bottom: 5px;
  color: var(--dark-yellow);
  /* text-shadow: 1px 2px 4px rgba(0,0,0,0.25); */
  text-align: center;
  line-height: 34px;
}
.thank-you p{
  font-size: 12px;
  padding-bottom: 50px;
}





/*----------------

https://yqnn.github.io/svg-path-editor/

 <section class="angle" style="background-color: var(--background-gray); height: 100px; width: 100%;">

 </section>
.angle{
  -webkit-mask-image: url(../images/Appli-path.svg);
  -webkit-mask-size: 100% 100px;
}

------------------*/






/*------------------------footer -------------------------------*/
footer{
  width: 100%;
  height: auto;
  display: flex;
  flex: 1 1 275px;
  flex-wrap: wrap;
  /* padding-block: 20px; */
  align-items:flex-start;
  justify-content: center;
}
footer h2{
  font-size: 14px;
  font-weight: 500;
  color: var(--light);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

.panel p{
  color: var(--light);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 300;
  text-align: left;
  line-height: 16px;
}
.panel{
  width: 100%;
  max-width: 275px;
  padding: 10px;
}
.panel p i{
  font-size: 12px;
  color: var(--dark-yellow);
  margin-right: 5px;
}
.panel p span{
  font-family: 14px;
  font-weight: 500;
  text-transform: uppercase;
}
.panel p a{
  color: var(--light);
  text-decoration: none;
}
.panel p a:hover{
  color: var(--dark-yellow);
  text-decoration: none;

}

.social-links{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 0px 30px 0px;
}
.social-links > div{
width: 75px;
height: 75px;
display: block;
background-color: var(--dark-gray);
border-radius: 5px;
}

#footer{
  background-image: url(../images/footer.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* background-color: var(--v-light-gray); */
}
.bottom-band{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-gray);
  border-top: 1px dotted var(--light);
}
.bottom-band p{
  font-size: 11px;
  font-weight: 300;
  text-align: center;
  color: var(--v-light-gray);
  padding-inline: 20px;
}
.bottom-band a{
  text-decoration: none;
  color: var(--v-light-gray);
}
.bottom-band a:hover{
  text-decoration: none;
  color: var(--dark-yellow);
}




/* ----------------------------------------------------------------------------  */

/* Desktop*/
@media only screen and (max-width: 1024px) {
  .menu-toggle {
    display: block;
  }
  .top-nav {
    margin: 0, 0;
    height: 0;
    overflow: hidden;
  }
  .top-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly; 
  }
  .top-nav li {
    padding-block: 15px;
    border-bottom: 1px solid #f2ae00;
  }
  .top-nav li:last-child {
    border-bottom: none;
  }
  .top-nav a {
  }
  .top-nav--open {
    height: auto;
  }
  .arrow {
    margin: 15px 0px;
  }

  input[type="text"],
select,
textarea {

  padding: 5px;

}

}
@media only screen and (max-width: 823px){
  .home-why-us-img{
    width: 100%;
}
  .home-why-us-text{
  width: 100%;
}
}

@media only screen and (max-width: 736px){

  .intro-text{
  width: 100%;
}
  .intro-product{
  width: 100%;
}
  .welcome-text p, .intro-text p{
  line-height: 24px;
}
  .hero{
  display: none;
}
  .hero-mobile{
  display: block;
}
.features{
  display: block;
  padding-inline: 20px;
}
.features-icon{
  width: 100%;
  height: auto;
  display: block;
}
.features-icon img{
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
.features-text{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-left: 0px;
  padding-right: 0px;
}
.features-row-one, .features-row-two{
  width: 100%;
}
.application-img{
  width: 100%;
}
.application-text{
  width: 100%;
}
.cold-mix-intro{
  flex-direction: column-reverse;
}
.cold-mix-intro-text,
.cold-mix-intro-visual{
  width: 100%;
}

.home-applications-heading h1{
  line-height: 44px;
}

}
@media only screen and (max-width: 540px){
#sitemap-img{
  background-image: none;
}
}

@media only screen and (max-width: 430px){
  .baseline h2{
    font-size: 14px;
    letter-spacing: 2px;
  }
  .inner-page-text p{
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 20px;
}
}
@media only screen and (max-width: 420px){
  .extra-links-top{
    display: flex;
    flex-direction: column;
    align-items:center ;
    justify-content:center;
  }
  .baseline h2{
    letter-spacing: 1px;
    text-align: center;
  }
  .features-text p{
    text-align: left;
  }
}