@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*
{
    margin:0px;
    padding:0px;
}
footer
{
    background-image: url("img/footer.png");
    color:white;
    padding:50px 0px;
    background-position: center;
    background-size: cover;
}
#footerul li
{
    text-decoration: none;
}
footer form input, form select
{
    padding:8px;
    margin:5px;
    border:2px solid white;
    background-color: transparent;
    width:90%;
    border-radius: 15px 0px 15px 0px;
}
footer form input::placeholder
{
    color:white;
}
footer form input[type="submit"]
{
    background-color: white;
    font-size: 20px;
    font-weight: 400;
}
footer form input[type="submit"]:hover
{
    background-color: transparent;
    border:2px solid white;
    color:white;
}
footer a
{
    font-size: 20px;
    font-weight: 500;
    color:white;
    letter-spacing: 1px;
}
footer a:hover
{
    color:black;
}
body
{
    font-family: 'Poppins', sans-serif;;
}
#bannerImg
{
    background-image: url("homeimg/advanced-excel-home-page-banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#bannerImg .container
{
    padding:150px 0px;
}
#bannerImg h1
{
 color:White;
 font-size: 70px;
}
#bannerImg p
{
    color:white;
    font-size: 20px;
}
/* #bannerImg a
{
    background-color: white;
    color:black;
    text-decoration: none;
    padding:15px 20px;
    font-size: 20px;
    border-radius: 25px;
} */

/* section2 */
#section2   
{
  padding:50px 0px;  
}
#section2 h2, #section3 h2
{
    font-size: 90px;
    font-weight: 700;
    color:#E5E5E5;
    margin:0px;
}

#section2 h2~p
{
    font-size: 30px;
    font-weight: 500;
    margin-top:-20px;
}
#section2 h3~p
{
    font-size: 20px;
    color:rgb(75, 75, 75);
}
#section3 h2~p
{
    font-size: 25px;
    font-weight: 600;
    margin-top:-70px;
}
.box{
    text-align: center;
    box-shadow: 0px 0px 10px 1px rgb(185, 185, 185);
    padding:0px 10px 10px 20px;
    border-radius: 20px;
}
.box img
{
    box-shadow: 0px 0px 10px 1px rgb(185, 185, 185);
    padding:10px;
    width: 100px;
    border-radius: 50px;
    margin-top:-50px;
    background-color: white;
    margin-bottom: 20px;
}
.box h3
{
    font-size: 25px;
    margin-bottom: 20px;
}
.box p
{
    font-size: 20px;
    color:rgb(75, 75, 75);
}
#aboutHome
{
    font-size: 20px;
    color:rgb(75, 75, 75);
}

#section4 
{
    padding:50px;
}
#section4 h2
{
    font-size: 90px;
    font-weight: 700;
    color:#E5E5E5;
    margin:0px;
    text-align: right;
}
#section4 h2~p
{
    font-size: 25px;
    font-weight: 600;
    margin-top:-70px;
    text-align: right;   
}

#section4 .courseBox
{
    padding:10px;
    margin:30px;
    box-shadow: 0px 0px 10px 1px rgb(185, 185, 185);

}

.courseBox img
{
    width:100%;
    margin-bottom: 20px;
}
.courseBox h3
{
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 20px;
}
#section4 .courseBox p
{
    font-size: 18px;
    color:rgb(75, 75, 75);

}
img.star
{
    width:20px;
}
.courseBox a
{
    margin: 10px 0px;
    color:rgb(75, 75, 75);
    font-size: 20px;
    text-align: right;
    display: block;
    font-weight: 500;
}

#section5
{
   padding:50px 0px; 
}
#section5 img
{
    width:100%;
}
#section6
{
    padding: 50px;
}
#section6 h2
{
    font-size: 90px;
    font-weight: 700;
    color:#E5E5E5;
    margin:0px;
}
#section6 h2~p
{
    font-size: 25px;
    font-weight: 600;
    margin-top:-70px;  
}
#section6 img
{
    width: 100%;
    
}

#section7
{
    padding: 50px 0px;
}
#section7 h2
{
    font-size: 50px;
    font-weight: 500;
}
#section7 form
{
    padding:20px;
}
#section7 input, #section7 select
{
    width:80%;
    padding:10px 10px;
    margin-bottom: 20px;
    border-radius: 20px;
    border:none;
    box-shadow: 0px 0px 2px 2px rgb(224, 224, 224);
}

#section7 form input[type="submit"]
{
    width:50%;
    align-items: left;
}

.btnall
{
    background: #FFFFFF;
box-shadow: inset -4px 4px 13px rgba(0, 0, 0, 0.37);
border-radius: 25px;
background-color: white;
color:black;
text-decoration: none;
padding:15px 20px;
font-size: 20px;

}
.btnall:hover
{
    box-shadow: inset -4px 4px 13px rgba(224, 224, 224, 0.822);
    background-color: #1EA444;
    color:white;
    text-decoration: none;
}


@media only screen and (min-width:0px) and (max-width:360px)
{

    .btnMenu.click{
        left: 260px;
      }

      .sidebar{
        width: 250px;
        left: -250px;
      }
   #section1 img
   {
       width: 90%;
   }
   #section0
   {
       width:100%;
   }

    #section1 .container
   {
       padding:100px 5px;
   }
    #section1 h1
    {
        font-size: 30px;

    }
    #section1 p
    {
        font-size: 18px;
    }
    .btnall{
        font-size: 15px;
    }
    /* section2 */
    #section2
    {
        padding:20px 5px;
    }
    #section2 h2
    {
        font-size: 50px;
    }
    #section2 h2~p,  #section2 h3~p
    {
        font-size: 20px;
        margin:0px
    }
    #section2 h3
    {
        font-size: 22px;
        font-weight: 600;
    }
    #section3 
    {
        padding:0px 5px;
    }
    #section3 .box
    {
        margin-top:80px;
        
    }
    #section3 #break
    {
        display: none;
    }
    /* section4 */
    #section4
    {
        padding:20px 5px;
    }
    #section4 h2, #section6 h2
    {
        font-size: 70px;
        text-align: left;
    }
    #section4 h2~p, #section6 h2~p
    {
        text-align: left;
        margin-top:-59px;
    }
    #section4 .courseBox
    {
        margin-left:0;
        margin-right: 0;
        width:100%;
    }

    /* section5 */
    #section5 img
    {
        width: 100%;
    }
    #section6
    {
        padding:20px 5px;
    }
    #bannerImg
    {
        width: 100%;
    }

    #section6 img
    {
        width: 100%;
        margin-top:5px;
    }

    #section7 h2
    {
        font-size: 35px;
    }
    #section7 .box
    {
        width: 100%;
        padding:0px 0px;
    }
    #section7 form
    {
        padding: 20px 0px;
    }
}

@media only screen and (min-width:361px) and (max-width:420px)
{
    #section1 img
   {
       width: 90%;
   }
   #section0
   {
       width:100%;
   }

    #section1 .container
   {
       padding:100px 5px;
   }
    #section1 h1
    {
        font-size: 30px;

    }
    #section1 p
    {
        font-size: 18px;
    }
    .btnall{
        font-size: 15px;
    }
    /* section2 */
    #section2
    {
        padding:20px 5px;
    }
    #section2 h2
    {
        font-size: 50px;
    }
    #section2 h2~p,  #section2 h3~p
    {
        font-size: 20px;
        margin:0px
    }
    #section2 h3
    {
        font-size: 22px;
        font-weight: 600;
    }
    #section3 
    {
        padding:0px 5px;
    }
    #section3 .box
    {
        margin-top:80px;
        
    }
    #section3 #break
    {
        display: none;
    }
    /* section4 */
    #section4
    {
        padding:20px 5px;
    }
    #section4 h2, #section6 h2
    {
        font-size: 70px;
        text-align: left;
    }
    #section4 h2~p, #section6 h2~p
    {
        text-align: left;
        margin-top:-59px;
    }
    #section4 .courseBox
    {
        margin-left:0;
        margin-right: 0;
        width:100%;
    }

    /* section5 */
    #section5 img
    {
        width: 100%;
    }
    #section6
    {
        padding:20px 5px;
    }
    #bannerImg
    {
        width: 100%;
    }

    #section6 img
    {
        width: 100%;
        margin-top:5px;
    }

    #section7 h2
    {
        font-size: 35px;
    }
    #section7 .box
    {
        width: 100%;
        padding:0px 0px;
    }
    #section7 form
    {
        padding: 20px 0px;
    }
}



@media only screen and (min-width:421px) and (max-width:768px)
{
    #section1 img
   {
       width: 90%;
   }
   #section0
   {
       width:100%;
   }

    #section1 .container
   {
       padding:100px 5px;
   }
    #section1 h1
    {
        font-size: 30px;

    }
    #section1 p
    {
        font-size: 18px;
    }
    .btnall{
        font-size: 15px;
    }
    /* section2 */
    #section2
    {
        padding:20px 5px;
    }
    #section2 h2
    {
        font-size: 50px;
    }
    #section2 h2~p,  #section2 h3~p
    {
        font-size: 20px;
        margin:0px
    }
    #section2 h3
    {
        font-size: 22px;
        font-weight: 600;
    }
    #section3 
    {
        padding:0px 5px;
    }
    #section3 .box
    {
        margin-top:80px;
        
    }
    #section3 #break
    {
        display: none;
    }
    /* section4 */
    #section4
    {
        padding:20px 5px;
    }
    #section4 h2, #section6 h2
    {
        font-size: 70px;
        text-align: left;
    }
    #section4 h2~p, #section6 h2~p
    {
        text-align: left;
        margin-top:-59px;
    }
    #section4 .courseBox
    {
        margin-left:0;
        margin-right: 0;
        width:100%;
    }

    /* section5 */
    #section5 img
    {
        width: 100%;
    }
    #section6
    {
        padding:20px 5px;
    }
    #bannerImg
    {
        width: 100%;
    }

    #section6 img
    {
        width: 100%;
        margin-top:5px;
    }

    #section7 h2
    {
        font-size: 35px;
    }
    #section7 .box
    {
        width: 100%;
        padding:0px 0px;
    }
    #section7 form
    {
        padding: 20px 0px;
    }
}