:root {
  --primary-color: #1C2C67;
  --secondary-color: #26B353;
  --main-text-color: #000000;
  --secondary-text-color: #ffffff;
  --light-green: #f2faf5;
  --light-grey:  #f6f8f9;
  --primary-font: "Roboto", sans-serif;
  --secondary-font: "Plus Jakarta Sans", sans-serif;
  --spacing: 1.5rem;
  --brand-gradient: linear-gradient(70deg, #26B353, #1C2C67);
  --secondary-brand-gradient: linear-gradient(150deg, #1C2C67, #26B353);
}

body {
  font-family: var(--primary-font);
  margin: 0;
  padding: 0;
  color: var(--main-text-color);
}

/* Containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

section {
    padding: 40px 20px;
}

/* Utility */
.uppercase { text-transform: uppercase; }
.green { color: var(--secondary-color); }
.secondary_font { font-family: var(--secondary-font); }
ul { list-style: none; padding-inline-start: 0; }
h1 { font-size: 30px}
.gradient_icon {
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;    /* fallback */
}
.section_title { text-align: center;}
.bold { font-weight: 700}

/* Buttons */
.contact_button,
.book_button {
  width: 160px;
  height: 52px;
  border-radius: 5px;
  border: none;
  background-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

button,
.carousel_btn_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
}

button i {
    font-size: 18px;
}

.carousel_btn {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
}

/* Header */
#mobile_top_nav {
  background: var(--brand-gradient);
  text-align: center;
  color: var(--secondary-text-color);
  padding: 18px 0;
}

#mobile_top_header {
    padding: 20px;
    text-align: center;
}

/* Mobile Hamburger Menu */
.nav_bar {
  color: white;
  padding: 5px 25px;
  position: relative;
  z-index: 1000;
}

/* .nav_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
} */

/* Hamburger base */
.hamburger {
  width: 30px;
  height: 24px;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 3000;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Hamburger active (turn into X) */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 10px);
  background-color: var(--primary-color);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -10px);
  background-color: var(--primary-color);
}

/* Off-canvas menu */
.mobile_menu {
  position: fixed;
  top: 0;
  left: -100%; /* start hidden */
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: left 0.3s ease;
  z-index: 2000;
  padding-top: 60px;
}

.mobile_menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile_menu li {
  margin: 20px 0;
}

.mobile_menu a {
  color: var(--main-text-color);
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  font-size: 1.5em;
}

/* Show menu when active */
.mobile_menu.active {
  left: 0;
}

#desktop_top_header,
#main_nav {
  display: none; /* mobile-first */
}

#main_nav {
  background: #ffffff;
  padding: 20px 1rem;
}

#main_nav .nav_links a {
  text-decoration: none;
  color: var(--main-text-color);
  margin-right: 30px;
}

/* HERO */
#homepage_hero {
  background-color: var(--primary-color);
  color: var(--secondary-text-color);
}

.hero_container,
.about_us_container,
.services_container,
.booking_container,
.testimonial_header_container,
.faqs_content,
.faqs_group,
.get_in_touch_container,
.footer_content,
.footer_content_list,
.about_us_page_container,
.mission_container,
.contact_form_container {
  display: flex;
  flex-direction: column; /* mobile stacked */
  gap: 2rem;
}

.hero_img {
    display: none;
}

.button_group {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.button_group button:nth-last-of-type(1) {
    background-color: #ffffff;
    color: var(--main-text-color);
}

/* ABOUT */
#about_us_page {
    background-color: var(--light-grey);
}
.about_list li,
.quick_links a,
.footer_contact_list li {
    padding: 10px 0;
}

.about_hero_container {
    padding-bottom: 30px;
}

#about_us_page {
    padding: 40px 20px 0 20px;
}

#about_us_page,
#our_mission {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about_us_page_container {
    position: relative;
    transform: translateY(-140px);
}

.about_us_page_container,
.mission_container {
    margin: 0 10px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
}

.abouthero_img {
    height: auto;
    width: 100%;
}

#our_mission {
    margin: -140px 0 0;
    background-color: var(--light-grey);
}

.mission_container {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
}

/* SERVICES */
#services,
#contact_form {
    background-color: var(--light-green);
    padding: 50px 20px;
}

#services h1 {
    margin-bottom: 0;
}

.services_container,
.booking_container,
.get_in_touch_container {
    align-items: center;
}

.service_description {
    display: flex;
    flex-direction: column;
    gap: 1em;
    flex: 1;
    padding-bottom: 30px;
}

.service_block i {
    font-size: 20px;
}

.service_block {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
}

.brand_gradient {
    background: var(--secondary-brand-gradient);
    color: var(--secondary-text-color);
}

#services .icon_container {
    width: 50px;
    height: 50px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* BOOKING */
#booking {
    background: var(--secondary-brand-gradient);
    color: var(--secondary-text-color);
}

.booking_container h1 {
    margin-bottom: 0;
}

.booking_container .book_button {
    background-color: #ffffff;
    color: var(--main-text-color);
}

/*TESTIMONIAL*/
#testimonial h4,
#picture_gallery h4,
#faqs h4 {
    font-weight: normal;
}

.customer_review_container i {
    font-size: 40px;
}

.circle_img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.customer_review_container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.customer_detail {
    display: flex;
    flex-direction: row;
    font-size: 0.8em;
    align-items: center;
    gap: 0.5rem;
}

.customer_detail h3,
.customer_detail p {
    margin: 10px;
}

.star_rating {
    display: flex;
    gap: 5px; 
    color: #FFD700; 
    align-items: center;
    justify-content: center;
}

.star_rating i {
  font-size: 1em;
}

.rating_number {
    color: var(--primary-color);
    font-size: 0.8em;
}

/* PICTURE GALLERY */
.picture_gallery_details,
.faqs_details {
    text-align: center;
    padding: 40px 0;
}

/* FAQS */
#faqs {
    background-color: var(--light-green);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.faqs_content {
    padding-bottom: 40px;
}

.faqs_group {
    flex: 1;
}

details p {
    padding: 0 20px;
}

summary {
    list-style: none;
    background-color: #FFFFFF;
    padding: 20px 30px;
}

/* GET IN TOUCH */
#get_in_touch {
    background: url('images/contactus.png') center/cover no-repeat;
    background-color: var(--primary-color);
    color: #ffffff;
}

.get_in_touch_container {
    text-align: center;
    padding-bottom: 20px;
}

/* ABOUT US */
#about_hero,
#contact_hero,
#get_in_touch {
    position: relative; 
    color: #fff; 
    min-height: 300px; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
}

#about_hero {
    background: url('images/aboutusbanner.png') center/cover no-repeat;
}

#contact_hero::before,
#about_hero::before,
#get_in_touch::before {
    content: "";
    position: absolute;
    inset: 0; 
    background: var(--primary-color);
    opacity: 0.6;
}

.about_hero_container,
.contact_hero_container,
.get_in_touch_container {
    position: relative;
    z-index: 2;
}

.about_hero_text {
    text-align: center;
}

.about_hero_text h4,
.contact_hero_text h4 {
    font-weight: 300;
}

#about_us_page {
    z-index: 2;
}

/* CONTACT US */
#contact_hero {
    background: url('images/junksidewalk.jpg') center/cover no-repeat;
}

.contact_info_container li {
    padding: 15px;
    margin: 10px 0;
    border: 1px solid var(--secondary-color);
}

.contact_info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.label_text {
    font-size: 0.8em;
}

.contact_info_content p {
    margin: 5px 0 0;
}

.form_box {
    background-color: var(--secondary-color);
    padding: 20px;
    border-radius: 12px;
}

.form_box h2 {
    color: var(--secondary-text-color);
    font-weight: 500;
}

.contact-form,
.contact-form .form-desktop-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    position: relative;
    flex: 1;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 40px 12px 12px;
    border: 1px solid var(--light-grey);
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.submit-btn {
    margin-top: 20px;
    width: 100%;
    padding: 14px;
    background: #26B353;
    color: #ffffff;
    font-size: 1.1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.map_container {
    width: 100%;
}

.submit-btn:hover {
    background: #1c8d40;
}

/* FOOTER */
footer {
    background-color: #f3f8fa;
    font-size: 0.9em;
}

.footer_content {
    align-items: center;
    padding: 40px 10px 20px;
}

.social_media_icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1em;
}

.brand_info .social_media_icons i {
    font-size: 20px;
}

.quick_links {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.quick_links a {
    text-decoration: none;
    color: var(--main-text-color);
}
.footer_contact {
    width: 100%;
}

.footer_bottom {
    background-color: #ffffff;
    padding: 10px 0;
}

.quick_links p,
.footer_contact_list,
.footer_contact_list p,
.footer_bottom p {
    margin-top: 0;
}

.footer_bottom_content {
    text-align: center;
}

.legal a {
    text-decoration: none;
    color: var(--secondary-color);
}

/* MEDIA QUERIES */

/* Tablet */
@media (min-width: 768px) {
  body { font-size: 18px; }

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

    .button_group {
        flex-direction: row;
        gap: 30px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    body { font-size: 16px; }
    h1 { font-size: 40px; }

    /* Desktop top header */
    #mobile_top_nav, #mobile_top_header { display: none; }
    #desktop_top_header {
        display: block;
        background: var(--brand-gradient);
        color: var(--secondary-text-color);
        padding: 10px 75px;
        font-size: 0.8em;
    }

    .top_header_contact, .social_media_icons {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .social_media_icons li {
        width: 21px;
        height: 21px;
        border: 1px solid #ffffff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #main_nav {
        display: block;
    }

    #main_nav .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .hero_container,
    .about_us_container,
    .service_description,
    .testimonial_header,
    .about_us_page_container,
    .mission_container,
    .contact_form_container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #main_nav .container,
    .hero_container,
    .about_us_container,
    .service_description,
    .testimonial_header {
        align-items: center;
    }

    .hero_text {
        max-width: 50%;
    }

    .hero_img {
        display: block;
        width: 45%;
        height: auto;
    }

    .button_group {
        justify-content: start;
    }
    .booking_container {
        padding: 50px 0;
        width: 50%;
        text-align: center;
    }

    .testimonial_header {
        display: flex;
        }

    .customer_details_container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .picture_gallery_details {
        margin: 0 auto;
        width: 50%;
    }

    .footer_content {
        flex: 1;
    }

    .footer_content {
        flex-direction: row;
        justify-content: space-between;
    } 
    .brand_info {
        width: 150%;
    }
    .brand_info .social_media .social_media_icons {
        justify-content: left;
    }
    .quick_links,
    .footer_contact_list {
        display: flex;
        flex-direction: column;
        gap: 1em;
        margin-bottom: 0;
    }

    .abouthero_img {
        height: 40%;
        width: auto;
    }

    .contact-form .form-desktop-row {
        flex-direction: row;
        gap: 20px;
    }
    .footer_bottom_content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .footer_bottom_content p {
        margin: 0;
    }
}