/*==================================================
        CONTENT WRAPPER
        Quantam Minds CMS Typography System
==================================================*/

.content-wrapper{

    position:relative;

    max-width:100%;

    color:#475569;

    font-size:17px;

    font-weight:400;

    line-height:1.9;

    word-break:break-word;

    overflow-wrap:break-word;
   

}
.section-padding {
     background: linear-gradient(180deg, #ffffff 0%, #f8fbff 45%, #eef5ff 100%);
     padding-bottom: 50px;
     padding-top: 50px;
}

/*==========================================
        GLOBAL SPACING
==========================================*/

.content-wrapper>*:first-child{

    margin-top:0 !important;

}

.content-wrapper>*:last-child{

    margin-bottom:0 !important;

}

.content-wrapper>*{

    position:relative;

}

/*==========================================
        PARAGRAPHS
==========================================*/

.content-wrapper p{

    margin:0 0 0;

    color:#64748B;

    font-size:17px;

    line-height:2;

    font-weight:400;

}

.content-wrapper p:empty{

    display:none;

}

/*==========================================
        LINKS
==========================================*/

.content-wrapper a{

    color:#2563EB;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.content-wrapper a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:#2563EB;

    transition:.3s;

}

.content-wrapper a:hover{

    color:#1D4ED8;

}

.content-wrapper a:hover::after{

    width:100%;

}

/*==========================================
        STRONG
==========================================*/

.content-wrapper strong{

    font-weight:700;

    color:#081C3A;

}

/*==========================================
        EMPHASIS
==========================================*/

.content-wrapper em{

    color:#2563EB;

    font-style:italic;

}

/*==========================================
        H2
==========================================*/

.content-wrapper h2{

    position:relative;

    margin:80px 0 30px;

    padding-bottom:18px;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

    color:#081C3A;

}

.content-wrapper h2:first-child{

    margin-top:0;

}

.content-wrapper h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:90px;

    height:5px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #3B82F6,

        #FF7A1A

    );

}

/*==========================================
        H3
==========================================*/

.content-wrapper h3{

    margin:55px 0 22px;

    font-size:30px;

    line-height:1.35;

    font-weight:700;

    color:#081C3A;

}

/*==========================================
        H4
==========================================*/

.content-wrapper h4{

    margin:40px 0 18px;

    font-size:24px;

    font-weight:700;

    color:#0F172A;

}

/*==========================================
        H5
==========================================*/

.content-wrapper h5{

    margin:35px 0 15px;

    font-size:20px;

    font-weight:700;

    color:#0F172A;

}

/*==========================================
        H6
==========================================*/

.content-wrapper h6{

    margin:28px 0 12px;

    font-size:18px;

    font-weight:700;

    color:#0F172A;

}

/*==========================================
        SMALL
==========================================*/

.content-wrapper small{

    font-size:14px;

    color:#64748B;

}

/*==========================================
        MARK
==========================================*/

.content-wrapper mark{

    padding:2px 8px;

    border-radius:6px;

    background:#FFF4D6;

    color:#081C3A;

}

/*==========================================
        HORIZONTAL RULE
==========================================*/

.content-wrapper hr{

    margin:60px 0;

    border:none;

    height:1px;

    background:

    linear-gradient(

        to right,

        transparent,

        rgba(15,23,42,.12),

        transparent

    );

}

/*==========================================
        SELECTION
==========================================*/

.content-wrapper ::selection{

    background:#2563EB;

    color:#ffffff;

}

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

@media(max-width:1199px){

.content-wrapper h2{

font-size:36px;

}

}

@media(max-width:991px){

.content-wrapper{

font-size:16px;

}

.content-wrapper p{

font-size:16px;

line-height:1.9;

}

.content-wrapper h2{

font-size:32px;

margin:60px 0 25px;

}

.content-wrapper h3{

font-size:27px;

}

.content-wrapper h4{

font-size:22px;

}

}

@media(max-width:767px){

.content-wrapper{

font-size:15px;

}

.content-wrapper p{

font-size:15px;

line-height:1.85;

margin-bottom:22px;

}

.content-wrapper h2{

font-size:28px;

margin:50px 0 22px;

padding-bottom:14px;

}

.content-wrapper h2::after{

width:70px;

height:4px;

}

.content-wrapper h3{

font-size:24px;

margin:38px 0 18px;

}

.content-wrapper h4{

font-size:20px;

margin:30px 0 15px;

}

.content-wrapper h5{

font-size:18px;

}

.content-wrapper h6{

font-size:17px;

}

.content-wrapper hr{

margin:45px 0;

}

}
/*==================================================
            UNORDERED LISTS
==================================================*/

.content-wrapper ul{

    margin:35px 0;

    padding:0;

    list-style:none;

}

.content-wrapper ul li{

    position:relative;

    margin-top:18px;
    margin-bottom:18px;

    padding:0 0 0 55px;

    color:#475569;

    font-size:17px;

    line-height:1.9;

}

/* Premium Check Icon */

.content-wrapper ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:2px;

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #3B82F6

    );

    box-shadow:

    0 12px 28px rgba(37,99,235,.18);

}

/* Hover */

.content-wrapper ul li{

    transition:.35s;

}

.content-wrapper ul li:hover{

    transform:translateX(6px);

}

/*==================================================
            NESTED UL
==================================================*/

.content-wrapper ul ul{

    margin-top:20px;

    margin-left:15px;

}

.content-wrapper ul ul li{

    font-size:16px;

}

.content-wrapper ul ul li::before{

    width:24px;

    height:24px;

    top:6px;

    font-size:11px;

}



/*==================================================
            ORDERED LIST
==================================================*/

.content-wrapper ol{

    margin:40px 0;

    padding:0;

    list-style:none;

    counter-reset:steps;

}

.content-wrapper ol li{

    position:relative;

    padding:

    0 0 35px 80px;

    margin:0;

    color:#475569;

    font-size:17px;

    line-height:1.9;

    counter-increment:steps;

}

/* Timeline Line */

.content-wrapper ol li::after{

    content:"";

    position:absolute;

    left:24px;

    top:55px;

    width:2px;

    height:100%;

    background:

    linear-gradient(

        #2563EB,

        rgba(37,99,235,.15)

    );

}

.content-wrapper ol li:last-child::after{

    display:none;

}

/* Number Circle */

.content-wrapper ol li::before{

    content:counter(steps);

    position:absolute;

    left:0;

    top:0;

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

    color:#ffffff;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #1D4ED8

    );

    box-shadow:

    0 18px 35px rgba(37,99,235,.20);

}

/* Hover */

.content-wrapper ol li{

    transition:.35s;

}

.content-wrapper ol li:hover{

    transform:translateX(6px);

}



/*==================================================
            CHECKLIST
==================================================*/

.content-wrapper ul.check-list li::before{

    content:"✔";

    background:

    linear-gradient(

        135deg,

        #10B981,

        #34D399

    );

}



/*==================================================
            WARNING LIST
==================================================*/

.content-wrapper ul.warning-list li::before{

    content:"!";

    background:

    linear-gradient(

        135deg,

        #F97316,

        #FB923C

    );

}



/*==================================================
            INFO LIST
==================================================*/

.content-wrapper ul.info-list li::before{

    content:"i";

    background:

    linear-gradient(

        135deg,

        #06B6D4,

        #22D3EE

    );

}



/*==================================================
            SUCCESS LIST
==================================================*/

.content-wrapper ul.success-list li::before{

    content:"✓";

    background:

    linear-gradient(

        135deg,

        #22C55E,

        #16A34A

    );

}



/*==================================================
            SMALL LIST
==================================================*/

.content-wrapper .small-list li{

    font-size:15px;

    padding-left:45px;

}

.content-wrapper .small-list li::before{

    width:28px;

    height:28px;

}



/*==================================================
            LARGE LIST
==================================================*/

.content-wrapper .large-list li{

    font-size:19px;

    padding-left:65px;

    margin-bottom:22px;

}

.content-wrapper .large-list li::before{

    width:40px;

    height:40px;

    font-size:18px;

}



/*==================================================
            LIST INSIDE BLOCKQUOTE
==================================================*/

.content-wrapper blockquote ul{

    margin-bottom:0;

}

.content-wrapper blockquote li{

    color:#334155;

}



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

@media(max-width:991px){

.content-wrapper ul li{

padding-left:50px;

font-size:16px;

}

.content-wrapper ol li{

padding-left:70px;

font-size:16px;

}

.content-wrapper ol li::before{

width:46px;

height:46px;

font-size:16px;

}

}

@media(max-width:767px){

.content-wrapper ul{

margin:25px 0;

}

.content-wrapper ul li{

padding-left:44px;

font-size:15px;

margin-bottom:15px;

line-height:1.8;

}

.content-wrapper ul li::before{

width:28px;

height:28px;

font-size:12px;

}

.content-wrapper ol{

margin:28px 0;

}

.content-wrapper ol li{

padding-left:58px;

padding-bottom:28px;

font-size:15px;

line-height:1.8;

}

.content-wrapper ol li::before{

width:40px;

height:40px;

font-size:15px;

}

.content-wrapper ol li::after{

left:19px;

top:45px;

}

}
/*==================================================
            IMAGES
==================================================*/

.content-wrapper img{

    display:block;

    max-width:100%;

    height:auto;

    margin:45px auto;

    border-radius:24px;

    object-fit:cover;

    transition:.45s cubic-bezier(.175,.885,.32,1.15);

    box-shadow:

    0 30px 70px rgba(15,23,42,.12);

    background:#ffffff;

}

.content-wrapper img:hover{

    transform:

    translateY(-8px)

    scale(1.01);

    box-shadow:

    0 45px 90px rgba(37,99,235,.18);

}

/*==================================================
        IMAGE INSIDE LINK
==================================================*/

.content-wrapper a img{

    cursor:pointer;

}

.content-wrapper a:hover img{

    transform:

    translateY(-8px)

    scale(1.02);

}

/*==================================================
        IMAGE SPACING
==================================================*/

.content-wrapper p+img,

.content-wrapper img+p{

    margin-top:35px;

}

.content-wrapper h2+img,

.content-wrapper h3+img{

    margin-top:30px;

}

/*==================================================
            FIGURE
==================================================*/

.content-wrapper figure{

    margin:50px 0;

    text-align:center;

}

.content-wrapper figure img{

    margin-bottom:18px;

}

/*==================================================
        FIGURE CAPTION
==================================================*/

.content-wrapper figcaption{

    display:inline-block;

    padding:10px 22px;

    border-radius:30px;

    background:#F8FAFC;

    color:#64748B;

    font-size:14px;

    line-height:1.7;

    border:1px solid rgba(15,23,42,.06);

}

/*==================================================
        IMAGE FRAME
==================================================*/

.content-wrapper figure{

    padding:18px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.05);

    box-shadow:

    0 20px 60px rgba(15,23,42,.06);

}

/*==================================================
            GALLERY
==================================================*/

.content-wrapper .gallery{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

    margin:60px 0;

}

.content-wrapper .gallery img{

    margin:0;

    width:100%;

    height:240px;

    object-fit:cover;

}

/*==================================================
        IMAGE GRID
==================================================*/

.content-wrapper .image-grid{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:25px;

    margin:60px 0;

}

.content-wrapper .image-grid img{

    margin:0;

    height:280px;

    width:100%;

    object-fit:cover;

}

/*==================================================
        FULL WIDTH IMAGE
==================================================*/

.content-wrapper .full-image img{

    width:100%;

}

/*==================================================
        FLOAT IMAGE
==================================================*/

.content-wrapper .float-left{

    float:left;

    width:42%;

    margin:

    10px 35px 20px 0;

}

.content-wrapper .float-right{

    float:right;

    width:42%;

    margin:

    10px 0 20px 35px;

}

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

.content-wrapper .image-box{

    position:relative;

    margin:55px 0;

}

.content-wrapper .image-badge{

    position:absolute;

    left:25px;

    bottom:25px;

    padding:12px 22px;

    border-radius:40px;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    backdrop-filter:blur(12px);

    background:

    rgba(8,28,58,.82);

}

/*==================================================
        IMAGE SHADOW
==================================================*/

.content-wrapper .shadow-image img{

    box-shadow:

    0 45px 90px rgba(37,99,235,.14);

}

/*==================================================
        ROUNDED IMAGE
==================================================*/

.content-wrapper .rounded-image img{

    border-radius:40px;

}

/*==================================================
        BORDER IMAGE
==================================================*/

.content-wrapper .border-image img{

    border:10px solid #ffffff;

}

/*==================================================
        IMAGE ANIMATION
==================================================*/

.content-wrapper img{

    animation:imageFloat 6s ease-in-out infinite;

}

@keyframes imageFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

/*==================================================
        ALIGNMENT
==================================================*/

.content-wrapper .align-center{

    text-align:center;

}

.content-wrapper .align-left{

    text-align:left;

}

.content-wrapper .align-right{

    text-align:right;

}

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

@media(max-width:991px){

.content-wrapper .image-grid{

grid-template-columns:1fr;

}

.content-wrapper .gallery{

grid-template-columns:repeat(2,1fr);

}

.content-wrapper .float-left,

.content-wrapper .float-right{

float:none;

width:100%;

margin:35px 0;

}

}

@media(max-width:767px){

.content-wrapper img{

margin:30px auto;

border-radius:18px;

}

.content-wrapper figure{

padding:12px;

border-radius:18px;

}

.content-wrapper figcaption{

display:block;

padding:10px 16px;

font-size:13px;

}

.content-wrapper .gallery{

grid-template-columns:1fr;

gap:18px;

}

.content-wrapper .gallery img,

.content-wrapper .image-grid img{

height:auto;

}

.content-wrapper .image-grid{

gap:18px;

}

.content-wrapper .image-badge{

left:15px;

bottom:15px;

padding:10px 16px;

font-size:12px;

}

}
/*==================================================
            TABLE WRAPPER
==================================================*/

.content-wrapper table{

    width:100%;

    margin:50px 0;

    border-collapse:separate;

    border-spacing:0;

    overflow:hidden;

    background:#ffffff;

    border-radius:24px;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

    0 25px 60px rgba(15,23,42,.08);

}

/*==================================================
            TABLE CAPTION
==================================================*/

.content-wrapper caption{

    caption-side:top;

    text-align:left;

    font-size:18px;

    font-weight:700;

    color:#081C3A;

    margin-bottom:18px;

}

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

.content-wrapper thead{

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #1D4ED8

    );

}

.content-wrapper thead th{

    padding:20px 24px;

    text-align:left;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    border:none;

    white-space:nowrap;

}

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

.content-wrapper tbody td{

    padding:18px 24px;

    font-size:16px;

    color:#475569;

    border-bottom:1px solid rgba(15,23,42,.06);

    vertical-align:top;

}

.content-wrapper tbody tr:last-child td{

    border-bottom:none;

}

/*==================================================
            ZEBRA
==================================================*/

.content-wrapper tbody tr:nth-child(even){

    background:#F8FAFC;

}

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

.content-wrapper tbody tr{

    transition:.3s;

}

.content-wrapper tbody tr:hover{

    background:#EFF6FF;

}

/*==================================================
            FIRST COLUMN
==================================================*/

.content-wrapper tbody td:first-child{

    font-weight:600;

    color:#081C3A;

}

/*==================================================
            TABLE LINKS
==================================================*/

.content-wrapper table a{

    font-weight:600;

}

/*==================================================
            TABLE IMAGE
==================================================*/

.content-wrapper table img{

    width:70px;

    margin:0;

    border-radius:12px;

    box-shadow:none;

}

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

.content-wrapper .table-responsive{

    overflow-x:auto;

    margin:45px 0;

    border-radius:24px;

    -webkit-overflow-scrolling:touch;

}

.content-wrapper .table-responsive table{

    margin:0;

    min-width:720px;

}

/*==================================================
            STICKY HEADER
==================================================*/

.content-wrapper .table-responsive thead th{

    position:sticky;

    top:0;

    z-index:2;

}

/*==================================================
            COMPARISON TABLE
==================================================*/

.content-wrapper .comparison-table td:first-child{

    width:35%;

}

.content-wrapper .comparison-table td{

    text-align:center;

}

.content-wrapper .comparison-table td:first-child{

    text-align:left;

}

/*==================================================
            SUCCESS CELL
==================================================*/

.content-wrapper .success{

    color:#16A34A;

    font-weight:700;

}

/*==================================================
            WARNING CELL
==================================================*/

.content-wrapper .warning{

    color:#EA580C;

    font-weight:700;

}

/*==================================================
            DANGER CELL
==================================================*/

.content-wrapper .danger{

    color:#DC2626;

    font-weight:700;

}

/*==================================================
            BADGES
==================================================*/

.content-wrapper .table-badge{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.content-wrapper .badge-success{

    background:#DCFCE7;

    color:#15803D;

}

.content-wrapper .badge-warning{

    background:#FED7AA;

    color:#C2410C;

}

.content-wrapper .badge-primary{

    background:#DBEAFE;

    color:#2563EB;

}

/*==================================================
            TABLE FOOTER
==================================================*/

.content-wrapper tfoot td{

    padding:18px 24px;

    background:#F8FAFC;

    font-weight:700;

    color:#081C3A;

}

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

@media(max-width:991px){

.content-wrapper table{

font-size:15px;

}

.content-wrapper thead th,

.content-wrapper tbody td{

padding:16px 18px;

}

}

@media(max-width:767px){

.content-wrapper .table-responsive{

border-radius:18px;

}

.content-wrapper table{

display:block;

overflow-x:auto;

white-space:nowrap;

margin:30px 0;

}

.content-wrapper thead th,

.content-wrapper tbody td,

.content-wrapper tfoot td{

padding:14px 16px;

font-size:14px;

}

}
/*==================================================
            BLOCKQUOTE
==================================================*/

.content-wrapper blockquote{

    position:relative;

    overflow:hidden;

    margin:50px 0;

    padding:35px 35px 35px 90px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #EFF6FF,
        #F8FAFC
    );

    border-left:6px solid #2563EB;

    box-shadow:
    0 25px 60px rgba(37,99,235,.08);

}

.content-wrapper blockquote::before{

    content:"\f10d";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:28px;

    top:34px;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2563EB;

    color:#ffffff;

    font-size:18px;

}

.content-wrapper blockquote p{

    margin:0;

    color:#0F172A;

    font-size:18px;

    font-weight:500;

    line-height:1.9;

}

.content-wrapper blockquote strong{

    color:#081C3A;

}

/*==================================================
        BLOCKQUOTE LINKS
==================================================*/

.content-wrapper blockquote a{

    color:#1D4ED8;

    font-weight:700;

}

/*==================================================
        BLOCKQUOTE FOOTER
==================================================*/

.content-wrapper blockquote footer{

    margin-top:20px;

    font-size:14px;

    color:#64748B;

    font-weight:600;

}

/*==================================================
            NOTE BOX
==================================================*/

.content-wrapper .note-box{

    position:relative;

    margin:45px 0;

    padding:28px 30px 28px 82px;

    border-radius:22px;

    background:#F8FAFC;

    border-left:5px solid #2563EB;

}

.content-wrapper .note-box::before{

    content:"\f05a";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:26px;

    top:28px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#2563EB;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.content-wrapper .note-box p{

    margin:0;

}

/*==================================================
            TIP BOX
==================================================*/

.content-wrapper .tip-box{

    position:relative;

    margin:45px 0;

    padding:28px 30px 28px 82px;

    border-radius:22px;

    background:#ECFDF5;

    border-left:5px solid #10B981;

}

.content-wrapper .tip-box::before{

    content:"\f0eb";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:26px;

    top:28px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#10B981;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==================================================
            WARNING BOX
==================================================*/

.content-wrapper .warning-box{

    position:relative;

    margin:45px 0;

    padding:28px 30px 28px 82px;

    border-radius:22px;

    background:#FFF7ED;

    border-left:5px solid #F97316;

}

.content-wrapper .warning-box::before{

    content:"\f071";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:26px;

    top:28px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#F97316;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==================================================
            SUCCESS BOX
==================================================*/

.content-wrapper .success-box{

    position:relative;

    margin:45px 0;

    padding:28px 30px 28px 82px;

    border-radius:22px;

    background:#F0FDF4;

    border-left:5px solid #22C55E;

}

.content-wrapper .success-box::before{

    content:"\f058";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:26px;

    top:28px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#22C55E;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==================================================
            INFO BOX
==================================================*/

.content-wrapper .info-box{

    position:relative;

    margin:45px 0;

    padding:28px 30px 28px 82px;

    border-radius:22px;

    background:#EFF6FF;

    border-left:5px solid #3B82F6;

}

.content-wrapper .info-box::before{

    content:"\f129";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:26px;

    top:28px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#3B82F6;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==================================================
        COMMON BOX CONTENT
==================================================*/

.content-wrapper .note-box p,
.content-wrapper .tip-box p,
.content-wrapper .warning-box p,
.content-wrapper .success-box p,
.content-wrapper .info-box p{

    margin:0;

    font-size:16px;

    line-height:1.9;

    color:#334155;

}

.content-wrapper .note-box strong,
.content-wrapper .tip-box strong,
.content-wrapper .warning-box strong,
.content-wrapper .success-box strong,
.content-wrapper .info-box strong{

    color:#081C3A;

}

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

@media(max-width:767px){

.content-wrapper blockquote{

padding:25px 20px 25px 65px;

margin:35px 0;

border-radius:18px;

}

.content-wrapper blockquote::before{

left:16px;

top:22px;

width:34px;

height:34px;

font-size:14px;

}

.content-wrapper blockquote p{

font-size:16px;

line-height:1.8;

}

.content-wrapper .note-box,
.content-wrapper .tip-box,
.content-wrapper .warning-box,
.content-wrapper .success-box,
.content-wrapper .info-box{

padding:22px 18px 22px 60px;

margin:30px 0;

border-radius:18px;

}

.content-wrapper .note-box::before,
.content-wrapper .tip-box::before,
.content-wrapper .warning-box::before,
.content-wrapper .success-box::before,
.content-wrapper .info-box::before{

left:16px;

top:18px;

width:32px;

height:32px;

font-size:13px;

}

.content-wrapper .note-box p,
.content-wrapper .tip-box p,
.content-wrapper .warning-box p,
.content-wrapper .success-box p,
.content-wrapper .info-box p{

font-size:15px;

}

}
/*==================================================
            LINKS
==================================================*/

.content-wrapper a{

    color:#2563EB;

    text-decoration:none;

    font-weight:600;

    position:relative;

    transition:.3s ease;

}

.content-wrapper a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    border-radius:10px;

    background:#2563EB;

    transition:.35s;

}

.content-wrapper a:hover{

    color:#1D4ED8;

}

.content-wrapper a:hover::after{

    width:100%;

}

/* External Links */

.content-wrapper a[target="_blank"]::before{

    content:"↗";

    margin-right:6px;

    font-size:12px;

}

/*==================================================
            INLINE CODE
==================================================*/

.content-wrapper code{

    display:inline-block;

    padding:4px 10px;

    margin:0 2px;

    border-radius:8px;

    background:#EEF4FF;

    color:#2563EB;

    font-size:14px;

    font-family:

    Consolas,

    Monaco,

    monospace;

    font-weight:600;

}

/*==================================================
            CODE BLOCK
==================================================*/

.content-wrapper pre{

    overflow-x:auto;

    margin:45px 0;

    padding:28px;

    border-radius:22px;

    background:#081C3A;

    color:#ffffff;

    box-shadow:

    0 25px 70px rgba(8,28,58,.18);

}

.content-wrapper pre code{

    display:block;

    padding:0;

    margin:0;

    background:none;

    color:#ffffff;

    font-size:15px;

    line-height:1.9;

    white-space:pre;

}

/*==================================================
            BUTTONS
==================================================*/

.content-wrapper .content-btn,

.content-wrapper button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    margin:15px 0;

    border:none;

    border-radius:60px;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #1D4ED8

    );

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:

    0 20px 45px rgba(37,99,235,.20);

}

.content-wrapper .content-btn:hover,

.content-wrapper button:hover{

    transform:

    translateY(-5px);

    box-shadow:

    0 28px 60px rgba(37,99,235,.25);

}

/*==================================================
            SECONDARY BUTTON
==================================================*/

.content-wrapper .content-btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:60px;

    border:2px solid #2563EB;

    background:#ffffff;

    color:#2563EB;

    font-weight:700;

    transition:.35s;

}

.content-wrapper .content-btn-outline:hover{

    background:#2563EB;

    color:#ffffff;

}

/*==================================================
            MARK
==================================================*/

.content-wrapper mark{

    padding:3px 8px;

    border-radius:6px;

    background:#FFF4D6;

    color:#081C3A;

}

/*==================================================
            KBD
==================================================*/

.content-wrapper kbd{

    display:inline-block;

    padding:4px 10px;

    border-radius:6px;

    background:#081C3A;

    color:#ffffff;

    font-size:13px;

    font-family:monospace;

}

/*==================================================
            ABBR
==================================================*/

.content-wrapper abbr{

    cursor:help;

    text-decoration:none;

    border-bottom:2px dotted #2563EB;

}

/*==================================================
            SUP / SUB
==================================================*/

.content-wrapper sup{

    color:#2563EB;

    font-weight:700;

}

.content-wrapper sub{

    color:#64748B;

}

/*==================================================
            HIGHLIGHT
==================================================*/

.content-wrapper .highlight{

    display:inline-block;

    padding:4px 12px;

    border-radius:30px;

    background:#DBEAFE;

    color:#2563EB;

    font-weight:600;

}

/*==================================================
            TAG
==================================================*/

.content-wrapper .tag{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:40px;

    background:#F1F5F9;

    color:#475569;

    font-size:14px;

    margin:4px;

}

/*==================================================
            FILE DOWNLOAD
==================================================*/

.content-wrapper .download-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 24px;

    margin:20px 0;

    border-radius:18px;

    background:#F8FAFC;

    border:1px solid rgba(15,23,42,.08);

    transition:.35s;

}

.content-wrapper .download-link:hover{

    transform:translateY(-4px);

    background:#EFF6FF;

}

/*==================================================
            SEPARATOR
==================================================*/

.content-wrapper .separator{

    margin:60px 0;

    height:1px;

    background:

    linear-gradient(

        to right,

        transparent,

        rgba(15,23,42,.12),

        transparent

    );

}

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

@media(max-width:767px){

.content-wrapper pre{

padding:20px;

border-radius:18px;

}

.content-wrapper pre code{

font-size:13px;

}

.content-wrapper .content-btn,

.content-wrapper button,

.content-wrapper .content-btn-outline{

width:100%;

justify-content:center;

padding:15px 24px;

}

.content-wrapper .download-link{

padding:16px;

}

.content-wrapper code{

font-size:13px;

}

}
/*==================================================
        CONTENT UTILITIES & SPACING SYSTEM
==================================================*/

/*==========================================
        VERTICAL RHYTHM
==========================================*/

.content-wrapper>*{

    margin-bottom:28px;

}

.content-wrapper>*:last-child{

    margin-bottom:0;

}

.content-wrapper section{

    margin:70px 0;

}

.content-wrapper h2+p{

    margin-top:20px;

}

.content-wrapper h3+p,

.content-wrapper h4+p{

    margin-top:16px;

}

.content-wrapper p+ul,
.content-wrapper p+ol{

    margin-top:-5px;

}

.content-wrapper ul+p,
.content-wrapper ol+p{

    margin-top:30px;

}

/*==========================================
        CONTENT WIDTH
==========================================*/

.content-wrapper .content-sm{

    max-width:700px;

    margin:auto;

}

.content-wrapper .content-md{

    max-width:900px;

    margin:auto;

}

.content-wrapper .content-lg{

    max-width:1100px;

    margin:auto;

}

/*==========================================
        TEXT ALIGNMENT
==========================================*/

.content-wrapper .text-left{

    text-align:left;

}

.content-wrapper .text-center{

    text-align:center;

}

.content-wrapper .text-right{

    text-align:right;

}

.content-wrapper .text-justify{

    text-align:justify;

}

/*==========================================
        SPACING HELPERS
==========================================*/

.content-wrapper .mt-0{margin-top:0!important;}
.content-wrapper .mt-20{margin-top:20px!important;}
.content-wrapper .mt-30{margin-top:30px!important;}
.content-wrapper .mt-40{margin-top:40px!important;}
.content-wrapper .mt-60{margin-top:60px!important;}

.content-wrapper .mb-0{margin-bottom:0!important;}
.content-wrapper .mb-20{margin-bottom:20px!important;}
.content-wrapper .mb-30{margin-bottom:30px!important;}
.content-wrapper .mb-40{margin-bottom:40px!important;}
.content-wrapper .mb-60{margin-bottom:60px!important;}

/*==========================================
        PADDING HELPERS
==========================================*/

.content-wrapper .p-20{

    padding:20px;

}

.content-wrapper .p-30{

    padding:30px;

}

.content-wrapper .p-40{

    padding:40px;

}

/*==========================================
        BACKGROUND HELPERS
==========================================*/

.content-wrapper .bg-light{

    background:#F8FAFC;

}

.content-wrapper .bg-primary{

    background:#EFF6FF;

}

.content-wrapper .bg-success{

    background:#F0FDF4;

}

.content-wrapper .bg-warning{

    background:#FFF7ED;

}

.content-wrapper .bg-dark{

    background:#081C3A;

    color:#ffffff;

}

/*==========================================
        BORDER RADIUS
==========================================*/

.content-wrapper .radius-sm{

    border-radius:12px;

}

.content-wrapper .radius-md{

    border-radius:20px;

}

.content-wrapper .radius-lg{

    border-radius:30px;

}

/*==========================================
        SHADOWS
==========================================*/

.content-wrapper .shadow-sm{

    box-shadow:

    0 10px 25px rgba(15,23,42,.06);

}

.content-wrapper .shadow-md{

    box-shadow:

    0 20px 50px rgba(15,23,42,.08);

}

.content-wrapper .shadow-lg{

    box-shadow:

    0 35px 80px rgba(15,23,42,.12);

}

/*==========================================
        BORDER
==========================================*/

.content-wrapper .border{

    border:1px solid rgba(15,23,42,.08);

}

.content-wrapper .border-primary{

    border:1px solid rgba(37,99,235,.18);

}

/*==========================================
        DIVIDER
==========================================*/

.content-wrapper .divider{

    width:100%;

    height:1px;

    margin:60px 0;

    background:

    linear-gradient(

        to right,

        transparent,

        rgba(15,23,42,.12),

        transparent

    );

}

/*==========================================
        FADE ANIMATION
==========================================*/

.content-wrapper .fade-up{

    animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================
        ZOOM ANIMATION
==========================================*/

.content-wrapper .zoom-in{

    animation:zoomIn .6s ease both;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.94);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==========================================
        FLOAT EFFECT
==========================================*/

.content-wrapper .float{

    animation:floatItem 6s ease-in-out infinite;

}

@keyframes floatItem{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==========================================
        HOVER LIFT
==========================================*/

.content-wrapper .hover-lift{

    transition:.35s;

}

.content-wrapper .hover-lift:hover{

    transform:translateY(-8px);

}

/*==========================================
        HOVER SCALE
==========================================*/

.content-wrapper .hover-scale{

    transition:.35s;

}

.content-wrapper .hover-scale:hover{

    transform:scale(1.03);

}

/*==========================================
        HOVER SHADOW
==========================================*/

.content-wrapper .hover-shadow{

    transition:.35s;

}

.content-wrapper .hover-shadow:hover{

    box-shadow:

    0 35px 80px rgba(37,99,235,.12);

}

/*==========================================
        GRADIENT TEXT
==========================================*/

.content-wrapper .gradient-text{

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #1D4ED8,

        #FF7A1A

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

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

.content-wrapper .badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:40px;

    background:#EFF6FF;

    color:#2563EB;

    font-size:13px;

    font-weight:700;

}

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

@media(max-width:991px){

.content-wrapper section{

margin:50px 0;

}

.content-wrapper .divider{

margin:45px 0;

}

}

@media(max-width:767px){

.content-wrapper>*{

margin-bottom:22px;

}

.content-wrapper section{

margin:40px 0;

}

.content-wrapper .p-30,

.content-wrapper .p-40{

padding:20px;

}

.content-wrapper .divider{

margin:35px 0;

}

.content-wrapper .hover-lift:hover,

.content-wrapper .hover-scale:hover{

transform:none;

}

}/*==================================================
        FINAL RESPONSIVE & POLISH
        Quantam Minds CMS System
==================================================*/

/*==========================================
        LARGE DESKTOP (1600px+)
==========================================*/

@media(min-width:1600px){

.content-wrapper{

max-width:1100px;

margin:auto;

font-size:18px;

}

.content-wrapper h2{

font-size:48px;

}

.content-wrapper h3{

font-size:34px;

}

.content-wrapper p{

font-size:18px;

line-height:2;

}

}

/*==========================================
        DESKTOP
==========================================*/

@media(min-width:1200px){

.content-wrapper{

max-width:100%;

}

.content-wrapper img{

max-width:100%;

}

}

/*==========================================
        LAPTOP
==========================================*/

@media(max-width:1199px){

.content-wrapper{

font-size:16px;

}

.content-wrapper h2{

font-size:38px;

}

.content-wrapper h3{

font-size:30px;

}

.content-wrapper table{

font-size:15px;

}

}

/*==========================================
        TABLET
==========================================*/

@media(max-width:991px){

.content-wrapper{

font-size:16px;

line-height:1.85;

}

.content-wrapper h2{

font-size:32px;

margin-top:55px;

}

.content-wrapper h3{

font-size:26px;

}

.content-wrapper h4{

font-size:22px;

}

.content-wrapper p{

font-size:16px;

line-height:1.9;

}

.content-wrapper figure{

margin:40px 0;

}

.content-wrapper table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

/*==========================================
        MOBILE
==========================================*/

@media(max-width:767px){

.content-wrapper{

font-size:15px;

line-height:1.8;

}

.content-wrapper h2{

font-size:28px;

line-height:1.3;

margin-top:45px;

}

.content-wrapper h3{

font-size:23px;

line-height:1.4;

}

.content-wrapper h4{

font-size:20px;

}

.content-wrapper h5{

font-size:18px;

}

.content-wrapper p{

font-size:15px;

line-height:1.85;

margin-bottom:20px;

}

.content-wrapper img{

border-radius:18px;

}

.content-wrapper figure{

padding:12px;

}

.content-wrapper table{

margin:30px 0;

}

.content-wrapper blockquote{

margin:30px 0;

}

}

/*==========================================
        SMALL MOBILE
==========================================*/

@media(max-width:480px){

.content-wrapper{

font-size:14px;

}

.content-wrapper h2{

font-size:24px;

}

.content-wrapper h3{

font-size:21px;

}

.content-wrapper h4{

font-size:18px;

}

.content-wrapper p{

font-size:14px;

line-height:1.8;

}

.content-wrapper ul li,

.content-wrapper ol li{

font-size:14px;

}

}

/*==========================================
        ACCESSIBILITY
==========================================*/

.content-wrapper :focus-visible{

outline:3px solid rgba(37,99,235,.35);

outline-offset:3px;

border-radius:8px;

}

/*==========================================
        SMOOTH SCROLL
==========================================*/

html{

scroll-behavior:smooth;

}

/*==========================================
        SCROLL MARGIN
==========================================*/

.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4{

scroll-margin-top:110px;

}

/*==========================================
        MEDIA ELEMENTS
==========================================*/

.content-wrapper iframe,
.content-wrapper video,
.content-wrapper embed{

display:block;

width:100%;

max-width:100%;

margin:45px auto;

border:none;

border-radius:22px;

overflow:hidden;

aspect-ratio:16/9;

box-shadow:

0 25px 60px rgba(15,23,42,.12);

}

/*==========================================
        SVG
==========================================*/

.content-wrapper svg{

max-width:100%;

height:auto;

}

/*==========================================
        LOADING OPTIMIZATION
==========================================*/

.content-wrapper img{

content-visibility:auto;

}

/*==========================================
        HOVER REDUCTION
==========================================*/

@media(hover:none){

.content-wrapper *{

transition:none!important;

animation:none!important;

}

}

/*==========================================
        REDUCED MOTION
==========================================*/

@media(prefers-reduced-motion:reduce){

.content-wrapper *{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}

/*==========================================
        DARK MODE READY
==========================================*/

@media(prefers-color-scheme:dark){

.content-wrapper.dark-ready{

background:#081C3A;

color:#E2E8F0;

}

.content-wrapper.dark-ready h2,
.content-wrapper.dark-ready h3,
.content-wrapper.dark-ready h4{

color:#ffffff;

}

}

/*==========================================
        PRINT
==========================================*/

@media print{

.content-wrapper{

color:#000;

font-size:12pt;

}

.content-wrapper a{

color:#000;

text-decoration:underline;

}

.content-wrapper img{

box-shadow:none;

page-break-inside:avoid;

}

.content-wrapper table{

page-break-inside:avoid;

}

.content-wrapper blockquote{

border-left:4px solid #000;

background:none;

box-shadow:none;

}

}

/*==========================================
        FINAL POLISH
==========================================*/

.content-wrapper{

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

text-rendering:optimizeLegibility;

}

.content-wrapper img,
.content-wrapper iframe,
.content-wrapper table,
.content-wrapper figure{

overflow:hidden;

}

.content-wrapper::after{

content:"";

display:block;

clear:both;

}



/*==================================================
            BREADCRUMB
==================================================*/

.breadcrumb-section{

    padding:30px 0;

    background:#ffffff;

    position:relative;

    z-index:5;
    margin-top: 80px;

}

.breadcrumb-wrapper{

    padding:28px 35px;

    border-radius:24px;

    background:

    linear-gradient(

        135deg,

        #ffffff,

        #f8fbff

    );

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

    0 20px 60px rgba(15,23,42,.05);

}

/*==========================================*/

.custom-breadcrumb{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin:0;

    padding:0;

    list-style:none;

}

.custom-breadcrumb li{

    font-size:15px;

    color:#64748B;

}

.custom-breadcrumb a{

    color:#64748B;

    text-decoration:none;

    transition:.3s;

}

.custom-breadcrumb a:hover{

    color:#2563EB;

}

.custom-breadcrumb .active{

    color:#081C3A;

    font-weight:700;

}

.custom-breadcrumb i{

    font-size:12px;

}

/*==========================================*/

.service-meta{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:18px;

}

.service-meta span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:40px;

    background:#F8FAFC;

    color:#475569;

    font-size:14px;

    font-weight:500;

}

.service-meta span i{

    color:#2563EB;

}

/*==========================================*/

.breadcrumb-action{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:20px;

}

.rating-box{

    text-align:right;

}

.stars{

    color:#FDBA12;

    margin-bottom:5px;

}

.rating-box small{

    color:#64748B;

}

.breadcrumb-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:50px;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #1D4ED8

    );

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    box-shadow:

    0 18px 40px rgba(37,99,235,.20);

}

.breadcrumb-btn:hover{

    transform:translateY(-4px);

    color:#fff;

}

/*==========================================*/

@media(max-width:991px){

.breadcrumb-action{

margin-top:25px;

justify-content:flex-start;

}

}

@media(max-width:767px){

.breadcrumb-wrapper{

padding:20px;

}

.service-meta{

flex-direction:column;

gap:10px;

}

.service-meta span{

width:100%;

}

.breadcrumb-action{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.rating-box{

text-align:left;

}

.breadcrumb-btn{

width:100%;

}

}



/*==================================================
            SERVICE HERO SECTION
==================================================*/

.service-hero-section{

    position:relative;

    overflow:hidden;

    padding:10px 0 80px;

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

    z-index:1;

}

/*==========================================
            BACKGROUND SHAPES
==========================================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(8px);

    z-index:-1;

}

.hero-shape-1{

    width:650px;

    height:650px;

    left:-260px;

    top:-220px;

    background:
    radial-gradient(
        rgba(37,99,235,.10),
        transparent 72%
    );

    animation:heroRotate 28s linear infinite;

}

.hero-shape-2{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-160px;

    background:
    radial-gradient(
        rgba(255,122,26,.10),
        transparent 72%
    );

    animation:heroFloat 8s ease-in-out infinite;

}

/*==========================================
        GRID BACKGROUND
==========================================*/

.service-hero-section::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.035;

    pointer-events:none;

    background-image:

    linear-gradient(
        rgba(37,99,235,.18) 1px,
        transparent 1px),

    linear-gradient(
        90deg,
        rgba(37,99,235,.18) 1px,
        transparent 1px);

    background-size:70px 70px;

}

/*==========================================
        CONTAINER
==========================================*/

.service-hero-section .container{

    position:relative;

    z-index:5;

}

/*==================================================
            LEFT CONTENT
==================================================*/

.service-hero-content{

    position:relative;

    max-width:720px;

}
.service-hero-content2{

    position:relative;

    max-width:100%;

}

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

.service-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 26px;

    border-radius:60px;

    background:rgba(37,99,235,.08);

    color:#2563EB;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    box-shadow:

    0 18px 45px rgba(37,99,235,.10);

}

.service-badge i{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#ffffff;

    background:

    linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

}

/*==================================================
            MAIN HEADING
==================================================*/

.service-hero-content h1{

    margin:30px 0 25px;

    font-size:58px;

    font-weight:800;

    line-height:1.18;

    color:#081C3A;

    letter-spacing:-1px;

}

.service-hero-content h1 span{

    display:block;

    margin-top:12px;

    background:

    linear-gradient(
        90deg,
        #2563EB,
        #1D4ED8,
        #FF7A1A
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*==================================================
            DESCRIPTION
==================================================*/

.hero-description{

    width:100%;

}

.hero-description p{

    margin:0;

    font-size:18px;

    color:#64748B;

    line-height:1.95;

}

.hero-description strong{

    color:#081C3A;

    font-weight:700;

}

.hero-description a{

    color:#2563EB;

    text-decoration:none;

    font-weight:600;

}

.hero-description a:hover{

    color:#1D4ED8;

}

/*==================================================
        DECORATIVE LINE
==================================================*/

.service-hero-content::after{

    content:"";

    display:block;

    width:110px;

    height:5px;

    margin-top:35px;

    border-radius:20px;

    background:

    linear-gradient(
        90deg,
        #2563EB,
        #3B82F6,
        #FF7A1A
    );

}

/*==================================================
            ANIMATIONS
==================================================*/

@keyframes heroRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes heroFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

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

@media(max-width:1199px){

.service-hero-content h1{

font-size:50px;

}

}

@media(max-width:991px){

.service-hero-section{

padding:80px 0 60px;

}

.service-hero-content{

max-width:100%;

margin-bottom:50px;

}

.service-hero-content h1{

font-size:42px;

}

.hero-description p{

font-size:17px;

}

}

@media(max-width:767px){

.service-hero-section{

padding:60px 0 40px;

}

.service-badge{

font-size:12px;

padding:12px 18px;

}

.service-badge i{

width:30px;

height:30px;

font-size:13px;

}

.service-hero-content h1{

font-size:32px;

line-height:1.3;

margin:22px 0 18px;

}

.hero-description p{

font-size:15px;

line-height:1.8;

}

.service-hero-content::after{

width:80px;

margin-top:25px;

}

.hero-shape-1,

.hero-shape-2{

display:none;

}

}

/*==================================================
            HERO BUTTONS
==================================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin:45px 0;

}

/*==========================================
        PRIMARY BUTTON
==========================================*/

.hero-btn-primary{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:60px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #2563EB,
        #1D4ED8
    );

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.4s;

    box-shadow:
    0 22px 45px rgba(37,99,235,.25);

}

.hero-btn-primary::before{

    content:"";

    position:absolute;

    inset:0;

    left:-120%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.7s;

}

.hero-btn-primary:hover{

    color:#ffffff;

    transform:translateY(-6px);

    box-shadow:
    0 30px 60px rgba(37,99,235,.30);

}

.hero-btn-primary:hover::before{

    left:120%;

}

/*==========================================
        SECONDARY BUTTON
==========================================*/

.hero-btn-secondary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:60px;

    background:#ffffff;

    border:2px solid rgba(37,99,235,.12);

    color:#081C3A;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    box-shadow:
    0 18px 40px rgba(15,23,42,.06);

}

.hero-btn-secondary i{

    color:#2563EB;

    transition:.35s;

}

.hero-btn-secondary:hover{

    border-color:#2563EB;

    transform:translateY(-6px);

    color:#081C3A;

}

.hero-btn-secondary:hover i{

    transform:rotate(-12deg);

}

/*==================================================
            TRUST POINTS
==================================================*/

.hero-trust{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin-top:45px;

}

/* If trustpoints outputs UL */

.hero-trust ul{

    display:grid;

    grid-template-columns:repeat(1,1fr);

    gap:16px;

    padding:0;

    margin:0;

    list-style:none;

}

.hero-trust li{

    position:relative;

    width: max-content;

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 22px;

    border-radius:18px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:
    0 18px 35px rgba(15,23,42,.05);

    color:#334155;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.hero-trust li::before{

    content:"✓";

    flex-shrink:0;

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #22C55E,
        #16A34A
    );

    color:#ffffff;

    font-size:14px;

    font-weight:700;

}

.hero-trust li:hover{

    transform:translateY(-6px);

    border-color:rgba(37,99,235,.18);

    box-shadow:
    0 25px 50px rgba(37,99,235,.10);

}

/*==================================================
            HERO STATS
==================================================*/

.hero-stats{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

    margin-top:50px;

}

.stat-box{

    flex:1;

    min-width:170px;

    padding:26px;

    border-radius:24px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:
    0 18px 45px rgba(15,23,42,.06);

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-8px);

    box-shadow:
    0 30px 60px rgba(37,99,235,.12);

}

.stat-box h3{

    margin:0 0 10px;

    font-size:38px;

    font-weight:800;

    color:#2563EB;

    line-height:1;

}

.stat-box span{

    display:block;

    color:#64748B;

    font-size:15px;

    line-height:1.7;

    font-weight:500;

}

/*==================================================
        FLOATING ANIMATION
==================================================*/

.stat-box:nth-child(2){

    animation:statFloat 5s ease-in-out infinite;

}

@keyframes statFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/*==================================================
        BUTTON GROUP SHADOW
==================================================*/

.hero-buttons a{

    will-change:transform;

}

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

@media(max-width:991px){

.hero-buttons{

margin:35px 0;

}

.hero-trust ul{

grid-template-columns:1fr;

}

.hero-stats{

gap:18px;

}

.stat-box{

min-width:220px;

}

}

@media(max-width:767px){

.hero-buttons{

flex-direction:column;

align-items:stretch;

gap:15px;

}

.hero-btn-primary,

.hero-btn-secondary{

width:100%;

justify-content:center;

padding:16px 24px;

}

.hero-trust{

grid-template-columns:1fr;

}

.hero-trust ul{

grid-template-columns:1fr;

}

.hero-trust li{

padding:16px 18px;

font-size:14px;

}

.hero-stats{

flex-direction:column;

margin-top:35px;

}

.stat-box{

min-width:100%;

padding:22px;

}

.stat-box h3{

font-size:32px;

}

.stat-box span{

font-size:14px;

}

}

/*==================================================
            HERO RIGHT COLUMN
==================================================*/

.hero-form-wrapper{

    position:relative;

    z-index:5;

}

/*==================================================
            HERO IMAGE
==================================================*/

.hero-image{

    position:relative;

    margin-bottom:-70px;

    z-index:3;

}

.hero-image img{

    width:100%;

    display:block;

    border-radius:28px;

    background:#ffffff;

    border:12px solid #ffffff;

    box-shadow:

    0 40px 90px rgba(15,23,42,.14);

    transition:.45s;

}

.hero-image:hover img{

    transform:

    translateY(-8px)

    scale(1.01);

}

/*==================================================
        FLOATING SHAPE
==================================================*/

.hero-image::before{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    right:-40px;

    top:-35px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(37,99,235,.14),

        transparent 72%

    );

    z-index:-1;

    animation:heroBlob 8s ease infinite;

}

.hero-image::after{

    content:"";

    position:absolute;

    width:110px;

    height:110px;

    left:-25px;

    bottom:20px;

    border-radius:24px;

    background:

    linear-gradient(

        135deg,

        rgba(255,122,26,.12),

        rgba(255,122,26,.03)

    );

    transform:rotate(18deg);

    z-index:-1;

}

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

.hero-image-badge{

    position:absolute;

    top:35px;

    right:-18px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 20px;

    border-radius:60px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    box-shadow:

    0 25px 60px rgba(15,23,42,.10);

    animation:badgeFloat 5s ease-in-out infinite;

}

.hero-image-badge i{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    linear-gradient(

        135deg,

        #22C55E,

        #16A34A

    );

    color:#ffffff;

}

.hero-image-badge span{

    display:block;

    font-size:13px;

    color:#64748B;

}

.hero-image-badge strong{

    display:block;

    font-size:16px;

    color:#081C3A;

}

/*==================================================
        CONSULTATION CARD
==================================================*/

.consultation-card{

    position:relative;

    padding:95px 35px 35px;

    border-radius:30px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(24px);

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

    0 45px 100px rgba(15,23,42,.10);

    overflow:hidden;

}

/* Decorative */

.consultation-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #3B82F6,

        #FF7A1A

    );

}

.consultation-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(37,99,235,.08),

        transparent 72%

    );

}

/*==================================================
        FORM HEADER
==================================================*/

.form-heading{

    margin-bottom:30px;

    text-align:center;

}

.form-heading h3{

    margin-bottom:10px;

    font-size:30px;

    font-weight:800;

    color:#081C3A;

}

.form-heading p{

    margin:0;

    color:#64748B;

    line-height:1.8;

}

/*==================================================
        QUICK INFO
==================================================*/

.hero-mini-info{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:25px;

}

.hero-mini-info div{

    padding:12px 18px;

    border-radius:18px;

    background:#F8FAFC;

    font-size:13px;

    font-weight:600;

    color:#475569;

}

/*==================================================
        ANIMATIONS
==================================================*/

@keyframes heroBlob{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes badgeFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

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

@media(max-width:991px){

.hero-form-wrapper{

margin-top:40px;

}

.hero-image{

margin-bottom:-55px;

}

.consultation-card{

padding:80px 30px 30px;

}

.hero-image-badge{

right:10px;

top:20px;

}

}

@media(max-width:767px){

.hero-image{

margin-bottom:-45px;

}

.hero-image img{

border-width:8px;

border-radius:20px;

}

.hero-image::before,

.hero-image::after{

display:none;

}

.hero-image-badge{

position:relative;

top:auto;

right:auto;

margin:18px auto 0;

width:max-content;

}

.consultation-card{

padding:70px 22px 25px;

border-radius:22px;

}

.form-heading h3{

font-size:24px;

}

.form-heading p{

font-size:15px;

}

.hero-mini-info{

flex-direction:column;

gap:12px;

}

.hero-mini-info div{

text-align:center;

}

}
/*==================================================
            LEAD FORM
==================================================*/

.consultation-card form{

    position:relative;

    z-index:2;

}

.consultation-card .form-group{

    position:relative;

    margin-bottom:20px;

}

/*==================================================
            INPUTS
==================================================*/

.consultation-card input,
.consultation-card textarea,
.consultation-card select{

    width:100%;

    height:60px;

    padding:0 22px;

    border-radius:16px;

    border:1.5px solid rgba(15,23,42,.08);

    background:#ffffff;

    color:#081C3A;

    font-size:15px;

    font-weight:500;

    outline:none;

    transition:.35s;

}

.consultation-card textarea{

    height:140px;

    resize:none;

    padding:18px 22px;

}

.consultation-card select{

    cursor:pointer;

}

.consultation-card input::placeholder,
.consultation-card textarea::placeholder{

    color:#94A3B8;

    transition:.3s;

}

/*==================================================
            INPUT FOCUS
==================================================*/

.consultation-card input:focus,
.consultation-card textarea:focus,
.consultation-card select:focus{

    border-color:#2563EB;

    background:#ffffff;

    box-shadow:

    0 0 0 5px rgba(37,99,235,.08);

}

.consultation-card input:focus::placeholder,
.consultation-card textarea:focus::placeholder{

    opacity:.6;

}

/*==================================================
            SUBMIT BUTTON
==================================================*/

.consultation-card button{

    width:100%;

    height:60px;

    margin-top:8px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #1D4ED8

    );

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    transition:.4s;

    box-shadow:

    0 20px 45px rgba(37,99,235,.22);

}

.consultation-card button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.7s;

}

.consultation-card button:hover{

    transform:translateY(-4px);

    box-shadow:

    0 30px 60px rgba(37,99,235,.30);

}

.consultation-card button:hover::before{

    left:120%;

}

/*==================================================
        FORM NOTE
==================================================*/

.form-note{

    margin-top:18px;

    text-align:center;

    font-size:13px;

    color:#64748B;

    line-height:1.7;

}

.form-note i{

    color:#22C55E;

    margin-right:6px;

}

/*==================================================
        QUICK CONTACT
==================================================*/

.quick-contact{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

    margin-top:28px;

}

.quick-contact a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px;

    border-radius:16px;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.35s;

}

/*==========================================
            CALL
==========================================*/

.quick-contact a:first-child{

    background:#EFF6FF;

    color:#2563EB;

}

.quick-contact a:first-child:hover{

    background:#2563EB;

    color:#ffffff;

}

/*==========================================
            WHATSAPP
==========================================*/

.quick-contact a:last-child{

    background:#ECFDF5;

    color:#16A34A;

}

.quick-contact a:last-child:hover{

    background:#16A34A;

    color:#ffffff;

}

/*==================================================
            FORM SUCCESS
==================================================*/

.form-success{

    display:none;

    margin-top:20px;

    padding:16px 18px;

    border-radius:16px;

    background:#ECFDF5;

    color:#15803D;

    font-weight:600;

    text-align:center;

}

/*==================================================
            FORM ERROR
==================================================*/

.form-error{

    display:none;

    margin-top:20px;

    padding:16px 18px;

    border-radius:16px;

    background:#FEF2F2;

    color:#DC2626;

    font-weight:600;

    text-align:center;

}

/*==================================================
        INPUT ERROR
==================================================*/

.consultation-card input.error,
.consultation-card textarea.error,
.consultation-card select.error{

    border-color:#DC2626;

    background:#FEF2F2;

}

/*==================================================
        INPUT SUCCESS
==================================================*/

.consultation-card input.success,
.consultation-card textarea.success,
.consultation-card select.success{

    border-color:#22C55E;

}

/*==================================================
        LOADER
==================================================*/

.consultation-card button.loading{

    pointer-events:none;

    opacity:.85;

}

.consultation-card button.loading::after{

    content:"";

    width:18px;

    height:18px;

    margin-left:12px;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:#ffffff;

    border-radius:50%;

    display:inline-block;

    animation:buttonSpin .8s linear infinite;

}

@keyframes buttonSpin{

    to{

        transform:rotate(360deg);

    }

}

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

@media(max-width:767px){

.consultation-card input,
.consultation-card textarea,
.consultation-card select{

height:54px;

font-size:14px;

}

.consultation-card textarea{

height:120px;

}

.consultation-card button{

height:56px;

font-size:15px;

}

.quick-contact{

grid-template-columns:1fr;

gap:12px;

}

.quick-contact a{

padding:15px;

font-size:14px;

}

.form-note{

font-size:12px;

}

}

/*==================================================
                TRUSTED SECTION
==================================================*/

.trusted-section {

    position: relative;

    padding: 120px 0;

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

    overflow: hidden;

}

/* Background Shape */

.trusted-section::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    left: -250px;

    top: -250px;

    background:
        radial-gradient(rgba(37, 99, 235, .06),
            transparent 70%);

    border-radius: 50%;

}

.trusted-section::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -200px;

    bottom: -250px;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 70%);

    border-radius: 50%;

}

/*==================================================
            CLIENT LOGOS
==================================================*/

.trusted-slider {

    position: relative;

    overflow: hidden;

    margin-bottom: 60px;

}

.trusted-track {

    display: flex;

    align-items: center;

    width: max-content;

    animation: logoScroll 40s linear infinite;

}

.trusted-slider:hover .trusted-track {

    animation-play-state: paused;

}

@keyframes logoScroll {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}

.trusted-logo {

    width: 220px;

    height: 120px;

    margin: 0 15px;

    background: #fff;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #edf2f7;

    transition: .35s;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, .05);

}

.trusted-logo:hover {

    transform:

        translateY(-10px) scale(1.05);

    box-shadow:
        0 30px 60px rgba(37, 99, 235, .15);

}

.trusted-logo img {

    max-width: 100%;

    max-height: 100%;

    /* filter:grayscale(100%); */


    transition: .35s;

}

.trusted-logo:hover img {

    filter: none;

    opacity: 1;

}

/*==================================================
            INDUSTRIES
==================================================*/

.industry-tags {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

    margin-bottom: 70px;

}

.industry-tags span {

    padding: 14px 24px;

    background: #fff;

    border-radius: 50px;

    border: 1px solid #E2E8F0;

    font-weight: 600;

    color: #334155;

    transition: .35s;

}

.industry-tags span:hover {

    background:

        linear-gradient(135deg,
            #2563EB,
            #1D4ED8);

    color: #fff;

    transform: translateY(-5px);

}

/*==================================================
            TRUST CARDS
==================================================*/

.trust-card {

    background:

        rgba(255, 255, 255, .72);

    backdrop-filter: blur(20px);

    border-radius: 25px;

    padding: 45px 30px;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, .5);

    transition: .45s;

    position: relative;

    overflow: hidden;

    height: 100%;

}

.trust-card::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background:

        rgba(37, 99, 235, .06);

    top: -40px;

    right: -40px;

}

.trust-card:hover {

    transform:

        translateY(-12px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.trust-card i {

    width: 80px;

    height: 80px;

    margin: auto;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    color: #fff;

    background:

        linear-gradient(135deg,
            #2563EB,
            #06B6D4);

    margin-bottom: 25px;

}

.trust-card h3 {

    font-size: 42px;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 10px;

}

.trust-card p {

    color: #64748B;

    line-height: 1.8;

    margin: 0;

}

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

@media(max-width:991px) {

    .trusted-section {

        padding: 80px 0;

    }


    .trusted-logo {

        width: 180px;

        height: 100px;

    }

    .trust-card {

        padding: 35px 25px;

    }

}

@media(max-width:767px) {



    .section-badge {

        font-size: 13px;

        padding: 10px 18px;

    }

    .trusted-logo {

        width: 150px;

        height: 85px;

        margin: 0 10px;

    }

    .trusted-logo img {

        max-width: 100px;

    }

    .industry-tags {

        gap: 10px;

    }

    .industry-tags span {

        padding: 10px 16px;

        font-size: 13px;

    }

    .trust-card {

        margin-bottom: 20px;

    }

    .trust-card i {

        width: 65px;

        height: 65px;

        font-size: 24px;

    }

    .trust-card h3 {

        font-size: 34px;

    }

}

/*=========================================
        PREMIUM HEADING
=========================================*/

.trusted-heading {

    max-width: 1000px;

    margin: auto;

    text-align: center;

    margin-bottom: 80px;

    position: relative;

}

.trusted-mini-title {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 25px;

}

.trusted-mini-title span {

    width: 55px;

    height: 3px;

    border-radius: 20px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #FF7A1A);

}

.trusted-heading h2 {

    font-size: 58px;

    line-height: 1.15;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 25px;

}

.trusted-heading h2 span {

    display: block;

    margin-top: 8px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #1D4ED8,
            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.trusted-heading p {

    max-width: 850px;

    margin: auto;

    font-size: 19px;

    color: #64748B;

    line-height: 1.9;

}

/*=========================================
        ACHIEVEMENTS
=========================================*/

.trusted-achievements {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 50px;

    flex-wrap: wrap;

}

.trusted-achievements div {

    width: 180px;

    padding: 28px 20px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:

        0 20px 50px rgba(15, 23, 42, .06);

    transition: .35s;

}

.trusted-achievements div:hover {

    transform: translateY(-8px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.trusted-achievements h3 {

    font-size: 40px;

    font-weight: 800;

    color: #2563EB;

    margin-bottom: 8px;

}

.trusted-achievements small {

    font-size: 15px;

    color: #64748B;

    font-weight: 600;

}

@media(max-width:991px) {

    .trusted-heading h2 {

        font-size: 42px;

    }

}

@media(max-width:767px) {

    .trusted-heading {

        margin-bottom: 60px;

    }

    .trusted-heading h2 {

        font-size: 32px;

    }

    .trusted-heading p {

        font-size: 16px;

    }

    .trusted-achievements {

        gap: 15px;

    }

    .trusted-achievements div {

        width: 160px;

        padding: 22px 15px;

    }

    .trusted-achievements h3 {

        font-size: 32px;

    }

}

/*==================================================
        CONTENT CTA SECTION
==================================================*/

.content-cta-section{

    position:relative;

    padding:90px 0;

    overflow:hidden;

    background:#ffffff;

}

/*==========================================
        BACKGROUND
==========================================*/

.content-cta-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at left top,
    rgba(37,99,235,.06),
    transparent 40%),

    radial-gradient(circle at right bottom,
    rgba(255,122,26,.06),
    transparent 40%);

    pointer-events:none;

}

.content-cta-card{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    padding:70px;

    border-radius:32px;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        #081C3A,
        #0F2D5C,
        #2563EB
    );

    box-shadow:

    0 45px 100px rgba(8,28,58,.18);

}

/* Decorative */

.content-cta-card::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,255,255,.08),

        transparent 70%

    );

}

.content-cta-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    left:-80px;

    bottom:-120px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,122,26,.14),

        transparent 70%

    );

}

/*==================================================
            LEFT CONTENT
==================================================*/

.cta-content{

    flex:1;

    position:relative;

    z-index:2;

}

.cta-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    backdrop-filter:blur(12px);

    margin-bottom:25px;

}

.cta-badge i{

    color:#FDBA12;

}

.cta-content h2{

    color:#ffffff;

    font-size:42px;

    font-weight:800;

    line-height:1.25;

    margin-bottom:22px;

}

.cta-content p{

    color:rgba(255,255,255,.82);

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

}

/*==================================================
            FEATURES
==================================================*/

.cta-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.cta-features div{

    display:flex;

    align-items:center;

    gap:14px;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

}

.cta-features i{

    color:#4ADE80;

    font-size:18px;

}

/*==================================================
            RIGHT
==================================================*/

.cta-action{

    width:340px;

    flex-shrink:0;

    padding:35px;

    border-radius:28px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    text-align:center;

}

/*==================================================
            STAT
==================================================*/

.cta-stat{

    margin-bottom:30px;

}

.cta-stat h3{

    margin:0;

    font-size:52px;

    font-weight:800;

    color:#ffffff;

    line-height:1;

}

.cta-stat span{

    display:block;

    margin-top:10px;

    color:rgba(255,255,255,.75);

    font-size:15px;

}

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

.cta-primary-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:60px;

    border-radius:60px;

    background:#ffffff;

    color:#2563EB;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.35s;

    margin-bottom:25px;

}

.cta-primary-btn:hover{

    transform:translateY(-5px);

    background:#F8FAFC;

    color:#2563EB;

}

/*==================================================
            CONTACT
==================================================*/

.cta-contact{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.cta-contact a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:54px;

    border-radius:16px;

    text-decoration:none;

    color:#ffffff;

    font-weight:600;

    transition:.35s;

    background:rgba(255,255,255,.08);

}

.cta-contact a:hover{

    background:rgba(255,255,255,.18);

}

.cta-contact .fa-phone{

    color:#60A5FA;

}

.cta-contact .fa-whatsapp{

    color:#4ADE80;

}

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

.content-cta-card{

    transition:.45s;

}

.content-cta-card:hover{

    transform:translateY(-8px);

}

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

@media(max-width:1199px){

.content-cta-card{

padding:50px;

gap:40px;

}

.cta-content h2{

font-size:36px;

}

}

@media(max-width:991px){

.content-cta-card{

flex-direction:column;

text-align:center;

}

.cta-features{

grid-template-columns:1fr;

}

.cta-action{

width:100%;

max-width:450px;

}

}

@media(max-width:767px){

.content-cta-section{

padding:60px 0;

}

.content-cta-card{

padding:35px 25px;

border-radius:22px;

}

.cta-content h2{

font-size:28px;

}

.cta-content p{

font-size:15px;

}

.cta-badge{

font-size:12px;

padding:10px 18px;

}

.cta-features{

gap:14px;

text-align:left;

}

.cta-features div{

font-size:14px;

}

.cta-action{

padding:25px;

}

.cta-stat h3{

font-size:40px;

}

.cta-primary-btn{

height:54px;

font-size:15px;

}

.cta-contact a{

height:50px;

font-size:14px;

}

}

/*==================================================
            INDUSTRIES SECTION
==================================================*/

.industries-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

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

    z-index: 1;

}

.industries-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -250px;

    top: -320px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.industries-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.industries-section .container {

    position: relative;

    z-index: 5;

}

.industries-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .18) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.industry-heading {

    text-align: center;

    max-width: 900px;

    margin: auto;

    margin-bottom: 80px;

    position: relative;

    z-index: 3;

}

.industry-heading .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 24px;

    border-radius: 60px;

    background: rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 20px 40px rgba(37, 99, 235, .08);

}

.industry-heading h2 {

    font-size: 58px;

    font-weight: 800;

    color: #081C3A;

    line-height: 1.15;

    margin: 28px 0;

}

.industry-heading h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #1D4ED8,

            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.industry-heading p {

    font-size: 18px;

    line-height: 1.9;

    color: #64748B;

}

/*==================================================
            INDUSTRY CARD
==================================================*/

.industry-card {

    position: relative;

    overflow: hidden;

    border-radius: 26px;

    background: #ffffff;

    transition: .45s;

    box-shadow:

        0 18px 45px rgba(15, 23, 42, .08);

}

.industry-card:hover {

    transform:

        translateY(-12px);

    box-shadow:

        0 35px 80px rgba(37, 99, 235, .14);

}

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

.industry-image {

    position: relative;

    overflow: hidden;

    height: max-content;

}

.industry-image img {

    width: 100%;

    border-radius: 15px;

    object-fit: fill;

    transition: 1s;

}

.industry-card:hover img {

    transform: scale(1.12);

}

.industry-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(transparent,

            rgba(8, 28, 58, .65));

    z-index: 1;

}

.industry-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,

            rgba(37, 99, 235, .18),

            rgba(255, 122, 26, .10));

    opacity: 0;

    transition: .45s;

}

.industry-card:hover .industry-image::after {

    opacity: 1;

}

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

.industry-image span {

    position: absolute;

    left: 24px;

    bottom: 24px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    padding: 12px 20px;

    border-radius: 40px;

    background:

        rgba(255, 255, 255, .88);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    color: #081C3A;

    font-weight: 700;

    font-size: 15px;

    transition: .35s;

}

.industry-card:hover .industry-image span {

    background: #2563EB;

    color: #fff;

}

.industry-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

    z-index: 5;

}

.industry-card::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

    top: -100px;

    right: -100px;

    transition: .45s;

}

.industry-card:hover::after {

    transform: scale(1.35);

}

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

@media(max-width:1199px) {

    .industry-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .industries-section {

        padding: 90px 0;

    }

    .industry-heading h2 {

        font-size: 40px;

    }

}

@media(max-width:767px) {

    .industry-heading h2 {

        font-size: 32px;

    }

    .industry-heading p {

        font-size: 16px;

    }

    .industry-image {

        height: 220px;

    }

    .industry-image span {

        left: 18px;

        bottom: 18px;

        font-size: 14px;

        padding: 10px 18px;

    }

}

/*==================================================
            INDUSTRY CONTENT
==================================================*/

.industry-content {

    position: relative;

    padding: 30px;

    background: #ffffff;

    z-index: 2;

}

.industry-content ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

.industry-content ul li {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 0;

    font-size: 15px;

    color: #475569;

    font-weight: 500;

    border-bottom: 1px solid rgba(15, 23, 42, .06);

    transition: .35s;

}

.industry-content ul li:last-child {

    border: none;

}

.industry-content ul li::before {

    content: "";

    width: 11px;

    height: 11px;

    border-radius: 50%;

    flex-shrink: 0;

    background:

        linear-gradient(135deg,

            #2563EB,

            #FF7A1A);

    box-shadow:

        0 0 12px rgba(37, 99, 235, .35);

}

.industry-card:hover ul li {

    transform: translateX(6px);

    color: #081C3A;

}

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

.industry-content a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    color: #2563EB;

    font-weight: 700;

    font-size: 16px;

    text-decoration: none;

    transition: .35s;

    position: relative;

}

.industry-content a::after {

    content: "\f061";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    transition: .35s;

}

.industry-content a:hover {

    color: #FF7A1A;

    gap: 18px;

}

.industry-content a:hover::after {

    transform: translateX(6px);

}

/*==================================================
            HOVER EFFECT
==================================================*/

.industry-card:hover {

    background:

        linear-gradient(180deg,

            #ffffff,

            #fbfdff);

}

.industry-card:hover .industry-content {

    background: transparent;

}

/*==================================================
        DECORATIVE GLOW
==================================================*/

.industry-card .floating-dot {

    position: absolute;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #FF7A1A;

    top: 22px;

    right: 22px;

    z-index: 6;

    animation: industryFloat 4s ease-in-out infinite;

}

@keyframes industryFloat {

    0% {

        transform: translateY(0);

        opacity: .55;

    }

    50% {

        transform: translateY(-12px);

        opacity: 1;

    }

    100% {

        transform: translateY(0);

        opacity: .55;

    }

}

/*==================================================
            BOTTOM CTA
==================================================*/

.industry-bottom {

    margin-top: 90px;

    text-align: center;

    padding: 70px;

    border-radius: 30px;

    overflow: hidden;

    position: relative;

    background:

        linear-gradient(135deg,

            #081C3A,

            #0F4C81,

            #2563EB);

    box-shadow:

        0 35px 80px rgba(15, 23, 42, .18);

}

.industry-bottom::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .05);

    top: -180px;

    right: -120px;

}

.industry-bottom::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .04);

    left: -80px;

    bottom: -80px;

}

.industry-bottom h3 {

    position: relative;

    color: #ffffff;

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 18px;

    z-index: 2;

}

.industry-bottom p {

    position: relative;

    max-width: 700px;

    margin: 0 auto 35px;

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

    z-index: 2;

}

.industry-bottom a {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 40px;

    border-radius: 60px;

    background: #ffffff;

    color: #081C3A;

    font-weight: 700;

    text-decoration: none;

    transition: .35s;

    z-index: 2;

}

.industry-bottom a:hover {

    transform: translateY(-5px);

    color: #081C3A;

    box-shadow:

        0 25px 60px rgba(255, 255, 255, .20);

}

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

@media(max-width:991px) {

    .industry-content {

        padding: 24px;

    }

    .industry-bottom {

        padding: 50px 30px;

    }

    .industry-bottom h3 {

        font-size: 34px;

    }

}

@media(max-width:767px) {

    .industry-content {

        padding: 22px;

    }

    .industry-content ul li {

        font-size: 14px;

        padding: 10px 0;

    }

    .industry-content a {

        font-size: 15px;

    }

    .industry-bottom {

        padding: 40px 20px;

        border-radius: 22px;

    }

    .industry-bottom h3 {

        font-size: 28px;

    }

    .industry-bottom p {

        font-size: 15px;

    }

    .industry-bottom a {

        width: 100%;

    }

}

/*==========================================
        WHY SECTION
==========================================*/

.why-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

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

    z-index: 1;

}

/* Decorative Background */

.why-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -320px;

    left: -250px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.why-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    bottom: -180px;

    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.why-section .container {

    position: relative;

    z-index: 5;

}

.why-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .20) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .20) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.why-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 720px;

}

.why-image::before {

    content: "";

    position: absolute;

    width: 560px;

    height: 560px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .16),

            transparent 70%);

    animation: whyGlow 10s linear infinite;

}

.why-image img {

    width: 100%;

    max-width: 640px;

    position: relative;

    z-index: 2;

    border-radius: 28px;

    animation: whyFloat 6s ease-in-out infinite;

    box-shadow:

        0 40px 90px rgba(15, 23, 42, .16);

}

/*==========================================
        EXPERIENCE CARD
==========================================*/

.experience-card {

    position: absolute;

    left: -60px;

    bottom: -160px;

    z-index: 5;

    width: 240px;

    padding: 28px;

    border-radius: 24px;

    background:

        rgba(255, 255, 255, .82);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .55);

    box-shadow:

        0 30px 70px rgba(15, 23, 42, .10);

    animation: cardFloat 5s ease-in-out infinite;

}

.experience-card h2 {

    font-size: 60px;

    margin: 0;

    font-weight: 800;

    color: #2563EB;

}

.experience-card p {

    margin-top: 10px;

    color: #475569;

    line-height: 1.7;

    font-weight: 600;

}

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

.why-content {

    position: relative;

    z-index: 5;

}

.why-content h2 {

    font-size: 58px;

    font-weight: 800;

    line-height: 1.12;

    color: #081C3A;

    margin: 28px 0;

}

.why-content h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #1D4ED8,

            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.why-content p {

    font-size: 18px;

    color: #64748B;

    line-height: 1.95;

    margin-bottom: 45px;

}

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

.why-content .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 14px 26px;

    border-radius: 60px;

    background:

        rgba(37, 99, 235, .08);

    color: #2563EB;

    font-weight: 700;

    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 18px 40px rgba(37, 99, 235, .08);

}

.why-content .section-badge::before {

    content: "";

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background:

        linear-gradient(135deg,

            #2563EB,

            #FF7A1A);

}

/*==========================================
        ANIMATIONS
==========================================*/

@keyframes whyFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes whyGlow {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes cardFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

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

@media(max-width:1199px) {

    .why-content h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .why-section {

        padding: 90px 0;

    }

    .why-image {

        min-height: auto;

        margin-bottom: 70px;

    }

    .why-content {

        text-align: center;

    }

    .why-content h2 {

        font-size: 40px;

    }

    .experience-card {

        left: 20px;

        bottom: 20px;

        width: 200px;

        padding: 22px;

    }

    .experience-card h2 {

        font-size: 48px;

    }

}

@media(max-width:767px) {

    .why-content h2 {

        font-size: 32px;

    }

    .why-content p {

        font-size: 16px;

    }

    .why-content .section-badge {

        font-size: 12px;

        padding: 10px 18px;

    }

    .why-image img {

        border-radius: 20px;

    }

    .experience-card {

        position: relative;

        left: auto;

        bottom: auto;

        margin-top: 20px;

        width: 100%;

        max-width: 280px;

    }

}

/*==========================================
        WHY FEATURE GRID
==========================================*/

.why-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

    margin: 55px 0;

}

/*==========================================
        FEATURE CARD
==========================================*/

.why-item {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 28px;

    background: rgba(255, 255, 255, .82);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .55);

    border-radius: 22px;

    overflow: hidden;

    transition: .45s cubic-bezier(.175, .885, .32, 1.15);

    box-shadow:

        0 15px 45px rgba(15, 23, 42, .06);

}

.why-item:hover {

    transform:

        translateY(-10px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.why-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background:

        linear-gradient(180deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

}

.why-item::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

    top: -80px;

    right: -80px;

    transition: .45s;

}

.why-item:hover::after {

    transform: scale(1.3);

}

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

.why-item i {

    width: 72px;

    height: 72px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 28px;

    color: #fff;

    background:

        linear-gradient(135deg,

            #2563EB,

            #3B82F6);

    transition: .4s;

    box-shadow:

        0 20px 45px rgba(37, 99, 235, .25);

}

.why-item:nth-child(2) i {

    background:
        linear-gradient(135deg,
            #10B981,
            #34D399);

}

.why-item:nth-child(3) i {

    background:
        linear-gradient(135deg,
            #FF7A1A,
            #F59E0B);

}

.why-item:nth-child(4) i {

    background:
        linear-gradient(135deg,
            #8B5CF6,
            #6366F1);

}

.why-item:nth-child(5) i {

    background:
        linear-gradient(135deg,
            #0EA5E9,
            #06B6D4);

}

.why-item:nth-child(6) i {

    background:
        linear-gradient(135deg,
            #EC4899,
            #F43F5E);

}

.why-item:hover i {

    transform:

        rotate(-10deg) scale(1.08);

}

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

.why-item h5 {

    font-size: 21px;

    font-weight: 700;

    color: #081C3A;

    margin-bottom: 8px;

    transition: .3s;

}

.why-item:hover h5 {

    color: #2563EB;

}

.why-item p {

    margin: 0;

    color: #64748B;

    font-size: 15px;

    line-height: 1.8;

}

.why-item:hover {

    background:

        linear-gradient(180deg,

            #ffffff,

            #fbfdff);

}

.why-item:hover p {

    color: #475569;

}

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

@media(max-width:991px) {

    .why-grid {

        grid-template-columns: 1fr;

    }

    .why-item {

        padding: 24px;

    }

}

@media(max-width:767px) {

    .why-item {

        padding: 20px;

        gap: 15px;

    }

    .why-item i {

        width: 58px;

        height: 58px;

        font-size: 22px;

        border-radius: 16px;

    }

    .why-item h5 {

        font-size: 18px;

    }

    .why-item p {

        font-size: 14px;

    }

}

/*==========================================
        WHY CTA BUTTON
==========================================*/

.why-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 20px 38px;

    margin-top: 15px;

    overflow: hidden;

    border-radius: 60px;

    background: linear-gradient(135deg,
            #2563EB,
            #1D4ED8,
            #0EA5E9);

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .3px;

    text-decoration: none;

    box-shadow:
        0 20px 45px rgba(37, 99, 235, .30);

    transition: .4s cubic-bezier(.175, .885, .32, 1.2);

}

/* Shine Effect */

.why-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transform: skewX(-25deg);

    transition: .8s;

}

.why-btn:hover::before {

    left: 150%;

}

/* Glow Ring */

.why-btn::after {

    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 60px;

    border: 1px solid rgba(255, 255, 255, .18);

    pointer-events: none;

}

/* Text */

.why-btn span {

    position: relative;

    z-index: 2;

}

/* Icon */

.why-btn i {

    position: relative;

    z-index: 2;

    font-size: 18px;

    transition: .35s;

}

/* Hover */

.why-btn:hover {

    color: #fff;

    transform:

        translateY(-6px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .38);

}

.why-btn:hover i {

    transform: translateX(8px);

}

/* Click */

.why-btn:active {

    transform: scale(.97);

}

/* Focus */

.why-btn:focus {

    color: #fff;

}

/* Floating Animation */

@keyframes buttonFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-3px);

    }

    100% {

        transform: translateY(0);

    }

}

.why-btn {

    animation: buttonFloat 4s ease-in-out infinite;

}

@media(max-width:767px) {

    .why-btn {

        width: 100%;

        justify-content: center;

        padding: 18px 22px;

        font-size: 15px;

    }

}

/*==================================================
            HIGHLIGHTS SECTION
==================================================*/

.highlights-section{

    position:relative;

    padding:100px 0;

    overflow:hidden;

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #f8fbff

    );

}

.highlights-section::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(37,99,235,.08),

        transparent 70%

    );

}

.highlights-section::after{

    content:"";

    position:absolute;

    left:-120px;

    bottom:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,122,26,.08),

        transparent 70%

    );

}

/*==================================================
            STATISTICS
==================================================*/

.highlight-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:60px;

}

.highlight-card{

    position:relative;

    padding:35px 25px;

    text-align:center;

    border-radius:24px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

    0 20px 50px rgba(15,23,42,.06);

    transition:.4s;

}

.highlight-card:hover{

    transform:

    translateY(-10px);

    box-shadow:

    0 35px 80px rgba(37,99,235,.12);

}

.highlight-icon{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #3B82F6

    );

    color:#ffffff;

    font-size:28px;

    box-shadow:

    0 20px 45px rgba(37,99,235,.20);

}

.highlight-card h3{

    margin-bottom:12px;

    font-size:42px;

    font-weight:800;

    color:#081C3A;

}

.highlight-card span{

    display:block;

    color:#64748B;

    font-size:15px;

    line-height:1.8;

}

/*==================================================
            FEATURES
==================================================*/

.highlight-features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:70px 0;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px 25px;

    border-radius:20px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

    0 15px 40px rgba(15,23,42,.05);

    transition:.35s;

    font-size:16px;

    font-weight:600;

    color:#334155;

}

.feature-item:hover{

    transform:translateY(-6px);

    border-color:rgba(37,99,235,.18);

}

.feature-item i{

    color:#22C55E;

    font-size:20px;

}

/*==================================================
            BOTTOM
==================================================*/

.highlight-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:35px 45px;

    border-radius:28px;

    background:

    linear-gradient(

        135deg,

        #081C3A,

        #163D74

    );

    box-shadow:

    0 30px 80px rgba(8,28,58,.15);

}

.trusted-companies{

    color:rgba(255,255,255,.85);

    font-size:18px;

    line-height:1.8;

}

.trusted-companies strong{

    color:#ffffff;

}

.highlight-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:60px;

    background:#ffffff;

    color:#2563EB;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.35s;

    white-space:nowrap;

}

.highlight-btn:hover{

    background:#F8FAFC;

    color:#2563EB;

    transform:translateY(-4px);

}

/*==================================================
            ANIMATION
==================================================*/

.highlight-card{

    animation:highlightFloat 8s ease-in-out infinite;

}

.highlight-card:nth-child(2){

    animation-delay:.3s;

}

.highlight-card:nth-child(3){

    animation-delay:.6s;

}

.highlight-card:nth-child(4){

    animation-delay:.9s;

}

@keyframes highlightFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

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

@media(max-width:1199px){

.highlight-stats{

grid-template-columns:repeat(2,1fr);

}

.highlight-features{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.highlight-bottom{

flex-direction:column;

text-align:center;

}

.highlight-btn{

width:100%;

max-width:320px;

}

}

@media(max-width:767px){

.highlights-section{

padding:70px 0;

}

.highlight-stats{

grid-template-columns:1fr;

gap:20px;

margin-top:40px;

}

.highlight-card{

padding:30px 20px;

}

.highlight-card h3{

font-size:34px;

}

.highlight-icon{

width:65px;

height:65px;

font-size:24px;

margin-bottom:20px;

}

.highlight-features{

grid-template-columns:1fr;

gap:16px;

margin:45px 0;

}

.feature-item{

padding:18px 20px;

font-size:15px;

}

.highlight-bottom{

padding:30px 25px;

border-radius:22px;

}

.trusted-companies{

font-size:15px;

}

.highlight-btn{

height:54px;

font-size:15px;

padding:0 25px;

}

}/*======================================
        PREMIUM SECTION HEADING
======================================*/

.highlights-heading{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

/* Badge */

.highlights-heading .section-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 28px;

    margin-bottom:28px;

    border-radius:60px;

    background:#EFF6FF;

    color:#2563EB;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:

    0 15px 40px rgba(37,99,235,.08);

}

.highlights-heading .section-badge i{

    color:#FF7A1A;

}

/* Heading */

.highlights-heading h2{

    margin-bottom:24px;

    font-size:56px;

    font-weight:800;

    line-height:1.15;

    color:#081C3A;

    letter-spacing:-1.5px;

}

.highlights-heading h2 span{

    display:block;

    margin-top:8px;

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #3B82F6,

        #FF7A1A

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* Description */

.highlights-heading p{

    max-width:720px;

    margin:auto;

    color:#64748B;

    font-size:19px;

    line-height:1.9;

}

/* Decorative Line */

.highlights-heading::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin:35px auto 0;

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #FF7A1A

    );

}

/* Mobile */

@media(max-width:991px){

.highlights-heading{

margin-bottom:55px;

}

.highlights-heading h2{

font-size:44px;

}

}

@media(max-width:767px){

.highlights-heading{

margin-bottom:40px;

}

.highlights-heading .section-badge{

padding:10px 18px;

font-size:12px;

}

.highlights-heading h2{

font-size:30px;

line-height:1.25;

}

.highlights-heading p{

font-size:15px;

line-height:1.8;

}

.highlights-heading::after{

width:70px;

}

}
/*==================================================
                FAQ SECTION
==================================================*/

.faq-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

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

    z-index: 1;

}

.faq-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -250px;

    top: -320px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.faq-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.faq-section .container {

    position: relative;

    z-index: 5;

}

.faq-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .18) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.faq-heading {

    max-width: 920px;

    margin: auto;

    text-align: center;

    margin-bottom: 90px;

}

.faq-heading .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 24px;

    border-radius: 60px;

    background: rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 18px 45px rgba(37, 99, 235, .08);

}

.faq-heading h2 {

    font-size: 58px;

    font-weight: 800;

    line-height: 1.15;

    color: #081C3A;

    margin: 28px 0;

}

.faq-heading h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #1D4ED8,

            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.faq-heading p {

    font-size: 18px;

    color: #64748B;

    line-height: 1.9;

}

/*==================================================
                FAQ IMAGE
==================================================*/

.faq-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 650px;

}

.faq-image::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .16),

            transparent 72%);

    animation: faqGlow 12s linear infinite;

}

.faq-image img {

    width: 100%;

    max-width: 580px;

    position: relative;

    z-index: 2;

    border-radius: 28px;

    animation: faqFloat 6s ease-in-out infinite;

    box-shadow:

        0 40px 90px rgba(15, 23, 42, .15);

}

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

.faq-floating-card {

    position: absolute;

    left: -20px;

    bottom: 60px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 18px;

    width: 290px;

    padding: 26px;

    border-radius: 24px;

    background:

        rgba(255, 255, 255, .88);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .55);

    box-shadow:

        0 25px 60px rgba(15, 23, 42, .10);

    animation: faqCardFloat 5s ease-in-out infinite;

}

.faq-floating-card i {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    font-size: 28px;

    color: #fff;

    background:

        linear-gradient(135deg,

            #2563EB,

            #3B82F6);

    box-shadow:

        0 18px 40px rgba(37, 99, 235, .25);

}

.faq-floating-card h4 {

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 8px;

    color: #081C3A;

}

.faq-floating-card p {

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #64748B;

}

/*==================================================
                ANIMATION
==================================================*/

@keyframes faqFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes faqGlow {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes faqCardFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

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

@media(max-width:991px) {

    .faq-section {

        padding: 90px 0;

    }

    .faq-heading h2 {

        font-size: 42px;

    }

    .faq-image {

        min-height: auto;

        margin-bottom: 70px;

    }

    .faq-floating-card {

        left: 20px;

        bottom: 20px;

        width: 250px;

        padding: 22px;

    }

}

@media(max-width:767px) {
    .experience-card {
        display: none;
    }
    .knowledge-cta {
        flex-direction: column;
       
    }
    .knowledge-btn {
        width: max-content;
       
    }

    .faq-heading h2 {

        font-size: 32px;

    }

    .faq-heading p {

        font-size: 16px;

    }

    .faq-image img {

        border-radius: 20px;

    }

    .faq-floating-card {
display: none;

        left: auto;

        bottom: auto;

        margin-top: 25px;

        width: 100%;

    }

    .faq-floating-card i {

        width: 60px;

        height: 60px;

        font-size: 24px;

    }

}

/*==================================================
                PREMIUM ACCORDION
==================================================*/

.custom-faq {

    position: relative;

}

.custom-faq .accordion-item {

    border: none;

    overflow: hidden;

    margin-bottom: 22px;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:

        0 18px 45px rgba(15, 23, 42, .06);

    transition: .35s;

}

.custom-faq .accordion-item:hover {

    transform: translateY(-4px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .12);

}

.custom-faq .accordion-button {

    position: relative;

    padding: 28px 80px 28px 30px;

    background: #ffffff;

    color: #081C3A;

    font-size: 19px;

    font-weight: 700;

    border: none;

    box-shadow: none;

    transition: .35s;

}

.custom-faq .accordion-button:focus {

    box-shadow: none;

}

.custom-faq .accordion-button:not(.collapsed) {

    background:

        linear-gradient(90deg,

            #EFF6FF,

            #ffffff);

    color: #2563EB;

}

.custom-faq .accordion-button::after {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: none;

    content: "+";

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    font-weight: 300;

    color: #2563EB;

    border: 2px solid rgba(37, 99, 235, .15);

    transition: .35s;

}

.custom-faq .accordion-button:not(.collapsed)::after {

    content: "−";

    background: #2563EB;

    color: #ffffff;

    transform: none;

}

.custom-faq .accordion-body {

    padding:

        0 30px 28px;

    color: #64748B;

    font-size: 16px;

    line-height: 1.9;

}

.custom-faq .accordion-item {

    position: relative;

}

.custom-faq .accordion-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background:

        linear-gradient(180deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

    opacity: 0;

    transition: .35s;

}

.custom-faq .accordion-item:has(.accordion-button:not(.collapsed))::before {

    opacity: 1;

}

/*==================================================
                FAQ CTA
==================================================*/

.faq-bottom {

    position: relative;

    margin-top: 100px;

    padding: 70px;

    overflow: hidden;

    border-radius: 32px;

    text-align: center;

    background:

        linear-gradient(135deg,

            #081C3A,

            #0F4C81,

            #2563EB);

    box-shadow:

        0 40px 90px rgba(15, 23, 42, .18);

}

.faq-bottom::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    top: -180px;

    right: -120px;

    background:

        rgba(255, 255, 255, .05);

}

.faq-bottom::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    border-radius: 50%;

    left: -60px;

    bottom: -60px;

    background:

        rgba(255, 255, 255, .04);

}

.faq-bottom h3 {

    position: relative;

    z-index: 2;

    color: #ffffff;

    font-size: 44px;

    font-weight: 800;

    margin-bottom: 18px;

}

.faq-bottom p {

    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto 40px;

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

}

.faq-buttons {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.faq-buttons a {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 18px 34px;

    border-radius: 60px;

    text-decoration: none;

    font-weight: 700;

    transition: .35s;

}

.faq-call {

    background: #ffffff;

    color: #081C3A;

}

.faq-whatsapp {

    background: #25D366;

    color: #ffffff;

}

.faq-consult {

    background:

        linear-gradient(135deg,

            #FF7A1A,

            #F59E0B);

    color: #ffffff;

}

.faq-buttons a:hover {

    transform:

        translateY(-6px);

    box-shadow:

        0 25px 60px rgba(255, 255, 255, .15);

}

.faq-particle {

    position: absolute;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #FFD54A;

    opacity: .35;

    animation: faqParticle 6s ease-in-out infinite;

}

.particle1 {

    top: 40px;

    right: 160px;

}

.particle2 {

    bottom: 80px;

    left: 140px;

}

.particle3 {

    top: 180px;

    right: 70px;

}

@keyframes faqParticle {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

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

@media(max-width:991px) {

    .faq-bottom {

        padding: 50px 35px;

    }

    .faq-bottom h3 {

        font-size: 34px;

    }

}

@media(max-width:767px) {

    .custom-faq .accordion-button {

        padding: 22px 65px 22px 20px;

        font-size: 16px;

    }

    .custom-faq .accordion-button::after {

        width: 40px;

        height: 40px;

        font-size: 24px;

    }

    .custom-faq .accordion-body {

        padding: 0 20px 22px;

        font-size: 15px;

    }

    .faq-bottom {

        padding: 40px 22px;

        border-radius: 24px;

    }

    .faq-bottom h3 {

        font-size: 28px;

    }

    .faq-bottom p {

        font-size: 15px;

    }

    .faq-buttons {

        flex-direction: column;

    }

    .faq-buttons a {

        width: 100%;

        justify-content: center;

    }

    .faq-particle {

        display: none;

    }

}/*==================================================
        RELATED SERVICES
==================================================*/

.related-services-section{

    position:relative;

    padding:100px 0;

    overflow:hidden;

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

}

.related-services-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(37,99,235,.08),
        transparent 72%
    );

}

.related-services-section::after{

    content:"";

    position:absolute;

    right:-120px;

    bottom:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,122,26,.08),
        transparent 72%
    );

}

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

.related-card{

    position:relative;

    height:100%;

    border-radius:28px;

    overflow:hidden;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    transition:.45s;

    box-shadow:

    0 20px 50px rgba(15,23,42,.06);

}

.related-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 40px 90px rgba(37,99,235,.12);

}

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

.related-image{

    position:relative;

    overflow:hidden;

}

.related-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.6s;

}

.related-card:hover .related-image img{

    transform:scale(1.08);

}

/* Gradient */

.related-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        transparent,

        rgba(8,28,58,.18)

    );

}

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

.related-content{

    padding:30px;

}

.related-content span{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:30px;

    background:#EFF6FF;

    color:#2563EB;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

.related-content h3{

    margin-bottom:18px;

}

.related-content h3 a{

    color:#081C3A;

    text-decoration:none;

    font-size:26px;

    font-weight:700;

    line-height:1.35;

    transition:.3s;

}

.related-content h3 a:hover{

    color:#2563EB;

}

.related-content p{

    margin-bottom:28px;

    color:#64748B;

    font-size:15px;

    line-height:1.9;

}

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

.related-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:#2563EB;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.related-btn i{

    transition:.35s;

}

.related-btn:hover{

    color:#1D4ED8;

}

.related-btn:hover i{

    transform:translateX(8px);

}

/*==================================================
        HOVER BORDER
==================================================*/

.related-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #3B82F6,

        #FF7A1A

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.related-card:hover::before{

    transform:scaleX(1);

}

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

@media(max-width:1199px){

.related-content{

padding:25px;

}

.related-content h3 a{

font-size:22px;

}

}

@media(max-width:991px){

.related-image img{

height:220px;

}

}

@media(max-width:767px){

.related-services-section{

padding:70px 0;

}

.related-card{

border-radius:22px;

}

.related-image img{

height:200px;

}

.related-content{

padding:22px;

}

.related-content span{

font-size:12px;

padding:7px 14px;

}

.related-content h3 a{

font-size:20px;

line-height:1.4;

}

.related-content p{

font-size:14px;

margin-bottom:22px;

}

.related-btn{

font-size:14px;

}

}/*==========================================
        RELATED HEADING
==========================================*/

.related-heading{

    position:relative;

    max-width:820px;

    margin:0 auto 80px;

    text-align:center;

}

/* Badge */

.related-heading .section-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 26px;

    border-radius:60px;

    margin-bottom:28px;

    background:#EFF6FF;

    color:#2563EB;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:

    0 15px 40px rgba(37,99,235,.08);

}

.related-heading .section-badge i{

    color:#FF7A1A;

}

/* Heading */

.related-heading h2{

    margin-bottom:24px;

    font-size:56px;

    font-weight:800;

    line-height:1.12;

    letter-spacing:-1.5px;

    color:#081C3A;

}

.related-heading h2 span{

    display:block;

    margin-top:8px;

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #3B82F6,

        #FF7A1A

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* Description */

.related-heading p{

    max-width:700px;

    margin:auto;

    color:#64748B;

    font-size:19px;

    line-height:1.9;

}

/* Decorative */

.related-heading::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin:35px auto 0;

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #FF7A1A

    );

}

/* Responsive */

@media(max-width:991px){

.related-heading{

margin-bottom:60px;

}

.related-heading h2{

font-size:44px;

}

}

@media(max-width:767px){

.related-heading{

margin-bottom:45px;

}

.related-heading .section-badge{

padding:10px 18px;

font-size:12px;

}

.related-heading h2{

font-size:30px;

line-height:1.25;

}

.related-heading p{

font-size:15px;

line-height:1.8;

}

.related-heading::after{

width:70px;

}

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

.services-heading {

    max-width: 900px;

    margin: auto;

    text-align: center;

    margin-bottom: 90px;

    position: relative;

    z-index: 2;

}

.services-heading .section-tag {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 12px 24px;

    background: #EFF6FF;

    border-radius: 100px;

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 20px 45px rgba(37, 99, 235, .08);

}

.services-heading h2 {

    margin: 30px 0;

    font-size: 58px;

    font-weight: 800;

    line-height: 1.15;

    color: #081C3A;

}

.services-heading h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #1D4ED8,
            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.services-heading p {

    max-width: 760px;

    margin: auto;

    font-size: 18px;

    line-height: 1.9;

    color: #64748B;

}

/*==================================================
            FEATURED SERVICE
==================================================*/

.featured-service {

    position: relative;

    overflow: hidden;

    border-radius: 35px;

    background:

        linear-gradient(135deg,
            #081C3A,
            #0F4C81);

    padding: 70px;

    margin-bottom: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-shadow:

        0 40px 90px rgba(15, 23, 42, .18);

}

/* Decorative Circles */

.featured-service::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    top: -180px;

    right: -180px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .05);

}

.featured-service::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    left: -120px;

    bottom: -120px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .04);

}

.featured-left {

    flex: 1;

    position: relative;

    z-index: 2;

}

.featured-label {

    display: inline-block;

    padding: 10px 20px;

    background:

        linear-gradient(135deg,
            #FF7A1A,
            #FFB347);

    border-radius: 50px;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 25px;

}

.featured-left h3 {

    color: #fff;

    font-size: 46px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 20px;

}

.featured-left p {

    color: #CBD5E1;

    line-height: 1.9;

    font-size: 17px;

    margin-bottom: 30px;

}

.featured-left ul {

    list-style: none;

    padding: 0;

    margin: 0 0 40px;

}

.featured-left ul li {

    color: #fff;

    margin-bottom: 16px;

    font-size: 17px;

    display: flex;

    align-items: center;

}

.featured-left ul li::before {

    content: "✓";

    width: 34px;

    height: 34px;

    margin-right: 15px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .12);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #7DD3FC;

    font-weight: 700;

}

.featured-right {

    flex: 1;

    position: relative;

    z-index: 2;

    text-align: center;

}

.featured-right img {

    max-width: 100%;

    border-radius: 25px;

    animation: dashboardFloat 6s ease-in-out infinite;

    box-shadow:

        0 35px 80px rgba(0, 0, 0, .25);

}

.service-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 18px 36px;

    border-radius: 60px;

    background:

        linear-gradient(135deg,
            #FF7A1A,
            #FF9838);

    color: #fff;

    font-weight: 700;

    transition: .35s;

    box-shadow:

        0 20px 45px rgba(255, 122, 26, .25);

}

.service-btn:hover {

    color: #fff;

    transform:

        translateY(-5px);

    box-shadow:

        0 30px 60px rgba(255, 122, 26, .35);

}

/*==================================================
            DECORATION
==================================================*/

.featured-service .shape-1 {

    position: absolute;

    width: 16px;

    height: 16px;

    background: #FF7A1A;

    border-radius: 50%;

    top: 80px;

    right: 120px;

}

.featured-service .shape-2 {

    position: absolute;

    width: 12px;

    height: 12px;

    background: #3B82F6;

    bottom: 120px;

    left: 100px;

    border-radius: 50%;

}

.featured-service .shape-3 {

    position: absolute;

    width: 22px;

    height: 22px;

    border: 3px solid #fff;

    border-radius: 50%;

    top: 120px;

    left: 45%;

    opacity: .25;

}

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

@media(max-width:1199px) {

    .featured-service {

        padding: 50px;

        gap: 40px;

    }

    .services-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .featured-service {

        flex-direction: column;

        text-align: center;

    }

    .featured-left ul li {

        justify-content: center;

    }

    .featured-left h3 {

        font-size: 38px;

    }

}

@media(max-width:767px) {

    .services-section {

        padding: 90px 0;

    }

    .services-heading h2 {

        font-size: 34px;

    }

    .services-heading p {

        font-size: 16px;

    }

    .featured-service {

        padding: 35px 25px;

        border-radius: 25px;

    }

    .featured-left h3 {

        font-size: 30px;

    }

    .featured-left ul li {

        font-size: 15px;

    }

}

/*==================================================
                SERVICE CARD
==================================================*/

.service-card {

    position: relative;

    background: rgba(255, 255, 255, .88);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .55);

    border-radius: 28px;

    padding: 40px 35px;

    overflow: hidden;

    transition: .45s cubic-bezier(.175, .885, .32, 1.2);

    height: 100%;

    z-index: 1;

    box-shadow:
        0 15px 45px rgba(15, 23, 42, .05);

}

/* Top Gradient Line */

.service-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #06B6D4,
            #FF7A1A);

}

/* Floating Glow */

.service-card::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 70%);

    top: -100px;

    right: -100px;

    transition: .45s;

}

/* Hover */

.service-card:hover {

    transform:

        translateY(-14px);

    box-shadow:

        0 35px 80px rgba(37, 99, 235, .15);

}

.service-card:hover::after {

    transform: scale(1.2);

}

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

.service-icon {

    width: 82px;

    height: 82px;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    background:

        linear-gradient(135deg,

            #2563EB,

            #3B82F6);

    color: #ffffff;

    font-size: 34px;

    position: relative;

    transition: .45s;

    box-shadow:

        0 18px 45px rgba(37, 99, 235, .25);

}

.service-icon::before {

    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 18px;

    border: 1px solid rgba(255, 255, 255, .35);

}

.service-card:hover .service-icon {

    transform:

        rotate(-10deg) scale(1.08);

}

/* Different Colors */

.service-card:nth-child(2) .service-icon {

    background:
        linear-gradient(135deg,
            #EA4335,
            #FBBC05);

}

.service-card:nth-child(3) .service-icon {

    background:
        linear-gradient(135deg,
            #0EA5E9,
            #06B6D4);

}

.service-card:nth-child(4) .service-icon {

    background:
        linear-gradient(135deg,
            #FF7A1A,
            #F59E0B);

}

.service-card:nth-child(5) .service-icon {

    background:
        linear-gradient(135deg,
            #10B981,
            #34D399);

}

.service-card:nth-child(6) .service-icon {

    background:
        linear-gradient(135deg,
            #8B5CF6,
            #6366F1);

}

.service-card:nth-child(7) .service-icon {

    background:
        linear-gradient(135deg,
            #EC4899,
            #F43F5E);

}

.service-card:nth-child(8) .service-icon {

    background:
        linear-gradient(135deg,
            #334155,
            #0F172A);

}

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

.service-card h4 {

    font-size: 25px;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 18px;

    transition: .35s;
    text-align: center !important;

}

.service-card:hover h4 {

    color: #2563EB;

}

.service-card p {

    color: #64748B;

    line-height: 1.9;

    margin-bottom: 30px;

    font-size: 16px;
    text-align: justify !important;

}

/*==================================================
            LEARN MORE
==================================================*/

.service-card a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #2563EB;

    font-weight: 700;

    position: relative;

    transition: .35s;

}

.service-card a::after {

    content: "\f061";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    transition: .35s;

}

.service-card:hover a {

    gap: 16px;

    color: #FF7A1A;

}

.service-card:hover a::after {

    transform: translateX(6px);

}

/*==================================================
            HOVER EFFECTS
==================================================*/

.service-card:hover {

    background:

        linear-gradient(180deg,

            #ffffff,

            #fbfdff);

}

.service-card:hover p {

    color: #475569;

}

.service-card:hover .service-icon {

    box-shadow:

        0 25px 60px rgba(37, 99, 235, .30);

}

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

@media(max-width:991px) {

    .service-card {

        padding: 35px 28px;

    }

    .service-icon {

        width: 72px;

        height: 72px;

        font-size: 30px;

    }

    .service-card h4 {

        font-size: 22px;

    }

}

@media(max-width:767px) {

    .service-card {

        padding: 28px 22px;

        border-radius: 22px;

    }

    .service-icon {

        width: 64px;

        height: 64px;

        font-size: 24px;

        margin-bottom: 22px;

    }

    .service-card h4 {

        font-size: 20px;


    }

    .service-card p {

        font-size: 15px;

    }

}

/*==================================================
                SERVICES CTA
==================================================*/

.services-cta {

    position: relative;

    overflow: hidden;

    margin-top: 90px;

    border-radius: 34px;

    padding: 70px;

    background:

        linear-gradient(135deg,
            #081C3A,
            #0F4C81,
            #2563EB);

    box-shadow:
        0 40px 90px rgba(15, 23, 42, .18);

}

.services-cta-bg {

    position: absolute;

    inset: 0;

    overflow: hidden;

}

.services-cta-bg::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -120px;

    top: -120px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .05);

}

.services-cta-bg::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    left: -80px;

    bottom: -80px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .05);

}

.services-cta-content {

    position: relative;

    z-index: 2;

}

.services-cta-content span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    background: rgba(255, 255, 255, .12);

    border-radius: 50px;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 22px;

}

.services-cta-content h3 {

    color: #fff;

    font-size: 46px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 22px;

}

.services-cta-content p {

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

    max-width: 720px;

}

.services-cta-buttons {

    display: flex;

    flex-direction: column;

    gap: 18px;

    position: relative;

    z-index: 2;

}

.services-primary-btn,

.services-whatsapp-btn {

    height: 62px;

    border-radius: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-weight: 700;

    transition: .35s;

}

.services-primary-btn {

    background: #ffffff;

    color: #081C3A;

}

.services-primary-btn:hover {

    transform: translateY(-4px);

    color: #081C3A;

}

.services-whatsapp-btn {

    background: #25D366;

    color: #ffffff;

}

.services-whatsapp-btn:hover {

    color: #fff;

    transform: translateY(-4px);

}

.services-cta::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, .10);

    right: 150px;

    bottom: 40px;

    animation: pulseCircle 6s infinite;

}

@keyframes pulseCircle {

    0% {

        transform: scale(1);

        opacity: .4;

    }

    50% {

        transform: scale(1.25);

        opacity: .1;

    }

    100% {

        transform: scale(1);

        opacity: .4;

    }

}

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

@media(max-width:991px) {

    .services-cta {

        padding: 50px 35px;

        text-align: center;

    }

    .services-cta-content h3 {

        font-size: 34px;

    }

    .services-cta-buttons {

        margin-top: 40px;

    }

}

@media(max-width:767px) {

    .services-cta {

        padding: 35px 22px;

        border-radius: 24px;

    }

    .services-cta-content h3 {

        font-size: 28px;

    }

    .services-cta-content p {

        font-size: 15px;

    }

    .services-primary-btn,

    .services-whatsapp-btn {

        height: 56px;

        font-size: 15px;

    }

}

/*==================================================
            KNOWLEDGE HUB
==================================================*/

.blogs-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

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

    z-index: 1;

}

.blogs-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -320px;

    left: -250px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.blogs-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.blogs-section .container {

    position: relative;

    z-index: 5;

}

.blogs-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .18) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.blogs-heading {

    max-width: 900px;

    margin: auto;

    text-align: center;

    margin-bottom: 90px;

}

.blogs-heading .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 26px;

    border-radius: 60px;

    background: rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:
        0 20px 45px rgba(37, 99, 235, .08);

}

.blogs-heading h2 {

    font-size: 58px;

    font-weight: 800;

    color: #081C3A;

    line-height: 1.15;

    margin: 28px 0;

}

.blogs-heading h2 span {

    display: block;

    margin-top: 10px;

    background:
        linear-gradient(90deg,
            #2563EB,
            #1D4ED8,
            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.blogs-heading p {

    font-size: 18px;

    color: #64748B;

    line-height: 1.9;

}

/*==================================================
            FEATURED BLOG
==================================================*/

.featured-blog {

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    background: #ffffff;

    transition: .45s;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, .08);

}

.featured-blog:hover {

    transform: translateY(-12px);

    box-shadow:
        0 40px 90px rgba(37, 99, 235, .16);

}

.featured-image {

    position: relative;

    overflow: hidden;

    height: 420px;

}

.featured-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 1s;

}

.featured-blog:hover img {

    transform: scale(1.08);

}

.featured-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(transparent,

            rgba(8, 28, 58, .55));

}

.featured-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,

            rgba(37, 99, 235, .12),

            rgba(255, 122, 26, .08));

    opacity: 0;

    transition: .45s;

}

.featured-blog:hover .featured-image::after {

    opacity: 1;

}

.featured-image span {

    position: absolute;

    top: 25px;

    left: 25px;

    z-index: 3;

    padding: 12px 22px;

    border-radius: 40px;

    background:

        rgba(255, 255, 255, .92);

    backdrop-filter: blur(20px);

    color: #081C3A;

    font-weight: 700;

    font-size: 14px;

    transition: .35s;

}

.featured-blog:hover .featured-image span {

    background: #2563EB;

    color: #ffffff;

}

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

.featured-content {

    padding: 40px;

}

.featured-content h3 {

    font-size: 34px;

    font-weight: 800;

    line-height: 1.3;

    color: #081C3A;

    margin: 22px 0;

    transition: .35s;

}

.featured-blog:hover h3 {

    color: #2563EB;

}

.featured-content p {

    color: #64748B;

    font-size: 16px;

    line-height: 1.9;

}

.blog-meta {

    display: flex;

    align-items: center;

    gap: 15px;

}

.blog-meta span {

    padding: 10px 18px;

    border-radius: 30px;

    background: #EFF6FF;

    color: #2563EB;

    font-size: 13px;

    font-weight: 700;

}

.featured-content a {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    color: #2563EB;

    font-weight: 700;

    text-decoration: none;

    transition: .35s;

}

.featured-content a::after {

    content: "\f061";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    transition: .35s;

}

.featured-content a:hover {

    gap: 20px;

    color: #FF7A1A;

}

.featured-content a:hover::after {

    transform: translateX(6px);

}

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

@media(max-width:1199px) {

    .blogs-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .blogs-section {

        padding: 90px 0;

    }

    .blogs-heading h2 {

        font-size: 40px;

    }

    .featured-image {

        height: 360px;

    }

}

@media(max-width:767px) {

    .blogs-heading h2 {

        font-size: 32px;

    }

    .blogs-heading p {

        font-size: 16px;

    }

    .featured-image {

        height: 240px;

    }

    .featured-content {

        padding: 28px 22px;

    }

    .featured-content h3 {

        font-size: 24px;

    }

    .blog-meta {

        flex-wrap: wrap;

    }

}

/*==================================================
            BLOG SIDEBAR
==================================================*/

.blog-sidebar {

    display: flex;

    flex-direction: column;

    gap: 25px;

    height: 100%;

}

/*==================================================
            MINI BLOG
==================================================*/

.mini-blog {

    position: relative;

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 22px;

    overflow: hidden;

    border-radius: 24px;

    background:

        rgba(255, 255, 255, .88);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .55);

    transition: .45s cubic-bezier(.175, .885, .32, 1.2);

    box-shadow:

        0 20px 50px rgba(15, 23, 42, .06);

}

.mini-blog::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background:

        linear-gradient(180deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

}

.mini-blog::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

    top: -80px;

    right: -80px;

    transition: .45s;

}

.mini-blog:hover::after {

    transform: scale(1.4);

}

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

.mini-blog img {

    width: 125px;

    height: 110px;

    border-radius: 18px;

    object-fit: cover;

    transition: .5s;

    flex-shrink: 0;

}

.mini-blog:hover img {

    transform:

        scale(1.08) rotate(-2deg);

}

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

.mini-blog span {

    display: inline-block;

    padding: 8px 14px;

    border-radius: 30px;

    background: #EFF6FF;

    color: #2563EB;

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 14px;

}

.mini-blog h4 {

    font-size: 20px;

    font-weight: 700;

    line-height: 1.45;

    color: #081C3A;

    margin: 0;

    transition: .35s;

}

.mini-blog:hover {

    transform:

        translateX(10px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.mini-blog:hover h4 {

    color: #2563EB;

}

/*==================================================
            TOPICS
==================================================*/

.blog-topics {

    margin-top: 110px;

    text-align: center;

}

.blog-topics h3 {

    font-size: 40px;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 40px;

}

.topic-list {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 18px;

}

.topic-list a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 26px;

    border-radius: 60px;

    background: #ffffff;

    color: #081C3A;

    text-decoration: none;

    font-weight: 700;

    transition: .35s;

    box-shadow:

        0 15px 40px rgba(15, 23, 42, .06);

}

.topic-list a:hover {

    background:

        linear-gradient(135deg,

            #2563EB,

            #1D4ED8);

    color: #ffffff;

    transform:

        translateY(-6px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .22);

}

@keyframes topicFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-5px);

    }

    100% {

        transform: translateY(0);

    }

}

.topic-list a {

    animation: topicFloat 4s ease-in-out infinite;

}

.topic-list a:nth-child(2) {

    animation-delay: .2s;

}

.topic-list a:nth-child(3) {

    animation-delay: .4s;

}

.topic-list a:nth-child(4) {

    animation-delay: .6s;

}

.topic-list a:nth-child(5) {

    animation-delay: .8s;

}

.topic-list a:nth-child(6) {

    animation-delay: 1s;

}

.topic-list a:nth-child(7) {

    animation-delay: 1.2s;

}

.topic-list a:nth-child(8) {

    animation-delay: 1.4s;

}

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

@media(max-width:991px) {

    .blog-sidebar {

        margin-top: 45px;

    }

    .blog-topics {

        margin-top: 80px;

    }

    .blog-topics h3 {

        font-size: 32px;

    }

}

@media(max-width:767px) {

    .mini-blog {

        flex-direction: column;

        align-items: flex-start;

        padding: 20px;

    }

    .mini-blog img {

        width: 100%;

        height: 220px;

    }

    .mini-blog h4 {

        font-size: 18px;

    }

    .blog-topics {

        margin-top: 60px;

    }

    .blog-topics h3 {

        font-size: 28px;

    }

    .topic-list {

        gap: 12px;

    }

    .topic-list a {

        padding: 12px 18px;

        font-size: 14px;

    }

}
/*==================================================
            KNOWLEDGE CTA
==================================================*/

.knowledge-cta {

    position: relative;

    margin-top: 110px;

    padding: 70px;

    border-radius: 35px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    background:

        linear-gradient(135deg,

            #081C3A,

            #0F4C81,

            #2563EB);

    box-shadow:

        0 40px 100px rgba(15, 23, 42, .18);

}

/* Decorative Shapes */

.knowledge-cta::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    top: -220px;

    right: -180px;

    background:

        rgba(255, 255, 255, .05);

}

.knowledge-cta::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    left: -80px;

    bottom: -80px;

    background:

        rgba(255, 255, 255, .04);

}

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

.knowledge-content {

    position: relative;

    z-index: 2;

    flex: 1;

}

.knowledge-content span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 22px;

    margin-bottom: 22px;

    border-radius: 50px;

    background:

        rgba(255, 255, 255, .12);

    backdrop-filter: blur(12px);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

}

.knowledge-content h3 {

    color: #ffffff;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.25;

    margin-bottom: 20px;

}

.knowledge-content p {

    max-width: 700px;

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

    margin: 0;

}

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

.knowledge-btn {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 20px 40px;

    border-radius: 60px;

    overflow: hidden;

    background: #ffffff;

    color: #081C3A;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    transition: .4s cubic-bezier(.175, .885, .32, 1.15);

    box-shadow:

        0 20px 45px rgba(255, 255, 255, .20);

}

/* Shine Effect */

.knowledge-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .55),

            transparent);

    transform: skewX(-25deg);

    transition: .8s;

}

.knowledge-btn:hover::before {

    left: 150%;

}

.knowledge-btn i {

    transition: .35s;

}

.knowledge-btn:hover {

    color: #081C3A;

    transform:

        translateY(-6px);

    box-shadow:

        0 35px 80px rgba(255, 255, 255, .28);

}

.knowledge-btn:hover i {

    transform: translateX(8px);

}

/*==========================================
        FLOATING PARTICLES
==========================================*/

.knowledge-dot {

    position: absolute;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #FFD54A;

    opacity: .4;

    animation: knowledgeFloat 5s ease-in-out infinite;

}

.dot1 {

    top: 40px;

    right: 160px;

}

.dot2 {

    bottom: 80px;

    left: 120px;

}

.dot3 {

    top: 180px;

    right: 80px;

}

@keyframes knowledgeFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}