@charset "utf-8";
/* CSS Document */
/************************
  GLOBAL
*************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Belleza", sans-serif;
  background: #fff;
  color: #111;
  line-height: 1.5;
}

/*---- section headers----*/
.section-header {
  max-width: 1000px;              /* keeps it readable */
  margin: 6rem auto 2rem;        /* spacing above/below */
  padding: 0 1.5rem;             /* responsive side padding */
  text-align: center;            /* centred text */
}

.section-header h2,
.section-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  color: #1a2a44;                /* deep blue */
}

.section-header p {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: #444;
  line-height: 1.6;
  margin: 0 auto 1rem;
  max-width: 1000px;
}

/* Premium underline accent */
.section-header::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin: 1rem auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #6aa8ff, #3d7bff);
  opacity: 0.8;
}


/************************
  NAV (Updated)
*************************/
.nav1 {
  position: sticky;
  top: 0;
  background: rgba(39, 100, 245, 0.8); /* your original blue */
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  z-index: 100;
}

.nav1-inner {
  max-width: 1200px;
  margin: auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 0.5px;
}

/* LINKS */
.nav1-inner nav a {
  margin-left: 2rem;
  text-decoration: none;
  color: #E8E4E4;
  opacity: 0.9;
  font-size: 1rem;
  position: relative;
  padding-bottom: 4px;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.nav1-inner nav a:hover {
  opacity: 1;
  color: #fff;
}

/* UNDERLINE ANIMATION */
.nav1-inner nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #fff;
  transition: width 0.25s ease;
}

.nav1-inner nav a:hover::after,
.nav1-inner nav a.active::after {
  width: 100%;
}


/************************
  page intro
*************************/
.page-intro {
  background: #e8f1ff;       /* soft blue */
  padding: 2.5rem 1.5rem;
  border-radius: 14px;
  max-width: 1200px;
  margin: 3rem auto;
  line-height: 1.7;
  color: #333;     
  border: 1px solid rgba(255,255,255,0.4);
}


.page-intro h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.page-intro h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.page-intro p {
  margin-bottom: 1.2rem;
}

.page-intro ul {
  margin: 0 0 1.2rem 1.2rem;
  padding: 0;
  list-style: none;
}

.page-intro ul li {
  margin: 0.4rem 0;
  padding-left: 0.8rem;
  border-left: 3px solid #ccc; /* accent bar */
}

/************************
  HERO
*************************/
.hero-pro {
  padding: 8rem 2rem;
  height: 890px;
  text-align: center;
  /* More visible animated gradient */
  background: linear-gradient(
    120deg,
    #0a1a3f 0%,
    #0f4c81 20%,
    #1e90ff 40%,
    #ffffff 60%,
    #1e90ff 80%,
    #0f4c81 100%
  );
  background-size: 300% 300%;
  animation: heroGradientMove 12s ease-in-out infinite;
}
@keyframes heroGradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



.hero-inner h1 {
  font-size: 3.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color:#00154D;  /*:#D1CECE;*/
}

.hero-inner p {
  font-size: 1.4rem;
  opacity: 0.7;
  margin-bottom: 2rem;
  color:#D1CECE;
}

.cta-main {
  display: inline-block;
  padding: 1rem 2rem;
  background: #111;
  color: #fff;
  border-radius: 12px;
  transition: 0.2s ease;
}

.cta-main:hover {
  background: #333;
}

/* Hero 4 (added later ) */
.hero4-pro {
  position: relative;
  padding: 8rem 2rem;
  text-align: center;
  height: 890px;
  background: url('../assets/images/img3.jpg') center/cover no-repeat;
  overflow: hidden; /* ensures rounded corners apply to overlay */
  z-index: 0;
}

/* Darkening overlay */
.hero4-pro::before {
  content: "";
  position: absolute;
  inset: 0;
	pointer-events: none;
  background: rgba(0, 0, 0, 0.35); /* adjust darkness here */
  z-index: 1;
  backdrop-filter: brightness(0.6); /* optional extra darkening */
	z-index: -1;
}

/* Ensure text sits ABOVE the overlay */
.hero4-inner {
  position: relative;
  z-index: 2;
}


.hero4-inner h1 {
  font-size: 3.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
	  color:#F5F5F5;
}

.hero4-inner p {
  font-size: 1.4rem;
  opacity: 0.7;
  margin-bottom: 2rem;
	  color:#ECE5E5;
}

.cta4-main {
  display: inline-block;
  padding: 1rem 2rem;
  background: #111;
  color:#ABB3BF;
  border-radius: 12px;
  transition: 0.2s ease;
}

.cta4-main:hover {
  background:#9FA8F3;
}


/* hero split */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 6rem 2rem;
  align-items: center;
  gap: 3rem;
  height: 59vw;
  background: #D8D8D8;
}

.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.3rem;
  opacity: 0.7;
  margin-top: 8rem;
}

.hero-image {
  height: 860px;
  border-radius: 20px;
  background: url('../assets/images/img3.jpg') center/cover no-repeat;
}


/* hero vid */
.hero-video {
  position: relative;
  height: 85vh;
  overflow: hidden;
}

.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  padding: 2rem;
}

.hero-overlay h1 {
  font-size: 3.2rem;
  margin-bottom: 1rem;
}

.hero-overlay p {
  font-size: 1.3rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

/* Hero 5 container */
.hero5-pro {
  position: relative;
  height: 70vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Slider wrapper */
.hero5-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Each slide */
.hero5-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero5-slide.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.hero5-slide:not(.active) {
  z-index: 1;
}

.hero5-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text overlay */
.hero5-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.cta5-main {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 2rem;
  background: rgba(255,255,255,0.9);
  color: #0a1a3f;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}

/************************
  SECTIONS
*************************/
.section {
  max-width: 1200px;
  margin: auto;
  padding: 4rem 2rem;
}

.section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
}

/************************
  IMAGE + VIDEO SUPPORT
*************************/

.service-img,
.service-video {
  width: 100%;
  height: 220px; /* SAME HEIGHT FOR BOTH */
  border-radius: 18px;
  margin-bottom: 1rem;
  object-fit: cover;
  display: block;
  overflow: hidden; /* FIX: stops Ken Burns spilling */
}

/* Background image behaviour */
.service-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1); /* reset */
}

/************************
  KEN BURNS EFFECT
*************************/

/* Only runs on active card */
.service-card.active .service-img {
  animation: kenburns 12s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/************************
  PARALLAX TILT
*************************/

.service-card:hover .service-img,
.service-card:hover .service-video {
  transition: transform 0.2s ease;
}

/************************
  PROGRESS DOTS
*************************/

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: width 0.35s ease, background 0.35s ease;
}

.slider-dot.active {
  width: 40px;
  background: rgba(0,0,0,0.35);
}

.slider-dot .progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #000;
  opacity: 0.8;
  transition: width linear;
  border-radius: inherit;
}

/************************
  SUBTLE APPLE‑STYLE GRADIENTS
*************************/

.gradient-a { background: linear-gradient(135deg, #dbe7ff, #fff); }
.gradient-b { background: linear-gradient(135deg, #ffd9df, #fff); }
.gradient-c { background: linear-gradient(135deg, #d8ffe5, #fff); }
.gradient-d { background: linear-gradient(135deg, #f0d9ff, #fff); }
.gradient-e { background: linear-gradient(135deg, #ffe9d1, #fff); }
.gradient-f { background: linear-gradient(135deg, #dff6ff, #fff); }
.gradient-g { background: linear-gradient(135deg, #e3e0ff, #fff); }
.gradient-h { background: linear-gradient(135deg, #ffe3ec, #fff); }
.gradient-i { background: linear-gradient(135deg, #e9f7ff, #fff); }

/************************
  LOCAL IMAGES
*************************/

.gradient-a .service-img { background-image: url("../assets/images/img1.jpg"); }
.gradient-c .service-img { background-image: url("../assets/images/img2.jpg"); }
.gradient-e .service-img { background-image: url("../assets/images/img3.jpg"); }
.gradient-f .service-img { background-image: url("../assets/images/img4.jpg"); }
.gradient-h .service-img { background-image: url("../assets/images/img5.jpg"); }
.gradient-i .service-img { background-image: url("../assets/images/img4.jpg"); }




/************************
  SERVICE CARDS (GRADIENT + IMAGE + TEXT)
*************************/
.service-card {
  width: 70%; /* wider cards */
  flex-shrink: 0;
  padding: 2rem;
  border-radius: 26px;
  color: #333;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  text-align: left;
  opacity: 0.35;
  transform: scale(0.85);
  transition: transform 0.6s ease, opacity 0.6s ease;
}


.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

.service-img {
  width: 100%;
  height: 220px;
  background: rgba(255,255,255,0.25);
  border-radius: 14px;
  margin-bottom: 1rem;
  background-size: cover;
  background-position: center;
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.service-card p {
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.4;
}
/*==============================================
		GALLERIES SECTION
==============================================*/
/* ========================= */
/*   SHARED STYLES           */
/* ========================= */
/* Overall gallery wrapper */
.gallery-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Headings above galleries */
.gallery-wrapper + h2,
h2 + .gallery-wrapper {
  margin-top: 3rem;
}

/* Give all galleries consistent spacing */
.gallery-grid,
.gallery-masonry,
.gallery-scroll {
  margin-top: 1.5rem;
}


.gallery-info {
  position: absolute;
  bottom: -60px;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.3));
  color: white;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: bottom .35s ease;
  backdrop-filter: blur(4px);
}

.gallery-item,
.masonry-item,
.scroll-item {
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f7;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.gallery-item:hover .gallery-info,
.masonry-item:hover .gallery-info,
.scroll-item:hover .gallery-info {
  bottom: 0;
}

.gallery-item img,
.masonry-item img,
.scroll-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.gallery-item:hover img,
.masonry-item:hover img,
.scroll-item:hover img {
  transform: scale(1.08);
}



/* ========================= */
/*   GALLERY 1 — ALWAYS SHOW TITLE BAR */
/* ========================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}



.gallery-grid .gallery-info {
  bottom: 0; /* always visible */
  height: 45px; /* thin bar */
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.3));
  backdrop-filter: blur(4px);
  transition:
    height .35s ease,
    padding .35s ease,
    background .35s ease;
}

/* On hover, expand upward */
.gallery-grid .gallery-item:hover .gallery-info {
  height: 50%;
  padding: 1rem;
}



/* ========================= */
/*   GALLERY 2 — MASONRY     */
/* ========================= */

.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 200px;
  gap: 20px;
}

.masonry-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.masonry-item.tall {
  grid-row: span 2;
}

.masonry-item.wide {
  grid-column: span 2;
}



/* ========================= */
/*   GALLERY 3 — SCROLL      */
/* ========================= */

.gallery-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

.scroll-item {
  min-width: 300px;
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  scroll-snap-align: start;
}


/* ========================= */
/*   GALLERY 4 — PARALLAX    */
/* ========================= */
/* Layout */
.gallery-parallax {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* Each item */
.parallax-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  height: 420px;
  background: #000;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Image with parallax zoom */
.parallax-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.parallax-item:hover img {
  transform: scale(1.15);
}

/* Overlay panel */
.parallax-info {
  position: absolute;
  left: 0;
  bottom: 0;              /* anchor to bottom */
  width: 100%;
  height: 33%;            /* only 1/3 height */
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  color: white;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* start hidden BELOW the image */
  transform: translateY(100%);
  opacity: 0;

  transition:
    transform .45s ease,
    opacity .45s ease;
}

/* Reveal on hover */
.parallax-item:hover .parallax-info {
  transform: translateY(0);   /* slide UP */
  opacity: 1;
}


/* Text styling */
.parallax-info h3 {
  margin: 0 0 0.3rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.parallax-info p {
  margin: 0;
  opacity: 0.85;
}

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: fadeIn .3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}


/* ========================= */
/*   GALLERY 5 - SLIDER REVEAL  */
/* ========================= */
.before-after-wrapper {
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.before-after-container {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  cursor: grab;
}

.before-after-container,
.before-after-container img,
.slider-handle {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Before image (full width) */
.before-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* After image (clipped) */
.after-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

/* Slider handle */
.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  cursor: ew-resize;
  transition: background .2s ease;
}

.slider-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}




/* ========================= */
/*   GALLERY 6 - PANO + SLIDER */
/* ========================= */
/* Wrapper */
.gallery6-wrapper {
  width: 100%;
  margin: 40px 0;
}

/* Main panoramic image */
.gallery6-main {
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 12px;
}

.gallery6-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

/* Thumbnail strip */
.gallery6-thumbs {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px;
  background: #2b2b2b;
  border-radius: 10px;
  scroll-behavior: smooth;
  cursor: grab;
  justify-content: center;
}

.gallery6-thumbs::-webkit-scrollbar {
  height: 6px;
}

.gallery6-thumbs::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}

/* Thumbnails */
.gallery6-thumbs img {
  width: 110px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.7;
  transition: 0.25s ease;
  cursor: pointer;
}

.gallery6-thumbs img:hover,
.gallery6-thumbs img.active {
  opacity: 1;
  transform: scale(1.05);
}

.gallery6-thumbs img.active {
  border: 3px solid #fff;
  opacity: 1;
  transform: scale(1.08);
}

.gallery6-main {
  position: relative;
}

.gallery6-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: rgba(40, 40, 40, 0.85);
  color: #fff;
  padding: 12px 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery6-main:hover .gallery6-info {
  opacity: 1;
  transform: translateY(0);
}

/************************
  CONTACT
*************************/
.contact p {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}