@import url('https://fonts.googleapis.com/css2?family=Yatra+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');

:root { --white: #ffffff; --black: #000000; --orange: #F18D30; --green: #066C6B; }

body { overflow-x: hidden; scroll-behavior: smooth; background-color: var(--white); }

/*Navbar*/
.navbar { background-color: transparent !important; }
.navbar img { max-width: 150px; height: auto; }
.navbar ul { text-align: center; font-size: 1.2em; }
.navbar li .nav-link { color: var(--green) !important; font-weight: 500 !important; font-family: "Teko", sans-serif; font-size: 1.5em; }
.navbar li .nav-link:hover { transform: scale(1.05); color: var(--orange) !important; transition: 0.7s; opacity: 75%; }

@media (max-width: 768px) {
    .navbar img { max-width: 120px; }
    .navbar li .nav-link { font-size: 1.30em; }
}

/*Section*/
section h1 { font-size: calc(1.8em + 2vw); font-family: "Yatra One", system-ui; }
section h2 { font-size: 1.5em; font-family: "Yatra One", system-ui; }
section p { font-size: 1.2em; padding: 1% 0; font-family: "Teko", sans-serif; }

/*Hero Section*/
#hero { padding: 5%; background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.aspiritualjourney.co.za/images/hero-img.webp"); background-size: cover; background-position: center center; height: 100vh; width: 100%; color: var(--white); }
#hero h1 { color: var(--orange); }
#hero p { font-weight: 400; color: var(--white); font-size: 2.5em; }
#hero .badge { padding: 10px 25px !important; font-family: "Teko", sans-serif; font-size: 1.4em !important; background-color: rgba(0, 0, 0, 0.5) !important; color: var(--white) !important; font-weight: 400 !important; border: 2px solid var(--orange); }
#hero .badge:hover { transform: scale(1.05); transition: 0.7s; opacity: 75%; }
#hero a { font-weight: 500 !important; font-family: "Yatra One", system-ui; background-color: var(--green); border: 2px solid var(--orange); color: var(--white); padding: 12px 50px; font-size: 1.2em; font-weight: 600; box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px; border-radius: 50px; margin-top: 5%; }
#hero a:hover { transform: scale(1.07); transition: 0.7s; opacity: 75%; border: 2px solid var(--white); }

@media (max-width: 768px) {
    #hero { padding: 12vh 5vw; }
    #hero h1 { font-size: 2.2em; }
    #hero p { font-size: 1.5em; }
    #hero .badge { font-size: 0.9em !important; }
    #hero a { font-size: 0.9em; padding: 8px 15px; }
}

/*About Section */
#about { padding: 25vh 5vw; width: 100%; text-align: center; background: url("https://www.aspiritualjourney.co.za/images/about-img.webp") center center/cover no-repeat; }
#about h1 {color:var(--orange); margin-bottom: 10px; }
#about > .container > .text-center > p { font-weight: 400; color: var(--green); font-size: 2.5em;  }
#about img { max-width: 380px; width: 100%; height: auto; }
#about .col-lg-7 p { text-align: left; color: var(--green); font-size: 1.5em; line-height: 1.9; margin-bottom: 18px; }
#about strong { color: #B58100; font-weight: 600; }
#about .vision-card { background:#FFF9F2; border-left: 6px solid var(--orange); padding: 20px; border-bottom-right-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.08); margin-top: 30px; }
#about .vision-card h5 { display: block; margin-bottom: 15px; padding: 8px 30px; background: var(--orange); color: var(--white); border-radius: 30px; font-weight: 600; }
#about .vision-card p { margin: 0; text-align: left; color: var(--green); font-size: 1.4em; line-height: 1.8; }
#about .card { height: 100%; border: none; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.08); transition: 0.3s ease; }
#about .card:hover { transform:translateY(-8px); }
#about .card i { font-size: 2.5em; color: var(--orange); margin-bottom: 18px; }
#about .card h6 { color: var(--green); font-family: "Teko",sans-serif; font-size: 1.5em; margin: 0; }

@media ( max-width: 768px) {
    #about { padding: 12vh 5vw; }
    #about h1 { font-size: 2.2em; }
    #about > .container > .text-center > p { font-size: 1.5em; }
    #about img { max-width: 250px; margin-bottom: 35px; }
    #about .col-lg-7 p { text-align: center; font-size: 1.3em; }
    #about .vision-card { text-align: center; }
    #about .vision-card p { text-align: center; font-size: 1.2em; }
    #about .card { padding: 20px 10px; }
    #about .card i { font-size: 2em; }
    #about .card h6 { font-size: 1.3em; }
}

/* Reviews Section */
#reviews { padding: 25vh 5vw; width: 100%; background: linear-gradient(135deg, #FFFAF3 0%, #FFF1E6 100%); text-align:center; }
#reviews h1 { color:var(--orange); }
#reviews> .container> .text-center> p { color: var(--green); font-size: 2.5em; }
.review-card { max-width: 850px; background: var(--white); padding: 30px; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,.08); }
.review-card blockquote { font-size: 1.3em; line-height: 1.7; color: var(--green); font-style: italic; margin-bottom: 30px; }
.review-card h5 { color: var(--orange); font-weight: 600; margin: 0; }
.stars { color: #F4B400; font-size: 2em; letter-spacing: 5px; margin-bottom: 25px; }
.carousel-control-prev, .carousel-control-next { width: 6%; }
.carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--orange); border-radius: 50%; padding: 18px; }
.carousel-indicators button { width: 12px; height: 12px; border-radius: 50%; background:var(--orange); }

@media (max-width: 768px) {
    #reviews { padding: 12vh 5vw; }
    #reviews h1 { font-size: 2.2em; }
    #reviews > .container > .text-center > p { font-size: 1.5em; }
    .review-card { width: 80%; padding: 25px 20px; margin: auto; }
    .review-card blockquote { font-size: 1em; line-height: 1.7; }
    .review-card h5 { font-size:1.2em; }
    .stars { font-size:1.4em; margin-bottom: 18px; }
    .carousel-control-prev { left: -10px; }
    .carousel-control-next { right: -10px; }
    .carousel-control-prev-icon, .carousel-control-next-icon { padding: 14px; background-size: 55%; }
}

/*Included Section*/
#included { padding: 25vh 5vw;  width: 100%; text-align: center; background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.aspiritualjourney.co.za/images/included-img.webp"); background-size: cover; background-position: center center; }
#included h1 { color: var(--orange); font-weight: 550; }
#included p { font-weight: 400; color: var(--white); font-size: 2.5em; }
#included .row { margin-top: 1%; }
#included .card { background-color: rgba(0, 0, 0, 0.40); border: 3px solid var(--orange); padding: 15px 12px; }
#included .card i { color: var(--orange); font-size: 65px; }
#included .card h5 { color: var(--white); font-size: 2em; font-family: "Yatra One", system-ui; border-bottom: 1px solid var(--orange); padding-bottom: 10px;  }
#included .card p { font-family: "Teko", sans-serif; font-size: 1.4em; color: var(--green); }

@media (max-width: 768px) {
    #included { padding: 12vh 5vw; }
    #included h1 { font-size: 2.2em; }
    #included p { font-size: 1.5em; }
    #included .card { padding: 12px; }
    #included .card i { font-size: 35px; }
    #included .card h5 { font-size: 1.4em; }
    #included .card p { font-size: 1.2em; }
}

/*package Section*/
#package { padding: 20vh 5vw; width: 100%; text-align: center; background-image: url("https://www.aspiritualjourney.co.za/images/about-img.webp"); background-size: cover; background-position: center center; }
#package h1 { color: var(--orange); }
#package p { font-weight: 400; color: var(--green); font-size: 2.5em; }
#package .card p { font-size: 1.2em !important; }
#package .tour-card { padding: 25px; border-radius: 18px; border: none; box-shadow: rgba(0,0,0,0.08) 0px 10px 30px; transition: 0.3s ease; background: var(--white); }
#package .tour-card:hover { transform: translateY(-8px); }
#package .tour-badge { display:inline-block; background:#fff3cd; color: #B58100; padding: 8px 30px; border-radius: 20px; font-size: 1.1em; font-weight: 600; margin-top: 10px; }
#package .tour-route p { color: #555; text-align: center; margin-bottom: 15px; }
#package .tour-includes { display:block; margin: auto; text-align: left; gap: 8px; font-size: 1.2em; font-weight: 500; color: #333; margin-bottom: 15px; }
#package .tour-includes i { color: var(--orange); margin-right: 6px; }
#package .tour-price { text-align: center; font-size: 1.5em; font-weight: 700; color: #E67E22; margin: 15px 0; }
#package .tour-actions a { border-radius: 10px; font-weight: 600; }

@media (max-width: 768px) {
    #package { padding: 12vh 5vw; }
    #package h1 { font-size: 2.2em; }
    #package p { font-size: 1.5em; }
    #package .card p { font-size: 1.2em !important; }
    #package .tour-card { padding: 20px; border-radius: 20px; }
    #package .tour-badge { padding: 8px 20px; font-size: 1em; }
    #package .tour-includes { font-size: 1em; font-weight: 500; }
    #package .tour-price { font-size: 1.2em; font-weight: 700; }
}

/*Gallery Section*/
#gallery { padding: 20vh 5vw;  width: 100%; text-align: center; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://www.aspiritualjourney.co.za/images/gallery-img.webp"); background-size: cover; background-position: center center; }
#gallery h1 { color: var(--orange); }
#gallery p { font-weight: 400; color: var(--white); font-size: 2.5em; }
#gallery img { width: 100%; border-radius: 10px; transition: 0.3s ease; box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }
#gallery img:hover { transform: scale(1.03); }

@media (max-width: 768px) {
    #gallery { padding: 12vh 5vw; }
    #gallery h1 { font-size: 2.2em; }
    #gallery p { font-size: 1.5em; }
    #gallery img { width: 90%; border-radius: 20px; }
}

/*Contact Section*/
#contact { padding: 25vh 5vw;  width: 100%; text-align: center; background-image: url("https://www.aspiritualjourney.co.za/images/about-img.webp"); background-size: cover; background-position: center center; }
#contact h1 { color: var(--orange); }
#contact p { font-weight: 400; color: var(--green); font-size: 2.5em; }
#contact .socials i { color: var(--white); background-color: var(--orange); padding: 10px 15px; border-radius: 50%; font-size: 30px; }
#contact .socials i:hover { background-color: var(--green);  transition: 0.7s; }
#contact #emailForm button { background-color: var(--orange); color: var(--black); font-weight: 500; border-radius: 30px; border: none; font-size: 1.2em; padding: 8px 30px; }
#contact #emailForm button:hover { opacity: 80%; transform: scale(1.05); transition: 0.7s; }
#contact #whatsappForm button { background-color: var(--green); color: var(--white); font-weight: 500; border-radius: 30px; border: none; font-size: 1.2em; padding: 8px 30px; }
#contact #whatsappForm button:hover { opacity: 80%; transform: scale(1.05); transition: 0.7s; }

@media (max-width: 768px) {
    #contact { padding: 12vh 5vw; }
    #contact h1 { font-size: 2.2em; }
    #contact p { font-size: 1.5em; }
    #contact .socials i { padding: 5px 8px; border-radius: 50%; font-size: 20px; }
    #contact #emailForm button, #contact #whatsappForm button { font-size: 1em !important; padding: 10px 30px !important; }
}

/*FOOTER */
footer { background: var(--green); color: var(--white); }
footer h5, footer h6 { color: var(--orange); }
footer p { color: #D9D9D9; margin-bottom: 0.75rem; }
footer a { color: var(--white); text-decoration: none; transition: 0.3s; }
footer a:hover { color:#E67E22; }
footer hr { border-color:rgba(255,255,255,.15); }
footer img { max-height:70px; }

@media (max-width: 768px) {
    footer { text-align: left !important; }
}