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

:root{
  ---color-primary:#6c63ff;
  ---color-sucess:#00bf8e;
  ---color-warning:#f7c94b;
  ---color-danger:#f75842;
  ---color-danger-variant: rgba(247, 88, 66, 0.4);
  ---color-white:#fff;
  ---color-light: rgba(255, 255, 255, 0.7);
  ---color-black:#000;
  ---color-bg:#1f2641;
  ---color-bg1:#2e3267;
  ---color-bg2:#424890;

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


  ----trasition:all 400ms ease;
}

body{
  font-family: 'Montserrat', sans-serif;
  line-height: 1.7;
  color: var(---color-white);
  background-color: var(---color-bg)
}
.container{
  width: var(----container-width-lg);
  margin: 0 auto;    
}

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-white);
}

img{
  width: 100%;
  display: block;
  object-fit: cover;
   
}
.btn{
display: inline-block;
background: var(---color-white);
color: var(---color-black);
padding: 1rem 2rem;
border: 1px solid transparent;
font-weight: 500;
transition: var(----trasition);
}

.btn:hover{
  background: transparent;
  color: var(---color-white);
  border-color: var(---color-white);

}

.btn-primary{
  background: var(---color-danger);
  color: var(---color-white);
}

/* -------------navbar-------- */

nav{
  background: transparent;
  width: 100vw;
  height: 5rem;
  position: fixed;
  top: 0%;
  z-index: 11;
}

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


}

.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: 0.9rem;
  transition: var(----trasition);
}

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

/* -------------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: 5rem;
  height: 100%;
}

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


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

.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(----trasition);

}

.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-sucess);

}

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

}

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

}

.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;

}

/* -------------Courses-------- */

.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(----trasition);
}

.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;

}

.testimonials{
  padding: 2rem;
}

.avatar{
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1rem;
  border: 1rem solid var(---color-bg1);
}

.testimonial__info{
  text-align: center;

}

.testimonial__body {
  background: var(---color-primary);
  padding: 2rem;
  margin-top: 3rem;
  position: relative;
}

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

}

/* SEO PAGE */
/* Container Styling */
.seo-services-section {
  background: linear-gradient(to right, #1a1f71, #20236c); /* gradient background */
  color: #fff;
  padding: 60px 20px;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}

/* Headings */
.seo-services-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 40px;
}

/* Service List Container */
.seo-services-list {
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

/* Each Service Block */
.seo-service {
  margin-bottom: 40px;
}

.seo-service h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #ffcc00; /* golden-yellow highlight for titles */
  margin-bottom: 10px;
}

.seo-service p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #f1f1f1;
}




/* 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;
}

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 quries(Tablet)------------*/

@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-white);
      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;
      opacity: 0;
  }

  .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: rotate(-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: 52vh;
      margin-bottom: 4rem;

  }

  .header__container{
      gap: 0;
      padding-bottom: 3rem;

  }


  /* Categories */

  .categories{
      height: auto;
      
  }

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

  .categories__left{
      margin-right: 0%;
  }

  /* courses */
.courses{
  margin-top: 0;

}

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

/* FAQs */
.faqs__container{
  grid-template-columns: 1fr;

}

.faq{
  padding: 1.5rem;
}

/* footer */

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

}

/* media queries (phone) */

@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;
  }

  /* course */

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

  }

  /* testimaonial */
  .testimonial__body{
      padding: 1.2rem;
  }

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

  .footer__1{
      margin: 1rem auto;
  }

  .footer__socials{
      justify-content: center;
  }
}