:root{
    --primary-color: #801313;
    --primary-dark: #5f0e0e;
    --accent-color: #f5f5f5;
    --text-color: #333;
    --white: #ffffff;
    }
    body{
        font-family: 'Poppins', sans-serif;
        }
        nav ul{

            display:flex;
            align-items:center;
            gap:30px;
            
            }

            *{
                margin:0;
                padding:0;
                box-sizing:border-box;
                }
                
                body{
                font-family: 'Poppins', sans-serif;
                }
                
                
                /* ADD IT HERE */
                
                img{
                max-width:100%;
                height:auto;
                }
                
/* HAMBURGER */

.hamburger{
    display:none;
    cursor:pointer;
    }
    
    .hamburger span{
    display:block;
    width:25px;
    height:3px;
    background:#801313;
    margin:5px 0;
    }
    
    
    /* MOBILE */
    
    @media screen and (max-width:768px){
    
    nav ul{
    display:none;
    }
    
    .hamburger{
    display:block;
    }
    
    .nav-menu{
    position:absolute;
    top:80px;
    right:0;
    background:white;
    width:100%;
    display:none;
    padding:20px 0;
    }
    
    .nav-menu.active{
    display:block;
    }
    
    nav ul{
    display:flex;
    flex-direction:column;
    text-align:center;
    gap:20px;
    }
    
    }
.navbar{
        display:flex;
        justify-content:space-between;
        align-items:center;
        position:relative;
        
    
    padding:15px 10%;
    
    background:white;
    
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    
    position:sticky;
    top:0;
    
    z-index:1000;
    
    }
    nav a.active{
        color:#801313;
        font-weight:600;
        position:relative;
        }
        
        nav a.active::after{
        
        content:"";
        position:absolute;
        
        left:0;
        bottom:-5px;
        
        width:100%;
        height:2px;
        
        background:#801313;
        
        }
    
    /* LOGO */
    
.logo{
    
    display:flex;
    align-items:center;
    gap:10px;
    
    font-weight:600;
    font-size:20px;
    
    color:#ff5a5f;
    
    }
    
.logo img{
        height:50px;
        width:auto;
        }
    
    
    /* NAV LINKS */
    
    nav ul{
    
    display:flex;
    list-style:none;
    
    gap:30px;
    
    }
    
    nav a{
    
    text-decoration:none;
    color:#333;
    
    font-weight:500;
    
    transition:0.3s;
    
    }
    
    nav a:hover{
    
    color:#801313;
    
    }
    
    
    /* CTA BUTTON */
    
.nav-button{
    
    background:#801313;
    color:white;
    
    padding:10px 20px;
    
    border-radius:6px;
    
    text-decoration:none;
    
    transition:0.3s;
    
    }
    
.nav-button:hover{
    
    background:#5f0e0e;
    color:white
    
    }
.hero{

        height:90vh;
        
        background-image: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
        ),
        url("images/image.png");
        
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        
        display:flex;
        align-items:center;
        justify-content:center;
        
        color:white;
        text-align:center;
        padding:20px;
        
        }
        
        .primary-btn{

            background: var(--primary-color);
            color:white;
            
            padding:12px 25px;
            border-radius:6px;
            
            text-decoration:none;
            
            transition:0.3s;
            
            }
            
            .primary-btn:hover{
            
            background: var(--primary-dark);
            
            
        
        }
        
        
.about{
        
        padding:80px 10%;
        background:white;
        
        }
        
        .container{
        
        display:flex;
        align-items:center;
        gap:50px;
        
        }
        
.about-image img{
            max-width:400px;
            border-radius:10px;
            }
        
.secondary-btn{
                display:inline-block;
                margin-top:20px;
                padding:10px 20px;
                border:2px solid #801313;
                color:#801313;
                text-decoration:none;
                border-radius:6px;
                }
        .benefits,
        .who{
        
        padding:80px 10%;
        text-align:center;
        
        }
        
        
.cards{
        
        display:grid;
        
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        
        gap:30px;
        
        margin-top:40px;
        
        }
        
        
.card{
        
        background:white;
        padding:30px;
        
        border-radius:10px;
        
        box-shadow:0 5px 15px rgba(0,0,0,0.05);
        
        }
        
        
.cta{

            background: var(--primary-color);
            color:white;
            
            text-align:center;
            padding:80px 20px;
            
            }
        
        
        footer{
        
        background:#222;
        color:white;
        
        text-align:center;
        
        padding:20px;
        

        }
        @media (max-width: 768px) {
            .about-container {
              display: flex;
              flex-direction: column;
            }
          
            .about-text {
              order: 1;
            }
          
            .about-image {
              order: 2;
              margin-top: 20px;
            }
          }
            
            .about-image img{
            width:100%;
            max-width:350px;
            margin:auto;
            display:block;
            }
.footer{

                background:#111;
                color:white;
                
                padding:50px 10% 20px;
                
                }
                
                .footer-container{
                
                display:flex;
                justify-content:space-between;
                align-items:center;
                
                flex-wrap:wrap;
                
                gap:20px;
                
                }
                
                .footer h3{
                
                margin-bottom:10px;
                
                }
                
                .footer-contact p{
                
                margin:5px 0;
                
                }
                
                .footer-social a{
                
                color:white;
                font-size:20px;
                
                margin-right:15px;
                
                transition:0.3s;
                
                }
                
                .footer-social a:hover{
                
                color:#801313;
                
                }
                
                .footer-bottom{
                
                text-align:center;
                margin-top:30px;
                
                border-top:1px solid rgba(255,255,255,0.2);
                
                padding-top:20px;
                
                }
                .footer a {
                    text-decoration: underline;
                    color: #ddd;
                    }
                    
                    .footer a:hover {
                    color: #801313;
                    text-decoration: underline;
                    }
                    .footer-social a {
                        text-decoration: none;
                        }
                        .footer-social a:hover {
                            text-decoration: none;
                            }
                @media (max-width:768px){

                    .footer-container{
                    
                    flex-direction:column;
                    text-align:center;
                    
                    }
                    
                    }
.contact{

            padding:80px 10%;
            text-align:center;
                }
                        
            .contact h1{         
            margin-bottom:10px;
            color:#801313;
                }
                        
            .contact-cards{         
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:30px;
            margin-top:40px;
                }
                        
            .contact-card{      
            background:white;
            padding:40px;
            border-radius:10px;
            text-decoration:none;
            color:#333;
            box-shadow:0 5px 15px rgba(0,0,0,0.05);
            transition:0.3s;
                }
                        
            .contact-card:hover{
            transform:translateY(-5px);
            box-shadow:0 10px 20px rgba(0,0,0,0.1);
                        
                        }
                        
                        .contact-card h3{
                        
                        color:#801313;
                        
                        margin-bottom:10px;
                        
                        }
                        .contact-info ul {
                            list-style: none;
                            padding: 0;
                            }
                            
                            .contact-info li {
                            margin-bottom: 10px;
                            }
                            body {
                                opacity: 0;
                                transition: opacity 0.6s ease;;
                                }
                                
                                body.loaded {
                                opacity: 1;
                                }
.mentorship-hero{
                        padding:120px 10% 80px;
                        max-width:1200px;
                        margin:auto;
                                }
                                    
                        .mentorship-hero h1{
                        font-size:42px;
                        margin-bottom:20px;
                                }
                                    
                        .mentorship-hero p{
                        font-size:18px;
                        margin-bottom:30px;
                        max-width:600px;
                                }
                        .mentorship-section{
                        padding:80px 10%;
                        max-width:1200px;
                        margin:auto;
                                }
                        .cards{
                        display:grid;
                        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
                        gap:30px;
                        margin-top:40px;
                                }
                        .mentorship-section{
                        margin-bottom:40px;
                                }
                        .centered{
                        max-width:700px;
                                }
                        .mentorship-hero{
                        padding:50px 8%;
                        background:#f8f8f8;
                                }
                                                        
                        .hero-container{
                        display:flex;
                        align-items:center;
                        gap:40px;
                                }                                
                                                        
                        .hero-text{
                        flex:1;
                                }
                                                        
                        .hero-image{
                        flex:1;
                                }
                                                        
                        .hero-image img{
                        width:100%;
                        border-radius:12px;
                                }

/* Fix Mentorship Tools Layout */

.mentorship-tools .container {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    }
    
    @media (max-width: 768px) {
    
    .tools-header {
    text-align: center;
    }
    
    .tools-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    }
    
    .tool-card {
    width: 100%;
    }
    
    .affiliate-note {
    text-align: center;
    margin-top: 20px;
    }
    
    }

/* Mentorship Hero Mobile Fix */
@media (max-width:768px){

.hero-container{
flex-direction:column;
text-align:left;
}

.hero-image{
width:100%;
margin-top:20px;
}

.hero-image img{
width:100%;
max-width:none;
border-radius:12px;
}

}
                        .mentorship-section.alt{
                        background:#f8f8f8;
                        padding:50px 8%;
                        border-radius:12px;
                                                            }
                                                            .card{
                                                                background:white;
                                                                padding:30px;
                                                                border-radius:12px;
                                                                box-shadow:0 5px 15px rgba(0,0,0,0.05);
                                                                }
                                                                .card i{
                                                                    color:#801313;
                                                                    margin-right:8px;
                                                                    }
                                                                    .cta-container{
                                                                        max-width:600px;
                                                                        margin:auto;
                                                                        text-align:center;
                                                                        }
                                                                        
                                                                        .cta p{
                                                                        margin:15px 0 25px;
                                                                        }
 /* WHAT YOU'LL LEARN SECTION IMPROVEMENT */

.benefits {
    background: #f8f8f8;
    padding: 60px 10%;
    }
    
    .card {
    transition: 0.3s ease;
    }
    
    .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    }
    
    /* Section title styling */
    
    .benefits h2 {
    margin-bottom: 10px;
    }
    
    .benefits h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #801313;
    margin: 15px auto 0;
    }
/* ABOUT PAGE */

.about-hero{
padding:140px 10%;
background-image: linear-gradient(
rgba(0,0,0,0.75),
rgba(0,0,0,0.75)
),
url("images/shady3.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
color:white;
position:relative;
}
    
    .about-text{
    flex:1;

    }
    
    .about-text h1{
    font-size:42px;
    margin-bottom:20px;
    margin: 0 auto;
    text-align: center;
}
    
    .about-text p{
    font-size:18px;
    line-height:1.7;
    color:#555;
    }
    
    .about-image{
    flex:1;
    }
    
    .about-image img{
    width:100%;
    border-radius:12px;
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
    }
    
    
    /* EXPERIENCE */
    
    .about-experience{
    padding:80px 10%;
    text-align:center;
    background:#f8f8f8;
    }
    
    .experience-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    margin-top:40px;
    }
    
    .experience-cards .card i{
    font-size:28px;
    color:#801313;
    margin-bottom:15px;
    }
    
    
    /* CTA */
    
    .about-cta{
    text-align:center;
    padding:80px 10%;
    background:white;
    }
    
    .about-cta h2{
    margin-bottom:25px;
    }
    
    
    /* MOBILE */
    
    @media (max-width:768px){
    
    .about-container{
    flex-direction:column;
    text-align:center;
    }
    
    .about-text h1{
    font-size:32px;
    }
    
    }
/* ABOUT STORY */

.about-story {
    padding: 80px 10%;
    background: #ffffff;
    }
    
    .about-story-container {
    max-width: 900px;
    margin: auto;
    text-align: center;
    }
    
    .about-story h2 {
    font-size: 32px;
    margin-bottom: 25px;
    position: relative;
    }
    
    .about-story h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #801313;
    margin: 15px auto 0;
    }
    
    .about-story p {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    }
    
    
    /* MOBILE */
    
    @media (max-width: 768px) {
    
    .about-story {
    padding: 60px 20px;
    }
    
    .about-story h2 {
    font-size: 26px;
    }
    
    .about-story p {
    font-size: 16px;
    }
    
    }
    .mentorship-tools {
        padding: 80px 20px;
        background: #fafafa;
      }
      
      .tools-header {
        text-align: center;
        margin-bottom: 50px;
      }
      
      .tools-header h2 {
        font-size: 32px;
        margin-bottom: 10px;
      }
      
      .tools-header p {
        color: #666;
      }
      
      .tools-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
      }
      
      .tool-card {
        background: white;
        padding: 35px 25px;
        border-radius: 14px;
        text-align: center;
        transition: 0.3s ease;
        border: 1px solid #eee;
      
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      
      .tool-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
      }
      
      .tool-icon {
        font-size: 28px;
        margin-bottom: 15px;
      }
      
      .tool-card h3 {
        margin-bottom: 10px;
      }
      
      .tool-card p {
        color: #666;
        margin-bottom: 20px;
        flex-grow: 1;
      }
      
      .tool-btn {
        display: inline-block;
        padding: 10px 20px;
        background: #111;
        color: white;
        border-radius: 8px;
        text-decoration: none;
        transition: 0.3s;
      }
      
      .tool-btn:hover {
        background: #8b0000;
      }
      
      .affiliate-note {
        text-align: center;
        margin-top: 40px;
        font-size: 13px;
        color: #888;
      }
      
      
      /* Mobile */
      
      @media (max-width: 900px) {
        .tools-grid {
          grid-template-columns: 1fr;
        }
      }
      .about-section {
        padding: 80px 20px;
      }
      
      .about-container {
        display: flex;
        align-items: center;
        gap: 60px;
      }
      
      .about-text {
        flex: 1;
      }
      
      .about-image {
        flex: 1;
      }
      
      .about-image img {
        width: 100%;
        border-radius: 16px;
      }
      
      .learn-btn {
        display: inline-block;
        margin-top: 20px;
        padding: 12px 24px;
        border: 2px solid #8b0000;
        color: #8b0000;
        border-radius: 8px;
        text-decoration: none;
      }
      @media (max-width: 768px) {

        .about-container {
          flex-direction: column;
          text-align: center;
        }
      
        .about-text {
          order: 1;
        }
      
        .about-image {
          order: 2;
          margin-top: 20px;
        }
      
      }