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

.main-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    background:#ffffff;

    border-bottom:1px solid #ececec;

    transition:.35s;

}
.main-header.sticky{

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

}

.logo{

    height:72px;

}

.navbar{

    padding:5px 0;

}

.navbar-nav{

    gap:10px;

}

.nav-link{

    color:#222;

    font-weight:600;

    font-size:15px;

    padding:12px 18px !important;

    transition:.3s;

}

.nav-link:hover,

.nav-link.active{

    color:#000;

}

.dropdown-menu{

    border:none;

    border-radius:16px;

    padding:15px;

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

}

.dropdown-item{

    padding:12px 18px;

    border-radius:8px;

    font-size:15px;

}

.dropdown-item:hover{

    background:#f5f5f5;

}

.btn-dark{

    border-radius:40px;

    padding:14px 26px;

}


.btn-outline-dark{
    line-height: 40px;
}


.menu-toggle{

    width:48px;

    height:48px;

    border:none;

    background:#111;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

}

.menu-toggle span{

    width:22px;

    height:2px;

    background:#fff;

    display:block;

    transition:.3s;

}

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

.sidebar-overlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    z-index:9998;

}

.mobile-sidebar{

    position:fixed;

    top:0;

    right:-360px;

    width:340px;

    max-width:100%;

    height:100vh;

    background:#ffffff;

    z-index:9999;

    display:flex;

    flex-direction:column;

    transition:.35s ease;

    box-shadow:-20px 0 60px rgba(0,0,0,.15);

}

.mobile-sidebar.show{

    right:0;

}

.sidebar-header{

    padding:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #ececec;

}

.sidebar-logo img{

    height:45px;

}

.close-sidebar{

    width:45px;

    height:45px;

    border:none;

    background:#111;

    color:#fff;

    border-radius:10px;

}

.sidebar-body{

    padding:30px;

    flex:1;

    overflow-y:auto;

}

.sidebar-menu{

    margin:0;

    padding:0;

    list-style:none;

}

.sidebar-menu li{

    margin-bottom:8px;

}

.sidebar-menu a{

    display:block;

    padding:14px 0;

    color:#222;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    border-bottom:1px solid #f3f3f3;

    transition:.3s;

}

.sidebar-menu a:hover{

    padding-left:12px;

}

.sidebar-divider{

    margin:30px 0;

    border-top:1px solid #e5e5e5;

}

.sidebar-contact h6{

    font-weight:700;

    margin-bottom:15px;

}

.sidebar-contact p{

    color:#666;

    line-height:1.8;

}

.sidebar-contact ul{

    list-style:none;

    padding:0;

    margin-top:20px;

}

.sidebar-contact li{

    display:flex;

    gap:12px;

    margin-bottom:18px;

    color:#444;

    align-items:flex-start;

}

.sidebar-contact a{

    color:#222;

    text-decoration:none;

}

.sidebar-buttons{

    margin-top:35px;

}

.sidebar-footer{

    padding:20px;

    border-top:1px solid #ececec;

    text-align:center;

}

.social-icons{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-bottom:15px;

}

.social-icons a{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#111;

    color:#fff;

    border-radius:50%;

    transition:.3s;

}

.social-icons a:hover{

    transform:translateY(-3px);

}

@media(max-width:575px){

    .mobile-sidebar{

        width:100%;

    }

}

/*=====================================
Hero Section
======================================*/

.hero-section{

    padding-top:5px;

    padding-bottom:20px;

    background:#ffffff;

    overflow:hidden;

}

.hero-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #4a4848;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;

}

.hero-content h1{

    font-size:52px;

    font-weight:800;

    line-height:1.1;

    color:#111;

    margin-bottom:25px;

}

.hero-content h1 span{

    color:#555;

}

.hero-content p{

    font-size:18px;

    color:#666;

    line-height:1.8;

    max-width:600px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-stats{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.stat-card{

    background:#fff;

    border:1px solid #eee;

    border-radius:18px;

    padding:22px;

    min-width:160px;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.stat-card h3{

    font-size:34px;

    font-weight:800;

    margin-bottom:8px;

}

.stat-card p{

    margin:0;

    color:#777;

    font-size:15px;

}

.hero-image{

    position:relative;

    text-align:center;

}

.hero-image img{

    max-width:100%;

}

.floating-card{

    position:absolute;

    background:#fff;

    border-radius:15px;

    padding:14px 18px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    font-weight:600;

    border:1px solid #eee;

}

.floating-card i{

    margin-right:8px;

}

.card-one{

    left:0;

    top:15%;

}

.card-two{

    right:0;

    top:45%;

}

.card-three{

    left:12%;

    bottom:8%;

}

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

.trust-section{

    padding:90px 0;

    background:#f9f9f9;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.trust-left h2{

    font-size:42px;

    font-weight:800;

    margin-bottom:20px;

}

.trust-left p{

    color:#666;

    line-height:1.8;

}

.trust-box{

    background:#fff;

    padding:35px;

    border-radius:18px;

    text-align:center;

    border:1px solid #ececec;

    transition:.35s;

}

.trust-box:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.trust-box h3{

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;

}

.trust-box span{

    color:#777;

    font-size:15px;

}

.tech-carousel{

    margin-top:30px;

}

.tech-item{

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    border-radius:16px;

    border:1px solid #ececec;

    transition:.35s;

}

.tech-item:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.tech-item img{

    width:70px;

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

    opacity:.75;

    transition:.35s;
    padding:25px;

}

.tech-item:hover img{

    filter:grayscale(0);

    opacity:1;

}

/*=============================
EXPERTISE
=============================*/

.expertise-section{

    background:#fff;

    padding:100px 0;

}

.section-badge{

    background:#111;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    letter-spacing:1px;

}

.section-title{

    font-size:48px;

    font-weight:800;

}

.section-description{

    color:#666;

    max-width:650px;

    margin:auto;

    line-height:1.8;

}

.expert-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

    height:100%;

}

.expert-card:hover{

    transform:translateY(-12px);

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

}

.expert-icon{

    width:90px;

    height:90px;

    margin:auto;

    background:#f6f6f6;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    margin-bottom:25px;

}

.expert-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.expert-card p{

    color:#666;

    line-height:1.8;

}

/*=============================
TECH TICKER
=============================*/

.technology-strip{

    background:#111;

    color:#fff;

    overflow:hidden;

    padding:18px 0;

}

.ticker{

    overflow:hidden;

    white-space:nowrap;

}

.ticker-track{

    display:inline-flex;

    animation:ticker 30s linear infinite;

}

.ticker-track span{

    margin:0 40px;

    font-size:18px;

    font-weight:600;

    letter-spacing:1px;

}

@keyframes ticker{

    0%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(-50%);

    }

}

/*=====================================
ABOUT
======================================*/

.about-section{

padding:120px 0;

background:#fff;

}

.about-image{

position:relative;

text-align:center;

}

.about-image img{

max-width:100%;

}

.experience-box{

position:absolute;

bottom:40px;

right:-20px;

background:#111;

color:#fff;

padding:25px;

border-radius:20px;

width:180px;

text-align:center;

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.experience-box h2{

font-size:52px;

font-weight:800;

margin-bottom:5px;

}

.experience-box span{

font-size:15px;

line-height:1.5;

display:block;

}

.about-content h2{

font-size:48px;

font-weight:800;

margin:25px 0;

line-height:1.2;

}

.about-content p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:20px;

}

.about-features{

display:grid;

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

gap:20px;

margin-top:35px;

}

.feature-item{

display:flex;

align-items:center;

font-weight:600;

font-size:16px;

}

.feature-item i{

font-size:20px;

margin-right:12px;

color:#111;

}

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

.why-section{

padding:120px 0;

background:#f8f8f8;

}

.why-card{

background:#fff;

padding:50px 35px;

border-radius:20px;

text-align:center;

transition:.35s;

height:100%;

border:1px solid #ececec;

}

.why-card:hover{

transform:translateY(-12px);

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

}

.why-card i{

font-size:50px;

margin-bottom:25px;

}

.why-card h4{

font-size:26px;

font-weight:700;

margin-bottom:15px;

}

.why-card p{

color:#666;

line-height:1.8;

}

/*=====================================
SERVICES SECTION
======================================*/

.services-section{

    padding:120px 0;

    background:#ffffff;

}

.service-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:40px 30px;

    height:100%;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.service-card:hover{

    transform:translateY(-10px);

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

}

.service-icon{

    width:80px;

    height:80px;

    border-radius:20px;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:25px;

    transition:.35s;

}

.service-card:hover .service-icon{

    background:#111;

    color:#fff;

}

.service-card h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

}

.service-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.service-card a{

    text-decoration:none;

    color:#111;

    font-weight:700;

    transition:.3s;

}

.service-card a i{

    margin-left:8px;

    transition:.3s;

}

.service-card:hover a i{

    margin-left:14px;

}

/*=====================================
PORTFOLIO
======================================*/

.portfolio-section{

padding:120px 0;

background:#f8f8f8;

}

.portfolio-filter{

margin-bottom:50px;

}

.portfolio-filter button{

border:none;

background:#fff;

padding:12px 28px;

margin:5px;

border-radius:40px;

font-weight:600;

transition:.35s;

border:1px solid #e5e5e5;

}

.portfolio-filter button.active,

.portfolio-filter button:hover{

background:#111;

color:#fff;

}

.portfolio-card{

position:relative;

overflow:hidden;

border-radius:22px;

}

.portfolio-card img{

width:100%;

height:320px;

object-fit:cover;

transition:.5s;

}

.portfolio-overlay{

position:absolute;

left:0;

right:0;

bottom:-100%;

background:rgba(17,17,17,.94);

padding:30px;

color:#fff;

transition:.4s;

}

.portfolio-card:hover img{

transform:scale(1.08);

}

.portfolio-card:hover .portfolio-overlay{

bottom:0;

}

.portfolio-overlay span{

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

opacity:.8;

}

.portfolio-overlay h4{

margin:15px 0;

font-weight:700;

}

.portfolio-overlay a{

color:#fff;

text-decoration:none;

font-weight:600;

}

.portfolio-cta{

margin-top:70px;

}

/*=====================================
TESTIMONIALS
======================================*/

.testimonial-section{

padding:120px 0;

background:#fff;

}

.review-score h2{

font-size:64px;

font-weight:800;

margin-bottom:10px;

}

.stars{

color:#111;

font-size:20px;

margin-bottom:10px;

}

.testimonial-card{

background:#f8f8f8;

border-radius:20px;

padding:35px;

border:1px solid #ececec;

height:100%;

}

.client-info{

display:flex;

align-items:center;

margin-bottom:25px;

}

.client-info img{

width:70px;

height:70px;

border-radius:50%;

margin-right:18px;

object-fit:cover;

}

.client-info h5{

margin-bottom:5px;

font-weight:700;

}

.testimonial-card p{

color:#666;

line-height:1.9;

}

.success-box{

background:#111;

color:#fff;

padding:35px;

text-align:center;

border-radius:18px;

}

.success-box h2{

font-size:44px;

font-weight:800;

margin-bottom:10px;

}

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

.client-logo-section{

padding:70px 0;

background:#f8f8f8;

}

.client-logo{

height:120px;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

border-radius:18px;

border:1px solid #ececec;

}

.client-logo img{

max-width:140px;

filter:grayscale(100%);

opacity:.75;

transition:.3s;

}

.client-logo:hover img{

filter:none;

opacity:1;

}

.process-section{

padding:120px 0;

background:#fff;

}

.process-card{

text-align:center;

padding:35px 20px;

border:1px solid #ececec;

border-radius:20px;

transition:.35s;

background:#fff;

height:100%;

}

.process-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.process-number{

font-size:14px;

font-weight:700;

color:#999;

margin-bottom:15px;

}

.process-card i{

font-size:42px;

margin-bottom:20px;

}

.process-card h5{

font-weight:700;

}

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

.footer{

background:#111;

color:#fff;

padding-top:100px;

}

.footer-logo{

height:50px;

}

.footer p{

color:#bbb;

line-height:1.8;

}

.footer h5{

margin-bottom:25px;

font-weight:700;

}

.footer ul{

list-style:none;

padding:0;

}

.footer ul li{

margin-bottom:14px;

}

.footer ul li a{

color:#bbb;

text-decoration:none;

transition:.3s;

}

.footer ul li a:hover{

color:#fff;

padding-left:6px;

}

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:42px;

height:42px;

background:#222;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

color:#fff;

text-decoration: none;

}

.footer-contact i{

margin-right:12px;

}

.newsletter-form .form-control{

height:55px;

}

.newsletter-form .btn{

padding:0 30px;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 0;

flex-wrap:wrap;

}

.footer-bottom p{

margin:0;

}

.footer-bottom a{

color:#bbb;

margin-left:20px;

text-decoration:none;

}

/*=====================================
MAP
======================================*/

.map-section iframe{

width:100%;

height:450px;

border:0;

}

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

.whatsapp-float{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

color:#fff;

z-index:999;

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

text-decoration: none;

}

.call-float{

display:none;

}

@media(max-width:768px){

.call-float{

display:flex;

position:fixed;

left:20px;

bottom:25px;

width:60px;

height:60px;

background:#111;

color:#fff;

border-radius:50%;

justify-content:center;

align-items:center;

font-size:24px;

z-index:999;

}

.footer-bottom{

text-align:center;

justify-content:center;

gap:15px;

}

}

/*=====================================
INDUSTRY SECTION
======================================*/

.industry-section{
    padding:120px 0;
    background:#f8f8f8;
}

.industry-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:20px;
    padding:40px 25px;
    text-align:center;
    transition:all .35s ease;
    height:100%;
    cursor:pointer;
}

.industry-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.industry-card i{
    width:80px;
    height:80px;
    line-height:80px;
    font-size:32px;
    background:#f5f5f5;
    border-radius:50%;
    margin-bottom:25px;
    transition:.35s;
}

.industry-card:hover i{
    background:#111;
    color:#fff;
}

.industry-card h5{
    font-size:22px;
    font-weight:700;
    margin-bottom:0;
    color:#111;
}

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

.faq-section{
    padding:120px 0;
    background:#fff;
}

.faq-section .accordion-item{
    border:none;
    margin-bottom:20px;
    border-radius:18px !important;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.faq-section .accordion-button{
    background:#fff;
    font-size:18px;
    font-weight:600;
    padding:22px 25px;
    color:#111;
    box-shadow:none;
}

.faq-section .accordion-button:not(.collapsed){
    background:#111;
    color:#fff;
}

.faq-section .accordion-button:focus{
    box-shadow:none;
    border:none;
}

.faq-section .accordion-button::after{
    filter:grayscale(100%);
}

.faq-section .accordion-body{
    padding:25px;
    color:#666;
    line-height:1.9;
    font-size:16px;
}


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

.cta-section{
    padding:100px 0;
    background:#403f3f;
}

.cta-box{
    max-width:900px;
    margin:auto;
    text-align:center;
    color:#fff;
}

.cta-box h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:20px;
}

.cta-box p{
    font-size:18px;
    color:#ddd;
    line-height:1.8;
    max-width:700px;
    margin:auto;
}

.cta-box .btn{
    min-width:200px;
    border-radius:50px;
}

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

.contact-section{
    padding:120px 0;
    background:#f8f8f8;
}

.contact-section h2{
    font-size:46px;
    font-weight:800;
    margin-bottom:25px;
    color:#111;
}

.contact-section p{
    color:#666;
    line-height:1.8;
    margin-bottom:35px;
}

.contact-list{
    list-style:none;
    padding:0;
    margin:0;
}

.contact-list li{
    display:flex;
    align-items:center;
    margin-bottom:25px;
    font-size:17px;
    font-weight:500;
    color:#444;
}

.contact-list li i{
    width:55px;
    height:55px;
    background:#111;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:20px;
    font-size:20px;
}

.contact-section form{
    background:#fff;
    padding:45px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.contact-section .form-control{
    height:58px;
    border-radius:12px;
    border:1px solid #ddd;
    padding:15px 18px;
    font-size:15px;
    transition:.3s;
}

.contact-section textarea.form-control{
    height:180px;
    resize:none;
}

.contact-section .form-control:focus{
    border-color:#111;
    box-shadow:none;
}

.contact-section .btn{
    padding:15px 40px;
    border-radius:50px;
    font-weight:600;
}





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

.footer{

background:#111;

color:#fff;

padding-top:100px;

}

.footer-logo{

height:50px;

}

.footer p{

color:#bbb;

line-height:1.8;

}

.footer h5{

margin-bottom:25px;

font-weight:700;

}

.footer ul{

list-style:none;

padding:0;

}

.footer ul li{

margin-bottom:14px;

}

.footer ul li a{

color:#bbb;

text-decoration:none;

transition:.3s;

}

.footer ul li a:hover{

color:#fff;

padding-left:6px;

}

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:42px;

height:42px;

background:#222;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

color:#fff;

}

.footer-contact i{

margin-right:12px;

}

.newsletter-form .form-control{

height:55px;

}

.newsletter-form .btn{

padding:0 30px;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 0;

flex-wrap:wrap;

}

.footer-bottom p{

margin:0;

}

.footer-bottom a{

color:#bbb;

margin-left:20px;

text-decoration:none;

}

/*=====================================
MAP
======================================*/

.map-section iframe{

width:100%;

height:450px;

border:0;

}

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

.whatsapp-float{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

color:#fff;

z-index:999;

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

}

.call-float{

display:none;

}

@media(max-width:768px){

.call-float{

display:flex;

position:fixed;

left:20px;

bottom:25px;

width:60px;

height:60px;

background:#111;

color:#fff;

border-radius:50%;

justify-content:center;

align-items:center;

font-size:24px;

z-index:999;

}

.footer-bottom{

text-align:center;

justify-content:center;

gap:15px;

}

}

        /*=====================================
        CONTACT PAGE HERO
        =====================================*/

        .contact-page-hero {

            padding: 170px 0 100px;

            background: #f8f8f8;

            position: relative;

            overflow: hidden;

        }

        .contact-page-hero h1 {

            font-size: 58px;

            font-weight: 800;

            line-height: 1.12;

            color: #111;

            margin-bottom: 22px;

        }

        .contact-page-hero h1 span {

            color: #666;

        }

        .contact-page-hero p {

            max-width: 650px;

            font-size: 18px;

            color: #666;

            line-height: 1.8;

            margin-bottom: 0;

        }

        .contact-hero-card {

            background: #111;

            color: #fff;

            border-radius: 25px;

            padding: 40px;

            height: 100%;

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

        }

        .contact-hero-card h3 {

            font-size: 30px;

            font-weight: 700;

            margin-bottom: 15px;

        }

        .contact-hero-card p {

            color: #ccc;

            font-size: 15px;

            line-height: 1.8;

            margin-bottom: 25px;

        }

        .hero-contact-item {

            display: flex;

            align-items: center;

            gap: 15px;

            margin-bottom: 18px;

        }

        .hero-contact-item i {

            width: 45px;

            height: 45px;

            border-radius: 50%;

            background: #fff;

            color: #111;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

        }

        .hero-contact-item a {

            color: #fff;

            text-decoration: none;

        }


        /*=====================================
        CONTACT INFO CARDS
        =====================================*/

        .contact-info-section {

            padding: 100px 0;

            background: #fff;

        }

        .contact-info-card {

            background: #fff;

            border: 1px solid #ececec;

            border-radius: 20px;

            padding: 35px 25px;

            height: 100%;

            text-align: center;

            transition: .35s;

        }

        .contact-info-card:hover {

            transform: translateY(-10px);

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

        }

        .contact-info-icon {

            width: 75px;

            height: 75px;

            background: #f5f5f5;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 22px;

            font-size: 28px;

            color: #111;

            transition: .35s;

        }

        .contact-info-card:hover .contact-info-icon {

            background: #111;

            color: #fff;

        }

        .contact-info-card h4 {

            font-size: 21px;

            font-weight: 700;

            margin-bottom: 12px;

        }

        .contact-info-card p {

            color: #666;

            line-height: 1.8;

            margin-bottom: 10px;

        }

        .contact-info-card a {

            color: #111;

            font-weight: 600;

            text-decoration: none;

        }


        /*=====================================
        MAIN CONTACT AREA
        =====================================*/

        .contact-main-section {

            padding: 120px 0;

            background: #f8f8f8;

        }

        .contact-main-content h2 {

            font-size: 46px;

            font-weight: 800;

            line-height: 1.2;

            margin-bottom: 20px;

        }

        .contact-main-content > p {

            color: #666;

            font-size: 17px;

            line-height: 1.9;

            margin-bottom: 35px;

        }

        .contact-check-list {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        .contact-check-list li {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 18px;

            font-size: 16px;

            font-weight: 600;

            color: #333;

        }

        .contact-check-list i {

            color: #111;

            font-size: 18px;

        }

        .contact-main-form {

            background: #fff;

            padding: 45px;

            border-radius: 22px;

            box-shadow: 0 20px 50px rgba(0,0,0,.06);

        }

        .contact-main-form h3 {

            font-size: 30px;

            font-weight: 700;

            margin-bottom: 8px;

        }

        .contact-main-form .form-intro {

            color: #777;

            line-height: 1.7;

            margin-bottom: 30px;

        }

        .contact-main-form .form-label {

            font-weight: 600;

            font-size: 14px;

            margin-bottom: 8px;

        }

        .contact-main-form .form-control,

        .contact-main-form .form-select {

            height: 58px;

            border-radius: 12px;

            border: 1px solid #ddd;

            padding: 15px 18px;

            font-size: 15px;

        }

        .contact-main-form textarea.form-control {

            height: 160px;

            resize: none;

        }

        .contact-main-form .form-control:focus,

        .contact-main-form .form-select:focus {

            border-color: #111;

            box-shadow: none;

        }

        .contact-main-form .btn {

            padding: 15px 35px;

            border-radius: 50px;

            font-weight: 600;

        }


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

        .quick-contact-section {

            padding: 100px 0;

            background: #fff;

        }

        .quick-contact-box {

            background: #111;

            color: #fff;

            border-radius: 25px;

            padding: 55px;

        }

        .quick-contact-box h2 {

            font-size: 42px;

            font-weight: 800;

            margin-bottom: 15px;

        }

        .quick-contact-box p {

            color: #ccc;

            line-height: 1.8;

            max-width: 700px;

        }

        .quick-contact-buttons {

            display: flex;

            gap: 15px;

            justify-content: flex-end;

            flex-wrap: wrap;

        }


        /*=====================================
        MAP
        =====================================*/

        .contact-map iframe {

            width: 100%;

            height: 500px;

            border: 0;

            display: block;

        }


        /*=====================================
        RESPONSIVE CONTACT PAGE
        =====================================*/

        @media(max-width:991px) {

            .contact-page-hero {

                padding: 140px 0 80px;

                text-align: center;

            }

            .contact-page-hero h1 {

                font-size: 44px;

            }

            .contact-page-hero p {

                margin-left: auto;

                margin-right: auto;

            }

            .contact-hero-card {

                margin-top: 40px;

                text-align: left;

            }

            .contact-main-section {

                padding: 90px 0;

            }

            .contact-main-content h2 {

                font-size: 38px;

            }

            .quick-contact-buttons {

                justify-content: flex-start;

                margin-top: 25px;

            }

        }


        @media(max-width:767px) {

            .contact-page-hero {

                padding: 120px 0 70px;

            }

            .contact-page-hero h1 {

                font-size: 35px;

            }

            .contact-page-hero p {

                font-size: 16px;

            }

            .contact-info-section,

            .quick-contact-section {

                padding: 75px 0;

            }

            .contact-main-section {

                padding: 75px 0;

            }

            .contact-main-form {

                padding: 30px 20px;

                margin-top: 40px;

            }

            .contact-main-form h3 {

                font-size: 26px;

            }

            .quick-contact-box {

                padding: 35px 25px;

                text-align: center;

            }

            .quick-contact-box h2 {

                font-size: 32px;

            }

            .quick-contact-buttons {

                justify-content: center;

            }

            .quick-contact-buttons .btn {

                width: 100%;

            }

            .contact-map iframe {

                height: 400px;

            }

        }


        @media(max-width:575px) {

            .contact-page-hero h1 {

                font-size: 32px;

            }

            .contact-hero-card {

                padding: 30px 22px;

            }

            .contact-info-card {

                padding: 30px 20px;

            }

        }

        /*=====================================
        CAREER HERO
        =====================================*/

        .career-hero {

            padding: 170px 0 110px;

            background: #f8f8f8;

            overflow: hidden;

        }

        .career-hero h1 {

            font-size: 58px;

            font-weight: 800;

            line-height: 1.12;

            color: #111;

            margin: 22px 0;

        }

        .career-hero h1 span {

            color: #666;

        }

        .career-hero p {

            color: #666;

            font-size: 18px;

            line-height: 1.9;

            max-width: 650px;

            margin-bottom: 30px;

        }

        .career-hero-buttons {

            display: flex;

            gap: 15px;

            flex-wrap: wrap;

        }


        /*=====================================
        CAREER HERO VISUAL
        =====================================*/

        .career-visual {

            position: relative;

            min-height: 430px;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .career-main-card {

            width: 330px;

            height: 330px;

            border-radius: 35px;

            background: #111;

            color: #fff;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-direction: column;

            text-align: center;

            padding: 40px;

            box-shadow: 0 30px 70px rgba(0,0,0,.15);

            transform: rotate(-5deg);

        }

        .career-main-card i {

            font-size: 70px;

            margin-bottom: 25px;

        }

        .career-main-card h3 {

            font-size: 30px;

            font-weight: 800;

            margin-bottom: 10px;

        }

        .career-main-card p {

            color: #ccc;

            font-size: 14px;

            line-height: 1.7;

            margin: 0;

        }

        .career-floating-card {

            position: absolute;

            background: #fff;

            border: 1px solid #ececec;

            border-radius: 16px;

            padding: 15px 20px;

            box-shadow: 0 15px 40px rgba(0,0,0,.08);

            font-weight: 600;

        }

        .career-floating-card i {

            margin-right: 8px;

        }

        .career-floating-one {

            top: 25px;

            left: 0;

        }

        .career-floating-two {

            right: 0;

            top: 40%;

        }

        .career-floating-three {

            bottom: 25px;

            left: 10%;

        }


        /*=====================================
        WHY JOIN US
        =====================================*/

        .career-benefits-section {

            padding: 120px 0;

            background: #fff;

        }

        .career-benefit-card {

            background: #fff;

            border: 1px solid #ececec;

            border-radius: 20px;

            padding: 40px 30px;

            text-align: center;

            height: 100%;

            transition: .35s;

        }

        .career-benefit-card:hover {

            transform: translateY(-10px);

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

        }

        .career-benefit-icon {

            width: 80px;

            height: 80px;

            background: #f5f5f5;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 25px;

            font-size: 30px;

            transition: .35s;

        }

        .career-benefit-card:hover .career-benefit-icon {

            background: #111;

            color: #fff;

        }

        .career-benefit-card h4 {

            font-size: 22px;

            font-weight: 700;

            margin-bottom: 15px;

        }

        .career-benefit-card p {

            color: #666;

            line-height: 1.8;

            margin-bottom: 0;

        }


        /*=====================================
        CULTURE
        =====================================*/

        .career-culture-section {

            padding: 120px 0;

            background: #f8f8f8;

        }

        .career-culture-content h2 {

            font-size: 46px;

            font-weight: 800;

            line-height: 1.2;

            margin: 20px 0;

        }

        .career-culture-content p {

            color: #666;

            line-height: 1.9;

            font-size: 17px;

        }

        .career-culture-list {

            list-style: none;

            padding: 0;

            margin: 30px 0 0;

        }

        .career-culture-list li {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 17px;

            font-weight: 600;

        }

        .career-culture-list i {

            font-size: 18px;

        }

        .culture-visual {

            background: #111;

            border-radius: 25px;

            padding: 50px;

            color: #fff;

            min-height: 400px;

            display: flex;

            flex-direction: column;

            justify-content: center;

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

        }

        .culture-visual i {

            font-size: 65px;

            margin-bottom: 25px;

        }

        .culture-visual h3 {

            font-size: 32px;

            font-weight: 800;

            margin-bottom: 15px;

        }

        .culture-visual p {

            color: #ccc;

            line-height: 1.8;

            margin: 0;

        }


        /*=====================================
        JOB OPENINGS
        =====================================*/

        .jobs-section {

            padding: 120px 0;

            background: #fff;

        }

        .job-card {

            background: #fff;

            border: 1px solid #e7e7e7;

            border-radius: 20px;

            padding: 30px;

            transition: .35s;

            height: 100%;

        }

        .job-card:hover {

            transform: translateY(-8px);

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

        }

        .job-top {

            display: flex;

            justify-content: space-between;

            align-items: flex-start;

            gap: 15px;

            margin-bottom: 20px;

        }

        .job-icon {

            width: 60px;

            height: 60px;

            background: #f5f5f5;

            border-radius: 15px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 25px;

            flex-shrink: 0;

        }

        .job-type {

            background: #f5f5f5;

            border-radius: 30px;

            padding: 7px 13px;

            font-size: 12px;

            font-weight: 600;

        }

        .job-card h4 {

            font-size: 22px;

            font-weight: 700;

            margin-bottom: 10px;

        }

        .job-location {

            color: #777;

            font-size: 14px;

            margin-bottom: 18px;

        }

        .job-location i {

            margin-right: 6px;

        }

        .job-card p {

            color: #666;

            line-height: 1.8;

            font-size: 15px;

        }

        .job-skills {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin: 20px 0;

        }

        .job-skills span {

            background: #f5f5f5;

            border-radius: 30px;

            padding: 7px 12px;

            font-size: 12px;

            font-weight: 600;

        }

        .job-card .btn {

            border-radius: 40px;

        }


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

        .career-process-section {

            padding: 120px 0;

            background: #f8f8f8;

        }

        .career-process-card {

            background: #fff;

            border: 1px solid #ececec;

            border-radius: 20px;

            padding: 35px 20px;

            text-align: center;

            height: 100%;

            transition: .35s;

        }

        .career-process-card:hover {

            transform: translateY(-8px);

            box-shadow: 0 15px 35px rgba(0,0,0,.08);

        }

        .career-process-number {

            font-size: 13px;

            font-weight: 700;

            color: #999;

            margin-bottom: 15px;

        }

        .career-process-card i {

            font-size: 38px;

            margin-bottom: 20px;

        }

        .career-process-card h5 {

            font-weight: 700;

            margin-bottom: 10px;

        }

        .career-process-card p {

            color: #666;

            line-height: 1.7;

            font-size: 14px;

            margin: 0;

        }


        /*=====================================
        OPEN APPLICATION
        =====================================*/

        .career-application-section {

            padding: 120px 0;

            background: #fff;

        }

        .career-application-box {

            background: #111;

            border-radius: 25px;

            padding: 60px;

            color: #fff;

        }

        .career-application-box h2 {

            font-size: 44px;

            font-weight: 800;

            margin-bottom: 18px;

        }

        .career-application-box p {

            color: #ccc;

            line-height: 1.8;

            max-width: 700px;

        }

        .career-application-box .btn {

            border-radius: 50px;

            padding: 14px 30px;

        }


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

        .career-form-section {

            padding: 120px 0;

            background: #f8f8f8;

        }

        .career-form {

            background: #fff;

            padding: 45px;

            border-radius: 22px;

            box-shadow: 0 20px 50px rgba(0,0,0,.06);

        }

        .career-form h3 {

            font-size: 30px;

            font-weight: 700;

            margin-bottom: 8px;

        }

        .career-form > p {

            color: #777;

            line-height: 1.7;

            margin-bottom: 30px;

        }

        .career-form .form-label {

            font-size: 14px;

            font-weight: 600;

            margin-bottom: 8px;

        }

        .career-form .form-control,

        .career-form .form-select {

            height: 58px;

            border-radius: 12px;

            border: 1px solid #ddd;

            padding: 15px 18px;

        }

        .career-form textarea.form-control {

            height: 150px;

            resize: none;

        }

        .career-form .form-control:focus,

        .career-form .form-select:focus {

            border-color: #111;

            box-shadow: none;

        }

        .career-form input[type="file"] {

            padding: 16px;

        }

        .career-form .btn {

            padding: 15px 35px;

            border-radius: 50px;

        }


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

        .career-cta {

            padding: 100px 0;

            background: #585858;

            color: #fff;

            text-align: center;

        }

        .career-cta h2 {

            font-size: 50px;

            font-weight: 800;

            margin-bottom: 20px;

        }

        .career-cta p {

            color: #ccc;

            font-size: 18px;

            line-height: 1.8;

            max-width: 700px;

            margin: auto;

        }


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

        @media(max-width:991px) {

            .career-hero {

                padding: 140px 0 80px;

                text-align: center;

            }

            .career-hero h1 {

                font-size: 44px;

            }

            .career-hero p {

                margin-left: auto;

                margin-right: auto;

            }

            .career-hero-buttons {

                justify-content: center;

            }

            .career-visual {

                margin-top: 50px;

            }

            .career-culture-section,

            .jobs-section,

            .career-benefits-section,

            .career-process-section,

            .career-form-section {

                padding: 90px 0;

            }

            .career-culture-content h2 {

                font-size: 38px;

            }

            .culture-visual {

                margin-top: 40px;

            }

            .career-application-box {

                padding: 45px 35px;

            }

            .career-application-box h2 {

                font-size: 36px;

            }

            .career-cta h2 {

                font-size: 40px;

            }

        }


        @media(max-width:767px) {

            .career-hero {

                padding: 120px 0 70px;

            }

            .career-hero h1 {

                font-size: 34px;

            }

            .career-hero p {

                font-size: 16px;

            }

            .career-main-card {

                width: 280px;

                height: 280px;

            }

            .career-main-card i {

                font-size: 55px;

            }

            .career-floating-card {

                display: none;

            }

            .career-benefits-section,

            .career-culture-section,

            .jobs-section,

            .career-process-section,

            .career-application-section,

            .career-form-section {

                padding: 75px 0;

            }

            .career-culture-content h2 {

                font-size: 32px;

            }

            .culture-visual {

                padding: 35px 25px;

                min-height: 330px;

            }

            .culture-visual h3 {

                font-size: 28px;

            }

            .career-application-box {

                padding: 35px 25px;

                text-align: center;

            }

            .career-application-box h2 {

                font-size: 31px;

            }

            .career-cta {

                padding: 75px 0;

            }

            .career-cta h2 {

                font-size: 34px;

            }

            .career-cta p {

                font-size: 16px;

            }

            .career-form {

                padding: 30px 20px;

            }

            .career-form h3 {

                font-size: 26px;

            }

        }


        @media(max-width:575px) {

            .career-hero h1 {

                font-size: 31px;

            }

            .career-main-card {

                width: 250px;

                height: 250px;

                padding: 25px;

            }

            .career-main-card h3 {

                font-size: 25px;

            }

        }

/*==================================================
PORTFOLIO PAGE
==================================================*/


/*=====================================
PORTFOLIO HERO
======================================*/

.portfolio-page-hero{

    padding:170px 0 110px;

    background:#f8f8f8;

    overflow:hidden;

}

.portfolio-page-hero h1{

    font-size:58px;

    font-weight:800;

    line-height:1.12;

    color:#111;

    margin:22px 0;

}

.portfolio-page-hero h1 span{

    color:#666;

    display:block;

}

.portfolio-page-hero p{

    max-width:720px;

    margin:0 auto 30px;

    color:#666;

    font-size:18px;

    line-height:1.9;

}

.portfolio-hero-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}


/*=====================================
PORTFOLIO STATS
======================================*/

.portfolio-stats-section{

    padding:80px 0;

    background:#fff;

}

.portfolio-stat-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    height:100%;

    transition:.35s;

}

.portfolio-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.portfolio-stat-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 18px;

    font-size:24px;

    transition:.35s;

}

.portfolio-stat-card:hover .portfolio-stat-icon{

    background:#111;

    color:#fff;

}

.portfolio-stat-card h3{

    font-size:38px;

    font-weight:800;

    margin-bottom:5px;

}

.portfolio-stat-card p{

    margin:0;

    color:#777;

}


/*=====================================
PORTFOLIO SECTION
======================================*/

.portfolio-page-section{

    padding:120px 0;

    background:#f8f8f8;

}


/*=====================================
FILTER
======================================*/

.portfolio-page-filter{

    margin-bottom:50px;

}

.portfolio-page-filter button{

    border:none;

    background:#fff;

    color:#222;

    padding:12px 25px;

    margin:5px;

    border-radius:40px;

    font-weight:600;

    font-size:14px;

    border:1px solid #e5e5e5;

    transition:.35s;

}

.portfolio-page-filter button:hover{

    background:#111;

    color:#fff;

    border-color:#111;

}

.portfolio-page-filter button.active{

    background:#111;

    color:#fff;

    border-color:#111;

}


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

.portfolio-page-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    height:100%;

    border:1px solid #ececec;

    transition:.4s;

}

.portfolio-page-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.09);

}


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

.portfolio-page-image{

    position:relative;

    overflow:hidden;

    height:300px;

    background:#eee;

}

.portfolio-page-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s;

}

.portfolio-page-card:hover
.portfolio-page-image img{

    transform:scale(1.08);

}


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

.portfolio-page-overlay{

    position:absolute;

    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.4s;

}

.portfolio-page-card:hover
.portfolio-page-overlay{

    opacity:1;

}

.portfolio-view-btn{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#fff;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transform:translateY(20px);

    transition:.4s;

}

.portfolio-page-card:hover
.portfolio-view-btn{

    transform:translateY(0);

}

.portfolio-view-btn:hover{

    background:#111;

    color:#fff;

}


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

.portfolio-page-content{

    padding:30px;

}

.portfolio-page-content > span{

    display:block;

    color:#888;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.portfolio-page-content h4{

    font-size:22px;

    font-weight:700;

    color:#111;

    margin-bottom:13px;

}

.portfolio-page-content p{

    color:#666;

    line-height:1.8;

    font-size:14px;

    margin-bottom:20px;

}


/*=====================================
TECHNOLOGY TAGS
======================================*/

.portfolio-tech{

    display:flex;

    gap:7px;

    flex-wrap:wrap;

}

.portfolio-tech span{

    background:#f5f5f5;

    color:#444;

    padding:6px 11px;

    border-radius:30px;

    font-size:11px;

    font-weight:600;

}


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

.portfolio-item{

    transition:

        opacity .35s ease,

        transform .35s ease;

}

.portfolio-item.portfolio-hidden{

    opacity:0;

    transform:scale(.94);

    pointer-events:none;

}

.portfolio-item.portfolio-visible{

    opacity:1;

    transform:scale(1);

}


/*=====================================
NO RESULTS
======================================*/

.portfolio-no-results{

    display:none;

    padding:60px 20px;

}

.portfolio-no-results.show{

    display:block;

}

.portfolio-no-results-icon{

    width:80px;

    height:80px;

    background:#fff;

    border:1px solid #eee;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:28px;

}

.portfolio-no-results h4{

    font-size:24px;

    font-weight:700;

}

.portfolio-no-results p{

    color:#777;

}


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

.portfolio-cta-section{

    padding:100px 0;

    background:#fff;

}

.portfolio-cta-box{

    background:#111;

    color:#fff;

    border-radius:25px;

    padding:60px;

    text-align:center;

}

.portfolio-cta-box h2{

    font-size:46px;

    font-weight:800;

    margin:25px 0 15px;

}

.portfolio-cta-box p{

    color:#ccc;

    max-width:700px;

    margin:0 auto;

    line-height:1.8;

    font-size:17px;

}

.portfolio-cta-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;

}


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

@media(max-width:991px){

    .portfolio-page-hero{

        padding:140px 0 80px;

    }

    .portfolio-page-hero h1{

        font-size:45px;

    }

    .portfolio-page-section{

        padding:90px 0;

    }

    .portfolio-page-image{

        height:280px;

    }

    .portfolio-cta-box{

        padding:45px 35px;

    }

    .portfolio-cta-box h2{

        font-size:38px;

    }

}


@media(max-width:767px){

    .portfolio-page-hero{

        padding:120px 0 70px;

        text-align:center;

    }

    .portfolio-page-hero h1{

        font-size:35px;

    }

    .portfolio-page-hero p{

        font-size:16px;

    }

    .portfolio-page-section{

        padding:75px 0;

    }

    .portfolio-page-filter{

        margin-bottom:35px;

    }

    .portfolio-page-filter button{

        padding:10px 17px;

        font-size:13px;

    }

    .portfolio-page-image{

        height:250px;

    }

    .portfolio-page-content{

        padding:25px 22px;

    }

    .portfolio-page-content h4{

        font-size:20px;

    }

    .portfolio-cta-section{

        padding:75px 0;

    }

    .portfolio-cta-box{

        padding:35px 22px;

    }

    .portfolio-cta-box h2{

        font-size:32px;

    }

    .portfolio-cta-box p{

        font-size:15px;

    }

    .portfolio-cta-buttons .btn{

        width:100%;

    }

}


@media(max-width:575px){

    .portfolio-page-hero h1{

        font-size:31px;

    }

    .portfolio-page-image{

        height:230px;

    }

}

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

.process-page-hero{

    padding:170px 0 110px;

    background:#f8f8f8;

    overflow:hidden;

}

.process-page-hero h1{

    font-size:58px;

    font-weight:800;

    line-height:1.12;

    color:#111;

    margin:22px 0;

}

.process-page-hero h1 span{

    color:#666;

    display:block;

}

.process-page-hero p{

    max-width:650px;

    color:#666;

    font-size:18px;

    line-height:1.9;

    margin-bottom:30px;

}

.process-hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}


/*=====================================
PROCESS HERO VISUAL
======================================*/

.process-hero-visual{

    position:relative;

    min-height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.process-visual-center{

    width:280px;

    height:280px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px;

    box-shadow:0 30px 70px rgba(0,0,0,.16);

    z-index:2;

}

.process-visual-center i{

    font-size:55px;

    margin-bottom:20px;

}

.process-visual-center h3{

    font-size:28px;

    font-weight:800;

    margin-bottom:8px;

}

.process-visual-center p{

    color:#ccc;

    font-size:13px;

    line-height:1.7;

    margin:0;

}


/*=====================================
ORBIT ITEMS
======================================*/

.process-orbit{

    position:absolute;

    width:82px;

    height:82px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    z-index:3;

}

.process-orbit i{

    font-size:20px;

    margin-bottom:5px;

}

.process-orbit span{

    font-size:10px;

    font-weight:700;

}

.orbit-one{

    top:25px;

    left:15%;

}

.orbit-two{

    top:30%;

    right:0;

}

.orbit-three{

    bottom:25px;

    right:15%;

}

.orbit-four{

    bottom:20%;

    left:0;

}


/*=====================================
OVERVIEW
======================================*/

.process-overview-section{

    padding:120px 0;

    background:#fff;

}

.process-overview-text{

    color:#666;

    font-size:17px;

    line-height:1.9;

}

.process-check-list{

    display:grid;

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

    gap:15px;

    margin-top:30px;

}

.process-check-list div{

    font-weight:600;

    color:#333;

}

.process-check-list i{

    margin-right:8px;

}


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

.process-overview-card{

    background:#111;

    border-radius:25px;

    padding:45px;

    color:#fff;

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

}

.overview-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.overview-card-top span{

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:#aaa;

}

.overview-card-top i{

    font-size:25px;

}

.overview-flow{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

}

.overview-flow.second{

    margin-top:30px;

}

.overview-flow > i{

    color:#888;

}

.overview-flow-item{

    width:115px;

    min-height:105px;

    background:#222;

    border-radius:15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.overview-flow-item span{

    font-size:12px;

    color:#999;

    margin-bottom:8px;

}

.overview-flow-item strong{

    font-size:14px;

}


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

.process-steps-section{

    padding:120px 0;

    background:#f8f8f8;

}


/*=====================================
TIMELINE
======================================*/

.process-timeline{

    position:relative;

    max-width:1000px;

    margin:70px auto 0;

}

.process-timeline::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:2px;

    background:#ddd;

    transform:translateX(-50%);

}

.process-timeline-item{

    position:relative;

    display:flex;

    width:100%;

    margin-bottom:80px;

    align-items:flex-start;

}

.process-timeline-item:nth-child(odd){

    padding-right:52%;

}

.process-timeline-item:nth-child(even){

    padding-left:52%;

    justify-content:flex-end;

}

.process-timeline-number{

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:58px;

    height:58px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

    z-index:3;

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

}

.process-timeline-icon{

    width:70px;

    height:70px;

    background:#fff;

    border:1px solid #e5e5e5;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:27px;

    flex-shrink:0;

    margin-right:20px;

}

.process-timeline-content{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:30px;

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

}

.process-timeline-content > span{

    color:#999;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

}

.process-timeline-content h3{

    font-size:27px;

    font-weight:800;

    margin:10px 0 12px;

}

.process-timeline-content p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}

.process-timeline-content ul{

    list-style:none;

    padding:0;

    margin:20px 0 0;

}

.process-timeline-content li{

    color:#444;

    font-size:14px;

    margin-bottom:9px;

}

.process-timeline-content li i{

    margin-right:8px;

}


/*=====================================
COLLABORATION
======================================*/

.process-collaboration-section{

    padding:120px 0;

    background:#fff;

}

.process-collaboration-visual{

    position:relative;

    min-height:420px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.collaboration-main{

    width:300px;

    height:300px;

    border-radius:25px;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    text-align:center;

    padding:40px;

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

}

.collaboration-main i{

    font-size:60px;

    margin-bottom:20px;

}

.collaboration-main h3{

    font-size:28px;

    font-weight:800;

}

.collaboration-main p{

    color:#ccc;

    font-size:14px;

    line-height:1.7;

}

.collaboration-small{

    position:absolute;

    background:#fff;

    border:1px solid #ececec;

    padding:14px 18px;

    border-radius:14px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    font-size:14px;

    font-weight:600;

}

.collaboration-small i{

    margin-right:8px;

}

.collaboration-one{

    top:30px;

    left:5%;

}

.collaboration-two{

    right:0;

    top:40%;

}

.collaboration-three{

    bottom:30px;

    left:15%;

}


/*=====================================
COLLABORATION LIST
======================================*/

.collaboration-list{

    margin-top:35px;

}

.collaboration-list-item{

    display:flex;

    gap:18px;

    margin-bottom:25px;

}

.collaboration-list-icon{

    width:55px;

    height:55px;

    background:#f5f5f5;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:19px;

}

.collaboration-list-item h5{

    font-size:18px;

    font-weight:700;

    margin-bottom:5px;

}

.collaboration-list-item p{

    color:#666;

    line-height:1.7;

    margin:0;

    font-size:14px;

}


/*=====================================
APPROACH
======================================*/

.process-approach-section{

    padding:120px 0;

    background:#f8f8f8;

}

.approach-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    height:100%;

    transition:.35s;

}

.approach-card:hover{

    transform:translateY(-10px);

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

}

.approach-icon{

    width:80px;

    height:80px;

    background:#f5f5f5;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    font-size:30px;

    transition:.35s;

}

.approach-card:hover .approach-icon{

    background:#111;

    color:#fff;

}

.approach-card h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:15px;

}

.approach-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}


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

.process-cta-section{

    padding:100px 0;

    background:#fff;

}

.process-cta-box{

    background:#111;

    color:#fff;

    border-radius:25px;

    padding:60px;

    text-align:center;

}

.process-cta-box h2{

    font-size:48px;

    font-weight:800;

    margin:25px 0 18px;

}

.process-cta-box p{

    color:#ccc;

    max-width:700px;

    margin:auto;

    line-height:1.8;

    font-size:17px;

}

.process-cta-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;

}


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

@media(max-width:991px){

    .process-page-hero{

        padding:140px 0 80px;

    }

    .process-page-hero h1{

        font-size:45px;

    }

    .process-hero-visual{

        margin-top:30px;

    }

    .process-overview-section,
    .process-steps-section,
    .process-collaboration-section,
    .process-approach-section{

        padding:90px 0;

    }

    .process-timeline-item:nth-child(odd),
    .process-timeline-item:nth-child(even){

        padding-left:100px;

        padding-right:0;

        justify-content:flex-start;

    }

    .process-timeline::before{

        left:29px;

    }

    .process-timeline-number{

        left:0;

        transform:none;

    }

    .process-timeline-item{

        margin-bottom:45px;

    }

    .process-cta-box{

        padding:45px 35px;

    }

    .process-cta-box h2{

        font-size:38px;

    }

}


@media(max-width:767px){

    .process-page-hero{

        padding:120px 0 70px;

        text-align:center;

    }

    .process-page-hero h1{

        font-size:35px;

    }

    .process-page-hero p{

        font-size:16px;

    }

    .process-hero-buttons{

        justify-content:center;

    }

    .process-hero-visual{

        min-height:340px;

    }

    .process-visual-center{

        width:220px;

        height:220px;

        padding:25px;

    }

    .process-visual-center i{

        font-size:40px;

    }

    .process-visual-center h3{

        font-size:23px;

    }

    .process-orbit{

        width:65px;

        height:65px;

    }

    .process-orbit i{

        font-size:16px;

    }

    .process-orbit span{

        font-size:8px;

    }

    .orbit-one{

        left:0;

    }

    .orbit-two{

        right:0;

    }

    .orbit-three{

        right:3%;

    }

    .orbit-four{

        left:3%;

    }

    .process-check-list{

        grid-template-columns:1fr;

    }

    .process-overview-card{

        padding:30px 20px;

    }

    .overview-flow{

        gap:7px;

    }

    .overview-flow > i{

        display:none;

    }

    .overview-flow-item{

        width:100%;

        min-height:85px;

    }

    .process-timeline{

        margin-top:50px;

    }

    .process-timeline-item:nth-child(odd),
    .process-timeline-item:nth-child(even){

        padding-left:75px;

        padding-right:0;

    }

    .process-timeline::before{

        left:24px;

    }

    .process-timeline-number{

        width:48px;

        height:48px;

        font-size:12px;

    }

    .process-timeline-icon{

        width:55px;

        height:55px;

        font-size:21px;

        margin-right:14px;

    }

    .process-timeline-content{

        padding:23px 20px;

    }

    .process-timeline-content h3{

        font-size:23px;

    }

    .process-timeline-content p{

        font-size:14px;

    }

    .process-collaboration-visual{

        min-height:350px;

    }

    .collaboration-main{

        width:240px;

        height:240px;

        padding:25px;

    }

    .collaboration-main i{

        font-size:45px;

    }

    .collaboration-main h3{

        font-size:24px;

    }

    .collaboration-small{

        display:none;

    }

    .process-cta-section{

        padding:75px 0;

    }

    .process-cta-box{

        padding:35px 22px;

    }

    .process-cta-box h2{

        font-size:32px;

    }

    .process-cta-box p{

        font-size:15px;

    }

    .process-cta-buttons .btn{

        width:100%;

    }

}


@media(max-width:575px){

    .process-page-hero h1{

        font-size:31px;

    }

    .process-visual-center{

        width:195px;

        height:195px;

    }

    .process-visual-center h3{

        font-size:21px;

    }

    .process-timeline-item:nth-child(odd),
    .process-timeline-item:nth-child(even){

        padding-left:65px;

    }

}

/*=====================================
FAQ HERO
======================================*/

.faq-page-hero{

    padding:170px 0 100px;

    background:#f8f8f8;

    overflow:hidden;

}


.faq-page-hero h1{

    font-size:58px;

    font-weight:800;

    line-height:1.12;

    color:#111;

    margin:22px 0;

}


.faq-page-hero h1 span{

    display:block;

    color:#666;

}


.faq-page-hero p{

    max-width:700px;

    margin:0 auto;

    color:#666;

    font-size:18px;

    line-height:1.9;

}


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

.faq-search-section{

    padding:45px 0 20px;

    background:#f8f8f8;

}


.faq-search-box{

    max-width:760px;

    margin:auto;

    height:70px;

    background:#fff;

    border:1px solid #e5e5e5;

    border-radius:50px;

    display:flex;

    align-items:center;

    padding:0 10px 0 25px;

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

    transition:.3s;

}


.faq-search-box:focus-within{

    border-color:#111;

    box-shadow:0 15px 45px rgba(0,0,0,.09);

}


.faq-search-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}


.faq-search-box input{

    flex:1;

    min-width:0;

    height:100%;

    border:none;

    outline:none;

    padding:0 18px;

    font-size:16px;

    color:#222;

    background:transparent;

}


.faq-search-box input::placeholder{

    color:#999;

}


.faq-clear-search{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#999;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

}


.faq-clear-search.show{

    opacity:1;

    visibility:visible;

}


.faq-clear-search:hover{

    background:#f5f5f5;

    color:#111;

}


.faq-search-message{

    text-align:center;

    min-height:25px;

    margin-top:15px;

    color:#777;

    font-size:14px;

}


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

.faq-page-section{

    padding:80px 0 120px;

    background:#fff;

}


/*=====================================
CATEGORY FILTER
======================================*/

.faq-categories{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:55px;

}


.faq-category{

    border:1px solid #e5e5e5;

    background:#fff;

    color:#333;

    border-radius:50px;

    padding:12px 23px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


.faq-category:hover{

    border-color:#111;

    color:#111;

}


.faq-category.active{

    background:#111;

    color:#fff;

    border-color:#111;

}


/*=====================================
FAQ LIST
======================================*/

.faq-list{

    width:100%;

}


.faq-item{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    transition:.35s;

}


.faq-item:hover{

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

}


.faq-item.active{

    border-color:#111;

    box-shadow:0 15px 40px rgba(0,0,0,.07);

}


/*=====================================
QUESTION
======================================*/

.faq-question{

    width:100%;

    border:none;

    background:#fff;

    padding:25px 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    text-align:left;

    color:#111;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

}


.faq-question:hover{

    background:#fafafa;

}


.faq-question-icon{

    width:38px;

    height:38px;

    min-width:38px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}


.faq-question-icon i{

    font-size:14px;

    transition:.35s;

}


.faq-item.active .faq-question{

    background:#111;

    color:#fff;

}


.faq-item.active .faq-question-icon{

    background:#fff;

    color:#111;

    transform:rotate(180deg);

}


.faq-item.active .faq-question-icon i{

    transform:rotate(45deg);

}


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

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}


.faq-answer p{

    color:#666;

    line-height:1.9;

    font-size:15px;

    margin:0;

    padding:0 28px 25px;

}


.faq-answer a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#111;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    margin:0 28px 25px;

}


.faq-answer a i{

    transition:.3s;

}


.faq-answer a:hover i{

    transform:translateX(5px);

}


/*=====================================
NO RESULTS
======================================*/

.faq-no-results{

    display:none;

    text-align:center;

    padding:60px 30px;

    border:1px solid #ececec;

    border-radius:20px;

    background:#fafafa;

}


.faq-no-results.show{

    display:block;

}


.faq-no-results-icon{

    width:75px;

    height:75px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:25px;

}


.faq-no-results h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:10px;

}


.faq-no-results p{

    color:#777;

    margin-bottom:20px;

}


.faq-no-results button{

    border:none;

    background:#111;

    color:#fff;

    padding:12px 24px;

    border-radius:50px;

    font-weight:600;

    cursor:pointer;

}


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

.faq-side-card{

    background:#111;

    color:#fff;

    border-radius:22px;

    padding:40px 35px;

    position:sticky;

    top:120px;

}


.faq-side-icon{

    width:70px;

    height:70px;

    background:#222;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:25px;

}


.faq-side-card > span{

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#aaa;

}


.faq-side-card h3{

    font-size:30px;

    line-height:1.25;

    font-weight:800;

    margin:15px 0;

}


.faq-side-card p{

    color:#ccc;

    line-height:1.8;

    font-size:15px;

    margin-bottom:25px;

}


.faq-side-card .btn{

    padding:14px 20px;

}


/*=====================================
FAQ SIDE INFO
======================================*/

.faq-side-info{

    margin-top:20px;

    background:#f8f8f8;

    border-radius:20px;

    padding:25px;

}


.faq-info-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 0;

    border-bottom:1px solid #e5e5e5;

}


.faq-info-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}


.faq-info-item:first-child{

    padding-top:0;

}


.faq-info-icon{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#fff;

    border:1px solid #e5e5e5;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}


.faq-info-item small{

    display:block;

    color:#999;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:3px;

}


.faq-info-item a{

    color:#222;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

}


.faq-info-item a:hover{

    color:#000;

}


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

.faq-cta-section{

    padding:100px 0;

    background:#f8f8f8;

}


.faq-cta-box{

    background:#111;

    color:#fff;

    border-radius:25px;

    text-align:center;

    padding:65px 40px;

}


.faq-cta-box h2{

    font-size:48px;

    font-weight:800;

    margin:25px 0 18px;

}


.faq-cta-box p{

    max-width:700px;

    margin:auto;

    color:#ccc;

    font-size:17px;

    line-height:1.8;

}


.faq-cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:30px;

}


.faq-cta-buttons .btn{

    border-radius:50px;

    padding:14px 30px;

}


/*=====================================
FAQ SEARCH HIGHLIGHT
======================================*/

.faq-highlight{

    background:#111;

    color:#fff;

    padding:1px 4px;

    border-radius:3px;

}


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

@media(max-width:991px){

    .faq-page-hero{

        padding:140px 0 80px;

    }


    .faq-page-hero h1{

        font-size:45px;

    }


    .faq-page-section{

        padding:70px 0 90px;

    }


    .faq-side-card{

        position:relative;

        top:auto;

    }


    .faq-side-info{

        margin-bottom:30px;

    }


    .faq-cta-box h2{

        font-size:38px;

    }

}


@media(max-width:767px){

    .faq-page-hero{

        padding:120px 0 65px;

    }


    .faq-page-hero h1{

        font-size:35px;

    }


    .faq-page-hero p{

        font-size:16px;

    }


    .faq-search-section{

        padding-top:30px;

    }


    .faq-search-box{

        height:62px;

        padding-left:18px;

    }


    .faq-search-icon{

        width:38px;

        height:38px;

    }


    .faq-search-box input{

        font-size:15px;

        padding:0 12px;

    }


    .faq-category{

        padding:10px 17px;

        font-size:13px;

    }


    .faq-page-section{

        padding:60px 0 75px;

    }


    .faq-question{

        padding:20px;

        font-size:15px;

    }


    .faq-question-icon{

        width:35px;

        height:35px;

        min-width:35px;

    }


    .faq-answer p{

        padding:0 20px 20px;

        font-size:14px;

    }


    .faq-answer a{

        margin-left:20px;

        margin-right:20px;

    }


    .faq-side-card{

        padding:32px 25px;

    }


    .faq-side-card h3{

        font-size:26px;

    }


    .faq-cta-section{

        padding:70px 0;

    }


    .faq-cta-box{

        padding:45px 25px;

    }


    .faq-cta-box h2{

        font-size:32px;

    }


    .faq-cta-box p{

        font-size:15px;

    }


    .faq-cta-buttons .btn{

        width:100%;

    }

}


@media(max-width:575px){

    .faq-page-hero h1{

        font-size:31px;

    }


    .faq-categories{

        justify-content:flex-start;

    }


    .faq-category{

        padding:9px 14px;

    }

}


/*=====================================
ABOUT HERO
======================================*/

.about-page-hero{

    padding:170px 0 110px;

    background:#f8f8f8;

    overflow:hidden;

}


.about-page-hero h1{

    font-size:58px;

    font-weight:800;

    line-height:1.12;

    color:#111;

    margin:22px 0;

}


.about-page-hero h1 span{

    display:block;

    color:#666;

}


.about-page-hero p{

    max-width:650px;

    color:#666;

    font-size:18px;

    line-height:1.9;

    margin-bottom:30px;

}


.about-hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}


/*=====================================
ABOUT HERO VISUAL
======================================*/

.about-hero-visual{

    position:relative;

    min-height:430px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.about-hero-main-card{

    width:330px;

    min-height:340px;

    background:#111;

    color:#fff;

    border-radius:30px;

    padding:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    text-align:center;

    box-shadow:0 30px 70px rgba(0,0,0,.14);

    position:relative;

    z-index:2;

}


.about-hero-icon{

    width:90px;

    height:90px;

    border-radius:25px;

    background:#222;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    margin-bottom:25px;

}


.about-hero-main-card > span{

    color:#aaa;

    font-size:11px;

    letter-spacing:2px;

    font-weight:700;

}


.about-hero-main-card h3{

    font-size:30px;

    font-weight:800;

    margin:15px 0 10px;

}


.about-hero-main-card p{

    color:#ccc;

    font-size:14px;

    margin:0;

    line-height:1.7;

}


/*=====================================
FLOATING HERO CARDS
======================================*/

.about-floating-card{

    position:absolute;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:15px;

    padding:14px 20px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    font-size:13px;

    font-weight:700;

    z-index:3;

}


.about-floating-card i{

    margin-right:8px;

}


.about-float-one{

    top:35px;

    left:5%;

}


.about-float-two{

    right:0;

    top:42%;

}


.about-float-three{

    bottom:25px;

    left:15%;

}


/*=====================================
INTRODUCTION
======================================*/

.about-intro-section{

    padding:120px 0;

    background:#fff;

}


.about-intro-visual{

    position:relative;

    min-height:480px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.about-intro-image{

    width:100%;

    max-width:500px;

}


.about-image-placeholder{

    min-height:420px;

    border-radius:25px;

    background:#f5f5f5;

    border:1px solid #ececec;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}


.about-image-placeholder i{

    width:120px;

    height:120px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:45px;

    margin-bottom:25px;

}


.about-image-placeholder span{

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:#666;

}


.about-experience-card{

    position:absolute;

    right:10px;

    bottom:20px;

    background:#111;

    color:#fff;

    width:160px;

    height:145px;

    border-radius:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}


.about-experience-card strong{

    font-size:28px;

    font-weight:800;

}


.about-experience-card span{

    color:#bbb;

    font-size:13px;

}


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

.about-body-text{

    color:#666;

    font-size:17px;

    line-height:1.9;

}


.about-check-list{

    display:grid;

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

    gap:16px;

    margin-top:30px;

}


.about-check-list div{

    font-size:15px;

    font-weight:600;

    color:#333;

}


.about-check-list i{

    margin-right:8px;

}


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

.about-stats-section{

    padding:80px 0;

    background:#f8f8f8;

}


.about-stat-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

}


.about-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.07);

}


.about-stat-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:23px;

}


.about-stat-card h3{

    font-size:27px;

    font-weight:800;

    margin-bottom:8px;

}


.about-stat-card p{

    margin:0;

    color:#777;

    font-size:14px;

}


/*=====================================
MISSION
======================================*/

.mission-section{

    padding:120px 0;

    background:#fff;

}


.mission-card{

    background:#f8f8f8;

    border:1px solid #ececec;

    border-radius:22px;

    padding:45px 40px;

    height:100%;

    transition:.35s;

}


.mission-card:hover{

    transform:translateY(-8px);

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

}


.mission-card.dark{

    background:#111;

    color:#fff;

    border-color:#111;

}


.mission-icon{

    width:75px;

    height:75px;

    background:#fff;

    color:#111;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:25px;

}


.mission-card.dark .mission-icon{

    background:#222;

    color:#fff;

}


.mission-card > span{

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#999;

}


.mission-card.dark > span{

    color:#aaa;

}


.mission-card h3{

    font-size:30px;

    font-weight:800;

    line-height:1.3;

    margin:15px 0;

}


.mission-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}


.mission-card.dark p{

    color:#ccc;

}


/*=====================================
VALUES
======================================*/

.values-section{

    padding:120px 0;

    background:#f8f8f8;

}


.value-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:35px 25px;

    height:100%;

    position:relative;

    overflow:hidden;

    transition:.35s;

}


.value-card:hover{

    transform:translateY(-10px);

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

}


.value-number{

    position:absolute;

    right:20px;

    top:20px;

    color:#eee;

    font-size:42px;

    font-weight:800;

}


.value-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:27px;

    margin-bottom:25px;

}


.value-card h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

}


.value-card p{

    color:#666;

    line-height:1.8;

    margin:0;

    font-size:14px;

}


/*=====================================
EXPERTISE
======================================*/

.about-expertise-section{

    padding:120px 0;

    background:#fff;

}


.expertise-about-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:35px 30px;

    height:100%;

    transition:.35s;

}


.expertise-about-card:hover{

    transform:translateY(-10px);

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

}


.expertise-about-icon{

    width:75px;

    height:75px;

    background:#f5f5f5;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:25px;

    transition:.35s;

}


.expertise-about-card:hover
.expertise-about-icon{

    background:#111;

    color:#fff;

}


.expertise-about-card h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:15px;

}


.expertise-about-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:22px;

}


.expertise-about-card a{

    color:#111;

    text-decoration:none;

    font-weight:700;

    font-size:14px;

}


.expertise-about-card a i{

    margin-left:8px;

    transition:.3s;

}


.expertise-about-card:hover
a i{

    transform:translateX(5px);

}


/*=====================================
APPROACH
======================================*/

.about-approach-section{

    padding:120px 0;

    background:#f8f8f8;

}


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

.about-process-card{

    background:#111;

    color:#fff;

    border-radius:25px;

    padding:45px;

    position:relative;

    overflow:hidden;

}


.about-process-line{

    position:absolute;

    left:74px;

    top:70px;

    bottom:70px;

    width:2px;

    background:#333;

}


.about-process-step{

    display:flex;

    gap:20px;

    position:relative;

    z-index:2;

    margin-bottom:35px;

}


.about-process-step:last-child{

    margin-bottom:0;

}


.about-process-number{

    width:58px;

    height:58px;

    min-width:58px;

    border-radius:50%;

    background:#222;

    border:1px solid #444;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

}


.about-process-step h5{

    font-size:19px;

    font-weight:700;

    margin:3px 0 7px;

}


.about-process-step p{

    color:#bbb;

    line-height:1.7;

    margin:0;

    font-size:14px;

}


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

.about-why-section{

    padding:120px 0;

    background:#fff;

}


.about-why-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:20px;

    padding:40px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

}


.about-why-card:hover{

    transform:translateY(-10px);

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

}


.about-why-card > i{

    width:75px;

    height:75px;

    background:#f5f5f5;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:25px;

}


.about-why-card h4{

    font-size:21px;

    font-weight:700;

    margin-bottom:15px;

}


.about-why-card p{

    color:#666;

    line-height:1.8;

    margin:0;

    font-size:14px;

}


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

.about-cta-section{

    padding:100px 0;

    background:#f8f8f8;

}


.about-cta-box{

    background:#111;

    color:#fff;

    border-radius:25px;

    padding:65px 40px;

    text-align:center;

}


.about-cta-box h2{

    max-width:800px;

    margin:25px auto 18px;

    font-size:48px;

    font-weight:800;

    line-height:1.2;

}


.about-cta-box p{

    max-width:700px;

    margin:auto;

    color:#ccc;

    font-size:17px;

    line-height:1.8;

}


.about-cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:30px;

}


.about-cta-buttons .btn{

    border-radius:50px;

    padding:14px 30px;

}


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

@media(max-width:991px){

    .about-page-hero{

        padding:140px 0 80px;

    }


    .about-page-hero h1{

        font-size:45px;

    }


    .about-hero-visual{

        margin-top:20px;

    }


    .about-intro-section,
    .mission-section,
    .values-section,
    .about-expertise-section,
    .about-approach-section,
    .about-why-section{

        padding:90px 0;

    }


    .about-cta-box h2{

        font-size:38px;

    }


    .about-process-card{

        margin-top:20px;

    }

}


@media(max-width:767px){

    .about-page-hero{

        padding:120px 0 70px;

        text-align:center;

    }


    .about-page-hero h1{

        font-size:35px;

    }


    .about-page-hero p{

        font-size:16px;

    }


    .about-hero-buttons{

        justify-content:center;

    }


    .about-hero-visual{

        min-height:350px;

    }


    .about-hero-main-card{

        width:270px;

        min-height:290px;

        padding:30px;

    }


    .about-hero-main-card h3{

        font-size:25px;

    }


    .about-floating-card{

        padding:10px 13px;

        font-size:11px;

    }


    .about-float-one{

        left:0;

    }


    .about-float-two{

        right:0;

    }


    .about-float-three{

        left:3%;

        bottom:10px;

    }


    .about-intro-visual{

        min-height:390px;

    }


    .about-image-placeholder{

        min-height:350px;

    }


    .about-experience-card{

        right:0;

        bottom:5px;

    }


    .about-check-list{

        grid-template-columns:1fr;

    }


    .mission-card{

        padding:35px 25px;

    }


    .mission-card h3{

        font-size:25px;

    }


    .value-card{

        padding:30px 22px;

    }


    .about-process-card{

        padding:30px 25px;

    }


    .about-process-line{

        left:54px;

        top:58px;

        bottom:58px;

    }


    .about-process-number{

        width:48px;

        height:48px;

        min-width:48px;

        font-size:11px;

    }


    .about-process-step{

        gap:15px;

        margin-bottom:28px;

    }


    .about-process-step h5{

        font-size:17px;

    }


    .about-process-step p{

        font-size:13px;

    }


    .about-cta-section{

        padding:70px 0;

    }


    .about-cta-box{

        padding:45px 25px;

    }


    .about-cta-box h2{

        font-size:32px;

    }


    .about-cta-box p{

        font-size:15px;

    }


    .about-cta-buttons .btn{

        width:100%;

    }

}


@media(max-width:575px){

    .about-page-hero h1{

        font-size:31px;

    }


    .about-hero-main-card{

        width:235px;

        min-height:255px;

    }


    .about-hero-icon{

        width:70px;

        height:70px;

        font-size:28px;

    }


    .about-hero-main-card h3{

        font-size:22px;

    }


    .about-hero-main-card p{

        font-size:12px;

    }


    .about-floating-card{

        display:none;

    }


    .about-experience-card{

        width:140px;

        height:120px;

    }


    .about-experience-card strong{

        font-size:23px;

    }

}


/*=====================================
PRIVACY HERO
======================================*/

.privacy-hero{

    padding:170px 0 100px;

    background:#f8f8f8;

    border-bottom:1px solid #ececec;

}


.privacy-hero-content{

    max-width:850px;

}


.privacy-hero h1{

    font-size:58px;

    font-weight:800;

    color:#111;

    margin:20px 0;

    line-height:1.15;

}


.privacy-hero p{

    max-width:760px;

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:25px;

}


.privacy-updated{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:50px;

    padding:11px 18px;

    color:#555;

    font-size:14px;

    font-weight:600;

}


.privacy-updated i{

    color:#111;

}


/*=====================================
PRIVACY SECTION
======================================*/

.privacy-section{

    padding:100px 0;

    background:#fff;

}


/*=====================================
PRIVACY SIDEBAR
======================================*/

.privacy-sidebar{

    position:sticky;

    top:110px;

    background:#f8f8f8;

    border:1px solid #ececec;

    border-radius:20px;

    padding:30px 25px;

}


.privacy-sidebar h5{

    font-size:18px;

    font-weight:700;

    margin-bottom:20px;

}


.privacy-sidebar ul{

    list-style:none;

    padding:0;

    margin:0;

}


.privacy-sidebar li{

    margin-bottom:4px;

}


.privacy-sidebar a{

    display:block;

    padding:10px 12px;

    border-radius:8px;

    text-decoration:none;

    color:#666;

    font-size:14px;

    font-weight:500;

    transition:.3s;

}


.privacy-sidebar a:hover{

    background:#111;

    color:#fff;

    padding-left:17px;

}


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

.privacy-content{

    max-width:850px;

}


.privacy-block{

    padding-bottom:55px;

    margin-bottom:55px;

    border-bottom:1px solid #ececec;

    scroll-margin-top:110px;

}


.privacy-block:last-child{

    border-bottom:none;

    margin-bottom:0;

}


.privacy-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    background:#111;

    color:#fff;

    border-radius:10px;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}


.privacy-block h2{

    font-size:32px;

    font-weight:800;

    color:#111;

    margin-bottom:22px;

}


.privacy-block p{

    color:#666;

    font-size:16px;

    line-height:1.9;

    margin-bottom:18px;

}


.privacy-block p:last-child{

    margin-bottom:0;

}


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

.privacy-block ul{

    margin:20px 0;

    padding-left:22px;

}


.privacy-block ul li{

    color:#666;

    font-size:16px;

    line-height:1.9;

    margin-bottom:10px;

    padding-left:5px;

}


.privacy-block ul li::marker{

    color:#111;

}


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

.privacy-contact-block{

    padding:40px;

    background:#f8f8f8;

    border:1px solid #ececec;

    border-radius:22px;

}


.privacy-contact-block .privacy-number{

    background:#111;

}


.privacy-contact-box{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:18px;

    padding:25px;

    margin-top:30px;

}


.privacy-contact-box > div{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px 0;

    border-bottom:1px solid #eee;

}


.privacy-contact-box > div:first-child{

    padding-top:0;

}


.privacy-contact-box > div:last-child{

    padding-bottom:0;

    border-bottom:none;

}


.privacy-contact-box > div > i{

    width:42px;

    height:42px;

    min-width:42px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}


.privacy-contact-box strong{

    display:block;

    color:#111;

    font-size:14px;

    margin-bottom:4px;

}


.privacy-contact-box span{

    display:block;

    color:#777;

    font-size:14px;

    line-height:1.6;

}


.privacy-contact-box a{

    color:#111;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

}


.privacy-contact-box a:hover{

    text-decoration:underline;

}


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

.privacy-section + .cta-section{

    margin-top:0;

}


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

@media(max-width:991px){

    .privacy-hero{

        padding:140px 0 80px;

    }


    .privacy-hero h1{

        font-size:46px;

    }


    .privacy-section{

        padding:80px 0;

    }


    .privacy-sidebar{

        position:relative;

        top:auto;

        margin-bottom:10px;

    }


    .privacy-sidebar ul{

        display:grid;

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

        gap:3px;

    }

}


@media(max-width:767px){

    .privacy-hero{

        padding:120px 0 70px;

    }


    .privacy-hero h1{

        font-size:36px;

    }


    .privacy-hero p{

        font-size:16px;

    }


    .privacy-section{

        padding:65px 0;

    }


    .privacy-sidebar{

        padding:22px 18px;

    }


    .privacy-sidebar ul{

        grid-template-columns:1fr;

    }


    .privacy-block{

        padding-bottom:40px;

        margin-bottom:40px;

    }


    .privacy-block h2{

        font-size:27px;

    }


    .privacy-block p,
    .privacy-block ul li{

        font-size:15px;

    }


    .privacy-contact-block{

        padding:25px 20px;

    }


    .privacy-contact-box{

        padding:20px;

    }


    .privacy-contact-box > div{

        gap:12px;

    }

}


@media(max-width:575px){

    .privacy-hero h1{

        font-size:32px;

    }


    .privacy-updated{

        font-size:12px;

    }


    .privacy-block h2{

        font-size:24px;

    }

}

/*==================================================
    TERMS & CONDITIONS PAGE
==================================================*/


/*=====================================
TERMS HERO
======================================*/

.terms-hero{

    padding:170px 0 100px;

    background:#f8f8f8;

    border-bottom:1px solid #ececec;

}


.terms-hero-content{

    max-width:850px;

}


.terms-hero h1{

    font-size:58px;

    font-weight:800;

    color:#111;

    margin:20px 0;

    line-height:1.15;

}


.terms-hero p{

    max-width:760px;

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:25px;

}


.terms-updated{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:50px;

    padding:11px 18px;

    color:#555;

    font-size:14px;

    font-weight:600;

}


.terms-updated i{

    color:#111;

}


/*=====================================
TERMS SECTION
======================================*/

.terms-section{

    padding:100px 0;

    background:#fff;

}


/*=====================================
TERMS SIDEBAR
======================================*/

.terms-sidebar{

    position:sticky;

    top:110px;

    background:#f8f8f8;

    border:1px solid #ececec;

    border-radius:20px;

    padding:30px 25px;

}


.terms-sidebar h5{

    font-size:18px;

    font-weight:700;

    margin-bottom:20px;

}


.terms-sidebar ul{

    list-style:none;

    padding:0;

    margin:0;

}


.terms-sidebar li{

    margin-bottom:4px;

}


.terms-sidebar a{

    display:block;

    padding:10px 12px;

    border-radius:8px;

    text-decoration:none;

    color:#666;

    font-size:14px;

    font-weight:500;

    transition:.3s;

}


.terms-sidebar a:hover,
.terms-sidebar a.active{

    background:#111;

    color:#fff;

    padding-left:17px;

}


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

.terms-content{

    max-width:850px;

}


.terms-block{

    padding-bottom:55px;

    margin-bottom:55px;

    border-bottom:1px solid #ececec;

    scroll-margin-top:110px;

}


.terms-block:last-child{

    border-bottom:none;

    margin-bottom:0;

}


.terms-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    background:#111;

    color:#fff;

    border-radius:10px;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}


.terms-block h2{

    font-size:32px;

    font-weight:800;

    color:#111;

    margin-bottom:22px;

}


.terms-block p{

    color:#666;

    font-size:16px;

    line-height:1.9;

    margin-bottom:18px;

}


.terms-block p:last-child{

    margin-bottom:0;

}


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

.terms-block ul{

    margin:20px 0;

    padding-left:22px;

}


.terms-block ul li{

    color:#666;

    font-size:16px;

    line-height:1.9;

    margin-bottom:10px;

    padding-left:5px;

}


.terms-block ul li::marker{

    color:#111;

}


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

.terms-contact-block{

    padding:40px;

    background:#f8f8f8;

    border:1px solid #ececec;

    border-radius:22px;

}


.terms-contact-box{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:18px;

    padding:25px;

    margin-top:30px;

}


.terms-contact-box > div{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px 0;

    border-bottom:1px solid #eee;

}


.terms-contact-box > div:first-child{

    padding-top:0;

}


.terms-contact-box > div:last-child{

    padding-bottom:0;

    border-bottom:none;

}


.terms-contact-box > div > i{

    width:42px;

    height:42px;

    min-width:42px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}


.terms-contact-box strong{

    display:block;

    color:#111;

    font-size:14px;

    margin-bottom:4px;

}


.terms-contact-box span{

    display:block;

    color:#777;

    font-size:14px;

    line-height:1.6;

}


.terms-contact-box a{

    color:#111;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

}


.terms-contact-box a:hover{

    text-decoration:underline;

}


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

@media(max-width:991px){

    .terms-hero{

        padding:140px 0 80px;

    }


    .terms-hero h1{

        font-size:46px;

    }


    .terms-section{

        padding:80px 0;

    }


    .terms-sidebar{

        position:relative;

        top:auto;

        margin-bottom:10px;

    }


    .terms-sidebar ul{

        display:grid;

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

        gap:3px;

    }

}


@media(max-width:767px){

    .terms-hero{

        padding:120px 0 70px;

    }


    .terms-hero h1{

        font-size:36px;

    }


    .terms-hero p{

        font-size:16px;

    }


    .terms-section{

        padding:65px 0;

    }


    .terms-sidebar{

        padding:22px 18px;

    }


    .terms-sidebar ul{

        grid-template-columns:1fr;

    }


    .terms-block{

        padding-bottom:40px;

        margin-bottom:40px;

    }


    .terms-block h2{

        font-size:27px;

    }


    .terms-block p,
    .terms-block ul li{

        font-size:15px;

    }


    .terms-contact-block{

        padding:25px 20px;

    }


    .terms-contact-box{

        padding:20px;

    }


    .terms-contact-box > div{

        gap:12px;

    }

}


@media(max-width:575px){

    .terms-hero h1{

        font-size:32px;

    }


    .terms-updated{

        font-size:12px;

    }


    .terms-block h2{

        font-size:24px;

    }

}

/*==================================================
BLOG PAGE
UNIQUE EDITORIAL DESIGN
==================================================*/


/*==================================================
BLOG HERO
==================================================*/

.unique-blog-hero{

    padding:170px 0 100px;

    background:#111;

    color:#fff;

    position:relative;

    overflow:hidden;

}


.unique-blog-hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

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

    border-radius:50%;

    right:-250px;

    top:-300px;

}


.unique-blog-hero::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

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

    border-radius:50%;

    right:-80px;

    bottom:-200px;

}


.blog-hero-top{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:80px;

    align-items:end;

}


.editorial-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:11px;

    letter-spacing:3px;

    font-weight:700;

    color:#999;

}


.editorial-label::before{

    content:"";

    width:30px;

    height:1px;

    background:#fff;

}


.unique-blog-hero h1{

    font-family:"Manrope",sans-serif;

    font-size:78px;

    line-height:1;

    font-weight:800;

    letter-spacing:-4px;

    margin:25px 0 0;

}


.unique-blog-hero h1 span{

    color:#777;

    display:block;

}


.hero-intro{

    padding-bottom:7px;

}


.hero-intro p{

    color:#aaa;

    font-size:17px;

    line-height:1.8;

    max-width:390px;

    margin-bottom:30px;

}


.hero-scroll{

    display:inline-flex;

    align-items:center;

    gap:15px;

    color:#fff;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

}


.hero-scroll i{

    width:40px;

    height:40px;

    border:1px solid #444;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}


.hero-scroll:hover{

    color:#fff;

}


.hero-scroll:hover i{

    background:#fff;

    color:#111;

}


/*==================================================
TICKER
==================================================*/

.insight-ticker{

    background:#fff;

    border-bottom:1px solid #e8e8e8;

    border-top:1px solid #e8e8e8;

    overflow:hidden;

    white-space:nowrap;

}


.ticker-inner{

    display:inline-flex;

    align-items:center;

    min-width:max-content;

    padding:17px 0;

    animation:blogTicker 28s linear infinite;

}


.ticker-inner span{

    margin:0 28px;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    color:#555;

}


.ticker-inner i{

    font-size:5px;

    color:#aaa;

}


@keyframes blogTicker{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


/*==================================================
FEATURED ARTICLE
==================================================*/

.editorial-featured{

    padding:120px 0;

    background:#fff;

}


.featured-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    min-height:600px;

}


.featured-visual{

    background:#e9e9e9;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}


.featured-visual::before{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

    border:1px solid #ccc;

    border-radius:50%;

}


.featured-visual::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border:1px solid #ccc;

    border-radius:50%;

}


.featured-number{

    position:absolute;

    top:30px;

    left:30px;

    font-family:"Manrope",sans-serif;

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

}


.featured-visual-icon{

    position:relative;

    z-index:2;

    width:130px;

    height:130px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:45px;

    box-shadow:0 30px 70px rgba(0,0,0,.2);

}


.featured-image-text{

    position:absolute;

    right:30px;

    bottom:30px;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    line-height:1.6;

    text-align:right;

}


.featured-copy{

    background:#f6f6f6;

    padding:75px 65px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.article-meta{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

    color:#888;

    margin-bottom:25px;

}


.article-meta span{

    color:#111;

}


.featured-copy h2{

    font-family:"Manrope",sans-serif;

    font-size:44px;

    line-height:1.2;

    letter-spacing:-1.5px;

    font-weight:800;

    color:#111;

    margin-bottom:25px;

}


.featured-copy > p{

    font-size:16px;

    line-height:1.9;

    color:#666;

    max-width:530px;

    margin-bottom:35px;

}


.featured-author{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:35px;

}


.author-avatar{

    width:44px;

    height:44px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:800;

}


.featured-author strong{

    display:block;

    font-size:13px;

    color:#111;

}


.featured-author span{

    display:block;

    font-size:11px;

    color:#999;

    margin-top:3px;

}


.editorial-read{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    max-width:450px;

    padding:18px 0;

    border-top:1px solid #ddd;

    border-bottom:1px solid #ddd;

    color:#111;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

}


.editorial-read span{

    width:42px;

    height:42px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}


.editorial-read:hover{

    color:#111;

}


.editorial-read:hover span{

    transform:rotate(45deg);

}


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

.category-section{

    padding:0 0 70px;

    background:#fff;

}


.category-wrapper{

    border-top:1px solid #ddd;

    border-bottom:1px solid #ddd;

    padding:22px 0;

    display:flex;

    align-items:center;

    gap:40px;

}


.category-title{

    font-size:10px;

    letter-spacing:2px;

    font-weight:800;

    white-space:nowrap;

}


.category-list{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.topic-filter{

    border:1px solid #ddd;

    background:#fff;

    color:#555;

    padding:9px 18px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    transition:.3s;

}


.topic-filter:hover,
.topic-filter.active{

    background:#111;

    border-color:#111;

    color:#fff;

}


/*==================================================
POSTS SECTION
==================================================*/

.editorial-posts{

    background:#f5f5f5;

    padding:110px 0 120px;

}


.posts-header{

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:55px;

}


.posts-header h2{

    font-family:"Manrope",sans-serif;

    font-size:50px;

    font-weight:800;

    letter-spacing:-2px;

    margin:15px 0 0;

}


.post-search{

    width:300px;

    height:50px;

    background:#fff;

    border:1px solid #ddd;

    display:flex;

    align-items:center;

    padding:0 16px;

}


.post-search i{

    color:#888;

    font-size:13px;

}


.post-search input{

    border:none;

    outline:none;

    width:100%;

    height:100%;

    padding-left:12px;

    font-size:13px;

    background:transparent;

}


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

.editorial-grid{

    display:grid;

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

    gap:1px;

    background:#ddd;

    border:1px solid #ddd;

}


.editorial-card{

    background:#fff;

    min-height:500px;

    display:flex;

    flex-direction:column;

    transition:.35s;

}


.editorial-card:hover{

    position:relative;

    z-index:2;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}


.editorial-card.large-card{

    grid-column:span 2;

    display:grid;

    grid-template-columns:1fr 1fr;

}


.card-visual{

    min-height:270px;

    background:#111;

    color:#fff;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.editorial-card:not(.large-card)
.card-visual{

    min-height:300px;

}


.card-visual::before{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

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

    border-radius:50%;

    transition:.5s;

}


.card-visual::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

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

    border-radius:50%;

    transition:.5s;

}


.editorial-card:hover .card-visual::before{

    transform:scale(1.4);

}


.editorial-card:hover .card-visual::after{

    transform:scale(.7);

}


.card-visual > i{

    position:relative;

    z-index:2;

    font-size:55px;

}


.article-index{

    position:absolute;

    left:22px;

    top:20px;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    color:#888;

}


.visual-label{

    position:absolute;

    right:22px;

    bottom:20px;

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;

    color:#aaa;

}


.card-content{

    padding:35px;

    display:flex;

    flex-direction:column;

    flex:1;

}


.card-content .article-meta{

    margin-bottom:20px;

}


.card-content h3{

    font-family:"Manrope",sans-serif;

    font-size:25px;

    line-height:1.35;

    font-weight:800;

    letter-spacing:-.5px;

    margin-bottom:18px;

    color:#111;

}


.card-content p{

    color:#666;

    font-size:14px;

    line-height:1.8;

    margin-bottom:25px;

}


.card-arrow{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:auto;

    padding-top:20px;

    border-top:1px solid #eee;

    color:#111;

    text-decoration:none;

    font-size:12px;

    font-weight:800;

}


.card-arrow i{

    width:38px;

    height:38px;

    border:1px solid #ddd;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}


.card-arrow:hover{

    color:#111;

}


.card-arrow:hover i{

    background:#111;

    border-color:#111;

    color:#fff;

    transform:rotate(45deg);

}


/*==================================================
NO RESULTS
==================================================*/

.no-results{

    display:none;

    text-align:center;

    padding:80px 20px;

}


.no-results i{

    font-size:40px;

    margin-bottom:20px;

}


.no-results h4{

    font-size:22px;

    font-weight:700;

}


.no-results p{

    color:#777;

}


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

.insight-newsletter{

    padding:100px 0;

    background:#fff;

}


.newsletter-inner{

    background:#111;

    color:#fff;

    padding:60px;

    display:grid;

    grid-template-columns:auto 1fr 1fr;

    align-items:center;

    gap:45px;

}


.newsletter-symbol{

    width:80px;

    height:80px;

    border:1px solid #444;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}


.newsletter-copy > span{

    color:#999;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

}


.newsletter-copy h2{

    font-family:"Manrope",sans-serif;

    font-size:32px;

    font-weight:800;

    line-height:1.2;

    margin:10px 0;

}


.newsletter-copy p{

    color:#999;

    font-size:13px;

    line-height:1.7;

    margin:0;

}


.newsletter-input{

    height:55px;

    background:#fff;

    display:flex;

}


.newsletter-input input{

    flex:1;

    border:none;

    outline:none;

    padding:0 18px;

    font-size:13px;

    min-width:0;

}


.newsletter-input button{

    border:none;

    background:#525050;

    color:#fff;

    padding:0 22px;

    font-size:12px;

    font-weight:700;

}


.newsletter-input button i{

    margin-left:8px;

}


/*==================================================
FILTER STATE
==================================================*/

.editorial-card.filtered-out{

    display:none;

}


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

@media(max-width:1199px){

    .unique-blog-hero h1{

        font-size:65px;

    }


    .featured-copy{

        padding:50px;

    }


    .featured-copy h2{

        font-size:36px;

    }


    .newsletter-inner{

        grid-template-columns:auto 1fr;

    }


    .unique-newsletter-form{

        grid-column:span 2;

    }

}


@media(max-width:991px){

    .unique-blog-hero{

        padding:140px 0 80px;

    }


    .blog-hero-top{

        grid-template-columns:1fr;

        gap:35px;

    }


    .unique-blog-hero h1{

        font-size:55px;

    }


    .hero-intro p{

        max-width:600px;

    }


    .editorial-featured{

        padding:80px 0;

    }


    .featured-grid{

        grid-template-columns:1fr;

    }


    .featured-visual{

        min-height:450px;

    }


    .editorial-grid{

        grid-template-columns:1fr;

    }


    .editorial-card.large-card{

        grid-column:span 1;

        display:flex;

    }


    .posts-header{

        align-items:flex-start;

        flex-direction:column;

    }


    .post-search{

        width:100%;

    }


    .newsletter-inner{

        grid-template-columns:auto 1fr;

    }

}


@media(max-width:767px){

    .unique-blog-hero{

        padding:120px 0 70px;

    }


    .unique-blog-hero h1{

        font-size:43px;

        letter-spacing:-2px;

    }


    .featured-copy{

        padding:35px 25px;

    }


    .featured-copy h2{

        font-size:30px;

    }


    .featured-visual{

        min-height:350px;

    }


    .category-wrapper{

        align-items:flex-start;

        flex-direction:column;

        gap:20px;

    }


    .editorial-posts{

        padding:80px 0;

    }


    .posts-header h2{

        font-size:38px;

    }


    .card-content{

        padding:27px;

    }


    .newsletter-inner{

        padding:40px 25px;

        grid-template-columns:1fr;

        gap:25px;

    }


    .unique-newsletter-form{

        grid-column:auto;

    }


    .newsletter-copy h2{

        font-size:27px;

    }


    .newsletter-input{

        height:auto;

        flex-direction:column;

        background:transparent;

        gap:10px;

    }


    .newsletter-input input{

        height:52px;

    }


    .newsletter-input button{

        height:52px;

    }

}


@media(max-width:575px){

    .unique-blog-hero h1{

        font-size:36px;

    }


    .featured-visual{

        min-height:300px;

    }


    .featured-visual-icon{

        width:100px;

        height:100px;

        font-size:35px;

    }


    .featured-copy h2{

        font-size:26px;

    }


    .posts-header h2{

        font-size:32px;

    }


    .editorial-card:not(.large-card)
    .card-visual{

        min-height:240px;

    }


    .card-content h3{

        font-size:21px;

    }

}


/*==================================================
BLOG DETAILS
UNIQUE EDITORIAL ARTICLE DESIGN
==================================================*/


/*==================================================
ARTICLE HERO
==================================================*/

.article-hero{

    background:#111;

    color:#fff;

    padding:150px 0 90px;

}


.article-hero-inner{

    max-width:1050px;

    margin:auto;

}


.back-blog{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#999;

    text-decoration:none;

    font-size:12px;

    font-weight:600;

    margin-bottom:55px;

    transition:.3s;

}


.back-blog:hover{

    color:#fff;

}


.article-category{

    display:inline-block;

    border:1px solid #444;

    padding:8px 16px;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:25px;

}


.article-hero h1{

    font-family:"Manrope",sans-serif;

    font-size:68px;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-3px;

    max-width:1050px;

    margin-bottom:30px;

}


.article-intro{

    max-width:760px;

    font-size:18px;

    line-height:1.8;

    color:#aaa;

    margin-bottom:50px;

}


.article-information{

    display:flex;

    align-items:center;

    gap:30px;

    padding-top:25px;

    border-top:1px solid #333;

}


.article-author{

    display:flex;

    align-items:center;

    gap:12px;

}


.article-author-avatar{

    width:48px;

    height:48px;

    background:#fff;

    color:#111;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:800;

}


.article-author strong{

    display:block;

    font-size:13px;

}


.article-author span{

    display:block;

    font-size:10px;

    color:#888;

    margin-top:4px;

}


.article-info-divider{

    width:1px;

    height:40px;

    background:#333;

}


.article-date{

    display:flex;

    flex-direction:column;

    gap:4px;

}


.article-date span{

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#777;

}


.article-date strong{

    font-size:12px;

    font-weight:600;

}


/*==================================================
FEATURED VISUAL
==================================================*/

.article-featured-section{

    background:#111;

    padding-bottom:110px;

}


.article-featured-visual{

    height:580px;

    background:#e8e8e8;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.article-visual-circle{

    position:absolute;

    border:1px solid #c8c8c8;

    border-radius:50%;

}


.circle-one{

    width:500px;

    height:500px;

}


.circle-two{

    width:350px;

    height:350px;

}


.circle-three{

    width:200px;

    height:200px;

}


.article-visual-icon{

    width:150px;

    height:150px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:55px;

    position:relative;

    z-index:2;

    box-shadow:0 30px 70px rgba(0,0,0,.2);

}


.article-visual-label{

    position:absolute;

    bottom:30px;

    right:35px;

    text-align:right;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    line-height:1.6;

}


.article-visual-number{

    position:absolute;

    top:30px;

    left:35px;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


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

.article-content-section{

    padding:110px 0;

    background:#fff;

}


.article-layout{

    display:grid;

    grid-template-columns:minmax(0,760px) 280px;

    justify-content:center;

    gap:90px;

}


.article-content{

    font-family:"DM Sans",sans-serif;

}


.article-lead{

    font-family:"Manrope",sans-serif;

    font-size:23px;

    line-height:1.65;

    font-weight:600;

    color:#222;

    margin-bottom:35px;

}


.article-content p{

    color:#666;

    font-size:16px;

    line-height:1.95;

    margin-bottom:25px;

}


.article-content h2{

    font-family:"Manrope",sans-serif;

    font-size:34px;

    font-weight:800;

    letter-spacing:-1px;

    color:#111;

    margin:70px 0 25px;

}


.article-content h3{

    font-family:"Manrope",sans-serif;

    font-size:25px;

    font-weight:800;

    color:#111;

    margin:45px 0 20px;

}


/*==================================================
TABLE OF CONTENTS
==================================================*/

.article-toc{

    background:#f5f5f5;

    border-left:4px solid #111;

    padding:30px;

    margin:50px 0;

}


.toc-heading{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:800;

    font-size:14px;

    margin-bottom:20px;

}


.article-toc ol{

    margin:0;

    padding-left:20px;

}


.article-toc li{

    margin-bottom:12px;

    padding-left:5px;

}


.article-toc a{

    color:#555;

    text-decoration:none;

    font-size:14px;

}


.article-toc a:hover{

    color:#111;

}


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

.article-highlight{

    display:flex;

    gap:25px;

    padding:35px;

    background:#111;

    color:#fff;

    margin:45px 0;

}


.highlight-number{

    font-family:"Manrope",sans-serif;

    font-size:12px;

    font-weight:800;

    color:#777;

}


.article-highlight strong{

    display:block;

    font-family:"Manrope",sans-serif;

    font-size:23px;

    line-height:1.45;

    font-weight:700;

}


.article-highlight p{

    color:#999;

    margin:12px 0 0;

    font-size:14px;

}


/*==================================================
ARTICLE LIST
==================================================*/

.article-list{

    list-style:none;

    padding:10px 0;

    margin:25px 0 40px;

}


.article-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    font-size:15px;

    color:#444;

}


.article-list i{

    width:25px;

    height:25px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

}


/*==================================================
QUOTE
==================================================*/

.article-quote{

    border-top:1px solid #ddd;

    border-bottom:1px solid #ddd;

    padding:40px 0;

    margin:45px 0;

}


.article-quote i{

    font-size:25px;

    margin-bottom:15px;

}


.article-quote blockquote{

    font-family:"Manrope",sans-serif;

    font-size:28px;

    line-height:1.45;

    font-weight:700;

    color:#111;

    margin:0;

}


/*==================================================
NUMBER LIST
==================================================*/

.article-number-list{

    padding-left:0;

    list-style:none;

    counter-reset:articleCounter;

    margin:30px 0;

}


.article-number-list li{

    counter-increment:articleCounter;

    position:relative;

    padding:18px 0 18px 55px;

    border-bottom:1px solid #eee;

    font-size:15px;

    color:#555;

}


.article-number-list li::before{

    content:counter(articleCounter, decimal-leading-zero);

    position:absolute;

    left:0;

    top:15px;

    font-size:11px;

    font-weight:800;

    color:#999;

}


/*==================================================
FINAL MESSAGE
==================================================*/

.article-final-message{

    background:#f5f5f5;

    padding:40px;

    margin:60px 0 40px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.article-final-message strong{

    font-family:"Manrope",sans-serif;

    font-size:24px;

    font-weight:800;

    color:#111;

}


.article-final-message span{

    color:#777;

    font-size:14px;

    margin:8px 0 20px;

}


.article-final-message a{

    color:#111;

    font-size:13px;

    font-weight:800;

    text-decoration:none;

}


.article-final-message i{

    margin-left:8px;

}


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

.article-tags{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    padding:25px 0;

    border-top:1px solid #ddd;

}


.article-tags > span{

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    margin-right:5px;

}


.article-tags a{

    color:#555;

    text-decoration:none;

    background:#f2f2f2;

    padding:8px 13px;

    border-radius:30px;

    font-size:11px;

}


.article-tags a:hover{

    background:#111;

    color:#fff;

}


/*==================================================
SHARE
==================================================*/

.article-share{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:25px 0;

    border-top:1px solid #ddd;

}


.article-share > span{

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

}


.article-share > div{

    display:flex;

    gap:8px;

}


.article-share a,
.article-share button{

    width:38px;

    height:38px;

    border:1px solid #ddd;

    background:#fff;

    color:#111;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:12px;

    transition:.3s;

}


.article-share a:hover,
.article-share button:hover{

    background:#111;

    color:#fff;

    border-color:#111;

}


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

.article-sidebar{

    position:relative;

}


.sidebar-sticky{

    position:sticky;

    top:110px;

}


.article-side-box{

    border-top:1px solid #ddd;

    padding:25px 0;

}


.side-label{

    display:block;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    color:#888;

    margin-bottom:18px;

}


.vertical-share{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.vertical-share a{

    color:#555;

    text-decoration:none;

    font-size:12px;

    display:flex;

    align-items:center;

    gap:10px;

}


.vertical-share a:hover{

    color:#111;

}


.side-tags{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}


.side-tags a{

    padding:8px 11px;

    border:1px solid #ddd;

    color:#555;

    text-decoration:none;

    font-size:10px;

    border-radius:20px;

}


.side-tags a:hover{

    background:#111;

    color:#fff;

    border-color:#111;

}


.article-side-cta{

    background:#111;

    color:#fff;

    padding:30px;

}


.article-side-cta > span{

    color:#777;

    font-size:9px;

    letter-spacing:2px;

    font-weight:800;

}


.article-side-cta h4{

    font-family:"Manrope",sans-serif;

    font-size:25px;

    line-height:1.3;

    margin:15px 0 25px;

}


.article-side-cta a{

    color:#fff;

    text-decoration:none;

    font-size:11px;

    font-weight:700;

}


.article-side-cta i{

    margin-left:7px;

}


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

.article-navigation{

    background:#f5f5f5;

    padding:0;

}


.article-navigation-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

}


.article-nav{

    padding:50px 40px;

    color:#111;

    text-decoration:none;

    transition:.3s;

}


.article-nav:hover{

    background:#eaeaea;

    color:#111;

}


.article-nav.next{

    text-align:right;

    border-left:1px solid #ddd;

}


.article-nav span{

    display:block;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

    color:#888;

    margin-bottom:18px;

}


.article-nav strong{

    font-family:"Manrope",sans-serif;

    font-size:20px;

    line-height:1.4;

}


/*==================================================
RELATED
==================================================*/

.related-articles{

    padding:110px 0;

    background:#fff;

}


.related-heading{

    margin-bottom:50px;

}


.related-heading h2{

    font-family:"Manrope",sans-serif;

    font-size:45px;

    font-weight:800;

    letter-spacing:-2px;

    margin-top:15px;

}


.related-card{

    border:1px solid #ddd;

    height:100%;

    background:#fff;

    transition:.35s;

}


.related-card:hover{

    transform:translateY(-8px);

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

}


.related-visual{

    height:240px;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}


.related-visual > i{

    font-size:50px;

}


.related-visual > span{

    position:absolute;

    top:20px;

    left:20px;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    color:#777;

}


.related-content{

    padding:28px;

}


.related-content .article-meta{

    margin-bottom:15px;

}


.related-content h3{

    font-family:"Manrope",sans-serif;

    font-size:21px;

    line-height:1.4;

    font-weight:800;

    color:#111;

    margin-bottom:25px;

}


.related-content a{

    color:#111;

    text-decoration:none;

    font-size:12px;

    font-weight:800;

}


.related-content a i{

    margin-left:7px;

    transition:.3s;

}


.related-content a:hover i{

    transform:translateX(5px);

}


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

.insight-newsletter{

    padding:100px 0;

    background:#fff;

}


.newsletter-inner{

    background:#111;

    color:#fff;

    padding:60px;

    display:grid;

    grid-template-columns:auto 1fr 1fr;

    align-items:center;

    gap:45px;

}


.newsletter-symbol{

    width:80px;

    height:80px;

    border:1px solid #444;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}


.newsletter-copy > span{

    color:#999;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

}


.newsletter-copy h2{

    font-family:"Manrope",sans-serif;

    font-size:32px;

    font-weight:800;

    line-height:1.2;

    margin:10px 0;

}


.newsletter-copy p{

    color:#999;

    font-size:13px;

    line-height:1.7;

    margin:0;

}


.newsletter-input{

    height:55px;

    background:#fff;

    display:flex;

}


.newsletter-input input{

    flex:1;

    border:none;

    outline:none;

    padding:0 18px;

    font-size:13px;

    min-width:0;

}


.newsletter-input button{

    border:none;

    background:#111;

    color:#fff;

    padding:0 22px;

    font-size:12px;

    font-weight:700;

}


.newsletter-input button i{

    margin-left:8px;

}


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

@media(max-width:1199px){

    .article-hero h1{

        font-size:58px;

    }


    .article-layout{

        grid-template-columns:minmax(0,700px) 240px;

        gap:60px;

    }

}


@media(max-width:991px){

    .article-hero{

        padding:130px 0 75px;

    }


    .article-hero h1{

        font-size:48px;

        letter-spacing:-2px;

    }


    .article-information{

        flex-wrap:wrap;

    }


    .article-featured-section{

        padding-bottom:80px;

    }


    .article-featured-visual{

        height:450px;

    }


    .article-layout{

        display:block;

    }


    .article-sidebar{

        margin-top:70px;

    }


    .sidebar-sticky{

        position:relative;

        top:auto;

    }


    .article-side-box{

        display:none;

    }


    .article-side-cta{

        max-width:400px;

    }


    .newsletter-inner{

        grid-template-columns:auto 1fr;

    }

}


@media(max-width:767px){

    .article-hero{

        padding:115px 0 60px;

    }


    .back-blog{

        margin-bottom:35px;

    }


    .article-hero h1{

        font-size:38px;

        line-height:1.12;

    }


    .article-intro{

        font-size:16px;

    }


    .article-information{

        gap:20px;

        align-items:flex-start;

        flex-direction:column;

    }


    .article-info-divider{

        width:100%;

        height:1px;

    }


    .article-featured-visual{

        height:330px;

    }


    .circle-one{

        width:300px;

        height:300px;

    }


    .circle-two{

        width:220px;

        height:220px;

    }


    .circle-three{

        width:130px;

        height:130px;

    }


    .article-visual-icon{

        width:100px;

        height:100px;

        font-size:35px;

    }


    .article-content-section{

        padding:75px 0;

    }


    .article-lead{

        font-size:19px;

    }


    .article-content h2{

        font-size:28px;

        margin-top:55px;

    }


    .article-content h3{

        font-size:22px;

    }


    .article-highlight{

        padding:25px;

    }


    .article-highlight strong{

        font-size:19px;

    }


    .article-quote blockquote{

        font-size:23px;

    }


    .article-final-message{

        padding:30px 25px;

    }


    .article-navigation-grid{

        grid-template-columns:1fr;

    }


    .article-nav.next{

        text-align:left;

        border-left:none;

        border-top:1px solid #ddd;

    }


    .related-articles{

        padding:75px 0;

    }


    .related-heading h2{

        font-size:35px;

    }


    .newsletter-inner{

        grid-template-columns:1fr;

        padding:40px 25px;

        gap:25px;

    }

}


@media(max-width:575px){

    .article-hero h1{

        font-size:32px;

    }


    .article-category{

        font-size:9px;

    }


    .article-content p{

        font-size:15px;

    }


    .article-share{

        align-items:flex-start;

        flex-direction:column;

        gap:15px;

    }


    .related-visual{

        height:210px;

    }

}

/*==================================================
WEBSITE DEVELOPMENT PAGE
==================================================*/


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

.wd-hero{

    padding:170px 0 110px;

    background:#fff;

    overflow:hidden;

}


.wd-hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


.wd-label,
.wd-section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

    color:#777;

}


.wd-label::before,
.wd-section-label::before{

    content:"";

    width:28px;

    height:1px;

    background:#111;

}


.wd-hero h1{

    font-family:"Manrope",sans-serif;

    font-size:65px;

    line-height:1.05;

    letter-spacing:-3px;

    font-weight:800;

    margin:25px 0;

    color:#111;

}


.wd-hero h1 span{

    color:#777;

    display:block;

}


.wd-hero-content > p{

    color:#666;

    font-size:17px;

    line-height:1.9;

    max-width:620px;

    margin-bottom:32px;

}


.wd-hero-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}


.wd-hero-points{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:35px;

}


.wd-hero-points span{

    font-size:12px;

    font-weight:700;

    color:#555;

}


.wd-hero-points i{

    margin-right:6px;

    color:#111;

}


/*==================================================
HERO VISUAL
==================================================*/

.wd-hero-visual{

    min-height:540px;

    background:#f3f3f3;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.wd-hero-visual::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    border:1px solid #ddd;

    border-radius:50%;

}


.browser-window{

    width:470px;

    height:320px;

    background:#fff;

    border-radius:12px;

    position:relative;

    z-index:2;

    box-shadow:0 30px 70px rgba(0,0,0,.15);

    overflow:hidden;

}


.browser-top{

    height:38px;

    border-bottom:1px solid #eee;

    display:flex;

    align-items:center;

    padding:0 15px;

    gap:25px;

}


.browser-dots{

    display:flex;

    gap:5px;

}


.browser-dots span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#bbb;

}


.browser-url{

    flex:1;

    height:22px;

    background:#f4f4f4;

    border-radius:20px;

    font-size:8px;

    color:#999;

    display:flex;

    align-items:center;

    padding-left:12px;

}


.browser-content{

    display:flex;

    height:calc(100% - 38px);

}


.browser-sidebar{

    width:70px;

    background:#111;

}


.browser-main{

    flex:1;

    padding:35px 25px;

}


.browser-line{

    height:10px;

    background:#ddd;

    margin-bottom:12px;

    border-radius:10px;

}


.browser-line.large{

    width:70%;

    height:25px;

    background:#111;

}


.browser-line.medium{

    width:80%;

}


.browser-line.small{

    width:45%;

}


.browser-boxes{

    display:grid;

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

    gap:10px;

    margin-top:35px;

}


.browser-boxes div{

    height:90px;

    background:#eee;

    border-radius:8px;

}


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

.device-mobile{

    position:absolute;

    width:125px;

    height:245px;

    background:#111;

    border-radius:22px;

    right:30px;

    bottom:35px;

    z-index:4;

    padding:8px;

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

}


.mobile-speaker{

    position:absolute;

    top:5px;

    left:50%;

    transform:translateX(-50%);

    width:35px;

    height:4px;

    background:#333;

    border-radius:10px;

}


.mobile-screen{

    width:100%;

    height:100%;

    background:#fff;

    border-radius:16px;

    padding:22px 10px 10px;

}


.mobile-header{

    height:10px;

    background:#111;

    border-radius:10px;

    margin-bottom:18px;

}


.mobile-title{

    height:20px;

    width:75%;

    background:#111;

    border-radius:5px;

    margin-bottom:10px;

}


.mobile-text{

    height:7px;

    width:90%;

    background:#ddd;

    border-radius:10px;

    margin-bottom:5px;

}


.mobile-button{

    width:55px;

    height:20px;

    background:#111;

    border-radius:20px;

    margin:18px 0;

}


.mobile-card{

    height:45px;

    background:#eee;

    border-radius:6px;

    margin-bottom:8px;

}


.visual-badge{

    position:absolute;

    z-index:5;

    background:#fff;

    border:1px solid #ddd;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    padding:13px 17px;

    border-radius:30px;

    font-size:10px;

    font-weight:800;

}


.visual-badge i{

    margin-right:7px;

}


.badge-responsive{

    left:25px;

    top:70px;

}


.badge-speed{

    right:25px;

    top:35px;

}


/*==================================================
INTRO
==================================================*/

.wd-intro{

    padding:110px 0;

    background:#f7f7f7;

}


.wd-intro h2{

    font-family:"Manrope",sans-serif;

    font-size:48px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-2px;

    margin-top:20px;

}


.wd-intro p{

    color:#666;

    line-height:1.9;

    font-size:16px;

}


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

.wd-heading{

    max-width:800px;

    margin:0 auto;

}


.wd-heading h2{

    font-family:"Manrope",sans-serif;

    font-size:48px;

    font-weight:800;

    letter-spacing:-2px;

    line-height:1.15;

    margin:18px 0;

}


.wd-heading p{

    color:#666;

    line-height:1.8;

    max-width:650px;

    margin:0 auto;

}


/*==================================================
WEBSITE TYPES
==================================================*/

.wd-types{

    padding:120px 0;

    background:#fff;

}


.wd-type-card{

    border:1px solid #e4e4e4;

    padding:35px;

    min-height:340px;

    position:relative;

    background:#fff;

    transition:.35s;

    overflow:hidden;

}


.wd-type-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.08);

}


.type-number{

    position:absolute;

    right:25px;

    top:22px;

    color:#ccc;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


.type-icon{

    width:65px;

    height:65px;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:25px;

    margin-bottom:30px;

    transition:.3s;

}


.wd-type-card:hover .type-icon{

    transform:rotate(8deg) scale(1.05);

}


.wd-type-card h4{

    font-family:"Manrope",sans-serif;

    font-size:23px;

    font-weight:800;

    margin-bottom:15px;

}


.wd-type-card p{

    color:#666;

    line-height:1.8;

    font-size:14px;

}


.wd-type-card a{

    color:#111;

    text-decoration:none;

    font-size:12px;

    font-weight:800;

    position:absolute;

    bottom:30px;

}


.wd-type-card a i{

    margin-left:8px;

    transition:.3s;

}


.wd-type-card:hover a i{

    margin-left:14px;

}


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

.wd-responsive{

    background:#111;

    color:#fff;

    padding:120px 0;

    overflow:hidden;

}


.responsive-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}


.wd-responsive .wd-section-label{

    color:#888;

}


.wd-responsive .wd-section-label::before{

    background:#fff;

}


.responsive-content h2{

    font-family:"Manrope",sans-serif;

    font-size:55px;

    font-weight:800;

    line-height:1.05;

    letter-spacing:-2px;

    margin:22px 0;

}


.responsive-content h2 span{

    color:#777;

    display:block;

}


.responsive-content > p{

    color:#aaa;

    line-height:1.9;

    font-size:16px;

}


.responsive-features{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}


.responsive-features > div{

    padding:20px 0;

    border-top:1px solid #333;

}


.responsive-features i{

    display:block;

    font-size:22px;

    margin-bottom:15px;

}


.responsive-features strong{

    display:block;

    font-size:13px;

    margin-bottom:7px;

}


.responsive-features span{

    display:block;

    color:#777;

    font-size:11px;

    line-height:1.6;

}


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

.responsive-visual{

    min-height:500px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}


.responsive-desktop{

    width:470px;

    height:300px;

    background:#e9e9e9;

    border-radius:10px;

    padding:10px;

    position:absolute;

    left:20px;

    top:50px;

    box-shadow:0 30px 60px rgba(0,0,0,.4);

}


.screen-top{

    height:22px;

    background:#111;

    border-radius:5px 5px 0 0;

}


.screen-content{

    background:#fff;

    height:248px;

    padding:25px;

}


.screen-heading{

    width:55%;

    height:22px;

    background:#111;

    border-radius:5px;

    margin-bottom:12px;

}


.screen-line{

    width:75%;

    height:7px;

    background:#ddd;

    border-radius:10px;

    margin-bottom:7px;

}


.screen-line.short{

    width:45%;

}


.screen-grid{

    display:grid;

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

    gap:8px;

    margin-top:25px;

}


.screen-grid span{

    height:90px;

    background:#eee;

    border-radius:7px;

}


.responsive-tablet{

    position:absolute;

    width:230px;

    height:180px;

    background:#222;

    border:8px solid #333;

    border-radius:15px;

    right:10px;

    bottom:55px;

    z-index:3;

    box-shadow:0 25px 50px rgba(0,0,0,.4);

}


.tablet-content{

    height:100%;

    background:#fff;

    padding:15px;

}


.tablet-content div{

    width:60%;

    height:13px;

    background:#111;

    margin-bottom:10px;

}


.tablet-content span{

    display:block;

    width:80%;

    height:5px;

    background:#ddd;

    margin-bottom:5px;

}


.tablet-content strong{

    display:block;

    width:70px;

    height:20px;

    background:#111;

    margin-top:18px;

}


.responsive-phone{

    position:absolute;

    width:105px;

    height:210px;

    background:#000;

    border-radius:20px;

    padding:7px;

    left:80px;

    bottom:25px;

    z-index:4;

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

}


.phone-speaker{

    width:30px;

    height:4px;

    background:#444;

    border-radius:5px;

    position:absolute;

    top:5px;

    left:50%;

    transform:translateX(-50%);

}


.phone-content{

    background:#fff;

    height:100%;

    border-radius:15px;

    padding:22px 9px 8px;

}


.phone-header{

    width:100%;

    height:9px;

    background:#111;

    margin-bottom:15px;

}


.phone-title{

    width:70%;

    height:16px;

    background:#111;

    margin-bottom:10px;

}


.phone-text{

    width:90%;

    height:5px;

    background:#ddd;

    margin-bottom:5px;

}


.phone-button{

    width:45px;

    height:17px;

    background:#111;

    margin:15px 0;

}


.phone-card{

    height:50px;

    background:#eee;

    border-radius:5px;

}


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

.wd-features{

    padding:120px 0;

    background:#f7f7f7;

}


.wd-feature-box{

    background:#fff;

    padding:35px 25px;

    height:100%;

    border:1px solid #e8e8e8;

    transition:.35s;

}


.wd-feature-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.07);

}


.feature-icon{

    width:60px;

    height:60px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    margin-bottom:25px;

}


.wd-feature-box h4{

    font-family:"Manrope",sans-serif;

    font-size:19px;

    font-weight:800;

    margin-bottom:12px;

}


.wd-feature-box p{

    color:#666;

    line-height:1.8;

    font-size:14px;

}


/*==================================================
TECHNOLOGY
==================================================*/

.wd-technology{

    padding:120px 0;

    background:#fff;

}


.wd-technology h2{

    font-family:"Manrope",sans-serif;

    font-size:45px;

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1.5px;

    margin:20px 0;

}


.wd-technology > .container p{

    color:#666;

    line-height:1.9;

}


.technology-grid{

    display:grid;

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

    gap:12px;

}


.technology-grid > div{

    border:1px solid #e5e5e5;

    min-height:130px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:12px;

    transition:.3s;

}


.technology-grid > div:hover{

    background:#111;

    color:#fff;

}


.technology-grid i{

    font-size:30px;

}


.technology-grid span{

    font-size:11px;

    font-weight:700;

}


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

.wd-process{

    padding:120px 0;

    background:#f7f7f7;

}


.wd-process-line{

    display:grid;

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

    gap:20px;

    margin-top:65px;

    position:relative;

}


.wd-process-line::before{

    content:"";

    position:absolute;

    top:35px;

    left:10%;

    right:10%;

    height:1px;

    background:#ddd;

}


.wd-process-item{

    text-align:center;

    position:relative;

    z-index:2;

}


.wd-process-item > span{

    width:70px;

    height:70px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    font-size:11px;

    font-weight:800;

}


.wd-process-item i{

    font-size:25px;

    margin-bottom:15px;

}


.wd-process-item h4{

    font-family:"Manrope",sans-serif;

    font-size:18px;

    font-weight:800;

}


.wd-process-item p{

    color:#777;

    font-size:13px;

    line-height:1.7;

}


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

.wd-why{

    padding:120px 0;

    background:#fff;

}


.wd-why h2{

    font-family:"Manrope",sans-serif;

    font-size:48px;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-2px;

    margin:20px 0;

}


.wd-why > .container p{

    color:#666;

    line-height:1.9;

    max-width:500px;

    margin-bottom:30px;

}


.why-grid{

    display:grid;

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

    border-top:1px solid #ddd;

    border-left:1px solid #ddd;

}


.why-item{

    padding:35px;

    border-right:1px solid #ddd;

    border-bottom:1px solid #ddd;

}


.why-item span{

    font-size:10px;

    font-weight:800;

    color:#999;

    letter-spacing:2px;

}


.why-item strong{

    display:block;

    font-family:"Manrope",sans-serif;

    font-size:20px;

    margin:15px 0 10px;

}


.why-item p{

    font-size:13px !important;

    margin:0 !important;

}


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

.wd-faq{

    padding:120px 0;

    background:#f7f7f7;

}


.wd-accordion{

    max-width:850px;

    margin:55px auto 0;

}


.wd-accordion .accordion-item{

    border:none;

    border-bottom:1px solid #ddd;

    background:transparent;

}


.wd-accordion .accordion-button{

    background:transparent;

    box-shadow:none;

    border:none;

    color:#111;

    font-family:"Manrope",sans-serif;

    font-size:17px;

    font-weight:700;

    padding:25px 0;

}


.wd-accordion .accordion-button:not(.collapsed){

    color:#111;

    background:transparent;

}


.wd-accordion .accordion-body{

    padding:0 40px 25px 0;

    color:#666;

    font-size:14px;

    line-height:1.9;

}


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

.wd-cta{

    background:#262424d4;

    color:#fff;

    padding:110px 0;

    text-align:center;

}


.wd-cta-inner{

    max-width:850px;

    margin:auto;

}


.wd-cta .wd-section-label{

    color:#888;

}


.wd-cta .wd-section-label::before{

    background:#fff;

}


.wd-cta h2{

    font-family:"Manrope",sans-serif;

    font-size:55px;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-2px;

    margin:20px 0;

}


.wd-cta p{

    color:#aaa;

    font-size:17px;

    line-height:1.8;

    max-width:650px;

    margin:auto;

}


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

@media(max-width:1199px){

    .wd-hero h1{

        font-size:55px;

    }


    .wd-hero-grid{

        gap:40px;

    }


    .browser-window{

        width:400px;

    }


    .wd-process-line{

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

        row-gap:50px;

    }


    .wd-process-line::before{

        display:none;

    }

}


@media(max-width:991px){

    .wd-hero{

        padding-top:140px;

    }


    .wd-hero-grid,
    .responsive-grid{

        grid-template-columns:1fr;

    }


    .wd-hero-content{

        text-align:center;

    }


    .wd-hero-content > p{

        margin-left:auto;

        margin-right:auto;

    }


    .wd-hero-buttons,
    .wd-hero-points{

        justify-content:center;

    }


    .wd-hero-visual{

        margin-top:20px;

    }


    .wd-intro h2{

        font-size:40px;

    }


    .wd-heading h2{

        font-size:40px;

    }


    .responsive-content{

        text-align:center;

    }


    .responsive-content > p{

        max-width:700px;

        margin-left:auto;

        margin-right:auto;

    }


    .responsive-features{

        text-align:left;

    }


    .responsive-visual{

        margin-top:20px;

    }


    .technology-grid{

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

    }


    .wd-process-line{

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

    }


    .wd-why h2{

        font-size:40px;

    }


    .wd-cta h2{

        font-size:45px;

    }

}


@media(max-width:767px){

    .wd-hero{

        padding:120px 0 80px;

    }


    .wd-hero h1{

        font-size:42px;

        letter-spacing:-2px;

    }


    .wd-hero-points{

        gap:12px;

    }


    .wd-hero-visual{

        min-height:400px;

    }


    .browser-window{

        width:340px;

        height:240px;

    }


    .browser-boxes div{

        height:55px;

    }


    .device-mobile{

        width:100px;

        height:195px;

        right:15px;

        bottom:20px;

    }


    .badge-responsive{

        left:10px;

        top:35px;

    }


    .badge-speed{

        right:10px;

        top:15px;

    }


    .wd-intro,
    .wd-types,
    .wd-responsive,
    .wd-features,
    .wd-technology,
    .wd-process,
    .wd-why,
    .wd-faq{

        padding:80px 0;

    }


    .wd-heading h2{

        font-size:34px;

    }


    .responsive-content h2{

        font-size:42px;

    }


    .responsive-features{

        grid-template-columns:1fr;

    }


    .responsive-desktop{

        width:330px;

        height:220px;

        left:50%;

        transform:translateX(-50%);

    }


    .screen-content{

        height:180px;

        padding:15px;

    }


    .screen-grid span{

        height:50px;

    }


    .responsive-tablet{

        width:180px;

        height:140px;

        right:0;

        bottom:35px;

    }


    .responsive-phone{

        width:85px;

        height:170px;

        left:20px;

        bottom:10px;

    }


    .technology-grid{

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

    }


    .wd-process-line{

        grid-template-columns:1fr;

        gap:35px;

    }


    .why-grid{

        grid-template-columns:1fr;

    }


    .wd-why h2{

        font-size:36px;

    }


    .wd-cta h2{

        font-size:36px;

    }


    .wd-cta .btn{

        width:100%;

        margin:0 0 12px !important;

    }

}


@media(max-width:575px){

    .wd-hero h1{

        font-size:36px;

    }


    .wd-hero-content > p{

        font-size:15px;

    }


    .wd-hero-visual{

        min-height:330px;

    }


    .browser-window{

        width:280px;

        height:190px;

    }


    .browser-main{

        padding:20px 15px;

    }


    .browser-boxes{

        margin-top:15px;

    }


    .browser-boxes div{

        height:40px;

    }


    .device-mobile{

        width:78px;

        height:155px;

    }


    .wd-intro h2{

        font-size:34px;

    }


    .wd-type-card{

        min-height:320px;

        padding:28px 25px;

    }


    .wd-technology h2{

        font-size:35px;

    }


    .technology-grid{

        gap:8px;

    }


    .technology-grid > div{

        min-height:110px;

    }


    .responsive-visual{

        min-height:400px;

    }


    .responsive-desktop{

        width:280px;

        height:185px;

    }


    .responsive-tablet{

        width:150px;

        height:115px;

    }


    .responsive-phone{

        width:72px;

        height:145px;

    }

}

/*==================================================
MOBILE APP DEVELOPMENT PAGE
==================================================*/


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

.mad-hero{

    padding:170px 0 110px;

    background:#fff;

    overflow:hidden;

}


.mad-hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


.mad-label,
.mad-section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

    color:#777;

}


.mad-label::before,
.mad-section-label::before{

    content:"";

    width:28px;

    height:1px;

    background:#111;

}


.mad-hero h1{

    font-family:"Manrope",sans-serif;

    font-size:64px;

    line-height:1.05;

    letter-spacing:-3px;

    font-weight:800;

    margin:25px 0;

    color:#111;

}


.mad-hero h1 span{

    display:block;

    color:#777;

}


.mad-hero-content > p{

    color:#666;

    font-size:17px;

    line-height:1.9;

    max-width:610px;

    margin-bottom:32px;

}


.mad-hero-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}


.mad-hero-points{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:35px;

}


.mad-hero-points span{

    font-size:12px;

    font-weight:700;

    color:#555;

}


.mad-hero-points i{

    color:#111;

    margin-right:6px;

}


/*==================================================
HERO APP VISUAL
==================================================*/

.mad-hero-visual{

    min-height:560px;

    background:#f4f4f4;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.app-glow{

    position:absolute;

    width:430px;

    height:430px;

    border:1px solid #ddd;

    border-radius:50%;

}


.app-glow::after{

    content:"";

    position:absolute;

    inset:45px;

    border:1px dashed #ddd;

    border-radius:50%;

}


.app-phone{

    position:absolute;

    width:190px;

    height:380px;

    background:#111;

    border-radius:32px;

    padding:8px;

    box-shadow:0 30px 70px rgba(0,0,0,.22);

}


.phone-back{

    transform:rotate(10deg);

    margin-left:160px;

    margin-top:-50px;

    opacity:.85;

}


.phone-front{

    transform:rotate(-5deg);

    margin-left:-60px;

    margin-top:40px;

    z-index:3;

}


.phone-speaker{

    position:absolute;

    width:45px;

    height:5px;

    background:#333;

    border-radius:10px;

    top:7px;

    left:50%;

    transform:translateX(-50%);

}


.app-screen{

    width:100%;

    height:100%;

    background:#fff;

    border-radius:25px;

    padding:28px 15px 15px;

    overflow:hidden;

}


.app-status{

    width:40px;

    height:4px;

    background:#ddd;

    margin-bottom:20px;

    border-radius:10px;

}


.app-nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}


.app-nav span:first-child{

    width:65px;

    height:10px;

    background:#111;

    border-radius:5px;

}


.app-nav span:last-child{

    width:22px;

    height:22px;

    background:#eee;

    border-radius:50%;

}


.app-heading{

    width:80%;

    height:22px;

    background:#111;

    border-radius:6px;

    margin-bottom:10px;

}


.app-subheading{

    width:55%;

    height:7px;

    background:#ddd;

    border-radius:10px;

}


.app-main-card{

    margin-top:25px;

    background:#f1f1f1;

    padding:10px;

    border-radius:12px;

}


.app-card-image{

    height:90px;

    background:#ddd;

    border-radius:8px;

}


.app-card-lines{

    padding:10px 2px 2px;

}


.app-card-lines span{

    display:block;

    height:5px;

    background:#bbb;

    border-radius:10px;

    margin-bottom:5px;

}


.app-card-lines span:first-child{

    width:75%;

}


.app-card-lines span:last-child{

    width:45%;

}


.app-small-cards{

    display:grid;

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

    gap:7px;

    margin-top:12px;

}


.app-small-cards span{

    height:55px;

    background:#eee;

    border-radius:8px;

}


.profile-circle{

    width:65px;

    height:65px;

    background:#111;

    border-radius:50%;

    margin:20px auto;

}


.app-heading.center{

    width:65%;

    margin:0 auto 10px;

}


.app-subheading.center{

    margin:0 auto;

}


.app-action{

    width:100%;

    height:42px;

    background:#111;

    border-radius:10px;

    margin-top:30px;

}


.app-action.light{

    background:#eee;

    margin-top:10px;

}


.app-floating-badge{

    position:absolute;

    background:#fff;

    border:1px solid #ddd;

    box-shadow:0 15px 35px rgba(0,0,0,.1);

    padding:12px 16px;

    border-radius:30px;

    font-size:11px;

    font-weight:800;

    z-index:6;

}


.app-floating-badge i{

    margin-right:7px;

}


.badge-android{

    top:70px;

    left:25px;

}


.badge-ios{

    top:150px;

    right:25px;

}


.badge-cloud{

    bottom:65px;

    right:20px;

}


/*==================================================
INTRO
==================================================*/

.mad-intro{

    padding:110px 0;

    background:#f7f7f7;

}


.mad-intro h2{

    font-family:"Manrope",sans-serif;

    font-size:48px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-2px;

    margin-top:20px;

}


.mad-intro p{

    color:#666;

    line-height:1.9;

    font-size:16px;

}


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

.mad-heading{

    max-width:800px;

    margin:0 auto;

}


.mad-heading h2{

    font-family:"Manrope",sans-serif;

    font-size:48px;

    line-height:1.15;

    letter-spacing:-2px;

    font-weight:800;

    margin:18px 0;

}


.mad-heading p{

    color:#666;

    line-height:1.8;

    max-width:680px;

    margin:auto;

}


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

.mad-services{

    padding:120px 0;

    background:#fff;

}


.mad-service-card{

    height:100%;

    min-height:410px;

    padding:35px;

    border:1px solid #e5e5e5;

    position:relative;

    transition:.35s;

    background:#fff;

}


.mad-service-card:hover{

    transform:translateY(-8px);

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

}


.service-number{

    position:absolute;

    top:25px;

    right:25px;

    color:#ccc;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


.mad-service-icon{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#111;

    color:#fff;

    font-size:28px;

    margin-bottom:30px;

    transition:.35s;

}


.mad-service-card:hover .mad-service-icon{

    transform:scale(1.08) rotate(5deg);

}


.mad-service-card h4{

    font-family:"Manrope",sans-serif;

    font-size:22px;

    font-weight:800;

    margin-bottom:15px;

}


.mad-service-card p{

    color:#666;

    font-size:14px;

    line-height:1.8;

}


.mad-service-card ul{

    list-style:none;

    padding:0;

    margin:20px 0 0;

}


.mad-service-card li{

    font-size:12px;

    color:#555;

    padding:7px 0;

    border-top:1px solid #eee;

}


.mad-service-card li::before{

    content:"✓";

    color:#111;

    font-weight:800;

    margin-right:8px;

}


/*==================================================
PLATFORMS
==================================================*/

.mad-platforms{

    padding:120px 0;

    background:#111;

    color:#fff;

    overflow:hidden;

}


.platform-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}


.mad-platforms .mad-section-label{

    color:#888;

}


.mad-platforms .mad-section-label::before{

    background:#fff;

}


.platform-content h2{

    font-family:"Manrope",sans-serif;

    font-size:52px;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    margin:20px 0;

}


.platform-content > p{

    color:#aaa;

    line-height:1.9;

    max-width:570px;

}


.platform-list{

    margin-top:40px;

}


.platform-list > div{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 0;

    border-top:1px solid #333;

}


.platform-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #444;

    border-radius:50%;

    font-size:20px;

}


.platform-list strong{

    display:block;

    font-size:15px;

    margin-bottom:4px;

}


.platform-list small{

    display:block;

    color:#777;

    font-size:11px;

}


.platform-visual{

    min-height:470px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}


.platform-card{

    width:480px;

    background:#fff;

    color:#111;

    border-radius:15px;

    padding:8px;

    transform:rotate(-3deg);

    box-shadow:0 30px 80px rgba(0,0,0,.4);

}


.platform-card-top{

    height:30px;

    display:flex;

    gap:5px;

    align-items:center;

    padding-left:10px;

}


.platform-card-top span{

    width:7px;

    height:7px;

    background:#bbb;

    border-radius:50%;

}


.platform-dashboard{

    background:#f5f5f5;

    padding:30px;

    min-height:330px;

}


.dashboard-title{

    width:45%;

    height:20px;

    background:#111;

    border-radius:5px;

}


.dashboard-line{

    width:70%;

    height:7px;

    background:#ddd;

    border-radius:10px;

    margin-top:12px;

}


.dashboard-line.short{

    width:45%;

    margin-top:7px;

}


.dashboard-stats{

    display:grid;

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

    gap:10px;

    margin-top:30px;

}


.dashboard-stats div{

    background:#fff;

    padding:15px;

    border-radius:8px;

}


.dashboard-stats strong{

    display:block;

    width:45px;

    height:18px;

    color:#111;

    border-radius:4px;

    margin-bottom:8px;

}


.dashboard-stats span{

    display:block;

    width:60px;

    height:5px;

    background:#ddd;

}


.dashboard-chart{

    height:100px;

    display:flex;

    align-items:end;

    gap:10px;

    margin-top:30px;

}


.dashboard-chart span{

    flex:1;

    background:#111;

    border-radius:5px 5px 0 0;

}


.dashboard-chart span:nth-child(1){

    height:35%;

}


.dashboard-chart span:nth-child(2){

    height:55%;

}


.dashboard-chart span:nth-child(3){

    height:40%;

}


.dashboard-chart span:nth-child(4){

    height:75%;

}


.dashboard-chart span:nth-child(5){

    height:60%;

}


.dashboard-chart span:nth-child(6){

    height:90%;

}


.platform-circle{

    position:absolute;

    width:105px;

    height:105px;

    border-radius:50%;

    background:#fff;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    right:10px;

    bottom:30px;

    box-shadow:0 20px 50px rgba(0,0,0,.3);

}


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

.mad-features{

    padding:120px 0;

    background:#f7f7f7;

}


.mad-feature-card{

    background:#fff;

    border:1px solid #e7e7e7;

    padding:30px 25px;

    height:100%;

    transition:.35s;

}


.mad-feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.07);

}


.mad-feature-card > div{

    width:58px;

    height:58px;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    margin-bottom:22px;

}


.mad-feature-card h4{

    font-family:"Manrope",sans-serif;

    font-size:18px;

    font-weight:800;

}


.mad-feature-card p{

    color:#666;

    font-size:13px;

    line-height:1.8;

}


/*==================================================
TECHNOLOGY
==================================================*/

.mad-technology{

    padding:120px 0;

    background:#fff;

}


.mad-technology h2{

    font-family:"Manrope",sans-serif;

    font-size:45px;

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1.5px;

    margin:20px 0;

}


.mad-technology > .container p{

    color:#666;

    line-height:1.9;

    max-width:520px;

}


.mad-tech-grid{

    display:grid;

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

    gap:12px;

}


.mad-tech-grid > div{

    min-height:130px;

    border:1px solid #e5e5e5;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:12px;

    transition:.3s;

}


.mad-tech-grid > div:hover{

    background:#111;

    color:#fff;

}


.mad-tech-grid i{

    font-size:30px;

}


.mad-tech-grid span{

    font-size:11px;

    font-weight:700;

}


/*==================================================
UI UX
==================================================*/

.mad-ux{

    padding:120px 0;

    background:#f7f7f7;

}


.mad-ux h2{

    font-family:"Manrope",sans-serif;

    font-size:48px;

    line-height:1.1;

    letter-spacing:-2px;

    font-weight:800;

    margin:20px 0;

}


.mad-ux > .container p{

    color:#666;

    line-height:1.9;

}


.ux-visual{

    height:500px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.ux-phone{

    width:220px;

    height:430px;

    padding:8px;

    background:#111;

    border-radius:35px;

    position:relative;

    z-index:2;

    transform:rotate(-7deg);

    box-shadow:0 30px 70px rgba(0,0,0,.2);

}


.ux-notch{

    width:55px;

    height:6px;

    background:#333;

    border-radius:10px;

    position:absolute;

    top:8px;

    left:50%;

    transform:translateX(-50%);

}


.ux-screen{

    width:100%;

    height:100%;

    border-radius:28px;

    background:#fff;

    padding:30px 20px;

}


.ux-top{

    width:50px;

    height:8px;

    background:#111;

    margin-bottom:35px;

}


.ux-avatar{

    width:60px;

    height:60px;

    background:#111;

    border-radius:50%;

    margin-bottom:25px;

}


.ux-title{

    width:75%;

    height:20px;

    background:#111;

    border-radius:5px;

    margin-bottom:12px;

}


.ux-line{

    width:90%;

    height:6px;

    background:#ddd;

    border-radius:10px;

    margin-bottom:6px;

}


.ux-line.small{

    width:55%;

}


.ux-button{

    height:45px;

    background:#111;

    border-radius:10px;

    margin-top:30px;

}


.ux-content-card{

    height:80px;

    background:#eee;

    border-radius:10px;

    margin-top:15px;

}


.ux-circle{

    position:absolute;

    border-radius:50%;

    border:1px solid #ddd;

}


.circle-one{

    width:380px;

    height:380px;

}


.circle-two{

    width:480px;

    height:480px;

}


/*==================================================
UX POINTS
==================================================*/

.ux-points{

    margin-top:30px;

}


.ux-points div{

    display:inline-block;

    width:49%;

    padding:12px 0;

    font-size:13px;

    font-weight:600;

}


.ux-points i{

    margin-right:8px;

}


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

.mad-process{

    padding:120px 0;

    background:#fff;

}


.mad-process-grid{

    display:grid;

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

    gap:20px;

    margin-top:60px;

    position:relative;

}


.mad-process-grid::before{

    content:"";

    position:absolute;

    top:36px;

    left:10%;

    right:10%;

    height:1px;

    background:#ddd;

}


.mad-process-item{

    text-align:center;

    position:relative;

    z-index:2;

}


.mad-process-item > span{

    display:flex;

    width:72px;

    height:72px;

    background:#111;

    color:#fff;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:11px;

    font-weight:800;

}


.mad-process-icon{

    font-size:23px;

    margin-bottom:15px;

}


.mad-process-item h4{

    font-family:"Manrope",sans-serif;

    font-size:18px;

    font-weight:800;

}


.mad-process-item p{

    color:#777;

    font-size:13px;

    line-height:1.7;

}


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

.mad-why{

    padding:120px 0;

    background:#f7f7f7;

}


.mad-why h2{

    font-family:"Manrope",sans-serif;

    font-size:46px;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

    margin:20px 0;

}


.mad-why > .container p{

    color:#666;

    line-height:1.9;

    max-width:500px;

}


.mad-why-grid{

    display:grid;

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

    border-top:1px solid #ddd;

    border-left:1px solid #ddd;

}


.mad-why-grid > div{

    padding:35px;

    border-right:1px solid #ddd;

    border-bottom:1px solid #ddd;

}


.mad-why-grid span{

    color:#999;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

}


.mad-why-grid h4{

    font-family:"Manrope",sans-serif;

    font-size:20px;

    font-weight:800;

    margin:15px 0 10px;

}


.mad-why-grid p{

    margin:0 !important;

    font-size:13px;

}


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

.mad-faq{

    padding:120px 0;

    background:#fff;

}


.mad-accordion{

    max-width:850px;

    margin:55px auto 0;

}


.mad-accordion .accordion-item{

    border:none;

    border-bottom:1px solid #ddd;

    background:transparent;

}


.mad-accordion .accordion-button{

    background:transparent;

    box-shadow:none;

    padding:25px 0;

    font-family:"Manrope",sans-serif;

    font-size:17px;

    font-weight:700;

    color:#111;

}


.mad-accordion .accordion-button:not(.collapsed){

    background:transparent;

    color:#111;

}


.mad-accordion .accordion-body{

    padding:0 40px 25px 0;

    color:#666;

    font-size:14px;

    line-height:1.9;

}


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

.mad-cta{

    padding:110px 0;

    background:#111;

    color:#fff;

    text-align:center;

}


.mad-cta-inner{

    max-width:850px;

    margin:auto;

}


.mad-cta .mad-section-label{

    color:#888;

}


.mad-cta .mad-section-label::before{

    background:#fff;

}


.mad-cta h2{

    font-family:"Manrope",sans-serif;

    font-size:55px;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

    margin:20px 0;

}


.mad-cta p{

    color:#aaa;

    font-size:17px;

    line-height:1.8;

    max-width:650px;

    margin:auto;

}


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

@media(max-width:1199px){

    .mad-hero h1{

        font-size:52px;

    }


    .mad-hero-grid{

        gap:40px;

    }


    .mad-process-grid{

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

        row-gap:45px;

    }


    .mad-process-grid::before{

        display:none;

    }

}


@media(max-width:991px){

    .mad-hero{

        padding-top:140px;

    }


    .mad-hero-grid,
    .platform-grid{

        grid-template-columns:1fr;

    }


    .mad-hero-content{

        text-align:center;

    }


    .mad-hero-content > p{

        margin-left:auto;

        margin-right:auto;

    }


    .mad-hero-buttons,
    .mad-hero-points{

        justify-content:center;

    }


    .mad-hero-visual{

        margin-top:20px;

    }


    .mad-heading h2{

        font-size:40px;

    }


    .mad-intro h2{

        font-size:40px;

    }


    .platform-content{

        text-align:center;

    }


    .platform-content > p{

        margin-left:auto;

        margin-right:auto;

    }


    .platform-list{

        text-align:left;

    }


    .platform-visual{

        margin-top:20px;

    }


    .mad-tech-grid{

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

    }


    .mad-process-grid{

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

    }


    .mad-why h2{

        font-size:40px;

    }


    .mad-cta h2{

        font-size:45px;

    }

}


@media(max-width:767px){

    .mad-hero{

        padding:120px 0 80px;

    }


    .mad-hero h1{

        font-size:42px;

        letter-spacing:-2px;

    }


    .mad-hero-visual{

        min-height:470px;

    }


    .app-phone{

        width:150px;

        height:300px;

    }


    .phone-back{

        margin-left:100px;

    }


    .phone-front{

        margin-left:-70px;

    }


    .badge-android{

        left:5px;

        top:50px;

    }


    .badge-ios{

        right:5px;

        top:120px;

    }


    .badge-cloud{

        right:5px;

        bottom:40px;

    }


    .mad-intro,
    .mad-services,
    .mad-platforms,
    .mad-features,
    .mad-technology,
    .mad-ux,
    .mad-process,
    .mad-why,
    .mad-faq{

        padding:80px 0;

    }


    .mad-heading h2{

        font-size:34px;

    }


    .platform-content h2{

        font-size:42px;

    }


    .platform-card{

        width:90%;

    }


    .mad-tech-grid{

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

    }


    .mad-process-grid{

        grid-template-columns:1fr;

    }


    .mad-why h2{

        font-size:36px;

    }


    .mad-why-grid{

        grid-template-columns:1fr;

    }


    .mad-cta h2{

        font-size:36px;

    }


    .mad-cta .btn{

        width:100%;

        margin:0 0 12px !important;

    }


    .ux-points div{

        width:100%;

    }

}


@media(max-width:575px){

    .mad-hero h1{

        font-size:36px;

    }


    .mad-hero-content > p{

        font-size:15px;

    }


    .mad-hero-visual{

        min-height:400px;

    }


    .app-phone{

        width:125px;

        height:250px;

        border-radius:25px;

    }


    .app-screen{

        border-radius:18px;

    }


    .phone-back{

        margin-left:85px;

        margin-top:-35px;

    }


    .phone-front{

        margin-left:-55px;

        margin-top:30px;

    }


    .app-floating-badge{

        padding:9px 12px;

        font-size:9px;

    }


    .mad-service-card{

        min-height:390px;

    }


    .platform-content h2{

        font-size:36px;

    }


    .platform-dashboard{

        padding:20px;

        min-height:270px;

    }


    .platform-circle{

        width:75px;

        height:75px;

        font-size:25px;

    }


    .mad-technology h2{

        font-size:35px;

    }


    .mad-why h2{

        font-size:34px;

    }


    .ux-visual{

        height:420px;

    }


    .ux-phone{

        width:180px;

        height:350px;

    }

}



/*==================================================
360 REAL ESTATE SOLUTIONS
==================================================*/

.re360-hero{

    padding:160px 0 100px;

    background:#fff;

    overflow:hidden;

}


.re360-label,
.re360-section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#777;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


.re360-label:before,
.re360-section-label:before{

    content:"";

    width:28px;

    height:1px;

    background:#111;

}


.re360-hero h1{

    font-family:"Manrope",sans-serif;

    font-size:64px;

    line-height:1.04;

    letter-spacing:-3px;

    font-weight:800;

    margin:25px 0;

}


.re360-hero h1 span{

    color:#777;

    display:block;

}


.re360-hero p{

    max-width:650px;

    color:#666;

    font-size:17px;

    line-height:1.9;

}


.re360-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:30px;

}


.re360-hero-stats{

    display:flex;

    gap:40px;

    margin-top:45px;

}


.re360-hero-stats div{

    display:flex;

    flex-direction:column;

}


.re360-hero-stats strong{

    font-size:26px;

    font-weight:800;

}


.re360-hero-stats span{

    color:#777;

    font-size:11px;

}


/*==================================================
HERO VISUAL
==================================================*/

.re360-hero-visual{

    height:560px;

    background:#f5f5f5;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}


.hero-ring{

    position:absolute;

    border:1px solid #ddd;

    border-radius:50%;

}


.ring-one{

    width:390px;

    height:390px;

}


.ring-two{

    width:520px;

    height:520px;

    border-style:dashed;

}


.hero-center{

    width:170px;

    height:170px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    text-align:center;

    position:relative;

    z-index:5;

    box-shadow:0 20px 60px rgba(0,0,0,.2);

}


.hero-center-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:#111;

    border-radius:50%;

    margin-bottom:10px;

}


.hero-center strong{

    font-size:12px;

    letter-spacing:1px;

}


.hero-center span{

    font-size:8px;

    color:#aaa;

    margin-top:5px;

}


.hero-node{

    position:absolute;

    width:88px;

    height:88px;

    background:#fff;

    border:1px solid #ddd;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:7px;

    z-index:6;

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

    transition:.3s;

}


.hero-node:hover{

    background:#111;

    color:#fff;

    transform:scale(1.08);

}


.hero-node i{

    font-size:20px;

}


.hero-node span{

    font-size:9px;

    font-weight:700;

}


.node-web{

    top:55px;

    left:50%;

    transform:translateX(-50%);

}


.node-app{

    top:130px;

    right:70px;

}


.node-crm{

    right:20px;

    top:50%;

    transform:translateY(-50%);

}


.node-lms{

    right:80px;

    bottom:80px;

}


.node-seo{

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

}


.node-social{

    bottom:80px;

    left:80px;

}


.node-ads{

    left:20px;

    top:50%;

    transform:translateY(-50%);

}


.node-reputation{

    top:130px;

    left:70px;

}


/*==================================================
INTRO
==================================================*/

.re360-intro{

    padding:110px 0;

    background:#f8f8f8;

}


.re360-intro h2{

    font-family:"Manrope",sans-serif;

    font-size:44px;

    line-height:1.15;

    letter-spacing:-2px;

    font-weight:800;

    margin-top:20px;

}


.re360-intro p{

    color:#666;

    line-height:1.9;

}


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

.re360-heading{

    max-width:850px;

    margin:auto;

}


.re360-heading h2{

    font-family:"Manrope",sans-serif;

    font-size:48px;

    line-height:1.1;

    letter-spacing:-2px;

    font-weight:800;

    margin:20px 0;

}


.re360-heading p{

    color:#666;

    line-height:1.8;

    max-width:700px;

    margin:auto;

}


/*==================================================
TECHNOLOGY SOLUTIONS
==================================================*/

.re360-solutions{

    padding:120px 0;

    background:#fff;

}


.re360-solution-card{

    height:100%;

    min-height:390px;

    padding:35px;

    background:#fff;

    border:1px solid #e5e5e5;

    position:relative;

    transition:.35s;

}


.re360-solution-card:hover{

    transform:translateY(-10px);

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

}


.solution-number{

    position:absolute;

    right:25px;

    top:25px;

    font-size:11px;

    color:#bbb;

    font-weight:800;

}


.solution-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#111;

    color:#fff;

    border-radius:50%;

    font-size:25px;

    margin-bottom:25px;

    transition:.3s;

}


.re360-solution-card:hover .solution-icon{

    transform:rotate(5deg) scale(1.08);

}


.re360-solution-card h4{

    font-size:22px;

    font-weight:800;

    margin-bottom:15px;

}


.re360-solution-card p{

    color:#666;

    line-height:1.8;

    font-size:14px;

}


.re360-solution-card ul{

    list-style:none;

    padding:0;

    margin-top:20px;

}


.re360-solution-card li{

    padding:7px 0;

    border-top:1px solid #eee;

    font-size:12px;

    color:#555;

}


.re360-solution-card li:before{

    content:"✓";

    margin-right:8px;

    font-weight:800;

}


/*==================================================
MARKETING
==================================================*/

.re360-marketing{

    padding:120px 0;

    background:#f7f7f7;

}


.marketing-grid{

    display:grid;

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

    gap:20px;

}


.marketing-card{

    background:#fff;

    border:1px solid #e5e5e5;

    padding:35px 28px;

    min-height:300px;

    position:relative;

    transition:.35s;

}


.marketing-card:hover{

    background:#111;

    color:#fff;

    transform:translateY(-8px);

}


.marketing-card i{

    font-size:30px;

    margin-bottom:25px;

}


.marketing-card h4{

    font-size:19px;

    font-weight:800;

    margin-bottom:12px;

}


.marketing-card p{

    color:#666;

    font-size:13px;

    line-height:1.8;

}


.marketing-card:hover p{

    color:#aaa;

}


.marketing-card span{

    position:absolute;

    bottom:22px;

    left:28px;

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;

    color:#999;

}


/*==================================================
SOCIAL
==================================================*/

.re360-social{

    padding:120px 0;

    background:#fff;

}


.re360-social h2,
.re360-orm h2{

    font-size:45px;

    line-height:1.12;

    letter-spacing:-2px;

    font-weight:800;

    margin:20px 0;

}


.re360-social p,
.re360-orm p{

    color:#666;

    line-height:1.9;

}


.social-platforms{

    display:grid;

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

    gap:15px;

}


.social-platforms > div{

    padding:25px;

    border:1px solid #e5e5e5;

    display:grid;

    grid-template-columns:45px 1fr;

    column-gap:15px;

    transition:.3s;

}


.social-platforms > div:hover{

    background:#111;

    color:#fff;

}


.social-platforms i{

    grid-row:span 2;

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#111;

    color:#fff;

}


.social-platforms > div:hover i{

    background:#fff;

    color:#111;

}


.social-platforms strong{

    font-size:14px;

}


.social-platforms span{

    color:#888;

    font-size:10px;

    margin-top:4px;

}


/*==================================================
ORM
==================================================*/

.re360-orm{

    padding:120px 0;

    background:#f7f7f7;

}


.orm-list{

    display:grid;

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

    gap:12px;

    margin-top:30px;

}


.orm-list div{

    background:#fff;

    border:1px solid #e5e5e5;

    padding:15px;

    font-size:12px;

    font-weight:600;

}


.orm-list i{

    margin-right:8px;

}


.reputation-dashboard{

    background:#111;

    color:#fff;

    padding:45px;

    min-height:390px;

}


.reputation-score{

    text-align:center;

    padding-bottom:35px;

    border-bottom:1px solid #333;

}


.reputation-score span{

    display:block;

    color:#888;

    font-size:10px;

    letter-spacing:2px;

}


.reputation-score strong{

    display:block;

    font-size:75px;

    line-height:1;

    margin:20px 0;

}


.reputation-stars{

    color:#fff;

}


.reputation-bars{

    margin-top:30px;

}


.reputation-bars > div{

    margin-bottom:20px;

}


.reputation-bars span{

    display:block;

    font-size:10px;

    color:#aaa;

    margin-bottom:8px;

}


.reputation-bars > div > div{

    height:5px;

    background:#333;

}


.reputation-bars i{

    height:5px;

    background:#fff;

    display:block;

}


/*==================================================
GROWTH
==================================================*/

.re360-growth{

    padding:120px 0;

    background:#fff;

}


.growth-flow{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-top:65px;

}


.growth-flow > div:not(.growth-arrow){

    width:150px;

    height:150px;

    border:1px solid #ddd;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#fff;

    transition:.3s;

}


.growth-flow > div:not(.growth-arrow):hover{

    background:#111;

    color:#fff;

    transform:translateY(-8px);

}


.growth-flow span{

    font-size:9px;

    color:#999;

    margin-bottom:8px;

}


.growth-flow i{

    font-size:25px;

    margin-bottom:10px;

}


.growth-flow strong{

    font-size:14px;

}


.growth-flow small{

    color:#888;

    font-size:9px;

    margin-top:4px;

}


.growth-arrow{

    color:#aaa;

}


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

.re360-industries{

    padding:120px 0;

    background:#f7f7f7;

}


.industry-box{

    background:#fff;

    border:1px solid #e5e5e5;

    padding:40px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

}


.industry-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.07);

}


.industry-box i{

    width:70px;

    height:70px;

    background:#111;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:25px;

}


.industry-box h4{

    font-size:20px;

    font-weight:800;

}


.industry-box p{

    color:#666;

    font-size:13px;

    line-height:1.8;

}


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

.re360-why{

    padding:120px 0;

    background:#fff;

}


.why-grid{

    display:grid;

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

    gap:20px;

    margin-top:60px;

}


.why-grid > div{

    padding:35px 25px;

    border:1px solid #e5e5e5;

    transition:.3s;

}


.why-grid > div:hover{

    background:#111;

    color:#fff;

    transform:translateY(-8px);

}


.why-grid i{

    font-size:30px;

    margin-bottom:25px;

}


.why-grid h4{

    font-size:18px;

    font-weight:800;

}


.why-grid p{

    color:#666;

    font-size:13px;

    line-height:1.8;

}


.why-grid > div:hover p{

    color:#aaa;

}


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

.re360-process{

    padding:120px 0;

    background:#f7f7f7;

}


.re360-process-grid{

    display:grid;

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

    gap:20px;

    margin-top:60px;

}


.re360-process-grid > div{

    background:#fff;

    border:1px solid #e5e5e5;

    padding:35px 20px;

    text-align:center;

}


.re360-process-grid span{

    display:block;

    color:#aaa;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:20px;

}


.re360-process-grid i{

    font-size:30px;

    margin-bottom:20px;

}


.re360-process-grid h4{

    font-size:18px;

    font-weight:800;

}


.re360-process-grid p{

    color:#777;

    font-size:12px;

    line-height:1.8;

}


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

.re360-faq{

    padding:120px 0;

    background:#fff;

}


.re360-accordion{

    max-width:850px;

    margin:55px auto 0;

}


.re360-accordion .accordion-item{

    border:none;

    border-bottom:1px solid #ddd;

}


.re360-accordion .accordion-button{

    background:#fff;

    box-shadow:none;

    padding:24px 0;

    font-size:16px;

    font-weight:700;

}


.re360-accordion .accordion-body{

    padding:0 30px 25px 0;

    color:#666;

    font-size:14px;

    line-height:1.9;

}


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

.re360-cta{

    padding:110px 0;

    background:#2c2b2b;

    color:#fff;

    text-align:center;

}


.re360-cta-inner{

    max-width:850px;

    margin:auto;

}


.re360-cta .re360-section-label{

    color:#888;

}


.re360-cta .re360-section-label:before{

    background:#fff;

}


.re360-cta h2{

    font-size:52px;

    line-height:1.1;

    letter-spacing:-2px;

    font-weight:800;

    margin:20px 0;

}


.re360-cta p{

    max-width:700px;

    margin:auto;

    color:#aaa;

    line-height:1.8;

}


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

@media(max-width:1199px){

    .re360-hero h1{

        font-size:52px;

    }


    .marketing-grid{

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

    }


    .why-grid{

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

    }


    .re360-process-grid{

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

    }


}


@media(max-width:991px){

    .re360-hero{

        padding-top:130px;

    }


    .re360-hero h1{

        font-size:48px;

    }


    .re360-hero-content{

        text-align:center;

    }


    .re360-hero p{

        margin-left:auto;

        margin-right:auto;

    }


    .re360-buttons{

        justify-content:center;

    }


    .re360-hero-stats{

        justify-content:center;

    }


    .re360-hero-visual{

        margin-top:20px;

    }


    .re360-heading h2{

        font-size:40px;

    }


    .marketing-grid{

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

    }


    .growth-flow{

        flex-wrap:wrap;

    }


    .growth-arrow{

        display:none;

    }


}


@media(max-width:767px){

    .re360-hero{

        padding:110px 0 80px;

    }


    .re360-hero h1{

        font-size:40px;

        letter-spacing:-2px;

    }


    .re360-hero-stats{

        flex-direction:column;

        gap:15px;

    }


    .re360-hero-visual{

        height:430px;

    }


    .ring-one{

        width:290px;

        height:290px;

    }


    .ring-two{

        width:390px;

        height:390px;

    }


    .hero-node{

        width:65px;

        height:65px;

    }


    .hero-node i{

        font-size:15px;

    }


    .hero-node span{

        font-size:7px;

    }


    .node-app{

        right:30px;

    }


    .node-crm{

        right:10px;

    }


    .node-lms{

        right:35px;

    }


    .node-social{

        left:35px;

    }


    .node-ads{

        left:10px;

    }


    .node-reputation{

        left:30px;

    }


    .re360-intro,
    .re360-solutions,
    .re360-marketing,
    .re360-social,
    .re360-orm,
    .re360-growth,
    .re360-industries,
    .re360-why,
    .re360-process,
    .re360-faq{

        padding:80px 0;

    }


    .re360-heading h2{

        font-size:34px;

    }


    .re360-intro h2,
    .re360-social h2,
    .re360-orm h2{

        font-size:36px;

    }


    .marketing-grid{

        grid-template-columns:1fr;

    }


    .social-platforms{

        grid-template-columns:1fr;

    }


    .orm-list{

        grid-template-columns:1fr;

    }


    .why-grid{

        grid-template-columns:1fr;

    }


    .re360-process-grid{

        grid-template-columns:1fr;

    }


    .re360-cta h2{

        font-size:36px;

    }


    .re360-cta .btn{

        width:100%;

        margin:0 0 12px !important;

    }

}


@media(max-width:575px){

    .re360-hero h1{

        font-size:35px;

    }


    .re360-hero-visual{

        height:380px;

    }


    .hero-center{

        width:130px;

        height:130px;

    }


    .hero-center strong{

        font-size:9px;

    }


    .hero-center span{

        font-size:7px;

    }


    .re360-solution-card{

        min-height:auto;

    }


    .re360-heading h2{

        font-size:30px;

    }


    .re360-intro h2,
    .re360-social h2,
    .re360-orm h2{

        font-size:32px;

    }


    .reputation-dashboard{

        padding:30px 20px;

    }


    .reputation-score strong{

        font-size:60px;

    }


}

/*==================================================
CRM / ERP DEVELOPMENT PAGE
==================================================*/

.crm-hero{

    padding:160px 0 100px;

    background:
        radial-gradient(
            circle at 90% 20%,
            #f2f2f2 0,
            #fff 35%
        );

    overflow:hidden;

}


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

.crm-hero-tag{

    display:inline-block;

    padding:9px 20px;

    background:#111;

    color:#fff;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:25px;

}


.crm-hero h1{

    font-size:52px;

    line-height:1.08;

    font-weight:800;

    color:#111;

    max-width:750px;

    margin-bottom:25px;

}


.crm-hero h1 span{

    display:block;

    color:#666;

}


.crm-hero p{

    font-size:18px;

    line-height:1.8;

    color:#666;

    max-width:680px;

    margin-bottom:35px;

}


.crm-hero .btn{

    padding:15px 28px;

    border-radius:50px;

    font-weight:600;

}


.crm-hero-points{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:30px;

}


.crm-hero-points span{

    font-size:14px;

    color:#555;

    font-weight:600;

}


.crm-hero-points i{

    margin-right:7px;

    color:#111;

}


/*==================================================
CRM DASHBOARD
==================================================*/

.crm-dashboard{

    background:#111;

    border-radius:28px;

    padding:25px;

    color:#fff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.18);

    position:relative;

}


.crm-dashboard:before{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

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

    top:-60px;

    right:-60px;

}


.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}


.dashboard-header small{

    font-size:10px;

    letter-spacing:1.5px;

    color:#aaa;

}


.dashboard-header h5{

    margin:5px 0 0;

    font-weight:700;

}


.dashboard-status{

    background:#222;

    padding:7px 12px;

    border-radius:30px;

    font-size:12px;

}


.dashboard-status i{

    font-size:7px;

    margin-right:5px;

}


.dashboard-stats{

    display:grid;

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

    gap:12px;

}


.dashboard-stat{

    background:#1d1d1d;

    padding:18px;

    border-radius:15px;

}


.dashboard-stat i{

    font-size:18px;

    margin-bottom:12px;

}


.dashboard-stat small{

    display:block;

    color:#aaa;

    margin-bottom:5px;

}


.dashboard-stat strong{

    font-size:23px;

}


.dashboard-chart{

    margin-top:15px;

    padding:20px;

    background:#1d1d1d;

    border-radius:15px;

}


.chart-title{

    display:flex;

    justify-content:space-between;

    font-size:13px;

}


.chart-title strong{

    color:#fff;

}


.fake-chart{

    height:100px;

    display:flex;

    align-items:flex-end;

    gap:8px;

    margin-top:20px;

}


.fake-chart span{

    flex:1;

    background:#fff;

    border-radius:4px 4px 0 0;

    opacity:.8;

}


.fake-chart span:nth-child(1){
    height:35%;
}

.fake-chart span:nth-child(2){
    height:48%;
}

.fake-chart span:nth-child(3){
    height:40%;
}

.fake-chart span:nth-child(4){
    height:65%;
}

.fake-chart span:nth-child(5){
    height:55%;
}

.fake-chart span:nth-child(6){
    height:78%;
}

.fake-chart span:nth-child(7){
    height:92%;
}


.dashboard-task{

    display:flex;

    align-items:center;

    gap:12px;

    background:#fff;

    color:#111;

    padding:15px;

    border-radius:14px;

    margin-top:15px;

}


.dashboard-task > i{

    font-size:20px;

}


.dashboard-task strong{

    display:block;

    font-size:13px;

}


.dashboard-task small{

    color:#777;

    font-size:11px;

}


/*==================================================
INTRO
==================================================*/

.crm-intro{

    padding:110px 0;

    background:#f8f8f8;

}


.crm-intro-text{

    color:#666;

    line-height:1.9;

    font-size:17px;

    margin-bottom:20px;

}


/*==================================================
SOLUTIONS
==================================================*/

.crm-solutions-section{

    padding:120px 0;

    background:#fff;

}


.solution-main-card{

    height:100%;

    border:1px solid #e8e8e8;

    border-radius:24px;

    padding:45px 35px;

    transition:.35s;

}


.solution-main-card:hover{

    transform:translateY(-10px);

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

}


.solution-icon{

    width:75px;

    height:75px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    background:#111;

    color:#fff;

    font-size:30px;

    margin-bottom:25px;

}


.solution-main-card > span{

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#888;

}


.solution-main-card h3{

    font-size:29px;

    font-weight:800;

    margin:12px 0 18px;

}


.solution-main-card p{

    color:#666;

    line-height:1.8;

}


.solution-list{

    display:grid;

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

    gap:12px;

    margin-top:25px;

}


.solution-list span{

    font-size:14px;

    font-weight:600;

}


.solution-list i{

    margin-right:7px;

}


/*==================================================
CRM MODULES
==================================================*/

.crm-modules-section{

    padding:120px 0;

    background:#f8f8f8;

}


.crm-module-card{

    background:#fff;

    padding:35px 25px;

    border:1px solid #ececec;

    border-radius:20px;

    height:100%;

    transition:.35s;

}


.crm-module-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.07);

}


.crm-module-card > i{

    width:60px;

    height:60px;

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f3f3f3;

    font-size:23px;

    margin-bottom:20px;

    transition:.35s;

}


.crm-module-card:hover > i{

    background:#111;

    color:#fff;

}


.crm-module-card h4{

    font-size:20px;

    font-weight:700;

    margin-bottom:12px;

}


.crm-module-card p{

    color:#666;

    line-height:1.7;

    margin:0;

}


/*==================================================
ERP MODULES
==================================================*/

.erp-modules-section{

    padding:120px 0;

    background:#fff;

}


.erp-module-grid{

    display:grid;

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

    gap:15px;

}


.erp-module{

    min-height:130px;

    border:1px solid #ececec;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.35s;

}


.erp-module:hover{

    background:#111;

    color:#fff;

    transform:translateY(-5px);

}


.erp-module i{

    font-size:27px;

    margin-bottom:13px;

}


.erp-module span{

    font-size:14px;

    font-weight:700;

}


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

.crm-features-section{

    padding:120px 0;

    background:#f8f8f8;

}


.feature-box{

    background:#fff;

    border:1px solid #e9e9e9;

    border-radius:20px;

    padding:35px;

    height:100%;

    position:relative;

    overflow:hidden;

    transition:.35s;

}


.feature-box:hover{

    transform:translateY(-8px);

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

}


.feature-number{

    position:absolute;

    top:20px;

    right:25px;

    font-size:12px;

    font-weight:800;

    color:#aaa;

}


.feature-box > i{

    font-size:32px;

    margin-bottom:25px;

}


.feature-box h4{

    font-size:21px;

    font-weight:700;

    margin-bottom:12px;

}


.feature-box p{

    color:#666;

    line-height:1.8;

    margin:0;

}


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

.crm-industries-section{

    padding:120px 0;

    background:#fff;

}


.crm-industries-section .industry-card{

    height:100%;

}


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

.crm-process-section{

    padding:120px 0;

    background:#f8f8f8;

}


.crm-process-card{

    background:#fff;

    padding:35px 25px;

    text-align:center;

    border-radius:20px;

    border:1px solid #e8e8e8;

    height:100%;

    transition:.35s;

}


.crm-process-card:hover{

    transform:translateY(-10px);

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

}


.crm-process-card > span{

    display:block;

    font-size:13px;

    font-weight:800;

    color:#999;

    margin-bottom:20px;

}


.crm-process-card > i{

    font-size:40px;

    margin-bottom:20px;

}


.crm-process-card h4{

    font-size:20px;

    font-weight:700;

    margin-bottom:12px;

}


.crm-process-card p{

    color:#666;

    line-height:1.7;

    margin:0;

}


/*==================================================
WHY BNEXT
==================================================*/

.crm-why-section{

    padding:120px 0;

    background:#fff;

}


.why-crm-grid{

    display:grid;

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

    gap:20px;

}


.why-crm-grid > div{

    padding:30px;

    border:1px solid #ececec;

    border-radius:18px;

    transition:.35s;

}


.why-crm-grid > div:hover{

    background:#111;

    color:#fff;

}


.why-crm-grid i{

    font-size:27px;

    margin-bottom:18px;

}


.why-crm-grid h4{

    font-size:19px;

    font-weight:700;

}


.why-crm-grid p{

    color:#777;

    line-height:1.7;

    margin:0;

}


.why-crm-grid > div:hover p{

    color:#ccc;

}


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

@media(max-width:991px){

    .crm-hero{

        padding-top:130px;

        text-align:center;

    }


    .crm-hero h1{

        font-size:45px;

    }


    .crm-hero p{

        margin-left:auto;
        margin-right:auto;

    }


    .crm-hero-points{

        justify-content:center;

    }


    .crm-dashboard{

        margin-top:50px;

    }


    .solution-list{

        grid-template-columns:1fr;

    }


    .erp-module-grid{

        margin-top:50px;

    }

}


@media(max-width:767px){

    .crm-hero{

        padding:120px 0 70px;

    }


    .crm-hero h1{

        font-size:35px;

    }


    .crm-hero p{

        font-size:16px;

    }


    .crm-hero .btn{

        width:100%;

        margin-bottom:10px;

    }


    .crm-intro,
    .crm-solutions-section,
    .crm-modules-section,
    .erp-modules-section,
    .crm-features-section,
    .crm-industries-section,
    .crm-process-section,
    .crm-why-section{

        padding:80px 0;

    }


    .solution-main-card{

        padding:30px 22px;

    }


    .solution-main-card h3{

        font-size:24px;

    }


    .erp-module-grid{

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

    }


    .why-crm-grid{

        grid-template-columns:1fr;

        margin-top:40px;

    }


    .dashboard-stats{

        gap:8px;

    }


    .dashboard-stat{

        padding:14px;

    }


    .dashboard-stat strong{

        font-size:19px;

    }

}


@media(max-width:575px){

    .crm-hero h1{

        font-size:32px;

    }


    .crm-dashboard{

        padding:18px;

    }


    .erp-module-grid{

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

    }


    .erp-module{

        min-height:110px;

    }


    .crm-hero-points{

        flex-direction:column;

        gap:10px;

    }

}