@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');


:root {
    --dark-blue:rgb(5, 96, 131);
    --light-blue:rgb(86, 171, 205);
    --dark-grey: #333;
    --white: #fff;
    --off-white: #f3f2f2;
    --gold:#c9a84c;
    --navy:#0d1b2a;

}

*{
    box-sizing:border-box;
    padding: 0;
    margin: 0;
}

body{
    font-family: 'lato', sans-serif ;
    color: var(--dark-grey);
    line-height: 1.5;
    font-weight: 300;
    background-color: var(--off-white);
    
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
    color: var(--light-blue);
    font-weight: 400;
}


h1, h2{
    line-height: 1.2;
    margin: 10px,0;
    font-weight: 400;
}

h2{
    color:var(--dark-blue);
}

p{
    margin: 10px 0;
}

img{
    width: 100%;
}

section{
    padding:20px 0;
}

/* navbar styling */
 h1.logo{
     font-weight: 300;
 }

.navbar .grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.navbar .grid > *:first-child{
    grid-column: 1 / span 1;
    grid-row: 1 /span 2;
    justify-self:start;
    align-self:self-end;
}

.navbar .grid .logo{
    grid-column: 2 / span 2;
    grid-row: 1 /span 1;
    justify-self:end;
    align-self:self-end;
    font-size: 2.5em;
    text-transform: uppercase;
}

.navbar .grid nav{
    grid-column: 2 / span 2;
    grid-row: 2 /span 1;
    justify-self: end;
    align-self:center;
}


.navbar img{
    width:auto;
    height:150px;
}
.navbar {
    background-color: var(--light-blue);
    color: var(--white);
    height: 170px;
}

.navbar ul{
    display: flex;
}

.navbar a{
    color: var(--white);
    padding: 10px;
    margin: 0 5px;
}

.navbar a:hover{
    border-bottom:2px var(--white) solid;

}

.mobile-menu {
    display:none;
}


/* Showcase */

.showcase {
    height: auto;
    background-color: var(--dark-blue);
    color: var(--white);
    position: relative;
    padding-bottom: 60px;
}

.showcase h1{
    font-size: 40px;
    margin:10px 0;
}

.showcase p{
    margin: 20px 0;
}

.showcase .grid{
    grid-template-columns: 55% 45%;
    gap: 30px;
    overflow:visible;
    
}

.showcase .btn:hover{
    background-color: var(--light-blue);
}

.showcase-text{
    animation: slideInFromLeft 1s ease-in;
}

/* .showcase-form{
    position:relative;
    top:60px;
    height:350px;
    width:400px;
    padding: 40px;
    z-index: 100;
    justify-self: flex-end ;
}

.showcase-form .form-control{
    margin: 30px 0;
} */


/* .showcase-form input[type='text'],
.showcase-form input[type='email']{
    border: 0;
    border-bottom: 1px solid var(--main-font-color);
    width:100%;
    padding: 3px;
    font-size: 1.1em;
} */

/* .showcase-form input:focus{
    outline: none;
    } */

.showcase-img{
    z-index: 100;
    border-radius: 10px;
    width:90%;
    justify-self: flex-end ;
    position:relative;
    top:60px;
    animation: slideInFromRight 1s ease-in;
    
}

.showcase::before, 
.showcase::after{
    content:'';
    position: absolute;
    height:100px;
    bottom: -50px;
    right:0;
    left:0;
    background: var(--navy);
    transform: skewY(-1deg);
    -webkit-transform: skewY(-1deg);
    -moz-transform: skewY(-1deg);
    -ms-transform: skewY(-1deg);
}



/* Credability bar */

.cred-bar {
    
  background: var(--navy);
  padding: 14px 40px;
  z-index: 150;
}

.cred-bar__inner {
padding-top: 40px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.cred-bar__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 22px;
  white-space: nowrap;
}

.cred-bar__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.cred-bar__text {
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--off-white);
}

.cred-bar__text strong {
  color: var(--gold);
  font-weight: 700;
}

.cred-bar__divider {
  display: block;
  width: 1px;
  height: 18px;
  flex-shrink: 0;
}

/* Core Services */


.core-heading{
    font-size: 2.2em;
    margin:40px;
 
}

.core .grid h3{
    font-size:1.6em;
    color: var(--white);
    font-weight: 300;
}

.core .grid p{
    font-size: 1.em;
    font-weight: 400;
    color: var(--white);
}

.core .card{
    /* border: 3px solid var(--dark-blue); */
    transition: transform 0.2s ease-in ;
    background: linear-gradient(var(--navy), var(--dark-blue));
    
}

/* .core .card .btn{
    background-color: var(--dark-blue);
} */

.core .card:hover{
    transform: translateY(-15px);
    
    
}


.core .card img{
    max-width: 150px;
    margin:20px;
    /* filter: brightness(0) saturate(100%) invert(24%) sepia(26%) saturate(4517%) hue-rotate(172deg) brightness(96%) contrast(96%); */
}

/* About Section */
.about .flex{
    justify-content: space-around;
    margin:20px 0;
    flex-wrap: wrap;
}

.about-heading{
    font-size: 2.2em;
    margin:auto;
}

.about img{
    width:auto;
    height:50px;
}


/* Reviews */


.reviews .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2);
}

.reviews .card{
    background-color: var(--white);
}

.reviews-heading {
    font-size: 2.2em;
    margin:auto;
    /* color: var(--white); */
}



.reviews a{
    color: var(--dark-blue);
}

.reviews img{
    display:block;
    width:80%;
    margin:20px auto;
   
}


/* YouTube Section */

.youtube{
    /* color: var(--white); */
    padding-bottom: 30px;
}

.youtube .grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2 );
}

.youtube-heading{
    grid-column:1 /span 3;
    grid-row: 1 / span 1;
    font-size: 2.2em;
    /* font-weight: bold; */
    margin:auto;
}



.youtube-image{
    grid-column:1 /span 1;
    grid-row: 2 / span 1;
    align-self: start;
   
}


.youtube-text{
    grid-column:2 /span 2;
    grid-row: 2 / span 1;
    align-self: start;
}

.youtube-text .btn {
    background:  #CD201F;
}

/* contact */

.contact{
    background-color: var(--dark-blue);
    color:var(--white);
}

.contact-heading   {
    font-size: 2.2em;
    text-align: center;
    color: var(--white);
}

.contact i {
    color: var(--white);
    font-size: 3em;
    transition: transform 0.2s ease-in ;
}

.contact i:hover{
    transform: translateY(-5px);
}

.contact .flex{
    justify-content: space-around;
}

/* Footer */

section.footer{
    background-color: var(--dark-grey);
    color: var(--white);
    font-size: 0.9em;
}

.footer img{
    width:150px;
    height: auto;
}

.footer a{
    color: var(--white);
}
.footer a:hover{
    color: var(--light-blue);
}

.pd-class{
    margin-top: 20px;
}


.step{
    margin-top:5px;
}

.step .step-heading{
    font-weight: bold;
    margin-top: 20px;;
    margin-bottom: -10px;
    
}

.planning-cta,
.coaching-cta{
    font-style: italic;
}


/* coahing  */

.who-for .step-heading,
.ways-to-work .step-heading{    
    margin-bottom:5px;
}

.coaching-card-type{
    text-align: center;
    font-weight: bold;
    padding:20px 0;
}

.coaching-card-cost {
    font-family: 'Times New Roman', Times, serif;
    font-size:2.2em;
    text-align: center;
    color:var(--gold);
    font-weight: bold;
}

.coaching-card-duration{
    font-size: 0.8em;
    color: var(--dark-grey);
    text-align: center;
    padding-bottom: 40px;

}

.coaching-card-details ul{
    list-style: none;
    line-height: 3;
    font-size: 0.8em;
    font-weight: bold;

}

.coaching-card-details ul li:before {
  content: '✓  ';
  color:var(--gold);
  font-weight:bold;
}

.pricing .card-focused{
    transform: translateY(-10px);
    background-color: var(--dark-blue);
    color:var(--off-white);
    background: linear-gradient(var(--navy), var(--dark-blue));
}
.pricing .card-focused .coaching-card-duration{
    color:var(--off-white);
}


/* Case Studies */

.case-study {
    padding:0;
    background-color: var(--white);
}

.case-study-head{
    background-color: var(--navy);
    padding:20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    
}

.case-study-name{
    color:var(--gold);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.case-study-location{
    color: var(--off-white);
    font-size: 0.8em;
}

.case-study-facts{
    display: flex;
    justify-content: space-around;
    padding:20px;
    align-items:center; 
    flex-wrap: wrap;   
}
.fact .heading{
    font-family: 'Times New Roman', Times, serif;
    color: var(--gold);
    font-size: 3em;
    text-align: center;
    font-weight: 800;
}
.fact .sub-heading{
    color: var(--dark-grey);
    text-transform: uppercase;
    text-align: centre;
    font-size: 0.8em;
    font-weight: 400;
}

.case-study-text{
    padding:20px;
    color:var(--navy);
}

hr.case-study{
    width:90%;
    margin: auto;
    border-top: 1px solid var(--light-blue);
    margin-bottom: 20px;
}

.case-study-text .attention{
    display:inline;   
    text-transform: capitalize; 
    
}

.case-study-images{
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 20px;
}

.case-study-image img{
    height:100px;
    width:auto;
    border-radius: 3px;
}

.truth {
    background-color: var(--navy);
    color: var(--white);
}

.truth h2{
    color: var(--light-blue);
}

.strap-line{
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 3em;
    color: var(--gold);
    font-style: italic;
    font-weight: bold;
}


/* Project checklist sign up */

.sign-up-grid{
    display:grid;
    grid-template-columns: 25% 25% 50% ;
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;

}

.sign-up-grid .into-para {
    grid-column: 1 /Span 2;
    grid-row: 1 / span 1;
}

.sign-up-grid .whats-included {
    grid-column: 1 /  Span 2;
    grid-row: 2 / span 1;
}

.check-list-form{
    grid-column: 3 / Span 1;
    grid-row: 1 / span 2;
    text-align: center;     
}

.check-list-form-container{    
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
}



.whats-included li{
    list-style-type: none;
}

.whats-included li::before{
    content: '✓ ';
    color:var(--gold);
    font-weight:bold;
}


 /* ── Contact page specific styles ── */


        .contact-hero p{
            font-weight:bold;
            letter-spacing: 0.1em;
        }

        /* ── Two-column layout: form + sidebar ── */
        .contact-body {
            padding: 0 0 60px;
            background-color: var(--off-white);
        }

        .contact-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            align-items: start;
        }

        /* ── Form card ── */
        .contact-form-card {
            background: var(--white);
            padding: 36px 40px;
            margin:0px;
        }

        .contact-form-card h2 {
            font-size: 1.5em;
            font-weight: 400;
            color: var(--dark-blue);
            margin-bottom: 6px;
        }

        .contact-form-card .form-intro {
            font-size: 0.92em;
            color: var(--dark-grey);
            margin-bottom: 28px;
            font-weight: 300;
        }

        /* ── Form elements ── */
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .form-group {
            margin-bottom: 18px;
        }

        .form-group label {
            display: block;
            font-size: 0.78em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--dark-grey);
            margin-bottom: 6px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 11px 14px;
            border: 1.5px solid #d0d0d0;
            border-radius: 5px;
            font-family: 'Lato', sans-serif;
            font-size: 0.95em;
            font-weight: 300;
            color: var(--dark-grey);
            background: var(--off-white);
            transition: border-color 0.2s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--dark-blue);
            background: var(--white);
        }

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

        .form-group select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
            cursor: pointer;
        }

        .form-section-label {
            font-size: 0.78em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--dark-blue);
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 8px;
            margin: 24px 0 18px;
        }

        .form-submit {
            margin-top: 28px;
        }

        .form-submit .btn {
            background-color: var(--dark-blue);
            font-size: 1em;
            padding: 13px 50px;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        .form-submit .btn:hover {
            background-color: var(--light-blue);
        }

        .form-note {
            font-size: 0.8em;
            color: #888;
            margin-top: 12px;
            font-weight: 300;
        }

        /* ── Success message (shown after submit) ── */
        .form-success {
            display: none;
            text-align: center;
            padding: 40px 20px;
        }

        .form-success i {
            font-size: 3em;
            color: var(--dark-blue);
            margin-bottom: 16px;
        }

        .form-success h3 {
            font-size: 1.4em;
            font-weight: 400;
            color: var(--dark-blue);
            margin-bottom: 10px;
        }

        .form-success p {
            font-size: 0.95em;
            font-weight: 300;
            color: var(--dark-grey);
        }

        /* ── Sidebar ── */
        .contact-sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .sidebar-card {
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            padding: 24px 26px;
        }

        .sidebar-card h3 {
            font-size: 1em;
            font-weight: 700;
            color: var(--dark-blue);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e8e8e8;
        }

        .sidebar-card p {
            font-size: 0.88em;
            font-weight: 300;
            color: var(--dark-grey);
            line-height: 1.6;
            margin: 0;
        }

        .sidebar-card .stat-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .sidebar-card .stat-row:last-child {
            margin-bottom: 0;
        }

        .sidebar-stat-num {
            font-family: 'Times New Roman', Times, serif;
            font-size: 1.8em;
            font-weight: 800;
            color: var(--gold);
            min-width: 60px;
            line-height: 1;
        }

        .sidebar-stat-label {
            font-size: 0.82em;
            font-weight: 400;
            color: var(--dark-grey);
            line-height: 1.4;
        }

        .sidebar-social {
            display: flex;
            gap: 14px;
            margin-top: 14px;
        }

        .sidebar-social a {
            color: var(--dark-blue);
            font-size: 1.5em;
            transition: transform 0.2s ease, color 0.2s ease;
        }

        .sidebar-social a:hover {
            color: var(--light-blue);
            transform: translateY(-3px);
        }

        .sidebar-card .contact-detail {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 0.88em;
            font-weight: 300;
        }

        .sidebar-card .contact-detail i {
            color: var(--dark-blue);
            width: 16px;
            text-align: center;
        }

        .sidebar-card .contact-detail a {
            color: var(--dark-blue);
            text-decoration: underline;
        }

        /* ── Responsive ── */
        @media (max-width: 768px) {
            
        }




/* Tablets and under */

@media(max-width: 768px){

    .grid,
    .showcase .grid,
    .core .grid,
    .footer .grid-3{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr; 
    }


    .navbar .grid .logo{
        grid-row: 1 /span 1;
        grid-column: 1 / span 3;
        font-size: 1.5em;
    }

    .showcase-img{
    width:80%;
    top:0px;  
    justify-self: center;  
    }

    .showcase {
       padding-bottom: 00px;
    }

    .youtube .grid{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr; 
    }

    .showcase.img {
        margin:auto;
    }

    .youtube-heading{
    grid-column:1 /span 1;
    grid-row: 1 / span 1;
    }

    .youtube-image{
        grid-column:1 /span 1;
        grid-row: 3 / span 1;
          
    }
    
    .youtube-text{
        grid-column:1 /span 1;
        grid-row: 2 / span 1;
    }
    

   .footer .grid-3 {
        grid-template-columns: 1fr;
        justify-items: start;
       
   }

  
   

    .cred-bar {
        padding: 12px 20px;
     }
    .cred-bar__item {
        padding: 5px 14px;
    }
    .cred-bar__divider {
        display: none;
    }
    .cred-bar__inner {
        gap: 4px;
    }    

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        padding: 24px 20px;
    }

    .contact-hero h1 {
        font-size: 1.8em;
    }

        .sign-up-grid{
        display:grid;
        grid-template-columns: repeat(1, 1fr) ;
        grid-template-rows: auto 1fr;
        gap: 20px;   
    }

    .sign-up-grid .into-para {
        grid-column: 1 /Span 1;
        grid-row: 1 / span 1;
    }

    .sign-up-grid .whats-included {
        grid-column: 1 /  Span 1;
        grid-row: 3 / span 1;
    }

    .check-list-form{
        grid-column: 1 / Span 1;
        grid-row: 2 / span 1;
        text-align: center;
            
    }

}

/* Mobile */
@media(max-width: 500px) {

    .desktop-menu{
        display:none;
    }

    .mobile-menu{
        display:grid;
    }
    
    .mobile-menu button{
        color: var(--white);
        background-color: transparent;
        border:none;
        font-size: 1em;
        padding:0;
        margin:0;
        cursor: pointer;
        anchor-name: --menu-button;
    }

    /* [popover]{
    position-area: inline-end;
    
    } */

    #menu-popover{
        background-color: var(--light-blue);
        color: var(--white);
        border: none;
        position:absolute;
        position-anchor: menu-button;
        inset:unset;
        top: anchor(bottom);
        right: anchor(right);
        overflow:hidden;
    }

   
    #menu-popover:popover-open{
        display:grid;  
        text-align: end;
        padding:10px 30px;
    }

    #menu-popover a{
        padding:0;
        margin:0;
        line-height:2;
    }

    #menu-popover a:hover{
       filter: brightness(85%);
    }
    

    .navbar {
        height: 110px;
    }

    .navbar .grid{
        gap:10px;
    }

    .navbar .grid .logo{
    grid-column: 1 / span 3;
    font-size: 1.5em;
    

    
    }
    
    .navbar img{
        width:90px;
        height: auto;
        /* display: none; */
    }

    .navbar .grid nav{
    grid-column: 1 / span 3;
    justify-self:right;
    }

    .navbar a {
        padding:5px;
    }

    .showcase-text h1{
        font-size: 1.5em;
    }

    .showcase-text {
        animation: slideInFromTop 1s ease-in;
    }

    .showcase-img{
        animation:slideInFromBottom 1s ease-in;
    }

    .core-heading,
    .about-heading,
    .reviews-heading,
    .youtube-heading,
    .contact-heading{
        font-size:1.8em;
    }

    .showcase,
    .about,
    .youtube {
        text-align: center;
    }

    .reviews .grid {
        grid-template-columns: repeat(1, 1fr);
       
}

    .reviews .grid .card{
        grid-column: 1 / span 1;
}

.about .fex{
    flex-wrap: wrap;
}

}