@charset "UTF-8";

/* =========================
   FEATURED IMAGE
========================= */

.blog-featured-image,
.radius-image.img-fluid{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;

    border-radius:28px;

    box-shadow:
    0 14px 40px rgba(16,24,40,0.10);

    transition:0.45s ease;
}

.blog-featured-image:hover,
.radius-image.img-fluid:hover{
    transform:scale(1.01);
}

/* =========================
   BLOG CONTENT
========================= */

.blog-content{
    font-size:17px;
    line-height:1.9;
    color:#4b5b6a;
}

.blog-content p{
    margin-bottom:14px;
}

.blog-content p:last-child{
    margin-bottom:0;
}

.blog-content br{
    line-height:1.2;
}

.blog-content h2,
.blog-content h3{
    color:#12263a;
    font-weight:700;
    margin-top:40px;
    margin-bottom:18px;
}

.blog-content img{
    max-width:100%;
    border-radius:18px;
    margin:30px 0;
}

/* =========================
   BLOG DATE
========================= */

.blog-date{
    display:inline-flex;
    align-items:center;
    gap:10px;

    background:rgba(0,167,157,0.10);

    color:#00a79d;

    padding:10px 18px;

    border-radius:40px;

    font-size:14px;

    font-weight:600;
}

/* =========================
   CATEGORY SECTION
========================= */

.category-links{
    margin-top:60px;

    background:#fff;

    border-radius:28px;

    padding:36px;

    box-shadow:
    0 10px 34px rgba(16,24,40,0.06);

    border:1px solid rgba(0,167,157,0.08);
}

.category-links h4{
    font-size:28px;
    font-weight:700;
    color:#12263a;
    margin-bottom:22px;
}

.category-links a{
    display:inline-flex;
    align-items:center;

    margin:8px;

    padding:12px 22px;

    background:#fff;

    border-radius:40px;

    font-size:14px;

    font-weight:600;

    color:#344054;

    text-decoration:none;

    border:1px solid rgba(0,167,157,0.12);

    transition:0.35s ease;

    box-shadow:
    0 4px 12px rgba(0,0,0,0.04);
}

.category-links a:hover{
    background:#00a79d;
    color:#fff;
    transform:translateY(-3px);
}

/* =========================
   RELATED BLOGS SECTION
========================= */

.related-blogs{
    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fcfc 100%
    );

    position:relative;

    overflow:hidden;
}

.related-blogs::before{
    content:'';

    position:absolute;

    top:-120px;
    right:-120px;

    width:280px;
    height:280px;

    border-radius:50%;

    background:rgba(0,167,157,0.04);
}

/* =========================
   SECTION HEADING
========================= */

.related-blogs .title-content{
    max-width:900px;
    margin:auto;
}

.related-blogs .title-w3l{
    font-size:48px;
    font-weight:700;
    color:#12263a;
    margin-bottom:20px;
}

.related-blogs .title-content p{
    font-size:18px;
    line-height:1.9;
    color:#667085;
}

/* =========================
   BLOG CARD
========================= */

.related-blogs .card{
    position:relative;

    border:none;

    border-radius:24px;

    overflow:hidden;

    background:#fff;

    height:100%;

    transition:0.35s ease;

    box-shadow:
    0 10px 32px rgba(16,24,40,0.06);
}

.related-blogs .card:hover{
    transform:translateY(-6px);

    box-shadow:
    0 18px 44px rgba(0,0,0,0.12);
}

/* =========================
   CARD IMAGE
========================= */

.related-blogs .card-img-top{
    width:100%;
    height:190px;
    object-fit:cover;

    transition:0.45s ease;
}

.related-blogs .card:hover .card-img-top{
    transform:scale(1.05);
}

/* =========================
   CARD BODY
========================= */

.related-blogs .card-body{
    padding:20px;
    display:flex;
    flex-direction:column;
    height:100%;
}

/* =========================
   DATE
========================= */

.related-blogs .small{
    color:#667085 !important;
    font-size:13px;
    margin-bottom:12px !important;
}

/* =========================
   TITLE
========================= */

.related-blogs .card-title{
    margin-bottom:0;
}

.related-blogs .card-title a{
    color:#12263a;

    text-decoration:none;

    font-size:16px;

    line-height:1.8;

    font-weight:700;

    transition:0.3s ease;
}

.related-blogs .card-title a:hover{
    color:#00a79d;
}

/* =========================
   ARTICLE LAYOUT
========================= */

.bottom-ab-left{
    padding-right:30px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

.related-blogs .title-w3l{
    font-size:40px;
}

}

@media(max-width:992px){

.bottom-ab-left{
    padding-right:15px;
}

.related-blogs .title-w3l{
    font-size:34px;
}

.related-blogs .title-content p{
    font-size:16px;
}

.category-links{
    margin-top:40px;
}

}

@media(max-width:768px){

.blog-featured-image,
.radius-image.img-fluid{
    height:240px;
    border-radius:20px;
}

.blog-content{
    font-size:16px;
    line-height:1.9;
}

.category-links{
    padding:24px;
    border-radius:22px;
}

.category-links h4{
    font-size:22px;
}

.category-links a{
    padding:10px 16px;
    font-size:13px;
}

.related-blogs .title-w3l{
    font-size:30px;
}

.related-blogs .title-content p{
    font-size:15px;
}

.related-blogs .card-img-top{
    height:180px;
}

.related-blogs .card-body{
    padding:16px;
}

.related-blogs .card-title a{
    font-size:15px;
}

}

.blog-content p:empty{
    display:none;
}


/* =========================
   PREMIUM SUPPORT CARD
========================= */

.premium-support-card{

    margin-top:40px;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7fcfb 100%
    );

    border-radius:30px;

    padding:38px;

    box-shadow:
    0 12px 38px rgba(16,24,40,0.07);

    border:1px solid rgba(0,167,157,0.08);

    position:relative;

    overflow:hidden;
}

.premium-support-card::before{

    content:'';

    position:absolute;

    top:-80px;
    right:-80px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(0,167,157,0.05);
}

.support-badge{

    display:inline-block;

    background:rgba(0,167,157,0.12);

    color:#00a79d;

    padding:10px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

    margin-bottom:22px;
}

.support-title{

    font-size:30px;

    line-height:1.4;

    font-weight:700;

    color:#12263a;

    margin-bottom:18px;
}

.support-text{

    font-size:16px;

    line-height:1.9;

    color:#667085;

    margin-bottom:28px;
}

.support-features{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:30px;
}

.support-feature{

    background:#fff;

    border:1px solid rgba(0,167,157,0.08);

    border-radius:16px;

    padding:14px 18px;

    font-size:15px;

    font-weight:500;

    color:#344054;

    box-shadow:
    0 4px 12px rgba(0,0,0,0.03);
}

.support-buttons{

    display:flex;

    gap:14px;

    flex-wrap:wrap;
}

.support-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:140px;

    padding:14px 24px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:0.35s ease;
}

.call-btn{

    background:#00a79d;

    color:#fff;
}

.call-btn:hover{

    background:#00877f;

    color:#fff;

    transform:translateY(-2px);
}

.whatsapp-btn{

    background:#25D366;

    color:#fff;
}

.whatsapp-btn:hover{

    background:#1da851;

    color:#fff;

    transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

.premium-support-card{
    padding:28px 22px;
    border-radius:24px;
}

.support-title{
    font-size:24px;
}

.support-text{
    font-size:15px;
}

.support-btn{
    width:100%;
}

}


/* =========================
BLOG FEATURE IMAGE
========================= */

.blog-feature-image-wrapper{

    width:100%;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(16,24,40,0.06);

    border:1px solid rgba(0,0,0,0.04);

    text-align:center;

    padding:20px;
}

/* =========================
FEATURE IMAGE
========================= */

.blog-feature-image{

    width:100%;

    max-width:100%;

    height:auto;

    object-fit:contain;

    display:block;

    margin:auto;
}

/* =========================
BLOG LAYOUT FIX
========================= */

.bottom-ab-grids{

    align-items:flex-start;
}

.bottom-ab-left{

    padding-right:30px;
}

.bottom-right-grids{

    padding-left:30px;
}

/* MOBILE */

@media(max-width:992px){

.bottom-ab-left{
    padding-right:15px;
}

.bottom-right-grids{
    padding-left:15px;
    margin-top:40px;
}

}

/* =========================
PREMIUM FAQ SECTION
========================= */

.faq-section{

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fcfc 100%
    );

    position:relative;

    overflow:hidden;
}

.faq-section::before{

    content:'';

    position:absolute;

    top:-120px;
    left:-120px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(0,167,157,0.04);
}

.faq-section .title-content{

    max-width:900px;

    margin:auto;
}

.faq-section .title-w3l{

    font-size:48px;

    font-weight:700;

    color:#12263a;

    margin-bottom:20px;
}

.faq-section .title-content p{

    font-size:18px;

    line-height:1.9;

    color:#667085;
}

/* =========================
FAQ WRAPPER
========================= */

.premium-faq-wrapper{

    max-width:950px;

    margin:auto;
}

/* =========================
FAQ CARD
========================= */

.faq-card{

    background:#fff;

    border-radius:24px;

    margin-bottom:24px;

    overflow:hidden;

    border:1px solid rgba(0,167,157,0.08);

    box-shadow:
    0 10px 30px rgba(16,24,40,0.05);

    transition:0.35s ease;
}

.faq-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 16px 40px rgba(0,0,0,0.10);
}

/* =========================
FAQ BUTTON
========================= */

.faq-question{

    width:100%;

    border:none;

    background:none;

    padding:28px 32px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    text-align:left;

    cursor:pointer;

    transition:0.3s ease;
}

.faq-question span{

    font-size:20px;

    line-height:1.7;

    font-weight:600;

    color:#12263a;

    max-width:90%;
}

/* =========================
FAQ ICON
========================= */

.faq-icon{

    width:42px;
    height:42px;

    min-width:42px;

    border-radius:50%;

    background:rgba(0,167,157,0.10);

    color:#00a79d;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

    transition:0.3s ease;
}

.faq-question:hover .faq-icon{

    background:#00a79d;

    color:#fff;
}

/* =========================
FAQ ANSWER
========================= */

.faq-answer{

    padding:
    0 32px 30px;

    font-size:17px;

    line-height:1.9;

    color:#667085;
}

/* =========================
ACTIVE FAQ
========================= */

.faq-question[aria-expanded="true"] .faq-icon{

    background:#00a79d;

    color:#fff;

    transform:rotate(45deg);
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:992px){

.faq-section .title-w3l{

    font-size:38px;
}

}

@media(max-width:768px){

.faq-section .title-w3l{

    font-size:30px;
}

.faq-section .title-content p{

    font-size:15px;
}

.faq-question{

    padding:22px;
}

.faq-question span{

    font-size:16px;

    line-height:1.6;
}

.faq-answer{

    padding:
    0 22px 24px;

    font-size:15px;
}

.faq-icon{

    width:36px;
    height:36px;

    min-width:36px;

    font-size:20px;
}

}

/* =========================
PREMIUM SEO SECTION
========================= */

.premium-seo-section{

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f6fcfb 100%
    );

    position:relative;

    overflow:hidden;

    padding:90px 0;
}

/* BACKGROUND EFFECTS */

.premium-seo-section::before{

    content:'';

    position:absolute;

    top:-120px;
    left:-120px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(0,167,157,0.05);
}

.premium-seo-section::after{

    content:'';

    position:absolute;

    bottom:-120px;
    right:-120px;

    width:280px;
    height:280px;

    border-radius:50%;

    background:rgba(0,167,157,0.04);
}

/* =========================
WRAPPER
========================= */

.premium-seo-wrapper{

    position:relative;

    z-index:2;
}

/* =========================
MAIN BOX
========================= */

.premium-seo-box{

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.96),
        rgba(248,252,252,0.92)
    );

    border-radius:36px;

    padding:70px;

    border:1px solid rgba(0,167,157,0.08);

    box-shadow:
    0 20px 60px rgba(16,24,40,0.08);

    backdrop-filter:blur(12px);
}

/* =========================
TOP HEADER
========================= */

.seo-top-header{

    text-align:center;

    max-width:980px;

    margin:auto auto 60px;
}

/* =========================
BADGE
========================= */

.seo-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,167,157,0.12);

    color:#00a79d;

    padding:12px 24px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:28px;

    letter-spacing:0.4px;
}

/* =========================
TITLE
========================= */

.premium-seo-title{

    font-size:56px;

    line-height:1.2;

    font-weight:800;

    color:#12263a;

    margin-bottom:28px;
}

.premium-seo-title span{

    color:#00a79d;
}

/* =========================
SUBTITLE
========================= */

.premium-seo-subtitle{

    font-size:20px;

    line-height:2;

    color:#667085;
}

/* =========================
CONTENT GRID
========================= */

.premium-seo-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    margin-bottom:50px;
}

/* =========================
CONTENT CARD
========================= */

.seo-content-card{

    background:#fff;

    border-radius:28px;

    padding:32px;

    display:flex;

    gap:22px;

    align-items:flex-start;

    border:1px solid rgba(0,167,157,0.08);

    box-shadow:
    0 10px 26px rgba(16,24,40,0.05);

    transition:0.35s ease;
}

.seo-content-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 42px rgba(0,0,0,0.10);
}

/* =========================
ICON
========================= */

.seo-icon{

    width:54px;
    height:54px;

    min-width:54px;

    border-radius:18px;

    background:rgba(0,167,157,0.12);

    color:#00a79d;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;
}

/* =========================
CONTENT TEXT
========================= */

.seo-content-card h4{

    font-size:24px;

    font-weight:700;

    color:#12263a;

    margin-bottom:16px;
}

.seo-content-card p{

    font-size:16px;

    line-height:1.9;

    color:#667085;

    margin:0;
}

/* =========================
FEATURE TAGS
========================= */

.seo-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;
}

.seo-feature-item{

    background:#fff;

    border:1px solid rgba(0,167,157,0.10);

    border-radius:50px;

    padding:14px 24px;

    font-size:15px;

    font-weight:600;

    color:#344054;

    box-shadow:
    0 6px 16px rgba(0,0,0,0.04);

    transition:0.3s ease;
}

.seo-feature-item:hover{

    background:#00a79d;

    color:#fff;

    transform:translateY(-2px);
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:992px){

.premium-seo-box{

    padding:50px 34px;
}

.premium-seo-title{

    font-size:42px;
}

.premium-seo-content{

    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.premium-seo-section{

    padding:70px 0;
}

.premium-seo-box{

    padding:36px 22px;

    border-radius:28px;
}

.premium-seo-title{

    font-size:30px;

    line-height:1.35;
}

.premium-seo-subtitle{

    font-size:16px;

    line-height:1.8;
}

.seo-content-card{

    flex-direction:column;

    padding:24px;
}

.seo-content-card h4{

    font-size:20px;
}

.seo-content-card p{

    font-size:15px;
}

.seo-feature-item{

    width:100%;

    text-align:center;
}

}

/* =========================
RELATED BLOG IMAGE WRAPPER
========================= */

.related-blog-image-wrap{

    width:100%;

    height:220px;

    background:#f8fcfc;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px;

    overflow:hidden;

    border-radius:18px 18px 0 0;
}

/* =========================
RELATED BLOG IMAGE
========================= */

.related-blog-image{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

    transition:0.35s ease;
}

/* =========================
CARD HOVER
========================= */

.related-blogs .card:hover .related-blog-image{

    transform:scale(1.03);
}

/* IMAGE ZOOM */

.zoomable-image{
cursor:zoom-in;
transition:.3s ease;
}

.zoomable-image:hover{
transform:scale(1.02);
}

.image-zoom-modal{

display:none;

position:fixed;

z-index:99999;

padding-top:40px;

left:0;
top:0;

width:100%;
height:100%;

overflow:auto;

background:rgba(0,0,0,0.92);

backdrop-filter:blur(5px);
}

.zoom-modal-content{

display:block;

margin:auto;

max-width:90%;
max-height:85vh;

border-radius:18px;

box-shadow:
0 10px 40px rgba(0,0,0,0.45);

animation:zoomIn .3s ease;
}

.zoom-close{

position:absolute;

top:20px;
right:35px;

color:#fff;

font-size:45px;

font-weight:700;

cursor:pointer;

z-index:100000;
}

@keyframes zoomIn{

from{
transform:scale(.8);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}