<style type="text/css">
    /* Custom Fonts */
    /* Custom CSS */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        /* Background Color */
        --primary-color: #0b666a;
        --secondary-color: #f58725;
        --bg-white: #ffffff;
        /* Text Color */
        --primary-text: #0b666a;
        --secondary-text: #f58725;
        --text-white: #ffffff;
        --text-black: #000000;
    }

    body {
        margin: 0;
        padding: 0;
        font-family: "Open Sans", sans-serif;
        font-display: swap;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
        width: 0.35rem;
    }

    ::-webkit-scrollbar-track {
        background: var(--primary-color);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--secondary-color);
    }

    ::-moz-selection {
        /* Code for Firefox */
        color: var(--text-white);
        background: var(--secondary-color);
    }

    ::selection {
        color: var(--text-white);
        background: var(--secondary-color);
    }

    div#wpadminbar {
        z-index: 9999999;
    }

    /* Custom Font Size */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Playfair Display", serif;
    }

    h1 {
        font-size: 3.125rem;
        font-weight: 700;
        line-height: 1;
        color: var(--text-black);
    }

    h2 {
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-black);
    }

    h3 {
        font-size: 1.875rem;
        font-weight: 500;
        line-height: 1;
        color: var(--text-black);
    }

    p {
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--text-black);
    }

    a {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        color: var(--text-black);
        text-decoration: none;
        cursor: pointer;
    }

    a:hover {
        color: var(--secondary-color);
    }

    span {
        color: var(--text-black);
        font-size: 1rem;
        font-weight: 500;
    }

    button:focus,
    .navbar-toggler:focus {
        outline: 0;
        box-shadow: unset;
    }

    .text-highlight {
        color: var(--primary-text);
    }

    .title:after {
        content: "";
        border-bottom: 3px solid var(--primary-text);
        height: 1rem;
        width: 5rem;
        display: table;
        margin-top: 0.5rem;
    }

    .title-center:after {
        margin: 0.5rem auto 0;
        text-align: center;
    }

    .sub-title {
        font-size: 1.3rem;
        /* margin-bottom: 1rem; */
        color: var(--secondary-text);
    }

    #contact-form-popup .modal-content {
        border-radius: 0.7rem;
    }

    #contact-us-form iframe {
        margin: 0;
        border-radius: 0;
    }

    #contact-form-popup .form-group {
        margin: 1rem;
        padding: 0.4rem 1rem;
    }

    #contact-form-popup .main-btn {
        border: 0;
        padding: 0.7rem 3rem;
    }

    #contact-form-popup .form-group input:focus {
        border-color: var(--secondary-text);
    }

    #contact-form-popup .btn-close {
        background-color: var(--primary-color);
        color: var(--text-white);
        opacity: unset;
        border-radius: 100%;
        padding: 0.3rem;
        font-size: 1.4rem;
        background-image: unset;
        margin: -2rem -2rem -0.5rem auto;
        height: 2rem;
        width: 2rem;
    }

    #contact-form-popup .btn-close:focus {
        outline: 0;
        box-shadow: unset;
    }

    #contact-form-popup .btn-close:hover {
        background-color: var(--secondary-color);
    }

    #contact-form-popup .social-icon ul {
        text-align: center;
        justify-content: center;
    }

    #contact-form-popup .social-icon a {
        background-color: var(--primary-color);
    }

    #contact-form-popup .social-icon .svg-inline--fa {
        color: var(--text-white);
    }

    #contact-form-popup .social-icon .modal-header {
        padding-top: 1.5rem;
        padding-bottom: 0;
    }

    #contact-form-popup .social-icon h5 {
        margin-bottom: 0;
        font-size: 1.5rem;
        color: var(--primary-text);
    }

    #contact-form-popup .social-icon li {
        padding-top: 1.3rem;
    }

    .form-control {
        border-color: var(--primary-color) !important;
    }

    #popup-form .form-group,
    #contact-us-form .form-group {
        position: relative;
    }

    #popup-form .errormsg,
    #comingsoon-form .errormsg,
    #contact-us-form .errormsg {
        position: absolute;
        bottom: -13px;
        left: 60px;
        padding: 1px 10px;
        display: none;
        font-size: 12px;
        border-radius: 2px;
    }

    #popup-form .errormsg,
    #comingsoon-form .errormsg,
    #contact-us-form .errormsg {
        color: var(--text-white);
        background: var(--primary-color);
    }

    #popup-form .errormsg::before,
    #comingsoon-form .errormsg::before,
    #contact-us-form .errormsg::before {
        border-bottom: 8px solid var(--primary-color);
    }

    #popup-form .errormsg:before,
    #comingsoon-form .errormsg:before,
    #contact-us-form .errormsg:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        top: -8px;
    }

    #comingsoon-form .errormsg {
        bottom: 60px;
        left: 10px;
    }

    .pleasewait {
        text-decoration: none;
        display: none;
        background: unset !important;
        color: var(--text-black) !important;
    }

    .banner {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: var(--text-white);
        text-align: center;
        /*height: 18rem;*/
        height: auto;
        margin-top: 6rem;
    }

    .banner h1 {
        color: var(--text-white);
        max-width: 90%;
        margin: 0 auto 30px;
        line-height: 60px;
    }

    .banner .breadcrumb {
        justify-content: center;
        padding: 1rem;
    }

    .banner .breadcrumb-item+.breadcrumb-item::before,
    .banner .breadcrumb a {
        color: var(--text-white);
        font-size: 1.2rem;
    }

    .banner .breadcrumb-item.active {
        color: var(--secondary-text);
        font-size: 1.2rem;
        font-weight: 600;
    }

    li.breadcrumb-item.separator {
        display: none;
    }

    li.breadcrumb-item.item-current {
        color: var(--secondary-text);
        font-size: 1.2rem;
        font-weight: 600;
    }

    section {
        padding: 1.5rem 0;
    }

    #toc_container li {
        margin-bottom: 1rem !important;
        display: block;
    }

    /* Button CSS */
    .main-btn {
        color: var(--text-white);
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: 600;
        background-color: var(--primary-color);
        padding: 0.875rem 3.125rem;
        border-radius: 0.3125rem;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .main-btn:hover {
        background: var(--secondary-color);
        color: var(--text-white);
    }

    .cta-btn {
        background: var(--secondary-color);
    }

    .cta-btn:hover {
        background: var(--bg-white);
        color: var(--text-black);
    }

    .four-zero-four,
    .five-hundred {
        text-align: center;
        margin-bottom: 4rem;
    }

    .four-zero-four h1 {
        margin-bottom: 4.3rem;
    }

    .four-zero-four span {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .four-zero-four .main-btn {
        margin: 2rem 0;
    }

    .coming-soon {
        padding: 10rem 0;
    }

    .coming-soon h1 {
        font-size: 4rem;
        color: var(--primary-text);
        margin-bottom: 1.2rem;
    }

    .coming-soon input {
        border: 1px solid var(--primary-color);
    }

    .coming-soon .input-group {
        margin: 2rem 0;
        position: relative;
        padding-bottom: 80px;
    }

    .g-recaptcha-box {
        position: absolute;
        top: 50px;
    }

    div#frm_Email_error1,
    #frm_Email_error21 {
        position: absolute;
        bottom: -24px;
        left: 8px;
    }

    .coming-soon-icons .social-icon a {
        background-color: var(--primary-color);
        color: var(--text-white);
        align-items: center;
        display: grid;
        height: 3rem;
        width: 3rem;
        text-align: center;
        justify-content: center;
    }

    .coming-soon-icons .social-icon .svg-inline--fa {
        color: var(--text-white);
        font-size: 1.5rem;
    }

    /* Form CSS */
    button:focus,
    a:focus,
    input:focus,
    .form-control:focus {
        outline: 0;
        box-shadow: none;
    }

    .cta-bg {
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        padding: 3rem 0;
    }

    .cta-bg h2 {
        color: var(--text-white);
    }

    /* 1. General CSS End here */
    /* 2. Header CSS Start Here */
    .header-wrapper .navbar {
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
        z-index: 9999999;
        background-color: var(--bg-white);
    }

    .header-wrapper .navbar-brand {
        padding: 0;
    }

    .header-wrapper .nav-link {
        color: var(--text-black);
        padding: 0 0.8rem !important;
        text-transform: uppercase;
        font-weight: 600;
    }

    .header-wrapper .nav-link:hover {
        color: var(--secondary-color);
    }

    .dropdown-item.active,
    .dropdown-item:active,
    .dropdown-item:hover,
    .dropdown-item:active {
        background: var(--secondary-color);
        color: var(--text-white);
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        top: 3.4rem;
    }

    .header-scrolled {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--bg-white);
        -webkit-box-shadow: 0 0.25rem 0.375rem 0 rgba(12, 0, 46, 0.05);
        box-shadow: 0 0.25rem 0.375rem 0 rgba(12, 0, 46, 0.05);
    }

    .hireme-btn .main-btn {
        border-radius: 2rem;
        margin-left: 1rem;
    }

    .header-wrapper .navbar-nav .nav-link.active,
    .header-wrapper .navbar-nav .show>.nav-link {
        /* color: var(--secondary-text); */
    }

    /* 2. Header CSS End Here */
    /* 3. Home CSS Start Here */
    /* 3.1 Home Banner Section CSS Start Here */
    .home-banner {
        margin-top: 6rem;
    }

    .home-banner h3 {
        font-size: 1.9rem;
        margin-bottom: 1rem;
        color: var(--secondary-text);
    }

    .home-banner h1 span,
    .home-banner h2 span {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .home-banner p {
        padding: 1.2rem 3rem 1.2rem 0;
    }

    .home-banner-items {
        display: flex !important;
    }

    .home-banner-items h2 {
        font-size: 3.125rem;
        font-weight: 700;
        line-height: 1;
        color: var(--text-black);
    }

    .tech-cat-slider .slick-track {
        margin: 0;
    }

    .tech-slider-two .slick-dots li button:before,
    .home-banner-slider .slick-dots li button:before {
        color: var(--primary-color);
        font-size: 0.9rem;
        opacity: unset;
    }

    .tech-slider-two .slick-dots li.slick-active button:before,
    .home-banner-slider .slick-dots li.slick-active button:before {
        color: var(--secondary-color);
    }

    .tech-slider-two .slick-dots li,
    .home-banner-slider .slick-dots li {
        margin: 0;
    }

    .tech-slider-two .slick-dots,
    .home-banner-slider .slick-dots {
        bottom: 0;
    }

    /**** this is the Pencil Erasing animation****/
    .erasing-animation {
        animation-name: erasing;
        animation-duration: 1.8s;
    }

    @keyframes erasing {
        0% {
            transform: rotate(0deg);
        }

        10% {
            transform: rotate(180deg);
        }

        60% {
            transform: rotate(180deg);
        }

        70% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }

    /***this is the pencil writing animation*****/
    .writing-animation {
        animation-name: writting;
        animation-duration: 4s;
    }

    @keyframes writting {
        0% {
            transform: translate(0px, 0px);
        }

        2% {
            transform: translate(30px, -40px);
        }

        4% {
            transform: translate(0px, 0px);
        }

        6% {
            transform: translate(30px, -40px);
        }

        8% {
            transform: translate(0px, 0px);
        }

        10% {
            transform: translate(30px, -40px);
        }

        12% {
            transform: translate(0px, 0px);
        }

        14% {
            transform: translate(30px, -40px);
        }

        16% {
            transform: translate(0px, 0px);
        }

        18% {
            transform: translate(30px, -40px);
        }

        20% {
            transform: translate(0px, 0px);
        }

        22% {
            transform: translate(30px, -40px);
        }

        24% {
            transform: translate(0px, 0px);
        }

        26% {
            transform: translate(30px, -40px);
        }

        28% {
            transform: translate(0px, 0px);
        }

        30% {
            transform: translate(30px, -40px);
        }

        32% {
            transform: translate(0px, 0px);
        }

        34% {
            transform: translate(30px, -40px);
        }

        36% {
            transform: translate(0px, 0px);
        }

        38% {
            transform: translate(30px, -40px);
        }

        40% {
            transform: translate(0px, 0px);
        }

        42% {
            transform: translate(30px, -40px);
        }

        44% {
            transform: translate(0px, 0px);
        }

        46% {
            transform: translate(30px, -40px);
        }

        48% {
            transform: translate(0px, 0px);
        }

        50% {
            transform: translate(30px, -40px);
        }

        52% {
            transform: translate(0px, 0px);
        }

        54% {
            transform: translate(30px, -40px);
        }

        56% {
            transform: translate(0px, 0px);
        }

        58% {
            transform: translate(30px, -40px);
        }

        60% {
            transform: translate(0px, 0px);
        }

        62% {
            transform: translate(30px, -40px);
        }

        64% {
            transform: translate(0px, 0px);
        }

        66% {
            transform: translate(30px, -40px);
        }

        68% {
            transform: translate(0px, 0px);
        }

        70% {
            transform: translate(30px, -40px);
        }

        72% {
            transform: translate(0px, 0px);
        }

        74% {
            transform: translate(30px, -40px);
        }

        76% {
            transform: translate(0px, 0px);
        }

        78% {
            transform: translate(30px, -40px);
        }

        80% {
            transform: translate(0px, 0px);
        }

        82% {
            transform: translate(30px, -40px);
        }

        84% {
            transform: translate(0px, 0px);
        }

        86% {
            transform: translate(30px, -40px);
        }

        88% {
            transform: translate(0px, 0px);
        }

        90% {
            transform: translate(30px, -40px);
        }

        92% {
            transform: translate(0px, 0px);
        }

        94% {
            transform: translate(30px, -40px);
        }

        96% {
            transform: translate(0px, 0px);
        }

        98% {
            transform: translate(30px, -40px);
        }

        100% {
            transform: translate(0px, 0px);
        }
    }

    /* 3.1 Home Banner Section CSS End Here */
    /* 3.3 Home Counter Section Start Here */
    .home-counter {
        text-align: center;
        padding: 0 0 2rem;
    }

    .home-counter-content span {
        color: var(--primary-text);
        font-size: 2.5rem;
        font-weight: 600;
    }

    .home-counter-content h5 {
        font-size: 1.3rem;
    }

    .home-counter-content {
        border: 0.0625rem solid #ccc;
        -webkit-transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
        padding: 2rem;
        cursor: pointer;
    }

    .home-counter-content:hover {
        box-shadow: 0 0.5rem 1.875rem rgb(11 102 106 / 15%);
        border: 0.0625rem solid transparent;
    }

    .home-counter-wrapper {
        padding: 2rem 0;
    }

    .home-counter-wrapper h2 {
        padding-bottom: 2.3rem;
    }

    /* 3.3 Home Counter Section End Here */
    /* 3.6 Home Blog Section Start Here */
    .home-blog-content .card-body {
        padding-top: 4rem;
    }

    .home-blog-content.blog-categories {
        position: absolute;
        top: 20px;
        left: 30px;
    }

    .home-blog-content.main-blog-category {
        left: 40px;
    }

    .home-blog-content .badge {
        background-color: var(--secondary-color) !important;
        margin: 1rem 0;
        color: var(--text-white);
        /* z-index: 99999; */
        position: relative;
        border: 0;
    }

    .home-blog-content {
        color: var(--text-white);
    }

    .home-blog-content .card-title {
        padding: 1rem 0 .2rem;
        font-size: 1.6rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .home-blog-content .card-text {
        color: var(--text-white);
        text-align: left;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-width: 90%;
        line-height: 1.5;
        font-size: 1rem;
    }

    .home-blog-content .card-text p {
        color: var(--text-white);
        text-align: left;
        line-height: 1.5;
        font-size: 1rem;
    }

    .home-blog-author img {
        height: 2rem;
        width: 2rem;
        border-radius: 100%;
    }

    .home-author-name h5 {
        margin-bottom: 0;
    }

    .blog-inner .portfolio-inner-author li {
        width: 12rem;
    }

    .blog-inner .portfolio-inner-author li:nth-child(2) {
        width: auto;
    }

    .home-blog-bg {
        background-attachment: fixed;
        background-blend-mode: overlay;
        background-color: rgba(0, 0, 0, 0.8);
        background-position: 95% center;
        background-size: cover;
        background-repeat: no-repeat;
        /* box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2); */
        overflow: hidden;
        border-radius: 20px;
        transform: scale(0.98);
        transition: 0.3s ease-in-out !important;
        border: 0;
    }

    .home-blog-bg:hover {
        box-shadow: -1px 10px 13px 3px rgba(0, 0, 0, 0.49);
    }

    .home-blog-bg .card-footer {
        border: 0;
        padding: 2rem 1rem 1rem;
    }

    .home-blog-btn .svg-inline--fa {
        font-size: 2rem;
        color: var(--text-white);
    }

    .home-blog-btn .svg-inline--fa:hover {
        color: var(--secondary-text);
    }

    .home-blog-date {
        margin: 1.5rem 0;
    }

    .home-blog-date span {
        color: var(--text-white);
        margin-left: 0.1rem;
    }

    /* 3.6 Home Blog Section End Here */
    /* 3.8 Home Tech Section Start Here */
    .home-tech {
        padding: 3.5rem 0 2rem;
    }

    .home-tech-content {
        /* padding: 3.5rem 0; */
    }

    .home-tech .card .card-title {
        font-weight: 700;
        padding: 2rem 0 0.2rem;
        font-size: 1.6rem;
        color: var(--primary-text);
    }

    .home-tech .card-text p {
        color: var(--text-black);
        text-align: left;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-width: 90%;
        line-height: 1.5;
        font-size: 1rem;
    }

    .home-tech .card {
        border-radius: 0.9375rem;
        overflow: hidden;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
    }

    .home-tech .card-body {
        padding: 1.9rem 1rem 1rem;
    }

    .tips-tricks-column img,
    .home-tech .card img {
        border-radius: 0.9375rem 0.9375rem 0 0;
        transition: transform 2s cubic-bezier(0.2, 0.96, 0.34, 1);
        cursor: pointer;
    }

    .home-tech-content .card-footer .svg-inline--fa {
        color: var(--primary-text);
        font-size: 2.5rem;
        padding-bottom: 1rem;
    }

    .home-tech .card-footer {
        border: 0;
        background: var(--bg-white);
    }

    .home-tech .card-footer img {
        border-radius: 100%;
    }

    .tech-author .col-6 {
        padding: 0;
    }

    .tech-author .svg-inline--fa {
        color: var(--primary-color);
        margin-right: 0.5rem;
    }

    /* 3.8 Home Tech Section End Here */
    /* 3. Home CSS End Here */
    /* 4. About Me CSS Start Here */
    /* 4.2 About Me Section CSS Start Here */
    .home-about-me {
        padding: 0 !important;
    }

    .about-me {
        padding: 5rem 0;
    }

    .about-me .about-me-content {
        padding: 1.2rem 0;
    }

    .about-me .about-me-content p {
        text-align: justify;
    }

    .about-me .sub-title {
        font-size: 1.9rem;
    }

    /* 4.2 About Me Section CSS End Here */
    /* 4.3 About Me Skill Section CSS Start Here */
    .aboutme-skills {
        padding: 5rem 0;
    }

    .aboutme-skills-tabs {
        padding: 5rem 0;
    }

    .aboutme-skills-tabs ul {
        background: var(--primary-color);
        width: max-content;
        color: var(--text-white);
        padding: 0.3rem 0.8rem;
        border-radius: 100px;
    }

    .aboutme-skills-tabs ul li .active {
        border-radius: 100px;
        background-color: var(--secondary-color) !important;
        padding: 0.2rem 1rem;
        transition: opacity 0.5s ease 0s;
        margin-top: 0.3rem;
    }

    .aboutme-skills-tabs ul li button,
    .aboutme-skills-tabs ul li button:hover {
        color: var(--text-white);
        font-size: 1.5rem;
        transition: opacity 0.5s ease 0s;
        font-weight: 700;
    }

    .aboutme-skill-card {
        position: relative;
        width: 80px;
        height: 80px;
        display: grid;
        place-items: center;
        background-color: var(--bg-white);
        border-radius: 1rem;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
        padding: 0.8rem;
        margin: auto;
    }

    .aboutme-skill-card .tooltip {
        position: absolute;
        top: -40px;
        background: var(--primary-color);
        min-width: max-content;
        color: var(--text-white);
        font-size: 0.8rem;
        font-weight: 600;
        padding: 5px 10px;
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: var(--transition-1);
        z-index: 1;
        border-radius: 5rem;
    }

    .aboutme-skill-card:hover .tooltip {
        transform: translateY(0);
        opacity: 1;
    }

    /* 4.3 About Me Skill Section CSS End Here */
    /* 4.7 About Me Journey Section CSS Start Here */
    .aboutme-journey {
        padding: 5rem 0;
    }

    .aboutme-journey h2 {
        margin-bottom: 2rem;
    }

    .aboutme-journey p {
        margin-bottom: 5rem;
    }

    .aboutme-timeline {
        list-style: none;
        padding: 20px 0 20px;
        position: relative;
    }

    .aboutme-timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: var(--primary-color);
        left: 50%;
        margin-left: -1.5px;
    }

    .aboutme-timeline>li {
        margin-bottom: 20px;
        position: relative;
    }

    .aboutme-timeline>li:before,
    .aboutme-timeline>li:after {
        content: " ";
        display: table;
    }

    .aboutme-timeline>li:after {
        clear: both;
    }

    .aboutme-timeline>li:before,
    .aboutme-timeline>li:after {
        content: " ";
        display: table;
    }

    .aboutme-timeline>li:after {
        clear: both;
    }

    .aboutme-timeline>li>.aboutme-timeline-panel {
        width: 45%;
        float: left;
        border: 1px solid #ccc;
        padding: 20px;
        position: relative;
        border-radius: 2px;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .aboutme-timeline>li>.aboutme-timeline-badge:hover,
    .aboutme-timeline>li>.aboutme-timeline-panel:hover {
        background: var(--secondary-color);
        color: var(--text-white);
    }

    .aboutme-timeline>li>.aboutme-timeline-panel:hover h4 {
        color: var(--text-white);
    }

    .aboutme-timeline>li>.aboutme-timeline-panel:before {
        position: absolute;
        top: 26px;
        right: -15px;
        display: inline-block;
        border-top: 15px solid transparent;
        border-left: 15px solid #ccc;
        border-right: 0 solid #ccc;
        border-bottom: 15px solid transparent;
        content: " ";
    }

    .aboutme-timeline>li>.aboutme-timeline-panel:after {
        position: absolute;
        top: 27px;
        right: -14px;
        display: inline-block;
        border-top: 14px solid transparent;
        border-left: 14px solid var(--text-white);
        border-right: 0 solid var(--text-white);
        border-bottom: 14px solid transparent;
        content: " ";
    }

    .aboutme-timeline>li>.aboutme-timeline-badge {
        color: var(--text-white);
        width: 80px;
        height: 80px;
        line-height: 5rem;
        font-size: 1em;
        font-weight: 500;
        text-align: center;
        position: absolute;
        top: 16px;
        left: 49%;
        margin-left: -25px;
        background-color: var(--primary-color);
        z-index: 100;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .aboutme-timeline>li.aboutme-timeline-inverted>.aboutme-timeline-panel {
        float: right;
    }

    .aboutme-timeline>li.aboutme-timeline-inverted>.aboutme-timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }

    .aboutme-timeline>li.aboutme-timeline-inverted>.aboutme-timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }

    .aboutme-timeline>li>.aboutme-timeline-panel:hover:after,
    .aboutme-timeline>li.aboutme-timeline-inverted>.aboutme-timeline-panel:hover:after {
        border-left-color: var(--secondary-color);
        border-right-color: var(--secondary-color);
    }

    .aboutme-timeline-title {
        margin-top: 0;
        color: var(--primary-text);
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .aboutme-timeline-body li {
        margin-bottom: 1rem;
    }

    .aboutme-timeline-body>p,
    .aboutme-timeline-body>ul {
        margin-bottom: 0;
    }

    .aboutme-timeline-body>p+p {
        margin-top: 5px;
    }

    /* 4.7 About Me Journey Section CSS End Here */
    /* 4. About Me CSS End Here */
    /* 5. Portfolio CSS Start Here */
    /* 5.1 Home Portfolio Section Start Here */
    .portfolio {
        padding: 3rem 0;
    }

    .portfolio-content {
        padding: 2rem 0;
    }

    .portfolio-content button {
        color: var(--text-black);
        font-weight: 600;
        font-family: "Playfair Display", serif;
        font-size: 1.5rem;
        margin: 0 0.9rem;
    }

    .portfolio-content button:hover,
    .portfolio-content .nav-pills .nav-link.active,
    .portfolio-content .nav-pills .show>.nav-link {
        color: var(--text-white);
        font-weight: 700;
        box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%);
        background-color: var(--primary-color);
    }

    .portfolio-content button:hover img,
    .portfolio-content .nav-pills .nav-link.active img,
    .portfolio-content .nav-pills .show>.nav-link img {
        filter: brightness(0) invert(1);
    }

    .portfolio-content ul#pills-tab {
        padding-bottom: 3rem;
    }

    .portfolio-images {
        padding: 3rem;
    }

    .portfolio-images img {
        width: 10rem;
        display: block;
        margin: 0 auto;
    }

    .portfolio-image-desktop {
        position: absolute;
        top: 3.4rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        width: 9.1rem;
    }

    .portfolio-image-desktop img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top;
        object-position: top;
        height: 5.5rem;
        transition: 5s all ease;
    }

    .portfolio-image-desktop img:hover {
        -o-object-position: bottom;
        object-position: bottom;
    }

    .portfolio-laptop-screen {
        position: absolute;
        top: 7.2rem;
        right: 2.6rem;
        width: fit-content;
    }

    .portfolio-image-laptop {
        position: absolute;
        top: 0.2rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        width: 6.2rem;
    }

    .portfolio-laptop-screen img {
        width: 8rem;
    }

    .portfolio-image-laptop img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top;
        object-position: top;
        height: 3.9rem;
        transition: 5s all ease;
    }

    .portfolio-image-laptop img:hover {
        -o-object-position: bottom;
        object-position: bottom;
    }

    .portfolio-ipad-screen {
        position: absolute;
        top: 5rem;
        right: 0;
        left: 4rem;
        width: fit-content;
    }

    .portfolio-image-ipad {
        position: absolute;
        top: 0.2rem;
        left: -0.1rem;
        right: 0;
        margin: 0 auto;
        text-align: center;
        width: 4rem;
        height: auto;
    }

    .portfolio-ipad-screen img {
        width: 4.8rem;
    }

    .portfolio-image-ipad img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top;
        object-position: top;
        height: 5.7rem;
        transition: 5s all ease;
    }

    .portfolio-image-ipad img:hover {
        -o-object-position: bottom;
        object-position: bottom;
    }

    .portfolio-mobile-screen {
        position: absolute;
        top: 7rem;
        right: 0;
        left: 3rem;
        width: fit-content;
    }

    .portfolio-image-mobile {
        position: absolute;
        top: 0.2rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        width: 2.4rem;
        height: auto;
    }

    .portfolio-mobile-screen img {
        width: 3rem;
    }

    .portfolio-image-mobile img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top;
        object-position: top;
        height: 5.5rem;
        transition: 5s all ease;
    }

    .portfolio-image-mobile img:hover {
        -o-object-position: bottom;
        object-position: bottom;
    }

    .portfolio-content .card {
        box-shadow: 0 5px 15px 0 rgb(0 0 0 / 4%);
        transition: 0.3s ease-in-out !important;
        border-radius: 20px 20px 20px 20px;
    }

    .portfolio-content .card-footer {
        background-color: var(--primary-color);
        border-radius: 0px 0px 20px 20px;
    }

    .portfolio-content .card:hover {
        box-shadow: -1px 10px 13px 3px rgba(0, 0, 0, 0.49);
    }

    .portfolio .card-footer h5 {
        color: var(--text-white);
        margin-bottom: 0;
        font-size: 1.2rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
    }

    .portfolio .card-footer {
        padding: 0.5rem 1rem;
        border-top: 0;
    }

    .portfolio .portfolio-card-body .card-title h5 {
        font-weight: 700;
        padding: 2rem 0 0.2rem;
        font-size: 1.6rem;
        color: var(--primary-text);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
    }

    .portfolio .portfolio-card-body .card-text p {
        color: var(--text-black);
        text-align: left;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-width: 90%;
        line-height: 1.5;
        font-size: 1rem;
    }

    /* 5.1 Home Portfolio Section End Here */
    .portfolio-clients {
        text-align: center;
        padding: 3rem;
    }

    .portfolio-categories {
        position: absolute;
        bottom: 140px;
        left: 40px;
    }

    .portfolio-clients h2 {
        margin-bottom: 3rem;
    }

    .portfolio-client-content {
        position: relative;
    }

    .portfolio-client-items {
        padding: 1rem;
    }

    .portfolio-client-items .card-body {
        margin: 0 auto;
    }

    .blog-mobile-slider .slick-dots li button:before,
    .home-tech-mobile-slider .slick-dots li button:before,
    .portfolio-client-slider .slick-dots li button:before,
    .tips-tricks-slider .slick-dots li button:before {
        color: var(--primary-color);
        font-size: 0.9rem !important;
        opacity: unset;
    }

    .blog-mobile-slider .slick-dots li.slick-active button:before,
    .home-tech-mobile-slider .slick-dots li.slick-active button:before,
    .portfolio-client-slider .slick-dots li.slick-active button:before,
    .tips-tricks-slider .slick-dots li.slick-active button:before {
        color: var(--secondary-color);
    }

    .blog-mobile-slider .slick-dots li,
    .home-tech-mobile-slider .slick-dots li,
    .portfolio-client-slider .slick-dots li,
    .tips-tricks-slider .slick-dots li {
        margin: 0;
    }

    .blog-mobile-slider .slick-dots,
    .home-tech-mobile-slider .slick-dots,
    .portfolio-client-slider .slick-dots,
    .tips-tricks-slider .slick-dots {
        bottom: -3rem;
    }

    .color-use .color-scheme-slider-prev,
    .color-use .color-scheme-slider-next,
    .portfolio-client-slider-prev,
    .portfolio-client-slider-next {
        display: inline;
        color: var(--text-black);
        padding: 3px 8px;
        border: 1px solid var(--text-black);
        border-radius: 5px;
        background: var(--bg-white);
    }

    .portfolio-client-slider-prev {
        position: absolute;
        top: 4.5rem;
        left: 0.6rem;
    }

    .portfolio-client-slider-next {
        position: absolute;
        top: 4.5rem;
        right: 0.6rem;
    }

    .color-scheme-slider-next.slick-arrow.slick-disabled,
    .portfolio-client-slider-next.slick-arrow.slick-disabled,
    .color-use .color-scheme-slider-prev:hover,
    .color-use .color-scheme-slider-next:hover,
    .portfolio-client-slider-prev:hover,
    .portfolio-client-slider-next:hover {
        background: var(--secondary-color);
        color: var(--text-white);
        cursor: pointer;
        border: 1px solid var(--secondary-text);
    }

    .portfolio-client-items .card {
        background-color: var(--bg-white);
        border-radius: 1rem;
        box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%);
        padding: 1.2rem 0.9rem;
    }

    .blog-mobile-slider .slick-dots li button:before,
    .home-tech-mobile-slider .slick-dots li button:before,
    .portfolio-client-slider .slick-dots li button:before,
    .tips-tricks-slider .slick-dots li button:before {
        color: var(--primary-color);
        font-size: 0.9rem;
        opacity: unset;
    }

    .blog-mobile-slider .slick-dots li.slick-active button:before,
    .home-tech-mobile-slider .slick-dots li.slick-active button:before,
    .tips-tricks-slider .slick-dots li.slick-active button:before,
    .portfolio-client-slider .slick-dots li.slick-active button:before {
        color: var(--secondary-color);
    }

    .portfolio-client-slider .slick-dots li {
        margin: 0;
    }

    .portfolio .nav-link img {
        display: block;
        margin: 0 auto;
        padding: 1rem;
        height: 5rem;
        width: auto;
    }

    .portfolio .nav-link {
        background-color: var(--bg-white);
        border-radius: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.125);
        padding: 0.2rem 1rem;
        width: 10rem;
        height: 8rem;
        font-size: 1.2rem;
    }

    /* 5. Portfolio CSS End Here */
    /* 6. Portfolio Inner CSS Start Here */
    .portfolio-inner h1 {
        color: var(--primary-text);
        margin: 1rem 0;
    }

    .portfolio-inner-content {
        position: relative;
    }

    .portfolio-inner-content .portfolio-images img {
        width: 30rem;
    }

    .portfolio-inner-content .portfolio-image-desktop {
        width: 27.5rem;
        top: 4.2rem;
    }

    .portfolio-inner-content .portfolio-image-desktop img {
        height: 16.9rem;
    }

    .portfolio-inner-content .portfolio-image-laptop {
        top: 1rem;
        width: 23.3rem;
    }

    .portfolio-inner-content .portfolio-laptop-screen {
        top: 14.5rem;
        right: 4rem;
    }

    .portfolio-inner-content .portfolio-image-laptop img {
        height: 14.6rem;
    }

    .portfolio-inner-content .portfolio-ipad-screen img {
        width: 16rem;
    }

    .portfolio-inner-content .portfolio-image-ipad {
        top: 0.7rem;
        width: 14.2rem;
        left: -0.7rem;
    }

    .portfolio-inner-content .portfolio-image-ipad img {
        height: 18.8rem;
    }

    .portfolio-inner-content .portfolio-ipad-screen {
        top: 10rem;
        left: 13rem;
    }

    .portfolio-inner-content .portfolio-mobile-screen img {
        width: 6.8rem;
        object-fit: cover;
        min-width: 100%;
        min-height: 100%;
        flex-shrink: 0;
    }

    .portfolio-inner-content .portfolio-image-mobile {
        width: 5.7rem;
        top: 0.5em;
        left: -0.1rem;
    }

    .portfolio-inner-content .portfolio-image-mobile img {
        height: 12.6rem;
    }

    .portfolio-inner-content .portfolio-mobile-screen {
        top: 20rem;
        left: 10rem;
    }

    .portfolio-inner-wrapper {
        margin: 4rem 0 1rem;
    }

    .portfolio-inner-wrapper p {
        margin: 2rem 0 3rem;
    }

    .portfolio-inner-tag {
        margin-top: 1rem;
    }

    .portfolio-inner-author img {
        border-radius: 100%;
        width: 1.9rem;
        margin-right: 0.4rem;
    }

    .portfolio-inner-author li {
        font-size: 1.2rem;
        font-weight: 500;
        display: inline-block;
        margin: 0 2rem 0 0;
    }

    .portfolio-inner-author .svg-inline--fa {
        color: var(--primary-text);
        margin-right: 0.4rem;
        font-size: 1.7rem;
    }

    .portfolio-inner-author {
        margin: 2rem 0;
    }

    .portfolio-inner-tag li {
        display: inline-block;
        margin: 0.9rem 0.3rem 0;
        color: var(--primary-text);
        font-weight: 600;
    }

    .portfolio-inner-tag a {
        color: var(--primary-text);
        font-weight: 500;
    }

    .portfolio-inner-tag ul {
        width: 20rem;
    }

    .portfolio-inner-social-share,
    .portfolio-inner-tag {
        display: flex;
    }

    .portfolio-inner-social-share li {
        margin: 1rem 0.5rem;
        display: inline-block;
    }

    .portfolio-inner-social-share .svg-inline--fa {
        color: var(--primary-text);
        font-size: 1.9rem;
    }

    .portfolio-inner-tag span,
    .portfolio-inner-social-share span {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0.8rem;
    }

    .portfolio-inner-tag span {
        margin: 0.4rem 0.9rem 0 0;
    }

    .portfolio-inner-social-share {
        justify-content: end;
    }

    .technology-use .portfolio-client-slider-prev {
        top: 9.4rem;
        left: 0rem;
    }

    .technology-use .portfolio-client-slider-next {
        top: 9.4rem;
        right: 0rem;
    }

    .technology-use {
        margin: 4rem 0;
    }

    .technology-use h2 {
        margin-bottom: 2rem;
    }

    .technology-use .card-body {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .technology-use .card-body img {
        text-align: center;
        margin: 0 auto 1rem;
    }

    .font-box {
        margin: 3rem 0;
        border: 1px solid #ccc;
        padding: 2rem;
        border-radius: 1rem;
    }

    .color-use {
        margin: 2rem 0;
        position: relative;
    }

    .color-box {
        margin: 3rem 1rem;
        background-color: var(--bg-white);
        border-radius: 1rem;
        box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%);
        padding: 0.5rem;
        height: 8rem;
        width: 12rem;
    }

    .color-box .color-box-inner {
        height: 7rem;
        border-radius: 1rem;
    }

    .color-use .color-scheme-slider-next {
        position: absolute;
        top: 9.5rem;
        right: -0.4rem;
    }

    .color-use .color-scheme-slider-prev {
        position: absolute;
        top: 9.5rem;
        left: -0.4rem;
    }

    .color-use .slick-arrow.slick-hidden {
        display: none !important;
    }

    .color-use .slick-track {
        margin: 0 !important;
    }

    .red-color-box {
        background-color: #e31837;
    }

    .grey-color-box {
        background-color: #434343;
    }

    .light-grey-color-box {
        background-color: #ededed;
    }

    .black-color-box {
        background-color: #000;
    }

    .color-use .col-md-2 {
        margin: 0 3rem 0 0;
    }

    /* 6. Portfolio Inner CSS End Here */
    /* 7. Resume CSS Start Here */
    /* 7. Resume CSS End Here */
    /* 8. Contact Me CSS Start Here */
    .contact-me {
        padding: 5rem 0;
    }

    .contact-me-heading {
        margin: 0 0 5rem;
        text-align: center;
    }

    .contact-me-heading h2 {
        line-height: 1;
    }

    .contact-me iframe {
        border-radius: 20px;
        margin: 8rem 0 3rem;
    }

    .contact-me-form {
        border: 1px solid var(--primary-text);
        padding: 3rem;
        position: relative;
        background: var(--bg-white);
        border-radius: 1rem;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
    }

    .popup-form span,
    .contact-me-form span {
        background: var(--primary-color);
        color: var(--text-white);
        border-color: var(--primary-text);
    }

    .popup-form .form-control,
    .contact-me-form .form-control {
        border: 1px solid var(--primary-text);
    }

    .popup-form .form-group,
    .contact-me-form .form-group {
        margin-bottom: 1.5rem;
    }

    .popup-form textarea,
    .contact-me-form textarea {
        height: 05rem;
        border-top-right-radius: 0.3rem !important;
        border-bottom-right-radius: 0.3rem !important;
    }

    .contact-me button {
        border: 0;
        padding: 0.7rem 3rem;
        margin-top: 1rem;
    }

    .contact-me-info {
        margin: 2rem 0;
    }

    .contact-me-info li {
        margin: 3.2rem 0;
        display: flex;
        align-items: center;
    }

    .contact-me-info a {
        color: var(--primary-color);
        font-weight: 600;
        font-size: 1.2rem;
        margin-left: 1rem;
    }

    .contact-me-info a:hover {
        color: var(--secondary-color)
    }

    .contact-me-info .svg-inline--fa {
        background-color: var(--primary-color);
        padding: 1rem;
        border-radius: 100%;
        color: var(--text-white);
        height: 3rem;
        width: 3rem;
        text-align: center;
    }

    .contact-me-info i.fas.fa-mobile-android {
        padding: 1rem 1.2rem;
    }

    .contact-me-form:before {
        content: "";
        background-color: var(--primary-color);
        width: 34rem;
        height: 30rem;
        position: absolute;
        top: -3rem;
        right: -7.7rem;
        z-index: -1;
    }

    .social-buzz {
        padding: 5rem 0;
        text-align: center;
    }

    .social-buzz .social-icon ul {
        justify-content: center;
    }

    .social-buzz .social-icon li {
        margin: 1.2rem 0.2rem;
    }

    .social-buzz .social-icon .svg-inline--fa {
        font-size: 1.3rem;
        color: var(--text-white);
    }

    .social-buzz .social-icon a {
        background: var(--primary-color);
        /* padding: 1.0rem 1.0rem 0.8rem; */
        display: grid;
        height: 3rem;
        width: 3rem;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .social-post {
        margin: 2rem 0;
    }

    .social-post .card {
        border: 0;
    }

    .social-post iframe {
        width: 100%;
        border-radius: 1rem;
        border: 1px solid #ccc;
        height: 20rem;
    }

    .popup-form label.error,
    .contact-me-form label.error {
        display: block;
        width: 100%;
        color: #FF0000;
        font-weight: 600;
    }

    /* 8. Contact Me CSS End Here */
    /* 9. Blog CSS Start Here */
    .blog {
        padding: 5rem 0;
    }

    .blog-inner .search,
    .blog .search {
        position: relative;
        box-shadow: 0 0 40px rgba(51, 51, 51, 0.1);
    }

    .blog .form-select,
    .blog-inner .search input,
    .blog .search input {
        text-indent: 30px;
        border: 2px solid var(--primary-color);
        width: 22rem;
        height: 3rem;
    }

    .blog-inner .search .fa-search,
    .blog .search .fa-search {
        position: absolute;
        top: 1rem;
        left: 1rem;
        color: var(--primary-color);
    }

    .blog-inner .search button,
    .blog .search button {
        position: absolute;
        top: 0;
        right: 0.3rem;
        padding: 0.7rem 2rem;
        border: 0;
        border-radius: 0;
    }

    .blog .form-select:focus,
    .blog-inner .search button:focus input,
    .blog .search button:focus input {
        outline: 0;
        box-shadow: none;
    }

    .blog-inner .input-group span,
    .blog .input-group span {
        background: var(--primary-color);
        color: var(--text-white);
        position: absolute;
        z-index: 999;
        height: 3rem;
        border-radius: 0;
        border: 0;
    }

    .blog .form-select {
        text-indent: 50px;
    }

    .blog-wrapper {
        padding: 0 0 5rem;
        text-align: center;
    }

    .blog-pagination ul {
        justify-content: center;
    }

    .blog-pagination .page-link:hover,
    .blog-pagination .page-item.active .page-link {
        background-color: var(--primary-color);
        border-color: var(--primary-text);
        color: var(--text-white);
        outline: 0;
        box-shadow: unset;
    }

    .blog-pagination .page-link {
        color: var(--text-black);
    }

    .blog-pagination .page-item {
        margin: 0.2rem;
        border-radius: 0;
    }

    .blog-pagination .page-item.active .page-link.current.prev,
    .blog-pagination .page-item.active .page-link.current.next {
        background: unset;
        color: var(--text-black);
        border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    }

    /* 9. Blog CSS End Here */
    /* 10. Blog Inner CSS Start Here */
    .blog-inner {
        margin: 3rem 0;
    }

    .blog-inner .blog-inner-heading h2 {
        color: var(--primary-text);
        padding: 1rem 0rem 0.8rem;
    }

    .blog-inner-content h2,
    .blog-inner-content h2 span {
        color: var(--text-black);
        padding: 1rem 0 0.5rem;
        font-size: 2rem;
    }

    .blog-inner-content ol,
    .blog-inner-content ul {
        margin: 0;
        padding: 0 1.9rem;
    }

    .blog-inner-content li {
        margin: 1.2rem 0;
    }

    .blog-inner-content h3,
    .blog-inner-content ol li::marker {
        color: var(--text-black);
        padding: 0.5rem 0;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 0;
    }

    .blog-inner-content h4 {
        color: var(--text-black);
        padding: 0.5rem 0;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1;
        margin-top: 1rem;
    }

    .blog-inner-sidebar {
        border: 1px solid #ccc;
        margin: 0 0 0 2rem;
        padding: 2rem;
    }

    .blog-inner-sidebar .search {
        margin: 1.5rem 0 3rem;
    }

    .blog-inner .search button {
        /* right: 1rem; */
    }

    .blog-inner .search input {
        width: 21.9rem;
    }

    .blog-inner-recent-post h3 {
        margin-bottom: 2.5rem;
        line-height: 1.2;
        font-size: 1.6rem;
    }

    .blog-inner-recent-post.tips-trending-topics h3 {
        margin-bottom: 1.5rem;
    }

    .tips-and-tricks-inner-content a {
        color: var(--secondary-text);
    }

    .blog-inner-recent-post-content {
        margin: 1.2rem 0 1.9rem;
    }

    .blog-inner-recent-post .blog-inner-recent-post-content h3 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .blog-inner-recent-post .blog-inner-recent-post-content p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-width: 90%;
        line-height: 1.3;
        font-size: 0.9rem;
    }

    .blog-inner-categories .input-group span {
        height: 3rem;
    }

    .blog-inner-categories .form-select {
        text-indent: 50px;
        border: 2px solid var(--primary-color);
        height: 3rem;
    }

    .blog-inner-categories .form-select:focus {
        outline: 0;
        box-shadow: unset;
    }

    .blog-inner-categories .input-group {
        margin: 2rem 0;
    }

    .blog-inner-categories ul li {
        margin: 1rem 0 0;
        list-style: circle;
    }

    .blog-inner-categories ul li a {
        font-size: 1.2rem;
    }

    .blog-inner-categories ul {
        margin-top: 2rem;
        margin-left: 1rem;
    }

    .blog-inner-categories ul li::marker {
        color: var(--primary-text);
    }

    .blog-inner-archives {
        margin: 2rem 0 2rem 2rem;
    }

    .comments .form-label {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .comments .form-control {
        margin-bottom: 2rem;
        border-color: var(--text-black);
        height: 2.5rem;
        width: 20rem;
    }

    .comments textarea.form-control {
        width: 43.5rem;
        height: 8rem;
    }

    .comments .main-btn {
        border: 0;
        padding: 0.875rem 2.135rem;
    }

    .comments {
        margin: 2rem 0;
    }

    .comments span {
        height: 2.5rem !important;
        border-top-left-radius: 0.5rem !important;
        border-bottom-left-radius: 0.5rem !important;
        border: 0 !important;
    }

    .comments .form-control {
        text-indent: 3rem;
        border-radius: 0.5rem !important;
    }

    .form-group.form-textarea span {
        height: 8rem !important;
    }

    .blog-inner-recent-post-content img {
        height: 5rem;
        width: 10rem;
        object-fit: cover;
        min-width: 100%;
        min-height: 100%;
        flex-shrink: 0;
    }

    .blog-inner .blog-title {
        margin-bottom: 3rem;
    }

    /* 10. Blog Inner CSS End Here */
    /* 11. Tech CSS Start Here */
    .tech-slider-two .slick-track {
        display: flex !important;
    }

    .tech-slider-two .slick-slide {
        height: auto;
    }

    .tech-slider-items-two .card-text {
        text-align: left;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
        margin-bottom: 3rem;
        height: 6rem;
    }

    .tech-slider-items-two {
        padding: 4rem 6rem;
    }

    .tech-slider-items-two h2 {
        padding: 0 0 1rem;
        color: var(--primary-text);
        font-size: 2rem;
    }

    .tech-slider-items-two p {
        padding: 1rem 0 2rem;
    }

    .tech-slider-two {
        position: absolute;
        left: -14rem;
        top: 1.3rem;
        background-color: var(--bg-white);
        -webkit-box-shadow: 0 5px 110px 0 rgb(24 24 25 / 8%);
        box-shadow: 0 5px 110px 0 rgb(24 24 25 / 8%);
        border-radius: 2rem;
        max-width: 40rem;
        overflow: hidden;
    }

    .tech-slider-one img {
        border-radius: 2rem;
    }

    .technology-sec {
        padding: 5rem;
    }

    .tech-slider-two .slick-list.draggable {
        padding: 0 !important;
    }

    .tech-slider-two ul.slick-dots {
        right: 2rem;
        text-align: right;
        bottom: 1rem;
    }

    .tech-cat-slider .card {
        margin: 1rem;
    }

    .tech-cat-slider .card .card-img-overlay {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        color: var(--text-black);
    }

    .tech-cat-slider .card img {
        filter: brightness(0.5);
    }

    .tech-cat-slider .card .card-img-overlay h5 {
        font-size: 1.5rem;
        background-color: var(--bg-white);
        padding: 1rem;
        margin-bottom: 0;
    }

    .tech-cat h2 {
        margin-bottom: 2rem;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(2) .tips-tricks-content h2,
    .tips-tricks-row .tips-tricks-column:nth-child(3) .tips-tricks-content h2,
    .tips-tricks-row .tips-tricks-column:nth-child(4) .tips-tricks-content h2 {
        -webkit-line-clamp: 2;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        max-width: 90%;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(2) .tips-and-tricks-categories {
        top: 12px;
    }

    /* 11. Tech CSS End Here */
    /* 12. Tech Inner CSS Start Here */
    /* 12. Tech Inner CSS End Here */
    /* 13. Tips and Tricks CSS Start Here */
    .tips-tricks-sec {
        margin: 2rem 0;
    }

    .tips-tricks h2 {
        padding: 0 0 3rem;
    }

    .tips-tricks-row {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(8, 3.5vw);
        grid-gap: 20px;
    }

    .tips-tricks-column img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1rem;
    }

    .tips-tricks-row .tips-tricks-column:first-child {
        position: relative;
    }

    .tips-tricks-row .tips-tricks-column:first-child .tips-and-tricks-categories {
        top: 12.8rem;
    }

    .tips-and-tricks-categories {
        position: absolute;
        top: 50px;
        left: 30px;
        z-index: 999;
    }

    .tips-and-tricks-categories-main .badge.text-bg-primary {
        left: 30px !important;
        top: 0.8rem;
    }

    .home-blog-author img {
        filter: none !important;
    }

    .tips-tricks-row .tips-tricks-column {
        position: relative;
    }

    .tips-tricks-row .tips-tricks-column a {
        z-index: 999999999;
    }

    .tips-tricks-row .tips-tricks-column {
        transition: 0.3s ease-in-out !important;
        border-radius: 1rem;
    }

    .tips-tricks-row .tips-tricks-column:hover {
        box-shadow: -1px 10px 13px 3px rgba(0, 0, 0, 0.49);
    }

    .tips-tricks-row .tips-tricks-column:first-child {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 9;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(2) {
        grid-column-start: 5;
        grid-column-end: 9;
        grid-row-start: 1;
        grid-row-end: 5;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(3) {
        grid-column-start: 7;
        grid-column-end: 5;
        grid-row-start: 9;
        grid-row-end: 5;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(4) {
        grid-column-start: 7;
        grid-column-end: 9;
        grid-row-start: 5;
        grid-row-end: 9;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(5) {
        grid-column-start: 7;
        grid-column-end: 9;
        grid-row-start: 5;
        grid-row-end: 9;
    }

    .tips-tricks-column {
        position: relative;
    }

    .tips-tricks-content {
        position: absolute;
        bottom: 0;
        left: 2rem;
        z-index: 999;
    }

    /* .tips-tricks-column:before {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          content: "";
          background-color: rgba(0, 0, 0, 0.8);
          border-radius: 1rem;
              z-index: 11;
             } */
    .tips-tricks-content h2 {
        color: var(--text-white);
        font-size: 1.8rem;
        line-height: 1.1;
        margin: 1rem 0;
        padding: 0;
    }

    .tips-tricks-content .card-text {
        color: var(--text-white);
        line-height: 1.2;
        text-align: left;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-width: 90%;
    }

    .tips-tricks-content .card-text p {
        color: var(--text-white);
        line-height: 1.5;
    }

    .tips-author-info img {
        height: 3rem;
        width: 3rem;
        border-radius: 100%;
    }

    .tips-tricks-home .tips-author-info h5 {
        color: var(--text-white);
    }

    .tips-author-info h5 {
        color: var(--text-black);
    }

    .tips-author-info {
        margin: 2rem 0;
        width: 20rem;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(3) .tips-author-info,
    .tips-tricks-row .tips-tricks-column:nth-child(4) .tips-author-info {
        width: auto;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(2) .tips-author-info {
        width: 15rem;
    }

    .tips-tricks-row .tips-tricks-column .tips-author-info .col-3 {
        padding: 0;
    }

    .tips-tricks-row .tips-tricks-column .tips-author-info .row {
        align-items: center;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(3) h2,
    .tips-tricks-row .tips-tricks-column:nth-child(4) h2 {
        font-size: 1rem;
        margin-bottom: 0;
        line-height: 1.3;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(3) p,
    .tips-tricks-row .tips-tricks-column:nth-child(4) p {
        /* display: none; */
    }

    .tips-tricks-row .tips-tricks-column:nth-child(3) .tips-tricks-content .card-text,
    .tips-tricks-row .tips-tricks-column:nth-child(4) .tips-tricks-content .card-text,
    .tips-tricks-row .tips-tricks-column:nth-child(3) .tips-tricks-content .card-text,
    .tips-tricks-row .tips-tricks-column:nth-child(2) .tips-tricks-content .card-text {
        -webkit-line-clamp: 2;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(3) .tips-tricks-content .card-text p,
    .tips-tricks-row .tips-tricks-column:nth-child(4) .tips-tricks-content .card-text p {
        font-size: 0.9rem;
        line-height: 1.2;
        padding-top: 0.7rem;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(2) .tips-author-info,
    .tips-tricks-row .tips-tricks-column:nth-child(3) .tips-author-info,
    .tips-tricks-row .tips-tricks-column:nth-child(4) .tips-author-info {
        margin: 1rem 0.8rem;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(2) .tips-author-info img,
    .tips-tricks-row .tips-tricks-column:nth-child(3) .tips-author-info img,
    .tips-tricks-row .tips-tricks-column:nth-child(4) .tips-author-info img {
        height: 1.9rem;
        width: 1.9rem;
    }

    .tips-tricks-row .tips-tricks-column:nth-child(2) .tips-author-info h5,
    .tips-tricks-row .tips-tricks-column:nth-child(3) .tips-author-info h5,
    .tips-tricks-row .tips-tricks-column:nth-child(4) .tips-author-info h5 {
        font-size: 1rem;
    }

    .tips-featured-slider-items {
        padding: 0.5rem;
    }

    .tips-tricks.tips-tricks-home .badge.text-bg-primary {
        background-color: var(--secondary-color) !important;
    }

    .tips-featured-slider-items img {
        flex-shrink: 0;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }

    .tips-trending-topics ul {
        list-style: none;
        padding: 0;
    }

    .tips-trending-topics ul li {
        position: relative;
    }

    .tips-trending-topics ul li a {
        display: block;
        position: relative;
        padding-left: 1rem;
        padding-bottom: 1rem;
    }

    .tips-trending-topics ul li a:before {
        position: absolute;
        left: 0px;
        top: 0.4rem;
        content: "";
        background-image: url(../images/right-arrow.png);
        display: block;
        background-position: left;
        background-size: contain;
        height: 0.8rem;
        width: 0.8rem;
    }

    .tips-trending-topics ul li a span {
        float: right;
    }

    .tips-tricks-column img {
        filter: brightness(0.2);
    }

    .popular-post .blog-inner-recent-post-content h3 {
        font-size: 1rem !important;
        line-height: 1.2;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-width: 90%;
    }

    .blog-inner-sidebar.popular-post {
        margin-top: 2rem;
    }

    .blog-inner-sidebar.popular-post p {
        margin-bottom: 0.8rem;
    }

    .tips-tricks-wrapper .tips-author-info h5 {
        color: var(--text-black);
    }

    .tips-tricks-wrapper .home-author-name {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .tips-tricks-wrapper .col-3 {
        padding-right: 0;
        width: 16%;
    }

    .tips-tricks-wrapper .tips-author-info img {
        height: 2rem;
        width: 2rem;
    }

    .tips-tricks-wrapper .tips-author-info {
        margin: 1.5rem 0;
        width: auto;
    }

    .tips-tricks-pagination {
        margin: 2rem 0;
    }

    .tips-tricks-sec .card-title {
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .tips-tricks-sec .card-text {
        color: var(--text-black);
        text-align: left;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-width: 90%;
        line-height: 1.5;
        font-size: 1rem;
    }

    .tips-tricks-sec .badge.text-bg-primary {
        position: absolute;
        top: 1.8rem;
        background-color: var(--secondary-color) !important;
        left: 2.6rem !important;
    }

    .tips-tricks-sec-wrap .card {
        transition: 0.3s ease-in-out !important;
    }

    .tips-tricks-sec-wrap .card:hover {
        box-shadow: -1px 10px 13px 3px rgba(0, 0, 0, 0.49);
    }

    .tips-tricks-sec-wrap .card:hover .main-btn {
        background-color: var(--secondary-color) !important;
    }

    .tips-tricks-sec-wrap .card-body {
        padding: 1.5rem;
    }

    .tips-tricks-sec-wrap .card-title {
        font-weight: 700;
        padding: 2rem 0 0.2rem;
        font-size: 1.6rem;
        color: var(--primary-text);
    }

    .tips-tricks-sec-wrap .card-footer {
        padding: 2rem 0;
        background: unset;
        border: 0;
    }

    /* 13. Tips and Tricks CSS End Here */
    /* 1    4. Tips and Tricks Inner CSS Start Here */
    .tips-tricks-search {
        padding-left: 1rem;
        margin-bottom: 2rem;
    }

    .tips-tricks-search input {
        width: 17.9rem !important;
        text-indent: 5px !important;
    }

    .tips-tricks-search button {
        right: -0.7rem !important;
        height: 100%;
        color: var(--text-white);
    }

    .tips-tricks-search button .svg-inline--fa {
        color: var(--text-white) !important;
        left: 1.4rem !important;
    }

    .tips-tricks-search .search {
        margin: 1.5rem 0 !important;
    }

    .instagram-post img {
        border-radius: 0.8rem;
    }

    .blog-inner-recent-post-content .col-lg-5 {
        padding: 0;
    }

    /* 14. Tips and Tricks Inner CSS End Here */
    /* 1    7. Source Code CSS Start Here */
    .source-code-sec {
        padding: 5rem 0 0;
    }

    .source-code-sec h2 {
        padding-bottom: 2rem;
    }

    .source-code-sec .card {
        border-radius: 2rem;
        transition: 0.3s ease-in-out !important;
    }

    .source-code-sec .card:hover {
        box-shadow: -1px 10px 13px 3px rgba(0, 0, 0, 0.49);
    }

    .source-code-sec .card:hover .main-btn {
        background-color: var(--secondary-color);
    }

    .source-code-sec .card img {
        border-radius: 2rem;
        padding: 1.5rem;
    }

    .source-code-sec .card-body {
        padding: 0.8rem 1.5rem;
    }

    .source-code-sec .card-title {
        font-weight: 700;
        padding: 2rem 0 .2rem;
        font-size: 1.6rem;
        color: var(--primary-text);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
    }

    .source-code-sec .card-text {
        color: var(--text-black);
        text-align: left;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-width: 90%;
        line-height: 1.5;
        font-size: 1rem;
    }

    .source-code-sec .card-footer {
        border: 0;
        background: var(--bg-white);
        padding: 2rem 0;
    }

    .source-code-sec .col {
        position: relative;
    }

    .source-code-sec .badge.text-bg-primary {
        position: absolute;
        top: 2.3rem;
        left: 2.8rem;
        background-color: var(--secondary-color) !important;
    }

    .source-code-color-scheme-slider-arrows .color-scheme-slider-next.slick-arrow {
        top: 10.5rem;
        right: 1rem;
    }

    .source-code-color-scheme-slider-arrows .color-scheme-slider-prev {
        top: 10.5rem;
    }

    /* 17. Source Code CSS End Here */
    /* 18. Source Code Inner CSS Start Here */
    .features-list {
        padding: 1rem 0;
    }

    .features-list ol,
    .features-list ul {
        padding: 0 1.3rem;
    }

    .features-list li {
        color: var(--text-black);
        margin-bottom: 1rem;
    }

    .features-list ol li::marker {
        font-size: 1rem;
        font-weight: 700;
    }

    .download-btn {
        padding: 2rem 0 5rem;
    }

    /* 18. Source Code Inner CSS End Here */
    /* 19.Privacy Policy CSS Start Here */
    .privacy-policy-section {
        padding: 5rem 0;
    }

    .privacy-policy-section h2 {
        font-size: 1.5rem;
        margin: 2rem 0 0.8rem;
    }

    .privacy-policy-section li {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    /* 19.Privacy Policy CSS End Here */
    /* 2 0. Sitemap CSS Start Here */
    .sitemap-section {
        padding: 5rem 0;
    }

    .sitemap-content {
        padding: 2rem 0;
    }

    .sitemap-content .card {
        height: 20rem;
    }

    .sitemap-content .card picture {
        z-index: 999999;
    }

    .sitemap-content .card-img-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sitemap-content img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top;
        object-position: top;
        height: 19.9rem;
        transition: 5s all ease;
        z-index: 999;
        filter: brightness(0.2);
    }

    .sitemap-content img:hover {
        -o-object-position: bottom;
        object-position: bottom;
    }

    .sitemap-content .card-img-overlay .card-title {
        z-index: 999999;
        filter: none;
    }

    .sitemap-section .nav-pills .nav-link {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-black);
        margin: 0.8rem;
    }

    .sitemap-section .nav-pills .nav-link.active,
    .sitemap-section .nav-pills .show>.nav-link {
        background-color: var(--primary-color);
        color: var(--text-white);
    }

    .sharethis-inline-share-buttons {
        padding-top: 10px;
        z-index: 999 !important;
    }

    .st-btn {
        border-radius: 100% !important;
        height: 40px !important;
        min-width: 40px !important;
        display: inline-block !important;
    }

    /* 20. Sitemap CSS End Here */
    /* 21. Footer CSS Start Here */
    footer {
        background: var(--primary-color);
        color: var(--text-white);
        padding: 5rem 0 0;
    }

    .menu-footer-menu-container ul {
        list-style: none;
        padding: 0;
    }

    .copyright-pages-row .col-lg-3:last-child {
        text-align: right;
    }

    .copyright-pages-row .col-lg-3:nth-child(2) {
        text-align: center;
    }

    footer img {
        filter: brightness(0) invert(1);
        margin-right: 3rem;
    }

    .social-icon li {
        padding: 1.5rem 0.3rem;
    }

    .social-icon a {
        border-radius: 100%;
        background-color: var(--bg-white);
        padding: 0.2rem 0.5rem;
        display: grid;
        height: 2rem;
        width: 2rem;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .social-icon a:hover {
        background-color: var(--secondary-color);
        color: var(--text-white);
    }

    .social-icon a:hover .svg-inline--fa {
        color: var(--text-white);
    }

    .social-icon .svg-inline--fa {
        color: var(--primary-color);
        padding: 0;
        margin: 0;
        font-size: 1rem;
    }

    footer h5 {
        margin-bottom: 1.2rem;
        font-weight: 600;
    }

    footer li {
        margin-bottom: 0.4rem;
    }

    footer a {
        padding: 1.2rem 0;
        text-align: justify;
        color: var(--text-white);
        font-weight: 400;
    }

    footer .design-by {
        color: var(--secondary-text);
        font-weight: 600;
        cursor: pointer;
        z-index: 999;
    }

    footer .svg-inline--fa {
        margin-right: 0.3rem;
    }

    .news-letter {
        padding: 0 2rem;
    }

    footer label {
        margin-bottom: 1rem;
    }

    footer .main-btn {
        box-shadow: unset;
        background-color: var(--secondary-color);
        color: var(--text-white);
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        border: 0;
        border-radius: 50px;
        margin: 1rem 0;
    }

    footer .main-btn:hover {
        background-color: var(--bg-white);
        color: var(--text-black);
    }

    .backto-top {
        position: fixed;
        bottom: 0.2rem;
        right: 1rem;
        background-color: var(--secondary-color);
        border-radius: 100%;
        padding: 0.8rem 1.2rem;
        cursor: pointer;
    }

    .backto-top .svg-inline--fa {
        color: var(--bg-white);
        font-size: 1.2rem;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }

    .copy-right a:hover {
        color: var(--text-white);
        cursor: default;
    }

    .portfolio-content button.main-btn {
        color: var(--text-white);
        border: 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .portfolio-content button.main-btn:hover {
        background-color: var(--secondary-color);
    }

    .coming-soon .main-btn {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    .modal-backdrop.fade.show {
        z-index: 9999999;
    }

    div#contact-form-popup {
        z-index: 99999999999;
    }

    /* 21. Footer CSS End Here */
</style>