section.all-pages {
     position: relative
 }

 img.top-right {
     position: absolute;
     top: -120px;
     right: 12px;
     max-height: 300px;
     z-index: -1;
     rotate: 90deg
 }

 img.middle-right {
     position: absolute;
     top: 45%;
     right: 0;
     max-height: 400px;
     z-index: -1
 }

 img.top-left {
     position: absolute;
     top: 2%;
     left: 0;
     max-height: 732px;
     z-index: -1;
     opacity: .8
 }

 img.middle-left {
     position: absolute;
     top: 80%;
     left: 0;
     max-height: 600px;
     z-index: -1
 }

 @media(max-width:991px) {
     img.top-right {
         top: -167px
     }
 }

 @media(max-width:575px) {
     img.top-right {
         top: -180px
     }
 }

 .new-blog .blog-card {
     margin-bottom: 20px;
     border-radius: 0;
     transition: .3s
 }

 .new-blog .blog-card:hover {
     box-shadow: rgba(45, 45, 45, 0.05) 0px 2px 2px, rgba(49, 49, 49, 0.05) 0px 4px 4px, rgba(42, 42, 42, 0.05) 0px 8px 8px, rgba(32, 32, 32, 0.05) 0px 16px 16px, rgba(49, 49, 49, 0.05) 0px 22px 22px, rgba(35, 35, 35, 0.02) 0px 64px 64px;
     transform: translate(0, -10px)
 }

 .new-blog .blog-card small {
     font-weight: 300;
     font-size: 12px;
     color: #FFFFFFCC
 }

 .new-blog .blog-card h3 {
     color: white;
     font-size: 19px;
     font-weight: 300;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden
 }

 .new-blog .blog-card a {
     color: #1E79A7;
     font-size: 13px;
     text-decoration: none;
     font-weight: 400
 }

 section.new-blog {
     margin-bottom: 50px
 }

 @media(max-width:767px) {
     .new-blog .blog-card h3 {
         color: white;
         font-size: 17px
     }
 }

 @media(max-width:480px) {
     section.new-blog {
         margin-bottom: 0
     }
 }

 .crm-blog {
     padding: 30px 0
 }

 .crm-blog .crm-banner {
     background: linear-gradient(135deg, #225173, #184260);
     border-radius: 12px;
     padding: 45px;
     position: relative;
     color: #fff;
     overflow: hidden
 }

 .crm-blog .crm-banner h1 {
     font-size: 28px;
     font-weight: 600;
     line-height: 1.6
 }

 .crm-blog .crm-logo {
     width: 80px
 }

 .crm-blog .crm-banner img.crm-img {
     max-height: 230px
 }

 .crm-blog .blog-feature-hero {
     background: radial-gradient(circle at top left, rgba(47, 196, 255, 0.18), transparent 30%), linear-gradient(140deg, #f6fbfe 0%, #ecf7fb 52%, #ffffff 100%);
     border: 1px solid rgba(30, 121, 167, 0.14);
     box-shadow: 0 24px 48px rgba(9, 33, 48, 0.09);
     color: #102a3a
 }

 .crm-blog .blog-feature-hero::before {
     content: "";
     position: absolute;
     inset: auto -3% -24% auto;
     width: 260px;
     height: 260px;
     border-radius: 50%;
     background: rgba(30, 121, 167, 0.08);
     filter: blur(2px);
     pointer-events: none
 }

 .crm-blog .blog-feature-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
     gap: 30px;
     align-items: center
 }

 .crm-blog .blog-feature-copy {
     position: relative;
     z-index: 1
 }

 .crm-blog .blog-feature-hero h1 {
     color: #082739;
     font-size: 40px;
     line-height: 1.2;
     letter-spacing: -0.02em;
     margin-bottom: 14px;
     max-width: 12.5ch
 }

 .crm-blog .blog-feature-topline {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 10px;
     margin-bottom: 18px
 }

 .crm-blog .blog-feature-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 0;
     padding: 7px 12px;
     border-radius: 999px;
     background: #0f5f86;
     color: #fff;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase
 }

 .crm-blog .blog-feature-datechip {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 7px 12px;
     border-radius: 999px;
     background: rgba(8, 39, 57, 0.06);
     color: #315162;
     font-size: 13px;
     font-weight: 500
 }

 .crm-blog .blog-feature-summary {
     max-width: 52ch;
     margin-bottom: 18px;
     color: #4d6675;
     font-size: 15px;
     line-height: 1.8
 }

 .crm-blog .blog-feature-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px
 }

 .crm-blog .blog-feature-visual {
     position: relative;
     display: block;
     border-radius: 28px;
     padding: 18px;
     background: radial-gradient(circle at top, rgba(47, 196, 255, 0.15), transparent 34%), linear-gradient(145deg, #123b56 0%, #0a2d40 100%);
     box-shadow: 0 22px 40px rgba(10, 34, 49, 0.18)
 }

 .crm-blog .blog-feature-visual::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 28px;
     border: 1px solid rgba(255, 255, 255, 0.18);
     pointer-events: none
 }

 .crm-blog .blog-feature-visual-frame {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 340px;
     padding: 22px;
     border-radius: 20px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 246, 251, 0.96) 100%);
     overflow: hidden
 }

 .crm-blog .blog-feature-visual img.crm-img {
     display: block;
     width: 100%;
     max-height: 340px;
     object-fit: contain;
     aspect-ratio: auto;
     transition: transform 0.35s ease
 }

 .crm-blog .blog-feature-visual:hover img.crm-img,
 .crm-blog .blog-feature-visual:focus-visible img.crm-img {
     transform: translateY(-2px) scale(1.01)
 }

 .crm-blog .crm-side {
     background: #07283B;
     border-radius: 12px;
     padding: 0;
     color: #fff;
     border: 1px solid #ffffff52;
     overflow: hidden
 }

 .crm-blog .crm-tabs {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1)
 }

 .crm-blog .crm-tabs .nav-link {
     color: #9bb5c9;
     border: none;
     font-size: 14px;
     width: 100%
 }

 .crm-blog .crm-tabs li {
     width: 50%;
     text-align: center;
     display: flex;
     justify-content: center
 }

 .crm-blog .crm-tabs .nav-link.active {
     color: #fff;
     font-weight: 600;
     border-bottom: 2px solid #2fc4ff;
     background: #1E79A7;
     width: 100%;
     border-radius: 0
 }

 .crm-blog .crm-post {
     padding: 18px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1)
 }

 .crm-blog .crm-post h4 {
     font-size: 15px;
     line-height: 1.5;
     margin-bottom: 6px;
     font-weight: 300
 }

 .crm-blog .crm-post h4 a {
     color: white
 }

 .blog-side-form .iti {
     width: 100%
 }

 .blog-side-form .iti--separate-dial-code .iti__selected-dial-code {
     margin-left: 6px;
     color: #96a2a5
 }

 .crm-blog .crm-post small {
     color: #ffffffa1;
     font-size: 11px
 }

 .crm-blog .crm-post:hover {
     background: #0f2f47;
     cursor: pointer
 }

 .blog-side-form .form-box {
     padding: 17px;
     border: 1px solid #ffffff8f;
     background: #07283B;
     border-radius: 11px
 }

 .blog-side-form {
     padding: 46px 0
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(25px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 @keyframes shimmer {
     0% {
         background-position: 200% 0
     }

     100% {
         background-position: -200% 0
     }
 }

 .blog-card-wrapper {
     opacity: 0;
     animation: fadeInUp 0.5s ease forwards;
     animation-delay: calc(var(--card-index, 0) * 60ms)
 }

 .skeleton-card {
     min-height: 280px;
     overflow: hidden;
     border-radius: 10px;
     background: #f0f0f0
 }

 .skeleton-img {
     width: 100%;
     height: 180px;
     background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
     background-size: 200% 100%;
     animation: shimmer 1.2s infinite
 }

 .skeleton-line {
     height: 14px;
     margin: 10px 12px;
     border-radius: 6px;
     background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
     background-size: 200% 100%;
     animation: shimmer 1.2s infinite
 }

 .skeleton-line.short {
     width: 50%
 }

 #loading-spinner {
     display: none;
     padding: 20px 0
 }

 #no-more-blogs {
     display: none;
     padding: 16px;
     color: #888;
     font-size: 14px
 }

 .home-h2 {
    color: white;
    font-size: 30px;
    margin-bottom: 10px;
}

@media(max-width:991px) {
    .home-h2 {
        font-size: 30px;
    }
}

@media(max-width:767px) {
    .home-h2 {
        font-size: 24px;
    }
}

@media(max-width:575px) {
    .home-h2 {
        font-size: 22px;
    }

    .home-p {
        font-size: 13px;
    }
}

@media(max-width:480px) {
    .home-h2 {
        font-size: 19px;
    }
}

 @media(max-width:991px) {
     .crm-blog .crm-banner {
         padding: 25px
     }

     .crm-blog .blog-feature-grid {
         grid-template-columns: 1fr
     }

     .crm-blog .blog-feature-hero h1 {
         max-width: none;
         font-size: 30px
     }

     .crm-blog .blog-feature-summary {
         max-width: none
     }

     .crm-blog .blog-feature-visual {
         margin-top: 20px
     }

     .crm-blog .blog-feature-visual-frame {
         min-height: 300px
     }

     .crm-blog .blog-feature-visual img.crm-img {
         max-height: 300px
     }
 }

 @media(max-width:767px) {
     .crm-blog .crm-banner {
         text-align: left
     }

     .crm-blog .blog-feature-eyebrow,
     .crm-blog .blog-feature-topline,
     .crm-blog .blog-feature-actions {
         justify-content: flex-start
     }

     .crm-blog .blog-feature-hero h1 {
         font-size: 27px
     }

     .crm-blog .blog-feature-summary {
         font-size: 14px
     }

     .crm-blog .blog-feature-visual {
         padding: 14px
     }

     .crm-blog .blog-feature-visual-frame {
         min-height: 220px;
         padding: 16px
     }

     .crm-blog .blog-feature-visual img.crm-img {
         max-height: 220px
     }
 }