@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
             * {
                 margin: 0;
                 padding: 0;
                 box-sizing: border-box;
                 text-decoration: none;
             }
             
             html {
                 scroll-behavior: smooth;
             }
             
             .max-width {
                 max-width: 1300px;
                 padding: 0 80px;
                 margin: auto;
             }
             /*navbar styling*/
             
             .navbar {
                 position: fixed;
                 width: 100%;
                 z-index: 999;
                 padding: 30px 0;
                 font-family: 'Ubuntu', sans-serif;
                 transition: all 0.3s ease;
                 background: rgb(26, 26, 27);
             }
             
             .navbar .sticky {
                 padding: 15px 0;
                 background: rgb(26, 26, 27);
             }
             
             .navbar .max-width {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
             }
             
             .navbar .logo a {
                 color: #fff;
                 font-size: 35px;
                 font-weight: 600;
                 transition: .5s;
                 padding: 10px;
             }
             
             .navbar .logo a span {
                 color: crimson;
                 transition: all 0.3s ease;
             }
             
             .navbar .sticky .logo a span {
                 color: #fff;
             }
             
             .navbar .menu li {
                 list-style: none;
                 display: inline-block;
             }
             
             .navbar .menu li a {
                 display: block;
                 color: #fff;
                 font-size: 18px;
                 font-weight: 500;
                 margin-left: 25px;
                 transition: .5s;
                 padding: 5px;
             }
             
             .navbar .menu li a:hover {
                 color: crimson;
                 background: rgb(0, 0, 0);
                 padding: 8px 16px;
                 margin-top: 20px;
                 border-radius: 6px;
             }
             
             .scroll-up-btn {
                 position: fixed;
                 height: 45px;
                 width: 42px;
                 background: crimson;
                 right: 30px;
                 bottom: 10px;
                 text-align: center;
                 line-height: 45px;
                 color: #fff;
                 z-index: 9999;
                 font-size: 30px;
                 border-radius: 6px;
                 cursor: pointer;
                 opacity: 0;
                 pointer-events: none;
                 transition: all 0.3s ease;
             }
             
             .scroll-up-btn.show {
                 bottom: 30px;
                 opacity: 1;
                 pointer-events: auto;
             }
             /*menu btn styling*/
             
             .menu-btn {
                 color: #fff;
                 font-size: 25px;
                 cursor: pointer;
                 display: none;
             }
             /*home section styling*/
             
             .home {
                 display: flex;
                 background: url("photos/images9.jpeg") no-repeat center;
                 height: 100vh;
                 color: #fff;
                 min-height: 500px;
                 font-family: 'Ubuntu', sans-serif;
                 text-align: right;
                 justify-content: right;
             }
             
             .home .max-width {
                 margin: auto 10px auto 0;
             }
             
             .text-1 {
                 font-size: 27px;
             }
             
             .text-2 {
                 font-size: 55px;
                 font-weight: 600;
                 margin-left: 0;
             }
             
             .text-3 {
                 font-size: 32px;
                 margin: 5px 0;
             }
             
             .text-3 span {
                 color: crimson;
                 font-weight: 500;
             }
             
             .home .home-content a {
                 display: inline-block;
                 background: crimson;
                 color: #fff;
                 font-size: 20px;
                 padding: 8px 25px;
                 margin-top: 20px;
                 border-radius: 6px;
                 border: 2px solid crimson;
                 transition: all 0.3s ease;
             }
             
             .home .home-content a:hover {
                 color: #fff;
                 background: none;
             }
             /*all similar styling content*/
             
             section {
                 padding: 100px 0;
             }
             
             .about,
             .services,
             .skills,
             .project,
             .contact,
             footer,
             .dev {
                 font-family: 'Poppins', sans-serif;
             }
             
             .about .about-content,
             .services .serv-content,
             .skills .skills-content,
             .contact .contact-content,
             .dev .dev-content {
                 display: flex;
                 flex-wrap: wrap;
                 align-items: center;
                 justify-content: space-between;
             }
             
             section .title {
                 position: relative;
                 text-align: center;
                 font-size: 40px;
                 font-weight: 500;
                 margin-bottom: 60px;
                 padding-bottom: 20px;
                 font-family: 'Ubuntu', sans-serif;
             }
             
             section .title::before {
                 content: "";
                 position: absolute;
                 bottom: 0;
                 left: 50%;
                 width: 180px;
                 height: 3px;
                 background: #111;
                 transform: translateX(-50%);
             }
             
             section .title::after {
                 position: absolute;
                 bottom: -12px;
                 left: 50%;
                 font-size: 20px;
                 color: crimson;
                 padding: 5px;
                 background: #fff;
                 transform: translateX(-50%);
             }
             /* About section styling */
             
             .about .title::after {
                 content: "who I am";
             }
             
             .about .about-content .left {
                 width: 45%;
             }
             
             .about .about-content .left img {
                 height: 400px;
                 width: 400px;
                 object-fit: cover;
                 border-radius: 6px;
             }
             
             .about .about-content .right {
                 width: 55%;
             }
             
             .about .about-content .right .text {
                 font-size: 25px;
                 font-weight: 600;
                 margin-bottom: 10px;
             }
             
             .about .about-content .right .text span {
                 color: crimson;
             }
             
             .about .about-content .right p {
                 text-align: justify;
             }
             
             .about .about-content .right a {
                 display: inline-block;
                 background: crimson;
                 color: #fff;
                 font-size: 20px;
                 font-weight: 500;
                 padding: 10px 30px;
                 margin-top: 20px;
                 border-radius: 6px;
                 border: 2px solid crimson;
                 transition: all 0.3s ease;
             }
             
             .about .about-content .right a:hover {
                 color: crimson;
                 background: none;
             }
             /*services section styling*/
             
             .services,
             .project,
             .dev,
             .grap {
                 color: #fff;
                 background: #111;
             }
             
             .services .title::before,
             .project .title::before,
             .dev .title::before,
             .grap .title::before {
                 background: #fff;
             }
             
             .services .title::after,
             .project .title::after {
                 background: #111;
                 content: "what I provide";
             }
             
             .services .serv-content .card {
                 width: calc(33% - 20px);
                 background: #222;
                 text-align: center;
                 border-radius: 6px;
                 padding: 20px 25px;
                 cursor: pointer;
                 transition: all 0.3s ease;
             }
             
             .services .serv-content .card:hover {
                 background: crimson;
             }
             
             .services .serv-content .card .box {
                 transition: all 0.3s ease;
             }
             
             .services .serv-content .card:hover .box {
                 transform: scale(1.05);
             }
             
             .services .serv-content .card i {
                 font-size: 50px;
                 color: crimson;
                 transition: color 0.3s ease;
             }
             
             .services .serv-content .card:hover i {
                 color: #fff;
             }
             
             .services .serv-content .card .text {
                 font-size: 25px;
                 color: antiquewhite;
                 font-weight: 500;
                 margin: 10px 0 7px 0;
             }
             /*skills section styling*/
             
             .skills .title::after {
                 content: "what I know";
             }
             
             .skills .skills-content .column {
                 width: calc(50% - 30px);
             }
             
             .skills .skills-content .left .text {
                 font-size: 20px;
                 font-weight: 600;
                 margin-bottom: 10px;
             }
             
             .skills .skills-content .left p {
                 text-align: justify;
             }
             
             .skills .skills-content .left a {
                 display: inline-block;
                 background: crimson;
                 color: #fff;
                 font-size: 18px;
                 font-weight: 500;
                 padding: 8px 16px;
                 margin-top: 20px;
                 border-radius: 6px;
                 border: 2px solid crimson;
                 transition: all 0.3s ease;
             }
             
             .skills .skills-content .left a:hover {
                 background: none;
                 color: crimson;
             }
             
             .skills .skills-content .right .bars {
                 margin-bottom: 15px;
             }
             
             .skills .skills-content .right .info {
                 display: flex;
                 margin-bottom: 5px;
                 align-items: center;
                 justify-content: space-between;
             }
             
             .skills .skills-content .right span {
                 font-family: 500;
                 font-size: 18px;
             }
             
             .skills .skills-content .right .line {
                 height: 5px;
                 width: 100%;
                 background: lightgrey;
                 position: relative;
             }
             
             .skills .skills-content .right .line::before {
                 content: "";
                 position: absolute;
                 height: 100%;
                 width: 80%;
                 left: 0;
                 top: 0;
                 background: crimson;
             }
             
             .skills .skills-content .right .html::before {
                 width: 90%;
             }
             
             .skills .skills-content .right .css::before {
                 width: 70%;
             }
             
             .skills .skills-content .right .js::before {
                 width: 70%;
             }
             
             .skills .skills-content .right .php::before {
                 width: 80%;
             }
             
             .skills .skills-content .right .ill::before {
                 width: 80%;
             }
             /* project styling start*/
             
             .project .title::after {
                 content: "what I've done";
             }
             
             .project .carousel .card {
                 background: #222;
                 border-radius: 6px;
                 padding: 25px 35px;
                 text-align: center;
                 transition: all 0.3s;
             }
             
             .project .carousel .card:hover {
                 background: crimson;
             }
             
             .project .carousel .card .box {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
                 transition: all 0.3s ease;
             }
             
             .project .carousel .card:hover .box {
                 transform: scale(1.05);
             }
             
             .project .carousel .card .text {
                 font-size: 16px;
                 font-weight: 500;
                 margin: 10px 0 7px 0;
             }
             
             .project .carousel .card img {
                 height: 170px;
                 width: 200px;
                 object-fit: cover;
                 border-radius: 8px;
                 border: 2px solid crimson;
                 transition: all 0.3s ease;
             }
             
             .project .carousel .card:hover img {
                 border-color: #fff;
             }
             
             .project .view {
                 display: inline-block;
                 background: crimson;
                 color: #fff;
                 font-size: 20px;
                 padding: 8px 25px;
                 margin-top: 20px;
                 border-radius: 6px;
                 border: 2px solid crimson;
                 transition: all 0.3s ease;
             }
             
             .project .view:hover {
                 color: #fff;
                 background: none;
             }
             
             .owl-dots {
                 text-align: center;
                 margin-top: 20px;
             }
             
             .owl-dot {
                 height: 13px;
                 width: 13px;
                 margin: 0 5px;
                 outline: none!important;
                 border-radius: 50%;
                 border: 2px solid crimson!important;
                 transition: all 0.3s ease;
             }
             
             .owl-dot.active {
                 width: 35px;
                 border-radius: 14px;
             }
             
             .owl-dot.active,
             .owl-dot:hover {
                 background: crimson!important;
             }
             /*contact section styling*/
             
             .contact .title::after {
                 content: "get in touch";
             }
             
             .contact .contact-content .column {
                 width: calc(50% - 30px);
             }
             
             .contact .contact-content .text {
                 font-size: 20px;
                 font-weight: 600;
                 margin-bottom: 10px;
             }
             
             .contact .contact-content .left p {
                 text-align: justify;
             }
             
             .contact .contact-content .left .icons {
                 margin: 10px 0;
             }
             
             .contact .contact-content .row {
                 display: flex;
                 height: 65px;
                 align-items: center;
             }
             
             .contact .contact-content .row .info {
                 margin-left: 30px;
             }
             
             .contact .contact-content .row i {
                 font-size: 25px;
                 color: crimson;
             }
             
             .contact .contact-content .info .head {
                 font-weight: 500;
             }
             
             .contact .contact-content .info .sub-title {
                 color: #333;
             }
             
             .contact .right form .fields {
                 display: flex;
             }
             
             .contact .right form .field,
             .contact .right form .fields .field {
                 height: 45px;
                 width: 100%;
                 margin-bottom: 15px;
             }
             
             .contact .right form .textarea {
                 height: 80px;
                 width: 100%;
             }
             
             .contact .right form .name {
                 margin-right: 10px;
             }
             
             .contact .right form .email {
                 margin-left: 10px;
             }
             
             .contact .right form .field input,
             .contact .right form .textarea textarea {
                 height: 100%;
                 width: 100%;
                 border: 1px solid lightgrey;
                 border-radius: 6px;
                 outline: none;
                 padding: 0 15px;
                 font-size: 17px;
                 font-family: 'Poppins', sans-serif;
             }
             
             .contact .right form .textarea textarea {
                 padding-top: 10px;
                 resize: none;
             }
             
             .contact .right form .button {
                 height: 47px;
                 width: 170px;
             }
             
             .contact .right form .button button {
                 width: 100%;
                 height: 100%;
                 border: 2px solid crimson;
                 background-color: crimson;
                 color: #fff;
                 font-size: 20px;
                 font-weight: 500;
                 border-radius: 6px;
                 cursor: pointer;
                 transition: all 0.3s ease;
             }
             
             .contact .right form .button button:hover {
                 background: none;
                 color: crimson;
             }
             /*footer section styling*/
             
             footer {
                 background: #111;
                 padding: 20px 23px;
                 color: #fff;
             }
             
             footer span a {
                 color: crimson;
                 text-decoration: none;
             }
             
             footer span a:hover {
                 text-decoration: underline;
             }
             /*Page two*/
             /*Web development styling*/
             
             .dev .title {
                 font-size: 25px;
                 margin: 25px;
                 color: crimson;
             }
             
             .dev .dev-content .card {
                 width: calc(25% - 15px);
                 background: #222;
                 text-align: center;
                 border-radius: 6px;
                 padding: 10px 15px;
                 cursor: pointer;
                 transition: all 0.3s ease;
             }
             
             .dev .dev-content .card:hover {
                 background: crimson;
             }
             
             .dev .dev-content .card .box {
                 transition: all 0.3s ease;
             }
             
             .dev .dev-content .card:hover .box {
                 transform: scale(1.05);
             }
             
             .dev .dev-content .card .box img {
                 height: 200px;
                 width: 200px;
                 object-fit: cover;
             }
             
             .dev .dev-content .card i {
                 font-size: 50px;
                 color: crimson;
                 transition: color 0.3s ease;
             }
             
             .dev .dev-content .card:hover i {
                 color: #fff;
             }
             
             .dev .dev-content .card .text {
                 font-size: 18px;
                 color: antiquewhite;
                 font-weight: 500;
                 margin: 10px 0 7px 0;
             }
             /*Graphics styling section*/
             
             .grap {
                 color: #fff;
                 background: #333;
             }
             
             .grap .grap-content {
                 display: flex;
                 flex-wrap: wrap;
                 align-items: center;
                 justify-content: space-between;
             }
             
             .grap .title {
                 font-size: 25px;
                 margin: 25px;
                 color: crimson;
             }
             
             .grap .grap-content .card .box img {
                 height: 200px;
                 width: 200px;
                 object-fit: cover;
                 background-color: #fff;
                 margin: 15px;
                 padding: 2px;
                 border: solid crimson;
                 border-radius: 6px;
                 transition: all 0.3s ease;
             }
             
             .grap .grap-content .card .box img:hover {
                 background: #fff;
                 transform: scale(1.05);
             }
             
             .grap .grap-content .card .text {
                 font-size: 18px;
                 color: antiquewhite;
                 font-weight: 500;
                 margin: 10px 0 7px 0;
             }
             /* responsive media query start*/
             
             @media(max-width:1300px) {
                 .home .max-width {
                     margin-right: 0;
                 }
             }
             
             @media(max-width:1104px) {
                 .about .about-content .left img {
                     height: 350px;
                     width: 350px;
                 }
             }
             
             @media(max-width:991px) {
                 .max-width {
                     padding: 0 50px;
                 }
             }
             
             @media(max-width:947px) {
                 .max-width {
                     padding: 0 50px;
                 }
                 .menu-btn {
                     display: block;
                     z-index: 999;
                 }
                 .menu-btn i.active:before {
                     content: "\f00d";
                 }
                 .navbar .menu {
                     position: fixed;
                     height: 100vh;
                     width: 100%;
                     left: -100%;
                     top: 0;
                     background: #111;
                     text-align: center;
                     padding-top: 80px;
                     transition: all 0.3s ease;
                 }
                 .navbar .menu.active {
                     left: 0;
                 }
                 .navbar .menu li {
                     display: block;
                 }
                 .navbar .menu li a {
                     display: inline-block;
                     margin: 20px 0;
                     font-size: 25px;
                     transition: .5s;
                 }
                 .navbar .menu li a:hover {
                     color: crimson;
                 }
                 .navbar .logo a {
                     font-size: 20px;
                 }
                 .text-2 {
                     font-size: 40px;
                 }
                 .text-3 {
                     font-size: 28px;
                 }
                 .home .home-content a {
                     font-size: 18px;
                     padding: 6px 20px;
                 }
                 .max-width {
                     max-width: 800px;
                 }
                 .about .about-content .column {
                     width: 50%;
                 }
                 .about .about-content .left {
                     display: flex;
                     justify-content: center;
                     margin: 0 auto 60px;
                 }
                 .about .about-content .right {
                     flex: 100%;
                 }
                 .services .serv-content .card {
                     width: calc(50% - 10px);
                     margin-bottom: 25px;
                 }
                 .skills .skills-content .column,
                 .contact .contact-content .column {
                     width: 100%;
                     margin-bottom: 35px;
                 }
                 .dev .dev-content .card {
                     width: calc(50% - 10px);
                     margin-bottom: 25px;
                 }
                 @media(max-width:690px) {
                     .max-width {
                         padding: 0 23px;
                     }
                     .text-2 {
                         font-size: 40px;
                     }
                     .text-3 {
                         font-size: 23px;
                     }
                     .services .serv-content .card,
                     .skills .skills-content .column,
                     .dev .dev-content .card {
                         width: 100%;
                     }
                 }
             }
             
             @media (max-width) {}