@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Jost:ital,wght@0,100..900;1,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=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,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=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed: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;
    /* 1rem=10px */
}

body{
   overflow-x: hidden; 
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:"Poppins", sans-serif;
}
p,
li,
a,label{
    font-family: "Urbanist", serif;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    font-weight: 400px;
    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:#ffffff; */
    --bg-color:#f7fcff;
    --heading-color:#000a19;
    --hero-heading-color:#003b99;
    --white-color:#ffffff;
    --para-color:#504e4d;
    --bnt-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:start}
.section-common--title{margin:2rem 0 1rem;font-size:18px}
.container{max-width:142rem;margin:0 auto;padding:9.6rem 2.4rem}
:is( .section-about,.section-blog,.section-course,.section-contact--homepage,.section-why--choose,.section-contact) 
.container:first-child{padding:6.4rem 0 2.4rem}
.grid{display:grid;align-items:center}
.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)}



.c1{
    max-width:142rem;
    margin:0 auto;
    padding:9.6rem 2.4rem;
    margin-left: 11rem;
}

/* heading */
.sh1{
 color:var(--heading-color);
 margin-top: -1rem;
 /* margin-bottom: -25rem; */
}

.sh2{
   max-width:142rem;
   margin:0 auto;
   margin-top: -1rem;
   padding:9.6rem 2.4rem; 
   display:grid;
   align-items:center;
   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);
}
.fa-solid{
    padding:2.4rem;
    background-color:var(--supporting-color);
    font-size:2.4rem;
    border-radius:50%;
    color:var(--hero-heading-color);
   
}

.btn{
  display:inline-block;
  padding:1.2rem 3.2rem;
  background-color: var(--main-color);
  color:#fcfbfa;
  font-size: 2rem;;
  font-weight: 600;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;

  -o-border-radius: 2rem;
  
 /* background-color: rgb(76, 75, 75); */
border:none;
background-color:  rgb(28, 94, 226); font-weight: 600;font-size:1.4rem;
 &:hover {
    background-color: rgb(76, 75, 75);
  }


}

.btn_main{
display:inline-block;
 justify-self:center;

   color:#fcfbfa;
    border-radius: 2rem;
 background-color: rgb(28, 94, 226);
 width:30rem;margin-top: 3rem; border-radius: 4rem;
 padding:1.6rem;
 font-weight: 600;
 font-size: 2rem;;
 border:none;
  &:hover {
    background-color: rgb(76, 75, 75);
  }
}
.btn_more{
    padding:1rem 3rem;
    display:inline-block;
 justify-self:center;
   color:#fcfbfa;
    border-radius: 2rem;
     font-weight: 600;
 font-size: 2rem;;
 border:none;
  width:20rem;
   margin-left: 36rem;
   background: rgb(28, 94, 226);
    &:hover {
    background-color: rgb(76, 75, 75);
  }
}

.btn.hovered , .btn_main.btn.hovered  , .btn_more.hovered{
background-color: rgb(76, 75, 75) ;
cursor:pointer;
box-shadow:var(--btn-box-shadow);
}
.btni{
    width:26rem;
     display:inline-block;
     font-size:2rem;
  padding:1.2rem 3.2rem;
  background-color: var(--main-color);
  color:#fcfbfa;
  font-weight: 600;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;

  -o-border-radius: 2rem;
  
 background-color: rgb(28, 94, 226);
 margin-bottom: 3rem;
 margin-top: -2rem;;
border:none;
 &:hover {
    background-color: rgb(76, 75, 75);
  }
}


/* states */
.btn:hover{
background-color: rgb(235, 230, 230);
cursor:pointer;
box-shadow:var(--btn-box-shadow);
}

/*****navbar Section *****/ 
.section-navbar{
    width:100%;
    background: #fff;
    box-shadow:rgba(0,0,0,0.05)0px 6px 24px 0px ,
    rgba(0,0,0,0.08)0px 0px 0px 1px;
    position: fixed; 
    top: 0;
     left: 0; 
     right: 0; 
      /* background:#fff;  */
      z-index: 1000;
      border: solid 0.1rem #959494;

}
.section-navbar .container{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem  0;
    /* margin-right:30rem ; */
}
/* .section-navbar .navbar-brand {
    margin-left: 7rem;
} */

.section-navbar img{
    width:59%;height:100px;object-fit: cover;margin-top: 2px;
    margin-left:7rem;
}
.section-navbar .navbar ul {
    display:flex;
    gap:6rem;
    text-transform: capitalize;
    /* margin-left:-2rem ; */
    margin-top: -1.5rem;
    
   & li a{
    color:var(--heading-color);
    text-transform: uppercase;
    display: inline-block;
    font-weight: 600;
   position:relative;
   &::after{
    content:"";
    width:0%;
    border-bottom:1px solid var(--main-color);
    position:absolute;
    bottom:-0.3rem;
    left:0;
     transition:all 0.3s linear; 
    
}

   } 
   & li a:hover:after{
    width:100%;
   }
 

}


.dropdown{
       display: none; /* Hidden on page load */
        position: absolute;
        top: 100%;
        left: 0;
        height:30rem;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        grid-template-columns: repeat(3, 200px);
        gap: 20px;

       & a{
margin-top:2.5rem;text-decoration: none; color: #444;font-weight: 600;font-size: 1.4rem; margin-bottom: 8px; display: block;
        }
}


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

/***** hero Section *****/ 
main{
    position:relative;
   
}

.section-hero{
      background-image: url('https://storage.planner5d.com/c/0c966f05c517554d7fd54cea895ecfbd.jpg?v=1649766100');
  min-height: 100vh;
  width:100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 80%;
}

/* @media (width >=700px) {
 
} */
  .section-hero {
  background:
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)),
    url('https://storage.planner5d.com/c/0c966f05c517554d7fd54cea895ecfbd.jpg?v=1649766100');
  min-height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 80%;
   animation: zoomIn 3s ease-out forwards; /* Apply animation */
}


 /* @media (width >=700px) {
  @keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}
}  
}  */
.section-hero--content{
    display:grid;
    justify-content: center;
    align-content:center; 
    margin-top: 20rem;
}
.section-hero .grid{
    align-items:center;
    gap:6.4rem;
    & .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{
        line-height: 1.5;
        color:var(--hero-heading-color);
        font-weight: 600;
        color: white; 
        /* text-shadow: 
  -1px -1px 0 black,  
   1px -1px 0 black,
  -1px  2px 0 black,
   1px  2px 0 black; */
   font-family:Poppins,sana-serif;
   font-size: 50px;
    }
    & .hero-para{
        color:var(--white-color);
         margin:2rem 0 4rem 0;      /*Our focus should toward clicking that button hence margin on bottom twice margin on the top*/
    }
    }
.section-hero--images img{
 width:100%;
 height:auto;
 transform: scaleX(-1);



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

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

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

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


/***** Start About Section  *****/  
.about-div .about-div1
{
    margin-top: -10rem;
}
.sh2 {
    gap:2.4rem;
    & img{
        margin-top: -10rem;
    }
}
/* .sh2{
    background: #f3f1f1;
} */
.sh2 .about-div{
    text-align:center;
    
}
.section-about1 .grid{
    gap:2.4rem;
}

.about-div img{
    /*padding:2.4rem;
    *//*background-color:var(--supporting-color);
    */position:relative;
    width:100%;
    height:250px;
    object-fit:cover;
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
   
}

.about-div{
    box-shadow:rgba(100,100,111,0.2)0px 7px 29px 0px;;
}



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


/***** start Course section *****/ 

.about-div1 {
    margin-top: -9rem;
}

.section-about .grid{
    gap:2.4rem;
}
.about-div1 img{
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
/* End  Section *****/ */
/***** contact home Section *****/
.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:10rem;
    padding:0 3.2rem;
     position:relative; 
    background-color: var(--white-color);
    
    &grid{
   
   align-items:center;
 gap:6.4rem; 
   
  }
}
.contact-title{
    font-size:3.8rem;
    line-height:1.2;
}
.contact-content p{
    margin:1.2rem 0 2.4rem 0;
}
.contact-image img{
    width:90%;
    height:auto;
}
.section-contact--homepage .fa-solid{
padding:0;
color:var(--white-color); /*this icon work diff for bg and color so don't confuse*/
background-color: var(--main-color);
}

/***** End contact home Section *****/

footer{
    margin-top: -14rem;
}


/*****  Extra properties *****/
input:focus-visible,textarea:focus-visible{
    outline:0.1rem solid var(--bnt-hover-bg-color);
}
/* scrollbar */
::-webkit-scrollbar{
    width:1rem;
}
::-webkit-scrollbar-track{
    background:var(--supporting-color);
}
::-webkit-scrollbar-thumb{
    background-color: var(--main-color);
    border-radius: 5rem;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    -o-border-radius: 5rem;
}

/***** End  Extra properties *****/