/*  import google fonts */
                                
                                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@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;
                                }
                                /* custom scroll bar */
                                
                                 ::-webkit-scrollbar {
                                    width: 10px;
                                }
                                
                                 ::-webkit-scrollbar-track {
                                    background: #f1f1f1;
                                }
                                
                                 ::-webkit-scrollbar-thumb {
                                    background: #888;
                                }
                                
                                 ::-webkit-scrollbar-thumb:hover {
                                    background: #555;
                                }
                                /* all similar content styling codes */
                                
                                section {
                                    padding: 80px 0;
                                }
                                
                                section .contact {
                                    padding: 30px 0;
                                }
                                
                                .btn-center {
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    text-align: center;
                                    position: relative;
                                }
                                
                                .centerignbtn {
                                    /* width: 100%; */
                                    padding-bottom: 26px;
                                }
                                
                                .centerignbtn a {
                                    display: flex;
                                    width: 92%;
                                    align-items: center;
                                    justify-content: center;
                                    text-align: center;
                                }
                                
                                @media screen and (max-width:1024px) {
                                    .centerignbtn a {
                                        width: 90%;
                                    }
                                }
                                
                                .max-width {
                                    min-width: 1300px;
                                    padding: 0 50px;
                                    margin: auto;
                                }
                                
                                .about,
                                .services,
                                .skills,
                                .reviews,
                                .contact,
                                footer {
                                    font-family: 'Poppins', sans-serif;
                                }
                                
                                .about .about-content {
                                    display: flex;
                                    flex-basis: 0;
                                }
                                
                                .skills .skills-content,
                                .contact .contact-content {
                                    display: flex;
                                    flex-wrap: wrap;
                                    justify-content: space-between;
                                    padding: 5px;
                                }
                                
                                .serv-content {
                                    display: grid;
                                    grid-template-columns: 1fr 1fr 1fr;
                                    grid-column-gap: 15px;
                                    grid-row-gap: 15px;
                                }
                                
                                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: 0px;
                                    left: 50%;
                                    width: 310px;
                                    height: 3px;
                                    background: #111;
                                    transform: translateX(-50%);
                                }
                                
                                section .title::after {
                                    position: absolute;
                                    bottom: -8px;
                                    left: 50%;
                                    font-size: 20px;
                                    color: crimson;
                                    padding: 0 5px;
                                    background: #fff;
                                    transform: translateX(-50%);
                                }
                                /* navbar styling */
                                
                                .navbar {
                                    position: fixed;
                                    width: 100%;
                                    z-index: 999;
                                    padding: 30px 0;
                                    font-family: 'Ubuntu', sans-serif;
                                    transition: all 0.3s ease;
                                }
                                
                                .navbar.sticky {
                                    padding: 15px 0;
                                    background: crimson;
                                    transition: 0.3s;
                                }
                                
                                .navbar .max-width {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                }
                                
                                .navbar .logo a {
                                    color: #fff;
                                    font-size: 35px;
                                    font-weight: 600;
                                }
                                
                                .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: color 0.3s ease;
                                }
                                
                                .navbar .menu li a:hover {
                                    color: crimson;
                                }
                                
                                .navbar.sticky .menu li a:hover {
                                    color: #fff;
                                }
                                /* menu btn styling */
                                
                                .menu-btn {
                                    color: #fff;
                                    font-size: 23px;
                                    cursor: pointer;
                                    display: none;
                                }
                                
                                .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;
                                    border-bottom-width: 2px;
                                    cursor: pointer;
                                    opacity: 0;
                                    pointer-events: none;
                                    transition: all 0.3s ease;
                                }
                                
                                .scroll-up-btn.show {
                                    bottom: 30px;
                                    opacity: 1;
                                    pointer-events: auto;
                                }
                                
                                .scroll-up-btn:hover {
                                    filter: brightness(90%);
                                }
                                /* home section styling */
                                
                                .home {
                                    display: flex;
                                    background: rgba(0, 0, 0, 0.5) url("images/banner.jpg") no-repeat;
                                    background-blend-mode: darken;
                                    background-size: cover;
                                    height: 100vh;
                                    color: #fff;
                                    background-attachment: fixed;
                                    font-family: 'Ubuntu', sans-serif;
                                }
                                
                                .home .max-width {
                                    width: 100%;
                                    display: flex;
                                }
                                
                                .home .max-width .row {
                                    margin-right: 0;
                                }
                                
                                .home .home-content .text-1 {
                                    font-size: 27px;
                                }
                                
                                .home .home-content .text-2 {
                                    font-size: 75px;
                                    font-weight: 600;
                                    margin-left: -3px;
                                }
                                
                                .home .home-content .text-3 {
                                    font-size: 40px;
                                    margin: 5px 0;
                                }
                                
                                .home .home-content .text-3 span {
                                    color: crimson;
                                    font-weight: 500;
                                }
                                
                                .home .home-content a {
                                    display: inline-block;
                                    background: crimson;
                                    color: #fff;
                                    font-size: 25px;
                                    padding: 12px 36px;
                                    margin-top: 20px;
                                    font-weight: 400;
                                    border-radius: 6px;
                                    border: 2px solid crimson;
                                    transition: all 0.3s ease;
                                }
                                
                                .home .home-content a:hover {
                                    color: crimson;
                                    background: none;
                                }
                                /* 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 */
                                
                                .btndiv {
                                    position: relative;
                                    width: 100%;
                                    height: 100%;
                                    display: grid;
                                    align-items: center;
                                    justify-content: center;
                                }
                                
                                .btn-sample {
                                    position: absolute;
                                    display: inline-block;
                                    background: crimson;
                                    color: #fff;
                                    font-size: 20px;
                                    font-weight: 500;
                                    padding: 10px 30px;
                                    margin-top: -10px;
                                    width: 316px;
                                    border-radius: 6px;
                                    border: 2px solid crimson;
                                    transition: all 0.3s ease;
                                }
                                
                                .btn-sample:hover {
                                    color: crimson;
                                    background: none;
                                }
                                
                                .fa {
                                    color: red;
                                }
                                
                                .services,
                                .reviews {
                                    color: #fff;
                                    background: #111;
                                }
                                
                                .services .title::before,
                                .reviews .title::before {
                                    background: #fff;
                                }
                                
                                .services .title::after,
                                .reviews .title::after {
                                    background: #111;
                                    content: "what i provide";
                                }
                                
                                .services .serv-content .card {
                                    width: 400px;
                                    background: #222;
                                    text-align: center;
                                    border-radius: 6px;
                                    padding: 50px 20px;
                                    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;
                                    font-weight: 500;
                                    margin: 10px 10px;
                                }
                                /* skills section styling */
                                
                                .skills .title::after {
                                    content: "why me";
                                }
                                
                                .sob {
                                    padding: 0px 30px;
                                }
                                
                                .content {
                                    width: 300px;
                                    overflow: hidden;
                                }
                                
                                .content p {
                                    width: 300px;
                                    text-align: justify;
                                }
                                
                                .paragraph {
                                    padding-bottom: 10px;
                                }
                                
                                .scard {
                                    width: 400px;
                                    background: transparent;
                                    text-align: center;
                                    border-radius: 6px;
                                    padding: 50px 20px;
                                    cursor: pointer;
                                    transition: all 0.3s ease;
                                }
                                
                                .box2 {
                                    display: flex;
                                    justify-content: space-evenly;
                                }
                                
                                .box2 .log {
                                    height: 50px;
                                    width: 50px;
                                    align-items: center;
                                    border-radius: 50%;
                                    border: 2px solid #4054b2;
                                }
                                
                                .skills .serv-content .scard i {
                                    font-size: 50px;
                                    text-align: center;
                                    color: #4054b2;
                                    margin-top: 50px;
                                    transition: color 0.3s ease;
                                }
                                
                                .title2 {
                                    font-weight: bold;
                                    font-size: 25px;
                                }
                                /* animation property*/
                                
                                .fade-in {
                                    animation: fadeIn 5s ease-in both;
                                    transition: all 0.7s;
                                    -webkit-animation: fadeIn 5s;
                                    -moz-animation: fadeIn 5s;
                                    -o-animation: fadeIn 5s;
                                    -ms-animation: fadeIn 5s;
                                }
                                
                                @keyframes fadeIn {
                                    from {
                                        opacity: 0;
                                        transform: translate3d(0, -20%, 0);
                                    }
                                    to {
                                        opacity: 1;
                                        transform: translate3d(0, 0, 0);
                                    }
                                }
                                /* reviews section styling */
                                
                                .reviews .title::after {
                                    content: "What clinets say";
                                }
                                
                                .reviews .carousel .card {
                                    background: #222;
                                    border-radius: 6px;
                                    padding: 25px 35px;
                                    text-align: center;
                                    overflow: hidden;
                                    transition: all 0.3s ease;
                                }
                                
                                .reviews .carousel .card:hover {
                                    background: crimson;
                                }
                                
                                .reviews .carousel .card .box {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                    transition: all 0.3s ease;
                                }
                                
                                .reviews .carousel .card:hover .box {
                                    transform: scale(1.05);
                                }
                                
                                .reviews .carousel .card .text {
                                    font-size: 25px;
                                    font-weight: 500;
                                    margin: 10px 0 7px 0;
                                }
                                
                                .reviews .carousel .card img {
                                    height: 150px;
                                    width: 150px;
                                    object-fit: cover;
                                    border-radius: 50%;
                                    border: 5px solid crimson;
                                    transition: all 0.3s ease;
                                }
                                
                                .reviews .carousel .card:hover img {
                                    border-color: #fff;
                                }
                                
                                .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 .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;
                                    transition: all 0.3s ease;
                                }
                                
                                .contact .right form .field input:focus,
                                .contact .right form .textarea textarea:focus {
                                    border-color: #b3b3b3;
                                }
                                
                                .contact .right form .textarea textarea {
                                    padding-top: 10px;
                                    resize: none;
                                }
                                
                                .contact .right form .button-area {
                                    display: flex;
                                    align-items: center;
                                }
                                
                                .right form .button-area button {
                                    color: #fff;
                                    display: block;
                                    width: 160px!important;
                                    height: 45px;
                                    outline: none;
                                    font-size: 18px;
                                    font-weight: 500;
                                    border-radius: 6px;
                                    cursor: pointer;
                                    flex-wrap: nowrap;
                                    background: crimson;
                                    border: 2px solid crimson;
                                    transition: all 0.3s ease;
                                }
                                
                                .right form .button-area button:hover {
                                    color: crimson;
                                    background: none;
                                }
                                /* footer section styling */
                                
                                footer {
                                    background: #111;
                                    padding: 15px 23px;
                                    color: #fff;
                                    text-align: center;
                                }
                                
                                footer span a {
                                    color: crimson;
                                    text-decoration: none;
                                }
                                
                                footer span a:hover {
                                    text-decoration: underline;
                                }
                                /* responsive media query start */
                                
                                @media (max-width:1195px) {
                                    .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;
                                    }
                                    section {
                                        padding: 50px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-basis: 0;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 30rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 30rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                    .btn-sample {
                                        position: absolute;
                                        display: inline-block;
                                        background: crimson;
                                        color: #fff;
                                        font-size: 20px;
                                        font-weight: 500;
                                        padding: 10px 30px;
                                        margin-top: -10px;
                                        width: 316px;
                                        border-radius: 6px;
                                        border: 2px solid crimson;
                                        transition: all 0.3s ease;
                                    }
                                }
                                
                                @media (max-width:974px) {
                                    .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;
                                    }
                                    section {
                                        padding: 50px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 70%;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 25px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 28rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 28rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                }
                                
                                @media (max-width:773px) {
                                    .btn-sample {
                                        margin-left: 0;
                                    }
                                    .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;
                                    }
                                    section {
                                        padding: 50px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 80%;
                                    }
                                    .about .about-content .right {
                                        width: 43%;
                                    }
                                    .about .about-content .left img {
                                        height: 400px;
                                        width: 425px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 25px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 300px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 246px;
                                        text-align: justify;
                                        padding-left: 24px
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        text-align: center;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 22rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 22rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                }
                                
                                @media (max-width:600px) {
                                    .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;
                                    }
                                    section {
                                        padding: 50px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-direction: column;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 95%;
                                    }
                                    .about .about-content .right {
                                        width: 100%;
                                    }
                                    .about .about-content .left img {
                                        height: 400px;
                                        width: 494px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 25px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 444px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 433px;
                                        text-align: justify;
                                        padding-left: 0px
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        margin-left: 40%;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    .title2 {
                                        margin-left: 8rem;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 30rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 30 rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                }
                                
                                @media (max-width:540px) {
                                    .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;
                                    }
                                    section {
                                        padding: 100px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-direction: column;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 95%;
                                    }
                                    .about .about-content .right {
                                        width: 100%;
                                    }
                                    .about .about-content .left img {
                                        height: 400px;
                                        width: 494px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 25px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 444px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 433px;
                                        text-align: justify;
                                        padding-left: 0px
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        margin-left: 40%;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    .title2 {
                                        margin-left: 8rem;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 30rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 30 rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                    .contact .contact-content .info .sub-title {
                                        color: #333;
                                        font-size: 1em;
                                    }
                                    .contact .contact-content .column {
                                        width: auto;
                                    }
                                }
                                
                                @media (max-width:520px) {
                                    .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;
                                    }
                                    section {
                                        padding: 100px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-direction: column;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 95%;
                                    }
                                    .about .about-content .right {
                                        width: 100%;
                                    }
                                    .about .about-content .left img {
                                        height: 400px;
                                        width: 494px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 25px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 444px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 433px;
                                        text-align: justify;
                                        padding-left: 0px
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        margin-left: 40%;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    .title2 {
                                        margin-left: 8rem;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 29rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 29 rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                    .contact .contact-content .info .sub-title {
                                        color: #333;
                                        font-size: 1em;
                                    }
                                }
                                
                                @media(max-width:415px) {
                                    .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;
                                    }
                                    section {
                                        padding: 100px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    /*designing Home */
                                    .home {
                                        display: flex;
                                        background: rgba(0, 0, 0, 0.5) url("images/banner.jpg") no-repeat;
                                        background-blend-mode: darken;
                                        background-size: cover;
                                        height: 100vh;
                                        color: #fff;
                                        background-attachment: fixed;
                                        font-family: 'Ubuntu', sans-serif;
                                    }
                                    .home-content {
                                        margin-top: 5rem;
                                    }
                                    .home .home-content .text-1 {
                                        font-size: 30px;
                                    }
                                    .home .home-content .text-2 {
                                        font-size: 49px;
                                        font-weight: 600;
                                        margin-left: -3px;
                                        padding: 5px;
                                    }
                                    .home .home-content .text-3 {
                                        font-size: 29px;
                                        margin: 5px 0;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-direction: column;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 95%;
                                    }
                                    .about .about-content .right {
                                        width: 100%;
                                    }
                                    .about .about-content .left img {
                                        height: 352px;
                                        width: 349px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 18px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 444px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 20rem;
                                        text-align: justify;
                                        padding-top: 1rem;
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        margin-left: -10%;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    .title2 {
                                        margin-left: 0rem;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 22rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 17 rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                    .contact .contact-content .info .sub-title {
                                        color: #333;
                                        font-size: 1em;
                                    }
                                }
                                
                                @media(max-width:430px) {
                                    .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;
                                    }
                                    section {
                                        padding: 50px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    /*designing Home */
                                    .home {
                                        display: flex;
                                        background: rgba(0, 0, 0, 0.5) url("images/banner.jpg") no-repeat;
                                        background-blend-mode: darken;
                                        background-size: cover;
                                        height: 100vh;
                                        color: #fff;
                                        background-attachment: fixed;
                                        font-family: 'Ubuntu', sans-serif;
                                    }
                                    .home-content {
                                        margin-top: 5rem;
                                    }
                                    .home .home-content .text-1 {
                                        font-size: 30px;
                                    }
                                    .home .home-content .text-2 {
                                        font-size: 49px;
                                        font-weight: 600;
                                        margin-left: -3px;
                                        padding: 5px;
                                    }
                                    .home .home-content .text-3 {
                                        font-size: 29px;
                                        margin: 5px 0;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-direction: column;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 95%;
                                    }
                                    .about .about-content .right {
                                        width: 100%;
                                    }
                                    .about .about-content .left img {
                                        height: 352px;
                                        width: 349px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 18px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 444px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 20rem;
                                        text-align: justify;
                                        padding-top: 1rem;
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        margin-left: -10%;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    .title2 {
                                        margin-left: 0rem;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 22rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 17 rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                    .contact .contact-content .info .sub-title {
                                        color: #333;
                                        font-size: 1em;
                                    }
                                }
                                
                                @media(max-width:360px) {
                                    .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;
                                    }
                                    section {
                                        padding: 100px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    /*designing Home */
                                    .home {
                                        display: flex;
                                        background: rgba(0, 0, 0, 0.5) url("images/banner.jpg") no-repeat;
                                        background-blend-mode: darken;
                                        background-size: cover;
                                        height: 100vh;
                                        color: #fff;
                                        background-attachment: fixed;
                                        font-family: 'Ubuntu', sans-serif;
                                    }
                                    .home-content {
                                        margin-top: 11rem;
                                    }
                                    .home .home-content .text-1 {
                                        font-size: 30px;
                                    }
                                    .home .home-content .text-2 {
                                        font-size: 49px;
                                        font-weight: 600;
                                        margin-left: -3px;
                                        padding: 5px;
                                    }
                                    .home .home-content .text-3 {
                                        font-size: 29px;
                                        margin: 5px 0;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-direction: column;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 95%;
                                    }
                                    .about .about-content .right {
                                        width: 100%;
                                    }
                                    .about .about-content .left img {
                                        height: 352px;
                                        width: 303px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 18px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 444px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 17rem;
                                        text-align: justify;
                                        padding-top: 1rem;
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        margin-left: -10%;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    .title2 {
                                        margin-left: 0rem;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 19rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 14 rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                    .contact .contact-content .info .sub-title {
                                        color: #333;
                                        font-size: 1em;
                                    }
                                }
                                
                                @media(max-width:390px) {
                                    .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;
                                    }
                                    section {
                                        padding: 100px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    /*designing Home */
                                    .home {
                                        display: flex;
                                        background: rgba(0, 0, 0, 0.5) url("images/banner.jpg") no-repeat;
                                        background-blend-mode: darken;
                                        background-size: cover;
                                        height: 100vh;
                                        color: #fff;
                                        background-attachment: fixed;
                                        font-family: 'Ubuntu', sans-serif;
                                    }
                                    .home-content {
                                        margin-top: 5rem;
                                    }
                                    .home .home-content .text-1 {
                                        font-size: 30px;
                                    }
                                    .home .home-content .text-2 {
                                        font-size: 49px;
                                        font-weight: 600;
                                        margin-left: -3px;
                                        padding: 5px;
                                    }
                                    .home .home-content .text-3 {
                                        font-size: 29px;
                                        margin: 5px 0;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-direction: column;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 95%;
                                    }
                                    .about .about-content .right {
                                        width: 100%;
                                    }
                                    .about .about-content .left img {
                                        height: 352px;
                                        width: 303px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 18px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 444px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 17rem;
                                        text-align: justify;
                                        padding-top: 1rem;
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        margin-left: -10%;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    .title2 {
                                        margin-left: 0rem;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 19rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 14 rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    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: 0px;
                                        left: 50%;
                                        width: 310px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 20px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                    .contact .contact-content .info .sub-title {
                                        color: #333;
                                        resize: auto;
                                    }
                                }
                                
                                @media(max-width:320px) {
                                    .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;
                                    }
                                    section {
                                        padding: 100px 0;
                                    }
                                    .max-width {
                                        min-width: 50%;
                                        overflow: hidden;
                                        padding: 0 25px;
                                        margin: auto;
                                    }
                                    /*designing Home */
                                    .home {
                                        display: flex;
                                        background: rgba(0, 0, 0, 0.5) url("images/banner.jpg") no-repeat;
                                        background-blend-mode: darken;
                                        background-size: cover;
                                        height: 100vh;
                                        color: #fff;
                                        background-attachment: fixed;
                                        font-family: 'Ubuntu', sans-serif;
                                    }
                                    .home-content {
                                        margin-top: 3rem;
                                    }
                                    .home .home-content .text-1 {
                                        font-size: 30px;
                                    }
                                    .home .home-content .text-2 {
                                        font-size: 45px;
                                        font-weight: 600;
                                        margin-left: -3px;
                                        padding: 5px;
                                    }
                                    .home .home-content .text-3 {
                                        font-size: 24px;
                                        margin: 5px 0;
                                    }
                                    .about,
                                    .services,
                                    .skills,
                                    .reviews,
                                    .contact,
                                    footer {
                                        font-family: 'Poppins', sans-serif;
                                    }
                                    .about .about-content {
                                        display: flex;
                                        flex-direction: column;
                                        min-height: 67vh;
                                    }
                                    /*about designing*/
                                    .about .about-content .left {
                                        width: 95%;
                                    }
                                    .about .about-content .right {
                                        width: 100%;
                                    }
                                    .about .about-content .left img {
                                        height: 307px;
                                        width: 272px;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                    .about .about-content .right .text {
                                        font-size: 16px;
                                        font-weight: 600;
                                        margin-bottom: 10px;
                                    }
                                    .skills .skills-content,
                                    .contact .contact-content {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 5px;
                                    }
                                    /*skill design*/
                                    .content {
                                        width: 444px;
                                        overflow: hidden;
                                    }
                                    .content p {
                                        width: 14rem;
                                        text-align: justify;
                                        padding-top: 1rem;
                                    }
                                    .box2 {
                                        display: block;
                                    }
                                    .skills .serv-content .scard i {
                                        font-size: 50px;
                                        margin-left: -25%;
                                        color: #4054b2;
                                        margin-bottom: 25px;
                                        margin-top: 0px;
                                        transition: color 0.3s ease;
                                    }
                                    .title2 {
                                        margin-left: -5rem;
                                    }
                                    /*service designing*/
                                    .serv-content {
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-column-gap: 10px;
                                        grid-row-gap: 10px;
                                    }
                                    .services .serv-content .card {
                                        width: 17rem;
                                        background: #222;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 50px 20px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .scard {
                                        width: 12 rem;
                                        background: white;
                                        text-align: center;
                                        border-radius: 6px;
                                        padding: 24px 0px;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                    }
                                    .btn-sample {
                                        display: inline-block;
                                        background: crimson;
                                        color: #fff;
                                        font-size: 15px;
                                        font-weight: 500;
                                        padding: 10px 30px;
                                        margin-top: 20px;
                                        margin-left: 0;
                                        width: 200px;
                                        border-radius: 6px;
                                        border: 2px solid crimson;
                                        transition: all 0.3s ease;
                                    }
                                    section .title {
                                        position: relative;
                                        text-align: center;
                                        font-size: 35px;
                                        font-weight: 500;
                                        margin-bottom: 60px;
                                        padding-bottom: 20px;
                                        font-family: 'Ubuntu', sans-serif;
                                    }
                                    section .title::before {
                                        content: "";
                                        position: absolute;
                                        bottom: 0px;
                                        left: 50%;
                                        width: 266px;
                                        height: 3px;
                                        background: #111;
                                        transform: translateX(-50%);
                                    }
                                    section .title::after {
                                        position: absolute;
                                        bottom: -8px;
                                        left: 50%;
                                        font-size: 16px;
                                        color: crimson;
                                        padding: 0 5px;
                                        background: #fff;
                                        transform: translateX(-50%);
                                    }
                                    .contact .contact-content .info .sub-title {
                                        color: #333;
                                    }
                                }