* {
            margin: 0;
            padding: 0;
            font-family: quiche-sans, sans-serif;
        }
        /* the image gets displayed at siver that covers the entire left side of the page */
        
        #header {
            /* height: 100vh; */
            /* width: 50%; */
            background-image: url(imgs/pasta-5.jpg);
            background-position: center;
            background-size: cover;
        }
        
        body {
            background-color: aliceblue;
        }
        
        .container {
            margin-right: 100px;
            margin-left: 100px;
        }
        
        .logo {
            margin-top: 30px;
            width: 100px;
        }
        
        .header-text {
            max-width: 350px;
            margin-top: 140px;
        }
        
        .container>h1 {
            font-size: 84px;
        }
        
        p.intro {
            color: white;
            font-size: 15px;
        }
        
        p.contact {
            font-size: 15px;
        }
        
        h1.intro {
            font-size: 74px;
            color: white;
        }
        
        h1 {
            font-size: 54px;
        }
        
        .common-btn {
            padding: 18px 40px;
            background: transparent;
            outline: none;
            border: 2px solid rgb(227, 227, 227);
            font-weight: bold;
            cursor: grab;
        }
        
        .first-btn {
            padding: 18px 40px;
            background: transparent;
            outline: none;
            border: 2px solid rgb(227, 227, 227);
            font-weight: bold;
            cursor: grab;
            color: white;
        }
        
        #intro {
            padding: 18px 40px;
            background: transparent;
            outline: none;
            border: 2px solid rgb(227, 227, 227);
            font-weight: bold;
            cursor: grab;
            color: white;
        }
        
        p {
            font-size: 25px;
            /* line-height: 18px; */
            color: #777;
        }
        
        .header-text button {
            margin-top: 20px;
            margin-bottom: 60px;
        }
        
        #sideNav {
            width: 250px;
            height: 100vh;
            position: fixed;
            right: -250px;
            top: 0;
            background: rgb(205, 205, 205);
            z-index: 2;
            transition: .5s;
        }
        
        nav>ul>li {
            list-style: none;
            margin: 50px 20px;
        }
        
        nav>ul>li>a {
            text-decoration: none;
            color: rgb(24, 24, 24);
        }
        
        #menuBtn {
            width: 50px;
            position: fixed;
            right: 65px;
            top: 35px;
            z-index: 2;
            cursor: grab;
        }
        /* about */
        
        #about,
        #offer {
            padding: 100px 0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .about-left-col {
            flex-basis: 50%;
        }
        
        .about-left-col>img {
            width: 100%;
            margin: 50px;
        }
        
        .about-right-col {
            flex-basis: 50%;
            text-align: right;
        }
        
        .about-text {
            max-width: 500px;
            margin-right: 100px;
            display: inline-block;
        }
        
        .about-text>h2 {
            margin: 50px 0 10px;
            font-size: 28px;
            font-style: italic;
        }
        
        about-text>h3 {
            font-size: 20px;
            font-style: italic;
            color: #797;
        }
        /* features */
        
        #features {
            padding-top: 50px;
            padding-bottom: 50px;
        }
        
        .feature-row {
            width: 80%;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        
        .feature-col {
            flex-basis: 25%;
            text-align: center;
        }
        
        .feature-col>img {
            width: 100px;
        }
        
        .feature-col>h4 {
            margin-bottom: 15px;
            font-size: 20px;
            font-weight: 400;
        }
        
        .feature-btn {
            margin: 80px auto 0;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        
        .feature-btn .line {
            text-align: right;
            display: inline-block;
            margin-right: 25px;
        }
        /* courses */
        
        #courses {
            padding: 100px 0;
        }
        
        .course-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .course-right-col {
            flex-basis: 50%;
        }
        
        .course-right-col img {
            width: 100%;
        }
        
        .course-left-col {
            flex-basis: 50%;
        }
        
        .course-text {
            max-width: 350px;
        }
        
        .course-text button {
            margin: 30px 0;
        }
        /* offer  */
        
        #offer button {
            margin: 30px 0;
        }
        /* contact */
        
        .contact-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .contact-left-col,
        .contact-right-col {
            flex-basis: 50%;
        }
        
        .contact-right-col img {
            width: 100%;
        }
        
        form {
            max-width: 350px;
            margin: 30px 0;
        }
        
        form input {
            width: 100%;
            padding: 12px 10px;
            margin-bottom: 5px;
            outline: none;
            box-shadow: none;
            box-sizing: border-box;
            border: 2px solid rgb(232, 232, 232);
        }
        
        .btn-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        
        .btn-box button {
            flex-basis: 48%;
            padding: 18px 0;
        }
        /* footer */
        
        #footer {
            padding: 50px 0 30px;
        }
        
        hr {
            width: 100%;
            border: 0;
            border-top: 1px solid gray;
        }
        
        .footer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .footer-left-col {
            flex-basis: 50%;
            margin-top: 60px;
        }
        
        .footer-right-col {
            flex-basis: 35%;
        }
        
        .footer-links {
            display: flex;
            /* align-items: center; */
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .link-title h4 {
            color: #c2bebf;
            margin-bottom: 20px;
        }
        
        .link-title small {
            font-size: 13px;
            color: #777;
        }
        
        .footer-info {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .footer-logo img {
            width: 100px;
        }
        
        .footer-logo button {
            padding: 12px 38px;
            margin-top: 20px;
            font-size: 10px;
        }
        
        .copyright-text,
        .footer-logo {
            flex-basis: 40%;
        }
        /* social icons */
        
        .social-icons {
            width: 50px;
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50);
            z-index: 1;
        }
        
        .social-icons img {
            display: block;
            width: 20px;
            margin: 0 auto 20px;
            cursor: pointer;
        }
        
        @media only screen and (max-width: 770px) {
            #header {
                background-image: none;
            }
            .container {
                margin-right: 50px;
                margin-left: 50px;
            }
            .logo {
                margin-top: 27px;
                width: 70px;
            }
            .header-text {
                margin-top: 140px;
            }
            h1 {
                font-size: 55px;
                color: black;
            }
            h1.intro {
                font-size: 85px;
                color: black;
            }
            p.intro {
                color: black;
            }
            #menuBtn {
                width: 40px;
                /* position: fixed; */
                right: 50px;
                top: 35px;
                /* z-index: 2;
        cursor: grab; */
            }
            .common-btn {
                padding: 10px 16px;
            }
            .social-icons img {
                /* display: block; */
                width: 14px;
                margin: 15px auto;
                /* cursor: pointer; */
            }
            .about-left-col,
            .about-right-col {
                flex-basis: 100%;
            }
            .about-text {
                margin: 50px 50px 0;
                display: inline-block;
            }
            .about-text h2 {
                font-size: 18px;
            }
            .feature-col {
                flex-basis: 100%;
                margin-bottom: 20px;
            }
            .course-left-col {
                flex-basis: 100%;
            }
            .course-right-col {
                flex-basis: 100%;
                margin-top: 70px;
            }
            .contact-left-col,
            .contact-right-col {
                flex-basis: 100%;
            }
            .contact-right-col {
                margin-top: 50px;
            }
            .footer-left-col {
                flex-basis: 100%;
                /* margin-top: 60px; */
            }
            .footer-right-col {
                flex-basis: 100%;
                /* margin-top: 60px; */
            }
            .link-title {
                flex-basis: 50%;
                margin-bottom: 30px;
            }
            .first-btn {
                padding: 18px 40px;
                background: transparent;
                outline: none;
                border: 2px solid rgb(227, 227, 227);
                font-weight: bold;
                cursor: grab;
                color: rgb(14, 8, 8);
            }
        }