.elementor-4868 .elementor-element.elementor-element-262c8e4{--display:flex;}.elementor-4868 .elementor-element.elementor-element-0fd9f92{--display:flex;}.elementor-4868 .elementor-element.elementor-element-3064d5d{--display:flex;}/* Start custom CSS for html, class: .elementor-element-c561575 *//* =====================================================
   RESET
===================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",Arial,sans-serif;
    background:#fff;
    color:#111;
    overflow-x:hidden;
    line-height:1.6;
}

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

.sec{
    padding:90px 20px;
    position:relative;
    overflow:hidden;
}

.wrap{
    width:100%;
    max-width:1250px;
    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:center;
}

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

.head{
    width:100%;
    max-width:760px;
    text-align:center;
    margin:0 auto 65px;

    animation:fadeUp .7s ease forwards;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    background:#fbf3da;
    color:#b98b0a;

    border-radius:999px;

    font-size:13px;
    font-weight:800;

    letter-spacing:.5px;
}

.head h2{

    margin:22px 0 18px;

    font-size:clamp(32px,5vw,48px);

    line-height:1.15;

    font-weight:900;

    color:#111;
}

.head p{

    color:#666;

    font-size:18px;

    line-height:1.8;
}

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

.grid{

    width:100%;

    display:grid;

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

    gap:24px;

    align-items:stretch;

}

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

.card{

    display:flex;

    flex-direction:column;

    height:100%;

    padding:30px;

    border-radius:22px;

    background:#fff;

    border:1px solid #ececec;

    text-decoration:none;

    color:inherit;

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

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

.card:hover{

    transform:translateY(-8px);

    border-color:#d4af37;

    box-shadow:
        0 25px 45px rgba(212,175,55,.18);

}

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

.icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fbf6e6;

    color:#d4af37;

    font-size:28px;

    margin-bottom:22px;

    transition:.35s;

}

.card:hover .icon{

    transform:scale(1.12) rotate(6deg);

}

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

.card h3{

    font-size:22px;

    font-weight:800;

    margin-bottom:12px;

    color:#111;

}

.card p{

    color:#666;

    line-height:1.75;

    margin-bottom:22px;

    flex:1;

}

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

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:24px;

}

.tag{

    padding:7px 12px;

    border-radius:50px;

    background:#f5f5f5;

    font-size:12px;

    font-weight:700;

    color:#444;

}

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

.cta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

    border-top:1px solid #ededed;

    font-weight:800;

    color:#111;

}

.cta i{

    transition:.3s;

}

.card:hover .cta i{

    transform:translateX(6px);

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.card{

    animation:fadeUp .6s ease forwards;

}

.card:nth-child(1){animation-delay:.05s;}
.card:nth-child(2){animation-delay:.10s;}
.card:nth-child(3){animation-delay:.15s;}
.card:nth-child(4){animation-delay:.20s;}
.card:nth-child(5){animation-delay:.25s;}
.card:nth-child(6){animation-delay:.30s;}
.card:nth-child(7){animation-delay:.35s;}
.card:nth-child(8){animation-delay:.40s;}

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

@media (max-width:1100px){

.grid{

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

}

}

@media (max-width:768px){

.sec{

    padding:70px 20px;

}

.head{

    margin-bottom:45px;

}

.head p{

    font-size:16px;

}

}

@media (max-width:640px){

.grid{

    grid-template-columns:1fr;

}

.card{

    padding:24px;

}

.head h2{

    font-size:30px;

}

}

/* =====================================================
   EXTRA FIX
   Prevent heading beside cards
===================================================== */

.wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
}

.head{
    width:100%;
    display:block;
    margin-bottom:60px;
}

.grid{
    width:100%;
}

/* Prevent any theme CSS from pushing content right */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img,
svg,
iframe,
video{
    max-width:100%;
    height:auto;
}/* End custom CSS */