/* base rule  */ 

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Urbanist",sans-serif ;
}

html{
    font-size:62.5%;
}

h1,
h2,
h3,
h4,
h5
{
    font-family:"poppins", sans-serif;
}

p, 
li,
 a,
 label{
    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;
    --bn-hover-bg-color:#003b99;
    --btn-box-shadow:rgba(100,100,111,0.2)0px 7px 29px 0px;
    --footer-bg-color:#040d12;
}

/* layout  */
section{
    scroll-snap-align: center;
}
.container
{
   max-width: 142rem;
   margin:0 auto;
   padding: 9.6rem 2.4rem;
}

 /* .section-about .container:first-child,
.section-blog .container:first-child,
.section-course .container:first-child,
.section-contact--homepage .container:first-child,
.section-why--choose .container:first-child,
.section-contact .container:first-child
{
    padding:6.4rem 0 2.4rem 0;
}  */

 :is(
    .section-about,
    .section-blog,
    .section-course ,
    .section-contact--homepage,
    .section-why--choose,
    .section-contact
   )
     .container:first-child
     {
        padding:6.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-comoon-heading
{
   font-size:3.2rem;
   font-weight: 700;
   text-transform: capitalize;
}
.section-comoon-subheading
{
    color:var(--heading-color)
}

.section-common--title
{
    font-size: 2rem;
    margin: 2.4rem 0 1.2rem 0;
}


.fa-solid
{
    padding:2.4rem;
    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);
}



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

/*  states  */

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


/* ======== navbar start ======= */
.section-navbar{
    width:100%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
                rgba(0, 0, 0, 0.08) 0px 0px 0px 1px ;
}

.section-navbar .container
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:1.8rem 2.4rem;
}

.section-navbar .navbar ul
{
  display: flex;
  gap: 3.2rem;
  /* text-transform: capitalize; */

  & 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;
        bottom: -0.3rem;
        left:0;
        width:0%;
        border-bottom:0.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%
  }
  
}
/* ======== navbar end ======= */



/* ========== hero- section start =========== */


main{
    position: relative;
    background-image: linear-gradient(
        to top right,
        #3d86fa,
        #4484fb,
        #679eff,
        #b3d2ff,
        #ebf3fe
         );
}

.custom-shape-divider-bottom-1721370562 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

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

.custom-shape-divider-bottom-1721370562 .shape-fill {
    fill: #FFFFFF;
}



.section-hero .grid
{
  align-items:center;
  gap:6.rem;
  

 & .hero-subheading
{
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size:1.7rem;
    word-spacing: 0.2rem;
    color:var(--hero-heading-color);
    font-weight: 700;
} 
 & .hero-heading{
    font-size:5.8rem;
    line-height: 1.5;
    font-family: "jost";
    color:var(--hero-heading-color);
    font-weight: 900;
}

& .hero-para{
    color:var(--white-color);
    margin: 2rem 0 4.2rem 0;
}
}

.section-hero--image img
{
    width:100%;
    height:auto;
    transform: scalex(-1);
    -webkit-transform: scalex(-1);
    -moz-transform: scalex(-1);
    -ms-transform: scalex(-1);
    -o-transform: scalex(-1);
}



/* ========== hero- section end =========== */


/* =========== about section start =============== */

.section-about .grid
{ 
   gap:6.4rem;
}

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

.section-about img
{

  padding:2.4rem;
  background-color: var(--supporting-color);
  width:15rem;
  height:auto;
  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;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

 .icon:hover > img
{
       transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg); 
      /* rotate:360deg; */
      background: linear-gradient(to right ,#0575e6 ,#021b79);
}
/* =========== about section end =============== */



/* ========== course section start  ========= */

.section-course
{
    background-color:var(--bg-color) ;
}

.section-course .grid
{
   gap:3.2rem;
}
.section-course .course-div
{
    padding: 3.2rem;
}
.section-course .course-div:hover
{
   box-shadow: var(--btn-box-shadow);
}


.course-div:nth-child(2) .icon .fa-solid
{
     color:#68bf9b;
     background-color:#e7f6ef ;
}

.course-div:nth-child(3) .icon .fa-solid
 {
    color: #ff8b52;
    background-color: #fbebe8;
}

.course-div:nth-child(4) .icon .fa-solid
 {
    color: #183d3d;
    background-color: #ccf7f7;
  }

.course-div:nth-child(5) .icon .fa-solid
 {
    color: #d988b9;
    background-color: rgb(247, 223, 238);
  }
  
.course-div:nth-child(6) .icon .fa-solid
 {
    color: #ff9b50;
    background-color: #f6dfce;
}
.course-div:nth-child(7) .icon .fa-solid {
    color: #1450a3;
    background-color: #dce9fa;
  }

.course-div:nth-child(8) .icon .fa-solid
{
     color:rgb(137, 29, 173);
     background-color:rgb(223, 150, 228) ;
}



/* ========== course section start  ========= */


/* =========== why choose section start========== */

.section-why--choose .grid
{
  gap: 9.6rem;
}

.why-choose--div
{
   margin-top: 3.2rem;
}
.section-why--choose .text-align--right .why-choose--div
{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    text-align: right;
    
}


.choose-left--div
{
  & .fa-solid
  {
      width:5rem;
      aspect-ratio: 1;
      background-color: var(--supporting-color);
      color: var(--bn-hover-bg-color);
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      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;
      &:hover      
{
          color: var(--supporting-color);
          background-color: var(--bn-hover-bg-color);
          rotate: 360deg;
      }
      
}
}



.choose-right--div
{
  & .fa-brands
  {
      width:5rem;
      aspect-ratio: 1;
      background-color: var(--supporting-color);
      color: var(--bn-hover-bg-color);
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      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;
      &:hover      
{
          color: var(--supporting-color);
          background-color: var(--bn-hover-bg-color);
          rotate: 360deg;
      }
      
}
}
.choose-right--div .svg


.choose-center--div img
{

    width: 90%;
    height: auto;
}

.choose-center--div,
figure
{
   
   display:flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.choose-center--div, 
figure 
{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.choose-center--div figure::before,
.choose-center--div figure::after
{
    content: " ";
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    background-color: var(--main-color);
    width: 45rem;
    height:45rem;
    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: #4d91ff;
    }
    75%{
        background-color:#99c0ff ;
    }
    100%{
        background-color: #3381ff;
    }
}

.choose-center--div figure::after
{
  width:50rem;
  /* aspect-ratio: 1; */
   height:50rem; 
  background-color: transparent;
  z-index: -2;
  border: 0.5rem solid var(--supporting-color);
}
/* =========== why choose section end========== */


/* #####=======blog start============#### */
.section-blog
{
    background-color: var(--bg-color);

    & .grid
    {
        gap:6.4rem
    }

    & .blog
    {
        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;
        }
    
    
    & .blog-content
    {
         padding: 1.4rem 2.4rem  2.4rem; 
    }
}

    & img
  {
    width:100%;
    height: 212px;
  }


    & .blog-date
   {
    display: flex;
    justify-content: space-between;
    margin-top: 1.6rem;
    font-size: 1.4rem;


     & .fa-solid
   {
   
     background-color: transparent;
     padding: 0;
   }
   }
   & .section-common--title
   {
    margin-top: 0.8rem;
   }
}




/* #####=======blog end============#### */




/* ==========contact home section start========== */

.section-contact--homepage
{
    width: 60%;
    min-height:30rem;
    margin: 0 auto;
    box-shadow: rgba(60,64,67, 0.3) 0px 1px 2px 0px, 
       rgba(60,64,67, 0.15) 0px 2px 6px 2px;
    /* margin-bottom: 5rem; */
    border-radius:0.2rem ;
    padding:0 3.2rem;
     position: relative;
    bottom: -15rem;
    z-index: 1; 
    /* margin-bottom: -15rem; */
    background-color: var(--white-color);
    /* z-index: 1; */

    & .grid
     {
        align-items: center;
        gap:6.4remyy
    }
}


.section-contact--homepage
{
    background-color:#f5e3e3;
}

.contact-title
{
    font-size: 3.8rem;
    line-height: 1.2;
}
.contact-content p
{
    margin:1.2rem 0 2.4rem 0;
}


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

.section-contact--homepage img
{
    width:90%;
    height: auto;
}
/* ==========contact home section end========== */

/* =======actual contact page start========= */
.section-contact
{
    & .grid
    {
        /* align-items: center;  */
        gap:6.4rem;
    }
}
.mb-3
{
    margin-top: 2.2rem;
    margin-bottom: 3.2rem;
}

label
{
    display: block;
    text-transform: capitalize;
}

.contact-content .grid
{
 gap:6.4rem;
}
input, 
textarea
{
    width:100%;
    padding:1.4rem 2.4rem;
    font-size: 1.7rem;
    letter-spacing: 0.1rem;
}

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

.btn-submit
{
    
    font-size: 1.6rem;
    border: none;
    text-transform: capitalize;
}

input:focus-visible,
textarea:focus-visible
{
   outline: 0.1rem solid  var(--bn-hover-bg-color);
}
/* =======actual contact page end========= */

/* =======footer start===== */

footer
{
    background-color: var(--footer-bg-color);
    padding-top: 15rem;
}

footer *
{
    color:var(--white-color)
}

footer .grid
{
    text-align: right;
}

.footer-subheading
{
   font-size: 2.2rem;
   font-weight: 700;
}

.footer-1--div p
{
    margin:1rem 0 3.2rem 0;
}

.footer-1--div
{
    text-align: left;
    
    & .social-footer--icons
    {
        display: flex;
       gap:2.4rem;
    
    & .fa-brands
    {
         width:5rem; 
        aspect-ratio: 1;
        background-color: var(--supporting-color);
        color: var(--bn-hover-bg-color);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        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;
 

        &:hover
        {
            color: var(--supporting-color);
            background-color: var(--bn-hover-bg-color);
            rotate: 360deg;
        }
        
}
    }
}

/* =======footer end ===== */


/* ======scroll bar start ====== */

/* *width* */
::-webkit-scrollbar
{
    width:1rem;
}

/* *track* */
::-webkit-scrollbar-track
{
    background: var(--supporting-color);
}

/* handle */
::-webkit-scrollbar-thumb
{
    background: var(--main-color);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

/* handle on hover tambe */
::-webkit-scrollbar-thumb:hover
{
   background-color: var(--heading-color);
}


/* ======scroll bar end ====== */

/* ======scroll animation and scroll snap  */


/* ======media queries section start ========== */
 
 @media (max-width:1400px) 
{
    html
    {
        font-size:56.25%;
         /* 1rem = 9px */
    }
    .section-hero img
    {
        width:90%;
    }
} 

@media (max-width: 1220px)
{
   html
   {
    font-size:54%;
   }

   :is(
    .section-about,
   .section-blog,
   .section-course,
   .section-contact--homepage,
   .section-why--choose
   )
   .grid{
    gap:6.4rem;
   }
}


@media (max-width: 1100px)
{
    :is(.section-course, .section-blog) .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;
                background-color: transparent;
                padding: 0;
            }

            & figure::after{
                width:0;
                height: 0;
                background-color: transparent;
                padding: 0;
            }
        }
    }
}

@media (max-width: 998px)
{
    .section-hero{
        height: auto;
        padding-bottom: 5rem;

        & .grid-two--cols
        {
            grid-template-columns: 1fr;

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

                & img{
                    width:50%;
                }
            }
        }
    }
    .section-about .about-div
    {
        text-align: left;
    }

    footer .grid-four--cols{
        grid-template-columns: repeat(3, minmax(100px, 1fr));
        text-align: left;

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

@media (max-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;
    }

    & .navbar-brand {
      text-align: center;
      margin-bottom: 2.4rem;
    }
  }

  .section-hero .grid .hero-heading {
    font-size: 3.8rem;
  }
    .section-why--choose{
        & img {
            width:30%;
        }

        & .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-title
      {
        font-size: 2.4rem;
      }

    :is(.section-contact--homepage) .container:first-child
    {
        padding: 6.4rem 0rem 2.4rem 0rem;
    }
}
/* ======media queries section end ========== */