@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root { --white: #FFFFFF; --black: #000; --red: #EC1C53; --blue: #7DADBE; --pink: #C47494; }

h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", serif; font-optical-sizing: auto; font-weight: 600; }
p, a, li { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 350 !important; }

body { overflow-x: hidden; scroll-behavior: smooth; }

/*Back Button*/
.back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 999; background: var(--white); color: #333; padding: 10px 12px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); text-align: center; font-size: 24px; line-height: 1; transition: opacity 0.3s ease; opacity: 0.8; display: none; }
.back-to-top:hover { opacity: 1; background: #f0f0f0; color: var(--black); }

/* Top Contact Bar */
#contact-bar { padding: 30px; background-color: var(--red); color: var(--white); }
#contact-bar p { font-weight: 600 !important; }
#contact-bar a { padding: 5px 16px; font-weight: 600; border: 1px solid var(--white); background-color: transparent; color: var(--white); transition: 0.5s ease; }
#contact-bar a:hover { background-color: var(--white); color: var(--red); opacity: 1; }

/* Responsive (Mobile) */
@media (max-width: 768px) {
    #contact-bar { padding: 40px 15px; text-align: center; }
    #contact-bar p { text-align: left; font-size: 1em; }
    #contact-bar a { margin-top: 5px; }
}

/* Navbar - Section */
.navbar { background-color: transparent !important; }
.navbar img { max-width: 150px; height: auto; padding: 20px; }
.navbar ul { text-align: center; font-size: 1.2em; }
.navbar li .nav-link { color: var(--red) !important; font-weight: 500 !important; }
.navbar li .nav-link:hover { color: var(--blue) !important; transition: 0.5s;  }

@media (max-width: 768px) { 
    .navbar img { max-width: 140px; padding: 20px; margin-left: 20px; }
    .navbar ul { text-align: center; font-size: 1.2em; }
}

/* Hero Section with Video + Fallback Background */
#hero.video-hero { width: 100%; height: 110vh; position: relative; overflow: hidden; background-image: url("https://www.hillsweddingestate.co.za/images/hero-img.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#hero .video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; }
#hero .video-overlay { z-index: 2; background: rgba(0, 0, 0, 0.65); }
#hero h1 { font-size: 4em; color: var(--white); }
#hero p { font-size: 1.7em; color: var(--pink); padding-top: 20px; }
#hero i { padding-right: 8px; }
#hero a { margin: 4% auto; font-weight: 450 !important; padding: 10px 45px; color: var(--white); background-color: var(--red); border: none; }  
#hero a:hover { background-color: var(--white); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }
  
@media (max-width: 768px) {
    #hero h1 { font-size: 2.2em; }
    #hero p { font-size: 1.2em; padding-top: 10px; }
    #hero a { margin: 5vh auto; font-size: 1em; padding: 10px 20px; width: 55%; display: block; }
}

/* The Estate - Section */
#estate { width: 100%; height: auto; margin: 5% 0; padding: 0; }
#estate .row { margin: 0; }
#estate .card-one, #estate .card-three { background-color: var(--red);  min-height: 60vh; }
#estate .card-two, #estate .card-four { background-color: var(--blue);  min-height: 60vh; }
#estate .learn-section .content { max-width: 90%; }

#estate h2 { color: var(--red); font-size: 3em; }
#estate .text-muted { font-size: 1.4em; padding: 2% 4%; }
#estate .row i { color: var(--white); font-size: 70px; padding-bottom: 20px; }
#estate .row h5 { color: var(--white); font-size: 1.6em; font-weight: 600; padding: 6px; }
#estate .row p { color: var(--white); font-size: 1.1em; padding: 20px 10px; border-top: 1px solid var(--white); border-bottom: 1px solid var(--white); margin-top: 20px; }

@media (max-width: 768px) { 
    #estate h2 { font-size: 1.8em; }
    #estate .text-muted { font-size: 1em; padding: 20px 6vw; }
    #estate .row i { color: var(--white); font-size: 70px; padding-bottom: 20px; }
    #estate .row h5 { font-size: 1.5em; margin-top: 3%; }
    #estate .row p { color: var(--white); font-size: 1em; padding: 20px 20px; }
}

/* Moments - Section */
#moments { width: 100%; height: 110vh; text-align: center; padding: 5% 5% 0 10%; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://www.hillsweddingestate.co.za/images/memory.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#moments h1 { font-size: 4em; color: var(--white); }
#moments p { font-size: 1.7em; color: var(--pink); padding-top: 20px; }
#moments i { padding-right: 8px; }
#moments a { margin: 4% auto; font-weight: 450 !important; padding: 10px 45px; color: var(--white); background-color: var(--red); border: none; }
#moments a:hover { background-color: var(--white); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }

@media (max-width: 768px) {
    #moments { text-align: center; padding: 10vh 5vw; }
    #moments h1 { font-size: 2.2em; }
    #moments p { font-size: 1.2em; padding-top: 10px; }
    #moments a { margin: 5vh auto; font-size: 1em; padding: 10px 20px; width: 85%; display: block; }
}

/* Experience - Section */
#experience { width: 100%; height: auto; padding: 10vh 4vw; }
#experience h2 { color: var(--red); font-size: 3em; }
#experience .text-muted { color: var(--black); font-size: 1.4em; padding: 2% 4%; }

#experience .card { padding: 2em; width: 100%; height: 40vh; background: center center / cover no-repeat; border-radius: 8px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#experience .card.one { background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("https://www.hillsweddingestate.co.za/images/venue.webp"); }
#experience .card.two { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.hillsweddingestate.co.za/images/chapel.webp");  }
#experience .card.three { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.hillsweddingestate.co.za/images/garden.webp");  }
#experience .card.four { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.hillsweddingestate.co.za/images/solar.webp");  }
#experience .card.five { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.hillsweddingestate.co.za/images/table.webp");  }
#experience .card.six { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.hillsweddingestate.co.za/images/decor.webp");  }

#experience .card:hover { transform: translateY(-5px); box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); }

#experience .card h3 { color: var(--white); font-size: 1.3em; font-weight: 500; width: max-content; text-align: left; border-bottom: 1px solid var(--white); padding: 0px 10px 10px 0px; }
#experience .card p { font-size: 1em; color: var(--white); font-weight: 400 !important; padding-top: 5px; }

@media (max-width: 768px) { 
    #experience {padding: 10vh 3vw; } 
    #experience h2 { font-size: 1.8em; } 
    #experience .text-muted { font-size: 1em; padding: 20px 6vw; }
    #experience .card { margin-bottom: 2em; } 
    #experience .card img { width: 130px; } 
    #experience .card h3 { font-size: 1.15em; } 
    #experience .card p { font-size: 0.95em; } 
}

/* Terms - Section */
#terms { width: 100%; height: 110vh; text-align: center; padding: 5% 5% 0 10%; background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.hillsweddingestate.co.za/images/terms-hero.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#terms h1 { font-size: 4em; color: var(--white); }
#terms p { font-size: 1.7em; color: var(--pink); padding-top: 20px; }
#terms i { padding-right: 8px; }
#terms a { margin: 4% auto; font-weight: 450 !important; padding: 10px 45px; color: var(--white); background-color: var(--red); border: none; }
#terms a:hover { background-color: var(--white); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }

@media (max-width: 768px) {
    #terms { text-align: center; padding: 10vh 5vw; }
    #terms h1 { font-size: 2.2em; }
    #terms p { font-size: 1.2em; padding-top: 10px; }
    #terms a {margin: 5vh auto; font-size: 1em; padding: 10px 20px; width: 60%; display: block; }
}

/* FAQ - Section */
#faq { padding: 10vh 5vw; width: 100%; height: auto; }
#faq h2 { color: var(--red); font-size: 3em; }
#faq .text-muted { color: var(--black); font-size: 1.4em; padding: 2% 4%; }

#faq .card { display: block; margin: auto; border: none; }
#faq .card .card-pair { padding: 16px 0px; }
#faq .card .card-pair.one { padding: 0px 0px 16px 0px; }
#faq .card .card-pair h4 { color: var(--red); font-size: 1.6em; font-weight: 500 !important; padding: 0px 10px 10px 0px; border-bottom: 1px solid #CDCDCD; }
#faq .card .card-pair p { color: var(--black); font-size: 1.2em; font-weight: 400 !important; }

@media (max-width: 768px) { 
    #faq { padding: 10vh 4vw; } 
    #faq h2 { font-size: 1.8em; } 
    #faq .text-muted { font-size: 1em; padding: 20px 6vw; }
    #faq .card .card-pair { padding: 25px 10px; }
    #faq .card .card-pair h4 { font-size: 1.2em; padding: 0px 10px 10px 0px; }
    #faq .card .card-pair p { font-size: 1em; }
}

/* Plan - Section */
#plan { width: 100%; height: 110vh; text-align: center; padding: 5% 5% 0 10%; background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.hillsweddingestate.co.za/images/planning.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#plan h1 { font-size: 4em; color: var(--white); }
#plan p { font-size: 1.7em; color: var(--pink); padding-top: 20px; }
#plan i { padding-right: 8px; }
#plan a { margin: 4% auto; font-weight: 450 !important; padding: 10px 45px; color: var(--white); background-color: var(--red); border: none; }
#plan a:hover { background-color: var(--white); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }

@media (max-width: 768px) {
    #plan { text-align: center; padding: 10vh 5vw; }
    #plan h1 { font-size: 2.2em; }
    #plan p { font-size: 1.2em; padding-top: 10px; }
    #plan a { margin: 5vh auto; font-size: 1em; padding: 10px 20px; width: 60%; display: block; }
}

/* Footer Section */
#footer { padding: 6vh 6vw; background-color: var(--red); color: var(--white); font-size: 1rem; }
#footer a { color: var(--white); text-decoration: none; }
#footer a:hover { color: var(--black); transition: 0.5s; }
#footer .list-inline { margin: 0; padding: 0; }
#footer .footer-icon { display: inline-block; transition: transform 0.3s ease, opacity 0.3s ease; width: 40px; height: 40px; }
#footer .footer-icon:hover { transform: scale(1.2); opacity: 0.8; }
#footer .footer-text { font-size: 0.9rem; margin: 0; color: var(--white); }

@media (max-width: 768px) {
    #footer { text-align: center; }
}