/* font testing */

.pnormal{
     font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.pbold{
     font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.rale{
     font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* root colors   */

:root{
    --orange-color: #DA722C ;
    --dark-blue-color:   #023047 ;
    --dark-color:   #070917 ;
    --light-color:   #E8F7FB  ;
    --light-blue-color:  #6F7DFB  ;
    --blue-color:  #057ADA  ;
}

/* base stylings */

*,*::before,*::after{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: "poppins",sans-serif;
    
}
.wrapper{
    max-width: 1134px;   /*  large screen xl */
    margin: 0 auto;
}
a{
    text-decoration: none;
}

/* btn stylings */
.btn{
    
    color: var(--light-color);
    text-decoration: none;
    border-radius: 24px;
    padding: 16px 32px;
    font-weight: bold;
    position: relative;           /* future use for icon fixed inside button */
display: inline-block;              /* button placed correctly */      
font-size: 16px;

 
}
.btn.dark{
    background: var(--dark-blue-color);
}
.btn.light{
    background: var(--orange-color);
}
.btn.enrol-icon::before{
    content: url(assets/PencilAlt.svg);
    position: absolute;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
}

  .btn.enrol-icon {
    padding-left: 60px;
  }
/* header */

header{
    background:linear-gradient(#6c7af7,#3742a6);
    height: 100vh;     /* important */
    width: 100%;           /*  important */
}

nav{
    display: flex;             
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    position: fixed;
    top: 0;
    z-index:100;
    width: 1134px;           /* important */
    
padding: 36px 0;
    transition: all 500ms ease;
    }

    nav.scrolled{
        background: var(--dark-color);
        box-shadow: 0 16px 14px -8px rgba(0, 0, 0, 0.3);
border-radius: 0 0 8px 8px;
top: 0;
padding: 12px;
 }


 nav .logo{
    color: #000;
    font-weight: 900;
    font-size: 40px;
    font-family: "Raleway", sans-serif;
 }

 nav ul{
    display: flex;
    align-items: center;
    gap: 60px;
    list-style: none;
    margin: 0;
 }

 nav ul li a{
    font-weight: bold;
    font-size: 16px;
    color: #000;
    text-decoration: none;
 }

/* hero section */
.hero-section{
    display: flex;
    height: 100vh;     /*  important */
    width: 100%;        /*   important */
    justify-content: space-between;
    align-items: center;
    padding-top: 60px;
     position: relative; 
    color: #fff;
}
  .hero-section .left h1 {
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    font-size: 50px;
    line-height: 125%;                  /*  important */
    margin-bottom: 0;
  }
   .hero-section .left p {
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;
    margin-bottom: 30px; 
    width: 457px;                       /*  important */
  }

   .hero-section .left {
    flex: 1;
  }
  .hero-section .right {
    align-self: flex-end;
  }
   .hero-section .right img {
    height: 520px;
    vertical-align: middle;
  }

  /* achievement card */
  .achievement-card {
    position: absolute;
    min-width: 200px;
    color: var(--dark-blue-color);
  }
   .achievement-card .content {
    border-radius: 24px;
    background: #fff;
    padding: 8px 32px;
    z-index: 1000;
    position: relative;         /* important for bg */
  }
   .achievement-card.students-enrolled {
    left: 49%;
    top: 270px;
  }
  .achievement-card.overall-rating {
    left: 47%;
    top: 470px;
  }
   .achievement-card .content div {
    display: flex;
    align-items: center;
    gap: 12px;
  }

   .achievement-card h3 {
    font-weight: bold;
    font-size: 36px;
    margin: 0;
    text-align: center;
    width: 100%;
    flex: 1;
  }
   .achievement-card img {
    flex: 1;
    height: 42px;
     margin-left: -24px;
   }
     .achievement-card p {
    font-weight: normal;
    font-size: 16px;
    margin-top: -8px;
    margin-bottom: 8px;
    text-align: center;
  }
   .achievement-card .bg {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #6f7dfb 0%, #3b448f 100%);
    border-radius: 24px;
    top: 8px;
    left: 8px;
    z-index: 1;
  }
   
  /* testimonial section */
   section{
    margin-top: 100px;
  }
  h2{
    font-family: "Raleway",sans-serif;
    font-weight: 900;
    font-size: 60px;
    line-height: 120%;
    margin: 0;
    color: var(--dark-blue-color);
  }
  h2.light{
    color: #fff;
  }
  section p{
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;
    color: var(--dark-blue-color);
    margin: 12px 0;
  }
  .testimonial-section{
    display: flex;
    gap: 100px;
    align-items: center;
  }
  .testimonial-section .testimonial-card{
    width: 442px;
    background: #ffffff;
    box-shadow: 0px 9px 36px rgba(0,0,0,0.2);
    border-radius: 24px;
    margin-bottom: 50px;
    position: relative;
  }
  .testimonial-section .testimonial-card::before{
    content: "";
    width: 28px;
    position: absolute;
    height: 40px;
    top: -40px;
    left: 60px;
    background: var(--dark-blue-color);
    border-radius: 24px 24px 0 0;
  }

    .testimonial-section .testimonial-card:last-child::before{
    left: 40px;
    top: -50px;
    border-radius: 0 0 24px 24px;
    height: calc(100% + 90px);
    z-index: -1;
  }
   .testimonial-section .testimonial-card .content{
    font-family:"Raleway",sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 150%;
    color: #ffffff;
    border-radius: 24px;
    padding: 24px 32px;
    background: var(--light-blue-color);
  }
  .testimonial-section .testimonial-card:last-child .content{
    background: var(--orange-color);
  }
  .testimonial-section .testimonial-card .info h4{
    font-family:"Raleway",sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 120%;
    margin: 0;
    color: var(--dark-blue-color);
  }

  .testimonial-section .testimonial-card .info{
    padding: 24px 32px;
    background: #fff;
    border-radius: 24px;
 }
  .testimonial-section .testimonial-card .info p.company{
    font-family:"Raleway",sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 120%;
    color: var(--dark-blue-color);

 }
  .testimonial-section .testimonial-card img{
    width: 120px;
    height: 120px;
    position: absolute;
    right: 32px;
    bottom: 20px;
 }
 .testimonial-section .testimonial-card:last-child{
    transform: translateX(20px);
 }
  .testimonial-section .features{
    margin-bottom: 30px;
 }
 
 /* courses section  */
   .courses-section{
    background: linear-gradient(180deg, #6f7dfb 0%, #26308c 100%);
    padding: 70px 0;
    padding-bottom: 120px;
 }
 .courses-section h2{
    text-align: center;
 }
 .courses-section .course-cards{
    display: flex;
    gap: 70px;
 }
  .courses-section .course-cards img{
    width: 100%;
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.25));                     /*  important    */ 
    border-radius: 24px;
 }
  .courses-section .course-card{                     /*  important    */ 
    background: #ffffff;
    border-radius: 24px;
    padding: 0 32px;
    margin: 40px 0;
    position: relative;
 }
 .courses-section .course-card::after{                               /*  important    */ 
    content: "";
    height: 8px;
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 0;
    background: var(--dark-blue-color);
    border-radius: 24px;
 }
  .courses-section .course-card h3{
    font-family:"Raleway",sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 150%;
    color: var(--dark-blue-color);
 }
 .courses-section .course-card .info{
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
 }
  .courses-section .course-card .duration{
    font-family:"Raleway",sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 150%;
    white-space: nowrap;
    color: var(--dark-blue-color);
    position: relative;
    padding-left: 20px;
 }
  .courses-section .course-card .duration::before{    /*  important    */    
    content: url("assets/clock.svg");
    position: absolute;
    top: 2px;
    left: -6px;
 }
 .courses-section .wrapper{
    position: relative;
 }
 .courses-section .wrapper .btn{
    position: absolute;
    right: 0;
 }

 /* app section */

  .app-section{
    text-align: center;
 }
 .app-section .app-buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 24px;
 }
 .app-section .app-btn{
    padding: 16px 32px;
    background: #000000;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 310px;
 }
 .app-section .app-btn span{
    font-weight: normal;
    font-size: 20px;
    color: #ffffff;
 }
 /*footer*/
  footer {
    background: var(--dark-color);
    color: #fff;
    margin-top: 100px;
    padding: 70px 0;
  }
    footer a {
    text-decoration: none;
    color: #fff;
  }
  
  footer h3 {
    color: var(--orange-color);
  }
  
  footer ul {
    list-style: none;
    padding-left: 20px;  /* important */
  }
   footer ul li {
    margin: 16px 0;           /* important */
  }  

    footer .links-container {
    display: grid;
    grid-template-columns: 2fr 2fr 3fr;      /* important */
  }

   footer .social {
    margin-left: 20px;  
  }
   footer .social a {
    margin-right: 28px;
  }

   footer form {                     /* important */          
    margin-left: 20px;
    margin-top: 16px;
    position: relative;
  }
  footer form input {
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;                                         /* important */   
    border-radius: 8px;                             /* important */   
    padding: 8px 160px 8px 32px;                 /* important */   
    border: none;                                   /* important */   
    width: 100%;                                       /* important */   
    color: #000000;
  }
   




  footer form .submit-btn {
    position: absolute;          /* important */    
    right: 5px;                /* important */    
    top: 50%;                     /* important */    
    transform: translateY(-50%);           /* important */            
    background: var(--dark-blue-color);
    border-radius: 8px;
    padding: 8px 32px;
    border: 0;
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }
  
  footer .copyright {
    margin-top: 36px;
  }

   /*Media Queries*/
  @media (max-width: 1100px) {
    /*header and buttons */
    .btn {
      padding: 12px 32px;
    }
  
    .wrapper {
      padding: 0 100px;
    }
  
    nav {
      width: 100%;    /* important */
      left: 0;                      /* important */
      right: 0;                  /* important */ 
      padding: 36px 100px;       /* important */
    }

 header,
    .hero-section,
    header .wrapper {
      max-height: 1100px;       /* important */
      
    }
.hero-section {
      flex-direction: column;
    }
  
    .hero-section .left {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
   .hero-section .left .btn {
      align-self: flex-start;         /* important */       
      bottom: 0;
    }
  
    .hero-section .left h1 {
      font-size: 50px;
      line-height: 125%;
    }
 .hero-section .right {
      position: absolute;           /* important */       
      bottom: 0;
    }
     .hero-section .right img {
      height: 680px;                          /*  take half height of hero section height 1100px*/
    }
 .hero-section .achievement-card {
      position: relative;
      margin-bottom: 80px; 
    }

     .achievement-card.students-enrolled,
    .achievement-card.overall-rating {
         left: unset;            /* important */            
      top: unset;
    }
     .hero-section .achievement-cards {
      align-self: flex-start;
      margin: 40px;
    }
        h2 {
      font-size: 40px;
    }
  /*testimonial section */

 .testimonial-section {
      flex-direction: column;
      align-items: stretch;
      gap: 50px;
    }
      .testimonial-section .testimonial-card {
      width: 100%;
      margin-bottom: 40px;
    }
  
    .testimonial-section .testimonial-card:last-child::before {                        /* important */  
      top: -40px;
      left: 60px;
      height: calc(100% + 80px);            /* important */  
      
    }
     .testimonial-section .testimonial-card:last-child {        /* important */  
      transform: translateX(0px);                                   /* important */  
      margin-bottom: 0;
    }
      .testimonial-section .desktop-btn {
      display: none;
    }
    .testimonial-section .right {
      order: 1;                                /* important */ 
    }
     .testimonial-section .left {
      order: 2;
    }
     .testimonial-section .right p {
      display: inline;
    }
     .testimonial-section h2 {
      margin-bottom: 20px;
    }
    /*courses section */

   .courses-section .course-cards{
      flex-direction: column;
      gap: 80px;
    }
    .courses-section .course-card{
      margin: 0;
    }
    .courses-section h2{
      margin-bottom: 42px;
    }
     .courses-section .course-card img{
      height: 350px;
      object-fit: cover;                                         /* important */ 
    }
   .courses-section .course-card h3{
      font-size: 24px;
    }
  
 .courses-section .wrapper .btn{
         right: 100px;
    }
    .courses-section .course-card:last-child{                /* important */ 
      margin-bottom: 50px;
    }


      footer .links-container{
      grid-template-columns: 1fr 1fr;                         /* important */ 
    }
     footer .links-container .links:last-child{
      grid-column: 1/3;                                                  /* important */ 
    }













}