/*HERO*/

.hero-section {
  height: 140vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-content {
  padding-left: 3rem;
  height: 60vh;
  max-width: 40%;
}

.hero-content,
.hero-content h2 {text-align: left; margin: 0 0 2rem;}

.hero-content p {margin: 0 0 3rem;}

.hero-content-btn {display: flex; gap: 1rem;}

.arrow a i,
.arrow-res a i {
  font-size: 2.4rem;
  color: #181818;
  text-shadow: 0 0 2rem rgb(255, 255, 255);
  transition: transform 0.8s ease-in-out;
  animation: bounce 2s infinite;
}

.hero-content-2{
  text-align: right;
  padding-right: 3rem;
  height: 70vh;
  max-width: 35%;
  position: relative;
}

.hero-content-2 h2 {text-align: right; margin-bottom: 1rem;}
.hero-content-2 .text-1 {margin-top: 2.8rem;}
.hero-content-2 p {font-size: .9rem;}

.hero-content-res {display: none;}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

/*ABOUT*/

.about {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
}

.about-content {
  max-width: 90%;
  padding: 1.5rem 2rem 2.5rem;
}

.about-content h2 {text-align: center;}

.about-subcontent {
  display: flex;
  justify-content: center;
}

.about-text {
  width: 60%;
  padding: 1rem 2rem;
}

.about-img {width: 35%; padding: 2rem 0 2rem;}

.about-img img {width: 100%; border-radius: .6rem;}

.about-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col {
  text-align: center;
  padding: 1.5rem 2rem;
  flex: 1;
  min-width: calc(33.33% - 20px);
  margin: .6rem;
  background: #dadada;
}

.col:hover {background: #f2f2f2; transition: .5s ease;}

/*SERVICES*/

.services {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.services-intro {padding: 2rem 2rem;}

.services-intro h2 {text-align: center}

.services-content {padding-bottom: 2.5rem;}

.services-content .services-subcontent {
  display: flex;
  justify-content: center;
  padding: 3rem;
  max-width: 90%;
  margin: 0 auto;
}

.services-img {width: 100%; min-width: 50%;}

.services-img img {border-radius: .6rem; width: 100%;}

.services-img-big {width: 100%; min-width: 50%;}

.services-img-big img {border-radius: .6rem; width: 80%;}

.services-text h3 {text-transform: uppercase;}

.services-list li {margin-top: 1rem;}

.services-text i {color: #b08415;}

.services-btn {padding: 2rem 0;}

.services-left .services-text {margin-left: 1.5rem;}

.services-left .services-text li {color: #181818;}

.services-right .services-text {margin-right: 1.5rem;}

/*TESTIMONIAL*/

.testimonial {padding: 4rem 0;}

.testimonial h2 {text-align: center;}

.carousel {
  padding: 3rem 3rem;
  width: 100%;
  margin: 0 auto; 
  text-align: center;
}

.carousel .left {text-align: left;}

.carousel-cell {
  display: inline-block; 
  width: 45%; 
  margin: 0 2rem;
  padding: 3rem 2rem;
  background: #dadada;
}

.carousel-cell:hover {background: #f2f2f2; transition: .5s ease;}

.carousel-cell p {color: #181818;}

.iframe-container {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.play-button.hidden {
  display: none;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  cursor: pointer;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: .6rem;
}

.iframe-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: .6rem;
}

.testimonial-rating i {
  color:#dca312;
  font-size: .8rem;
}

.carousel-cell > i {
  font-size: 2rem;
  margin: 0 2rem;
}

.flickity-prev-next-button.previous,
.flickity-prev-next-button.next {
  width: 30px; 
  height: 30px;
  font-size: 1.2rem; 
  background-color: transparent;
  color: #d4d2d2;
}

.flickity-prev-next-button.previous:hover,
.flickity-prev-next-button.next:hover {
  color: #fafafa; 
  background-color: transparent;
}

.carousel .flickity-page-dots {position: static; padding: 2rem 0 0; display: none;}

.carousel .flickity-page-dots .dot {background: #f2f2f2;}

/*RESOURCES*/

.resources {padding: 2rem 0;}

.resources-text {padding: 1rem;}

.resources-text h2,
.resources-text h3 {text-align: center;}

.resources-social-media {
  justify-content: center;
  text-align: center;
  color: #f2f2f2;
  padding: 1rem 1rem 0;
}

.resources-social-media i {
  color: #f2f2f2;
  font-size: 2rem;
  margin: 1rem .6rem;
}

.resources-social-media a i:hover {
  color: #b08415;
  transition: .5s ease;
}

.resources-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
}

.resources-box {
  width: 45%;
  justify-content: center;
  padding: 2rem 2rem;
  margin-top: 1.5rem;
}

.resources-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

/*FAQ*/

.faq-container {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5rem 0rem;
}

.faq-content {
  margin-bottom: auto; 
  padding: 0 3rem;
  width: 40%;
}

.faq-items-container {flex: 1; padding: 0 2rem;}

.faq-item {margin-bottom: .6rem;}

.faq-item button {margin: 0;}

.faq-accordion {
  background: #dadada;
  color: #181818;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 1.5rem 1.8rem;
  width: 100%;
  text-align: left;
  border: transparent;
  outline: none;
  transition: background-color 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-right-radius: .6rem;
  border-top-left-radius: .6rem;
}

.faq-accordion:hover {background: #f2f2f2; transition: .5s ease;}

.faq-accordion.active {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #f2f2f2;
  transition: .5s ease;
}

.faq-panel {
  display: none;
  background-color: #282828;
  padding: .5rem 1.8rem 1rem;
  border-bottom-right-radius: .6rem;
  border-bottom-left-radius: .6rem;
}

/*MEDIA QUERIES*/

@media (max-width: 1281px){
  .hero-section {height: 105vh;}
  .hero-text {width: 110%;}
  .hero-p {width: 100%;}
}

@media (max-width: 1025px) {

  /*HERO*/

  .hero-section {
    height: 60vh;
    justify-content: center;
  }

  .hero-content-res {
    padding: 2rem 0;
    background: url('https://www.federicogullotta.it/wp-content/uploads/2024/02/solid-concrete-wall-textured-backdrop-1-2.jpg') no-repeat center center; 
    background-size: cover;
    margin: 0;
    display: block;
  }

  .hero-content-res-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .btn-secondary {background: transparent; border: 1px solid #DBAD39}

  .hero-content-res .hero-text {width: 100%; padding: 0 1.5rem;}

  .hero-content-res h2 {margin-bottom: 1rem;}

  .hero-content-res h2, .hero-content-res p {color: #f2f2f2; text-align: center;}


  .hero-content {display: none;}

  .hero-btn, .arrow-res {text-align: center;} 
  
  .arrow a i,
  .arrow-res a i {color: #f2f2f2;}

  .hero-content-2{display: none;}

  /*ABOUT*/

  .about-text {margin: 0; padding: 1rem; width: 100%;}
  .about-subcontent p {margin-bottom: 1rem;}
  .about-img {width: 70%}
  .col {
    flex: 1; 
    max-width: 50%;
    padding: 1.5rem; 
  }
  .col h2, .col p {line-height: 1.5rem}
  .col h2 {font-size: 1rem;}

  /*SERVICES*/

  .services-img, 
  .services-img-big {width: 60%; margin: 2rem 0;}
  .services-img-big img {width: 100%;}
  .services-text {margin: 0;}
  .services-text li {margin-top: 2rem;}
  .services-left .services-text {margin: 0 1.5rem;}
  .services-right .services-text {margin: 0 1.5rem;}

  /*TESTIMONIAL*/

  .testimonial-text {padding: .5rem 0;}
  .testimonial {padding: 0;}

  /*RESOURCES*/

  .resources-container {flex-direction: column; justify-content: center; align-items: center;}
  .resources-box {width: 80%; margin-bottom: 1rem;}
}

@media screen and (min-height: 1000px) {
  .hero-text {width: 90%;}
  .hero-text h2 {padding-bottom: 1rem;}
  .hero-p {margin: 0 4rem;}
  .hero-p p {padding-bottom: 1rem;}
  .btn-primary {padding: 1rem 1rem; font-size: 1.3rem;}
}

@media (max-width: 927px){
    .hero-section {height: 85vh;}
}


@media (max-width: 769px){
  .wa-link::before {display: none;}

  .hero-section {height: 70vh;}

  .about-subcontent {flex-direction: column-reverse; align-items: center;}
  .about-img {width: 50%;padding-bottom: 0;}
  
  .services-left, .services-subcontent {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .services-right .services-subcontent {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }
  
  .testimonial-text {padding-top: 2rem;}
  .flickity-viewport {height: 710px !important;}
  .carousel-cell {
    width: 100%;
    margin: 0;
    padding: 5rem 2rem;
  }
  
  .carousel .flickity-page-dots {display: block; padding-bottom: 2rem;}
  .resources-container {padding: 0}

  .faq-content {width: 100%;}
  .faq-container {display: flex; flex-direction: column;}
  .faq-content h2,
  .faq-content p {text-align: center; margin-bottom: 1rem;}
  .faq-items-container {width: 100%;}
  .faq-item {flex: 1;}
}

@media (max-width: 540px) {
  .wa-link{display: none;}
  .hero-content-res-btn {flex-direction: column;}
  .services-content .services-subcontent {padding: .7rem;}
  .carousel .flickity-page-dots {display: none;}
  .about-grid {flex-direction: column; align-items: center;}
  .col {flex: 1; min-width: calc(100% - 20px);}
}

@media (max-width: 432px) {

  .hero-p {padding: 1.5rem 1.5rem;}
  .about-img {width: 80%;}
  .services-img {width: 80%;}
  .services-img-big {width: 80%;}
  .testimonial {display: flex; flex-direction: column; justify-content: center; align-items: center;}
  .testimonial-text {width: 80%;}
  .carousel-cell {padding: 1.5rem 1rem;}
  .resources-box {width: 100%;}
  .resources-container {padding: 0 1.2rem;}
  .resources-text p {padding: 0 .5rem;}
  }
  
  @media (max-width: 391px){
    .hero-p {padding: .5rem .5rem;}
    .about-content {padding: .8rem;}
  }
  
  
  @media (max-width: 281px){.btn-primary {font-size: 1rem;}}