/* RESET (mobile-first) */
    /* based on modern reset ideas; removes default spacing and makes elements predictable */
    *,*::before,*::after{box-sizing:border-box}
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
    html,body{height:100%}
    body{
      background-color: #ffffff; 
      line-height:1.4;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
      background:linear-gradient(180deg,#DFFFD6#E8FFE8);}
    ol,ul{list-style:none}
    a{text-decoration:none;color:inherit}
    img{max-width:100%;height:auto;display:block}
    button{font:inherit}

    /* Root vibrant palette */
    :root{
      --accent-1: #FF6B6B; /* coral */
      --accent-2: #5EEAD4; /* aqua green */
      --accent-3: #7C3AED; /* violet */
      --muted: #394052;
      --card: #ffffff;
      --glass: rgba(255,255,255,0.6);
      --radius: 14px;
      --gap: 1rem;
      --pet : #00A99E;
      --container-padding: 1.25rem;
    }
/**********************************************************************/

/******************************************************************************************/
/*CONTAINER*/
.container{
    display : grid;
    grid-template-columns: 1fr;
    gap:2em;
}
/****************************************************************************

/************************************************************************************/
 /* Header */
    header{
      position:sticky;
      top:0;z-index:2000;
      background:linear-gradient(180deg,#DFFFD6#E8FFE8);
      backdrop-filter:blur(6px);
      border-bottom:1px solid rgba(0,0,0,0.04);
      width: 100%; /* make sure it spans full width */
    }
    .header-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
    .brand{display:flex;gap:.75rem;align-items:center}
    .brand h1{font-weight: 700; color:red; font-size: 4em;}
    
    .logo{
        width:48px;
        height:48px;
        border-radius:12px;
        /* background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); */
        display:grid;
        place-items:center;
        color:#fff;
        font-weight:700
    }

    .brand h1{font-size:1rem;line-height:1;color:var(--muted)}
        nav{display:flex;gap:.5rem;align-items:center}
    .nav-links{
      display:none;
   
    }

    .nav-link{
         background-color: #00A99E ;
         padding : 0.5rem;
         transition: all 0.3s ease;
         border-radius: 1em;
         
    }
    .nav-link:hover{
      background-color: #CBC3E3;
    }

    /* Reusable CTA image */
.cta {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;

  width: clamp(60px, 5vw, 100px);
  height: auto;

  cursor: pointer;
  /* border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); */

  transform-origin: center;
  animation: bounce-pop 0.8s ease;
  transition: transform 0.25s ease;
}

/* Hover scale */
.cta:hover {
  transform: scale(1.15);
}

/* Bounce + pop animation */
@keyframes bounce-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  40%  { transform: scale(1.4); opacity: 1; }
  60%  { transform: scale(0.9); }
  80%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/*********************************************************/
/********************************************************************************************************************/

/******************************************************************************************/
/*HERO*/
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: auto;      /* auto height - keeps full image */
  display: block;
  transition: opacity 1s ease-in-out; /* smooth fade */
  opacity: 1;
}

/* fade animation */
.hero-img.fade-out {
  opacity: 0;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2rem;
  color: white;
}

/* Hero text container */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* bottom by default */
  align-items: flex-start;   /* text left */
  padding: clamp(1rem, 5vw, 3rem);
  max-width: 700px;          /* keeps text readable on large screens */
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

/* Title + paragraph responsive */
.hero-content h2 {
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

/* Buttons */
.hero-actions {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.primary-btn,
.ghost-btn {
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  padding: clamp(0.6rem, 2vw, 0.9rem) clamp(1rem, 3vw, 1.8rem);
  border-radius: .8rem;
  cursor: pointer;
  text-decoration: none;
}

/* Example button styles (adjust to your design system) */
.primary-btn {
  background: #ff7a00;
  color: white;
}

.ghost-btn {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.4);
  color: white;
}

/**************************************************************************************/

/*******************************************************************************/
/*WHY US*/
#why{
    /* background-color: #FF6B6B; */
    display: grid;
    gap:1em;
    text-align: center;
    padding: 1em;
 
}

#why h2{
   /* background-color: limegreen; */
 color:#909090;
   font-size: clamp(1em, 6vw, 3em);
    font-weight: 700;
}

.whyCards{
  background-color: #F5F5F5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap : 1em;

}

.whyCard{
    display:grid;
    background-color: #F5F5F5;
    border-radius:1.5em;
    text-align:center;
    justify-items: center;
    padding : 1em;
}

.whyCard p{
   font-size: clamp(0.9rem, 3vw, 1.1rem);
    font-weight: 600;   /* bold */
}



/********************************************************************************/

/************************************************************************/
.we{
    display:grid;
    gap:0.2em;
}

.we h3{
    font-size: clamp(1em, 6vw, 3em);
    font-weight: 700;
    text-align: center;
}



.we .p{
  /* background-color: limegreen; */
  color:#909090;
}
/***********************************************************************/

/********************************************************************/
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/**********************************************************************/

/*************************************************************************************/
/**MOTOR AND PARTNER*************/
#motor,
#general {
/* background-color: #FF6B6B; */
  display: grid;
  gap: 0.5rem;
  min-height : 80vh;
  align-items: center;
  padding : 1em;
}



#motor .cards,
#general .cards{
    /* background-color: aqua; */
    border-radius: 1.5em;
    display : grid;
    gap : 1em;
    padding : 1em;

}

#motor .cards .card h4,
#general .cards .card h4{
      color: #000000;
}

#motor .card,
#general .card{
    padding:0.5em;
    border-radius: 1em;
    background-color:#F5F5F5;
    display: grid;
    text-align: center;
    justify-content: center;
    justify-items: center;
    font-weight: 600;
}

#motor .section-title,
#general .section-title{
      color: #000000;
    background-color:#F5F5F5;
    border-radius: 1.5em;
    padding : 1em;
    justify-content: center;
    display: grid;
    gap : 1em;
    text-align : center;
    justify-items: center;
}

#motor .section-title{
    order:1;
}
#motor .cards{
    order:2;
}

#general .section-title{
    order:1;
}
#general .cards{
    order:2;
}

#motor .section-title h3,
#general .section-title h3{
    color : #000000;
    font-size: 2em;
    font-weight : 700
}
/*******************************************************************************************/

/*********************************************************/
/***PARTNERS*************/

#partners{
  color :  whitesmoke;
    background-color: #00A99E;
    padding : 0.5em;
    display :grid;
    gap:1em;
    justify-content: center;
    justify-items: center;
    text-align: center;
    border-radius: 1.5em;
}

#partners .section-title h3{
  color:white;
    font-weight: 600;
}
    .partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.partner {
  background: whitesmoke;
  border-radius: 10px;
  padding: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
 flex: 0 1 100px; /* don't grow, but allow shrinking */
  height: 100px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner:hover {
  transform: scale(1.1); /* scale up by 10% */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* optional subtle glow */
}
/**********************************************************/

/*********************************************************************/
/*ABOUT BAR*/
#about {
  /* position: relative; */
  padding: 2rem 1rem;
  
}

.about-box {
    background-color: #00A99E;
 display:grid;
 gap:1em;
  padding: 1.5rem;
  border-radius: 12px;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}

/* the cut-out image */
.about-cutout {
  position: absolute;
  /* right: -20px;      */
  right: -60px;
  bottom : 0;
  /* transform: translateY(-50%); */
  width: 320px;
  z-index: 3;        /* higher than box */
  pointer-events: none; /* image not clickable */
}

/* add extra space so text doesn't get covered */
.about-box {
  padding-right: 220px;
}

/* MOBILE – stack normally */
@media (max-width: 700px) {

  .about-cutout {
    position: static;
    margin: 1rem auto;
    display: block;

    width: 160px;
    height: 160px;

    object-fit: cover;
    object-position: 50% 5%; /* focus on face */
     transform: scale(1.15);
    border-radius: 50%;
    overflow: hidden;

    box-shadow: 0 6px 14px rgba(0,0,0,.2);
  }

  .about-box {
    padding-right: 1.5rem;
    text-align: center;
  }
}


#about .about-box .text{
    display: grid;
    gap:1em;
    color: #ffffff;
}

#about .about-box .text h3{
    color:#ffffff;
    font-size: 2em;
    text-align: center;
    font-weight: 700;
}

/* WhatsApp button */
    .whatsapp{display:inline-flex;
        align-items:center;
        gap:.5rem;padding:.6rem .9rem;
        border-radius:999px;
        background-color: #075E54 ;
        color:white;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .whatsapp:hover{
      background-color: #ECE5DD;
      color:black;
    }


/*******************************************************************/

/******************************************************************************/
/*CONTACT*/
#contact{
    background-color: #202728;
    color: whitesmoke;
    display:grid;
    gap : 1em;

}

.info h4{
  color : var(--pet);
}

.info a{
  transition: all 0.3s ease;
}

.info a:hover{
  background-color: limegreen;
  color:#000000;
  padding : 0.2em;
  border-radius: 0.2em;
}

#contact .contact-grid{
    /* background-color: #e5e7eb; */
    display: grid;
    justify-content: center;
    justify-items: center;
    text-align: left;
    padding: 1em;
    gap:1em;
}

#contact .contact-img{
  padding:1em;
  border-radius: 1em;
  border: 1px #ffffcc solid;
  max-width: 200px;
}

#contact .contact-img img{
  width: 100%;
}

#contact .contact-grid .section-title h3{
    color : var(--pet);
    font-size: 2em;
    font-weight: 700;
}

#contact .contact-grid .card .social{
    /* background-color: antiquewhite; */
    display : grid;
    justify-content: center;
    justify-items: center;
    gap : 0.5em;
    grid-template-columns: 1fr 1fr 1fr;
}

#contact .contact-grid .card .social a{
    width:40px;
    height:40px;
    border-radius:8px;
    /* background:#fff; */
    display:grid;
    place-items:center;
    box-shadow:0 6px 14px rgba(15,15,20,0.06)}
#contact .contact-grid .card .social img{width:100%; transition: transform 0.3s ease; /* smooth transition */}
#contact .contact-grid .card .social img:hover{scale:1.2}

#contact .map{
    /* background-color: aqua; */
    display : grid;
    text-align: center;
    padding : 1em;
    align-items: center;
}

#contact .map iframe {
  width: 100%;
  height: 400px;
  border: 0;           /* optional: remove border */
  display: block;      /* remove inline spacing issues */
}

.infos{
    /* background-color: #FF6B6B; */
    display:grid;
    gap : 1em;
}

.info h4{
    font-weight: 700;
}






/***************************************************************************/
@media (min-width: 700px) {
  .nav-links { 
    display:flex;
    gap:.5rem
}

  #motor{
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;

  }

   #motor .cards{
    order:1;
    }

  #motor .section-title{
    order:2;
    }

  #general{
    grid-template-columns: 1fr 2fr;
     gap: 2rem;
  }
    #motor .cards{
    grid-template-columns: 1fr 1fr;
 
  }

   #general .cards{
    grid-template-columns: 1fr 1fr 1fr;
  }

  #general .section-title{
    order:1;
    }
    #general .cards{
        order:2;
    }

    #contact{
    grid-template-columns: 1fr 1fr;
    }
    
    #about .about-box .text h3{
        text-align: left;
    }
 .hero{
      background-size: cover;
 }

 #why h3{
    color:limegreen;
    font-size: clamp(3em, 7vw, 7em);
    font-weight: 700;
}

.whyCard p{
     font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.5;
}

.we h3{
    font-size: clamp(3em, 5vw, 7em);
}

/* #contact .contact-grid .infos{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#contact .contact-grid .infos .info:nth-child(3){
  grid-column: 1 / -1;  
  justify-self: center;
} */

#contact .card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap:1em;
}

#contact .card .social{
  /* background-color: #ECE5DD; */
  grid-column: 1 / -1;  /* span both columns */
  justify-self: center;
}

}/*end of media*/