/**
* Global
* titles
* cta banners
* responsive
*/

#body {
  background-color: var(--keytime-green);
}

.spyral-bg {
  position: fixed;
  z-index: -500;
  top: 0;
  left: 0;
  opacity: 0.3;
  max-width: 300%;
}

.about {
  margin-top: 3.5rem;
  margin-bottom: 3.75rem;
}

.services,
.faq {
  margin-top: 3.5rem;
  margin-bottom: 3.75rem;
}

/*******
Titles and Texts
*******/

h1,
h2 {
  margin-bottom: 0;
}


h2,
h3,
p {
  color: var(--white);
}

.heading-container h2:after {
  background: var(--white);
}

.bloc-title h3 {
  text-decoration-color: white;
  text-decoration-thickness: 2px;
}

.heading-container {
  width: fit-content;
  border-radius: 0 60px 60px 0;
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: var(--dark-green);
  color: white;
}

.heading-icon {
  margin-right: 1rem;
}

/*******
Buttons
*******/

.cta-btn:hover {
  background-color: var(--dark-green);
}

/*************
HERO SECTION
*************/

.hero,
.cham-ctr {
  position: relative;
}

.hero .container-fluid,
.hero .row {
  height: 100%;
}

.cham-1 {
  position: relative;
  height: auto;
  left: 0;
}

.bg-circle {
  position: absolute;
  height: auto;
  z-index: -100;
  left: 0;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.pictos {
  width: 40%;
  padding: 10px;
}

.scroll-down {
  position: absolute;
  z-index: 500;
}

.scroll-down button {
  border: 2px solid var(--white);
}

.keytime-logo {
  width: 60%;
  margin-bottom: 16px;
}

/*************
ABOUT SECTION
*************/

.about p {
  padding: 20px;
}

/*************
SERVICES LIST
*************/

.kt-card {
  background-color: rgba(0, 0, 0, 0.8);
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.kt-card:hover {
  transform: scale(0.94);
  transform-origin: top left;
}

.kt-card .card-top,
.kt-card .card-footer {
  height: 20%;
}

.card-top {
  width: 100%;
  display: flex;
  text-align: start;
}

.img-card-container {
  flex: 0 0 20%;
}

/* Icône */

.kt-card-icon {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.kt-card:hover .kt-card-icon {
  transform: scale(0.7);
}

/* Titre de la carte */

.title-card-container {
  flex: 1;
  display: flex;
  align-items: center;
}

.title-card-container span {
  color: var(--white);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 22px;
  padding-left: 5px;
  transition: color 0.3s ease-in-out;
}

.kt-card:hover .title-card-container span {
  color: var(--light-green);
}

.kt-card .card-text {
  height: 60%;
  display: flex;
  align-items: center;
  color: var(--white);
  font-size: 17px;
  font-family: 'Montserrat-medium';
}

.kt-card .cta-container {
  text-align: left;
}

.kt-btn {
  padding: 10px 15px;
  border: 3px solid var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 35px;
  transition: background-color 0.3s ease, padding-right 0.3s ease;
}

.kt-card:hover .kt-btn span {
  color: var(--light-green);
}

.kt-btn span {
  text-transform: uppercase;
  font-family: var(--montserrat-bold);
  margin-right: 10px;
  color: var(--white);
}

.kt-card::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 3px;
  width: 0;
  transition: width 0.3s ease-in-out;
  background-color: var(--light-green);
  transition: width 0.3s ease-in-out;
}

.kt-card:hover::after {
  width: 100%;
}

/*****
SERVICE DETAILS
*****/

.services-details .row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
}

.services-details .bloc-title {
  text-transform: uppercase;
}

.services-details .bloc-title .sub-title {
  font-family: 'Montserrat-light';
}

.services-details .img-bloc,
.text-bloc {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px;
}

.services-details .img-bloc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-icon {
  width: 30%;
  height: auto;
}

.services-details .text-bloc {
  min-height: 250px;
  padding: 20px;
  display: flex;
  align-items: center;
}

.services-details .text-bloc span {
  font-size: 1.1rem;
  color: var(--white);
  font-family: 'Montserrat-medium', 'sans-serif';
}

/*******
PROACTIVE BUTTONS
*******/

.proactive-button .button:after {
  background-color: var(--light-green);
}

/*************
CTA BANNERS
*************/

.cta-section .overlay {
  background-color: rgba(144, 185, 83, 0.85);
}

/*************
  RESPONSIVE
*************/

/* Mobile */
@media screen and (max-width: 429px) {

  /* Titles and texts */
  .heading-container {
    padding: 20px 25px;
  }

  .heading-container h1 {
    font-size: 22px;
  }

  .heading-container h2 {
    font-size: 22px;
    margin-bottom: 0;
  }

  .services-details .bloc-title h3 {
    font-size: 2rem;
    padding: 20px;
  }

  .punch-line {
    font-size: 25px;
    font-weight: bolder;
  }

  /* Navigation */
  .mobile-nav {
    background-color: var(--keytime-green);
    background-image: linear-gradient(160deg, var(--keytime-green) 0%, #416d15 100%);
  }

  /* Hero */

  .hero {
    height: 90vh;
  }

  .bg-circle {
    top: 5%;
    width: 70%;
  }

  .cham-1 {
    top: 0;
    left: 0;
    width: 100%;
  }

  .hero-content {
    position: relative;
    bottom: 0;
    padding: 20px;
  }

  .hero .col-md-7 {
    display: unset;
  }

  .pictos {
    display: none;
  }

  .hero .cta-container {
    width: 100%;
    display: inline;
  }

  .scroll-down {
    position: absolute;
    right: 5%;
    bottom: 10%;
  }

  /* services */

  .kt-card-ctr {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .kt-card {
    width: 100%;
    height: auto;
    width: 250px;
    height: 250px;
    padding: 20px;
    margin-bottom: 25px;
  }

  .kt-card .card-text span {
    font-size: 15px;
  }

  .kt-card .cta-container {
    display: flex;
    justify-content: center;
  }

  .services-details .img-bloc {
    display: none;
  }

  .img-bloc {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
  }

  .text-bloc {
    margin-right: 0px;
  }

  .bloc-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .services-details .bloc-title {
    padding: 1rem 0;
  }

  /* faq */
  .faq .col-3 {
    display: none;
  }

  .faq .row {
    display: flex;
    justify-content: center;
    text-align: center;
  }
}

/* Tablett */
@media screen and (min-width: 430px) and (max-width: 768px) {

  /* Titles and texts */

  .heading-container {
    padding: 20px 25px;
  }

  .heading-container h2 {
    margin-right: 0;
    font-size: 22px;
  }

  .services-details .bloc-title h3 {
    font-size: 2rem;
  }

  /* Navigation */
  .mobile-nav {
    background-color: var(--keytime-green);
    background-image: linear-gradient(160deg, var(--keytime-green) 0%, #80D0C7 100%);
  }

  /* Hero */

  .hero {
    height: 90vh;
  }

  .cham-ctr {
    width: 100%;
  }
  
  .bg-circle {
    top: 2%;
    width: 50%;
  }

  .cham-1 {
    top: 0;
    width: 70%;
  }

  .hero-content {
    position: absolute;
    right: 0;
    bottom: 0%;
    width: 100%;
    height: 100%;
    padding: 40px 20px 20px 20px;
    align-items: end;
    justify-content: end;
  }

  .scroll-down {
    position: absolute;
    right: 5%;
    bottom: 5%;
  }

  /* services */

  .kt-card-ctr {
    display: grid;
    grid-template-columns: 2;
    grid-template-rows: 2;
  }

  .kt-card {
    height: auto;
    width: 200px;
    height: 200px;
    padding: 10px;
    margin-bottom: 25px;
  }

  .kt-card .card-text span {
    font-size: 15px;
  }

}


/* LapTop 14 inches */
@media screen and (min-width: 769px) and (max-width: 1519px) {

  /* Titles and texts */
  .heading-container {
    padding: 25px 25px 25px 130px;
  }

  .heading-container h1 {
    font-size: 30px;
  }

  .heading-container h2 {
    margin-right: 2rem;
  }

  .hero h2,
  .hero h3 {
    font-size: 30px;
  }

  /* Hero */



}

/* LapTop 17 inches */
@media screen and (min-width: 1520px) and (max-width: 1899px) {

  /* Titles and texts */

  .heading-container {
    padding: 25px 25px 25px 130px;
  }

  h1 {
    font-size: 30px;
  }



  /* Hero */


}

/* Desktop and more */
@media screen and (min-width: 1900px) {

  /* Titles and texts */
  .heading-container {
    padding: 25px 25px 25px 130px;
  }

  .heading-container h1 {
    font-size: 30px;
  }

  .heading-container h2 {
    margin-right: 2rem;
  }

  /* hero */


  .keytime-logo {
    width: 60%;
  }

}

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

  /* hero */
  .hero {
    margin-top: var(--mobile-header-height);
    margin-bottom: 3rem;
    height: 93vh;
  }

}


@media screen and (min-width: 769px) {

  /* hero */

  .hero {
    margin-top: var(--laptop-header-height);
    margin-bottom: 3rem;
    height: 83vh;
  }

  .hero .col-md-7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .keytime-logo {
    width: 60%;
    margin-bottom: 16px;
  }

  .cham-1 {
    top: 5%;
    width: 100%;
  }

  .bg-circle {
    top: 5%;
    width: 80%;
  }

  .scroll-down {
    left: 30%;
    bottom: 10%;
  }

  /* services */

  .services-details .bloc-title h3 {
    font-size: 3rem;
  }

  .kt-card {
    width: 300px;
    height: 300px;
    padding: 20px;
  }

  .services-details .bloc-content {
    display: flex;
  }

  .services-details .text-bloc {
    margin-left: 10px;
  }

  .services-details .img-bloc {
    height: 250px;
    width: 250px;
  }

  .services-details .bloc-title {
    padding: 3rem 0;
  }
}