@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* Reset CSS */
* {padding:0rem; margin:0rem;}
*:focus {outline: 0;}
html{ font-size: 16px;}
html, body{  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

body{ font-size: 1rem; margin:0; padding:0;  font-family: "Open Sans", sans-serif !important; color: #333;}

ol, ul {list-style: none; margin:0; padding:0;}
:focus {outline: 0;}
a, a:link {text-decoration: none; outline:none; color:#6478f7;}
p { padding:1.25rem 0 0 0; margin:0;}
a { text-decoration:none;}
a:hover {text-decoration:none;}
a:focus{outline:none !important;}
:hover{transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:600;}
img {border:0; max-width:100%; height:auto;}
::-webkit-input-placeholder {opacity:1; color: var(--gray);}
:-moz-placeholder{opacity:1; color: var(--gray);}
::-moz-placeholder{opacity:1; color: var(--gray);}
:-ms-input-placeholder{opacity:1; color: var(--gray);}
/* Reset CSS */


.site-link{ height: 3.375rem; display: inline-flex; align-items: center; justify-content: center; height: 3rem; color: #FFF !important; background: #6478f7; font-weight: 600; padding: 0 1.875rem; border-radius: 5rem; font-size: 1rem; border: none;}
.site-link.white{ background: none; color: #000000 !important;}

.container{ max-width:90rem !important;}

.site-header{ position: sticky; top: 0; z-index: 9; background: #FFF;}
.site-header-main{ height: 6.25rem; display: flex; align-items: center; justify-content: space-between;}
.logo img{ width: 7.5rem;}

.header-right{ display: flex; align-items: center; gap: 0 0.9375rem;}
.header-widget select{ border: 0.0625rem solid #6478f7; border-radius: 0.625rem; text-align: center; padding: 0.625rem 0; font-size: 0.9375rem; text-transform: uppercase; font-weight: 600; appearance: none;}

.site-nav ul{ display: flex; align-items: center;}
.site-nav ul li{ margin-left: 2.5rem;}
.site-nav ul li:first-child{ margin-left: 0;}
.site-nav ul li a{ font-size: 1rem; color: #545454; font-weight: 500;}
.site-nav ul li a:hover{ color: #6478f7;}

.site-footer{ margin-top: 6.25rem;}
.footer-top-in{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.footer-logo img{ width: 7.5rem;}
.footer-top-right{ display: flex; flex-wrap: wrap; gap: 0 5rem;}
.footer-block h5{ text-transform: uppercase; font-size: 1.125rem; color: #2c2c2c;}
.footer-block ul{ margin: 1.25rem 0 0 0;}
.footer-block ul li{ margin: 1.25rem 0 0 0;}
.footer-block ul li a{ color: #525252;}
.footer-block ul li a:hover{ color: #6478f7;}

.contact-link{ display: flex; align-items: center; gap: 0.625rem; margin: 1.25rem 0 0 0; color: #525252 !important;}
.contact-link:hover{ color: #6478f7 !important;}
.footer-bottom-in{ border-top: 0.0625rem solid #d9d9d9; margin: 3.75rem 0 0 0; padding: 2.1875rem 0; text-align: center;}
.footer-bottom-in p{ margin: 0; padding: 0;}
.footer-social ul{ display: flex; align-items: center; gap: 0.75rem; padding-top: 0.75rem;}
.footer-social ul li a{ color: #000; font-size: 1.125rem;}

.site-content{ min-height: calc(100vh - 38.75rem);}
/* .post-navigation{ display: none !important;} */
.entry-content-wrap{ background-color: #f8f8f870; padding: 4.375rem 0;}

.blog-area{ display: flex; flex-wrap: wrap; justify-content: center;}
.blog-area-left{ width: 21.25rem;}
.blog-area-right{ width: 21.25rem;}
.blog-area-main{ width: calc(100% - 42.5rem); padding: 0 1.875rem;}

.cate-name{ text-transform: uppercase; -webkit-text-fill-color: transparent; background-image: linear-gradient(270deg, #ffb075, #bf59d1 33%, #3167ca 67%, #0941a8); -webkit-background-clip: text; background-clip: text; font-size: 1rem; font-weight: 700; line-height: 1.5rem; display: inline-block; margin-bottom: 1.875rem;}

.author-info{ background: #FFF; display: flex; align-items: center; justify-content: space-between; border-top: 0.0625rem solid #d2d2d2; padding: 2rem 2.5rem; border-radius: 0.625rem; box-shadow: 0 0.1875rem 0.3125rem #0003; margin-top: 1.875rem;}
.author-info-left{ display: flex; align-items: center; gap: 0.625rem;}
.author-img{ width: 4rem; height: 4rem; border-radius: 100%; overflow: hidden;}
.author-img img{ width: 100%; height: auto;}
.author-info-left p{ margin: 0; padding: 0; font-weight: 600;}
.author-info-right p{ margin: 0; padding: 0; font-weight: 500; font-size: 0.875rem;}

h1.blog-title{ font-size: 2.875rem; color: #000000; font-weight: 700;}

.blog-top{ background-color: #f1f3f6; background-image: linear-gradient(150deg, #f6f8ff, #fbf4ff); padding: 5rem 0;}
.feature-title{ max-width: 47.5rem; margin: 0 auto; text-align: center;}
.feature-title h2{ font-size: 2.875rem; font-weight: 700; color: #000000;}
.blog-top-in{ display: flex; justify-content: space-between; max-width: 75rem; margin: 0 auto; margin-top: 5rem;}
.blog-top-left{ width: 36.125rem;}

.blog-top-left-main{ border-radius: 0.9375rem; border: 0.0625rem solid #e9e3ff; overflow: hidden; background: #FFF;}
.blog-top-img{ width: 100%; height: 25rem;}
.blog-top-img img{ width: 100% !important; max-width: 100% !important; height: 100% !important; object-fit: cover;}
.blog-top-info{ padding: 2rem; border-top: 0.0625rem solid #e9e3ff;}
.blog-top-info h5{ font-size: 1.5rem; font-weight: 700; color: #000;}
.blog-top-info p{ font-size: 0.9375rem; color: #939393;}

.blog-top-right{ width: 36.25rem; display: flex; flex-direction: column; justify-content: space-between;}
.blog-top-right .blog-top-left-main{ display: flex; align-items: center;}
.blog-top-right .blog-top-img{ width: 10.25rem; height: 10.25rem;}
.blog-top-right .blog-top-info{ width: calc(100% - 10.25rem); border: none; padding-top: 0; padding-bottom: 0;}
.blog-top-right .blog-top-info h5{ font-size: 1.125rem; font-weight: 500;}

.blog-bottom{ padding: 5rem 0; padding-top: 3.125rem; background-color: #f8f8f857;}
.blog-bottom ul{ display: flex; flex-wrap: wrap; margin: 0 -0.9375rem;}
.blog-bottom ul li{ width: 33.33%; padding: 0 0.9375rem; margin-top: 1.875rem;}
.blog-bottom .blog-top-img{ height: 15rem;}
.blog-bottom .blog-top-left-main{ height: 100%;}
.blog-bottom .blog-top-info h5{ font-size: 1.125rem; font-weight: 500;}

.post-area p:empty{ display: none;}
.post-area{ padding-top: 1.875rem;}
.post-area h1{ display: none;}
.post-area p{ color: #000; line-height: 1.75rem; padding: 0 0 1.875rem 0;}
.post-area a{ text-decoration: underline !important; font-weight: 500; text-underline-offset: 0.1875rem;}
.post-area a, .post-area a:link{ color: #1939ff;}
.post-area b, .post-area strong{ font-weight: 700 !important;}
.post-area h1, h2, h3, h4, h5, h6{ font-weight: 500; padding-bottom: 0.9375rem; padding-top: 1.25rem;}
.post-area ul, .post-area ol{ padding-bottom: 1.5625rem; margin: 0 0 0 3.125rem;}
.post-area ul li{ margin-bottom: 0.625rem; list-style-type: disc;}
.post-area ol li{ margin-bottom: 0.625rem; list-style-type: decimal;}

.post-area table{ width: 100% !important; margin-bottom: 1.875rem;}
.post-area table p{ margin: 0 !important; padding: 0 !important; line-height: 1.25rem;}
.post-area table tr td, .post-area table tr th{ border: 0.0625rem solid #d5d5d5; vertical-align: middle; padding: 0.625rem; font-size: 0.875rem;}
p.ql-table-wrapper{ display: none;}

.resources-box{ background-color: #fff; border: 0.0625rem solid #e6e6e6; border-radius: 0.9375rem; padding: 1.25rem; position: sticky; top: 8.125rem;}
.resources-link a{ position: relative; display: block; background-color: #f3f4ff; border: 0.0625rem solid #e5e9ff; border-radius: 0.5rem; margin-bottom: 0.625rem; padding: 0.625rem 0.75rem; padding-left: 2.6875rem; font-size: 0.875rem; font-weight: 500; color: #30344e;}
.resources-link a::after{ content: ''; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1.375rem; height: 1.375rem; background: url('../../custom-assets/images/link.png'); background-size: 100% auto;}


.logo a{ display: flex; align-items: center;}
.blog-text{ font-size: 0.9375rem; font-weight: 600; text-transform: uppercase; padding: 0 0 0 0.625rem; color: #000;}

.bottomNav{ background: #f3f3f3; padding: 1.875rem 0;}
.bottomNav .nav-links { display: flex; align-items: center; justify-content: space-between;}
.bottomNav .nav-links p{ margin: 0; padding: 0; font-size: 0.875rem; font-weight: 500;}
.bottomNav .post-title{ color: #000 !important;}
.bottomNav .nav-previous{ max-width: 50%;}
.bottomNav .nav-next{ max-width: 50%;}



/*  */
.category-banner { background-image: linear-gradient(150deg, #f6f8ff, #fbf4ff); padding: 8rem 0; text-align: center;}
.category-banner h2{ text-transform: uppercase; -webkit-text-fill-color: transparent; background-image: linear-gradient(270deg, #ffb075, #bf59d1 33%, #3167ca 67%, #0941a8); -webkit-background-clip: text; background-clip: text; font-size: 1rem; font-weight: 700; line-height: 1.5rem; display: inline-block; padding: 0; margin-bottom: 1rem;}
.category-banner h1{ font-size: 2.875rem; font-weight: 700; color: #000;}

.container-sec{ padding: 6.25rem 0 0 0;}
.metrics-table ul{ display: flex; align-items: center; flex-wrap: wrap; margin: 0 -0.9375rem;}
.metrics-table ul li{ width: 25%; padding: 0 0.9375rem;}
.metrics-table-single{ background: #faede3; border-radius: 0.9375rem; display: flex; align-items: center; overflow: hidden;}
.metric-number{ width: 8.75rem; height: 5rem; background: #feb866; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.75rem;}
.metric-label{ width: calc(100% - 8.75rem); padding: 0 0.9375rem 0 0.9375rem; font-weight: 600;}
.metrics-table-single.blue{ background: #e9f2fe;}
.metrics-table-single.blue .metric-number{ background: #74bfff;}
.metrics-table-single.red{ background: #ffeaea;}
.metrics-table-single.red .metric-number{ background: #ff9999;}
.metrics-table-single.green{ background: #e6fbf2;}
.metrics-table-single.green .metric-number{ background: #3dc389;}

.steps-container{ display: flex; align-items: flex-start; border-top: 0.0625rem solid #ececec; border-bottom: 0.0625rem solid #ececec; margin: 3.75rem 0 3.75rem 0; padding: 3.75rem 0 3.75rem 0; justify-content: center;}
.steps-nav{ width: 17.5rem; padding: 0 1.875rem 0 0;}
.step-tab{ display: block; width: 100%; text-align: left; background: #6478f70f; border: none; padding: 0.9375rem 1.5625rem; border-radius: 0.625rem; margin-bottom: 0.625rem; font-weight: 600; color: #6478f7; text-transform: uppercase;}

.steps-content{ width: 100%;}
.steps-container:has(.steps-nav) .steps-content{ width: calc(100% - 17.5rem);}

.subject-and-actions { background: #f8f8f8; padding: 15px; border-radius: 15px;}
.subject-and-actions h3{ padding: 0; font-weight: 600;}
.action-buttons{ background: #f8f8f8; padding: 0.9375rem; margin: 1.5625rem 0 0 0; border-radius: 0.9375rem; display: flex; align-items: center; gap: 0 0.625rem; justify-content: end;}
.step-body { margin: 20px 0 0 0; border: 1px solid #ededed; padding: 30px; border-radius: 15px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); min-height: 280px;}

.why-section{ background: #f7f7f7; padding: 2.5rem; border-radius: 1.25rem;}
.why-section h2{ margin-top: 0; padding-top: 0; font-weight: 700;}
.why-section p{ line-height: 1.875rem;}

.client-feed { position: relative; margin-top: 80px; padding: 90px 0 0 0;}
.testimonials-bg{ background: #01001a; position: absolute; left: 0; top: 0; width: 100%; height: 70%;}
.client-feed-title{ position: relative; z-index: 0; text-align: center; padding-bottom: 80px;}
.client-feed-title h2{ margin:0; padding: 0; color: #FFF; font-weight: 700; font-size: 46px;}
.client-feed-title .cate-name{ margin-bottom: 1rem;}
.testimonials-main { position: relative;}
.testimonials-main:after{ content: ''; position: absolute; right: 0; bottom: 0; width: 280px; height: 30px; background: #ffffff; z-index: 2;}

.cta-main {background-image: linear-gradient(150deg, #f6f8ff, #fbf4ff); padding: 6rem 2rem; text-align: center; border-radius: 30px; margin-top: 50px;}
.cta-main .cate-name{ margin: 0;}
.cta-main h2{ font-weight: 700; font-size: 46px;}
/*  */



/* Container for pagination links */
.pagination {
    display: flex;
    justify-content: center; /* Center align the pagination */
    gap: 10px; /* Add space between the links */
    padding: 50px 0 0 0;
    list-style: none; /* Remove default list styles */
}

/* Pagination links */
.pagination a,
.pagination span {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none; /* Remove underline */
    color: #000; /* Default link color */
    background-color: #FFF; /* Light background */
    border: 1px solid #e9e3ff; /* Border around links */
    border-radius: 4px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* Hover state for links */
.pagination a:hover {
    color: #ffffff;
    background-color: #6478f7; /* Darker background on hover */
    border-color: #6478f7; /* Border color on hover */
}

/* Current page styling */
.pagination .current {
    color: #ffffff;
    background-color: #6478f7;
    border-color: #6478f7;
    font-weight: bold;
    pointer-events: none; /* Disable click */
}

/* Previous and Next buttons */
.pagination .prev,
.pagination .next {
    font-weight: bold;
    color: #333;
}




.newsLetter{ margin-top: 20px; padding: 20px; background-image: radial-gradient(circle at 100% 100%, #ffb075, #bf59d1 0%, #3167ca 50%, #0941a8); border-radius: 10px;}
.newsLetter h6{ margin: 0 !important; padding: 0 !important; font-size: 16px; color: #fff; font-weight: 700;}
.newsLetter form{ margin-top: 10px;}
.newsLetter input{ border-radius: 10px !important; color: #333; background-color: #fff; border: 1px solid #ccc; width: 100%; height: 38px; margin-bottom: 10px; padding: 8px 12px; font-size: 14px;
line-height: 1.42857; display: block;}
.newsLetter button{ background: #6478f7 !important; width: 100% !important; border-radius: 10px !important; color: #fff; cursor: pointer; padding: 9px 15px; border: none !important;}
.newsLetter button:focus{ outline: 0 !important; box-shadow: none !important;}



@media (max-width: 1699px) {
  html{ font-size: 15px;}
}

@media (max-width: 1460px) {
  html{ font-size: 13px;}
}

@media (max-width: 1280px) {
  html{ font-size: 12px;}
}

@media (max-width: 1199px) {
  html{ font-size: 11px;}
}

@media (max-width: 1199px) {
  .container{ padding: 0 50px;}
  .blog-area-right{ display: none;}
  .blog-area-main{ width: 100%; max-width: 700px;}
}

@media (max-width: 1023px) {
  .blog-bottom ul li{ width: 50%;}
  .footer-left{ width: 100%; border-bottom: 1px solid #d9d9d9; padding-bottom: 2.1875rem;}
  .footer-top-right{ width: 100%; justify-content: space-between; padding-top: 2.1875rem;}
  .blog-top-in{ flex-wrap: wrap; justify-content: center;}
  .blog-top-right .blog-top-left-main{ margin-top: 1.5rem;}
}

@media (max-width: 767px) {
  html{ font-size: 13px;}
  .container{ padding: 0 15px;}
  .blog-bottom ul li{ width: 100%;}
  .site-nav{ position: fixed; width: 100%; height: 100vh; background: #FFF; z-index: 9; left: -100%; top: 0; display: flex; align-items: center; justify-content: center;}
  .cate-name{ font-size: 1.3rem;}
  .feature-title h2{ font-size: 2.4rem;}
  .blog-top-info h5{ padding: 0;}
  .blog-top-right .blog-top-info h5{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .blog-top-info p{ font-size: 15px;}
  .blog-bottom .blog-top-info h5{ font-size: 1.5rem;}
  .footer-block{ width: 50%; margin-top: 30px;}
  .footer-top-right{ gap: 0;}
  .footer-block ul li a, .contact-link{ font-size: 15px;}
  .footer-block h5{ font-size: 17px; font-weight: 600;}
  .footer-top-right{ padding-top: 0;}
  .footer-bottom-in p{ font-size: 15px;}

  .blog-area-main{ padding: 0;}
  body{ font-size: 15px;}
  .post-area h2{ font-size: 28px;}
  .post-area h3{ font-size: 22px;}
  .post-area h1, h2, h3, h4, h5, h6{ font-weight: 600;}
  .post-area p{ line-height: 28px; text-align: justify;}

  .header-right .site-link{ padding: 0 12px;}
  h1.blog-title{ font-size: 34px;}
  .author-info{ padding: 15px;}
  .author-info-right p{ font-size: 13px;}
}


/* Responsive design for smaller screens */
@media (max-width: 600px) {
    .pagination {
        flex-wrap: wrap; /* Wrap pagination links */
        gap: 5px;
    }

    .pagination a,
    .pagination span {
        padding: 8px 12px;
        font-size: 14px; /* Adjust font size */
    }
}