@charset "UTF-8";
/* CSS Document */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#000;
  color:#fff;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

/* HEADER */

.header{
  width:100%;
  height:90px;

  position:fixed;
  top:0;
  left:0;

  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 60px;

  background:rgba(0,0,0,0.9);

  border-bottom:1px solid rgba(255,255,255,0.08);
}

.logo img{
  height:58px;
  width:auto;
}

.nav ul{
  list-style:none;

  display:flex;
  align-items:center;

  gap:32px;
}

.nav a{
  text-decoration:none;

  color:#fff;

  font-size:13px;
  font-weight:700;

  letter-spacing:0.6px;

  transition:0.3s;
}

.nav a:hover,
.nav .active{
  color:#d4a64a;
}

.contact-btn{
  border:1px solid #d4a64a;

  padding:12px 22px;

  color:#d4a64a !important;
}

.contact-btn:hover{
  background:#d4a64a;
  color:#000 !important;
}

/* HERO */

.hero{
  position:relative;

  width:100%;
  height:100vh;

  min-height:720px;

  overflow:hidden;
}

.slide{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  opacity:0;

  transform:scale(1);

  transition:
  opacity 1.5s ease-in-out,
  transform 7s ease-in-out;
}

.slide.active{
  opacity:1;
  transform:scale(1.05);
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    to right,
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25)
  );

  z-index:2;
}

.hero-content{
  position:relative;
  z-index:3;

  height:100%;

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

  padding-left:80px;

  max-width:850px;
}

.hero-content h1{
  font-size:64px;
  line-height:1.05;

  font-weight:900;

  text-transform:uppercase;

  margin-bottom:28px;
}

.hero-content h1 span{
  color:#d4a64a;
}

.hero-content p{
  font-size:18px;
  line-height:1.8;

  color:#e0e0e0;

  max-width:620px;

  margin-bottom:38px;
}

.hero-buttons{
  display:flex;
  gap:20px;
  align-items:center;
}

.primary-btn{
  display:inline-block;

  background:#d4a64a;
  color:#000;

  text-decoration:none;

  padding:17px 32px;

  font-size:14px;
  font-weight:800;

  text-transform:uppercase;
}

.secondary-btn{
  color:#fff;

  text-decoration:none;

  font-size:14px;
  font-weight:700;

  text-transform:uppercase;
}

.secondary-btn:hover{
  color:#d4a64a;
}

/* FEATURE STRIP */

.feature-strip{
  background:#050505;

  padding:0 60px 36px;

  margin-top:-95px;

  position:relative;

  z-index:5;
}

.feature-box{
  max-width:1180px;

  margin:0 auto;

  background:rgba(18,18,18,0.96);

  display:grid;

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

  border:1px solid rgba(255,255,255,0.08);
}

.feature-item{
  display:flex;
  align-items:center;

  gap:20px;

  padding:30px 28px;

  border-right:1px solid rgba(255,255,255,0.08);
}

.feature-item:last-child{
  border-right:none;
}

.feature-item img{
  width:45px;
  height:45px;
}

.feature-item h3{
  font-size:14px;

  text-transform:uppercase;

  margin-bottom:6px;
}

.feature-item p{
  font-size:13px;

  color:#bdbdbd;

  line-height:1.5;
}

/* SERVICES */

.services{
  background:#fff;

  color:#000;

  padding:85px 70px 95px;
}

.section-title{
  text-align:center;

  margin-bottom:45px;
}

.section-title h2{
  font-size:36px;
  font-weight:900;

  text-transform:uppercase;

  margin-bottom:16px;
}

.section-title h2::after{
  content:"";

  display:block;

  width:55px;
  height:4px;

  background:#d4a64a;

  margin:14px auto 0;
}

.section-title p{
  font-size:16px;
  color:#333;
}

.six-services{
  max-width:1260px;

  margin:0 auto;

  display:grid;

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

  gap:18px;
}

.image-card{
  background:#fff;

  border:1px solid #e3e3e3;

  box-shadow:0 8px 25px rgba(0,0,0,0.08);

  transition:0.3s ease;

  overflow:hidden;
}

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

  border-color:#d4a64a;
}

.image-card img{
  width:100%;
  height:190px;

  object-fit:cover;
}

.service-card-content{
  padding:22px 18px 28px;
}

.service-card-content h3{
  font-size:14px;
  font-weight:900;

  text-transform:uppercase;

  margin-bottom:14px;
}

.service-card-content p{
  font-size:13px;

  line-height:1.7;

  color:#555;
}

.services-button{
  text-align:center;

  margin-top:38px;
}

.services-button a{
  display:inline-block;

  text-decoration:none;

  color:#000;

  border:1px solid #222;

  padding:14px 28px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  transition:0.3s ease;
}

.services-button a:hover{
  background:#d4a64a;

  border-color:#d4a64a;
}

/* CAPABILITY */

.capability{
  background:
    linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92)),
    url("../images/3.jpg");

  background-size:cover;
  background-position:center;

  padding:95px 70px;

  color:#fff;
}

.capability-inner{
  max-width:1260px;

  margin:0 auto;

  display:grid;

  grid-template-columns:260px 1fr;

  gap:55px;

  align-items:center;
}

.capability-left{
  border-right:1px solid rgba(212,166,74,0.45);

  padding-right:45px;
}

.capability-left h2{
  font-size:34px;
  line-height:1.15;

  text-transform:uppercase;

  font-weight:900;

  margin-bottom:22px;
}

.capability-left h2 span{
  color:#d4a64a;
}

.capability-left p{
  font-size:15px;
  line-height:1.8;

  color:#cfcfcf;

  margin-bottom:28px;
}

.outline-btn{
  display:inline-block;

  text-decoration:none;

  color:#d4a64a;

  border:1px solid #d4a64a;

  padding:13px 24px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  transition:0.3s ease;
}

.outline-btn:hover{
  background:#d4a64a;

  color:#000;
}

.capability-steps{
  display:grid;

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

  gap:25px;
}

.step{
  text-align:center;
}

.step-icon{
  width:120px;
  height:120px;

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

  margin:0 auto 22px;
}

.step-icon img{
  width:120px;
  height:120px;

  object-fit:contain;
}

.step h3{
  color:#d4a64a;

  font-size:15px;

  text-transform:uppercase;

  margin-bottom:10px;
}

.step p{
  font-size:13px;
  line-height:1.6;

  color:#d8d8d8;
}

/* OUR WORK */

.our-work{
  background:#fff;

  padding:95px 70px 100px;
}

.dark-title h2{
  color:#000;
}

.dark-title p{
  color:#555;
}

.work-filter{
  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:18px;

  margin-bottom:45px;
}

.work-filter button{
  background:none;

  border:none;

  color:#222;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  cursor:pointer;

  transition:0.3s ease;
}

.work-filter button:hover,
.work-filter .active{
  color:#d4a64a;
}

.work-grid{
  max-width:1400px;

  margin:0 auto;

  display:grid;

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

  gap:22px;
}

.work-card{
  position:relative;

  overflow:hidden;

  background:#000;
}

.work-card img{
  width:100%;
  height:420px;

  object-fit:cover;

  transition:0.4s ease;
}

.work-card:hover img{
  transform:scale(1.05);
}

.work-overlay{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:24px 20px;

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.96),
    rgba(0,0,0,0)
  );
}

.work-overlay h3{
  font-size:17px;

  line-height:1.4;

  margin-bottom:8px;

  color:#fff;
}

.work-overlay p{
  font-size:13px;

  color:#d8d8d8;

  margin-bottom:10px;
}

.work-overlay span{
  font-size:12px;
  font-weight:700;

  text-transform:uppercase;

  color:#d4a64a;
}

/* WHY GOLD TOUCH */

.why-goldtouch{
  background:#050505;
  padding:100px 70px;
}

.why-inner{
  max-width:1400px;
  margin:0 auto;

  display:grid;
  grid-template-columns:300px 1fr 430px;
  gap:45px;

  align-items:center;
}

.why-left{
  padding-right:20px;
}

.why-left h2{
  font-size:42px;
  line-height:1.1;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:28px;
}

.why-left h2 span{
  color:#d4a64a;
}

.why-left p{
  font-size:16px;
  line-height:1.9;
  color:#d0d0d0;
  margin-bottom:34px;
}

.why-image{
  position:relative;
  overflow:hidden;
  min-height:430px;
}

.why-image img{
  width:100%;
  height:430px;
  object-fit:cover;
  filter:grayscale(100%);
}

.why-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(5,5,5,0.25),
    rgba(5,5,5,0),
    rgba(5,5,5,0.25)
  );
}

.why-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:34px 38px;
}

.why-stats .stat-item{
  padding-left:26px;
  border-left:1px solid rgba(212,166,74,0.5);
}

.stat-item h3{
  font-size:48px;
  line-height:1;
  color:#d4a64a;
  margin-bottom:14px;
  font-weight:900;
}

.stat-item p{
  font-size:14px;
  line-height:1.6;
  color:#fff;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:0.4px;
}

/* TRUSTED BRANDS */

.trusted-brands{
  background:#f5f5f5;
  padding:75px 70px;
}

.brands-grid{
  max-width:1400px;

  margin:45px auto 0;

  display:grid;

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

  gap:45px 50px;

  align-items:center;
}

.brand-logo{
  display:flex;
  align-items:center;
  justify-content:center;

  height:90px;
}

.brand-logo img{
  width:auto;
  height:auto;

  max-width:220px;
  max-height:75px;

  opacity:0.75;

  transition:0.3s ease;

  filter:grayscale(100%);
}

.brand-logo img:hover{
  opacity:1;

  transform:scale(1.05);
}

/* INDIVIDUAL LOGO ADJUSTMENTS */

.seatrium img{
  max-width:190px;
}

.pa img{
  max-width:115px;
}

.hapag img{
  max-width:200px;
}

.mediatek img{
  max-width:210px;
}

.keppel img{
  max-width:210px;
}

.yamaha img{
  max-width:230px;
}

.mcc img{
  max-width:150px;
}

.imh img{
  max-width:230px;
}

.nhg img{
  max-width:220px;
}

.activesg img{
  max-width:220px;
}

/* RESPONSIVE */

@media (max-width:1100px){

  .brands-grid{
    grid-template-columns:repeat(3,1fr);
  }

}

@media (max-width:768px){

  .trusted-brands{
    padding:70px 25px;
  }

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

    gap:35px 20px;
  }

  .brand-logo{
    height:70px;
  }

  .brand-logo img{
    max-width:160px;
    max-height:55px;
  }

}

/* RESPONSIVE */

@media (max-width:1200px){

  .why-inner{
    grid-template-columns:1fr;
  }

  .why-image img{
    height:480px;
  }

}

@media (max-width:768px){

  .why-goldtouch{
    padding:70px 25px;
  }

  .why-left h2{
    font-size:36px;
  }

  .why-image{
    min-height:320px;
  }

  .why-image img{
    height:320px;
  }

  .why-stats{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }

  .stat-item h3{
    font-size:36px;
  }

}


/* RESPONSIVE */

@media (max-width:1200px){

  .why-inner{
    grid-template-columns:1fr;
  }

  .why-image img{
    height:500px;
  }

}

@media (max-width:768px){

  .why-goldtouch{
    padding:70px 25px;
  }

  .why-image img{
    height:320px;
  }

  .why-stats{
    grid-template-columns:1fr 1fr;
  }

  .stat-item h3{
    font-size:36px;
  }

}

/* RESPONSIVE */

@media (max-width:1400px){

  .work-grid{
    grid-template-columns:repeat(4,1fr);
  }

}

@media (max-width:1200px){

  .six-services{
    grid-template-columns:repeat(3,1fr);
  }

}

@media (max-width:1100px){

  .nav ul{
    gap:18px;
  }

  .hero-content h1{
    font-size:50px;
  }

  .feature-box{
    grid-template-columns:repeat(2,1fr);
  }

  .capability-inner{
    grid-template-columns:1fr;
  }

  .capability-left{
    border-right:none;

    border-bottom:1px solid rgba(212,166,74,0.45);

    padding-right:0;

    padding-bottom:35px;
  }

  .capability-steps{
    grid-template-columns:repeat(3,1fr);
  }

  .work-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:768px){

  .header{
    height:auto;

    padding:20px;

    flex-direction:column;

    gap:18px;

    position:relative;
  }

  .nav ul{
    flex-wrap:wrap;

    justify-content:center;
  }

  .hero-content{
    padding:80px 25px;
  }

  .hero-content h1{
    font-size:38px;
  }

  .feature-strip{
    margin-top:0;

    padding:30px 20px;
  }

  .feature-box,
  .six-services,
  .capability-steps,
  .work-grid{
    grid-template-columns:1fr;
  }

  .services,
  .capability,
  .our-work{
    padding:70px 25px;
  }

  .image-card img{
    height:220px;
  }

  .work-card img{
    height:500px;
  }

}

.work-filter-link{
  text-decoration:none;
  color:#222;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  transition:0.3s ease;
}

.work-filter-link:hover{
  color:#d4a64a;
}

/* FOOTER */

.footer{
  background:#050505;
  padding:80px 70px;
  color:#fff;
}

.footer-inner{
  max-width:1400px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr 1.5fr;
  gap:60px;
}

.footer-brand img{
  width:180px;
  margin-bottom:30px;

  margin-left:-14px;

  display:block;
}

.footer-brand small{
  color:#888;
  font-size:13px;
  line-height:1.7;
}

.footer h3{
  font-size:15px;
  text-transform:uppercase;
  margin-bottom:24px;
  color:#fff;
}

.footer-links a,
.footer-contact a{
  display:block;
  color:#cfcfcf;
  text-decoration:none;
  font-size:14px;
  margin-bottom:13px;
  transition:0.3s ease;
}

.footer-links a:hover,
.footer-contact a:hover{
  color:#d4a64a;
}

.footer-contact p{
  color:#cfcfcf;
  font-size:14px;
  line-height:1.8;
  margin-bottom:18px;
}

.footer-btn{
  display:inline-block !important;
  width:max-content;

  background:#d4a64a;
  color:#000 !important;

  padding:14px 24px;

  font-size:13px !important;
  font-weight:800;

  text-transform:uppercase;

  margin-top:10px;
}

.footer-btn:hover{
  background:#fff;
  color:#000 !important;
}

/* FOOTER RESPONSIVE */

@media (max-width:1000px){

  .footer-inner{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:768px){

  .footer{
    padding:60px 25px;
  }

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

}

/* FOOTER CONTACT ICONS */

.contact-item{
  display:flex;
  align-items:flex-start;

  gap:14px;

  margin-bottom:22px;
}

.contact-item img{
  width:18px;
  height:18px;

  margin-top:4px;

  opacity:0.8;
}

.contact-item p{
  margin:0;
}

.contact-item a{
  color:#cfcfcf;
  text-decoration:none;
}

.contact-item a:hover{
  color:#d4a64a;
}

/* WHATSAPP */

.footer-social{
  margin-top:10px;
  margin-bottom:24px;
}

.footer-social a{
  display:flex;
  align-items:center;

  gap:12px;

  text-decoration:none;

  color:#cfcfcf;

  font-size:14px;
  font-weight:600;

  transition:0.3s ease;
}

.footer-social a:hover{
  color:#25D366;
}

.footer-social img{
  width:24px;
  height:24px;
}

/* CONTACT PAGE */

.contact-hero{
  position:relative;

  height:560px;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.88),
      rgba(0,0,0,0.70),
      rgba(0,0,0,0.55)
    ),
    url("../images/contactus.jpg");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  display:flex;
  align-items:center;

  padding:120px 70px 60px;

  overflow:hidden;
}

.contact-hero-content{
  max-width:900px;
}

.contact-hero h1{
  font-size:72px;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:20px;
  color:#d4a64a;
}

.contact-hero p{
  font-size:20px;
  color:#d8d8d8;
  line-height:1.7;
}

.contact-main{
  background:#000;
  padding:100px 70px;
  color:#000;
}

.contact-grid{
  max-width:1300px;
  margin:0 auto;

  display:grid;
  grid-template-columns:0.9fr 1.4fr;
  gap:60px;
}

.contact-info-box,
.contact-form-box{
  background:#f7f7f7;
  padding:50px;
  border:1px solid #e5e5e5;
}

.contact-info-box h2,
.contact-form-box h2{
  font-size:32px;
  text-transform:uppercase;
  margin-bottom:24px;
}

.contact-info-box > p{
  color:#555;
  font-size:16px;
  line-height:1.8;
  margin-bottom:36px;
}

.contact-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:26px;
}

.contact-row img{
  width:22px;
  height:22px;
  margin-top:3px;
}

.contact-row span,
.contact-row a{
  color:#333;
  font-size:16px;
  line-height:1.7;
  text-decoration:none;
}

.contact-row a:hover{
  color:#d4a64a;
}

.whatsapp-contact{
  display:inline-block;
  margin-top:18px;
  background:#d4a64a;
  color:#000;
  text-decoration:none;
  padding:16px 28px;
  font-weight:800;
  text-transform:uppercase;
}

.contact-form-box form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.form-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea{
  width:100%;
  padding:17px 18px;
  border:1px solid #ddd;
  font-size:15px;
  font-family:Arial, Helvetica, sans-serif;
}

.contact-form-box textarea{
  min-height:170px;
  resize:vertical;
}

.contact-form-box button{
  width:max-content;
  background:#000;
  color:#fff;
  border:none;
  padding:17px 32px;
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
  transition:0.3s ease;
}

.contact-form-box button:hover{
  background:#d4a64a;
  color:#000;
}

/* LOCATION */

.location-section{
  background:#f5f5f5;
  padding:90px 70px;
}

.map-placeholder{
  max-width:1300px;
  height:360px;
  margin:0 auto;
  background:#111;
  color:#fff;

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

  text-align:center;
  font-size:20px;
  line-height:1.8;
}

/* CONTACT RESPONSIVE */

@media (max-width:1000px){

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

}

@media (max-width:768px){

  .contact-hero{
    height:420px;
    padding:120px 25px 50px;
  }

  .contact-hero h1{
    font-size:46px;
  }

  .contact-main,
  .location-section{
    padding:70px 25px;
  }

  .contact-info-box,
  .contact-form-box{
    padding:35px 25px;
  }

  .form-row{
    grid-template-columns:1fr;
  }

}

/* VISIT US */

.visit-us{
  background:#000;

  padding:0 70px 100px;
}

.visit-container{
  max-width:1280px;

  margin:0 auto;

  display:grid;

  grid-template-columns:380px 1fr;

  gap:40px;

  align-items:stretch;
}

.visit-content{
  background:#111;

  padding:55px 45px;

  border:1px solid rgba(255,255,255,0.08);
}

.visit-content h2{
  font-size:48px;

  text-transform:uppercase;

  margin-bottom:28px;

  color:#d4a64a;
}

.visit-content p{
  font-size:18px;

  line-height:2;

  color:#d8d8d8;

  margin-bottom:35px;
}

.visit-btn{
  display:inline-block;

  text-decoration:none;

  color:#000;

  background:#d4a64a;

  padding:15px 28px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  transition:0.3s ease;
}

.visit-btn:hover{
  opacity:0.85;
}

.map-box{
  display:block;

  overflow:hidden;

  border:1px solid rgba(255,255,255,0.08);

  min-height:420px;
}

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

  border:none;

  filter:grayscale(100%) contrast(1.1);
}



/* RESPONSIVE */

@media (max-width:900px){

  .visit-container{
    grid-template-columns:1fr;
  }

  .map-box{
    min-height:350px;
  }

}

/* SUCCESS POPUP */

.success-popup{
  position:fixed;

  inset:0;

  background:rgba(0,0,0,0.75);

  display:none;

  align-items:center;
  justify-content:center;

  z-index:99999;
}

.success-box{
  background:#fff;

  width:90%;
  max-width:460px;

  padding:55px 45px;

  text-align:center;

  border-top:5px solid #d4a64a;
}

.success-box h3{
  font-size:32px;

  text-transform:uppercase;

  margin-bottom:20px;

  color:#000;
}

.success-box p{
  font-size:16px;

  line-height:1.8;

  color:#555;

  margin-bottom:35px;
}

.success-box button{
  background:#d4a64a;

  color:#000;

  border:none;

  padding:14px 30px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  cursor:pointer;

  transition:0.3s ease;
}

.success-box button:hover{
  opacity:0.85;
}

/* FOOTER BOTTOM */

.footer-bottom{
  margin-top:70px;

  padding-top:28px;

  border-top:1px solid rgba(255,255,255,0.08);

  text-align:center;

  color:#777;

  font-size:13px;

  line-height:1.8;
}

/* VIDEO POPUP */

.video-popup{
  position:fixed;

  inset:0;

  background:rgba(0,0,0,0.88);

  display:none;

  align-items:center;
  justify-content:center;

  z-index:99999;

  padding:40px;
}

.video-container{
  position:relative;

  width:90%;
  max-width:1200px;

  background:#000;
}

.video-container video{
  width:100%;

  display:block;
}

.close-video{
  position:absolute;

  top:-45px;
  right:0;

  color:#fff;

  font-size:42px;

  cursor:pointer;

  transition:0.3s ease;
}

.close-video:hover{
  color:#d4a64a;
}

/* ABOUT HERO */

.about-hero{
  min-height:760px;
  margin-top:90px;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.68),
      rgba(0,0,0,0.18)
    ),
    url("../images/P1-1.jpg");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  display:flex;
  align-items:center;

  padding:120px 70px 90px;
}

.about-hero-content{
  max-width:760px;
}

.about-hero-content h1{
  font-size:92px;
  line-height:0.95;
  font-weight:900;
  margin-bottom:30px;
  color:#fff;
}

.about-hero-content h1 span{
  color:#d4a64a;
}

.about-hero-content h3{
  font-size:22px;
  line-height:1.6;
  letter-spacing:3px;
  font-weight:400;
  margin-bottom:30px;
  color:#fff;
}

.about-hero-content p{
  font-size:18px;
  line-height:1.8;
  color:#d2d2d2;
  max-width:620px;
}

/* STORY SECTION */

.about-story{
  display:grid;

  grid-template-columns:34% 40% 26%;

  background:#050505;

  border-top:1px solid rgba(255,255,255,0.08);
}

.story-image img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.story-content{
  padding:70px 55px;
}

.small-title{
  color:#d4a64a;

  font-size:15px;

  letter-spacing:2px;

  text-transform:uppercase;

  display:block;

  margin-bottom:16px;
}

.story-content h2{
  font-size:54px;
  line-height:1.1;

  margin-bottom:22px;

  font-weight:900;
}

.story-content p{
  font-size:17px;
  line-height:1.9;

  color:#d3d3d3;

  margin-bottom:24px;
}

.story-stats{
  padding:70px 45px;

  border-left:none;

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

.stat-item{
  display:flex;
  align-items:center;

  gap:28px;

  padding:28px 0;

  border-bottom:1px solid rgba(255,255,255,0.08);
}

.stat-item:last-child{
  border-bottom:none;
}

.stat-item img{
  width:58px;
  height:58px;
}

.stat-item h3{
  font-size:60px;

  color:#d4a64a;

  line-height:1;

  margin-bottom:10px;
}

.stat-item p{
  font-size:18px;

  line-height:1.5;

  color:#fff;

  text-transform:uppercase;
}

/* VALUES SECTION */

.about-values{
  background:
    linear-gradient(
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.94)
    );

  padding:90px 70px 100px;

  text-align:center;
}

.about-values h2{
  font-size:56px;

  margin-bottom:18px;

  font-weight:900;
}

.center-line{
  margin:0 auto 55px;
}

.values-grid{
  display:grid;

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

  gap:40px;

  max-width:1450px;

  margin:0 auto;
}

.value-card{
  text-align:center;
}

.value-card img{
  width:78px;
  height:78px;

  margin:0 auto 24px;
}

.value-card h3{
  font-size:24px;

  margin-bottom:16px;

  color:#fff;
}

.value-card p{
  font-size:16px;
  line-height:1.8;

  color:#d2d2d2;
}

/* FOOTER */

.footer{
  background:#020202;

  border-top:1px solid rgba(255,255,255,0.08);
}

.footer-inner{
  max-width:1500px;

  margin:0 auto;

  padding:70px 70px 55px;

  display:grid;

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

  gap:60px;
}

.footer-brand img{
  width:220px;

  margin-bottom:40px;
}

.footer-brand p{
  font-size:18px;
  line-height:2;

  color:#fff;
}

.footer-links h3,
.footer-contact h3{
  font-size:26px;

  margin-bottom:30px;
}

.footer-links ul{
  list-style:none;
}

.footer-links li{
  margin-bottom:18px;
}

.footer-links a{
  text-decoration:none;

  color:#fff;

  font-size:17px;

  transition:0.3s ease;
}

.footer-links a:hover{
  color:#d4a64a;
}

.footer-contact p{
  font-size:17px;
  line-height:2;

  color:#fff;

  margin-bottom:22px;
}

.footer-btn{
  display:inline-block;

  margin-top:10px;

  padding:16px 28px;

  background:#d4a64a;

  color:#000;

  text-decoration:none;

  font-weight:800;

  text-transform:uppercase;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);

  text-align:center;

  padding:30px 20px 40px;
}

.footer-bottom p{
  font-size:15px;
  line-height:1.8;

  color:#a0a0a0;
}

/* RESPONSIVE */

@media (max-width:1200px){

  .about-hero,
  .about-story{
    grid-template-columns:1fr;
  }

  .values-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .footer-inner{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:768px){

  .about-hero{
    min-height:620px;
    padding:120px 25px 70px;
    background-position:center center;
  }

  .about-hero-content h1{
    font-size:58px;
  }

  .about-hero-content h3{
    font-size:16px;
    letter-spacing:2px;
  }

  .about-hero-content p{
    font-size:16px;
  }

}

/* =========================================
   SERVICES PAGE
========================================= */

.services-page-hero{
  width:100%;
  min-height:520px;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.88),
      rgba(0,0,0,0.72),
      rgba(0,0,0,0.35)
    ),
    url("../images/P2-1.jpg");

  background-size:cover;
  background-position:center;

  display:flex;
  align-items:center;

  padding:160px 80px 110px;
}

.services-hero-content{
  max-width:760px;
}

.services-hero-content h1{
  font-size:82px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:30px;
  color:#fff;
}

.services-hero-content h1 span{
  color:#d4a64a;
}

.gold-line{
  width:90px;
  height:4px;
  background:#d4a64a;
  margin-bottom:30px;
}

.services-hero-content p{
  font-size:22px;
  line-height:1.8;
  color:#e0e0e0;
  max-width:700px;
}

/* SERVICE NAVIGATION */

.services-nav{
  background:#050505;

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

  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.services-nav a{
  text-decoration:none;
  color:#fff;
  padding:42px 25px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,0.06);
  transition:0.3s ease;
}

.services-nav a:last-child{
  border-right:none;
}

.services-nav a:hover{
  background:#0f0f0f;
}

.services-nav img{
  width:58px;
  height:58px;
  object-fit:contain;
  margin:0 auto 18px;
}

.services-nav span{
  font-size:14px;
  font-weight:800;
  line-height:1.5;
  text-transform:uppercase;
}

/* SERVICE IMAGE BACKGROUND SECTIONS */

.services-page{
  width:100%;
  background:#000;
  padding:0;
}

.service-detail.image-bg{
  width:100%;
  min-height:650px;

  margin:0;

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  position:relative;

  display:flex;
  align-items:center;

  padding:95px 80px;

  border-bottom:1px solid rgba(212,166,74,0.32);
}

.service-detail.image-bg::before{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    to right,
    rgba(0,0,0,0.94),
    rgba(0,0,0,0.72),
    rgba(0,0,0,0.18)
  );

  z-index:1;
}

.service-detail.image-bg:nth-child(even){
  justify-content:flex-end;
}

.service-detail.image-bg:nth-child(even)::before{
  background:linear-gradient(
    to left,
    rgba(0,0,0,0.94),
    rgba(0,0,0,0.72),
    rgba(0,0,0,0.18)
  );
}

.service-detail.image-bg .service-detail-text{
  position:relative;
  z-index:2;

  max-width:650px;
}

.service-detail-text h2{
  font-size:56px;
  line-height:1.08;

  text-transform:uppercase;

  font-weight:900;

  color:#fff;

  margin-bottom:30px;
}

.service-detail-text h2 span{
  display:inline-block;

  color:#d4a64a;

  margin-right:14px;
}

.service-detail-text p{
  font-size:19px;
  line-height:1.9;

  color:#d8d8d8;

  margin-bottom:34px;
}

.service-detail-text ul{
  list-style:none;
}

.service-detail-text ul li{
  position:relative;

  padding-left:28px;

  margin-bottom:16px;

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

  color:#fff;
}

.service-detail-text ul li::before{
  content:"";

  width:9px;
  height:9px;

  border-radius:50%;

  background:#d4a64a;

  position:absolute;

  left:0;
  top:11px;
}

/* SERVICES CTA */

.services-cta{
  background:#000;
  padding:90px 80px;
}

.services-cta-inner{
  max-width:1300px;
  margin:0 auto;

  background:
    linear-gradient(
      to right,
      rgba(18,18,18,0.96),
      rgba(8,8,8,0.96)
    );

  border:1px solid rgba(255,255,255,0.08);

  padding:55px 60px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.services-cta-inner h2{
  font-size:48px;
  line-height:1.1;
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}

.services-cta-inner p{
  font-size:18px;
  line-height:1.8;
  color:#d6d6d6;
}

.services-cta-inner a{
  display:inline-block;

  text-decoration:none;

  background:#d4a64a;
  color:#000;

  padding:18px 34px;

  font-size:14px;
  font-weight:800;

  text-transform:uppercase;

  white-space:nowrap;

  transition:0.3s ease;
}

.services-cta-inner a:hover{
  background:#fff;
}

/* SERVICES PAGE RESPONSIVE */

@media (max-width:1200px){

  .services-nav{
    grid-template-columns:repeat(3,1fr);
  }

  .service-detail.image-bg,
  .service-detail.image-bg:nth-child(even){
    justify-content:flex-start;
  }

  .service-detail.image-bg::before,
  .service-detail.image-bg:nth-child(even)::before{
    background:linear-gradient(
      to right,
      rgba(0,0,0,0.94),
      rgba(0,0,0,0.78),
      rgba(0,0,0,0.35)
    );
  }

}

@media (max-width:768px){

  .services-page-hero{
    padding:150px 30px 90px;
    min-height:auto;
  }

  .services-hero-content h1{
    font-size:56px;
  }

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

  .services-nav{
    grid-template-columns:1fr 1fr;
  }

  .services-nav a{
    padding:30px 15px;
  }

  .service-detail.image-bg{
    min-height:560px;
    padding:80px 30px;
  }

  .service-detail-text h2{
    font-size:38px;
  }

  .service-detail-text p{
    font-size:16px;
  }

  .service-detail-text ul li{
    font-size:15px;
  }

  .services-cta{
    padding:70px 25px;
  }

  .services-cta-inner{
    flex-direction:column;
    align-items:flex-start;
    padding:40px 30px;
  }

  .services-cta-inner h2{
    font-size:34px;
  }

}



/* =========================================
   FOOTER
========================================= */

.footer{
  background:#000;

  padding:90px 70px 35px;

  border-top:1px solid rgba(255,255,255,0.06);
}

.footer-inner{
  max-width:1400px;

  margin:0 auto;

  display:grid;

  grid-template-columns:1.1fr 1fr 1fr 1.2fr;

  gap:60px;
}

.footer-brand img{
  width:240px;

  margin-bottom:35px;
}

.footer-brand p{
  font-size:17px;
  line-height:2;

  color:#fff;

  margin-bottom:35px;
}

.footer-links h3,
.footer-contact h3{
  font-size:18px;
  font-weight:800;

  text-transform:uppercase;

  color:#fff;

  margin-bottom:28px;
}

.footer-links a{
  display:block;

  text-decoration:none;

  color:#fff;

  font-size:17px;

  margin-bottom:20px;

  transition:0.3s ease;
}

.footer-links a:hover{
  color:#d4a64a;
}

.contact-item{
  display:flex;

  align-items:flex-start;

  gap:16px;

  margin-bottom:26px;
}

.contact-item img{
  width:20px;
  margin-top:4px;
}

.contact-item p,
.contact-item a{
  color:#fff;

  text-decoration:none;

  font-size:17px;
  line-height:1.9;
}

.footer-social{
  margin-top:20px;
  margin-bottom:28px;
}

.footer-social a{
  display:flex;

  align-items:center;

  gap:14px;

  text-decoration:none;

  color:#fff;

  font-size:17px;
  font-weight:700;
}

.footer-social img{
  width:24px;
}

.footer-btn{
  display:inline-block;

  text-decoration:none;

  background:#d4a64a;

  color:#000;

  padding:17px 30px;

  font-size:14px;
  font-weight:800;

  text-transform:uppercase;

  transition:0.3s ease;
}

.footer-btn:hover{
  background:#fff;
}

.footer-bottom{
  max-width:1400px;

  margin:70px auto 0;

  padding-top:35px;

  border-top:1px solid rgba(255,255,255,0.08);

  text-align:center;

  color:#a5a5a5;

  font-size:15px;
  line-height:2;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:1200px){

  .services-nav{
    grid-template-columns:repeat(3,1fr);
  }

  .service-detail{
    grid-template-columns:1fr;
  }

  .service-detail.reverse .service-detail-image,
  .service-detail.reverse .service-detail-text{
    order:unset;
  }

  .footer-inner{
    grid-template-columns:1fr 1fr;
  }

}

@media (max-width:768px){

  .services-page-hero{
    padding:150px 30px 90px;
    min-height:auto;
  }

  .services-hero-content h1{
    font-size:56px;
  }

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

  .services-nav{
    grid-template-columns:1fr 1fr;
  }

  .services-page{
    padding:70px 25px;
  }

  .service-detail{
    gap:40px;
    margin-bottom:80px;
  }

  .service-detail-image img{
    height:420px;
  }

  .service-detail-text h2{
    font-size:38px;
  }

  .services-cta{
    padding:70px 25px;
  }

  .services-cta-inner{
    flex-direction:column;
    align-items:flex-start;

    padding:40px 30px;
  }

  .services-cta-inner h2{
    font-size:34px;
  }

  .footer{
    padding:70px 25px 35px;
  }

  .footer-inner{
    grid-template-columns:1fr;
    gap:50px;
  }

}

/* PASSWORD POPUP */

.password-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.82);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.password-box{
  width:90%;
  max-width:420px;
  background:#fff;
  color:#000;
  padding:45px 40px;
  text-align:center;
  border-top:5px solid #d4a64a;
}

.password-box h3{
  font-size:30px;
  text-transform:uppercase;
  margin-bottom:15px;
}

.password-box p{
  color:#555;
  margin-bottom:25px;
}

.password-box input{
  width:100%;
  padding:16px;
  border:1px solid #ccc;
  margin-bottom:20px;
  font-size:16px;
}

.password-buttons{
  display:flex;

  justify-content:center;

  gap:12px;

  margin-top:10px;
}

.password-buttons button{
  width:auto;

  padding:14px 26px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  cursor:pointer;

  transition:0.3s ease;
}

#submitPassword{
  background:#d4a64a;
  color:#000;
  border:1px solid #d4a64a;
}

#submitPassword:hover{
  background:#000;
  color:#d4a64a;
}

#cancelPassword{

  background:transparent;

  border:1px solid #999;

  color:#666;

}

#cancelPassword:hover{

  background:#f2f2f2;

  color:#000;

}


/* =========================================
   CAREERS PAGE
========================================= */

/* HERO */

.careers-hero{
  min-height:760px;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.70),
      rgba(0,0,0,0.28)
    ),
    url("../images/P5-1.jpg");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  display:flex;
  align-items:center;

  padding:140px 80px 90px;
}

.careers-hero-content{
  max-width:760px;
}

.careers-hero-content span{
  display:block;

  color:#d4a64a;

  font-size:16px;
  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

  margin-bottom:20px;
}

.careers-hero-content h1{
  font-size:84px;
  line-height:0.95;

  font-weight:900;

  text-transform:uppercase;

  color:#fff;

  margin-bottom:28px;
}

.careers-hero-content h1 strong{
  color:#d4a64a;
}

.careers-hero-content p{
  font-size:19px;
  line-height:1.9;

  color:#d8d8d8;

  max-width:650px;

  margin-bottom:20px;
}

/* SECTION TITLE */

.careers-section-title{
  text-align:center;

  margin-bottom:65px;
}

.careers-section-title span{
  display:block;

  color:#d4a64a;

  font-size:15px;
  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

  margin-bottom:18px;
}

.careers-section-title h2{
  font-size:52px;

  text-transform:uppercase;

  font-weight:900;

  color:#fff;
}

/* WHY JOIN */

.careers-why{
  background:#050505;

  padding:90px 70px 100px;

  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.careers-icons-grid{
  max-width:1450px;

  margin:0 auto;

  display:grid;

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

.careers-icon-card{
  text-align:center;

  padding:20px 24px;

  border-right:1px solid rgba(255,255,255,0.08);
}

.careers-icon-card:last-child{
  border-right:none;
}

.careers-icon-card img{
  width:62px;
  height:62px;

  object-fit:contain;

  margin:0 auto 24px;
}

.careers-icon-card h3{
  font-size:16px;

  text-transform:uppercase;

  color:#fff;

  margin-bottom:18px;
}

.careers-icon-card p{
  font-size:14px;
  line-height:1.8;

  color:#cfcfcf;
}

/* CULTURE */

.careers-culture{
  background:#f5f5f5;

  display:grid;

  grid-template-columns:0.9fr 1.2fr;

  align-items:center;
}

.careers-culture-text{
  padding:90px 70px;
}

.careers-culture-text span{
  display:block;

  color:#d4a64a;

  font-size:15px;
  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

  margin-bottom:20px;
}

.careers-culture-text h2{
  font-size:62px;
  line-height:1.02;

  text-transform:uppercase;

  font-weight:900;

  color:#000;

  margin-bottom:30px;
}

.careers-culture-text p{
  font-size:18px;
  line-height:1.9;

  color:#444;

  margin-bottom:35px;
}

.careers-culture-text a{
  display:inline-block;

  text-decoration:none;

  border:1px solid #d4a64a;

  color:#000;

  padding:15px 28px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  transition:0.3s ease;
}

.careers-culture-text a:hover{
  background:#d4a64a;
}

.careers-culture-image img{
  width:100%;
  height:100%;

  min-height:520px;

  object-fit:cover;
}

/* LIFE SHOW */

.life-show{
  background:#050505;

  display:grid;

  grid-template-columns:0.85fr 1.15fr;

  align-items:center;
}

.life-show-text{
  padding:90px 70px;
}

.life-show-text span{
  display:block;

  color:#d4a64a;

  font-size:15px;
  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

  margin-bottom:20px;
}

.life-show-text h2{
  font-size:58px;
  line-height:1.05;

  text-transform:uppercase;

  font-weight:900;

  color:#fff;

  margin-bottom:28px;
}

.life-show-text p{
  font-size:18px;
  line-height:1.9;

  color:#d8d8d8;

  margin-bottom:35px;
}

.life-show-text a{
  display:inline-block;

  text-decoration:none;

  border:1px solid #d4a64a;

  color:#d4a64a;

  padding:15px 28px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  transition:0.3s ease;
}

.life-show-text a:hover{
  background:#d4a64a;

  color:#000;
}

.life-show-image img{
  width:100%;
  height:100%;

  min-height:520px;

  object-fit:cover;
}

/* VALUES */

.careers-values{
  background:#fff;

  padding:95px 70px 110px;
}

.careers-values .careers-section-title h2{
  color:#000;
}

.careers-values-grid{
  max-width:1450px;

  margin:0 auto;

  display:grid;

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

  gap:0;
}

.careers-value-card{
  text-align:center;

  padding:0 28px;

  border-right:1px solid #ddd;
}

.careers-value-card:last-child{
  border-right:none;
}

.careers-value-card img{
  width:70px;
  height:70px;

  object-fit:contain;

  margin:0 auto 24px;
}

.careers-value-card h3{
  font-size:18px;

  text-transform:uppercase;

  color:#000;

  margin-bottom:18px;
}

.careers-value-card p{
  font-size:15px;
  line-height:1.8;

  color:#555;
}

/* JOIN NETWORK */

.join-network{
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.78),
      rgba(0,0,0,0.45)
    ),
    url("../images/P5-4.jpg");

  background-size:cover;
  background-position:center;

  padding:110px 80px;
}

.join-network-content{
  max-width:920px;
}

.join-network-content span{
  display:block;

  color:#d4a64a;

  font-size:15px;
  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

  margin-bottom:22px;
}

.join-network-content h2{
  font-size:56px;
  line-height:1.15;

  text-transform:uppercase;

  font-weight:900;

  color:#fff;

  margin-bottom:30px;
}

.join-network-content h2 strong{
  color:#d4a64a;
}

.join-network-content p{
  font-size:18px;
  line-height:1.9;

  color:#d8d8d8;

  margin-bottom:40px;
}

.join-actions{
  display:flex;
  align-items:center;
  gap:30px;

  flex-wrap:wrap;
}

.resume-btn{
  display:inline-block;

  background:#d4a64a;

  color:#000;

  text-decoration:none;

  padding:17px 30px;

  font-size:14px;
  font-weight:800;

  text-transform:uppercase;

  transition:0.3s ease;
}

.resume-btn:hover{
  background:#fff;
}

.career-email{
  display:flex;
  align-items:center;

  gap:14px;

  text-decoration:none;

  color:#fff;

  font-size:17px;
  font-weight:600;
}

.career-email img{
  width:22px;
  height:22px;
}

/* RESPONSIVE */

@media (max-width:1200px){

  .careers-icons-grid{
    grid-template-columns:repeat(3,1fr);
    gap:40px 0;
  }

  .careers-culture,
  .life-show{
    grid-template-columns:1fr;
  }

  .careers-values-grid{
    grid-template-columns:repeat(2,1fr);

    gap:50px;
  }

  .careers-value-card{
    border-right:none;
  }

}

@media (max-width:768px){

  .careers-hero{
    min-height:auto;

    padding:140px 30px 90px;
  }

  .careers-hero-content h1{
    font-size:56px;
  }

  .careers-hero-content p{
    font-size:16px;
  }

  .careers-why,
  .careers-values,
  .join-network{
    padding:70px 25px;
  }

  .careers-icons-grid,
  .careers-values-grid{
    grid-template-columns:1fr;
  }

  .careers-culture-text,
  .life-show-text{
    padding:70px 25px;
  }

  .careers-culture-text h2,
  .life-show-text h2{
    font-size:42px;
  }

  .careers-culture-image img,
  .life-show-image img{
    min-height:340px;
  }

  .join-network-content h2{
    font-size:38px;
  }

}

/* =========================================
   OUR WORK PAGE
========================================= */

/* HERO */

.works-hero{
  width:100%;
  min-height:920px;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.72),
      rgba(0,0,0,0.25)
    ),
    url("../images/P3-1.jpg");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  display:flex;
  align-items:center;

  padding:140px 70px 100px;

  position:relative;
}

.works-hero-content{
  max-width:720px;
}

.works-hero-content span{
  display:inline-block;

  color:#d4a64a;

  font-size:18px;
  letter-spacing:3px;

  text-transform:uppercase;

  margin-bottom:22px;
}

.works-hero-content h1{
  font-size:88px;
  line-height:0.95;

  font-weight:900;

  text-transform:uppercase;

  color:#fff;

  margin-bottom:35px;
}

.works-hero-content h1 strong{
  color:#d4a64a;
}

.works-hero-content p{
  font-size:21px;
  line-height:1.9;

  color:#d6d6d6;

  max-width:620px;

  margin-bottom:40px;
}

.works-hero-buttons{
  display:flex;
  align-items:center;

  gap:26px;
}

/* SECTION TITLE */

.works-section-title{
  text-align:center;

  margin-bottom:55px;
}

.works-section-title span{
  display:inline-block;

  color:#d4a64a;

  font-size:18px;
  font-weight:800;

  letter-spacing:4px;

  text-transform:uppercase;

  position:relative;
}

.works-section-title span::before,
.works-section-title span::after{
  content:"";

  position:absolute;

  top:50%;

  width:120px;
  height:1px;

  background:rgba(212,166,74,0.45);
}

.works-section-title span::before{
  right:calc(100% + 25px);
}

.works-section-title span::after{
  left:calc(100% + 25px);
}

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

.left-title span::before,
.left-title span::after{
  display:none;
}

/* FEATURED PROJECTS */

.featured-projects{
  background:#050505;

  padding:100px 70px;
}

.featured-card{
  max-width:1450px;

  margin:0 auto 28px;

  display:grid;

  grid-template-columns:1.2fr 0.8fr;

  background:#080808;

  border:1px solid rgba(255,255,255,0.08);

  overflow:hidden;
}

.featured-card.reverse{
  grid-template-columns:0.8fr 1.2fr;
}

.featured-card.reverse .featured-image{
  order:2;
}

.featured-card.reverse .featured-content{
  order:1;
}

.featured-image img{
  width:100%;
  height:100%;

  min-height:430px;

  object-fit:cover;

  display:block;
}

.featured-content{
  padding:55px 55px;

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

.featured-content span{
  color:#d4a64a;

  font-size:26px;
  font-weight:800;

  margin-bottom:18px;
}

.featured-content h2{
  font-size:44px;
  line-height:1.15;

  color:#fff;

  text-transform:uppercase;

  margin-bottom:30px;
}

.featured-content ul{
  list-style:none;

  margin-bottom:35px;
}

.featured-content ul li{
  color:#d0d0d0;

  font-size:17px;

  line-height:2;
}

.featured-content button{
  width:max-content;

  background:none;

  border:1px solid #d4a64a;

  color:#d4a64a;

  padding:15px 30px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  cursor:pointer;

  transition:0.3s ease;
}

.featured-content button:hover{
  background:#d4a64a;
  color:#000;
}

/* GRID SECTION */

.works-grid-section{
  background:#000;

  padding:100px 70px;
}

.works-filter{
  display:flex;

  flex-wrap:wrap;

  gap:18px;

  margin-bottom:45px;
}

.works-filter button{
  background:none;

  border:none;

  color:#fff;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;

  cursor:pointer;

  transition:0.3s ease;
}

.works-filter button:hover,
.works-filter button.active{
  color:#d4a64a;
}

.works-grid{
  display:grid;

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

  gap:22px;
}

.works-card{
  background:#080808;

  border:1px solid rgba(255,255,255,0.08);

  overflow:hidden;

  transition:0.3s ease;
}

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

  border-color:#d4a64a;
}

.works-card img{
  width:100%;
  height:280px;

  object-fit:cover;

  display:block;
}

.works-card div{
  padding:22px 20px 26px;
}

.works-card span{
  display:inline-block;

  color:#d4a64a;

  font-size:12px;
  font-weight:800;

  text-transform:uppercase;

  margin-bottom:14px;
}

.works-card h3{
  color:#fff;

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

  margin-bottom:10px;
}

.works-card p{
  color:#cfcfcf;

  font-size:15px;
  line-height:1.7;
}

/* CTA */

.works-cta{
  background:
    linear-gradient(
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.92)
    ),
    url("../images/P3-1.jpg");

  background-size:cover;
  background-position:center;

  padding:100px 70px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:50px;
}

.works-cta-content{
  max-width:760px;
}

.works-cta-content span{
  display:inline-block;

  color:#d4a64a;

  font-size:16px;
  font-weight:800;

  letter-spacing:2px;

  text-transform:uppercase;

  margin-bottom:18px;
}

.works-cta-content h2{
  font-size:72px;
  line-height:1;

  text-transform:uppercase;

  color:#fff;

  margin-bottom:24px;
}

.works-cta-content h2 span{
  color:#d4a64a;
}

.works-cta-content p{
  color:#d6d6d6;

  font-size:20px;
  line-height:1.9;
}

.works-cta-buttons{
  display:flex;
  flex-direction:column;

  gap:18px;
}

.works-cta-buttons .outline-btn{
  text-align:center;
}

/* PROJECT POPUP */

.project-popup{
  position:fixed;

  inset:0;

  background:rgba(0,0,0,0.92);

  display:none;

  align-items:center;
  justify-content:center;

  z-index:99999;

  padding:40px;
}

.project-popup-box{
  width:100%;
  max-width:1200px;

  background:#111;

  position:relative;

  padding:25px;
}

.close-project-popup{
  position:absolute;

  top:-50px;
  right:0;

  background:none;
  border:none;

  color:#fff;

  font-size:48px;

  cursor:pointer;
}

#popupMainImage{
  width:100%;
  height:680px;

  object-fit:cover;

  display:block;

  margin-bottom:20px;
}

.popup-thumbs{
  display:grid;

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

  gap:15px;
}

.popup-thumbs img{
  width:100%;
  height:120px;

  object-fit:cover;

  cursor:pointer;

  border:2px solid transparent;

  transition:0.3s ease;
}

.popup-thumbs img:hover{
  border-color:#d4a64a;
}

/* RESPONSIVE */

@media (max-width:1400px){

  .works-grid{
    grid-template-columns:repeat(4,1fr);
  }

}

@media (max-width:1200px){

  .featured-card,
  .featured-card.reverse{
    grid-template-columns:1fr;
  }

  .featured-card.reverse .featured-image,
  .featured-card.reverse .featured-content{
    order:unset;
  }

  .works-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .works-cta{
    flex-direction:column;
    align-items:flex-start;
  }

}

@media (max-width:768px){

  .works-hero{
    min-height:auto;

    padding:140px 25px 90px;
  }

  .works-hero-content h1{
    font-size:56px;
  }

  .works-hero-content p{
    font-size:17px;
  }

  .works-hero-buttons{
    flex-direction:column;
    align-items:flex-start;
  }

  .featured-projects,
  .works-grid-section,
  .works-cta{
    padding:70px 25px;
  }

  .featured-content{
    padding:40px 30px;
  }

  .featured-content h2{
    font-size:34px;
  }

  .works-grid{
    grid-template-columns:1fr;
  }

  .works-card img{
    height:260px;
  }

.service-card-link{
  text-decoration:none;
  color:inherit;
  display:block;
}

.service-card-link:hover{
  text-decoration:none;
}

  .popup-thumbs{
    grid-template-columns:repeat(2,1fr);
  }

}

/* =========================================
   ONLINE SERVICES PAGE
========================================= */

.online-services-page{

  position: relative;

  min-height: 100vh;

  padding: 180px 8% 100px;

  background:
    url('../images/P6-1.jpg') center center/cover no-repeat;

  overflow: hidden;

}

.online-services-overlay{

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.75);

  z-index: 1;

}

.online-services-content{

  position: relative;

  z-index: 2;

  max-width: 1400px;

  margin: 0 auto;

  color: #ffffff;

}

.online-services-content span{

  display: inline-block;

  color: #d4a64a;

  font-size: 14px;

  letter-spacing: 3px;

  margin-bottom: 20px;

  font-weight: 600;

}

.online-services-content h1{

  font-size: 60px;

  line-height: 1.1;

  margin-bottom: 25px;

  font-weight: 300;

}

.online-services-content h1 strong{

  font-weight: 700;

  color: #d4a64a;

}

.online-services-content p{

  max-width: 700px;

  font-size: 18px;

  line-height: 1.8;

  color: rgba(255,255,255,0.8);

  margin-bottom: 60px;

}

.online-panels{

  display: grid;

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

  gap: 40px;

}

.online-panel{

  background: rgba(255,255,255,0.06);

  border: 1px solid rgba(255,255,255,0.1);

  backdrop-filter: blur(10px);

  padding: 40px;

  border-radius: 20px;

  transition: 0.3s ease;

}

.online-panel:hover{

  transform: translateY(-5px);

  border-color: rgba(212,166,74,0.5);

}

.online-panel h2{

  font-size: 30px;

  color: #d4a64a;

  margin-bottom: 15px;

}

.online-panel p{

  font-size: 16px;

  line-height: 1.7;

  margin-bottom: 35px;

  color: rgba(255,255,255,0.75);

}

.online-link-list{

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.online-link-list a{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px 24px;

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 12px;

  color: #ffffff;

  text-decoration: none;

  font-size: 16px;

  font-weight: 500;

  transition: 0.3s ease;

}

.online-link-list a::after{

  content: "→";

  color: #d4a64a;

  font-size: 18px;

}

.online-link-list a:hover{

  background: #d4a64a;

  color: #000000;

  transform: translateX(5px);

}

.online-link-list a:hover::after{

  color: #000000;

}

.online-footer{

  background: #000000;

  color: rgba(255,255,255,0.7);

  text-align: center;

  padding: 30px 20px;

  font-size: 14px;

  line-height: 1.8;

  border-top: 1px solid rgba(255,255,255,0.08);

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px){

  .online-panels{

    grid-template-columns: 1fr;

  }

}

@media (max-width: 768px){

  .online-services-page{

    padding: 140px 6% 80px;

  }

  .online-services-content h1{

    font-size: 42px;

  }

  .online-panel{

    padding: 30px 25px;

  }

  .online-panel h2{

    font-size: 24px;

  }

  .online-link-list a{

    font-size: 15px;

    padding: 16px 18px;

  }

}

.service-suitable{

  margin-top: 25px;

  font-size: 15px;

  line-height: 1.7;

  color: rgba(255,255,255,0.75);

}

.service-link{

  display: inline-block;

  margin-top: 28px;

  color: #d4a64a;

  text-decoration: none;

  font-weight: 600;

  letter-spacing: 1px;

  transition: 0.3s ease;

}

.service-link:hover{

  transform: translateX(5px);

  color: #ffffff;

}