@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Great+Vibes&family=Inconsolata:wght@200..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Italianno&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Press+Start+2P&family=Roboto:ital,wght@0,100..900;1,100..900&family=Satisfy&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
/* base rule */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Urbanist',sans-serif;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-snap-type: Y proximity;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Poppins', sans-serif;
}
p, li, a{
    font-family: "Urbanist", sans-serif;
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
    font-weight: 400;
    color: var(--para-color);
    line-height: 1.5;
}
a{
    text-decoration: none;

}
li{
    list-style: none;
}
/* theme */
:root{
    --main-color: #0062ff;
    --supporting-color: #ebf3fe;
    --font-color: #424242;
    --bg-color: #f7fcff;
    --heading-color: #000a19;
    --para-color: #504e4d;
    --hero-heading-color: #003b99;
    --white-color: #ffffff;
    --btn-hover-bg-color: #003b99;
    --footer-bg--color: #040d12;
    --btn-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}
section {
    scroll-snap-align: center;
}

/* layout */
.container{
    max-width: 128rem;
    margin: 0 auto;
    padding: 5rem 2.4rem;
}
:is(.section-why--choose,
.section-contact--homepage,
.section-about,
.section-blog,
.section-course,
.section-contact)
.container:first-child{
    padding: 2.4rem 2.4rem 2.4rem 2.4rem;
}

.grid{
    display: grid;
}
.grid-two--cols{
    grid-template-columns: repeat(2, 1fr);
}
.grid-three--cols{
    grid-template-columns: repeat(3, 1fr);
}
.grid-four--cols{
    grid-template-columns: repeat(4, 1fr);
}

/* module / reusable */
.section-common-heading{
    font-size: 3.2rem;
    font-weight: 700;
    text-transform: capitalize;
    
}
.section-common-subheading{
    color: var(--heading-color);
}
.section-common--title{
    font-size: 2rem;
    margin: 2.4rem 0 1.2rem 0;
}
.btn{
    display: inline-block;
    padding: 1.2rem 3.2rem;
    background-color: var(--main-color);
    color: var(--white-color);
    border-radius: 0.6rem;
    -webkit-border-radius: 0.6rem;
    -moz-border-radius: 0.6rem;
    -ms-border-radius: 0.6rem;
    -o-border-radius: 0.6rem;
    

}
.fa-brands{
    padding: 2.2rem;
    background-color: var(--supporting-color);
    font-size: 2.4rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    color: var(--hero-heading-color);
}
.fa-solid{
    padding: 2.2rem;
    background-color: var(--supporting-color);
    font-size: 2rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    color: var(--hero-heading-color);
}



/* states */

.btn:hover{
    background-color: var(--btn-hover-bg-color);
    cursor: pointer;
    box-shadow: var(--btn-box-shadow);

}
/***** navbar Section *****/
.section-navbar{
     width: 100%;
     box-shadow: 0 0 10px grey;
}

.section-navbar .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2.4rem;
    
    & .navbar-brand img{
        width: 11rem;
        height: 9.9rem;
       
}
}
.section-navbar .navbar ul{
    display: flex;
    gap: 3.2rem;
    
    
    & li a{
        color: var(--heading-color);
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.6rem;
        display: inline-block;
        position: relative;
        
        &::after{
            content:"";
            position: absolute;
            left: 0;
            bottom: -0.3rem;
            width: 0%;
            border-bottom: .2rem solid var(--main-color);
            transition: all 0.3s linear;
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
}
    }
    & li a:hover:after{
        width: 100%;
    }
    
}

  /***** End navbar Section *****/


/***** hero Section *****/ 
main{
    position: relative;
    background-image: linear-gradient(to top right, #3d86fa, 
    #4484fb, #679eff, #b3d2ff, #ebf3fe);
}
.section-hero .grid{
    align-items: center;
    gap: 6.4rem;
    
    & .hero-subheading{
        text-transform: uppercase;
        letter-spacing: 0.2rem;
        font-size: 1.7rem;
        word-spacing: .2rem;
        color: var(--btn-hover-bg-color);
        font-weight: 700;
    }
    & .hero-heading{
        font-size: 5.8rem;
        font-family: 'Jost';
        color: var(--hero-heading-color);
        font-weight: 700;
        line-height: 1.5;
    }
    & .hero-para{
        color: var(--white-color);
        margin: 3rem 0 4rem 0;
    }
}
.section-hero--image img{
    width: 100%;
    height: auto;
    background: transparent;
}
/* shape divider */
.custom-shape-divider-bottom-1751982265 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    margin-bottom: -1px; 
}

.custom-shape-divider-bottom-1751982265 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 12rem;
    
}

.custom-shape-divider-bottom-1751982265 .shape-fill {
    fill: #ffffff;
    outline: none;
    border: none;
    

}

 /***** End hero Section *****/

 /***** About Section *****/ 

 .section-about img{
    padding: 0.4rem 1.7rem;
    background-color: var(--supporting-color);
    width: 9rem;
    height: auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.section-about .about-div{
    text-align: center;
    
}

.about-div .icon img:hover{
    rotate: -360deg;
    background: linear-gradient(to right, #0575e6, #021b79);

}
.section-about .grid{
   
    gap: 6.4rem;
}
  /***** End About Section *****/
 /***** explore course Section *****/
 
.section-course .courses-div{
    padding: 3.2rem;
    text-align: left;
    
   
    &:hover{
        border-radius: 1.2rem;
        -webkit-border-radius: 1.2rem;
        -moz-border-radius: 1.2rem;
        -ms-border-radius: 1.2rem;
        -o-border-radius: 1.2rem;
        box-shadow: var(--btn-box-shadow);
}
}
.section-course{
    background-color: var(--bg-color);
}
.section-course .grid{
    gap: 3.2rem;
}
.courses-div:nth-child(2) .icon .fa-brands {
    color: #68bf9b;
    background-color: #e7f6ef;
}
.courses-div:nth-child(3) .icon .fa-brands {
    color: #ff8b52;
    background-color: #fbebe8;
}
.courses-div:nth-child(5) .icon .fa-brands {
    color: #ff9b50;
    background-color: #f6dfce;
  
}
.courses-div:nth-child(1) .icon .fa-brands {
    color: #ebeb23;
    background-color: #e7f6ef;
}
.courses-div:nth-child(7) .icon .fa-brands {
    color: #1450a3;
    background-color: #e7f6ef;
}
.courses-div:nth-child(6) .icon .fa-solid {
    color: #1450a3;
    background-color: #e7f6ef;
    
    
}

.courses-div:nth-child(4) .icon .fa-solid {
    
     color: #d988b9;
    background-color: rbg(247, 223, 238);
}
   /***** End explore course Section *****/

 /***** why choose us Section *****/ 

 .section-why--choose .text-align-right .why-choose--div{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    text-align: right;
 }
 .common-text--highlight{
    width: 6rem;
    aspect-ratio: 1;
    background-color: var(--supporting-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 700;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.section-why--choose .grid{
    gap: 9.6rem;
}
.choose-center--div img{
    width: 90%;
    height: auto;
}
.choose-center--div, figure{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.choose-center--div figure::before, .choose-center--div figure::after{
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--main-color);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    z-index: -1;
    
}
.choose-center--div figure::before{
    animation: circle 5s linear infinite;
    -webkit-animation: circle 5s linear infinite;
}
@keyframes circle{
    0%{
        background-color: #b3d0ff;
    }
    25%{
        background-color: #80b1ff;
    }
    50%{
        background-color: #4d91f1;
    }
    75%{
        background-color: #99c0ff;
    }
    100%{
        background-color: #3381ff;
    }
}
.choose-center--div figure::after{
    width: 45rem;
    height: 45rem;
    background-color: transparent;
    z-index: -2;
    border: .2rem solid var(--supporting-color);

}
.why-choose--div{
     
    margin-top: 3.2rem;
}
  /***** End why choose us Section *****/

  /***** Blog Section *****/  
  .section-blog{
    background-color: var(--bg-color);
  }
  .blog img{
    width: 100%;
  }
  .blog-date{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.6rem;
    font-size: 1.4rem;
     
    & .fa-solid{
        background-color: transparent;
        padding: 0;
        margin-right: 0.9rem;
    }

    & .section-common--title {
        margin-top: 0.8rem;
    }
    
  }
  .blog-content{
    padding: 1.4rem 2.4rem 2.4rem;
  }
  .section-blog .container .blog{
    background-color: var(--white-color);
    box-shadow: var(--btn-box-shadow);
    transition: scale 0.3s linear;
    
    -webkit-transition: scale 0.3s linear;
    -moz-transition: scale 0.3s linear;
    -ms-transition: scale 0.3s linear;
    -o-transition: scale 0.3s linear;
    &:hover
    {
        scale: 1.1;
    }
  }
  .section-blog  .grid{
    gap: 6.4rem;
  }

  /***** End Blog Section *****/
  
 /***** contact home Section *****/ 
.section-contact--homepage{
    width: 60%;
    min-height: 30rem;
    margin: 0 auto;
    box-shadow: var(--btn-box-shadow);
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    padding: 0 3.2rem;
    position: relative;
    bottom: -7rem;
    z-index: 1;
    background-color: var(--white-color);
    

    & .grid
    {
        align-items: center;
        gap: 6.2rem;
        justify-content: center;
    }
    
.contact-title{
    font-size: 3.8rem;
    line-height: 1.2;
}
.contact-content p{
    margin: 1.2rem 0 2.4rem 0;
}
}.section-contact--homepage img{
    width: 100%;
    height: 25rem;

}
.section-contact--homepage a{
    color: var(--white-color);
    text-transform: capitalize;
}
.section-contact--homepage .fa-solid{
    padding: 0;
    color: var(--white-color);
    background-color: var(--main-color);
}

 /***** End contact home Section *****/
 /***** footer Section *****/ 
footer{
    background-color: var(--footer-bg--color);
    padding-top:  7rem;
}
footer *{
    color: white;
}
.footer-subheading{
    font-size: 2.2rem;
    font-weight: 700;
}
 .section-footer .grid{
    
    
    text-align: right;
 }
 .footer-1--div p{
    margin: 1rem 0 3.2rem 0;
 }
 .social-footer--icons {
    display: flex;
    align-items: center;
    gap: 1.4rem
 }
 .footer-1--div {
    text-align: left;
    & .fa-brands{
        width: 0.5rem;
        height: 0.5rem;
        background-color: var(--supporting-color);
        color: var(--btn-hover-bg-color);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s linear;
        
        -webkit-transition: all .3s linear;
        -moz-transition: all .3s linear;
        -ms-transition: all .3s linear;
        -o-transition: all .3s linear;
        &:hover{
            color: var(--supporting-color);
            background-color: var(--btn-hover-bg-color);
            rotate: 360deg;
        }
}
 }
 /***** End footer Section *****/

 /***** contact Section *****/  
 .input-div{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    
    & input{
          padding: 1rem 4rem;
          font-size: 1.7rem;
          letter-spacing: 0.3rem;

          ::placeholder{
            font-size: 1.6rem;
            letter-spacing: 0.3rem;
          }
    }

    & textarea{
        padding: 1rem 0 0 1rem;
        font-size: 1.7rem;

        ::placeholder{
            font-size: 1.6rem;
            letter-spacing: 0.5rem;
        }
    }
 }
 .form-div{
     display: flex;
     flex-direction: column;
     gap: 3rem;

     

     & label{
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
     }
 }
 .contact-form .grid{
    gap: 8rem;
 }
 .section-contact .grid{
    gap: 5rem;
 }
 .btn-submit{
    font-size: 1.8rem;
    border: none;
 }
 input:focus-visible, textarea:focus-visible{
    outline: 1px solid var(--heading-color);
 }
 /***** End contact Section *****/
 
 /***** Scroll bar Section *****/ 
::-webkit-scrollbar{
    width: 8px
 }
 ::-webkit-scrollbar-track{
    background-color: var(--supporting-color);
 }
::-webkit-scrollbar-thumb{
    background-color: var(--main-color);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}
 /***** End Scroll bar Section *****/
 
 /***** Media queries Section *****/ 
 @media (width <= 1400px){
    html{
        font-size: 56.25%;
    }
    .section-hero img{
        width: 90%;
    }
    
 }
 @media (width <= 1220px) {
    html{
        font-size: 54%;
    }
    :is(.section-why--choose,
         .section-contact--homepage,
         .section-about,
         .section-blog,
         .section-course,)
        .grid{
              gap: 6.4rem;
            } 
    
 }
@media (width <= 998px){
    .section-hero{
        height: auto;
        padding-bottom: 9rem;
        & .grid-two--cols{
            grid-template-columns: 1fr;

            & .section-hero--content{
                order: 2;
            }
            & .section-hero--image{
                order: 1;

                & img{
                    width: 30%;
                }
            }
        }
    }
    .section-about .about-div{
        text-align: left;
    }
    .section-footer .grid{
        text-align: left;
       }
    footer .grid-four--cols {
        grid-template-columns: repeat(3, minmax(100px, 1fr));

       
       


        & .footer-1--div{
            grid-row: 2 / 3;
            grid-column: 1 / -1;
            margin-top: 3.4rem;
            
        }
    }

}
@media (width <=1100px) {
    :is(.section-blog, .section-course) .grid-four--cols{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .section-why--choose {
        & .choose-left--div{
            order: 2;
        }
        & .choose-right--div{
            order: 3;
        }
        & .choose-center--div {
               order: 1;
            & figure::before{
                width: 0;
                height: 0;
                padding: 0;
                background-color: transparent;
            }
             & figure::after{
                width: 0;
                height: 0;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    
}
 @media (width <= 768px) {
    .grid-two--cols, .grid-three--cols{
        grid-template-columns: 1fr;
    }
    .section-navbar .container{
        display: flex;
        flex-direction: column;
         & .navbar ul{
            gap: 2.4rem;
         }
    }
    .section-hero .grid .hero-heading{
        font-size: 3.8rem;
    }
    .section-why--choose{
        & img{
            width: 70%;
        }
        & .grid{
            gap: 1.4rem;
        }
        & .text-align-right .why-choose--div {
            
             align-items: start;
            text-align: left;
          }
    }
    .section-contact--homepage .btn{
        display: block;
        text-align: center;
    }
    .contact-content .contact-title{
        font-size: 2.4rem;
    }
    :is(.section-contact--homepage) .container:first-child{
        padding: 6.4rem 0rem 2.4rem 0rem;
    }
    
 }
 /***** End Media queries Section *****/