/* =========================
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;
  }

}






/* =========================
ABOUT COMPANY SECTION
========================= */

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

  overflow:hidden;
}

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

  margin:auto;

  padding:0 40px;

  display:grid;
  grid-template-columns:1fr 520px;

  gap:48px;

  align-items:start;
}

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

.about-company-image-wrapper{
  overflow:hidden;
}

/* IMAGE */

.about-company-image{
  width:100%;
  height:720px;

  object-fit:cover;

  display:block;

  opacity:0;

  transform:translateY(40px) scale(1.03);

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

/* SHOW */

.about-company-image.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

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

.about-company-content{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* TITLE */

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

  margin:0 0 34px;

  color:#001241;

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

/* TEXT WRAPPER */

.about-company-text{
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* PARAGRAPH */

.about-company-text p{
  margin:0;

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

  color:#222;

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

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

@media(max-width:1200px){

  .about-company-container{
    grid-template-columns:1fr 460px;
  }

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

  .about-company-text p{
    font-size:18px;
  }

  .about-company-image{
    height:640px;
  }

}

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

@media(max-width:991px){

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

  .about-company-container{
    grid-template-columns:1fr;

    padding:0 24px;

    gap:36px;
  }

  .about-company-image{
    height:560px;
  }

}

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

@media(max-width:768px){

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

  .about-company-container{
    padding:0 18px;

    gap:28px;
  }

  .about-company-content{
    order:1;
  }

  .about-company-image-wrapper{
    order:2;
  }

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

    margin-bottom:24px;
  }

  .about-company-text{
    gap:22px;
  }

  .about-company-text p{
    font-size:14px;
    line-height:1.9;
  }

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

}





/* =========================
VISION MISSION SECTION
========================= */

.vision-mission-section{
  padding:100px 0;
  background:#D7D4D4;

  overflow:hidden;
}

.vision-mission-container{
  width:100%;
  max-width:1400px;

  margin:auto;

  padding:0 40px;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:0;
}

/* REMOVE OUTER IMAGE PADDING */

.vision-card:nth-child(1){
  padding-right:0;
}

.vision-card:nth-child(2){
  padding-left:0;
}

.vision-card:nth-child(3){
  padding-right:0;
}

.vision-card:nth-child(4){
  padding-left:0;
}


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

.vision-card{
  position:relative;

  min-height:500px;

  overflow:hidden;

  border:10px solid #D7D4D4;
}

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

.text-card{
  display:flex;
  align-items:center;
  justify-content:center;

  background:#D7D4D4;
}

/* CONTENT */

.vision-content{
  width:100%;
  max-width:380px;
}

/* TITLE */

.vision-content h2{
  font-size:48px;
  line-height:1.1;
  font-weight:400;

  margin:0 0 28px;

  color:#222;

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

/* DESCRIPTION */

.vision-content p{
  margin:0;

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

  color:#222;

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

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

.image-card{
  background:#ddd;
}

/* IMAGE */

.vision-image{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  opacity:0;

  transform:scale(1.05);

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

/* ACTIVE */

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

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

@media(max-width:1200px){

  .vision-card{
    min-height:440px;
  }

  .vision-content h2{
    font-size:42px;
  }

  .vision-content p{
    font-size:18px;
  }

}

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

@media(max-width:991px){

  .vision-mission-section{
    padding:90px 0;
  }

  .vision-mission-container{
    padding:0 24px;
  }

  .vision-card{
    min-height:380px;
  }

}

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

@media(max-width:768px){

  .vision-mission-section{
    padding:70px 0;
  }

  .vision-mission-container{
    display:flex;
    flex-direction:column;

    padding:0 18px;

    gap:0;
  }

  .vision-card{
    min-height:auto;
    border:none;
  }

  /* ORDER */

  .vision-card:nth-child(1){
    order:1;
  }

  .vision-card:nth-child(2){
    order:2;
  }

  .vision-card:nth-child(4){
    order:3;
  }

  .vision-card:nth-child(3){
    order:4;
  }

  /* TEXT */

  .text-card{
    padding:36px 6px 28px;
  }

  .vision-content{
    max-width:100%;
  }

  .vision-content h2{
    font-size:32px;
    margin-bottom:18px;
  }

  .vision-content p{
    font-size:14px;
    line-height:1.8;
  }

  /* IMAGE */

  .image-card{
    height:170px;
  }

}










/* =========================
CONTACT SECTION
========================= */

.contact-section{
  padding:120px 0;
  background:#E8E8E6;

  overflow:hidden;
}

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

  margin:auto;

  padding:0 40px;

  display:grid;
  grid-template-columns:420px 1fr;

  gap:40px;

  align-items:stretch;
}

/* =========================
LEFT SIDE
========================= */

.contact-left{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* TITLE */

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

  margin:0 0 20px;

  color:#001241;

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

/* DESCRIPTION */

.contact-description{
  font-size:20px;
  line-height:1.7;

  margin:0 0 50px;

  color:#222;

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

/* =========================
INFO
========================= */

.contact-info{
  display:flex;
  flex-direction:column;
}

/* ITEM */

.contact-item{
  padding:20px 0;

  border-bottom:1px solid rgba(0,0,0,0.12);
}

/* LABEL */

.contact-item span{
  display:block;

  font-size:14px;
  line-height:1.5;

  color:#9A9A9A;

  margin-bottom:10px;

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

/* TEXT */

.contact-item p{
  margin:0;

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

  color:#222;

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

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

.contact-right{
  overflow:hidden;
}

/* IMAGE */

.contact-image{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transform:translateX(140px);
  opacity:0;

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

/* ACTIVE */

.contact-image.show{
  transform:translateX(0);
  opacity:1;
}

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

@media(max-width:1200px){

  .contact-container{
    grid-template-columns:380px 1fr;
  }

  .contact-title{
    font-size:44px;
  }

  .contact-description{
    font-size:18px;
  }

}

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

@media(max-width:991px){

  .contact-section{
    padding:90px 0;
  }

  .contact-container{
    grid-template-columns:1fr;

    padding:0 24px;
  }

  .contact-right{
    order:2;
  }

  .contact-left{
    order:1;
  }

  .contact-image{
    height:500px;
  }

}

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

@media(max-width:768px){

  .contact-section{
    padding:70px 0;
  }

  .contact-container{
    padding:0 18px;

    gap:30px;
  }

  .contact-title{
    font-size:32px;
    margin-bottom:16px;
  }

  .contact-description{
    font-size:14px;
    line-height:1.8;

    margin-bottom:36px;
  }

  .contact-item{
    padding:16px 0;
  }

  .contact-item span{
    font-size:12px;
    margin-bottom:8px;
  }

  .contact-item p{
    font-size:14px;
    line-height:1.7;
  }

  .contact-image{
    height:320px;
  }

}



/*CONTACT PAGE MAP*/
/* =========================
MAP SECTION
========================= */

.map-section{
  padding:0 0 100px;
  background:#E8E8E6;
}

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

  margin:auto;

  padding:0 40px;
}

/* MAP WRAPPER */

.map-wrapper{
  width:100%;
  height:520px;

  overflow:hidden;

  background:#ddd;
}

/* MAP */

.map-wrapper iframe{
  width:100%;
  height:100%;

  border:none;

  filter:grayscale(10%);
}

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

@media(max-width:1200px){

  .map-wrapper{
    height:480px;
  }

}

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

@media(max-width:991px){

  .map-section{
    padding:0 0 90px;
  }

  .map-container{
    padding:0 24px;
  }

  .map-wrapper{
    height:420px;
  }

}

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

@media(max-width:768px){

  .map-section{
    padding:0 0 70px;
  }

  .map-container{
    padding:0 18px;
  }

  .map-wrapper{
    height:240px;
  }

}






/*career*/

/* =========================
CAREER HERO SECTION
========================= */

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

  overflow:hidden;
}

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

  margin:auto;

  padding:0 40px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

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

.career-hero-title{
  max-width:900px;

  margin:0 0 24px;

  font-size:64px;
  line-height:1.1;
  font-weight:400;

  color:#001241;

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

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

.career-hero-description{
  max-width:980px;

  margin:0 0 42px;

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

  color:#222;

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

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

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

  overflow:hidden;
}

/* IMAGE */

.career-hero-image{
  width:100%;
  height:620px;

  object-fit:cover;

  display:block;

  opacity:0;

  transform:scale(1.04);

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

/* SHOW */

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

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

@media(max-width:1200px){

  .career-hero-title{
    font-size:56px;
  }

  .career-hero-description{
    font-size:18px;
    max-width:860px;
  }

  .career-hero-image{
    height:560px;
  }

}

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

@media(max-width:991px){

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

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

  .career-hero-title{
    font-size:48px;
  }

  .career-hero-description{
    font-size:17px;
  }

  .career-hero-image{
    height:460px;
  }

}

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

@media(max-width:768px){

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

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

  .career-hero-title{
    font-size:32px;
    line-height:1.2;

    margin-bottom:16px;

    max-width:320px;
  }

  .career-hero-description{
    font-size:14px;
    line-height:1.8;

    margin-bottom:28px;

    max-width:100%;
  }

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

}

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

@media(max-width:480px){

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

  .career-hero-image{
    height:200px;
  }

}





/*Career resume email*/
/* =========================
RESUME SECTION
========================= */

.resume-section{
  padding:70px 0 100px;
  background:#E8E8E6;
}

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

  margin:auto;

  padding:0 40px;
}

/* BOX */

.resume-box{
  border:1px solid rgba(0,0,0,0.14);

  padding:90px 40px;

  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

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

.resume-title{
  font-size:64px;
  line-height:1.1;
  font-weight:400;

  margin:0 0 24px;

  color:#001241;

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

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

.resume-description{
  max-width:820px;

  margin:0 0 40px;

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

  color:#222;

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

/* =========================
BUTTON
========================= */

.resume-button{
  min-width:420px;

  padding:20px 32px;

  background:#001241;

  color:#fff;

  text-decoration:none;

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

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

  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition:0.4s ease;
}

/* HOVER */

.resume-button:hover{
  opacity:0.9;
  transform:translateY(-2px);
}

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

@media(max-width:1200px){

  .resume-title{
    font-size:56px;
  }

  .resume-description{
    font-size:18px;
  }

}

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

@media(max-width:991px){

  .resume-section{
    padding:60px 0 90px;
  }

  .resume-container{
    padding:0 24px;
  }

  .resume-box{
    padding:70px 32px;
  }

  .resume-title{
    font-size:48px;
  }

  .resume-button{
    min-width:340px;
  }

}

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

@media(max-width:768px){

  .resume-section{
    padding:50px 0 70px;
  }

  .resume-container{
    padding:0 18px;
  }

  .resume-box{
    padding:50px 20px;
  }

  .resume-title{
    font-size:32px;
    line-height:1.2;

    margin-bottom:18px;
  }

  .resume-description{
    font-size:14px;
    line-height:1.8;

    margin-bottom:28px;
  }

  .resume-button{
    width:100%;
    min-width:100%;

    padding:18px 20px;

    font-size:14px;
  }

}




/*PROJECT PAGE CSS*/


/* ==========================
   Projects card Section
========================== */
/* ==================================
   PROJECTS SECTION
================================== */

.projects-section {
    padding: 100px 20px;
    background: #f7f7f7;
}

/* Container */

.projects-section .container {
    max-width: 1200px;
    margin: auto;
}

/* ==================================
   FILTERS
================================== */

.project-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 60px;
}

.filter-btn {
    min-width: 120px;
    height: 42px;

    background: transparent;
    border: 1px solid #dcdcdc;

    font-size: 14px;
    color: #666;

    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: #25378d;
    color: #fff;
    border-color: #25378d;
}

.filter-btn.active {
    background: #25378d;
    color: #fff;
    border-color: #25378d;
}

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

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
}

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

.project-card {
    display: block;
    text-decoration: none;
    color: inherit;

    transition: all 0.4s ease;
}

/* Image Wrapper */

.project-image {
    overflow: hidden;
    width: 100%;
}

/* Same Height Images */

.project-image img {
    width: 100%;
    height: 420px; /* Desktop Height */
    object-fit: cover;
    display: block;

    transition: transform 0.6s ease;
}

/* Hover Effect */

.project-card:hover {
    transform: translateY(-8px);
}

.project-card:hover img {
    transform: scale(1.08);
}

.project-card h3 {
    text-align: center;
    margin-top: 18px;

    font-size: 18px;
    font-weight: 400;
    color: #222;

    transition: 0.3s;
}

.project-card:hover h3 {
    color: #25378d;
}

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

@media (max-width: 991px) {

    .projects-section {
        padding: 80px 20px;
    }

    .projects-grid {
        gap: 40px 25px;
    }

    .project-image img {
        height: 350px;
    }
}

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

@media (max-width: 767px) {

    .projects-section {
        padding: 60px 15px;
    }

    /* EXACTLY LIKE YOUR DESIGN */

    .project-filters {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 35px;
    }

    .filter-btn {
        width: 100%;
        min-width: auto;
        height: 40px;
        font-size: 13px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .project-image img {
        height: 300px;
    }

    .project-card h3 {
        font-size: 16px;
        margin-top: 14px;
    }
}

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

@media (max-width: 480px) {

    .projects-section {
        padding: 50px 14px;
    }

    .project-image img {
        height: 260px;
    }

    .filter-btn {
        font-size: 12px;
        height: 38px;
    }
}