/* COLOR PALETTE */

/* COLOR PALETTE — HSL */

:root {
    /* Brand colours */
    --primary: #2f7f7b;

    /* Backgrounds */
    --bg-primary: hsl(42, 100%, 90%);

    /* Text */
    --text-dark: #000000;
    --text-light: #ffffff;

    /*Font*/
    --main-font: "Abadi MT", "Abadi", sans-serif;

    --bg-card: hsl(42, 50%, 90%);
}

/*Landing Page CSS*/

.logo {
    width: 10rem;
    border-radius: 2rem;
}

header{
    margin: 0;
}
body{
    background-color: var(--bg-primary);
    font-family: var(--main-font);
}

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 2rem;
    font-size: 1.5rem;
    margin: 0;
}

.navbar-items{
    display: flex;
    gap: 1rem;
    
}

a{
    text-decoration: none;
    color: var(--text-dark);
}
a:hover{
    color: var(--primary);
    cursor: pointer;
    transform: translateY(-5px) scale(1.03); 
}

.hero {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-light);
    text-align: center;
    position: relative;
    background: url(assets/images/Hero-background.jpg);
    background-position: center 20%;
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 3.0rem;
    margin: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.1); /* Overlay for readability */
}
.hero-text {
  position: relative;
  z-index: 1;
}



.btn {
    all: unset;
    background: var(--primary);
    color: var(--text-light);
    padding: 1.5rem 2.4rem;
    border-radius: 3rem;
    cursor: pointer;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    transition: 0.3s ease;
    align-self: center;
}

.btn:hover, .support-pillar:hover{
    transform: translateY(-5px) scale(1.03); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.counsel-areas{
    display: flex;
    gap: 5rem;
    font-size: 1.5rem;
    justify-content: center;
    padding-top: 3rem;
}


.section-heading , .blog-page-heading{
    font-size: 3rem;
}

.about, .support, .booking, .testimonials , .contact{
    padding: 2rem 12rem;
}

.about-content{
    display: flex;
    gap: 5rem;
    justify-content: center;
}

.hidden {
    display: none;
}

.profile-photo, .about-photo{
    width: 50rem;
    height: 28rem;
    object-fit: cover;
    border-radius: 1rem;
    border: 3px solid var(--secondary);
}

.about-subtitle, .about-location, .support-subtitle{
    color: var(--primary);
    margin: 0;
}

.about-subtitle , .support-subtitle , .testimonials-initial{
    font-size: 2rem;
    font-weight: bold;
}

.about-location{
    font-size: 1.5rem;
    font-style: italic;
    margin-top: 0.5rem;
}

.about-text, .support-text, .testimonials-text{
    font-size: 1.5rem;
    padding-bottom: 1rem;
    text-align: justify;
}
.support-text{
    padding-bottom:0 ;
}

.testimonials-text{
    text-align: left;
}

.learn-more-btn, .read-more-btn{
    background-color: var(--bg-primary);
    color: var(--primary);
    border-color: var(--primary);
    border: 0.2rem solid;
    border-radius: 3rem;
    font-size: 1.2rem;
    padding: 1rem 4rem;
}

 .testimonials-content{
    display: flex;
    gap: 2rem;
    justify-content: center;
    text-align: center;

}
.support-content{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 1rem;
  justify-items: center; 
  justify-content: center;
  align-items: center;
  padding-right: 10rem;
  padding-left: 10rem;
}

.support-pillar{
    padding: 1rem;
    margin-bottom: 1rem;
    width: 20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.support-icons{
    height: 15rem;
    width: 15rem;
    border-radius: 50%;
    margin-bottom: 2rem;
}

.support-bookingbtn{
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.booking {
    padding-bottom: 0;
    margin: 0;
}

.calendly-inline-widget {
  width: 100%;
  min-width: 0;        
  height: 55rem;       
}


.testimonials-content{
    gap: 15rem;
}

.testimonials-wrapper {
  overflow: hidden;
  width: 100%;
}

.testimonials-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonials-pillar{
  flex: 0 0 33.33%; /* 3 per row */
  padding: 1rem;
  box-sizing: border-box;
}

.testimonials-initial{
    font-size: 1.5rem;
    color: var(--primary);
    text-align: left;
}

.contact-photo{
    width: 30rem;
    border-radius: 4rem;
}

.contact{
    margin-top: 5rem;
    display: flex;
    gap: 10rem;
    justify-content: center;
    align-items: center;
}

.contact-content{
    text-align: center;
}

.contact-logo{
    width: 15rem;
    border-radius: 2rem;
}

.contact-socials{
    display: flex;
    justify-content: center;
    padding: 2rem;
    gap: 1.5rem;
}
.social-logo{
    width: 4rem;
    height: 4rem;
}

.social-logo:hover{
    cursor: pointer;
    transform: translateY(-5px) scale(1.03); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/*Contact Page CSS*/

 .formbox {
    background: var(--bg-primary);
    padding: 5rem;
    margin: 1rem 10rem;
    background: url(assets/images/contact-photo.jpg);
    background-position: center 20%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}

.form-element{
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
}

form{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 80%;
}

.h-captcha{
    align-self: center;
}

textarea, input{
    font-family: var(--main-font);
    font-size: 1.5rem;
}

label{
    color: var(--text-light);
    font-family: var(--main-font);
}


/*Blog page CSS*/

.blog-page-heading{
    text-align: center;
}

.blog-post{
    background: var(--bg-card);
    box-shadow: 8px 8px 16px rgba(0,0,0,0.2);
    border-radius: 2rem;
    padding: 2rem;
    width: 25rem;
}




.blog-box{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 1rem;
  justify-items: center; 
}


.blog-post-heading{
    display: flex;
    gap: 2rem;
    font-size: 1.25rem;
}

.blog-title{
    font-size: 1.5rem;
    font-weight: bold;
    margin: 1rem;
}

.blog-snippet{
    font-size: 1.25rem;
    text-align: justify;
}
.blog-date{
    font-style: italic;
}

.blog-thumbnail {
    align-items: center;
    width: 25rem;
    height: 10rem;
    padding-bottom: 1rem;
}

.blog-tag{
    all: unset;
    background: var(--primary);
    color: var(--text-light);
    padding: 0.5rem 1.2rem;
    border-radius: 3rem;
    font-size: 1.25rem;
    transition: 0.3s ease;
    align-self: center;
}

.read-more-btn{
    font-size: 1.25rem;
    background-color: var(--bg-card);
    color: var(--primary);
    border-color: var(--primary);
    border: 0.2rem solid;
    border-radius: 3rem;
    padding: 0.5rem 1rem;
}

/* Blog Posts CSS*/
.blogpost-box{
    margin: 2rem 12rem;
    padding: 1rem 2rem;
    border: solid ;
    border-color: var(--primary);
    display: grid;
}
.blogpost-container{
    display: flex;
    gap: 2rem;
    align-items: center;
}
.blogpost-photo{
    width: 40rem;
    height: 20rem;
}
.blogpost-highlight{
    text-align: center;
    padding: 1rem;
    border-top: solid;
    border-bottom: solid;
    border-color: var(--primary);
    font-style: italic;
}

/* 📱 Mobile Responsive Adjustments */
@media (max-width: 768px) {
  
  /* General body text */
    body {
        font-size: 1rem;
        padding: 0 1rem;
    }

    /* Navbar */
    .navbar {
        gap: 1rem;
        font-size: 1rem;
        padding: 1rem;
    }
    .navbar-items {
        flex-direction: column;
        align-items: center;
    }

    /* Hero section */
    .hero {
        height: auto;
        font-size: 1.5rem;
        padding: 4rem 1rem;
        display: flex;
    }

    .counsel-areas{
        gap: 1rem;
        font-size: 1rem;
        list-style: none;
    }

    /* About & Support sections */
    .about, .support, .booking, .testimonials, .contact, .about-details {
        padding: 2rem;
    }
    .about-content, .about-block, .contact {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
    .profile-photo, .about-photo, .contact-photo, .blogpost-photo{
        width: 100%;
        height: auto;
    }
    .support-content{
          grid-template-columns: repeat(1, 1fr);
    }
    .support-pillar{
        width: auto;
}
    /* Blog grid */
    .blog-box {
        grid-template-columns: 1fr; /* single column on mobile */
        padding: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .blog-post {
        width: 100%;
    }
    .blog-thumbnail {
        width: 100%;
        height: auto;
    }
    .read-more-btn{
        font-size: 1rem;
    }

    /* Testimonials */
    .testimonials-content {
        flex-direction: column;
        gap: 2rem;
    }
    .testimonials-pillar {
        flex: 0 0 100%;
        height: auto;
    }

    /* Contact form */
    .formbox {
        margin: 1rem;
        padding: 2rem;
        flex-direction: column;
    }
    form {
        width: 100%;
    }

    /*blog post*/
    .blogpost-box{
        margin: 0;
    }
    .blogpost-photo{
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }
    .blogpost-container{
        flex-direction: column;
    }
}