@font-face {
  font-family: "Shabrina";
  src: url("/shabrina_free/Shabrina_Regular_Free.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Droid Sans Bold";
  font-style: normal;
  font-weight: normal;
  src:
    local("Droid Sans Bold"),
    url("DroidSans-Bold.woff") format("woff");
}

/* font-family:'Droid Sans Regular' */
@font-face {
  font-family: "Droid Sans Regular";
  font-style: normal;
  font-weight: normal;
  src:
    local("Droid Sans Regular"),
    url("DroidSans.woff") format("woff");
}
:root {
  --main-font: "Droid Sans Bold";
  --secondary-font: "Droid Sans Regular";
  --light-font: "Mayberry W01 Light";
  --funny: "Shabrina";
}

body {
  margin: 0;
  padding: 0;
  overflow: scroll;
}
body::-webkit-scrollbar {
  display: none;
}

/* header */
.header {
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* nav bar */
nav {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 100%;
  z-index: 100;
}

.nav-link {
  color: white;
}

.nav-link.current {
  color: rgba(255, 255, 255, 0.501);
}

nav.scrolled {
  background-color: #1f2022;

  .nav-link {
    color: white;
  }

  .nav-link.current {
    color: #71a600;
  }
  .language {
    background-color: #1f2022;
  }
}

.nav-logo {
  max-width: 20rem;
  place-self: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  text-align: center;
  padding: 1rem;
}

.nav-logo img {
  width: 70%;
  height: auto;
  place-self: center;
}

/* together */
.together {
  display: grid;
  grid-template-columns: 5fr 1fr;
}

.menu {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 0.1fr));
  place-content: center;
  text-align: center;
}

.menu li a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
  font-family: sans-serif;
  font-weight: bold;
}

.menu li a:hover {
  opacity: 0.5;
}

/* menu icon */
.menu-icon {
  display: none;
  z-index: 11;
}
.hamburger {
  cursor: pointer;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  /* The size of the SVG defines the overall size */
  height: 4rem;
  /* Define the transition for transforming the SVG */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  /* Define the transition for transforming the Stroke */
  transition:
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

.menu.nav-logo {
  display: none;
}

.language {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-self: center;
  gap: 1rem;
}
.language a {
  width: 100%;
  place-self: center;
}
.language a:hover {
  opacity: 0.5;
}
.language a img {
  width: 100%;
  height: 1.7rem;
  place-self: center;
  border-radius: 0.3rem;
}

@media screen and (min-width: 1200px) {
  .language {
    max-width: 100%;
    height: 0.9rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    position: absolute;
    top: 0;
    /* place-self: center; */
    gap: 1rem;
    place-self: end;
    right: 5rem;
    top: 1.5rem;
    padding: 0 1rem 1rem 1rem;
    transition: height 1s linear;
  }
  .language a {
    width: 80%;
    /* height: 100%; */
    place-self: center;
  }
  .language a:hover {
    opacity: 0.5;
  }
  .language:hover {
    height: 8rem;
    /* grid-template-columns: 1fr 1fr 1fr; */
  }
}

/* menu icon */
@media screen and (max-width: 1200px) {
  nav {
    grid-template-columns: 0.1fr 1fr;
  }
  /* .together {
    display: none;
  } */

  /* Default State (Hidden) */
  .together {
    display: grid; /* Ensure it's in the flow but not visible */
    grid-template-columns: 1fr;
    /* place-items: right; */
    position: absolute;
    place-self: center;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1f2022;
    overflow: hidden;
    height: 0; /* Hidden */
    visibility: hidden; /* Hidden but still reserving layout */
    transition:
      height 0.5s linear,
      visibility 0.5s linear;
  }

  .menu {
    display: none;
    z-index: 10;
  }

  .language {
    display: none;
  }

  /* .menu.nav-logo {
    display: none;
  } */

  .menu-icon {
    display: block;
    cursor: pointer;
    font-size: 2rem;
    place-self: center;
    color: white;
  }

  /* Display Menus when Active */
  /* .together.show {
    display: grid;
    background-color: #1f2022;
    grid-template-columns: 1fr;
    z-index: 10;
    width: 100%;
    height: 100vh;
    position: absolute;
  } */

  .together.show {
    height: 100vh; /* Fully expanded */
    visibility: visible; /* Visible */
  }
  .menu.show {
    display: grid;
    grid-template-columns: 1fr;
    font-family: sans-serif;
    place-self: center;
    padding: 0;
  }
  .language.show {
    display: grid;
    z-index: 10;
    place-self: center;
    /* position: absolute; */
    /* top: 30rem; */
  }
  .menu li {
    font-size: 3rem;
    /* text-align: left; */
    /* place-self: center; */
    /* position: relative; */
    /* top: -15rem; */
    /* left: -1.5rem; */
  }
  .menu.nav-logo {
    /* display: grid; */
    /* height: 10rem; */
    /* grid-template-columns: 1fr 2fr; */
    /* column-gap: 0; */
    /* text-align: left; */
    /* place-self: center; */
  }
  .menu.nav-logo img {
    display: inline;
    max-width: 100rem;
    max-height: 50rem;
    padding: 0;
  }
}

/* home */
.home {
  display: grid;
  gap: 0;
  padding: 3rem 1rem 1rem 1rem;
}

.home.left {
  display: grid;
}
.home.right {
  display: grid;
}

@media (min-width: 1200px) {
  .home {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    padding-top: 5rem;
    column-gap: 6rem;
  }
}

.home-img-1 {
  max-width: 100%;
  /* place-self: center; */
}
.home-img-1 img {
  max-width: 100%;
  height: 100%;
}

.home-text-1 {
  margin-right: 2rem;
  padding-bottom: 4rem;
  line-height: 1rem;
}

@media (max-width: 1200px) {
  .home-text-1 {
    padding: 0;
    place-self: center;
  }
}

.home-text-1 h2 {
  color: green;
  font-size: 1.875rem;
  font-family: "Norican", serif;
  font-weight: 400;
  font-style: normal;
}

.home-text-1 h1 {
  font-size: 3.281rem;
  text-align: left;
  font-family: var(--main-font);
  color: #222222;
  font-weight: bolder;
  line-height: 3rem;
}
.home-text-1 .span {
  font-size: 2.637rem;
  font-family: var(--light-font);
  font-weight: 100;
}

.home-text-1 p {
  font-size: 1rem;
  font-family: "Droid Sans Regular";
  line-height: 1.3rem;
  color: #8f8f8f;
}

@media (max-width: 1200px) {
  .home-text-1 h1,
  .home-text-2 h2 {
    font-size: 1.5rem;
  }
  .home-text-1 .span {
    font-size: 1.5rem;
  }
  .home-text-2 h2 {
    padding-left: 0rem;
  }
}

.home-text-2 h2 {
  color: green;
  font-size: 3.281rem;
  font-family: var(--main-font);
}

/* home icons */
.home-icons {
  display: grid;
  column-gap: 2rem;
}

@media (min-width: 1200px) {
  .home-icons {
    grid-template-columns: 1fr 1fr;
    padding-left: 2rem;
  }
  .home-text-2 h2 {
    padding-left: 2rem;
  }
}

.home-icon-1,
.home-icon-2,
.home-icon-3,
.home-icon-4 {
  display: grid;
  grid-template-columns: 6fr 1fr;
  column-gap: 1rem;
}

.home-icon-1 div:nth-child(2),
.home-icon-2 div:nth-child(2),
.home-icon-3 div:nth-child(2),
.home-icon-4 div:nth-child(2) {
  max-width: 100%;
  place-self: center;
}

.home-icon-1 div:nth-child(2) img,
.home-icon-2 div:nth-child(2) img,
.home-icon-3 div:nth-child(2) img,
.home-icon-4 div:nth-child(2) img {
  max-width: 100%;
}

.icon-svg {
  max-width: 100%;
  place-self: center;
}

.home-icons p:nth-child(1) {
  color: green;
  font-size: 1.6rem;
  font-family: var(--secondary-font);
}
.home-icons p:nth-child(2) {
  color: #8f8f8f;
  font-size: 0.8rem;
  font-family: var(--secondary-font);
  line-height: 1.5rem;
}

.plant {
  grid-column: 2;
}

.home-img-2 {
  width: 100%;
  height: 50%;
  text-align: center;
  background-image: url("/photos/Archive/contact02.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.home-img-2 i {
  color: white;
  font-size: 5rem;
}
#play-button {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
}

.home-img-2 #my-video {
  width: 100%;
  height: 100%;
  place-self: center;
}
@media (max-width: 1200px) {
  .home-img-2 {
    height: auto;
  }
}

/* footer */
.footer {
  background-image: url("/photos/alner/footer_green@4x-100.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.footer .footer-container {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: grid;
  /* place-items:start; */
  /* text-align: center; */
  place-items: center;
  height: 100%;
  font-size: 2rem;
  padding: 3rem 15rem 3rem 15rem;
}

@media (min-width: 1200px) {
  .footer .footer-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 1200px) {
  .footer .footer-container {
    row-gap: 1rem;
    padding: 2rem;
    /* place-content: center; */
  }
  .address {
    place-items: center;
  }
}

.footer .social {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  /* justify-self: center; */
}

.footer .social a i {
  color: transparent;
  background-image: url("/photos/green-1.jpg");
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* border: 0.15rem solid red; */
  /* border-radius: 5rem; */
  /* place-self: center; */
}

.footer .social a {
  background-color: white;
  font-size: 1.5rem;
  padding: 0.5rem 0.5rem 0.4rem 0.5rem;
  border-radius: 10rem;
  /* place-items: center; */
  transition: all 1s ease;
  /* text-align: center; */
  /* place-content: center; */
}

.footer .social a:hover {
  background-color: rgba(255, 255, 255, 0.385);
}

.terms {
  display: grid;
  row-gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: var(--secondary-font);
  font-size: 1rem;
}
.terms a {
  color: white;
  text-decoration: none;
}
.terms a:hover {
  opacity: 0.5;
  text-decoration: underline;
}

.address p {
  font-family: var(--light-font);
  font-size: 1rem;
}
.footer-logo {
  width: 50%;
}
.footer-logo img {
  width: 100%;
  height: 100%;
}

/* about */
.about.home-text-2 {
  padding-left: 2rem;
}

@media (min-width: 1200px) {
  .about.home-stats {
    column-gap: 2rem;
  }
}
@media (max-width: 1200px) {
  .about.home-text-2 {
    padding-left: 0;
  }
}

/* .home-text-1 h1 {
  font-size: 3rem;
  text-align: left;
  font-family: "Times New Roman", Times, serif;
} */

.about.home {
  column-gap: 2rem;
}
.about-end {
  padding-bottom: 10rem;
}

.facts-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.facts {
  text-align: center;
  place-self: center;
  font-family: var(--main-font);
}

.facts h1 {
  font-size: 3rem;
}

.facts p {
  font-size: 1.5rem;
}

.fact-1 h1,
.fact-2 h1,
.fact-3 h1 {
  color: transparent;
  background-image: url("/photos/green-3.jpg");
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* services */
.services.home-text-1 ul {
  font-size: 1.3rem;
}

.services-img-trees {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.tree {
  max-width: 100%;
}

.tree img {
  max-width: 100%;
  height: 100%;
}

/* contacts */
.contact-container.home {
  display: grid;
}

@media (min-width: 1200px) {
  .contact-container.home {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 2rem;
    column-gap: 5rem;
    padding-bottom: 5rem;
  }
  .contact.home-text-1 {
    padding-left: 2rem;
  }
}
@media (max-width: 1200px) {
  .contact-container.home {
    row-gap: 2rem;
  }
}

.contact-1 {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
}

.contact-1 .cel-container {
  color: black;
  font-size: 1.5rem;
  font-family: var(--secondary-font);
  display: grid;
  grid-template-columns: 0.1fr 1fr;
  gap: 1rem;
}
.contact-1 p {
  color: black;
  font-size: 1.3rem;
  font-family: var(--secondary-font);
  display: grid;
  grid-template-columns: 0.1fr 1fr;
  gap: 1rem;
}
.contact-1 p.cel {
  display: block;
}
.contact-1 p a {
  color: black;
  text-decoration: none;
  transition: all 0.5s linear;
}
.contact-1 p a:hover {
  color: rgb(12, 152, 12);
}

.contact-1 i {
  color: transparent;
  background-image: url("/photos/green-3.jpg");
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2rem;
  font-weight: bolder;
}

.contact-img-1 {
  max-width: 100%;
  text-align: center;
}

.contact-img-1 iframe {
  max-width: 100%;
  height: 100%;
  place-self: center;
}

@media (min-width: 1200px) {
  .contact-img-1 iframe {
    height: 450px;
    width: 100%;
    /* position: relative;
    top: -2rem; */
  }
  .contact-img-1 {
    text-align: right;
  }
  .index.contact-img-1 {
    text-align: left;
  }
}

/* contact form */
.contact-form {
  display: grid;
  gap: 1rem;
  padding-left: 1rem;
}

.contact-form h1 {
  font-family: var(--secondary-font);
  font-size: 2.5rem;
  color: darkgreen;
}

.contact-form input {
  height: 3rem;
  border: none;
  border-bottom: 1px solid burlywood;
  padding-left: 1rem;
  font-size: 1.3rem;
}

.contact-form input.submit {
  border: none;
  color: white;
  font-size: 1.2rem;
  font-weight: lighter;
  font-family: sans-serif;
  background-image: url("/photos/green-1.jpg");
  background-size: cover;
  width: 10rem;
}

.contact-form ::placeholder {
  color: rgba(0, 128, 0, 0.632);
  font-size: 1.3rem;
  font-family: "Times New Roman", Times, serif;
  font-weight: 100;
}

.contact-form input.submit:hover {
  background: none;
  background-color: black;
}

.contact-form textarea {
  border: none;
  border-bottom: 1px solid burlywood;
  padding-left: 1rem;
  font-size: 1.3rem;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .contact-form textarea {
    grid-column: span 2;
  }
  .contact-form h1 {
    grid-column: span 2;
  }
  .contact-form input#email {
    grid-column: 2;
  }
}

.slide-message {
  font-family: "Norican", serif;
  font-size: 4rem;
  font-weight: lighter;
  width: 100%;
  text-shadow:
    0 0 20px green,
    0 0 30px black;
}

/* home extras */
.home-products {
  display: grid;
  padding: 1rem;
  padding-top: 3rem;
}

.home-stats {
  display: grid;
  padding: 1rem;
}
.home-stats .counter {
  font-size: 3.5rem;
  color: #71a600;
  font-weight: bold;
  font-family: sans-serif;
}
.home-stats h4 {
  font-size: 1.5rem;
  font-family: sans-serif;
  font-weight: lighter;
}
/* big size */
@media (min-width: 1200px) {
  .home-products {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    padding-top: 5rem;
    gap: 6rem;
  }
  .home-stats {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 2rem;
    margin-top: 3rem;
  }
  .home-hover-products {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .contact-container.home.services {
    padding-bottom: 7rem;
  }
  .product-contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    padding: 6rem 0 6rem 0;
  }
}

/* small size */

@media (max-width: 1200px) {
  .home-hover-products {
    place-self: center;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .product-contact-container {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); */

    padding-bottom: 2rem;
  }
}
@media (max-width: 600px) {
  .home-stats {
    place-self: center;
    gap: 1rem;
  }
}

@media (min-width: 600px) and (max-width: 1200px) {
  .home-stats {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 2rem;
    margin-top: 3rem;
  }
}

.plant-list {
  color: green;
  font-family: var(--main-font);
  font-size: 1rem;
  line-height: normal;
}

.home-hover-products {
  display: grid;
  width: 100%;
  /* height: 50%; */
}
.team-img-1,
.team-img-2,
.team-img-3,
.team-img-4,
.team-img-5,
.team-img-6,
.team-img-7,
.team-img-8,
.team-img-9,
.team-img-10,
.team-img-11,
.team-img-12 {
  position: relative;
  width: 100%;
}

.team-img-1,
.team-img-3,
.team-img-5,
.team-img-7,
.team-img-9,
.team-img-11 {
  background-color: black;
}
.team-img-1 img,
.team-img-3 img,
.team-img-5 img,
.team-img-7 img,
.team-img-9 img,
.team-img-11 img {
  opacity: 0.5;
}

.team-img-2,
.team-img-4,
.team-img-6,
.team-img-8,
.team-img-10,
.team-img-12 {
  background-color: #71a600b3;
}
.team-img-2 img,
.team-img-4 img,
.team-img-6 img,
.team-img-8 img,
.team-img-10 img,
.team-img-12 img {
  opacity: 0.5;
}

.team-img-1 img,
.team-img-2 img,
.team-img-3 img,
.team-img-4 img,
.team-img-5 img,
.team-img-6 img,
.team-img-7 img,
.team-img-8 img,
.team-img-9 img,
.team-img-10 img,
.team-img-11 img,
.team-img-12 img {
  width: 100%;
  height: 100%;
}

.dynamic-img {
  visibility: hidden;
}

.team-img-text,
.team-img-text-2,
.team-img-text-3,
.team-img-text-4,
.team-img-text-5,
.team-img-text-6,
.team-img-text-7,
.team-img-text-8,
.team-img-text-9,
.team-img-text-10,
.team-img-text-11,
.team-img-text-12 {
  position: absolute;
  color: white;
  z-index: 2;
  width: 90%;
  height: 3.5rem;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.5rem;
  overflow: hidden;
  transition:
    all 0.5s ease,
    height 0.5s ease;
}
.team-img-text-7,
.team-img-text-8,
.team-img-text-9,
.team-img-text-10,
.team-img-text-11,
.team-img-text-12 {
  overflow: visible;
}

.team-img-text a,
.team-img-text-2 a,
.team-img-text-3 a,
.team-img-text-4 a,
.team-img-text-5 a,
.team-img-text-6 a,
.team-img-text-7 a,
.team-img-text-8 a,
.team-img-text-9 a,
.team-img-text-10 a,
.team-img-text-11 a,
.team-img-text-12 a {
  color: white;
  font-size: 1.5rem;
  font-family: sans-serif;
  font-weight: bolder;
  text-decoration: none;
}
.team-img-text-7 a,
.team-img-text-8 a,
.team-img-text-9 a,
.team-img-text-10 a,
.team-img-text-11 a,
.team-img-text-12 a {
  font-size: 1.5rem;
}

.team-img-text a:hover,
.team-img-text-2 a:hover,
.team-img-text-3 a:hover,
.team-img-text-4 a:hover,
.team-img-text-5 a:hover,
.team-img-text-6 a:hover,
.team-img-text-7 a:hover,
.team-img-text-8 a:hover,
.team-img-text-9 a:hover,
.team-img-text-10 a:hover,
.team-img-text-11 a:hover,
.team-img-text-12 a:hover {
  color: rgba(255, 255, 255, 0.748);
}

.team-img-text:hover,
.team-img-text-2:hover,
.team-img-text-3:hover,
.team-img-text-4:hover,
.team-img-text-5:hover,
.team-img-text-6:hover {
  overflow: hidden;
}
.team-img-text-7:hover,
.team-img-text-8:hover,
.team-img-text-9:hover,
.team-img-text-10:hover,
.team-img-text-11:hover,
.team-img-text-12:hover {
  overflow: visible;
}

.team-icon p {
  font-family: sans-serif;
}
.team-icon p a {
  font-size: 0.8rem;
  text-decoration: none;
  color: white;
}
.team-icon p a:hover {
  color: rgba(255, 255, 255, 0.703);
}

/* !!! */
/* new carousel */

.newCarousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
  top: -4.7rem;
}
@media (min-width: 1100px) and (max-width: 1232px) {
  .newCarousel {
    top: -8.5rem;
  }
}

.newCarousel-slide {
  display: flex;
  transition: transform 1s ease-in-out;
}

.newCarousel-item {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 1s ease-in-out;
}

.newCarousel-item img {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  opacity: 0.5;
  transition:
    opacity 1s ease-in-out,
    transform 1s ease-in-out;
}

.newCarousel-message {
  position: absolute;
  color: white;
  font-size: 7rem;
  font-family: "Shabrina";
  text-align: center;
  display: flex;
  justify-content: space-around;
  padding-left: 1rem;
}

.newCarousel-message span {
  opacity: 0;
  transform: translateY(-50px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.newCarousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2; /* Ensure dots are clickable */
}

.newCarousel-dots button {
  width: 10px;
  height: 10px;
  background: white;
  border: none;
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.newCarousel-dots button.carousel-active-btn {
  opacity: 1;
}

.newCarousel-item.carousel-active-btn .newCarousel-message span {
  opacity: 1;
  transform: translateY(0);
}

.newCarousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1);
  transition: all 1s ease;
}

.newCarousel-item.carousel-active-btn {
  opacity: 1;
  transform: none;
  z-index: 1;
}

/* small size */
@media (max-width: 1200px) {
  .newCarousel-item img {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 1200px) {
  .newCarousel-message {
    font-size: 3rem;
  }
}
@media (max-width: 380px) {
  .newCarousel-message {
    font-size: 2rem;
  }
}

/* image container */
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
  top: -6rem;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: "Shabrina";
  font-size: 5rem;
  text-align: center;
}
@media (min-width: 1100px) and (max-width: 1200px) {
  .image-container {
    top: -8.5rem;
  }
}
@media (min-width: 1200px) {
}
.about.header {
  height: 35rem;
}

/* products of product */
.product-1-container {
  display: grid;
  place-self: center;
  gap: 4rem;
  padding-bottom: 2rem;
  margin: 0 10rem 0 10rem;
}

.product-1-container .left {
  display: grid;
  /* font-family: sans-serif; */
  color: #8f8f8f;
}
.product-1-container .img-container {
  width: 100%;
  place-self: center;
}
.product-1-container .img-container img {
  width: 100%;
  height: 100%;
}
.product-1-container .left p {
  font-family: var(--secondary-font);
  line-height: 2rem;
}
.product-1-container .left p span {
  font-weight: bolder;
}

.product-1-list {
  background-color: #f0f0f0;
}
.product-1-list ul {
  display: grid;
  background-color: #f0f0f0;
  padding: 3rem;
  margin: 0;
}

.product-1-list ul h1 {
  display: grid;
  color: #222222;
  font-family: var(--main-font);
}

.product-1-list a {
  text-decoration: none;
  color: #8f8f8f;
  font-weight: bold;
  font-family: var(--secondary-font);
}
.product-1-list a:hover {
  color: #1d1d1d;
  cursor: pointer;
}

@media (min-width: 1200px) {
  .product-1-container {
    grid-template-columns: 2fr 1fr;
  }
  .product-1-list ul {
    row-gap: 2rem;
  }
  .product-1-container .left {
    display: grid;
    font-family: sans-serif;
    color: #8f8f8f;
    padding: 0 4rem 2rem 4rem;
  }
  .product-1-list {
    background-color: #f0f0f0;
    position: sticky;
    top: 5rem;
  }
}
@media (max-width: 1200px) {
  .product-1-container {
    margin: 0 2rem 0 2rem;
  }
  .product-1-list a {
    line-height: 2rem;
  }
}

/* product slide */
#slideshow-container {
  overflow: hidden;
}

.slideProduct {
  display: none;
}

.slideProduct img {
  width: 100%;
}

.slideProduct.active {
  display: block;
}

@media (max-width: 1200px) {
  .contact-container.home.services {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}