@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');


body{
    display: block;
    background-image: url(https://semnote.in/images/sn-gradient.png);
    background-repeat: no-repeat;
    top: 0%;
    margin: 0 auto;
    width: 1100px;
    height: 768px;
}

/* Header Section */
header{
    display: block;
    margin-top: 35px;
}

.left{
    display: block;
}

.logo{
    width: 130px;
    height: auto;
}

.right{
    display: block;
}

.menu-bar{
    display: block;
    float: right;
    margin-top: -52px;
    margin-left: 600px;
}

ul li{
    display: inline-block;
}

ul li a{
    display: block;
    text-decoration: none;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
}

.whatsapp-icon{
    color: #000;
    font-size: 22px;
    font-weight: bold;
}

/* Semesters section */
#semesters-section{
    display: block;
    margin-top: 90px;
    margin-bottom: -40px;
}

.sem-title{
    display: block;
    font-size: 25px;
    font-family: 'Anton', sans-serif;
    margin-left: 5px;
}

.semesters{
    display: flex;
    width: auto;
    margin-top: 20px;
    margin-left: -20px;
}

.sem{
    /* display: flex; */
    background-color: #000;
    color: #fff;
    padding: 20px;
    width: 30%;
    height: 150px;
    text-decoration: none;
    text-align: center;
    font-size: 25px;
    font-family: 'Luckiest Guy', cursive;
    border-radius: 10px;
    margin-left: 26px;
    margin-bottom: 50px;
    line-height: auto;
}

.sem-high{
    font-size: 50px;
}

.sem-bold{
    font-size: 50px;
}

.sem-link{
    text-decoration: none;
    color: #000;
}

.syllabus{
    background-color: #000;
}


hr{
   margin-top: 10%;
   margin-bottom: 5%;
}

/* Footer section of website */
footer{
    display: block;
    font-family: 'Roboto', sans-serif;
}

#footer-section{
    display: block;
}

.left-footer{
    display: block;
    font-size: 16px;
}

.right-footer{
    display: flex;
    float: right;
    font-size: 20px;
    margin-top: -170px;
}

.product-list{
    display: block;
    line-height: 20px;
}

.product-title{
    display: block;
    font-weight: bold;
    margin-top: 50px;
}

.product-items{
    display: block;
    font-weight: lighter;
    font-size: 18px;
    margin-left: 0;
}

.product-list ul li{
    display: block;
    padding: 7px;
}

.fa-whatsapp{
    color: #000;
    font-weight: bold;
}

/* Copyright & Policy Section */
#site-info-section{
    display: block;
    margin-top: 130px;
}

.copyright-left{
    display: block;
    margin-top: 50px;
    font-size: 17px;
}

.social-right{
    display: block;
    float: right;
    margin-top: -58px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.social-right a{
    font-size: 18px;
    font-weight: lighter;
}

@media screen and (max-width:800px){
    body{
        display: block;
        background-image: url(https://semnote.in/images/sn-gradient.png);
        background-repeat: no-repeat;
        top: 0%;
        margin: 0px auto;
        width: 650px;
        height: 768px;
    }

    /* Header Section */
    header{
        display: block;
        margin-top: 30px;
    }

    .left{
        display: block;
    }

    .logo{
        width: 130px;
        height: auto;
    }

    .right{
        display: block;
    }

    .menu-bar{
        display: block;
        float: right;
        margin-top: -52px;
        margin-left: 0px;
    }

    ul li{
        display: inline-block;
    }

    ul li a{
        display: block;
        text-decoration: none;
        color: #000;
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        font-weight: bold;
        margin-left: 20px;
    }

    .whatsapp-icon{
        color: #000;
        font-size: 22px;
        font-weight: bold;
    }

    /* Semesters section */
    #semesters-section{
        display: inline-block;
        margin-top: 0px;
    }

    .sem-title{
        display: block;
        font-size: 25px;
        font-family: 'Anton', sans-serif;
        margin-left: 5px;
    }

    .semesters{
        display: inline-block;
        width: auto;
        margin-top: 20px;
        margin-left: -20px;
    }

    .semesters a{
        display: inline-block;
        margin-top: -15px;
    }

    .sem{
        display: inline-block;
        background-color: #000;
        color: #fff;
        padding: 20px;
        width: 39.7%;
        height: 100px;
        text-decoration: none;
        text-align: center;
        font-size: 25px;
        font-family: 'Luckiest Guy', cursive;
        border-radius: 10px;
        margin-left: 26px;
        margin-bottom: 50px;
        line-height: auto;
    }

    .sem-high{
        font-size: 50px;
    }

    .sem-bold{
        font-size: 40px;
    }

    .syllabus{
        background-color: #000;
        width: 110%;
    }

    hr{
    margin-top: 10%;
    margin-bottom: 5%;
    }

    /* Footer section of website */
    footer{
        display: block;
        font-family: 'Roboto', sans-serif;
    }

    #footer-section{
        display: block;
    }

    .left-footer{
        display: inline-block;
        font-size: 15px;
        width: 80%;
    }

    .moto{
        font-size: 13px;
    }

    .right-footer{
        display: flex;
        float: right;
        font-size: 15px;
        margin-top: -170px;
    }

    .product-list{
        display: block;
        line-height: 15px;
    }

    .product-title{
        display: block;
        font-weight: bold;
        margin-top: 65px;
    }

    .product-items{
        display: block;
        font-weight: lighter;
        font-size: 15px;
        margin-left: 0;
    }

    .product-list ul li{
        display: block;
        padding: 7px;
    }

    .fa-whatsapp{
        color: #000;
        font-weight: bold;
    }

    /* Copyright & Policy Section */
    #site-info-section{
        display: block;
        margin-top: 80px;
    }

    .copyright-left{
        display: block;
        margin-top: 50px;
        font-size: 14px;
    }

    .social-right{
        display: block;
        float: right;
        margin-top: -50px;
        margin-right: 10px;
        margin-bottom: 20px;
    }

    .social-right a{
        font-size: 15px;
        font-weight: lighter;
    }
}

@media screen and (max-width:480px){
    body{
        display: block;
        background-image: url(https://semnote.in/images/sn-gradient.png);
        background-repeat: no-repeat;
        top: 0%;
        margin: 0px auto;
        width: 90%;
        height: 268px;
    }

    /* Header Section */
    header{
        display: block;
        margin-top: 20px;
    }

    .left{
        display: block;
    }
    
    .logo{
        width: 120px;
        height: auto;
    }

    .right{
        display: block;
    }

    .menu-bar{
        display: block;
        float: right;
        margin-top: -50px;
        margin-left: 0px;
    }

    ul li{
        display: inline-block;
    }

    ul li a{
        display: block;
        text-decoration: none;
        color: #000;
        font-family: 'Roboto', sans-serif;
        font-size: 19px;
        font-weight: bold;
        margin-left: 10px;
    }

    .whatsapp-icon{
        color: #000;
        font-size: 22px;
        font-weight: bold;
    }

    /* Semesters section */
    #semesters-section{
        display: inline-block;
        margin-top: 0px;
    }

    .sem-title{
        display: block;
        font-size: 18px;
        font-family: 'Anton', sans-serif;
        margin-left: 5px;
    }

    .semesters{
        display: inline-block;
        width: auto;
        padding: 5px;
        margin-top: 30px;
        margin-left: -15px;
    }

    .semesters a{
        display: inline-block;
        margin-top: -29px;
        margin-left: 20px;
    }

    .sem{
        display: inline-block;
        background-color: #000;
        color: #fff;
        padding: 15px;
        width: 34%;
        height: 70px;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        font-family: 'Luckiest Guy', cursive;
        border-radius: 10px;
        margin-left: 26px;
        margin-bottom: 50px;
        line-height: auto;
    }

    .sem-high{
        display: inline-block;
        text-align: center;
        margin-top: 5%;
        font-size: 30px;
    }

    .sem-bold{
        font-size: 30px;
    }

    .syllabus{
        background-color: #000;
        width: 80%;
    }

    hr{
    margin-top: 10%;
    margin-bottom: 10%;
    }

    /* Footer section of website */
    footer{
        display: block;
        font-family: 'Roboto', sans-serif;
    }

    #footer-section{
        display: block;
    }

    .left-footer{
        display: inline-block;
        font-size: 15px;
        width: 80%;
    }

    .moto{
        font-size: 13px;
    }

    .right-footer{
        display: flex;
        float: none;
        font-size: 85%;
        margin-top: -50px;
        margin-left: -14%;
        margin-bottom: 20px;
    }

    .product-list{
        display: block;
        line-height: 15px;
    }

    .product-title{
        display: block;
        font-weight: bold;
        margin-top: 80px;
    }

    .product-items{
        display: block;
        font-weight: lighter;
        font-size: 14px;
        line-height: 20px;
        margin-left: 0;
    }

    .product-list ul li{
        display: block;
        padding: 7px;
    }

    .fa-whatsapp{
        color: #000;
        font-weight: bold;
    }

    /* Copyright & Policy Section */
    #site-info-section{
        display: block;
        margin-top: 40px;
    }

    .copyright-left{
        display: block;
        margin-top: 50px;
        font-size: 13px;
    }

    .social-right{
        display: block;
        float: right;
        margin-top: -48px;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .social-right a{
        display: block;
        font-size: 13px;
        font-weight: lighter;
    }
}