* {
       padding: 0;
       margin: 0;
       font-family: "Inter", sans-serif;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-weight: 600;
   }


   a {
       text-decoration: none;
   }

   p {
       font-weight: 400;
       font-size: 16px;
       line-height: 1.75;
   }

   .orange-btn {
       border-radius: 50px;
       padding: 8px 22px;
       font-weight: 600;
       background-color: #ff9100;
       color: #fff;
   }

   .white-outline-btn {
       background-color: transparent;
       color: #fff;
       border-color: #fff;
       border-radius: 50px;
       padding: 8px 22px;
       font-weight: 600;
       transition: 0.35s ease-in-out;
   }

   .white-outline-btn:hover {
       background-color: #fff;
       color: #1a1a1a;
   }

   .blue-outline-btn {
       background-color: transparent;
       color: #008ac6;
       border-color: #008ac6;
       border-radius: 50px;
       padding: 8px 22px;
       font-weight: 600;
       transition: 0.35s ease-in-out;
   }

   .blue-outline-btn:hover {
       background-color: #008ac6;
       color: #fff;
   }

   .blue-btn {
       border-radius: 50px;
       padding: 8px 22px;
       font-weight: 600;
       background-color: #008ac6;
       color: #fff;
       position: relative;
       z-index: 1;
       transition: 0.35s ease-in-out;
       overflow: hidden;
   }

   .blue-btn::after {
       position: absolute;
       top: inherit;
       right: inherit;
       bottom: inherit;
       left: -5%;
       content: "";
       height: 150px;
       width: 115%;
       z-index: -1;
       background-color: #1a1a1a;
       color: #fff;
       transform: translateY(-45%) skew(25deg) scale(0);
       transition: 0.25s ease-in-out;
   }

   .blue-btn:hover::after {
       transform: translateY(-45%) skew(25deg) scale(1.2);
   }

   .blue-btn:hover {
       color: #fff;
   }

   .custom-navbar {
       /* background: #008ac6; */
       background: #fff;
       color: #1a1a1a;
       padding: 10px 0;
       transition: all 0.35s ease;
   }

   .custom-navbar .nav-link {
       color: #fff;
       color: #1a1a1a;
       font-weight: 500;
       transition: 0.3s;
       margin-right: 1.2rem;
   }

   .custom-navbar .nav-link:hover,
   .custom-navbar .nav-link.active {
       color: #fff;
       color: #1a1a1a;
   }

   .custom-navbar .phone-box {
       background-color: #008ac6;
       color: #fff;
   }

   .custom-navbar .phone-box i {
       animation: phone-ring 1s infinite;
   }

   @keyframes phone-ring {
       0% {
           transform: rotate(0);
       }

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

       20% {
           transform: rotate(-15deg);
       }

       30% {
           transform: rotate(15deg);
       }

       40% {
           transform: rotate(-15deg);
       }

       50% {
           transform: rotate(0);
       }

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

   .nav-btn {
       border-radius: 50px;
       padding: 8px 22px;
       font-weight: 600;
   }

   .navbar-toggler {
       border: none;
       color: #1a1a1a;
   }

   .custom-navbar.scrolled {
       /* background: #008ac6; */
       background-color: #fff;
       backdrop-filter: blur(8px);
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
       padding: 5px 0;
   }

   /* .custom-navbar.scrolled .nav-link {
       color: #fff !important;
   } */

   /*  FOOTER */
   .footer {
       background: #0f1533;
       color: #b8c0ff
   }

   .custom-footer {
       background: #1a1a1a;
       padding: 4rem 0 0;
       color: #ffff;
   }

   .footer-title {
       color: #fff;
       font-weight: 600;
       margin-bottom: 20px;
   }

   .footer-text {
       font-size: 14px;
       line-height: 1.7;
   }

   .footer-links {
       list-style: none;
       padding: 0;
   }

   .footer-links li {
       margin-bottom: 12px;
   }

   .footer-links a {
       color: #fff;
       text-decoration: none;
       font-size: 14px;
       transition: 0.3s;
   }

   .footer-links a:hover {
       color: #fff;
   }

   .footer-social {
       display: flex;
   }

   .footer-social a {
       width: 36px;
       height: 36px;
       background: #008ac6;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       color: #fff;
       transition: 0.3s;
       margin-right: 10px;
       margin-bottom: 1rem;
   }

   .footer-social a:hover {
       background: #4f6bff;
   }

   .footer-add {
       display: flex;
   }

   .footer-add p {
       margin-bottom: 0;
       font-weight: bold;
   }

   .footer-add span {
       font-size: 13px;
       color: #fff;
       margin-bottom: 0.5rem;
       display: inline-block;
   }

   .footer-add span a {
       color: #fff;
   }

   .footer-form {
       margin-top: 15px;
   }

   .footer-bottom {
       border-top: 1px solid #dfdfdf;
       margin-top: 50px;
       padding: 20px 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       font-size: 13px;
   }

   .footer-bottom-right ul {
       display: flex;
       list-style: none;
       margin-bottom: 0;
       padding-left: 0;
   }

   .footer-bottom-right ul li a {
       text-decoration: none;
       color: #fff;
       margin-right: 10px;
   }

   @media (max-width: 991px) {
       .custom-navbar {
           padding: 12px 0;
       }

       .nav-btn {
           margin-top: 10px;
       }
   }

   @media (max-width: 768px) {
       .footer-bottom {
           justify-content: center;
       }

       .footer-bottom-right ul {
           flex-wrap: wrap;
           justify-content: center;
       }
   }

   .section-pad {
       padding: 6rem 0;
   }

   .hero {
       background: #008ac6;
       color: #fff;
       position: relative;
       overflow: hidden;
       margin-top: 2rem;
   }

   .cloud {
       position: absolute;
       left: 0;
       bottom: 0;
       width: 100%;
       height: 180px;
       background-image: url(../img/cloud.png);
       background-repeat: no-repeat;
       background-position: bottom center;
       background-size: 100% auto;
       z-index: 1;
   }

   .hero-left {
       padding-bottom: 3rem;
   }

   .hero-left span {
       font-weight: bold;
       font-size: 14px;
       margin-bottom: 0.5rem;
       display: inline-block;
       color: #fff;
   }

   .hero-left h1 {
       text-transform: capitalize;
       font-size: 2.5rem;
       font-weight: 700;
   }

   .hero-right {
       position: relative;
       z-index: 2;
   }

   @media (max-width: 992px) {
       .cloud {
           height: 140px;
           background-size: cover;
       }
   }

   @media (max-width: 576px) {
       .cloud {
           height: 100px;
           background-size: cover;
       }
   }

   /* Home About */
   .home-about-right {
       margin-top: 1rem;
   }

   .custom-span {
       color: #008ac6;
       font-weight: 700;
   }

   .home-about-right p {
       color: #1a1a1a;
   }

   .home-about-right blockquote {
       font-style: italic;
       font-weight: 500;
   }

   .feature-wrap {
       position: relative;
   }

   .shape-top {
       position: absolute;
       top: -10px;
       left: 20px;
       z-index: -1;
       opacity: 0.7;
       animation: zoomUpDown 4s linear infinite;
   }

   @keyframes zoomUpDown {

       0%,
       100% {
           -webkit-transform: scale(0.5);
           transform: scale(0.5);
       }

       50% {
           -webkit-transform: scale(0.7);
           transform: scale(0.7);
       }
   }

   .shape-bottom {
       position: absolute;
       bottom: 60px;
       right: 75px;
       z-index: -1;
       animation: UpDown 4s linear infinite;
   }

   @keyframes UpDown {
       0% {
           -webkit-transform: translateY(0px);
           transform: translateY(0px);
       }

       50% {
           -webkit-transform: translateY(-25px);
           transform: translateY(-25px);
       }

       100% {
           -webkit-transform: translateY(0px);
           transform: translateY(0px);
       }
   }



   .feature-card {
       background: #fff;
       border-radius: 18px;
       padding: 28px;
       height: 100%;
       box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
       border: 1px solid transparent;
   }

   .feature-card p {
       margin-bottom: 0;
   }

   .feature-card:hover {
       border-color: #008ac6;
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
       transition: 0.35s ease-in-out;
   }

   .feature-card-border {
       border-color: #008ac6;
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   }

   .icon-pill {
       width: 56px;
       height: 56px;
       border-radius: 14px;
       display: grid;
       place-items: center;
       background: #eef1ff;
       color: #4a5cff;
       font-size: 24px;
       margin-bottom: 16px
   }

   .trusted-section {
       background: #008ac6;
       color: #fff;
       border-top-left-radius: 80px;
       border-top-right-radius: 80px;
   }

   .logos span {
       color: #ffffff;
       font-size: 28px;
       font-weight: 600;
       opacity: 0.9;
   }

   .stat-card {
       background: rgba(255, 255, 255, 0.08);
       border-radius: 16px;
       padding: 40px 20px;
       color: #fff;
       transition: transform 0.3s ease;
   }

   .stat-card h2 {
       font-size: 42px;
       margin-bottom: 10px;
   }

   .stat-card p {
       margin: 0;
       opacity: 0.85;
   }

   .stat-card:hover {
       transform: translateY(-6px);
   }

   @media (max-width: 768px) {
       .stat-card h2 {
           font-size: 34px;
       }
   }

   .seo-section {
       background: #f7f9fc;
   }

   /* LEFT SIDEBAR */
   .service-box {
       background: #fff;
       border-radius: 10px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
       padding: 15px 0;
   }

   .nav-pills .nav-link {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 18px 25px;
       text-align: left;
   }

   .nav-pills .nav-link img {
       width: 40px;
       height: 40px;
       object-fit: contain;
       flex-shrink: 0;
   }

   .nav-pills .nav-link h6 {
       margin: 0;
       font-size: 16px;
   }

   .nav-pills .nav-link small {
       display: block;
       font-size: 12px;
       color: #888;
       margin-bottom: 2px;
   }


   .nav-pills .nav-link {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 18px 25px;
       border-radius: 0;
       color: #1a1a1a;
       background: transparent;
       position: relative;
   }

   .nav-pills .nav-link small {
       display: block;
       font-size: 12px;
       color: #888;
   }

   .nav-pills .nav-link.active {
       background: transparent;
       font-weight: 700;
       color: #1a1a1a;
   }


   .nav-pills .nav-link.active::after {
       content: "";
       position: absolute;
       right: -15px;
       top: 50%;
       transform: translateY(-50%);
       border-top: 15px solid transparent;
       border-bottom: 15px solid transparent;
       border-left: 15px solid #fff;
   }

   .content-box h2 {
       font-weight: 700;
       margin-bottom: 15px;
   }

   .content-box p {
       color: #666;
   }

   .check-list {
       list-style: none;
       padding: 0;
   }

   .check-list li {
       position: relative;
       padding-left: 25px;
       margin-bottom: 10px;
   }

   .check-list li::before {
       content: "✔";
       position: absolute;
       left: 0;
       color: #008ac6;
   }

   @media (max-width: 991px) {
       .nav-pills .nav-link.active::after {
           display: none;
       }

   }


   .blog-card {
       border-radius: 18px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, .06);

   }

   .blog-img {
       overflow: hidden;
       border-top-right-radius: 18px;
       border-top-left-radius: 18px;
   }

   .blog-img img {
       width: 100%;
       height: 220px;
       object-fit: cover;
   }

   .blog-card img {
       transition: all 0.35s ease-in-out;
   }

   .blog-card:hover img {
       transform: scale(1.2);
       border-top-right-radius: 18px;
       border-top-left-radius: 18px;
   }

   .blog-card ul {
       list-style: none;
       display: flex;
       padding-left: 0;
       color: #1a1a1a;
       margin-top: 1rem;
   }

   .blog-card ul li {
       margin-right: 1rem;
   }

   .blog-card ul li a {
       color: #1a1a1a;
       font-size: 14px;
   }

   .blog-card ul li a i {
       color: #008ac6;
   }

   .blog-card h5 a {
       color: #1a1a1a;
   }

   .blog-card h5 a:hover {
       color: #008ac6;
   }

   .blog-card .custom-blog-a a {
       display: inline-block;
       margin-top: 1rem;
       margin-bottom: 2rem;
       color: #787878;
       font-weight: 600;
   }

   .blog-card .custom-blog-a a:hover {
       color: #008ac6;
   }

   .testimonial-section {
       padding: 80px 0;
       background: #fff;
   }

   .section-label {
       font-size: 14px;
       font-weight: 600;
       color: #000;
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 10px;
   }

   .spinner-icon {
       width: 14px;
       height: 14px;
       border: 2px solid #000;
       border-top-color: transparent;
       border-radius: 50%;
   }

   .testimonial-card {
       width: 94% !important;
       background: #fff;
       border: 1px solid #dbe5ff;
       border-radius: 14px;
       padding: 30px;
       height: 100%;
       position: relative;
   }

   .quote-circle {
       width: 50px;
       height: 50px;
       background: #e6eeff;
       color: #008ac6;
       font-weight: 700;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       margin-bottom: 20px;
   }

   .rating-badge {
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 18px;
   }

   .rating-badge span {
       color: #1a1a1a;
   }

   .testimonial-text {
       font-size: 16px;
       line-height: 1.7;
       color: #444;
       margin-bottom: 25px;
   }

   .user-info {
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .user-info img {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       object-fit: cover;
   }

   .user-info h6 {
       margin: 0;
       font-weight: 700;
   }

   .user-info span {
       font-size: 14px;
       color: #666;
   }

   @media (max-width: 768px) {
       .section-title {
           font-size: 30px;
       }
   }

   .process-step {
       background: #fff;
       border-radius: 16px;
       padding: 22px;
       text-align: center
   }

   .pricing-wrap {
       background: #f7f9fc;
   }

   .pricing-card {
       background: #fff;
       border-radius: 16px;
       padding: 40px;
       position: relative;
   }

   .pricing-icon {
       position: absolute;
       right: 10%;
       top: 10%;
   }

   .pricing-card h1.price {
       font-size: 48px;
       font-weight: 700;
   }

   .pricing-card h1.price span {
       font-size: 16px;
       font-weight: 400;
       color: #666;
   }

   .pricing-card ul li {
       margin-bottom: 14px;
       font-size: 16px;
   }

   .premium {
       border: 2px solid #008ac6;
   }

   .badge-recommended {
       position: absolute;
       top: -14px;
       left: 30px;
       background: #008ac6;
       color: #fff;
       padding: 6px 16px;
       font-size: 14px;
       border-radius: 6px;
   }

   @media (max-width: 992px) {
       .section-pad {
           padding: 4rem 0;
       }
   }


   .banner-hero {
       background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%), url("../img/service.jpg");
       background-size: cover;
       background-position: top center;
       margin-top: 90px;
       height: 350px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .banner-hero h1 {
       font-weight: 700;
       color: #fff;
   }

   .breadcrumb-text {
       color: #fff;
       margin-top: 10px;
   }

   .banner-hero a {
       color: #fff;
   }

   .about-banner {
       background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%), url("../img/about-banner.jpg");
   }

   .contact-banner {
       background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%), url("../img/contact-banner.jpg");
   }

   .blog-banner {
       background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%), url("../img/blog-banner.jpg");
   }

   /* CONTACT SECTION */
   .contact-form {
       background: #fff;
       padding: 40px;
       border-radius: 16px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
   }

   .contact-info .info-box {
       display: flex;
       gap: 16px;
       margin-bottom: 25px;
       word-break: break-word;
   }

   .contact-info .icon {
       width: 48px;
       height: 48px;
       min-width: 48px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .bg-purple {
       background: linear-gradient(180deg, #d5bbff 0%, #4787FA00 100%);
       color: #6222cc;
   }

   .bg-orange {
       background: linear-gradient(180deg, #ffb6a0 0%, #4787FA00 100%);
       color: #FF5621;

   }

   .bg-green {
       background: linear-gradient(180deg, #72C22742 0%, #4787FA00 100%);
       color: #72C227;
   }

   /* MAP */
   .map-section iframe {
       width: 100%;
       height: 420px;
       border: none;
   }

   @media (max-width: 991px) {
       .contact-hero {
           padding: 100px 0 60px;
       }

       .contact-form {
           padding: 30px;
       }
   }

   /* TEAM CARD */
   .team-card {
       background: #fff;
       border-radius: 20px;
       padding: 120px 20px 35px;
       text-align: center;
       position: relative;
       overflow: hidden;
       transition: all 0.4s ease;
       height: 100%;
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

   }

   .team-bg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 150px;
       background-color: #008ac6;
       border-bottom-left-radius: 120px;
       border-bottom-right-radius: 120px;
       z-index: 0;
       transition: all 0.4s ease;
   }

   .team-img {
       position: absolute;
       top: 90px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 2;
   }

   .team-img img {
       width: 110px;
       height: 110px;
       border-radius: 50%;
       border: 6px solid #fff;
       object-fit: cover;
       background: #fff;
       transition: transform 0.4s ease;
   }

   .team-card h5 {
       margin-top: 100px;
       transition: color 0.3s ease;
   }

   .team-card p {
       color: #6b7280;
       margin-bottom: 0;
   }

   .team-card:hover {
       transform: translateY(-12px);
       box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
   }

   .team-card:hover .team-bg {
       height: 165px;
   }

   .team-card:hover img {
       transform: scale(1.08);
   }

   .team-card:hover h5 {
       color: #008ac6;
   }

   .faq-heading p {
       max-width: 700px;
       margin: 0 auto;
       color: #6c757d;
       font-size: 16px;
   }

   #faqAccordion .accordion-item {
       border: none;
       margin-bottom: 15px;
       border-radius: 12px;
       overflow: hidden;
       background-color: #a4deef;
   }

   #faqAccordion .accordion-button {
       background-color: #a4deef;
       font-weight: 600;
       font-size: 18px;
       padding: 20px 25px;
       color: #1f2937;
   }

   #faqAccordion .accordion-button:not(.collapsed) {
       background-color: #a4deef;
       color: #008ac6;
       box-shadow: none;
   }

   #faqAccordion .accordion-button:focus {
       box-shadow: none;
   }

   #faqAccordion .accordion-body {
       padding: 0 25px 25px;
       color: #374151;
       font-size: 16px;
       line-height: 1.7;
   }

   @media (max-width: 768px) {
       .faq-title {
           font-size: 32px;
       }
   }


   .terms-item {
       display: flex;
       gap: 20px;
       margin-bottom: 1rem;
   }

   .terms-number {
       min-width: 50px;
       height: 50px;
       background-color: #008ac6;
       color: #fff;
       font-weight: 700;
       font-size: 18px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .terms-heading {
       color: #1a1a1a;
   }


   @media (max-width: 768px) {
       .terms-item {
           flex-direction: column;
           margin-bottom: 0;
       }

       .terms-number {
           width: 40px;
           height: 40px;
           min-width: 40px;
           font-size: 16px;
       }

       .shape-top,
       .shape-bottom {
           display: none;
       }
   }

   .service-list {
       list-style: none;
       padding: 0;
   }

   .service-list li {
       padding-left: 24px;
       position: relative;
       margin-bottom: 10px;
   }

   .service-list li::before {
       content: "✓";
       position: absolute;
       left: 0;
       color: #008ac6;
   }

   #service-faq .accordion-item {
       border: none;
       border-bottom: 1px solid #000;
       background-color: transparent;
   }

   #service-faq .accordion-button {
       padding: 22px 0;
       font-size: 18px;
       font-weight: 600;
       color: #000;
       background-color: transparent;
       box-shadow: none;
   }

   #service-faq .accordion-button:not(.collapsed) {
       background-color: transparent;
       color: #000;
       box-shadow: none;
   }

   #service-faq .accordion-button::after {
       margin-left: auto;
   }

   #service-faq .accordion-body {
       padding: 0 0 22px 0;
       font-size: 15px;
       line-height: 1.7;
       color: #777;
   }

   #service-faq .accordion-button:focus {
       box-shadow: none;
       outline: none;
   }

   #service-faq .accordion-item:last-of-type {
       border-radius: 0;
       margin-bottom: 3rem;
   }

   .service-card {
       background: #f8f9fa;
       padding: 25px;
       border-radius: 10px;
       height: 100%;
   }

   .service-card i {
       width: 60px;
       height: 60px;
       font-size: 1.4rem;
       background-color: #008ac6;
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       margin-bottom: 1rem;
   }

   .service-sidebar {
       position: sticky;
       top: 60px;
   }

   .service-menu {
       list-style: none;
       padding: 0;
       background-color: #f1f4f8;
   }

   .service-menu .service-menu-box {
       padding: 1.5rem;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       transition: all 0.3s ease;
   }

   .service-menu .service-menu-box.active {
       background: #008ac6;
       color: #fff;
   }

   .service-menu .service-menu-box:hover {
       background: #008ac6;
       color: #fff;
   }


   .help-box {
       background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%), url(../img/social02.jpg);
       background-size: cover;
       background-position: center;
       color: #fff;
       padding: 25px;
       border-radius: 10px;
       text-align: center;
   }

   .help-box a {
       color: #fff;
   }

   @media (max-width: 991px) {
       .service-sidebar {
           position: static;
       }

       .pricing-card h1.price {
           font-size: 40px;
       }

       .trusted-section {
           border-top-left-radius: 50px;
           border-top-right-radius: 50px;
       }

       .hero {
           margin-top: 5rem;
       }

       .hero-left h1 {
           font-size: 2rem;
       }
   }

   @media (max-width: 768px) {
       .hero-left h1 {
           font-size: 1.8rem;
       }

       .section-pad {
           padding: 3rem 0;
       }

       .blog-card ul li {
           margin-right: 0.5rem;
       }
   }

   .blog-details blockquote {
       background: #0b1c3d;
       color: #fff;
       padding: 30px;
       border-radius: 6px;
       margin: 30px 0;
   }

   .blog-meta {
       display: flex;
       flex-wrap: wrap;
   }

   .blog-meta span {
       display: block;
       margin-right: 20px;
       margin-bottom: 0.7rem;
       color: #777;
   }

   .blog-meta i {
       color: #008ac6;
   }

   .tags span {
       background: #f1f1f1;
       padding: 6px 14px;
       margin: 5px;
       display: inline-block;
       border-radius: 4px;
       font-size: 14px;
   }

   .share a {
       margin-left: 10px;
       color: #333;
   }

   .comment-box {
       display: flex;
       gap: 15px;
       background: #ffff;
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
       padding: 20px;
       border-radius: 6px;
   }

   .comment-box img {
       width: 60px;
       height: 60px;
       border-radius: 50%;
   }

   .comment-form {
       background: #f4f5f8;
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
       padding: 20px;
       border-radius: 6px;

   }

   .sidebar-box {
       background: #f4f5f8;
       padding: 1.5rem;
       margin-bottom: 1.5rem;
       border-radius: 6px;
   }

   .sidebar-box h5 {
       margin-bottom: 1rem;
   }

   .sidebar-box ul {
       padding-left: 0;
       list-style: none;
   }

   .sidebar-box ul li {
       padding: 8px 0;
       border-bottom: 1px solid #dbdfe4;
   }

   .sidebar img {
       width: 100%;
       border-radius: 4px;
   }

   .recent-blog {
       margin-bottom: 1rem;
   }

   .recent-blog span {
       font-size: 14px;
   }

   .recent-blog p {
       color: #212529;
   }

   .recent-blog img {
       width: 80px;
       height: 70px;
   }