/* =========================
ABOUT HERO SECTION
========================= */

.about-hero-section{
  padding:150px 0 100px;
  background:#E8E8E6;

  overflow:hidden;
}

.about-hero-container{
  width:100%;
  max-width:1400px;

  margin:auto;

  padding:0 40px;
}

/* =========================
TOP
========================= */

.about-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:80px;

  margin-bottom:40px;
}

/* =========================
TITLE
========================= */

.about-hero-title{
  font-size:48px;
  line-height:1.1;
  font-weight:400;

  margin:0;

  color:#001241;

  font-family:"Cormorant Garamond", serif;
}

/* =========================
DESCRIPTION
========================= */

.about-hero-description{
  max-width:640px;

  text-align:right;

  font-size:20px;
  line-height:1.7;

  margin:0;

  color:#222;

  font-family:"Helvetica Now Display", sans-serif;
}

/* =========================
IMAGE
========================= */

.about-hero-image-wrapper{
  width:100%;

  overflow:hidden;
}

/* IMAGE */

.about-hero-image{
  width:100%;
  height:700px;

  object-fit:cover;

  display:block;

  opacity:0;

  transform:scale(1.04);

  transition:
  opacity 1s ease,
  transform 1.2s ease;
}

/* ACTIVE */

.about-hero-image.show{
  opacity:1;
  transform:scale(1);
}

/* =========================
LAPTOP
========================= */

@media(max-width:1200px){

  .about-hero-title{
    font-size:44px;
  }

  .about-hero-description{
    font-size:18px;
    max-width:560px;
  }

  .about-hero-image{
    height:620px;
  }

}

/* =========================
TABLET
========================= */

@media(max-width:991px){

  .about-hero-section{
    padding:130px 0 90px;
  }

  .about-hero-container{
    padding:0 24px;
  }

  .about-hero-top{
    gap:40px;
  }

  .about-hero-image{
    height:520px;
  }

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

  .about-hero-section{
    padding:120px 0 70px;
  }

  .about-hero-container{
    padding:0 18px;
  }

  .about-hero-top{
    flex-direction:column;
    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;
  }

  .about-hero-title{
    font-size:32px;
    line-height:1.15;
  }

  .about-hero-description{
    max-width:100%;

    text-align:left;

    font-size:14px;
    line-height:1.8;
  }

  .about-hero-image{
    height:240px;
  }

}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:480px){

  .about-hero-section{
    padding:110px 0 60px;
  }

  .about-hero-image{
    height:220px;
  }

}


/*===============SERVICE=====================*/

/*====================================
SERVICES GRID
====================================*/

.services-grid-section{

    padding:0 0 120px;

    background:#E8E8E6;

}

.services-grid-container{

    width:100%;
    max-width:1400px;

    margin:auto;

    padding:0 40px;

}

/*====================================
GRID
====================================*/

.service-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

/*====================================
CARD
====================================*/

.service-card{

    position:relative;

    overflow:hidden;

    display:block;

    text-decoration:none;

    aspect-ratio:1/0.78;

}

/* IMAGE */

.service-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;

}

/*====================================
OVERLAY
====================================*/

.service-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:50px;

    transition:.5s ease;

}

/*====================================
CONTENT
====================================*/

.service-content{

    text-align:center;

    color:#fff;

    max-width:420px;

}

.service-content h3{

    margin:0;

    font-family:"Cormorant Garamond", serif;

    font-size:36px;

    font-weight:400;

    line-height:1.15;

    transition:.4s;

}

.service-content p{

    margin-top:22px;

    font-family:"Helvetica Now Display", sans-serif;

    font-size:16px;

    line-height:1.8;

    opacity:0;

    transform:translateY(15px);

    transition:.45s ease;

}

/*====================================
HOVER
====================================*/

.service-card:hover img{

    transform:scale(1.08);

}

.service-card:hover .service-overlay{

    background:rgba(0,18,65,.92);

}

.service-card:hover .service-content p{

    opacity:1;

    transform:translateY(0);

}

/*====================================
LAPTOP
====================================*/

@media(max-width:1200px){

    .service-content h3{

        font-size:32px;

    }

}

/*====================================
TABLET
====================================*/

@media(max-width:991px){

    .services-grid-container{

        padding:0 24px;

    }

    .service-grid{

        gap:18px;

    }

    .service-overlay{

        padding:32px;

    }

    .service-content h3{

        font-size:28px;

    }

    .service-content p{

        font-size:15px;

        opacity:1;

        transform:none;

        margin-top:18px;

    }

}

/*====================================
MOBILE
====================================*/

@media(max-width:768px){

    .services-grid-section{

        padding:0 0 80px;

    }

    .services-grid-container{

        padding:0 18px;

    }

    .service-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .service-card{

        aspect-ratio:1/0.82;

    }

    .service-overlay{

        justify-content:flex-end;

        align-items:center;

        padding:28px;

        background:linear-gradient(
        to top,
        rgba(0,18,65,.88),
        rgba(0,0,0,.15)
        );

    }

    .service-content{

        text-align:left;

        width:100%;

        max-width:none;

    }

    .service-content h3{

        font-size:28px;

    }

    .service-content p{

        opacity:1;

        transform:none;

        font-size:14px;

        line-height:1.7;

        margin-top:12px;

    }

}

/*====================================
SMALL MOBILE
====================================*/

@media(max-width:480px){

    .service-card{

        aspect-ratio:1/0.9;

    }

    .service-content h3{

        font-size:24px;

    }

    .service-content p{

        font-size:13px;

    }

}