/*==========================================
GOOGLE FONT
==========================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

.hero-section{
    padding:90px 0;
    position:relative;
    overflow:hidden;
    background:
    radial-gradient(circle at top right,#fff9d8 0%,transparent 28%),
    radial-gradient(circle at bottom left,#eef5ff 0%,transparent 38%),
    #fff;
}

.hero-section::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-120px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:#fff7d7;
    filter:blur(120px);
    opacity:.8;
}

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

.hero-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    font-size:14px;
    margin-bottom:20px;
}

.hero-breadcrumb a{
    color:#777;
    text-decoration:none;
    transition:.3s;
}

.hero-breadcrumb a:hover{
    color:#000;
}

.hero-breadcrumb strong{
    color:#111;
    font-weight:600;
}

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

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:40px;
    background:#f5f7fb;
    color:#ff6b00;
    font-size:14px;
    font-weight:600;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
}

.hero-badge i{
    color:#ff8a00;
}

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

.hero-title{
    margin:24px 0 20px;
    font-size:54px;
    line-height:1.1;
    font-weight:700;
    color:#111;
}

.hero-title span{
    color:#ffbf00;
}

.hero-desc{
    max-width:560px;
    color:#666;
    line-height:30px;
    font-size:17px;
}

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

.hero-highlights{
    display:flex;
    gap:28px;
    flex-wrap:wrap;
    margin:35px 0;
}

.highlight-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:500;
    color:#333;
}

.highlight-item i{
    color:#1db954;
    font-size:18px;
}

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

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:10px;
}

.hero-btn{
    border-radius:14px;
    padding:15px 28px !important;
    font-weight:600;
    transition:.35s;
}

.btn-warning{
    background:#ffd400;
    border:none;
    color:#111;
}

.btn-warning:hover{
    background:#f7c600;
    transform:translateY(-4px);
}

.btn-outline-dark:hover{
    transform:translateY(-4px);
}

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

.hero-trust{
    margin-top:35px;
}

.trusted-text{
    display:inline-block;
    padding:12px 20px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    color:#555;
    font-weight:500;
}

.trusted-text strong{
    color:#111;
}

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

.hero-right{
    text-align:center;
    position:relative;
}

.hero-right img{
    max-width:100%;
    height:auto;
    animation:heroFloat 5s ease-in-out infinite;
    filter:drop-shadow(0 25px 45px rgba(0,0,0,.12));
}

/*==========================================
FEATURE BOX
==========================================*/

.feature-box{
    height:100%;
    background:#fff;
    border-radius:20px;
    padding:30px 25px;
    text-align:center;
    border:1px solid #f0f0f0;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.feature-box:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.feature-icon{
    width:72px;
    height:72px;
    margin:0 auto 20px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:18px;
    font-size:28px;
}

.feature-icon.green{
    background:#e9fff1;
    color:#00b050;
}

.feature-icon.yellow{
    background:#fff7dc;
    color:#ffb300;
}

.feature-icon.purple{
    background:#f4ebff;
    color:#8d44ff;
}

.feature-icon.blue{
    background:#eaf4ff;
    color:#2b6cff;
}

.feature-box h5{
    font-size:20px;
    font-weight:700;
    margin-bottom:12px;
}

.feature-box p{
    font-size:15px;
    color:#777;
    line-height:28px;
    margin-bottom:0;
}

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

@keyframes heroFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}


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

.service_list{
    max-width:100%;
    margin:0px auto 70px auto;
    padding:0;
    font-family:'Poppins',sans-serif;
}

/*========================
Paragraph
========================*/

.service_list p{
    font-size:17px;
    line-height:1.95;
    color:#4d5562;
    margin-bottom:22px;
}

/*========================
Heading 2
========================*/

.service_list h2{
    font-size:38px;
    font-weight:700;
    color:#101828;
    margin:70px 0 25px;
    line-height:1.25;
}

/*========================
Heading 3
========================*/

.service_list h3{

    position:relative;

    font-size:30px;
    font-weight:700;

    color:#111827;

    margin:65px 0 25px;

    padding-left:22px;

}

.service_list h3::before{

    content:"";

    position:absolute;

    left:0;
    top:6px;

    width:6px;
    height:36px;

    border-radius:20px;

    background:linear-gradient(180deg,#FFD400,#FF9900);

}

/*========================
Heading 4
========================*/

.service_list h4{
    font-size:24px;
    font-weight:600;
    margin:40px 0 18px;
    color:#1f2937;
}

/*========================
Links
========================*/

.service_list a{
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.service_list a:hover{
    color:#f4a000;
}

/*========================
List
========================*/

.service_list ul{

    margin:25px 0 35px;
    padding:0;

    list-style:none;

}

.service_list ul li{

    position:relative;

    margin-bottom:18px;

    padding:18px 20px 18px 60px;

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:16px;

    transition:.35s;

    box-shadow:
    0 6px 25px rgba(0,0,0,.04);

}

.service_list ul li:hover{

    transform:translateY(-4px);

    border-color:#FFD54A;

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

}

.service_list ul li::before{

    content:"✓";

    position:absolute;

    left:20px;
    top:18px;

    width:28px;
    height:28px;

    border-radius:50%;

    background:#FFF5CC;

    color:#F4A000;

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

    font-size:15px;
    font-weight:700;

}

.service_list li p{

    margin:0;

}

/*========================
Horizontal Line
========================*/

.service_list hr{

    border:none;

    height:1px;

    margin:60px 0;

    background:
    linear-gradient(
    to right,
    transparent,
    #FFD54A,
    transparent
    );

}

/*========================
Strong
========================*/

.service_list strong{
    color:#111827;
    font-weight:700;
}

/*========================
FAQ Style
========================*/

.service_list h3 strong{
    color:#111827;
}

.service_list p:first-child{
    margin-top:0;
}

/*========================
Selection
========================*/

.service_list ::selection{
    background:#FFD54A;
    color:#000;
}

/*========================
Scrollbar
========================*/

.service_list::-webkit-scrollbar{
    width:8px;
}

.service_list::-webkit-scrollbar-thumb{
    background:#FFD54A;
    border-radius:20px;
}

.service_list ul li{
    list-style: none;
}


/*=========================================
RECENT WORK
=========================================*/

#recent-portfolio{
    padding:90px 0;
    background:
    radial-gradient(circle at top left,#87b4f75c 0%,transparent 25%),
    radial-gradient(circle at bottom right,#eef6ff 0%,transparent 30%),
    #fafcff;
    overflow:hidden;
}

/*=========================
Heading
=========================*/

.service_head{
    max-width:760px;
    margin:auto;
}

.service_head h2{

    font-size:48px;
    font-weight:700;
    color:#111827;
    margin-bottom:18px;

}

.service_head p{

    color:#667085;
    font-size:17px;
    line-height:32px;

}

/*=========================
Portfolio Grid
=========================*/

#recent-portfolio ul{

    display:grid !important;

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

    gap:28px;

    list-style:none;

    margin:0;

}

#recent-portfolio ul li{
    width: 100% !important;
    padding: 0px !important;
}

#recent-portfolio ul li a{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

    padding:12px;

    border:1px solid #edf2f7;

    transition:.45s;

    box-shadow:
    0 10px 35px rgba(0,0,0,.06);

}

#recent-portfolio ul li a::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:2px;

    background:
    linear-gradient(
    135deg,
    #FFD400,
    #FFE98C,
    transparent,
    transparent
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

}

#recent-portfolio ul li img{

    width:100%;

    border-radius:18px;

    transition:.5s;

}

/*=========================
Hover
=========================*/

#recent-portfolio ul li a:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.14);

}

#recent-portfolio ul li a:hover::before{

    opacity:1;

}

#recent-portfolio ul li:hover img{

    transform:scale(1.06);

}

/*=========================
Overlay
=========================*/

#recent-portfolio ul li a::after{

    content:"View Project";

    position:absolute;

    left:50%;
    top:50%;

    transform:
    translate(-50%,-50%);

    background:#111827;

    color:#fff;

    padding:12px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    opacity:0;

    transition:.35s;

}

#recent-portfolio ul li:hover a::after{

    opacity:1;

}

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

.browse_service{

    margin-top:60px;

}

.browse_service a{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 34px;

    background:#FFD400;

    color:#111827;

    text-decoration:none;

    border-radius:60px;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 15px 40px rgba(255,212,0,.35);

}

.browse_service a:hover{

    transform:translateY(-6px);

    background:#f7c800;

    color:#111827;

}

.browse_service i{

    transition:.35s;

}

.browse_service a:hover i{

    transform:translateX(6px);

}

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

.why-gmb-section{
    padding:90px 0;
    /* background:
    radial-gradient(circle at top right,#fff8d8 0%,transparent 25%),
    radial-gradient(circle at bottom left,#eef5ff 0%,transparent 30%),
    #ffffff; */
    position:relative;
    overflow:hidden;
}

/*==============================
Section Heading
==============================*/

.section-badge{

    display:inline-block;

    padding:8px 18px;

    background:#fff8e2;

    color:#f5a300;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

}

.section-title{

    font-size:44px;

    font-weight:700;

    color:#101828;

    line-height:1.25;

}

.section-desc{

    max-width:700px;

    margin:18px auto 0;

    font-size:17px;

    color:#667085;

    line-height:30px;

}


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

.why-card{

    background:#fff;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    border:1px solid #edf2f7;

    transition:.4s;

    height:100%;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.10);

}

.why-icon{

    width:82px;

    height:82px;

    margin:auto;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:25px;

    transition:.35s;

}

.why-card:hover .why-icon{

    transform:rotate(-8deg) scale(1.08);

}

.why-card h5{

    font-size:21px;

    font-weight:700;

    color:#111827;

    margin-bottom:14px;

}

.why-card p{

    color:#667085;

    font-size:15px;

    line-height:28px;

    margin:0;

}


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

.green{

    background:#ebfff2;

    color:#1db954;

}

.yellow{

    background:#fff8dc;

    color:#f6b000;

}

.purple{

    background:#f4ebff;

    color:#8d44ff;

}

.blue{

    background:#ebf4ff;

    color:#2d7ef7;

}

.red{

    background:#ffe8ef;

    color:#ff4d6d;

}


/*=========================================
PROCESS
=========================================*/

.process-wrapper{

    margin-top:70px;

    position:relative;

}

.process-item{

    text-align:center;

    position:relative;

    padding:0 15px;

}

.process-circle{

    width:74px;

    height:74px;

    border-radius:50%;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    font-weight:700;

    background:#fff;

    border:3px solid;

    position:relative;

    z-index:2;

    transition:.4s;

}

.process-item:hover .process-circle{

    transform:scale(1.08);

}

.process-circle.green{

    border-color:#2ecc71;

    color:#2ecc71;

}

.process-circle.yellow{

    border-color:#f6b000;

    color:#f6b000;

}

.process-circle.purple{

    border-color:#9b59b6;

    color:#9b59b6;

}

.process-circle.blue{

    border-color:#2d7ef7;

    color:#2d7ef7;

}

.process-circle.red{

    border-color:#ff5a7a;

    color:#ff5a7a;

}


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

.process-line{

    position:absolute;

    top:36px;

    left:65%;

    width:100%;

    border-top:2px dashed #d8dce5;

    z-index:1;

}

.process-item:last-child .process-line{

    display:none;

}


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

.process-item h5{

    margin-top:24px;

    font-size:21px;

    font-weight:700;

    color:#111827;

}

.process-item p{

    margin-top:12px;

    color:#667085;

    font-size:15px;

    line-height:28px;

}


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

.process-item:hover h5{

    color:#000;

}

.process-item:hover{

    transform:translateY(-6px);

}

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

.gmb-faq-section{
    padding:90px 0;
    position:relative;
    overflow:hidden;
}


/*==========================
Heading
==========================*/

.faq-badge{

    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    border-radius:50px;

    background:#FFF8DF;

    color:#F5A300;

    font-size:14px;

    font-weight:600;

    box-shadow:0 8px 20px rgba(245,163,0,.12);

}

.faq-title{

    font-size:36px;

    font-weight:700;

    color:#101828;

    line-height:1.2;

}

.faq-title span{

    color:#009093;

}

.faq-desc{

    max-width:760px;

    margin:auto;

    font-size:17px;

    color:#667085;

    line-height:31px;

}

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

.faq-left-card{

    position:sticky;
    top:100px;

    background:#fff;

    border-radius:26px;

    padding:40px;

    border:1px solid #ececec;

    overflow:hidden;

    box-shadow:
    0 20px 55px rgba(0,0,0,.08);

}

.faq-left-card::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    background:#FFF6CC;

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

    filter:blur(40px);

}

.mini-badge{

    display:inline-block;

    padding:8px 15px;

    border-radius:40px;

    background:#fff7dc;

    color:#F4A000;

    font-size:13px;

    font-weight:600;

}

.faq-left-card h3{

    margin:20px 0;

    font-size:28px;

    font-weight:700;

    line-height:1.25;

    color:#101828;

}

.faq-left-card p{

    color:#667085;

    line-height:30px;

    margin-bottom:25px;

}

.faq-left-card ul{

    padding:0;

    list-style:none;

    margin-bottom:30px;

}

.faq-left-card ul li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    color:#344054;

    font-size:15px;

}

.faq-left-card ul li i{

    color:#19B65A;

    font-size:18px;

}

.faq-counter{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin:30px 0;

}

.faq-counter div{

    flex:1;

    text-align:center;

    background:#F8FAFC;

    border-radius:16px;

    padding:18px;

}

.faq-counter h4{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#111827;

}

.faq-counter span{

    font-size:14px;

    color:#667085;

}

.faq-btn{

    width:100%;

    border-radius:14px;

    padding:15px;

    font-weight:600;

    background:#FFD400;

    border:none;

    color:#111;

    transition:.35s;

}

.faq-btn:hover{

    background:#F7C500;

    transform:translateY(-4px);

}

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

.custom-faq .accordion-item{

    border:none;

    border-radius:18px !important;

    overflow:hidden;

    margin-bottom:18px;

    background:#fff;

    box-shadow:
    0 12px 30px rgba(0,0,0,.05);

    border:1px solid #EDF2F7;

}

.custom-faq .accordion-button{

    background:#fff;

    font-size:17px;

    font-weight:600;

    color:#101828;

    padding:22px 25px;

    box-shadow:none;

}

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

    background:#FFFBEA;

    color:#111;

}

.custom-faq .accordion-button:focus{

    box-shadow:none;

}

.custom-faq .accordion-body{

    padding:22px 25px;

    color:#667085;

    line-height:30px;

    font-size:16px;

}

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

    background-image:none;

    content:"+";

    font-size:24px;

    font-weight:600;

    color:#F4A000;

    width:auto;

    height:auto;

    transform:none;

}

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

    content:"−";

}

/*================================
Hover
================================*/

.custom-faq .accordion-item:hover{

    transform:translateY(-3px);

    transition:.35s;

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

}

/*================================
Responsive
================================*/

@media(max-width:991px){

.faq-left-card{

    position:relative;

    top:auto;

}

.faq-title{

    font-size:36px;

}

}

@media(max-width:767px){

.gmb-faq-section{

    padding:70px 0;

}

.faq-title{

    font-size:30px;

}

.faq-left-card{

    padding:28px;

}

.faq-left-card h3{

    font-size:28px;

}

.faq-counter{

    flex-direction:column;

}

.custom-faq .accordion-button{

    font-size:16px;

    padding:18px;

}

.custom-faq .accordion-body{

    padding:18px;

    font-size:15px;

    line-height:28px;

}

}

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

@media(max-width:991px){

.section-title{

    font-size:36px;

}

.process-line{

    display:none;

}

.process-item{

    margin-bottom:40px;

}

}

@media(max-width:767px){

.why-gmb-section{

    padding:70px 0;

}

.section-title{

    font-size:30px;

}

.section-desc{

    font-size:16px;

    line-height:28px;

}

.why-card{

    padding:28px 20px;

}

.why-icon{

    width:70px;

    height:70px;

    font-size:28px;

}

.process-circle{

    width:64px;

    height:64px;

    font-size:18px;

}

.process-item h5{

    font-size:18px;

}

.process-item p{

    font-size:14px;

}

}

/*=========================
Responsive
=========================*/

@media(max-width:991px){

.service_head h2{

    font-size:38px;

}

#recent-portfolio ul{

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

}

}

@media(max-width:767px){

.service_head h2{

    font-size:30px;

}

.service_head p{

    font-size:16px;

    line-height:28px;

}

#recent-portfolio ul{

    grid-template-columns:1fr;

    gap:20px;

}

.browse_service a{

    width:100%;

    justify-content:center;

}

}

/*========================
Responsive
========================*/

@media(max-width:991px){

.service_list h2{
    font-size:32px;
}

.service_list h3{
    font-size:26px;
}

.service_list p{
    font-size:16px;
}

}

@media(max-width:767px){

.service_list{

    margin:40px auto;

}

.service_list h2{

    font-size:28px;

}

.service_list h3{

    font-size:22px;

    padding-left:18px;

}

.service_list h3::before{

    height:28px;

}

.service_list ul li{

    padding:16px 15px 16px 52px;

}

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

@media(max-width:991px){

.hero-section{
    padding:70px 0;
}

.hero-title{
    font-size:42px;
}

.hero-right{
    margin-top:40px;
}

.hero-highlights{
    gap:18px;
}

}

@media(max-width:767px){

.hero-title{
    font-size:34px;
}

.hero-buttons{
    flex-direction:column;
}

.hero-btn{
    width:100%;
}

.hero-highlights{
    flex-direction:column;
    gap:14px;
}

.hero-trust{
    text-align:center;
}

.hero-right img{
    max-width:90%;
}

.feature-box{
    padding:25px;
}

}