/*==================================================
        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;

}