@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Poppins:wght@100..900&display=swap');
:root{
--maincolor:#000f72;
--main-dark:#00062a;
--secondary:#00bb18;
--secondary-light:#cdffd3;
--whatsappcolor:#25D366;
--primary-gradient:linear-gradient(135deg,#000f72 0%,#00062a 100%);
--brand-gradient:linear-gradient(135deg,#000f72 0%,#00062a 55%,#00bb18 100%);
--soft-gradient:linear-gradient(135deg,#eef2ff 0%,#eefdf0 100%);
--bodybg:#f5f7fb;
--cardbg:#ffffff;
--sidebarbg:#ffffff;
--headerbg:rgba(255,255,255,.82);
--headingcolor:#14142b;
--textcolor:#123;
--mutedtext:#7c8596;
--white:#ffffff;
--black:#000000;
--lightprimary:#f3ecff;
--lightsecondary:#fff2e8;
--success:#16a34a;
--danger:#ef4444;
--warning:#f59e0b;
--info:#0ea5e9;
--bordercolor:#dce3ff;
--space-5:5px;
--space-10:10px;
--space-15:15px;
--space-20:20px;
--space-25:25px;
--space-30:30px;
--space-35:35px;
--space-40:40px;
--space-45:45px;
--space-50:50px;
--radius-10:10px;
--radius-15:15px;
--radius-20:20px;
--radius-25:25px;
--section-space:100px;
--section-space-sm:70px;
--glass-dark:rgba(255,255,255,.05);
--glass-border:rgba(255,255,255,.08);
--shadow-sm:0 4px 14px rgba(0,15,114,.06);
--shadow:0 14px 40px rgba(0,15,114,.08);
--shadow-lg:0 22px 70px rgba(0,15,114,.12);
--shadow-hover:0 24px 70px rgba(0,15,114,.18);
--smallbr:12px;
--commonbr:18px;
--bigbr:26px;
--capsule:999px;
--smooth:all .28s ease;
--headingfont:'Montserrat',sans-serif;
--bodyfont:'Poppins',sans-serif;
--container-padding:22px;
--header-height:72px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background: var(--bodybg);

    color: var(--textcolor);

    font-family: var(--bodyfont);

    font-size: 14px;

    line-height: 1.6;

    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--smooth);
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--headingfont);

    color: var(--headingcolor);

    font-weight: 700;

    line-height: 1.3;
}

p {
    margin-bottom: 0;
}

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

.page-wrapper {
    padding:
        calc(var(--header-height) + 24px) var(--container-padding) 30px;
}

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

.cardUi,
.card {

    background: var(--cardbg);

    border: 1px solid var(--bordercolor);

    border-radius: var(--commonbr);

    box-shadow: var(--shadow-sm);
}

/* =========================================================
   UNIVERSAL BUTTON SYSTEM
========================================================= */

.btnBase,
.mainBtn,
.secondaryBtn,
.lightBtn,
.whatsappBtn,
.orangeBtn,
.successBtn,
.dangerBtn {

    height: 48px;

    padding: 0 22px;

    border: none;

    outline: none;

    border-radius: 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 14px;

    font-weight: 600;

    transition: var(--smooth);

    cursor: pointer;

    white-space: nowrap;
    color: var(--white);
    position: relative;

    overflow: hidden;
}

.btnBase i,
.mainBtn i,
.secondaryBtn i,
.lightBtn i,
.orangeBtn i,
.successBtn i,
.dangerBtn i {

    font-size: 18px;
}

.btnBase:hover,
.mainBtn:hover,
.secondaryBtn:hover,
.lightBtn:hover,
.orangeBtn:hover,
.successBtn:hover,
.dangerBtn:hover {

    transform: translateY(-2px);
}

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

.mainBtn {

    background: var(--maincolor);

    color: #fff;

    box-shadow:
        0 14px 30px rgba(91, 17, 255, .18);
}
.whatsappBtn {

    background: var(--whatsappcolor);

    color: #fff;

    box-shadow:
        0 14px 30px rgba(91, 17, 255, .18);
}
.whatsappBtn:hover {

    color: var(--whatsappcolor);
    transform: translateY(-2px);
background: var(--white);
}

.mainBtn:hover {

    color: #fff;

    box-shadow:
        0 22px 50px rgba(91, 17, 255, .28);
}


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

.rytWhatsappBtn {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: #25D366;

    color: #fff;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(37, 211, 102, .18);

    transition: var(--smooth);
}

.rytWhatsappBtn i {

    font-size: 24px;

    line-height: 1;
}

.rytWhatsappBtn:hover {

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px rgba(37, 211, 102, .28);
}

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

.rytCallBtn {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: #fff;

    color: var(--headingcolor);

    border: 1px solid var(--bordercolor);

    text-decoration: none;

    box-shadow: var(--shadow-sm);

    transition: var(--smooth);
}

.rytCallBtn i {

    font-size: 22px;

    line-height: 1;
}

.rytCallBtn:hover {

    color: var(--maincolor);

    border-color: rgba(91, 17, 255, .15);

    transform: translateY(-3px);

    box-shadow: var(--shadow);
}

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

@media(max-width:576px) {

    .rytWhatsappBtn,
    .rytCallBtn {

        width: 54px;

        height: 54px;
    }

    .rytWhatsappBtn i,
    .rytCallBtn i {

        font-size: 22px;
    }
}



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

.secondaryBtn {

    background: #fff;

    color: var(--secondary);

    border: 1px solid rgba(91, 17, 255, .12);
}

.secondaryBtn:hover {

    background: var(--lightprimary);

    color: var(--maincolor);
}

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

.lightBtn {

    background: var(--lightprimary);

    color: var(--maincolor);
}

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

.orangeBtn {

    background:
        linear-gradient(135deg,
            #ff7a1a,
            #ff6b00);

    color: #fff;
}

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

.successBtn {

    background: var(--success);

    color: #fff;
}

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

.dangerBtn {

    background: var(--danger);

    color: #fff;
}

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

.iconBtn {

    width: 46px;

    height: 46px;

    padding: 0;

    border-radius: 16px;
}

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

.capsuleBtn {
    border-radius: 999px;
}

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

.smBtn {

    height: 40px;

    padding: 0 16px;

    font-size: 13px;
}

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

.lgBtn {

    height: 50px;

    padding: 0 28px;

    font-size: 15px;
}

/* =========================================================
   INPUT SYSTEM
========================================================= */

.inputBox {
    position: relative;
}

.inputBox input,
.inputBox textarea,
.inputBox select {

    width: 100%;

    border: 1px solid var(--bordercolor);

    background: #fff;

    border-radius: 18px;

    min-height: 52px;

    padding: 14px 18px;

    transition: var(--smooth);

    outline: none;

    color: var(--headingcolor);

    font-size: 14px;
}

.inputBox textarea {

    min-height: 130px;

    resize: none;
}

.inputBox input:focus,
.inputBox textarea:focus,
.inputBox select:focus {

    border-color: var(--maincolor);

    box-shadow:
        0 0 0 4px rgba(122, 31, 255, .08);
}

.inputBox i {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--mutedtext);

    font-size: 18px;
}


/* =========================================================
   SERVICE SECTIONS
========================================================= */

.serviceSection {

    position: relative;

    padding: 100px 0;
}

.serviceSectionSm {

    padding: 80px 0;
}

.serviceSectionLg {

    padding: 130px 0;
}

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

.sectionHeader {

    margin-bottom: 60px;
}

.sectionHeader.center {

    text-align: center;

    max-width: 850px;

    margin:
        0 auto 60px;
}

.sectionTag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    height: 42px;

    padding: 0 18px;

    border-radius: 999px;

    background: var(--lightprimary);

    color: var(--maincolor);

    font-size: 13px;

    font-weight: 500;

    margin-bottom: 18px;
}

.sectionTag i {

    font-size: 16px;
}

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

.sectionTitle {

    font-size:
        clamp(34px,
            4vw,
            58px);

    line-height: 1.15;

    letter-spacing: -1px;

    margin-bottom: 18px;
}

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

.sectionDescription {

    font-size: 16px;

    line-height: 1.9;

    color: var(--textcolor);

    max-width: 750px;
}

.sectionHeader.center .sectionDescription {

    margin: auto;
}

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

.highLighted {

    background:
        linear-gradient(135deg,
            var(--maincolor),
            var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-weight: 700;
}

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

.serviceImageWrap {

    overflow: hidden;

    border-radius: var(--bigbr);

    border: 1px solid var(--bordercolor);

    background: #fff;

    box-shadow: var(--shadow-lg);
}

.serviceImageWrap img {

    width: 100%;

    display: block;

    transition: var(--smooth);
}

.serviceImageWrap:hover img {

    transform: scale(1.04);
}

/* =========================================================
   CAPSULE LIST
========================================================= */

.capsuleList {

    display: flex;

    flex-direction: column;

    gap: 14px;
}

.capsuleItem {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 72px;

    padding: 18px 20px;

    border-radius: var(--commonbr);

    background: #fff;

    border: 1px solid var(--bordercolor);

    box-shadow: var(--shadow-sm);

    transition: var(--smooth);
}

.capsuleItem:hover {

    transform: translateX(6px);

    border-color:
        rgba(91, 17, 255, .15);

    box-shadow: var(--shadow);
}

.capsuleIcon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: var(--lightprimary);
}

.capsuleIcon i {

    color: var(--maincolor);

    font-size: 18px;
}

.capsuleItem span {

    font-size: 15px;

    font-weight: 500;

    color: var(--headingcolor);
}

@media(max-width:991px) {

    .serviceSection {

        padding: 80px 0;
    }

    .sectionHeader {

        margin-bottom: 40px;
    }
}

@media(max-width:576px) {

    .sectionTitle {

        font-size: 34px;
    }

    .sectionDescription {

        font-size: 15px;
    }
}

.mainHeader{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    padding:18px 0;

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

    backdrop-filter:blur(20px);

    border-bottom:
    1px solid rgba(20,20,43,.05);
}

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

.headerInner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;
}

.headerCenter{

    display:flex;

    align-items:center;

    gap:28px;

    flex:1;

    justify-content:center;
}

.headerRight{

    display:flex;

    align-items:center;

    gap:14px;
}

/* =========================================================
   LOGO
========================================================= */

.headerLogo{

    flex-shrink:0;
}

.headerLogo img{

    height:48px;

    object-fit:contain;
}

/* =========================================================
   NAVIGATION
========================================================= */

.desktopNav ul{

    display:flex;

    align-items:center;

    gap:30px;
}

.desktopNav ul li a{

    font-size:14px;

    font-weight:500;

    color:var(--headingcolor);

    position:relative;
}

.desktopNav ul li a:hover{

    color:var(--maincolor);
}

/* =========================================================
   SEARCH
========================================================= */

.serviceSearch{

    position:relative;

    width:360px;
}

.serviceSearch input{

    width:100%;

    height:54px;

    border:none;

    outline:none;

    background:#fff;

    border-radius:18px;

    padding:
    0
    18px
    0
    52px;

    font-size:14px;

    border:
    1px solid rgba(20,20,43,.06);

    box-shadow:
    0 8px 24px rgba(20,20,43,.04);

    transition:var(--smooth);
}

.serviceSearch input:focus{

    border-color:
    rgba(91,17,255,.18);

    box-shadow:
    0 14px 40px rgba(91,17,255,.08);
}

.serviceSearch i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--mutedtext);

    font-size:18px;
}

/* =========================================================
   SEARCH RESULTS
========================================================= */

.searchResults{

    position:absolute;

    top:64px;

    left:0;

    width:100%;

    background:#fff;

    border-radius:20px;

    padding:14px;

    display:flex;

    flex-direction:column;

    gap:6px;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:var(--smooth);

    border:
    1px solid rgba(20,20,43,.06);

    box-shadow:
    0 24px 70px rgba(20,20,43,.08);
}

.serviceSearch:hover .searchResults,
.serviceSearch input:focus + .searchResults{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.searchResults a{

    padding:12px 14px;

    border-radius:14px;

    font-size:14px;

    font-weight:500;
}

.searchResults a:hover{

    background:var(--lightprimary);

    color:var(--maincolor);
}

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

.mobileMenuBtn{

    width:48px;

    height:48px;

    border:none;

    background:#fff;

    border-radius:16px;

    display:none;

    align-items:center;

    justify-content:center;

    font-size:22px;

    box-shadow:
    0 8px 24px rgba(20,20,43,.06);
}

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

.mobileMenu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:#fff;

    z-index:99999;

    padding:24px;

    transition:.4s ease;
}

.mobileMenu.active{

    right:0;
}

.mobileMenuHead{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;
}

.mobileMenuHead img{

    height:42px;
}

.closeMobileMenu{

    width:44px;

    height:44px;

    border:none;

    border-radius:14px;

    background:var(--lightprimary);

    font-size:22px;
}

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

.mobileSearch{

    position:relative;

    margin-bottom:24px;
}

.mobileSearch input{

    width:100%;

    height:52px;

    border:none;

    outline:none;

    background:var(--bodybg);

    border-radius:16px;

    padding:
    0
    16px
    0
    48px;
}

.mobileSearch i{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);
}

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

.mobileNav{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.mobileNav li a{

    display:flex;

    align-items:center;

    padding:16px 18px;

    border-radius:16px;

    background:#fff;

    border:
    1px solid rgba(20,20,43,.06);

    font-weight:500;
}

.mobileNav li a:hover{

    background:var(--lightprimary);

    color:var(--maincolor);
}

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

.mobileBtns{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:28px;
}

/* =========================================================
   OVERLAY
========================================================= */

.mobileOverlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:var(--smooth);
}

.mobileOverlay.active{

    opacity:1;

    visibility:visible;
}

/* =========================================================
   MODAL
========================================================= */

.customModal .modal-content{

    border:none;

    border-radius:28px;

    padding:18px;

    overflow:hidden;
}

.modal-body{

    padding:20px;
}

.modalClose{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border:none;

    background:var(--lightprimary);

    border-radius:14px;

    font-size:20px;
}

.modalHead{

    margin-bottom:28px;
}

.modalHead span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    background:var(--lightprimary);

    color:var(--maincolor);

    font-size:12px;

    font-weight:600;

    margin-bottom:16px;
}

.modalHead h3{

    font-size:32px;

    margin-bottom:12px;
}

.modalHead p{

    color:var(--mutedtext);

    line-height:1.7;
}

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

@media(max-width:1200px){

    .desktopNav{
        display:none;
    }

    .mobileMenuBtn{
        display:flex;
    }
}

@media(max-width:992px){

    .serviceSearch{
        display:none;
    }
}

@media(max-width:768px){

    .secondaryBtn{
        display:none;
    }

    .mainHeader{

        padding:14px 0;
    }

    .headerLogo img{

        height:42px;
    }
}

@media(max-width:576px){

    .mobileMenu{

        width:100%;
    }

    .modalHead h3{

        font-size:26px;
    }
}


.mainFooter{

    position:relative;

    padding:
    80px
    0
    30px;

    background:#0f0f1d;

    overflow:hidden;
}

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

.footerTop{

    display:grid;

    grid-template-columns:
    1fr
    1.1fr;

    gap:70px;

    padding-bottom:60px;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

/* =========================================================
   BRAND
========================================================= */

.footerBrand{

    max-width:460px;
}

.footerLogo{

    display:inline-block;

    margin-bottom:24px;
}

.footerLogo img {
    height: 52px;
    object-fit: contain;
    background: #fff;
    padding: 5px;
    border-radius: 12px;
    outline: 2px solid #fd5a05;
    outline-offset: 2px;
}
.footerBrand p{

    font-size:15px;

    line-height:1.9;

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

    margin-bottom:30px;
}

/* =========================================================
   SOCIALS
========================================================= */

.footerSocials{

    display:flex;

    align-items:center;

    gap:14px;
}

.footerSocials a{

    width:48px;

    height:48px;

    border-radius:16px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:20px;

    transition:var(--smooth);
}

.footerSocials a:hover{

    background:var(--maincolor);

    transform:translateY(-4px);
}

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

.footerLinksWrap{

    display:grid;

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

    gap:40px;
}

.footerColumn h4{

    font-size:20px;

    color:#fff;

    margin-bottom:24px;
}

.footerColumn ul{

    display:flex;

    flex-direction:column;

    gap:16px;
}

.footerColumn ul li a{

    font-size:14px;

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

    transition:var(--smooth);
}

.footerColumn ul li a:hover{

    color:#fff;

    padding-left:6px;
}

/* =========================================================
   NEWSLETTER
========================================================= */

.footerNewsletter{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:
    50px
    0;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

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

.footerNewsletterContent{

    max-width:560px;
}

.footerNewsletterContent h3{

    font-size:38px;

    line-height:1.15;

    letter-spacing:-1px;

    color:#fff;

    margin-bottom:16px;
}

.footerNewsletterContent p{

    font-size:15px;

    line-height:1.9;

    color:
    rgba(255,255,255,.65);
}

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

.footerNewsletterForm{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    max-width:520px;
}

.footerNewsletterForm input{

    flex:1;

    height:56px;

    border:none;

    outline:none;

    border-radius:18px;

    padding:
    0
    18px;

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

    color:#fff;

    font-size:14px;
}

.footerNewsletterForm input::placeholder{

    color:
    rgba(255,255,255,.45);
}

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

.footerBottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-top:28px;
}

.footerBottom p{

    font-size:14px;

    color:
    rgba(255,255,255,.5);
}

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

.footerBottomLinks{

    display:flex;

    align-items:center;

    gap:24px;
}

.footerBottomLinks a{

    font-size:14px;

    color:
    rgba(255,255,255,.5);
}

.footerBottomLinks a:hover{

    color:#fff;
}

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

@media(max-width:1200px){

    .footerTop{

        grid-template-columns:1fr;
    }

    .footerNewsletter{

        flex-direction:column;

        align-items:flex-start;
    }
}

@media(max-width:768px){

    .mainFooter{

        padding:
        60px
        0
        24px;
    }

    .footerLinksWrap{

        grid-template-columns:1fr;
    }

    .footerNewsletterContent h3{

        font-size:30px;
    }

    .footerNewsletterForm{

        flex-direction:column;

        align-items:stretch;
    }

    .footerNewsletterForm .mainBtn{

        width:100%;
    }

    .footerBottom{

        flex-direction:column;

        align-items:flex-start;
    }
}

@media(max-width:576px){

    .footerBottomLinks{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;
    }
}



/*=========================================================
PROBLEMS SECTION
=========================================================*/

.problemsSection{

    position: relative;

    padding: 110px 0;

    background: #fff;
}

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

.problemGrid{

    display: grid;

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

    gap: 24px;

    margin-top: 60px;
}

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

.problemCard{

    position: relative;

    background: #fff;

    border: 1px solid rgba(91,17,255,.08);

    border-radius: 26px;

    padding: 28px;

    overflow: hidden;

    transition: .35s;

    box-shadow: 0 10px 30px rgba(20,20,43,.04);

    height: 100%;
}
.problemLabel{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.problemCard:hover{

    transform: translateY(-8px);

    border-color: var(--maincolor);

    box-shadow: 0 24px 60px rgba(91,17,255,.12);
}

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

.problemIcon{

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--lightprimary);

    color: var(--maincolor);

    font-size: 30px;

    margin-bottom: 22px;

    transition: .35s;
}

.problemCard:hover .problemIcon{

    background: var(--maincolor);

    color: #fff;

    transform: rotate(-8deg);
}

/*=========================================================
LABEL
=========================================================*/

.problemLabel span{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 14px;

    border-radius: 50px;

    background: rgba(239,68,68,.08);

    color: #dc2626;

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 18px;
}

.problemLabel i{

    font-size: 15px;
}

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

.problemContent h3{

    font-size: 25px;

    line-height: 1.35;

    margin-bottom: 22px;
}

/*=========================================================
ARROW
=========================================================*/

.problemArrow{

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

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

    color: var(--maincolor);

    font-size: 22px;

    transition: .35s;
}

.problemCard:hover .problemArrow{

    transform: translateY(4px);

    background: var(--maincolor);

    color: #fff;
}

/*=========================================================
SOLUTION
=========================================================*/

.solutionBox{

    background: rgba(22,163,74,.06);

    border: 1px solid rgba(22,163,74,.12);

    border-radius: 18px;

    padding: 18px;
}

.solutionBox span{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #16a34a;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 10px;
}

.solutionBox h4{

    margin: 0;

    font-size: 20px;

    line-height: 1.45;

    color: var(--headingcolor);
}

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

.problemBottom{

    margin-top: 60px;
}

.problemBottomContent{

    display: flex;

    align-items: center;

    gap: 24px;

    padding: 30px 34px;

    border-radius: 24px;

    background: linear-gradient(135deg,#f8f6ff,#ffffff);

    border: 1px solid rgba(91,17,255,.08);

    box-shadow: 0 15px 45px rgba(91,17,255,.05);
}

.problemBottomContent>i{

    width: 72px;

    height: 72px;

    min-width: 72px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--maincolor);

    color: #fff;

    font-size: 32px;
}

.problemBottomContent h3{

    margin-bottom: 10px;

    font-size: 28px;
}

.problemBottomContent p{

    margin: 0;

    color: var(--textcolor);

    line-height: 1.8;
}

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

@media(max-width:1200px){

    .problemGrid{

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

}

@media(max-width:768px){

    .problemsSection{

        padding: 80px 0;
    }

    .problemGrid{

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .problemCard{

        padding: 22px;
    }

 

    .problemContent h3{

        font-size: 22px;
    }

    .solutionBox h4{

        font-size: 18px;
    }

    .problemBottomContent{

        flex-direction: column;

        text-align: center;

        padding: 28px;
    }

}

@media(max-width:576px){

    .problemBottomContent h3{

        font-size: 24px;
    }

    .problemBottomContent>i{

        width: 64px;

        height: 64px;

        min-width: 64px;

        font-size: 28px;
    }

}
img.imageStyle{
    border-radius: var(--smallbr);
    box-shadow: var(--shadow);

}