/* =========================

   BASE

========================= */



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: "Inter", sans-serif;

  background: #0b0b0b;

  color: #fff;

  line-height: 1.6;

}



h1, h2, h3, h4 {

  font-family: "Playfair Display", serif;

  font-weight: 500;

  letter-spacing: 0.5px;

}



img {

  max-width: 100%;

  display: block;

}



/* container helper */

.container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

}



.narrow {

  max-width: 800px;

  margin: 0 auto;

}



button.lightbox-next {

    padding: 30px 15px;

    font-size: 2em;

    margin-left: 5px;

}



button.lightbox-prev {

    padding: 30px 15px;

    font-size: 2em;

    margin-right: 5px;

}



/* =========================

   HEADER / NAV

========================= */



.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

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

  backdrop-filter: blur(12px);

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

}



.header-inner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px 0;

}



.brand {

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #fff;

  text-decoration: none;

}



/* NAV DESKTOP */

.site-nav {

  display: flex;

  gap: 25px;

  align-items: center;

}



.site-nav a {

  color: #ddd;

  text-decoration: none;

  font-size: 14px;

  transition: 0.3s;

}



.site-nav a:hover {

  color: #fff;

}



.cta-nav {

  padding: 8px 16px;

  border: 1px solid #fff;

  border-radius: 30px;

}



/* MOBILE BUTTON */

.nav-toggle {

  display: none;

  font-size: 26px;

  background: none;

  border: none;

  color: #fff;

  cursor: pointer;

}



.header-social{



  margin-left:auto;



  margin-right:20px;



}



.header-social a{



  color:inherit;



  text-decoration:none;



  font-size:1.35rem;



  transition:.3s;



}



.header-social a:hover{



  opacity:.65;



}



/* =========================

   HERO

========================= */



.hero {

  height: 100vh;

  position: relative;

  display: grid;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding-top: 80px;



  background: url("../photos/coverEstesa2.jpg")

    center/cover no-repeat;

}



.hero-overlay {

  position: absolute;

  inset: 0;

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

}



.hero-inner {

  position: relative;

  z-index: 2;

}



.hero-subtitle {

  font-size: 12px;

  letter-spacing: 3px;

  text-transform: uppercase;

  opacity: 0.8;

}



.hero h1 {

  font-size: 52px;

  margin: 20px 0;

  line-height: 1.2;

}



.hero p {

  opacity: 0.85;

  max-width: 600px;

  margin: 0 auto;

}



/* BUTTON */

.btn-primary {

  display: inline-block;

  margin-top: 25px;

  padding: 12px 28px;

  border-radius: 50px;

  background: #fff;

  color: #000;

  text-decoration: none;

  font-size: 14px;

  transition: 0.3s;

}



.btn-primary:hover {

  transform: translateY(-2px);

}



.photoWedding img{

  object-position: right;

}



/* =========================

   SECTIONS

========================= */



section {

  padding: 90px 0;

}



.section-label {

  font-size: 12px;

  letter-spacing: 3px;

  text-transform: uppercase;

  opacity: 0.6;

}



.section-heading {

  text-align: center;

  margin-bottom: 50px;

}



/* =========================

   SERVICES

========================= */



.cards {

  display: grid;

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

  gap: 25px;

}



.service-card {

  background: #141414;

  padding: 25px;

  border-radius: 14px;

  transition: 0.4s;

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

}



.service-card:hover {

  transform: translateY(-6px);

  border-color: rgba(255,255,255,0.2);

}



/* =========================

   GALLERY

========================= */



.gallery-grid {

  display: grid;

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

  gap: 15px;

}



.gallery-grid img {

  border-radius: 12px;

  transition: 0.5s ease;

}



.gallery-grid img:hover {

  transform: scale(1.04);

}



.gallery-link {

  text-align: center;

  margin-top: 25px;

}



.gallery-link a {

  color: #fff;

  text-decoration: none;

  border-bottom: 1px solid #fff;

}



/* =========================

   CTA

========================= */



.cta-section {

  text-align: center;

  background: #111;

}



.cta-section h3 {

  font-size: 32px;

}



/* =========================

   FOOTER

========================= */



.site-footer {

  padding: 30px 0;

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

  text-align: center;

  font-size: 13px;

  opacity: 0.7;

}



/* =========================

   MODAL

========================= */



.modal {

  display: none;

  position: fixed;

  inset: 0;

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

  justify-content: center;

  align-items: center;

  z-index: 2000;

}



.modal.open {

  display: flex;

}



.modal-img {

  max-width: 90%;

  max-height: 90%;

}



.modal-close {

  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 30px;

  background: none;

  border: none;

  color: #fff;

  cursor: pointer;

}



/* =========================

   FOOTER

========================= */



.site-footer{



  background:#111;



  color:#fff;



  padding:80px 0 30px;



  margin-top:100px;



}



.footer-content{



  display:flex;



  justify-content:space-between;



  gap:80px;



  flex-wrap:wrap;



}



.footer-brand{



  max-width:500px;



}



.footer-brand h3{



  font-family:'Playfair Display',serif;



  font-size:2rem;



  margin-bottom:15px;



}



.footer-brand p{



  color:rgba(255,255,255,.75);



  line-height:1.8;



}



.footer-contact h4{



  margin-bottom:20px;



  font-size:1rem;



  text-transform:uppercase;



  letter-spacing:2px;



}



.footer-contact{



  display:flex;



  flex-direction:column;



  gap:15px;



  align-items: center;



}



.footer-contact a{



  color:white;



  text-decoration:none;



  display:flex;



  align-items:center;



  gap:12px;



  transition:.3s;



}



.footer-contact a:hover{



  opacity:.7;



}



.footer-contact i{



  font-size:1.3rem;



}



.footer-bottom{



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



  margin-top:50px;



  padding-top:25px;



  text-align:center;



}



.footer-bottom p{



  color:rgba(255,255,255,.6);



  font-size:.9rem;



}



@media(max-width:768px){



  .footer-content{



    flex-direction:column;



    gap:40px;



  }



  .footer-brand h3{



    font-size:1.6rem;



  }



}



/* =========================

   ANIMATIONS (scroll reveal)

========================= */



.reveal {

  opacity: 0;

  transform: translateY(40px);

  transition: all 0.9s ease;

}



.reveal.active {

  opacity: 1;

  transform: translateY(0);

}



/* =========================

   RESPONSIVE

========================= */



@media (max-width: 992px) {

  .cards {

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

  }



  .gallery-grid {

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

  }



  .hero h1 {

    font-size: 38px;

  }

}



@media (max-width: 768px) {



  .nav-toggle {

    display: block;

  }



  .site-nav {

    position: fixed;

    top: 0;

    right: 0;

    height: 100vh;

    width: 260px;

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

    flex-direction: column;

    padding: 80px 20px;

    transform: translateX(100%);

    transition: 0.4s ease;

  }



  .site-nav.open {

    transform: translateX(0);

  }



  .cards {

    grid-template-columns: 1fr;

  }



  .gallery-grid {

    grid-template-columns: 1fr;

  }



  .hero h1 {

    font-size: 28px;

  }

}



/* =========================

   SERVICES GRID (IMAGE CARDS)

========================= */



.services-grid {

  display: grid;

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

  gap: 18px;

}



.service-item {

  position: relative;

  display: block;

  overflow: hidden;

  border-radius: 14px;

  text-decoration: none;

}



.service-item img {

  width: 100%;

  height: 320px;

  object-fit: cover;

  transition: 0.6s ease;

}



/* zoom effetto luxury */

.service-item:hover img {

  transform: scale(1.08);

}



/* overlay scuro */

.service-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to top,

    rgba(0,0,0,0.7),

    rgba(0,0,0,0.1)

  );

  display: flex;

  align-items: flex-end;

  padding: 20px;

}



/* testo */

.service-overlay h4 {

  color: #fff;

  font-size: 20px;

  font-family: "Playfair Display", serif;

  margin: 0;

  transform: translateY(10px);

  transition: 0.4s ease;

}



.service-item:hover .service-overlay h4 {

  transform: translateY(0);

}



/* responsive */

@media (max-width: 992px) {

  .services-grid {

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

  }

}



@media (max-width: 768px) {

  .services-grid {

    grid-template-columns: 1fr;

  }



  .service-item img {

    height: 260px;

  }

}



/* =========================

   SERVICES PAGE

========================= */



.page-hero {

  padding: 140px 0 60px;

  text-align: center;

}



.page-hero h1 {

  font-size: 48px;

}



.page-hero p {

  opacity: 0.7;

  margin-top: 10px;

}



/* ogni sezione servizio */

.service-section {

  padding: 80px 0;

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

}



.service-section h2 {

  font-size: 34px;

  margin-bottom: 10px;

}



.service-section p {

  opacity: 0.7;

  margin-bottom: 30px;

  max-width: 600px;

}



/* GRID FOTO */

.photo-grid {

  display: grid;

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

  gap: 10px;

}



.photo-grid img {

  width: 100%;

  height: 160px;

  object-fit: cover;

  border-radius: 10px;

  transition: 0.4s ease;

}



.photo-grid img:hover {

  transform: scale(1.05);

}



/* RESPONSIVE */

@media (max-width: 1200px) {

  .photo-grid {

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

  }

}



@media (max-width: 992px) {

  .photo-grid {

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

  }

}



@media (max-width: 768px) {

  .photo-grid {

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

  }



  .page-hero h1 {

    font-size: 32px;

  }

}



@media (max-width: 480px) {

  .photo-grid {

    grid-template-columns: 1fr;

  }

}



/* SERVICE CTA BUTTON */

/* CTA STABILE E PREMIUM */

.service-cta {

  text-align: center;

  position: sticky;

  bottom: 20px;

}



.service-cta .btn-primary {

  display: inline-block;

  padding: 12px 30px;

  border-radius: 50px;

  background: #fff;

  color: #000;

  text-decoration: none;

  font-size: 14px;

  transition: 0.3s;

}



.service-cta .btn-primary:hover {

  transform: translateY(-2px);

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 15px;

  margin-top: 40px;

}



.contact-form input,

.contact-form select,

.contact-form textarea {

  padding: 14px;

  background: #141414;

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

  border-radius: 10px;

  color: white;

  font-family: "Inter", sans-serif;

}



.contact-form label {

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 2px;

  opacity: 0.6;

}



/* =========================

 PREMIUM CENTER CAROUSEL

========================= */



.photo-carousel {



    position:relative;



    width:100%;



    height:680px;



    display:flex;



    justify-content:center;



    align-items:center;



    overflow:hidden;



}







.photo-carousel img {





    position:absolute;





    width:460px;



    height:600px;





    object-fit:cover;





    border-radius:18px;





    cursor:pointer;





    opacity:0;





    transform:translateX(0) scale(.7);





    transition:

    transform .10s ease,

    opacity .10s ease;





}



/* FOTO CENTRALE */



.photo-carousel img.active {





    opacity:1;





    transform:

    translateX(0)

    scale(1);





    z-index:3;





}



/* SINISTRA */



.photo-carousel img.left {





    opacity:.55;





    transform:

    translateX(-520px)

    scale(.82);





    z-index:2;





}





/* DESTRA */



.photo-carousel img.right {





    opacity:.55;





    transform:

    translateX(520px)

    scale(.82);





    z-index:2;





}



@media(max-width:768px){





.photo-carousel{



    gap:0;



    padding:40px 0;



    overflow:hidden;



}







.photo-carousel img{



    width:75vw;



    height:420px;



}







/* foto centrale */



.photo-carousel img.active{



    transform:translateX(0) scale(1);



    opacity:1;



}







/* foto destra */



.photo-carousel img.right{



    transform:

    translateX(55vw)

    scale(.75);



    opacity:.55;



}







/* foto sinistra */



.photo-carousel img.left{



    transform:

    translateX(-55vw)

    scale(.75);



    opacity:.55;



}



}



/* =========================

   LIGHTBOX FULLSCREEN

========================= */



.lightbox {

  position: fixed;

  inset: 0;

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

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 9999;

  padding: 20px;

}



.lightbox.open {

  display: flex;

}



.lightbox-img {

  max-width: 90%;

  max-height: 90%;

  border-radius: 10px;

  animation: zoomIn 0.3s ease;

}



@keyframes zoomIn {

  from {

    transform: scale(0.8);

    opacity: 0;

  }

  to {

    transform: scale(1);

    opacity: 1;

  }

}



/* X button */

.lightbox-close {

  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 40px;

  background: none;

  border: none;

  color: white;

  cursor: pointer;

  transition: 0.2s;

}



.lightbox-close:hover {

  transform: scale(1.2);

}



.lightbox {

  backdrop-filter: blur(8px);

}



/* ==================================================

   SINGLE SERVICE PAGE

================================================== */



.service-hero {

  position: relative;

  height: 100vh;

  overflow: hidden;

}



.service-hero img {

  position: absolute;

  inset: 0;



  width: 100%;

  height: 100%;



  object-fit: cover;

}



.service-hero .hero-overlay {

  position: absolute;

  inset: 0;



  background:

  linear-gradient(

    to bottom,

    rgba(0,0,0,.25),

    rgba(0,0,0,.65)

  );



  z-index: 1;

}



.service-hero-content {

  position: relative;

  z-index: 2;



  height: 100%;



  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;



  text-align: center;



  max-width: 1000px;

  margin: auto;



  padding: 20px;

}



.service-hero-content span {

  text-transform: uppercase;

  letter-spacing: 4px;

  font-size: 12px;

  opacity: .8;

}



.service-hero-content h1 {

  font-size: clamp(54px,8vw,96px);

  line-height: 1.05;

  margin: 25px 0;

}



.service-hero-content p {

  max-width: 700px;

  font-size: 18px;

  opacity: .9;

}



.hero-buttons {

  display: flex;

  gap: 15px;

  margin-top: 30px;

  justify-content: center;

}

@media (max-width: 450px) {

    .hero-buttons {

    margin-top: 170px;

  }

}

@media (max-width: 400px) {

    .hero-buttons {

    margin-top: 150px;

  }

}

@media (max-width: 380px) {

    .hero-buttons {

    margin-top: 0px;

  }

}





.btn-secondary {

  display: inline-block;

  padding: 12px 28px;

  border-radius: 50px;

  border: 1px solid rgba(255,255,255,.3);

  color: white;

  text-decoration: none;

  font-size: 14px;

  margin-top: 25px;

}



/* ==================================================

   INTRO

================================================== */



.service-intro {

  padding: 140px 0;

}



.service-intro h2 {

  font-size: 56px;

  margin: 20px 0;

}



.service-intro p {

  font-size: 18px;

  opacity: .85;

}



/* ==================================================

   PRICING

================================================== */



.pricing-section {

  padding: 140px 0;

  background: #111;

}



.pricing-grid {

  display: grid;

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

  gap: 30px;

  margin-top: 50px;

}



.price-card {

  background: #161616;



  border: 1px solid rgba(255,255,255,.08);



  border-radius: 24px;



  padding: 15px 5px;



  text-align: center;



  transition: .4s;

}



.price-card:hover {

  transform: translateY(-8px);

}



.price-card.featured {

  border-color: rgba(255,255,255,.25);

}



.price-card h3 {

  font-size: 28px;

}



.price {

  font-family: "Playfair Display";

  font-size: 45px;

  margin: 20px 0;

}



.price-card ul {

  list-style: none;

  margin-bottom: 20px;

}



.price-card li {

  opacity: .85;

}



/* ==================================================

   STORY

================================================== */



.story-section {

  padding: 140px 0;

  background: #111;

}



.story-grid {

  display: grid;

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

  gap: 30px;

  margin-top: 50px;

}



.story-card {

  background: #161616;



  border: 1px solid rgba(255,255,255,.08);



  border-radius: 24px;



  padding: 20px 20px;



  text-align: center;



  transition: .4s;

}



.story-card:hover {

  transform: translateY(-8px);

}



.story-card.featured {

  border-color: rgba(255,255,255,.25);

}



.story-card h3 {

  font-size: 28px;

}



.story {

  font-family: "Playfair Display";

  font-size: 45px;

  margin: 20px 0;

}



.story-card ul {

  list-style: none;

  margin-bottom: 20px;

}



.story-card li {

  opacity: .85;

}



/* ==================================================

   GALLERY

================================================== */



.service-gallery {

  padding: 140px 0;

}



.service-gallery .gallery-grid {

  columns: 3;

  column-gap: 20px;

}



.service-gallery .gallery-grid img {

  width: 100%;

  height: auto;



  margin-bottom: 20px;



  border-radius: 18px;



  cursor: pointer;



  transition: .5s ease;

}



.service-gallery .gallery-grid img:hover {

  transform: scale(1.02);

}



/* ==================================================

   CTA

================================================== */



.service-cta {

  text-align: center;

}



.service-cta h2 {

  font-size: 64px;

  margin-bottom: 20px;

}



.service-cta p {

  max-width: 700px;

  margin: auto;

  margin-bottom: 30px;

}



/* ==================================================

   OTHER SERVICES

================================================== */



.other-services {

  padding: 140px 0;

}



.other-services .services-grid {

  display: grid;

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

  gap: 25px;

}



.mini-service {

  position: relative;

  overflow: hidden;

  border-radius: 22px;

  text-decoration: none;

}



.mini-service img {

  width: 100%;

  height: 420px;



  object-fit: cover;



  transition: .8s ease;

}



.mini-service:hover img {

  transform: scale(1.08);

}



.mini-service::before {

  content: "";



  position: absolute;

  inset: 0;



  background:

  linear-gradient(

    transparent,

    rgba(0,0,0,.8)

  );



  z-index: 1;

}



.mini-service span {

  position: absolute;



  left: 25px;

  bottom: 25px;



  z-index: 2;



  color: white;



  font-size: 28px;

  font-family: "Playfair Display";

}



/* ==================================================

   MOBILE

================================================== */



@media (max-width: 992px) {



  .pricing-grid {

    grid-template-columns: 1fr;

  }



  .other-services .services-grid {

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

  }



}



@media (max-width: 768px) {



  .service-hero-content h1 {

    font-size: 42px;

  }



  .hero-buttons {

    flex-direction: column;

  }



  .service-intro,

  .pricing-section,

  .service-gallery,

  .other-services {

    padding: 90px 0;

  }



  .service-intro h2 {

    font-size: 38px;

  }



  .service-gallery .gallery-grid {

    columns: 1;

  }



  .other-services .services-grid {

    grid-template-columns: revert-rule;

  }



  .mini-service img {

    height: 320px;

  }



  .service-cta h2 {

    font-size: 40px;

  }



}



/* =====================================

   LOCATIONS INFO

===================================== */





.locations-section {



    padding:120px 0;



    background:#111;



}







.locations-section .section-heading {



    max-width:750px;



    margin:0 auto 70px;



    text-align:center;



}







.locations-section h2 {



    font-size:52px;



    margin:20px 0;



}







.locations-section p {



    opacity:.75;



    font-size:17px;



}











.locations-list {





    display:grid;



    grid-template-columns:

    repeat(4,1fr);



    gap:25px;





}











.location-item {





    padding:40px 30px;





    border:1px solid rgba(255,255,255,.08);





    background:#141414;





    border-radius:20px;





    transition:.4s ease;





    position:relative;





    overflow:hidden;



}









.location-item:hover {





    transform:translateY(-8px);





    border-color:

    rgba(255,255,255,.25);





}











.location-number {





    display:block;





    font-size:13px;





    letter-spacing:3px;





    opacity:.5;





    margin-bottom:25px;





}







.location-item h3 {





    font-size:32px;





    margin-bottom:15px;





}







.location-item p {





    font-size:15px;





    line-height:1.7;





}













@media(max-width:992px){





    .locations-list {





        grid-template-columns:

        repeat(2,1fr);



    }





}











@media(max-width:600px){





    .locations-section {





        padding:90px 0;



    }







    .locations-section h2 {





        font-size:36px;



    }



}



/* PHONE INPUT */



.phone-group{



display:flex;



gap:10px;



}





.phone-group select{



width:160px;



}





.phone-group input{



flex:1;



}









.selected-price{



margin-top:20px;



font-family:"Playfair Display";



font-size:28px;



color:white;



}









@media(max-width:600px){



.phone-group{



flex-direction:column;



}





.phone-group select{



width:100%;



}



}



/* ==========================

   DATE PICKER LIGHT

========================== */





input[type="date"]::-webkit-calendar-picker-indicator {



    background-color:white;



    cursor:pointer;



    padding:5px;



    border-radius:5px;



}







input[type="date"]:focus {



    outline:none;



    box-shadow:0 0 0 2px rgba(255,255,255,.3);



}



.iti {



    width:100%;



}





.iti input {



    width:100% !important;



    background:#fff !important;



    color:#111 !important;



    border-radius:10px;



    padding:14px !important;



}





.iti__country-list {



    background:#fff;



    color:#111;



}





.iti__country {



    color:#111;



}





.iti__country:hover {



    background:#eee;



}



/* ==========================

   PHONE SELECT

========================== */





.phone-group {



display:flex;

gap:10px;

width:100%;



}







.phone-group select {



width:230px;



padding:14px;



background:#141414;



color:white;



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



border-radius:10px;



font-family:"Inter",sans-serif;



cursor:pointer;



}







.phone-group input {



flex:1;



padding:14px;



background:#141414;



color:white;



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



border-radius:10px;



}







@media(max-width:768px){



.phone-group{



flex-direction:column;



}





.phone-group select{



width:100%;



}





}



/* ==========================

   GALLERY PAGE MASONRY

========================== */





.gallery-page{



    padding:80px 0;



}







.masonry-gallery{



    display:flex;



    gap:20px;



    align-items:flex-start;



}







.gallery-column{



    flex:1;



    display:flex;



    flex-direction:column;



    gap:20px;



}







.gallery-column img{



    width:100%;



    height:auto;



    display:block;



    border-radius:16px;



    cursor:pointer;





    opacity:0;



    transform:translateY(30px);





    transition:

    opacity .8s ease,

    transform .8s ease,

    scale .4s ease;



}







.gallery-column img.loaded{



    opacity:1;



    transform:translateY(0);



}







.gallery-column img:hover{



    transform:scale(1.03);



}





/* TABLET */



@media(max-width:1100px){





    .masonry-gallery{



        gap:16px;



    }





}





/* MOBILE */



@media(max-width:768px){





    .masonry-gallery{



        gap:12px;



    }





}



/* SMALL MOBILE */



@media(max-width:480px){





    .masonry-gallery{



        gap:10px;



    }





    .gallery-column img{



        border-radius:12px;



    }





}



/* =========================

ABOUT PAGE

========================= */





.about-hero{



height:90vh;

position:relative;

padding: 0;



}





.about-hero img{



width:100%;

height:100%;

object-fit:cover;



}







.about-hero-content{



position:absolute;

inset:0;



display:flex;

flex-direction:column;

justify-content:center;

align-items:center;



text-align:center;

z-index:2;



padding:20px;



}







.about-hero-content h1{



font-size:70px;

margin:35px;



}







.about-hero-content span{



letter-spacing:3px;

text-transform:uppercase;

font-size:12px;



}









.about-story{



padding:120px 0 0;



}







.about-grid{



display:grid;

grid-template-columns:1fr 1fr;

gap:80px;



align-items:center;



}







.about-image img{



border-radius:20px;



}









.about-text h2{



font-size:45px;

margin:20px 0;



}







.about-text p{



opacity:.8;

margin-bottom:20px;



}











.about-style{



background:#111;

padding:120px 0;



}







.style-grid{



display:grid;

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

gap:30px;



}







.style-card{



background:#171717;

padding:40px;

border-radius:20px;



}







.style-card h3{



font-size:26px;

margin-bottom:15px;



}









.experience-section{



padding:120px 0;

text-align:center;



}







.experience-section h2{



font-size:45px;

margin-bottom:30px;



}









.about-cta{



padding:120px 0;

background:#111;

text-align:center;



}







.about-cta h2{



font-size:45px;



}







@media(max-width:768px){





.about-hero-content h1{



font-size:40px;



}







.about-grid{



grid-template-columns:1fr;



}







.style-grid{



grid-template-columns:1fr;



}







.about-text h2,

.experience-section h2,

.about-cta h2{



font-size:32px;



}





}



@font-face {

    font-family: "Amalfi Coast";

    src: url("../fonts/Amalfi-Coast.ttf") format("truetype");

    font-weight: normal;

    font-style: normal;

}



.amalfi-font {

    font-family: "Amalfi Coast", cursive;

    font-size: 50px;

}



@media(max-width:450px){



.amalfi-font {

    font-size: 35px;

}



}



@media(max-width:400px){



.amalfi-font {

    font-size: 25px;

}



}



/* =========================

   BOOKING ACKNOWLEDGEMENT

========================= */



.checkbox-consent{

  display:flex;

  align-items:flex-start;

  gap:12px;

  margin:25px 0 30px;

  cursor:pointer;

}



.checkbox-consent input{

  margin-top:4px;

  width:18px;

  height:18px;

  accent-color:#fff;

  flex-shrink:0;

}



.checkbox-consent span{

  font-size:14px;

  line-height:1.6;

  color:rgba(255,255,255,.75);

}



/* =========================

   SHOWCASE

========================= */



.showcase-grid{

    display:grid;

    grid-template-columns: 1.4fr 0.8fr;

    gap:30px;

    align-items:center;

}



.showcase-photo img{

    width:100%;

    height:750px;

    object-fit:cover;

    border-radius:24px;

}



.showcase-video video{

    width:100%;

    height:750px;

    object-fit:cover;

    border-radius:24px;

}



@media(max-width:768px){



    .showcase-grid{

        grid-template-columns:1fr;

    }



    .showcase-photo img,

    .showcase-video video{

        height:auto;

    }



}



.showcase-video{

    position:relative;

}





#soundToggle{



    position:absolute;

    bottom:20px;

    right:20px;



    width:45px;

    height:45px;



    border-radius:50%;

    border:none;



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

    color:white;



    cursor:pointer;



    font-size:20px;



}



.form-error{



  color:#c62828;



  font-size:.95rem;



  margin:15px 0;



  font-weight:500;



}



/* THANK YOU PAGE */



.thankyou-section {



padding:120px 0;



background-image: url(../photos/Wedding00009_Site.jpg);

    

background-size: cover;



}





.thankyou-card {



max-width:750px;



margin:auto;



text-align:center;



background:#ffffffb0;



padding:70px 50px;



border-radius:20px;



box-shadow:0 20px 60px rgba(0,0,0,.08);



}







.thankyou-card h1 {



font-family:"Playfair Display", serif;



font-size:52px;



margin:25px 0;



}







.thankyou-card p {



font-size:18px;



line-height:1.8;



color:#555;



}







.thank-buttons {



display:flex;



justify-content:center;



gap:20px;



margin-top:40px;



flex-wrap:wrap;



}







.thank-buttons i {



margin-right:8px;



}







.thank-note {



margin-top:45px;



padding-top:30px;



border-top:1px solid #eee;



display:flex;



gap:15px;



align-items:center;



justify-content:center;



}





.thank-note i {



font-size:24px;



}





.thank-note p {



font-size:14px;



margin:0;



}









@media(max-width:768px){





.thankyou-section {



padding:70px 20px;



}





.thankyou-card {



padding:45px 25px;

margin: 40px 0;



}







.thankyou-card h1 {



font-size:38px;



}







.thank-note {



flex-direction:column;



}





}



.blackEd  {



    color:rgb(0, 0, 0);



}



.blackEdBtn{



    border:1px solid rgba(0, 0, 0, 0.3);



    color:#000000;

}