@charset "utf-8";
        * {
            box-sizing: border-box;
        }
        /* start navbar coding here */
        
        .top {
            background-color: black;
        }
        
        .top .laptop {
            font-size: 35px;
            /* box-shadow: 0px 0px 2px grey; */
        }
        
        .laptop {
            color: red;
        }
        
        .top #brand {
            font-size: 25px;
            font-family: sans-serif;
            font-weight: bold;
            color: white;
            /* box-shadow: 0px 0px 2px grey; */
        }
        
        .top ul li a {
            font-family: sans-serif;
            color: white;
            font-weight: bold;
        }
        
        .dropdown-menu {
            background-color: black;
        }
        /* end navbar coding here */
        /* start hero section coding here */
        
        .hero {
            background-color: black;
            overflow: hidden;
            padding-bottom: 0;
        }
        
        .add-header {
            font-size: 60px;
            color: red;
            text-shadow: 5px 5px 2px black;
            position: relative;
            top: 100px;
            margin-bottom: 50px;
            font-family: sans-serif;
            font-weight: bold;
        }
        
        .add-desc {
            font-size: 35px;
            color: white;
            text-shadow: 2px 0px 2px #fff;
            text-shadow: 5px 5px 2px black;
            position: relative;
            top: 90px;
        }
        /* end hero section coding here */
        /* start service section here */
        
        .service {
            background-color: black;
        }
        
        .box-one {
            width: 100%;
            border: 2px solid white;
            background-color: white;
            box-shadow: 1px 2px 4px white;
        }
        
        .box-two {
            width: 100%;
            border: 2px solid white;
            background-color: white;
            box-shadow: 1px 2px 4px white;
            padding-top: 3px;
        }
        /* end service section here */
        /* start project section here */
        
        .project {
            background: #ee0979;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #ff6a00, #ee0979);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        
        .work-box {
            width: 100%;
            box-shadow: 0px 0px 5px white;
        }
        
        .text-one {
            text-shadow: 0px 0px 5px black;
        }
        
        .text {
            text-shadow: 0px 0px 5px black;
            font-size: 17px;
            text-align: justify;
        }
        /* end project section here */
        /* start clients coding here */
        
        .clients {
            background-color: black;
        }
        
        .box-mod {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            border-radius: 50%;
            border: 1px solid black;
            margin-bottom: 10px;
            padding: 2px;
        }
        
        .box-mod img {
            border-radius: 50%;
        }
        
        .client-icon {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            padding-top: 5px;
            margin-top: 10px;
            color: red;
            font-size: 20px;
        }
        /* end clients coding here */
        /* start portfolio coding here */
        
        .portfolio {
            background-color: white;
            overflow: hidden;
        }
        
        .portfolio span {
            font-size: 21px;
            font-weight: bold;
            color: blue;
        }
        
        .bio div {
            font-weight: bold;
            font-size: 21px;
        }
        
        .box-mypic {
            width: 50%;
        }
        
        .box-mypic img {
            box-shadow: 4px 4px 15px #ccc;
            border-radius: 5%;
        }
        
        .f-icon {
            font-size: 30px;
            padding: 5px;
            color: red;
            text-shadow: 2px 5px 5px #ccc;
        }
        
        .portfolio .bio {
            text-align: justify;
            font-size: 18px;
            color: black;
            font-weight: normal;
            letter-spacing: 2px;
        }
        
        html {
            scroll-behavior: smooth;
        }
        /* end portfolio coding here */
        /* start pricing coding here */
        
        .pricing {
            background-color: black;
        }
        
        .pricing p {
            font-size: 35px;
            text-align: center;
            color: red;
            font-family: sans-serif;
            font-weight: bold;
        }
        
        .one {
            background: #000046;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #1CB5E0, #000046);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            color: white;
        }
        
        .body {
            background: #ee0979;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #ff6a00, #ee0979);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            color: white;
            font-weight: bold;
            font-size: 20px;
        }
        
        .footer {
            background: #000046;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #1CB5E0, #000046);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            color: white;
        }
        
        .footer a {
            text-decoration: none;
            color: black;
            font-weight: bold;
        }
        
        .header-one {
            background: #ff4b1f;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #ff9068, #ff4b1f);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #ff9068, #ff4b1f);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        
        .footer-one {
            background: #ff4b1f;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #ff9068, #ff4b1f);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #ff9068, #ff4b1f);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        
        .body-one {
            color: white;
            font-weight: bold;
            font-size: 20px;
            background-color: black;
        }
        
        .footer-one a {
            text-decoration: none;
            font-weight: bold;
            color: black;
        }
        
        .header-two {
            background: #00bf8f;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #001510, #00bf8f);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #001510, #00bf8f);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        
        .body-two {
            background: #833ab4;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
        
        .footer-two {
            background: #00bf8f;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #001510, #00bf8f);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #001510, #00bf8f);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        
        .footer-two a {
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        
        .hero a {
            text-decoration: none;
        }
        /* end pricing coding here */
        /* start footer coding here */
        
        .footer {
            background-image: linear-gradient(to right top, #f8320c, #ff0045, #ef007b, #bb00b7, #1712eb);
        }
        /* end footer coding here */
        /* start form coding here */
        
        .form {
            background-color: white;
        }
        
        .mobile {
            width: 200px;
            height: 200px;
        }
        /* end form coding here */
        /* start modal coding here */
        
        .modal-header .laptop {
            font-size: 35px;
            font-weight: bold;
        }
        
        .modal-body input {
            border: 2px inset black;
            outline: none;
            border-radius: 13px;
        }
        /* end modal coding here */