/*
|--------------------------------------------------------------------------
| Wrapper
|--------------------------------------------------------------------------
*/

.dv-wrap{
    max-width:1200px;
    margin:auto;
    padding:60px 20px;
    background:var(--dv-bg,#fff);
}

/*
|--------------------------------------------------------------------------
| Toggle
|--------------------------------------------------------------------------
*/

.dv-toggle{
    display:grid;
    grid-template-columns:auto 60px auto;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-bottom:40px;
}

.dv-label{
    font-size:16px;
    font-weight:600;
    text-align:center;
    opacity:.5;
    transition:.3s;
    white-space:nowrap;
}

.dv-label.active{
    opacity:1;
}

.dv-switch-wrap{
    width:60px;
    display:flex;
    justify-content:center;
}

.dv-toggle .dv-label{
    font-size:15px;
    font-weight:600;
    opacity:.5;
    transition:.3s;
}

.dv-toggle .dv-label.active{
    opacity:1;
}

/*
|--------------------------------------------------------------------------
| Switch
|--------------------------------------------------------------------------
*/
.switch{
    position:relative;
    width:58px;
    min-width:58px;
    height:30px;
    display:inline-block;
    flex-shrink:0;
}

.switch input{
    display:none;
}

.switch span{
    position:absolute;
    top:0;
    left:0;
    width:58px;
    height:30px;
    background:#017f7e;
    border-radius:30px;
    cursor:pointer;
}

.switch span:before{
    content:"";
    position:absolute;
    width:24px;
    height:24px;
    background:#fff;
    top:3px;
    left:3px;
    border-radius:50%;
    transition:.3s;
}

.switch input:checked + span:before{
    transform:translateX(28px);
}

/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.dv-content{
    display:none;
}

.dv-content.active{
    display:block;
}

/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.dv-grid{
    display:flex;
    align-items:center;
    gap:80px;
}

.dv-grid > div{
    width:50%;
}

.dv-grid.reverse{
    flex-direction:row-reverse;
}

/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.dv-img{
    text-align:center;
}

.dv-img img{
    width:100%;
    max-width:500px;
    display:block;
}

/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.dv-text h2{
    margin-top:0;
    margin-bottom:20px;
    font-size:34px;
    line-height:1.2;
}

.dv-text .desc{
    margin-bottom:25px;
    font-size:17px;
    line-height:1.7;
    color:#666;
}

/*
|--------------------------------------------------------------------------
| Features
|--------------------------------------------------------------------------
*/

/* ===========================
   Feature List (Divi Compatible)
   =========================== */

.dv-text ul{
    margin:0 0 30px;
    padding:0;
    list-style:none !important;
}

.dv-text ul li{
    position:relative;
    margin:0 0 14px;
    padding:0 0 0 35px;
    list-style:none !important;
    list-style-type:none !important;
}

/* Remove bullets added by browsers/themes */
.dv-text ul li::marker,
.et_pb_text ul li::marker,
.et_pb_module ul li::marker{
    content:"" !important;
    color:transparent !important;
}

/* Remove bullets added by Divi */
.et_pb_text ul,
.et_pb_module ul{
    list-style:none !important;
}

.et_pb_text ul li,
.et_pb_module ul li{
    list-style:none !important;
    list-style-type:none !important;
}

/* Custom checkmark */
.dv-text ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:2px;
    width:22px;
    height:22px;
    border:2px solid var(--dv-btn,#017f7e);
    border-radius:50%;
    color:var(--dv-btn,#017f7e);
    text-align:center;
    line-height:18px;
    font-size:14px;
    font-weight:700;
    box-sizing:border-box;
}
/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.dv-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--dv-btn,#017f7e);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.dv-btn:after{
    content:"→";
    transition:.3s;
}

.dv-btn:hover:after{
    transform:translateX(6px);
}

/*
|--------------------------------------------------------------------------
| Animations
|--------------------------------------------------------------------------
*/

.animation-fade .dv-content.active{
    animation:dvFade .5s;
}

.animation-slide .dv-content.active{
    animation:dvSlide .5s;
}

.animation-zoom .dv-content.active{
    animation:dvZoom .5s;
}

@keyframes dvFade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes dvSlide{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes dvZoom{
    from{
        opacity:0;
        transform:scale(.95);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .dv-grid{
    display:flex;
    gap:80px;
    align-items:center;
}

    .dv-grid.reverse{
        flex-direction:column;
    }

    .dv-grid > div{
        width:100%;
    }

    .dv-text{
        text-align:center;
    }

    .dv-hide-desc .desc{
        display:none;
    }

    .dv-text h2{
        font-size:28px;
    }
	}
	
/*
|--------------------------------------------------------------------------
| Pricing Template
|--------------------------------------------------------------------------
*/

.dv-pricing-wrap{
    max-width:900px;
    margin:auto;
    padding:60px 20px;
    background:var(--dv-bg,#fff);
}

.dv-pricing-card{
    max-width:550px;
    margin:auto;
    background:#fff;
    border-radius:20px;
    padding:45px;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
    text-align:center;
}

.dv-pricing-img{
    width:100px;
    margin-bottom:20px;
}

.dv-pricing-card h2{
    margin-top:0;
    margin-bottom:20px;
}

.dv-pricing-card .desc{
    color:#666;
    margin-bottom:30px;
}

.dv-pricing-card ul{
    list-style:none;
    padding:0;
    margin:0 0 30px;
}

.dv-pricing-card li{
    margin-bottom:14px;
}

.dv-pricing-card .dv-btn{
    justify-content:center;
}

/*
|--------------------------------------------------------------------------
| Cards Template
|--------------------------------------------------------------------------
*/

.dv-cards-wrap{
    max-width:1000px;
    margin:auto;
    padding:60px 20px;
    background:var(--dv-bg,#fff);
}

.dv-card-template{
    max-width:650px;
    margin:auto;
    background:#fff;
    border-radius:24px;
    padding:50px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    text-align:center;
}

.dv-card-image{
    max-width:200px;
    margin-bottom:30px;
}

.dv-card-template h2{
    margin-top:0;
    margin-bottom:20px;
    font-size:32px;
}

.dv-card-template .desc{
    color:#666;
    margin-bottom:30px;
    line-height:1.7;
}

.dv-card-template ul{
    list-style:none;
    padding:0;
    margin:0 0 30px;
}

.dv-card-template li{
    margin-bottom:14px;
}

.dv-card-template .dv-btn{
    justify-content:center;
}