/* ==========================================
   RESET
========================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    color: #1f1f1f;
    line-height: 1.7;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

ul {
    list-style: none;
}

/* ==========================================
   VARIABLES
========================================== */

:root {

    --primary: #D4A017;
    --primary-dark: #B88905;

    --text: #1F1F1F;
    --text-light: #5F5F5F;

    --bg: #FFFFFF;
    --section: #FAFAFA;

    --border: #E8E8E8;

    --radius: 18px;

    --shadow:
        0 12px 35px rgba(0,0,0,.06);

    --max-width: 1180px;

}

/* ==========================================
   LAYOUT
========================================== */

.container{

    width:92%;
    max-width:var(--max-width);
    margin:auto;

}

section{

    padding:100px 0;

}

/* ==========================================
   TYPOGRAPHY
========================================== */

h1{

    font-size:4rem;
    line-height:1.1;
    font-weight:800;

}

h2{

    font-size:2.8rem;
    line-height:1.2;
    margin-bottom:20px;

}

h3{

    font-size:1.4rem;
    margin-bottom:15px;

}

p{

    color:var(--text-light);
    font-size:1.1rem;

}

/* ==========================================
   BUTTONS
========================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    background:var(--primary);

    color:#fff;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.btn:hover{

    background:var(--primary-dark);
    transform:translateY(-3px);

}

/* ==========================================
   CARDS
========================================== */

.card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

/* ==========================================
   SECTION TITLE
========================================== */

.section-title{

    max-width:760px;
    margin:0 auto 60px;
    text-align:center;

}

.section-title p{

    margin-top:15px;

}

/* ==========================================
   HERO
========================================== */

#hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    background:#fff;

}

.hero-container{

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;

}

.hero-tag{

    display:inline-block;

    background:#FFF7E2;

    color:var(--primary-dark);

    padding:10px 20px;

    border-radius:50px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:25px;

}

.hero-content h1{

    margin-bottom:30px;

}

.hero-description{

    max-width:620px;

    margin-bottom:40px;

}

.hero-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-bottom:45px;

}

.info-card{

    padding:24px;

    border:1px solid var(--border);

    border-radius:16px;

    text-align:center;

}

.info-card h3{

    font-size:1rem;

    margin-bottom:8px;

}

.info-card p{

    font-size:.95rem;

}

.hero-trust{

    margin-top:30px;

    font-size:.95rem;

    color:var(--text-light);

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:120%;
    max-width:620px;
    height:auto;

    border-radius:28px;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.floating-card{

    position:absolute;

    background:#fff;

    padding:14px 18px;

    border-radius:16px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    width:180px;

}

.floating-card h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:6px;

}

.floating-card p{

    font-size:.9rem;

    line-height:1.4;

}

.top{

    top: 25px;
    left: -110px;
    z-index: 10;

}

.bottom{

    bottom: -45px;
    right: -60px;

    width: 165px;
    max-width: 165px;

    padding: 12px 16px;

}

/* ==========================================
   THE PROBLEM
========================================== */

#about-workshop{

    background:var(--section);

}

.problem-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.problem-card{

    padding:35px;

    transition:.3s;

}

.problem-card:hover{

    transform:translateY(-8px);

}

.problem-card h3{

    margin-bottom:15px;

    line-height:1.35;

}

/* ==========================================
   WHO SHOULD ATTEND
========================================== */

#who-should-attend{

    background:#ffffff;

}

.attend-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.attend-card{

    padding:35px;
    text-align:center;
    transition:.3s;

}

.attend-card:hover{

    transform:translateY(-8px);

}

.attend-card .icon{

    width:70px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 25px;

    font-size:2rem;

    background:#FFF7E2;

    border-radius:50%;

}

.attend-card h3{

    margin-bottom:15px;

}

/* ==========================================
   TRANSFORMATION
========================================== */

.transformation-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;

}

.transform-card{

    padding:40px;

}

.transform-card span{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    font-size:1.6rem;

    margin-bottom:25px;

}

.transform-card h3{

    margin-bottom:18px;

}

/* ==========================================
   MEET YOUR COACH
========================================== */

#about-coach{

    background:#fff;

}

.coach-container{

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:center;

}

.coach-image img{

    width:100%;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.10);

}

.coach-tag{

    display:inline-block;

    padding:10px 20px;

    background:#FFF7E2;

    color:var(--primary-dark);

    border-radius:50px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:25px;

}

.coach-content h2{

    margin-bottom:25px;

}

.coach-content p{

    margin-bottom:20px;

}

.coach-stats{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

    margin-top:35px;

}

.stat{

    text-align:center;

    padding:25px;

    border:1px solid var(--border);

    border-radius:18px;

}

.stat h3{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:8px;

}

/* ==========================================
   WORKSHOP DETAILS
========================================== */

#details{

    background:var(--section);

}

.details-card{

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:30px;

    padding:50px;

}

.detail-item{

    text-align:center;

    padding:20px;

}

.detail-item h4{

    color:var(--primary-dark);

    margin-bottom:10px;

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:1px;

}

.detail-item p{

    font-size:1.15rem;

    color:var(--text);

    font-weight:600;

}

.details-cta{

    text-align:center;

    margin-top:50px;

}

/* ==========================================
   TESTIMONIALS
========================================== */

#testimonials{

    background:#ffffff;

}

.testimonial-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.testimonial-card{

    padding:40px;

    position:relative;

}

.testimonial-card::before{

    content:"“";

    font-size:5rem;

    color:var(--primary);

    line-height:1;

    display:block;

    margin-bottom:20px;

}

.testimonial-text{

    margin-bottom:35px;

    font-style:italic;

}

.testimonial-author h4{

    margin-bottom:5px;

}

.testimonial-author span{

    color:var(--text-light);

    font-size:.9rem;

}

/* ==========================================
   FAQ
========================================== */

#faq{

    background:var(--section);

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    padding:35px;

    margin-bottom:25px;

}

.faq-item:last-child{

    margin-bottom:0;

}

.faq-item h3{

    margin-bottom:15px;

}

/* ==========================================
   REGISTRATION
========================================== */

#registration{

    background:#ffffff;

}

.registration-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}

.price-card{

    margin-top:35px;

    background:#FFF8E6;

    padding:35px;

    border-radius:20px;

    border:1px solid #F2D58A;

}

.price-card h4{

    margin-bottom:15px;

}

.price{

    font-size:3rem;

    color:var(--primary);

    font-weight:700;

    margin-bottom:25px;

}

.price-card ul{

    list-style:none;

    padding:0;

}

.price-card li{

    margin-bottom:15px;

}

.registration-form{

    padding:45px;

}

.registration-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.registration-form input,
.registration-form select{

    width:100%;

    padding:18px;

    border:1px solid var(--border);

    border-radius:12px;

    font-size:1rem;

    font-family:inherit;

    box-sizing:border-box;

}

.registration-form select{

    font-weight:400;

    color:#666;

}

.registration-form input:focus,
.registration-form select:focus{

    outline:none;

    border-color:var(--primary);

}

.registration-form select:valid{

    color:#222;

}

.registration-form .btn{

    width:100%;

    margin-top:10px;

}

/* ==========================================
   FOOTER
========================================== */

#footer {
    background: #1F1F1F !important;
    color: #ffffff !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 45px;
}

.footer-left h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 20px;
}

.footer-left p {
    color: rgba(255,255,255,.72);
    line-height: 1.8;
    max-width: 680px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer-right a,
.footer-right span {
    color: #B58B35;
    text-decoration: none;
    font-size: 1.05rem;
    transition: .3s;
}

.footer-right a:hover {
    opacity: .75;
}

.footer-location {
    color: #B58B35;
    opacity: .8;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 35px;
    margin-bottom: 25px;
}

.footer-social a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: .9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 18px;
    color: rgba(255,255,255,.45);
    font-size: .85rem;
}

/* ==========================================
   CONTACT LINKS & SOCIAL LINKS
========================================== */

/* Contact Strip */

.contact-strip{

    padding:50px 0;

    background:#FFF8E6;

}

.contact-strip-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.contact-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.btn-outline{

    background:#ffffff;

    color:var(--primary-dark);

    border:2px solid var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#ffffff;

}


/* Footer Contact Links */

.footer-right p{

    margin-bottom:12px;

}

.footer-right a{

    color:#d0d0d0;

    text-decoration:none;

    transition:.3s;

}

.footer-right a:hover{

    color:var(--primary);

}


/* Social Links */

.social-links{

    margin-top:25px;

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.social-links a{

    color:#d0d0d0;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}

.social-links a:hover{

    color:var(--primary);

}

/* ==========================================
   FLOATING RESERVE BUTTON
========================================== */

#floating-register-btn{

    position:fixed;

    right:30px;

    bottom:30px;

    background:var(--primary);

    color:#ffffff;

    padding:16px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    font-size:1rem;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    z-index:9999;

    transition:.3s;

    animation:pulse 2s infinite;

}

#floating-register-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(212,160,23,.55);

    }

    70%{

        box-shadow:0 0 0 18px rgba(212,160,23,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(212,160,23,0);

    }
    
}
    
/* MAIN WEBSITE BUTTON */

#floating-home-btn{
    position:fixed;
    bottom:90px;
    right:30px;

    width:170px;
    box-sizing:border-box;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 22px;

    background:#ffffff;
    color:#B58B35;

    border:1px solid #B58B35;
    border-radius:30px;

    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:500;

    text-decoration:none;

    box-shadow:0 6px 20px rgba(0,0,0,.12);

    z-index:9998;

    transition:all .25s ease;
}

#floating-home-btn:hover{
    background:#B58B35;
    color:#ffffff;
}