/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@600&family=Poppins:wght@500;600;700&display=swap');

/* CUSTOM PROPERTY */
:root{
    /* colors */
    --body-f-clr:#708090;
    --white-clr:#fff;
    --primary-clr-1:#ff7f50;
    --primary-clr-2:#fb4604;
    --primary-clr-3:#f06a3959;
    --black-clr:#0c0c0c;
    --dark-clr:#1f1f1f;
    --green-clr:green;
    --yellow-clr:rgb(255, 196, 0);
    --slate-gray:#f5f6ff;
    /* Typography */
    --ff-onest:"Onest", sans-serif;
    --ff-poppins:'poppins',sans-serif;
    /* transition */
    --transition-1:0.3s ease;
    --transition-2:0.5s ease-out;
    /* radius */
    --radius-1:0.6rem;
    --radius-pill:2.5rem;
    --radius-full:50%;
}
/* ===================================   RESET  ==================================== */

/* understood✅ */
*,::after,::before
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* understood✅ */
html
{
    font-family:var(--ff-poppins) ;
    font-size: 62.5%;
    scroll-behavior: smooth;
}
/* understood✅ */
body
{
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--black-clr);
    background: var(--white-clr);
}
/* understood✅ */
li
{
    list-style: none;
}
/* understood✅ */
a
{
    text-decoration: none;
    /* color: inherit; */
    display: block;
}
/* understood✅ */
img,button
{
    display: block;
}


/* This code ensures that images resize properly while maintaining a good visual appearance. Let's break it down:

1️⃣ max-width: 100%;
This makes sure the image never exceeds its container’s width.

If the container is smaller than the image, the image shrinks to fit.

If the container is larger, the image keeps its original size.

Prevents images from overflowing outside their parent.

2️⃣ height: 100%;
The image’s height will be 100% of its container's height.

Can be problematic if the container’s height isn’t explicitly set (image might stretch).

3️⃣ object-fit: cover;
Ensures the image fills the container without distortion.

Crops the image if necessary to maintain its aspect ratio.

Prevents stretching or squishing.

Example:
If an image is landscape (wide) but the container is square, object-fit: cover; will crop the sides instead of stretching the image.

When Should You Use This?
✅ Perfect for responsive images (especially in cards, profile pictures, hero banners).
✅ Ensures images look consistent regardless of different screen sizes.
✅ Prevents distortion in grid-based designs.

Potential Issue 🚨
If the container has no fixed height, height: 100% might cause the image to collapse or behave unpredictably.

To fix this, make sure the parent container has a defined height

Alright, let's break this down with a fun analogy! 🚀  

### **Imagine You’re Framing a Picture for a Wall** 🎨🖼️  

Your **image (`img`)** is like a **photograph** 📸. Your **container** (the parent element) is like a **photo frame** 🖼️. Now, let's see how each CSS property works in this analogy:  

---

### **1️⃣ `max-width: 100%;` → The Photo Shouldn't Be Wider Than the Frame**  
Think of **max-width: 100%** like saying:  
*"Hey, photo! You can't be wider than the frame. If you're too big, shrink down to fit!"*  
- This keeps the image **inside the frame** without overflowing.
- But if the image is **smaller**, it won't stretch (which is good).

---

### **2️⃣ `height: 100%;` → The Photo Must Fill the Frame’s Height**  
This is like saying:  
*"Make sure the photo fills the frame's height completely, no empty spaces at the top or bottom!"*  
- If the frame is **tall**, the photo stretches to match.
- If the frame is **short**, the photo might get squeezed.

🚨 **Potential issue**: If the frame **doesn’t have a set height**, the photo might act weird (like trying to fit into an invisible frame).

---

### **3️⃣ `object-fit: cover;` → Cropping to Fit the Frame Nicely**  
Now, imagine your photo is a **wide landscape** but your frame is **a perfect square**.  
If you just stretch it to fit, it might look **weird** (like a distorted face 😵).  

`object-fit: cover;` is like telling a **photo editor**:  
*"Crop the edges if needed, but make sure the main subject stays visible!"*  
- This keeps the photo **proportional** (no weird stretching).
- But parts of the photo **might get cut off** (like how a square frame crops a wide landscape).  

---

### **Real-World Example**  
Think of Instagram profile pictures!  
- The original photo might be a full-body shot (rectangle).  
- But Instagram **crops it into a perfect circle** using `object-fit: cover;`.  
- This ensures your **face stays centered** instead of squishing into an oval.  

---

### **Final Verdict 🎯**  
This CSS makes sure your **images fit neatly into their containers, without looking weird**—just like making sure a photo looks great inside a frame! 📸🖼️✨  

Hope that analogy makes it crystal clear! 😎🔥


.*/
img
{
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Understood✅ */
button,input
{
    background: none;
    border: none;
    outline: none;
    font: inherit;
}

/* Understood✅ */

button
{
    cursor: pointer;
}

/* REUSABLE CLASSES */
.container
{
/* padding-inline applies padding only to the left and right (inline axis). */
    padding-inline: 1.6rem;  
/* margin-inline: auto; automatically distributes equal margin on both the left and right sides. */
    margin-inline: auto;
}

.btn
{
  border: 1px solid rgba(0,0,0,0.4);
  padding: 1.2rem 2.8rem ;
  border-radius: var(--radius-1);
  font-weight: 600;
  transition: var(--transition-1);
}


.btn:is(:hover, :focus)
{
    border-color: var(--primary-clr-2);
    color: var(--primary-clr-2);
}



/* HEADER */
/* understood✅ */
.header
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-block: 2rem;
    background: var(--white-clr);
    z-index: 1;
}


.header.active
{
    box-shadow: 0 2px 0 rgba(0,0,0,0.2); 
    position: fixed;
    animation: slideIn 0.5s fowards;
}


@keyframes slideIn
{
    0%
    {
        transform: translateY(-100%) ;
    }

    100%
    {
        transform: translateY(0%)
    }
}





/* understood✅ */
.header .container
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}




.header .container .logo
{
    display: flex;
    align-items: center;
    gap: 1.5rem;
}






.header .container .logo .text
{
    color: var(--black-clr);
    font-weight: 600;
}




/* understood✅ */
.open-menu,
.close-menu
{
    font-size: 3rem;
}

.navbar
{
    position: fixed;/*When an element has position: fixed;, it stays in place on the screen no matter how much you scroll. Unlike absolute positioning, it doesn't move with the page—it’s locked to the viewport (the visible screen area).   */
    top: 0;
    left: 0;
    background: var(--white-clr);
    max-width: 360px;
    width: 100%;
    height: 100vh;
    padding: 2.6rem 2rem;
    transform: translateX(-370px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    transition: var(--transition-2);
}


/* Show menu */
.navbar.active
{
    transform: translateX(0);
}

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

.navbar .nav__list
{
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}


.navbar .nav__list .nav__link
{
    /* background: red; */
    display: inline-block;
    color: var(--black-clr);
    transition: var(--transition-1);
    font-size: 1.8rem;
    font-weight: 500;
}

.navbar .nav__list .nav__link:hover
{
  color: var(--primary-clr-2);
}


.navbar .btn-wrapper
{
    margin-top: auto;
    font-size: 1.8rem;
    font-weight: 500;
    border-top: 1px solid rgba(0,0,0,0.4);
    display: flex;
    justify-content: space-around;
    padding-top: 2rem;
   
}

.navbar .btn-wrapper .btn
{
    color: var(--black-clr);
}

.navbar .btn-wrapper .btn:hover
{
    color: var(--primary-clr-2);
}

.navbar .btn-wrapper .btn-primary
{
    background: var(--primary-clr-2);
    border-radius: var(--radius-1);
    padding: 1.3rem;
    color: var(--white-clr);
    transition: var(--transition-1);
    font-weight: 600;
    border-color: transparent;
}











.navbar .btn-wrapper .btn-primary:hover
{
    color: var(--dark-clr);
     background: transparent; 
    color: var(--primary-clr-2);
    border: 1.5px solid var(--primary-clr-2); 
}

.overlay
{
    background-color: var(--dark-clr);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: var(--transition-2);
}

.overlay.active
{
    opacity: 0.7;
    pointer-events: all;
}



/* =============================== HERO SECTION ============================= */
.hero
{
    padding-top: 12rem;
}

.hero .container
{
    display: grid;
    gap: 4rem;
}

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

.hero-subtitle
{
    background: var(--primary-clr-3);
    display: inline-block;
    font-size: 1.4rem;
    border-radius: var(--radius-pill);
    padding: 0.5rem 2rem;
    margin-bottom: 2rem;
}

.hero-title
{
    font-size: 4.5rem;
    font-family: var(--ff-onest);
    /* text-align: justify; */
    line-height: 1.3;
}

.hero-text
{
    margin-block: 1.6rem 2.6rem ;
}

.hero-btn
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #fb4604;
    margin-inline: auto;
    padding: 0.8rem 2.5rem;
    border-radius: var(--radius-1);
    
}

.hero-btn a
{
    color: var(--white-clr);
    font-weight: 600;
    font-size: 1.9rem;
    transition: var(--transition-1);
}

.hero-btn a:is(:hover, :focus)
{
font-size: 2rem;
}

.hero-banner
{

    padding-left: 3rem;
    margin-top: 1.5rem;
}





/* ================================ ACADEMIC PROGRAMMES =========================== */
.categories
{
    padding-block: 9rem 6rem ;
}

.categories .container
{
    display: grid;
    gap: 4rem;
}

.categories-content .subtitle
{
    font-family: var(--ff-onest);
    font-size: 3.5rem;
    /* text-align: center; */
    font-weight: 600;
    
}

.categories .container .categories-content .title
{
    font-family: var(--ff-onest);
    font-weight: 700;
}

.categories .container .categories-content .categories-text
{
    margin-block: 1.4rem 2rem;
}


/* =================== Courses card ================= */
.courses__card
{
    background: var(--primary-clr-2);
    display: flex;
    padding: 1.3rem;
    border-radius: var(--radius-1);
    gap: 2rem;
    transition: var(--transition-2);
    color: var(--white-clr);
}



.course__name
{
    font-size: 2.4rem;
    font-family: var(--ff-onest);
    
}

.courses__grades, .courses__period
{
    font-family: var(--ff-onest);
}



.categories .card-wrapper
{
    display: grid;
    gap: 4rem;
}


.courses__card img
{
    object-fit: contain;
} 




.courses__card:hover
{
    background: var(--primary-clr-1);
    color: var(--black-clr);
}



/* =================================   ABOUT   =================================== */
.about
{
    padding-top: 2rem;
}


.about-title .title
{
    font-size:4rem;
    font-family: var(--ff-onest);
    font-weight: 700;
}


.about-title img
{
    padding-block: 3rem;
    border-radius: 0 10rem 0 10rem;
}


.about-title .text
{
    margin-block: 1.3rem 2.6rem;
}


.about-title button a
{
    display: inline-block;
    background: var(--primary-clr-2);
    padding: 1.1rem 2rem;
    border-radius: var(--radius-1);
    margin-top: 2rem;
   
}

.about-title a
{
    color: var(--white-clr);
    font-weight: 600;
    font-size: 1.8rem;
    transition: var(--transition-1);
}

.about-title a:hover
{
    font-size: 1.9rem;
}
























/* ================================== MISSION & VISION ============================ */
.mission
{
    padding-block: 3rem;
}



.mission .title
{
    font-size:4rem;
    font-family: var(--ff-onest);
    font-weight: 700;
    text-align: center;
}


.mission img
{
    padding-block: 3rem;
    border-radius: 10rem 0 10rem 0;
}


.mission .text
{
    margin-block: 1.3rem 2.6rem;
}






















/* =================================================== VISION ============================================ */
.mission
{
    padding-block: 3rem;
}


.vision .title
{
    font-size:4rem;
    font-family: var(--ff-onest);
    font-weight: 700;
    text-align: center;
}

.vision img
{
    padding-block: 3rem;
    border-radius: 10rem 10rem 10rem 10rem;
}


.vision .text
{
    margin-block: 1.3rem 2.6rem;
    text-align: center;
}

























/* ==========================================================      WRAPPERS    ================================================ */
.wrapper .about-banner .subtitle
{
    font-family: var(--ff-onest);
    margin-bottom: 2rem;
    font-size: 5rem;
    font-weight: 700;
    padding-block: 2rem;
}




 .about-content .about-banner-image
{
    border-radius: 0 10rem 0 10rem;
    
}


.about .wrapper
{
    display: grid;
    gap: 2rem;
}


.wrapper .about-content
{
    display: grid;
    gap: 2rem;
}


.wrapper .about-content .title
{
    font-size: 4rem;
    font-family: var(--ff-onest);
    font-weight: 700;
    margin-top: 2rem;
}


.stats-wrapper 
{
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

/* Center items inside each stat */
.stat 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding-block: 2.5rem;
}

.stat h3
{
    font-size: 3.5rem;
    font-weight: 600;
    
}

.stat p
{
    font-size: 3.5rem;
    font-weight: 600;
    margin-top: .5rem;
}

.stat img
{
    object-fit: contain;
    display: inline;
}




















/* ========================== NEWS SECTION ============================ */
.blog-content
{
  padding-block: 4rem;
}


.blog-title .title
{
    font-family: var(--ff-onest);
    font-size: 3.5rem;
    /* text-align: center; */
    display:block;
    /* background: var(--primary-clr-3);  */
    border-radius: var(--radius-1);
    margin-bottom: 4rem;
}

.row
{
    display: flex;
    flex-direction: column;
    row-gap: 6rem;
}

.blog-left
{
    flex-basis:65% ;
    background: var(--primary-clr-3);
    padding: 1rem 2rem;
    border-radius: var(--radius-1);
    transition: var(--transition-1);
}

.blog-left:hover
{
    background: var(--primary-clr-2);
    color: var(--white-clr);
}


.blog-left img
{
    width: 90%;
}


.blog-left h2
{
    font-family: var(--ff-onest);
    font-size: 2.4rem;
    /* margin: 10px 0; */
}

.blog-left p
{
    font-weight: lighter;
   font-family: var(--ff-poppins);
   margin: 1rem ;
}


.blog-left .btn a
{
    color: black;
}


.blog-left .btn a:hover
{
    color: var(--white-clr);
}






















/* ====================================== CTA ===================================== */
.cta
{
    padding-block: 6rem;
    background: var(--primary-clr-3);
    text-align: center;
}

.cta .title
{
    font-family: var(--ff-onest);
    font-size:5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}


.cta .input-field 
{
    border: 1px solid rgba(0,0,0,0.4);
    background-color:var(--white-clr) ;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    width: 100%;
    max-width: 40rem;
    border-radius: var(--radius-pill);
    padding: 0.4rem;
    margin-top: 4rem;
    margin-inline: auto;
}


.cta .input-field input
{
 /* background-color: red; */
 height: 100%;
 border-radius: inherit;
 flex-grow: 1;
 padding-inline: 2rem;
}


.cta .subscribe-btn 
{
    background: var(--primary-clr-2);
    width:4rem ;
    height: 4rem;
    border-radius: var(--radius-full);
    color: white;
    font-size: 2rem;
}
















/* ===============================     FOOTER     ==================================== */
.footer
{
    padding-block: 8rem 3rem;
}


.footer-top
{
    display: grid;
    gap: 4rem;
}


.footer-top .footer-content .logo
{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-top .footer-content .logo .text
{
    color: var(--black-clr);
    font-weight: 600;
}



.footer-text
{
    margin-block:2rem ;
    max-width: 40ch;
    font-family: var(--ff-onest);
}

.footer .social-links
{
    display: flex;
    gap: 2rem;
    align-items: start;
    font-size: 3.5rem;
    
}


.footer .social-links a
{
    color: var(--black-clr);
    transition: var(--transition-1);
}


.footer .social-links a:hover
{
    color: var(--primary-clr-2);
}


.footer-list p
{
    color: var(--primary-clr-2);
    font-size: 1.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}


.footer-list a
{
    color: var(--black-clr);
    margin-block: .5rem;
    display: inline-block;
    transition: var(--transition-1);
}


.footer-list a:hover
{
    font-size:1.7rem ;
}


.copyright-info
{
    margin-top: 6rem;
    text-align: center;
}

/* ============================== WHATSAPP BUTTON ======================= */

.top-btn
{
    position: fixed;
    bottom: 4rem;
    right: 3rem;
    /* animation: pulse 3s infinite; */
    border-radius: var(--radius-full);
    opacity: 0;
    visibility: hiden;
}



.top-btn.active
{
    opacity: 1;
    visibility: visible;
    transition: var(--transition-2);
}


/* ================================     MEDIA QUERIES    ================================= */


@media (min-width: 575px )
{
    .container
    {
        max-width: 520px;
        width: 100%;
    }

    .categories .card-wrapper
    {
        grid-template-columns:  1fr;
    }


    .header .container .logo
    {
        gap: .5rem;
    }

}


@media (min-width:768px )
{
    .container
    {
        max-width: 760px;
    }

    .hero-text
    {
        max-width: 50ch;
        margin-inline: auto;
    }

    .hero-content .hero-title
    {
        font-size: 7rem;
    }

    .hero-content .hero-text{
        font-size: 2.1rem;
    }




    .categories-content .categories-text
    {
        max-width: 70ch;
        /* font-size: 2rem; */
    }

    .categories-content .subtitle
    {
        font-size: 5rem;
    }




    .categories-text
    {
        max-width: 40ch;
        /* margin-inline: auto; */
    }

    .courses__card
    {
        gap: 3rem;
    }


    .courses__card 
    {
        padding: 3rem 1.5rem;
        
    }


     .course__name
    {
        font-size: 3.5rem;
        line-height: 1.3;
    }

    .about-title .title
    {
        font-size: 6rem;
    }

    .about-title button
    {
        padding-block: 3rem;
    }


   .about-title .text
   {
    
    font-size: 2.1rem;
   }

   .about-title .extra-text
   {
    
    font-size: 2.1rem;
   }


   .mission .text
   {
    font-size: 2.1rem;
   }

   .vision .text
   {
    font-size: 2.1rem;
   }

   .about-content .text
   {
    font-size: 2.1rem;
    margin-bottom: 5rem;
   }




    .blog-title .text
    {
        font-size: 2.1rem;
        margin: 1rem 0;
    }


    .blog-title .title
    {
        font-size: 5rem;
    }


    .footer-top
    {
        grid-template-columns: 1fr 1fr;
        gap: 10rem;
    }

    .copyright-info
    {
        text-align: center;
        /* margin-top: 4rem; */
        /* margin-left: 17rem; */
    }

}

@media (min-width: 992px)
{
     .container
     {
        max-width: 970px;
     }

     .hero-content .hero-title
     {
        font-size: 9rem;
     }
     
     .categories .container .categories-content .subtitle
     {
        font-size: 6rem;
     }


     .about-title .title
        {
            font-size: 6rem;
        }


        .about-title button 
        {
           margin-top: -80px;
        } 
        







    .mission .title
        {
            font-size: 6rem;
        }

    .vision .title
        {
            font-size: 6rem;
        }



    .wrapper .about-banner .subtitle
    {
        font-size: 6rem;
    }

    .about-content .stats-wrapper .stat p
    {
        font-size: 4rem;
    }

    .navbar .wrapper, .open-menu, .overlay
     {
        display: none;
     }


     .navbar, .navbar.active
     {
        all: unset;
        display: flex;
        flex-grow: 1;
        justify-content: space-between;
        align-items: center;
     }


     .navbar .nav__list
     {
        flex-direction: row ;
        margin-top: 0;
        margin-inline: auto;
        gap: 3rem;
     }

     .navbar .btn-wrapper
     {
        all: unset;
        display: flex;
        gap: 1.5rem;
     }



     .hero, .categories
     {
        padding-top: 15rem;
     }
     
}

@media (min-width: 1200px)
{
    .container
    {
        max-width: 1150px;
    }
   
    .hero .container .hero-title
    {
        font-size: 6.5rem;
        line-height: 1.1;
        /* font-weight: 00; */
    }
      
    .hero .container .hero-title br
    {
        display: none;
    }


    .hero .container
    {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .hero .container .hero-content .hero-text
    {
        font-size: 1.8rem;
    }

    .hero .container .hero-content
    {
        text-align: left;
    }
   
    .hero .container .hero-content .hero-btn
    {
        margin-inline: 0;
    }


    .hero .container .hero-content .hero-text
    {
        max-width: unset;
    }




    .about-title .title
    {
        max-width: 40ch;
        margin-inline: auto;
        text-align: center;
        font-size: 9rem;
        margin-bottom: 4rem;
    }

    .about-title .wrapper
    {
        display: grid;
        grid-template-columns: auto 1fr; /* Image takes 1 part, text takes 1.5 parts */
        gap: 50px;
        align-items: start;
    }

    .about-title .wrapper img
    {
        
        width: 100%; /* Ensures image fits within its grid cell */
        max-width: 1000px; /* Prevents it from growing too big */
        height: auto; /* Maintains aspect ratio */
        object-fit: cover; /* Prevents distortion */
    
        
    }

    .about-title .wrapper .text
    {
        font-size: 1.8rem;
        /* margin-top: 2rem; */
        /* padding-block: 3rem; */
    }


    .about-title .wrapper .text button
    {
        margin-top: 2rem;
        
    }

    .about-title .extra-text
    {
        font-size: 1.8rem;
        margin-bottom: 6rem;
    }



    
    .blog-title .title
    {
        font-size: 7rem;
    }


}