* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  text-decoration: none;
}
#F--pointer {
  position: absolute;
  display: none;
}
/* ---------------------------------    START    COLOR SETTINGS    SITE COLORS-----------------------------------*/

:root {
  --col-primary: #054F3C; /*------- SITE COLOR 1 ---------------*/
  --col-secondary: #039670; /*------- SITE COLOR 2 ---------------*/
  --col-text-primary: #ffffff; /*------- TEXT COLOR 1 ---------------*/
  --col-text-secondary: #1a4051; /*------- TEXTS COLOR 1 ---------------*/
}

:root {
  --col-header-text: #ffffff; /*-------HEADER TEXT ---------------*/
  --col-header-back: #05684E; /*------- HEADER BACK ---------------*/
  --col-hero-text: #ffffff; /*-------HERO TEXT ---------------*/
  --col-btn-back: #039670; /*-------BUTTON BACKGROUND ---------------*/
  --col-btn-text: #ffffff; /*-------BUTTON TEXT ---------------*/
}

/* ---------------------------------    END    COLOR SETTINGS    SITE COLORS-----------------------------------*/

/* ---------------------------------    START    FONT SETTINGS    SITE FONTS-----------------------------------*/

@font-face {
  font-family: 'avant';
  src: url('../fonts/AVANT.ttf') format('truetype');
}

@font-face {
  font-family: 'barley';
  src: url('../fonts/barley.ttf') format('truetype');
}

:root {
  --ff-arial: arial;
}

/* ---------------------------------    END    FONT SETTINGS    SITE FONTS-----------------------------------*/
:root {
  --trans-aos: 1.2s cubic-bezier(0.25, -0.03, 0.39, 1.01) 0s;
  --trans-master: 0.8s cubic-bezier(0.87, 0.07, 0.43, 1.04);
  --trans-master-4: 1.2s cubic-bezier(0.87, 0.07, 0.43, 1.04) 0.2s;
  --trans-master-5: 1.2s cubic-bezier(0.87, 0.07, 0.43, 1.04) 0.6s;
  --trans-hover: 0.4s cubic-bezier(0, -0.04, 0.25, 0.94) 0s;
  --trans-hover-2: 0.6s cubic-bezier(0, -0.04, 0.25, 0.94) 0s;
  --trans-scale: 0.1s cubic-bezier(0, -0.04, 0.25, 0.94) 0s;
  --trans-master-0: 0.8s cubic-bezier(0.4, 0.07, 0.43, 1.04) 0s;
}

/* ---------------------------------    START    TRANSITION SETTINGS    ELEMENT TRANSITION-----------------------------------*/

/* ---------------------------------    END    TRANSITION SETTINGS    ELEMENT TRANSITION-----------------------------------*/

/*-------------------------------------------------------------------------------------*/
/*--     START                      SECTION 1                       HEADER           --*/
/*-------------------------------------------------------------------------------------*/
footer {
  background-color: var(--col-header-back);
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 62px;
  width: 100vw;
  color: var(--col-header-text);
  font-family: arial;
  font-size: 13px;
  padding: 10px;
  text-align: center;
}

footer a {
  color: var(--col-secondary);
  text-decoration: none;
  font-weight: bold;
}
footer a:hover {
  color: var(--col-text-primary);
}
header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 62px;
  z-index: 8;
  width: 100vw;
  color: var(--col-header-text);
  position: fixed;
  transition: var(--trans-master-4);
}

header #lbl {
  display: none;
}

/*-- START                      SECTION @1                       HEADER--*/

header #menue {
  width: 81px;
  height: 6px;
  background-color: var(--col-header-text);
}

header #menue::before {
  content: '';
  width: 81px;
  height: 6px;
  background-color: var(--col-header-text);
  margin-top: 19px;
  position: absolute;
}

header #menue::after {
  content: '';
  width: 81px;
  height: 6px;
  background-color: var(--col-header-text);
  margin-top: 39px;
  position: absolute;
}

header #chk:checked ~ label #menue::before {
  background-color: var(--col-secondary);
}

header #chk:checked ~ ul {
  top: 45px;
}

.lntr {
  width: 100px;
  height: 100px;
}

.lntr::before {
  content: "<svg><g id='_1416297448000'><path class='fil0' fill='currentColor' d='M82.02 64.23c3.65,-5.76 11.28,-7.47 17.04,-3.81 5.76,3.65 7.46,11.28 3.81,17.04 -4.55,7.15 -10.86,13.09 -18.33,17.19 -7.23,3.97 -15.5,6.23 -24.26,6.23 -13.93,0 -26.54,-5.65 -35.67,-14.78 -6.3,-6.3 -10.94,-14.25 -13.21,-23.15 -6.39,-0.59 -11.4,-5.97 -11.4,-12.52 0,-6.55 5,-11.93 11.4,-12.52 2.27,-8.9 6.91,-16.85 13.21,-23.15 9.13,-9.13 21.74,-14.78 35.67,-14.78 7.12,0 13.95,1.51 20.18,4.24 6.45,2.82 12.19,6.94 16.88,12.01 4.61,5.01 4.29,12.81 -0.72,17.43 -5.01,4.61 -12.82,4.29 -17.43,-0.72 -2.4,-2.6 -5.32,-4.7 -8.57,-6.12 -3.11,-1.36 -6.6,-2.12 -10.33,-2.12 -7.11,0 -13.54,2.88 -18.19,7.54 -4.65,4.65 -7.54,11.09 -7.54,18.19 0,7.11 2.88,13.54 7.54,18.19 4.65,4.65 11.09,7.53 18.19,7.53 4.52,0 8.74,-1.14 12.38,-3.14 3.8,-2.09 7.02,-5.13 9.36,-8.8zm-21.74 -26.36c6.94,0 12.58,5.63 12.58,12.58 0,6.94 -5.63,12.58 -12.58,12.58 -6.95,0 -12.58,-5.63 -12.58,-12.58 0,-6.95 5.63,-12.58 12.58,-12.58z'/><path class='fil1' fill='currentColor' d='M114.69 49.52c0,-1.3 -0.43,-2.41 -1.29,-3.32 -0.86,-0.92 -1.87,-1.38 -3.03,-1.38 -1.2,0 -2.23,0.44 -3.09,1.31 -0.86,0.87 -1.29,1.94 -1.29,3.2 0,1.33 0.43,2.45 1.29,3.36 0.86,0.9 1.9,1.36 3.13,1.36 1.12,0 2.12,-0.45 2.98,-1.36 0.86,-0.9 1.3,-1.96 1.3,-3.17zm-0.04 -4.01l0 -2.53 0 -2.95 1.46 0 0 15.08 -1.46 0 0 -1.73c-0.51,0.64 -1.15,1.13 -1.91,1.49 -0.76,0.36 -1.56,0.53 -2.41,0.53 -1.64,0 -3.03,-0.58 -4.15,-1.74 -1.13,-1.16 -1.69,-2.58 -1.69,-4.27 0,-1.67 0.56,-3.08 1.67,-4.22 1.11,-1.14 2.5,-1.71 4.17,-1.71 0.9,0 1.71,0.17 2.45,0.52 0.74,0.35 1.36,0.86 1.87,1.53z'/><path id='1' class='fil1'  fill='currentColor' d='M119.33 49.39c0,1.32 0.42,2.41 1.26,3.3 0.83,0.89 1.88,1.33 3.12,1.33 1.22,0 2.25,-0.44 3.08,-1.33 0.83,-0.89 1.24,-1.99 1.24,-3.32 0,-1.35 -0.42,-2.45 -1.26,-3.32 -0.84,-0.87 -1.91,-1.3 -3.2,-1.3 -1.16,0 -2.16,0.45 -2.99,1.34 -0.83,0.89 -1.25,1.99 -1.25,3.3zm-1.53 0.03c0,-1.67 0.57,-3.1 1.72,-4.28 1.15,-1.19 2.5,-1.78 4.07,-1.78 1.65,0 3.06,0.58 4.22,1.75 1.16,1.17 1.74,2.56 1.74,4.17 0,1.7 -0.57,3.15 -1.71,4.35 -1.14,1.2 -2.52,1.8 -4.14,1.8 -1.65,0 -3.04,-0.59 -4.19,-1.76 -1.14,-1.18 -1.71,-2.59 -1.71,-4.24z'/><path id='2' class='fil1'  fill='currentColor' d='M132.18 49.39c0,1.32 0.42,2.41 1.26,3.3 0.83,0.89 1.88,1.33 3.12,1.33 1.22,0 2.25,-0.44 3.08,-1.33 0.83,-0.89 1.24,-1.99 1.24,-3.32 0,-1.35 -0.42,-2.45 -1.26,-3.32 -0.84,-0.87 -1.91,-1.3 -3.2,-1.3 -1.16,0 -2.16,0.45 -2.99,1.34 -0.83,0.89 -1.25,1.99 -1.25,3.3zm-1.53 0.03c0,-1.67 0.57,-3.1 1.72,-4.28 1.15,-1.19 2.5,-1.78 4.07,-1.78 1.65,0 3.06,0.58 4.22,1.75 1.16,1.17 1.74,2.56 1.74,4.17 0,1.7 -0.57,3.15 -1.71,4.35 -1.14,1.2 -2.52,1.8 -4.14,1.8 -1.65,0 -3.04,-0.59 -4.19,-1.76 -1.14,-1.18 -1.71,-2.59 -1.71,-4.24z'/><path id='3' class='fil1' fill='currentColor'  d='M153.75 49.52c0,-1.3 -0.43,-2.41 -1.29,-3.32 -0.86,-0.92 -1.87,-1.38 -3.03,-1.38 -1.2,0 -2.23,0.44 -3.09,1.31 -0.86,0.87 -1.29,1.94 -1.29,3.2 0,1.33 0.43,2.45 1.29,3.36 0.86,0.9 1.9,1.36 3.13,1.36 1.12,0 2.12,-0.45 2.98,-1.36 0.86,-0.9 1.3,-1.96 1.3,-3.17zm-0.04 -4.01l0 -2.53 0 -2.95 1.46 0 0 15.08 -1.46 0 0 -1.73c-0.51,0.64 -1.15,1.13 -1.91,1.49 -0.76,0.36 -1.56,0.53 -2.41,0.53 -1.64,0 -3.03,-0.58 -4.15,-1.74 -1.13,-1.16 -1.69,-2.58 -1.69,-4.27 0,-1.67 0.56,-3.08 1.67,-4.22 1.11,-1.14 2.5,-1.71 4.17,-1.71 0.9,0 1.71,0.17 2.45,0.52 0.74,0.35 1.36,0.86 1.87,1.53z'/><path id='4' class='fil1' fill='currentColor'  d='M167.11 49.33c0,-1.21 -0.43,-2.26 -1.3,-3.16 -0.86,-0.9 -1.86,-1.35 -2.98,-1.35 -1.22,0 -2.27,0.45 -3.13,1.35 -0.86,0.9 -1.29,2.02 -1.29,3.35 0,1.27 0.43,2.34 1.29,3.21 0.86,0.87 1.88,1.31 3.09,1.31 1.16,0 2.17,-0.46 3.03,-1.38 0.86,-0.92 1.29,-2.03 1.29,-3.33zm0 3.97c-0.46,0.66 -1.07,1.17 -1.85,1.54 -0.78,0.37 -1.62,0.56 -2.51,0.56 -1.67,0 -3.07,-0.57 -4.18,-1.71 -1.11,-1.14 -1.67,-2.55 -1.67,-4.23 0,-1.7 0.57,-3.13 1.7,-4.28 1.13,-1.15 2.56,-1.72 4.26,-1.72 0.88,0 1.68,0.18 2.41,0.53 0.73,0.36 1.34,0.87 1.82,1.54l0 -1.82 1.42 0 0 11.39 -1.42 0 0 -1.81z'/></g></g></svg>";
}

header ul {
  display: flex;
  gap: 23px;
}

#hero-content:hover #img-upload-hero {
  left: 60;
}

#hero-content:hover #quick-form {
  left: 60;
}

#quick-form {
  top: 58% !important;
  transition: left var(--trans-hover-2) !important;
}
#product-image:hover #img-upload-prod {
  left: 60;
}

#quote-top:hover #img-upload-quote {
  left: 60px;
}

.uploaded {
  background-color: rgb(115, 168, 36) !important;
}
.img-upload {
  position: absolute;
  top: 50%;
  left: -40%;
  font-size: 15px;
  color: white;

  background-color: orange;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;

  box-shadow: 1px 1px 6px 3px rgba(0, 0, 0, 0.5);
  transition: left var(--trans-hover);
}

.img-upload:hover {
  cursor: pointer;
  color: orange;

  background-color: white;
  transform: scale(1.1);
}

#color-h {
  display: none !important;
  position: relative;
}

#col-cont {
  position: relative;
}

#file {
  display: none !important;
}

header ul li {
  list-style: none;
}

header ul li a {
  color: var(--col-header-text);
  text-decoration: none;
  font-family: avant;
  font-size: 13px;
  text-transform: uppercase;
  transition: var(--trans-master-4);
}

header ul li a:hover {
  color: var(--col-secondary);
  font-size: 14px;
  transition: var(--trans-scale);
}

#chk {
  display: none;
}

.white {
  color: white !important;
}

.secondary {
  color: var(--col-secondary) !important;
}

#h-contact {
  display: flex;
  color: var(--col-header-text);
  font-family: arial;
  font-size: 14px;
  gap: 22px;
}
#cover {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
}
#cover,
ul,
header {
  background-color: var(--col-header-back);
}
#socials {
  display: flex;
  gap: 18px;
}

#socials li:hover > * {
  transform: scale(1.3);
  transition: var(--trans-scale);
}

#socials li {
  list-style: none;
}

#socials li a {
  text-decoration: none;
  color: var(--col-header-text);
}

#lbl {
  padding: 3px;
  display: none;
  height: 56px;
  width: 81px;
  position: relative;
  margin-top: 5px;
  cursor: pointer;
  transform: scale(0.6);
  z-index: 3;
}

/*-------------------------------------------------------------------------------------*/
/*--     END                      SECTION 1                       HEADER             --*/
/*-------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------*/
/*--     START                     SECTION 2 @2                   LANDING PAGE HERO      --*/
/*------------------------------------------------------------------------------------------*/

#swing-container #button-group {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translateX(-50%);

  min-width: 140;
  min-height: 36px;
  display: flex;
  gap: 9px;
  transition: var(--trans-master-4);
}
#swing-box {
  width: 200.6vw;
  position: relative;
  height: 181px;
  position: relative;
  height: 181px;
}

#hero {
  height: 100vh;
  width: 100vw;
  background-color: white;
 

  position: relative;
  top: -1;
}

#hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
}

#hero-content img {
  margin-top: 110px;
  height: 138px;
  margin-bottom: 33px;
  transition: var(--trans-master-4);
}

#hero-content h1 {
  font-family: avant;
  font-size: 35px;
  margin: 30px;
  text-align: center;
  transition: var(--trans-aos);
  color: var(--col-hero-text);
}

#swing-container {
  width: 100vw;
  height: fit-content;
  position: relative;
  overflow: hidden;

  left: 50%;
  transform: translateX(-50%);
}

#swing-sec1 {
  display: inline-block;
  width: 100vw;
  position: relative;
  font-size: 100vw;
  text-align: center;
}

#swing-sec1 p {
  font-size: 25;
  font-family: arial;
  padding: 0 20 0 20;
  color: var(--col-hero-text);
  transition: var(--trans-aos);
}
#swing-sec2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100vw;
}

#swing-sec2 input[type='text'] {
  width: 80%;
  max-width: 300px;
  margin-bottom: 5px;
  height: 30px;

  border: none;
  outline: none;
  padding: 14px;
  color: var(--col-text-primary);
  background-color: transparent;
  border-bottom: solid 1px var(--col-secondary);
}

#swing-sec2 input[type='text']::placeholder {
  color: var(--col-text-primary);
}

#swing-sec2 input[type='button'] {
  width: 100px;
  border: none;
  margin-top: 10px;
}

/*-----------------------------------------------------------------------------------------*/
/*--     END                     SECTION 2                     LANDING PAGE HERO        --*/
/*------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------*/
/*--     START                     SECTION 3 @3                   ABOUT US        --*/
/*------------------------------------------------------------------------------------------*/
#about-section {
  padding-top: 30px;
}

#about-section #about-cont #about-sec-2 {
  display: flex;
  flex-direction: column;
}

#about-section #about-cont #about-sec-2 #quote-top div i {
  font-size: 25px;
  color: white;

  transition: var(--trans-scale);
}

#about-section #about-cont #about-sec-2 #quote-top div i:hover {
  font-size: 30px;
  opacity: 0.9;
}

#about-section #about-cont #about-sec-2 #quote-top div:hover {
  cursor: pointer;
}

#about-section #about-cont #about-sec-2 #quote-top {
  width: 100%;
  height: 50%;
  background-image: url(../img/quote/qt-1.jpg);
  background-size: cover;
  display: flex;
  justify-content: space-between;
  padding: 30px;
  align-items: center;
  transition: var(--trans-master-0);
  position: relative;
}

#about-section #about-cont #about-sec-2 #quote-bottom {
  font-family: avant;
  width: 100%;
  height: 50%;
  padding: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  box-shadow: 0px -7px 9px 3px rgb(0 0 0 / 50%);
  background-color: var(--col-secondary);
}

#about-sec-3 i {
  font-size: 40px;
  color: white;
}

#about-sec-1 i {
  font-size: 40px;
  color: white;
}

#about-sec-1 h1 {
  font-family: arial;
  font-weight: bold;
  color: white;
}
#about-sec-1 p {
  font-family: arial;
  font-size: 17px;
  color: white;
}

#about-sec-3 h1 {
  font-family: arial;
  font-weight: bold;
  color: white;
}
#about-sec-3 p {
  font-family: arial;
  font-size: 17px;
  color: white;
}

#about-section #about-cont #about-sec-2 #quote-bottom h1 {
  color: white;
}

#about-cont {
  display: grid;
  grid-template-areas: 'sec-1 sec-2 sec-3';
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 425px;
}

#about-sec-1 {
  grid-area: sec-1;
  background-color: var(--col-primary);
  z-index: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#about-sec-2 {
  grid-area: sec-2;

  background-color: white;
}

#about-sec-3 {
  grid-area: sec-3;

  grid-area: sec-3;
  background-color: var(--col-primary);
  z-index: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*-----------------------------------------------------------------------------------------*/
/*--     END                      SECTION 3                              ABOUT US        --*/
/*------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------*/
/*--     START                     SECTION 4 @4                      PRODUCT SERVICE     --*/
/*------------------------------------------------------------------------------------------*/

#product-name-container {
  top: 0%;
  position: relative;
  height: 100%;

  transition: var(--trans-aos) !important;
}

#product-container {
  display: grid;
  height: auto;
  grid-template-columns: repeat(2, 36vw);
  grid-template-areas:
    'product-image product-description'
    'product-name product-group-button';
  grid-template-rows: 54vh 10vh;
}
#product-section {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.08);
}

#product-container #product-image {
  background-image: url('../img/service-1.jpg');
  background-size: cover;
  background-position: center;
  transition: var(--trans-master-4);
  position: relative;
  overflow: hidden;
}

#product-container #product-description {
  overflow: hidden;
  position: relative;
  background-color: var(--col-primary);
}

i.icon {
  font-size: 45px;
  margin-bottom: 10px;
  color: white;
  text-align: center;
}

#product-container #product-description #pd-container {
  height: 56vh;
  color: white;
  display: flex;
  width: 108vw;
  left: 0px;
  position: relative;
  transition: var(--trans-master);
}

#product-container #product-description #pd-container > * {
  height: 56vh;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: 30px;
}

#product-container #product-description #pd-container h1 {
  text-transform: uppercase;
  font-family: avant;

  margin: 10px 0 10px 0;
}

#product-container #product-description #pd-container span {
  font-size: 20px;
  font-family: arial;
}
#product-container #product-name {
  overflow: hidden;
  position: relative;
  text-align: center;
  height: 70;
  color: var(--col-text-primary);
  width: 100%;
  font-size: 9;
  text-transform: uppercase;
  background-color: var(--col-primary);
}

#product-container #product-group-button #brows-section {
  display: flex;
  align-items: center;
}
#product-container #product-group-button #brows-section #arrow-left {
  transform: rotate(270deg);
}

#product-container #product-group-button #brows-section #arrow-right {
  transform: rotate(-270deg);
}

.round-button {
  width: 20px;
  transition: width ease-in 0.1s;
}
.round-button:hover {
  width: 25px;
  cursor: pointer;
}

#product-container #product-group-button #brows-section span {
  margin: 0 20 0 20;
  font-family: arial;
  color: var(--col-text-primary);
  font-size: 15px;
}

#product-container #product-group-button {
  background-color: var(--col-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#product-container #product-image {
  grid-area: product-image;
  min-width: 280px;
}

#product-container #product-description {
  grid-area: product-description;
}

#product-container #product-name {
  grid-area: product-name;
  min-width: 280px;
}

#product-container #product-group-button {
  grid-area: product-group-button;
  height: 70px;
}

#product-container #product-name #product-name-container > * {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: avant;
  background-color: var(--col-primary);
}

.top-zero {
  top: 0px !important;
}

#prod-list h1 {
  margin-bottom: 15px;
  transition: var(--trans-master-4);
  margin-top: 640px;
}

.marginTop-zero {
  margin-top: 0px !important;
}
#prod-list {
  font-family: arial;
  width: 110%;
  height: 100%;
  background-color: white;
  position: absolute;
  left: -10;
  z-index: 1;
  top: 100%;
  transition: var(--trans-master);
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  color: var(--col-primary);
}

/*-----------------------------------------------------------------------------------------*/
/*--     END                     SECTION 4                            PRODUCT SERVICE     --*/
/*------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------*/
/*--     START                     SECTION 5 @5                     OUR CLIENTS        --*/
/*------------------------------------------------------------------------------------------*/

.client-card {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  background-size: cover;
  border-radius: 50%;
  box-shadow: 0px 0px 11px 3px rgb(0 0 0 / 30%);
}

/*------- Please change your image name to the following or change this css to your image name   */

/*------------------------------------  @5B   ------------------------------------------------------*/
#our-clients #client-card #client-prof1 {
  background-image: url('../img/our-clients/client-1.jpg');
}

/*------------------------------------  @5C   ------------------------------------------------------*/
#our-clients #client-card #client-prof2 {
  background-image: url('../img/our-clients/client-2.jpg');
}

/*------------------------------------  @5D   ------------------------------------------------------*/
#our-clients #client-card #client-prof3 {
  background-image: url('../img/our-clients/client-3.jpg');
}

#bottom-sec #left-sec {
  background-color: var(--col-primary);
  width: 50%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#bottom-sec #left-sec h1 {
  color: var(--col-text-primary);
  font-family: avant;
  text-align: center;
  padding: 0 20px 20px 20;
  font-size: 40px;
}

#bottom-sec #right-sec {
  width: 50%;
  background-color: var(--col-secondary);

  font-family: arial;

  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  color: var(--col-text-primary);
}

#our-clients {
  width: 100vw;
  height: 100vh;
  padding: 50px;
}

#our-clients #top-sec-c {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

#our-clients #bottom-sec {
  display: flex;
  height: 274px;

  margin-top: 30px;
}

#our-clients #client-card {
  display: flex;
  gap: 20px;
  font-family: arial;
  color: var(--col-primary);
}

#our-clients #client-card h1 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

#our-clients #client-card p {
  font-size: 12px;
  padding: 0 0px 0 0px;
  width: 200px;
}

/*-----------------------------------------------------------------------------------------*/
/*--     END                     SECTION 5                         OUR CLIENTS        --*/
/*------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------*/
/*--     START                     SECTION 6-C @6C               CONTUCT US DETAILS    --*/
/*------------------------------------------------------------------------------------------*/
#contact {
  height: 100vh;
  width: 100vw;
  padding: 50px;
  background-color: rgba(0, 0, 0, 0.08);
}
#contact #cont-container {
  display: grid;
  grid-template-rows: 7vh 6vh 82vh;
}
#contact #cont-container #formap {
  display: grid;
  grid-template-areas: 'form map details';
  grid-template-columns: 2fr 1.6fr 2fr;
  grid-template-rows: 417px;
  position: relative;
}

#formap #cont-details {
  display: flex;
  flex-direction: column;
}

div#editor {
  position: fixed;
  height: 80px;
  bottom: 0px;
  width: 100%;
  background-color: white;
  border-top: solid 2px orange;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  gap: 50px;
}

#formap #cont-details #cont-top {
  position: relative;
  background-image: url('../img/service-3.jpeg');
  background-size: cover;
  background-position: center;
  height: 50%;
}
#cont-container #formap #map {
  grid-area: map;
}
#cont-container #formap #cont-details {
  background-color: white;
  grid-area: details;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#cont-container #formap #cont-details #cont-bottom div div {
  display: inline-block;
  margin-left: 10px;
}

#cont-container #formap #cont-details #cont-bottom div i {
  color: var(--col-secondary);
}

#cont-container #formap #cont-details #cont-bottom > * {
  margin-bottom: 20px;
  font-family: arial;
  font-size: 15px;
  text-align: left;
}

#cont-container #formap #cont-details #cont-bottom {
  margin: auto;
}
#cont-container #formap #form {
  background-color: white;
  grid-area: form;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 30px;
  align-items: center;
}

#cont-container #formap #form input[type='text'] {
  height: 43px;
  border: solid 1px var(--col-primary);
  border-radius: 7px;
  padding: 10px;
  width: 100%;
}

#cont-container #formap #form textarea {
  width: 100%;
  height: 125px;
  border: solid 1px var(--col-primary);
  border-radius: 7px;
  padding: 10px;
  resize: none;
}

#cont-container #formap #form input[type='text']::placeholder {
  color: grey;
}
/*-----------------------------------------------------------------------------------------*/
/*--     END                     SECTION 6-C                CONTUCT US DETAILS    --*/
/*------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------*/
/*--  START           @HEAD @DIVIDER       HEAD-DIVIDER 3           HEADING HEAD DIVIDER   --*/
/*------------------------------------------------------------------------------------------*/

.head {
  font-family: avant;
  text-align: center;
  margin-bottom: 4px;
  font-size: 40px;

  color: var(--col-primary);
  transition: var(--trans-aos) !important;
}

#divider {
  width: 70vw;
  height: 1px;
  background-color: var(--col-primary);
  margin: 15 auto 20 auto;
  transition: var(--trans-aos) !important;
}

/*-----------------------------------------------------------------------------------------*/
/*--     END                      HEAD-DIVIDER            HEADING HEAD DIVIDER         --*/
/*------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------*/
/*--     START                     BUTTONS                     BUTTON STYLES             --*/
/*------------------------------------------------------------------------------------------*/

.btn-primary {
  width: 100px;
  height: 36px;
  border-radius: 40px;
  background-color: var(--col-btn-back);
  color: var(--col-btn-text);
  font-family: arial;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: var(--trans-scale);
}

.btn-secondary {
  width: 100px;
  height: 36px;
  border-radius: 40px;
  border: solid 1px var(--col-btn-back);
  color: var(--col-btn-text);
  font-family: arial;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: var(--trans-scale);
}

.btn-secondary-1 {
  width: 100px;
  height: 36px;
  border-radius: 40px;
  border: solid 1px var(--col-primary);
  color: var(--col-btn-text) !important;
  font-family: arial;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transform: scale(0.8);
  cursor: pointer;
  transition: var(--trans-scale);
}

.btn-secondary-1:hover {
  width: 100px;
  height: 36px;
  border-radius: 40px;
  border: solid 1px var(--col-btn-text);
  color: var(--col-primary) !important;
  font-family: arial;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transform: scale(0.9);
  cursor: pointer;
  transition: var(--trans-scale);
}

.btn-secondary:hover {
  border: solid 1px var(--col-btn-back);
  transform: scale(1.03);
  color: var(--col-btn-text);
}

.btn-primary:hover {
  background-color: var(--col-text-primary);
  color: var(--col-btn-back);
  transform: scale(1.03);
}

/*-----------------------------------------------------------------------------------------*/
/*--     END                     BUTTONS                     BUTTON STYLES             --*/
/*------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------*/
/*--     START                      MEDIA QUERIES                      BREAK POINTS  --*/
/*-------------------------------------------------------------------------------------*/

@media (max-width: 1143px) {
  #product-container #product-group-button #brows-section > span:nth-child(1) {
    display: none;
  }
}

@media (max-width: 1028px) {
  #our-clients #top-sec-c > div:nth-child(2) {
    display: none;
  }
}

@media (max-width: 800px) {
  #product-container #product-group-button #brows-section > span:nth-child(1) {
    display: block;
  }
  #product-container #product-description #pd-container {
    height: 200px;
    width: 300%;
  }

  #product-container #product-description #pd-container > * {
    height: 200px;
  }
  #cont-container #formap #cont-details {
    background-color: var(--col-primary);
    color: white;
  }
  #cont-container #formap #cont-details #cont-bottom > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  #cont-container #formap #cont-details #cont-bottom {
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 25px;
    align-items: center;
    justify-content: center;
  }
  #formap #cont-details #cont-top {
    display: none;
  }
  #contact #cont-container #formap {
    grid-template-areas:
      'details'
      'form'
      'map';
    grid-template-columns: 100%;
    grid-template-rows: 144px 380px 290px;
  }
  #contact {
    height: 1027px;
  }
  #our-clients {
    height: auto;
  }
  #our-clients #top-sec-c > div:nth-child(2) {
    display: none;
  }

  #our-clients #bottom-sec {
    display: flex;
    flex-direction: column;
    height: fit-content;
    margin-top: 30px;
  }

  #our-clients #bottom-sec,
  #top-sec {
    width: 100%;
  }

  #bottom-sec #left-sec {
    width: 100%;
  }
  #spacer {
    display: none;
  }
  #bottom-sec #right-sec h1 {
    display: none;
  }
  #bottom-sec #right-sec {
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    height: auto;
    gap: 26px;
    padding: 20px;
  }
  #bottom-sec #left-sec h1 {
    padding: 0px;
    font-size: 30px;
  }

  #product-list > p:nth-child(6),
  p:nth-child(7),
  p:nth-child(8),
  p:nth-child(9),
  p:nth-child(10) {
    display: none;
  }
  #product-section {
    height: 705px;
  }

  #product-container {
    height: auto;
    grid-template-rows: 69px 200px 200px 200px;
    grid-template-areas:
      'product-name'
      'product-image'
      'product-description'
      ' product-group-button';
    grid-template-columns: 100%;
    display: grid;
  }

  #about-section {
    height: auto;
  }
  #about-section #about-cont #about-sec-2 #quote-top {
    height: 100%;
  }

  #about-section #about-cont #about-sec-1 {
    padding: 30px;
  }

  #about-section #about-cont #about-sec-3 {
    padding: 30px;
  }

  #about-section #about-cont #about-sec-2 {
    display: flex;
    flex-direction: row;
    height: 200px;
  }

  #btn-product-list {
    min-width: 90px;
  }

  #about-section #about-cont #about-sec-2 #quote-top {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #about-section #about-cont #about-sec-2 #quote-bottom {
    height: 100%;
  }

  #about-cont {
    display: grid;
    grid-template-areas:
      'sec-1'
      'sec-2'
      'sec-3';
    grid-template-rows: auto;
    grid-template-columns: 100%;
    min-width: auto;
  }
  #socials {
    display: none;
  }
}

@media (max-width: 710px) {
  #our-clients #top-sec-c > div:nth-child(3) {
    display: none;
  }
}
@media (max-width: 680px) {
  #h-contact {
    display: none;
  }
}

@media (max-width: 600px) {
  #bottom-sec #right-sec {
    display: flex;
    flex-direction: column;
  }
  #contact #cont-container #formap {
    grid-template-rows: auto 380px 290px;
    margin: 20px;
  }

  #contact {
    height: 1213px;
    padding: 50px 0 0 0;
  }

  #cont-container #formap #cont-details #cont-bottom {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 326px;
  }
}

@media (max-width: 550px) {
  #product-container #product-description #pd-container i {
    display: none;
  }
}

@media (max-width: 475px) {
  #product-container #product-description #pd-container i {
    display: block;
  }

  #product-container #product-description #pd-container > * {
    padding: 0px;
    width: 100%;
  }

  #product-container #product-description #pd-container h1 {
    font-size: 26px;
  }
  #product-container #product-description #pd-container span {
    display: none;
  }
  #product-container #product-group-button #brows-section > span:nth-child(1) {
    display: none;
  }
  #about-section #about-cont #about-sec-2 {
    display: flex;
    flex-direction: column;
    height: auto;
    box-shadow: none;
  }

  #about-section #about-cont #about-sec-2 #quote-top {
    height: 300px;
  }
}

@media (max-width: 385px) {
  #product-container #product-name {
    background-color: var(--col-secondary);
  }
  #our-clients #client-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 370px) {
  footer span {
    font-size: 10px;
  }
  #cover {
    display: block;
  }
  #product-section {
    height: 640px;
  }

  #product-container #product-name #product-name-container > * {
    background-color: var(--col-secondary);
  }
  #prod-list h1 {
    font-size: 23px;
  }
  #product-container {
    transition: var(--trans-aos);
    height: auto;
    position: relative;
    display: grid;
    grid-template-rows: 150px 69px 189px 10px;
    grid-template-areas:
      'product-image'
      'product-name'
      'product-description'
      'product-group-button';
  }

  header #lbl {
    display: block;
  }

  header ul {
    align-items: center;
    display: flex;
    list-style: none;
    gap: 43px;

    flex-direction: column;
    position: absolute;
    top: -300px;
    justify-content: center;
    padding: 35px;
    transition: var(--trans-master) !important;
    z-index: -1;

    width: 100%;
  }
}

/*-------------------------------------------------------------------------------------*/
/*--     START                      ANIMATION                      ANIMATION         --*/
/*-------------------------------------------------------------------------------------*/

.group-anim2 {
  animation: button-g-anim2 110s cubic-bezier(0.7, -0.05, 0.38, 1.21) forwards
    0s;
}

@keyframes button-g-anim2 {
  0%,
  1% {
    top: 66%;
  }

  1%,
  100% {
    top: 105%;
  }
}

.group-anim {
  animation: button-g-anim 110s cubic-bezier(0.7, -0.05, 0.38, 1.21) forwards 0s;
}

@keyframes button-g-anim {
  0%,
  1% {
    top: 105%;
  }

  1%,
  100% {
    top: 66%;
  }
}

.sing-anim {
  animation: cards 110s cubic-bezier(0.7, -0.05, 0.38, 1.21) forwards 0s;
}

@keyframes cards {
  0%,
  1% {
    left: 0%;
  }

  1%,
  100% {
    left: -100%;
  }
}

.sing-anim2 {
  animation: cards2 110s cubic-bezier(0.7, -0.05, 0.38, 1.21) forwards 0s;
}

@keyframes cards2 {
  0%,
  0% {
    left: -100vw;
  }

  1%,
  100% {
    left: 0%;
  }
}

/*-------------------------------------------------------------------------------------*/
/*--     END                      ANIMATION                      ANIMATION         --*/
/*-------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------*/
/*--     START                      CUSTOMER CUSTOM STYLES @cusStyles                --*/
/*-------------------------------------------------------------------------------------*/
.delete {
  display: none !important;
}

/*-------------------------------------------------------------------------------------*/
/*--     START                      CUSTOMER CUSTOM STYLES @cusStyles                --*/
/*-------------------------------------------------------------------------------------*/