* {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     text-decoration: none;
     list-style: none;
     box-sizing: border-box;
 }

 :root {
    --color-primary: #4CAF50; /* Soft Green */
    --color-success: #2E8B57; /* Sea Green */
    --color-warning: #F4A460; /* Sandy Brown */
    --color-danger: #D2691E; /* Chocolate */
    --color-white: #FFFFFF;
    --color-black: #222222;
    --color-bg: #F5F5DC; /* Beige Background */
    --color-bg1: #E6E6FA; /* Lavender */
    --color-bg2: #C8E6C9; /* Pastel Green */


     --container-width-lg: 80%;
     --container-width-md: 90%;
     --container-width-sm: 94%;

     --transition: all 400ms ease;
 }

 body {
    background: linear-gradient(to right, var(--color-bg1), var(--color-bg2));
    color: var(--color-black);
    font-family: "Montserrat", sans-serif;
}

 .container {
     width: var(--container-width-lg);
     margin: 0 auto;

 }

 section {
    background: var(--color-bg);
    padding: 60px 0;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

 section {
     padding: 6rem 0;
 }

 section h2 {
     text-align: center;
     margin-bottom: 4rem;
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
     line-height: 1.2;
 }

 h1 {
     font-size: 2.4rem;
 }

 h2 {
     font-size: 2rem;
 }

 h3 {
     font-size: 1.6rem;
 }

 h4 {
     font-size: 1.3rem;
 }

 a {
     color: var(--color-black);
     font-size: medium;
     font-weight: 500;
 }

 img {
     width: 100%;
     display: block;
     object-fit: cover;
 }

 .btn {
    background-color: var(--color-danger);
    color: var(--color-white);
    border-radius: 8px;
    padding: 12px 20px;
    transition: 0.3s;
}
.btn:hover {
    background-color: var(--color-success);
}
 .btn-primary {
     background: var(--color-danger);
     color: var(--color-white);
 }

 /*  ---------------- NAVBAR ---------------- */

 nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100vw;
    height: 6rem;
    position: fixed;
    top: 0;
    z-index: 11;
}

 /* change navbar syles on scroll using javascript */
 .window-scroll {
     background: var(--color-primary);
     box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
 }

 nav img {
     width: 85px;
     height: 85px;

 }


 .nav__container {
     height: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 nav button {
     display: none;
 }

 .nav__menu {
     display: flex;
     align-items: center;
     gap: 4rem;
 }

 .nav__menu a {
     font-size: 1.2rem;
     transition: var(--transition);
 }

 .nav__menu a:hover {
    color: var(--color-primary);
    font-weight: bold;
}


 /*  ---------------- HEADER ---------------- */
 header {
     position: relative;
     top: 5rem;
     overflow: hidden;
     height: 70vh;
     margin-bottom: 5rem;
 }

 .header__container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     gap: 3rem;
     height: 100%;
 }

 .header__left p {
     margin: 1rem 0 2.4rem;
 }

 .header__right img {
     width: 90%;
     display: flex;
     object-fit: cover;
 }

 /*------------CATEGORIES-------------*/
 .categories {
     background: var(--color-bg1);
     height: 49rem;
 }

 .categories h1 {
     line-height: 1;
     margin-bottom: 3rem;
 }

 .categories__container {
     display: grid;
     grid-template-columns: 40% 60%;


 }

 .categories__left {
     margin-right: 4rem;
 }

 .categories__left p {
     margin: 1rem 0 3rem;
 }

 .categories__right {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.2rem;
 }

 .category {
     background: var(--color-bg2);
     padding: 2rem;
     border-radius: 2rem;
     transition: var(--transition);

 }

 .category:hover {
     box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.3);
     z-index: 1;
 }

 .category:nth-child(2) .category__icon {
     background: var(--color-danger);
 }

 .category:nth-child(3) .category__icon {
     background: var(--color-success);
 }

 .category:nth-child(4) .category__icon {
     background: var(--color-warning);
 }

 .category:nth-child(5) .category__icon {
     background: var(--color-danger);
 }



 .category__icon {
     background: var(--color-primary);
     padding: 0.7rem;
     border-radius: 0.9rem;
 }

 .category h5 {
     margin: 2rem 0 1rem;
 }

 .category p {
     font-size: 0.85rem;
 }

 section img {
     width: 20rem;
     height: 20rem;
     margin-top: 1.5rem;
     mix-blend-mode: overlay;

 }

 /*----------------POPULAR COURSES------------------*/
 .courses h2 {
     margin-top: 8rem;
     margin-bottom: 2rem;
     text-align: center;
 }

 .courses {
     margin-top: 10rem;

 }

 .courses__container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
 }

 .course {
     background: var(--color-bg1);
     text-align: center;
     border: 1px solid transparent;
     transition: var(--transition);
 }

 .course:hover {
     background: transparent;
     border-color: var(--color-primary);
 }

 .course__info {
     padding: 2rem;
 }

 .course__info p {
     margin: 1.2rem 0 2rem;
     font-size: 0, 9rem;
 }


 /*-------------------FAQs----------------------*/

 .faqs {
     background: var(--color-bg1);
     box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
 }

 .faqs__container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }

 .faq {
     padding: 2rem;
     display: flex;
     align-items: center;
     gap: 1.4rem;
     height: fit-content;
     background: var(--color-primary);
     cursor: pointer;

 }

 .faq h4 {
     font-size: 1rem;
     line-height: 2.2;
 }

 .faq__icon {
     align-self: flex-start;
     font-size: 1.2rem;
 }

 .faq p {
     margin-top: 0.8rem;
     display: none;
 }

 .faq.open p {
     display: block;
 }


 /*-------------------------- TESTIMONIALS ---------------------*/



 .testimonials__container {
     overflow-x: hidden;
     position: relative;
     margin-bottom: 5rem;
 }

 .testimonial {
     padding-top: 2rem;
     margin-bottom: 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .avatar {
     width: 6rem;
     height: 6rem;
     border-radius: 50%;
     overflow: hidden;
     margin-bottom: 1rem;
     border: 0.5rem solid var(--color-bg1);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .testimonial__info {
     text-align: center;
 }

 .testimonial__body {
     background: var(--color-primary);
     padding: 2rem;
     margin-top: 1rem;
     position: relative;
     border-radius: 1rem;
     color: #fff;
     width: 80%;
     max-width: 500px;
 }

 .testimonial__body::before {
     content: "";
     display: block;
     background: linear-gradient(135deg, transparent, var(--color-primary), var(--color-primary));
     width: 3rem;
     height: 3rem;
     position: absolute;
     left: 50%;
     top: -1.5rem;
     transform: translateX(-50%) rotate(45deg);
 }

 /*-------------------------- TESTIMONIALS END ---------------------*/

 /*-------------------FOOTER---------------------*/

 footer {
     background: var(--color-bg1);
     padding-top: 5rem;
     font-size: 0.9rem;

 }

 .footer__container {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 5rem;
 }

 .footer__container>div h4 {
     margin-bottom: 1.2rem;
 }

 .footer__1 p {
     margin: 0 0 2rem;
     font-size: larger;
 }

 footer ul li {
     margin-bottom: 0.7rem;
 }

 footer ul li a:hover {
     text-decoration: underline;
 }

 .footer__socials {
     display: flex;
     gap: 1rem;
     font-size: 1.2rem;
     margin-top: 2rem;
 }

 .footer__copyright {
     text-align: center;
     margin-top: 4rem;
     padding: 1.2rem 0;
     border-top: 1px solid var(--color-bg2);
 }

 /*------------------------- MEDIA QUERIES (TABLETS) ---------------------------*/

 @media screen and (max-width: 1024px) {
     .container {
         width: var(--container-width-md);
     }

     h1 {
         font-size: 2.2rem;
     }

     h2 {
         font-size: 1.7rem;
     }

     h3 {
         font-size: 1.4rem;
     }

     h4 {
         font-size: 1.2rem;
     }

     /*------------------------------ NAVBAR -------------------------------*/

     nav button {
         display: inline-block;
         background: transparent;
         font-size: 1.8rem;
         color: var(--color-black);
         cursor: pointer;
     }

     nav button#close-menu-btn {
         display: none;

     }

     .nav__menu {
         position: fixed;
         top: 5rem;
         right: 5%;
         height: fit-content;
         width: 18rem;
         flex-direction: column;
         gap: 0;
         display: none;
     }

     .nav__menu li {
         width: 100%;
         height: 5.8rem;
         animation: animateNavItems 400ms linear forwards;
         transform-origin: top right;
     }

     .nav__menu li:nth-child(2) {
         animation-delay: 200ms;
     }

     .nav__menu li:nth-child(3) {
         animation-delay: 400ms;
     }

     .nav__menu li:nth-child(4) {
         animation-delay: 600ms;
     }


     @keyframes animateNavItems {
         0% {
             transform: rotateZ(-90deg) rotateX(90deg) scale(0.1);
         }

         100% {
             transform: rotateZ(0) rotateX(0) scale(1);
             ;
             opacity: 1;
         }
     }





     .nav__menu li a {
         background: var(--color-primary);
         box-shadow: -4rem 6rem 10rem rgba(0, 0, 0, 0.6);
         width: 100%;
         height: 100%;
         display: grid;
         place-items: center;
     }

     .nav__menu li a:hover {
         background: var(--color-bg2);
         color: var(--color-white);
     }

     /*----------------------------HEADER ----------------------------*/

     header {
         height: 62vh;
         margin-bottom: 5rem;
     }

     .header__container {
         gap: 2rem;
         padding-bottom: 3rem;
     }

     /*---------------------------- CATEGORIES ----------------------------*/


     .categories {
         height: auto;
     }

     .categories__container {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .categories__left {
         margin-right: 0;
     }


     /*---------------------------- POPULAR COURSES ----------------------------*/

     .courses {
         margin-top: 0;
     }

     .courses__container {
         grid-template-columns: 1fr 1fr;
     }


     /*---------------------------- FAQs ----------------------------*/

     .faqs__container {
         grid-template-columns: 1fr;
     }

     .faq {
         padding: 1.5rem;
     }

     /*---------------------------- FOOTER ----------------------------*/

     .footer__container {
         grid-template-columns: 1fr 1fr;
     }

 }


 /*------------------ MEDIA QUERIES (PHONES) ---------------------*/

 @media screen and (max-width: 600px) {

     .container {
         width: var(--container-width-sm);
     }

     /*---------------------------- NAVBAR ----------------------------*/

     .nav__menu {
         right: 3%;
     }

     /*---------------------------- HEADER ----------------------------*/

     header {
         height: 100vh;
     }

     .header__container {
         grid-template-columns: 1fr;
         text-align: center;
         margin-top: 0;
     }

     .header__left p {
         margin-bottom: 1.3rem;
     }

     /*---------------------------- CATEGORIES ----------------------------*/

     .categories__right {
         grid-template-columns: 1fr 1fr;
         gap: 0.7rem;
     }

     .category {
         padding: 1rem;
         border-radius: 1rem;
     }

     .category__icon {
         margin-top: 4px;
         display: inline-block;
     }

     /*---------------------------- POPULAR COURSES ----------------------------*/

     .courses__container {
         grid-template-columns: 1fr;
     }

     /*---------------------------- TESTIMONIALS ----------------------------*/

     .testimonial__body {
         padding: 1.2rem;
     }

     /*---------------------------- FOOTER ----------------------------*/

     .footer__container {
         grid-template-columns: 1fr;
         text-align: center;
         gap: 2rem;
     }

     .footer__1 p {
         margin: 1rem auto;
     }

     .footer__socials {
         justify-content: center;
     }


 }