/* templates.css */
/*======================================
FEATURES
======================================*/
/*=========================================================
TEMPLATE HERO
=========================================================*/

.template-hero{

position:relative;

padding:120px 0 90px;

overflow:hidden;

}

.template-grid{

display:grid;

grid-template-columns:1fr 560px;

align-items:center;

gap:70px;

}

.template-content{

position:relative;

z-index:2;

}

.template-content h1{

font-size:58px;

line-height:1.05;

margin:20px 0;

max-width:650px;

}

.template-content p{

font-size:20px;

line-height:1.8;

max-width:620px;

margin-bottom:40px;

color:#4b5563;

}


.plan-description{

margin-top:35px;

}

.plan-intro{

font-size:17px;

line-height:1.9;

margin-bottom:28px;

color:#4b5563;

}

.plan-highlights{

list-style:none;

padding:0;

margin:0 0 35px;

display:grid;

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

gap:14px 24px;

}

.plan-highlights li{

display:flex;

align-items:flex-start;

gap:12px;

font-size:15px;

font-weight:500;

color:#374151;

}

.plan-highlights i{

color:#10b981;

margin-top:3px;

}

.plan-meta{

display:flex;

gap:25px;

margin-bottom:40px;

flex-wrap:wrap;

}

.plan-meta div{

background:#fff;

padding:18px 24px;

border-radius:18px;

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

min-width:160px;

}

.plan-meta h3{

margin:0;

font-size:28px;

font-weight:700;

color:#111827;

}

.plan-meta span{

display:block;

margin-top:6px;

font-size:14px;

color:#6b7280;

}





.template-preview{

background:#fff;

padding:18px;

border-radius:32px;

box-shadow:

0 30px 80px rgba(17,24,39,.15);

position:sticky;

top:120px;

transition:.45s;

}

.template-preview:hover{

transform:translateY(-8px);

}

.template-preview img{

display:block;

width:100%;

border-radius:18px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:40px;

flex-wrap:wrap;

}




.hero-buttons form{
    display:inline-block;
    margin:0;
    padding:0;
}




.hero-trust{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:18px;

margin-top:18px;

font-size:15px;

font-weight:500;

color:#667085;

}

.hero-trust i{

color:#14b86d;

}

.hero-trust span{

color:#ff1c71;

font-size:18px;

}

.template-hero .hero-blob{

position:absolute;

top:-220px;

right:-220px;

width:620px;

height:620px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,28,113,.18),

transparent 70%);

filter:blur(30px);

pointer-events:none;

}

.plan-features{

padding:100px 0;

}

.feature-card-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.feature-card{

background:#fff;

border-radius:22px;

padding:35px;

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

transition:.35s;

}

.feature-card:hover{

transform:translateY(-8px);

}

.feature-icon{

width:70px;

height:70px;

border-radius:18px;

background:#fff0fa;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

color:#ff1c71;

margin-bottom:25px;

}

.feature-card h3{

margin-bottom:20px;

}

.feature-card ul{

padding:0;

margin:0;

list-style:none;

}

.feature-card li{

display:flex;

gap:12px;

margin-bottom:14px;

font-size:15px;

color:#555;

}

.feature-card li i{

color:#14b86d;

margin-top:3px;

}



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

.plan-final-cta{

padding:80px 0 120px;

}

.cta-box{

background:linear-gradient(135deg,#ff1c71,#7c3aed);

border-radius:30px;

padding:70px;

text-align:center;

color:#fff;

}

.cta-box h2{

font-size:44px;

margin-bottom:20px;

color:#fff;

}

.cta-box p{

max-width:700px;

margin:auto auto 35px;

opacity:.95;

}

.cta-box .primary-btn{

background:#fff;

color:#ff1c71;

}

.cta-box .primary-btn:hover{

background:#111827;

color:#fff;

}



@media(max-width:992px){

.feature-card-grid{

grid-template-columns:1fr;

}

.cta-box{

padding:40px 30px;

}

.cta-box h2{

font-size:34px;

}

.plan-highlights{

grid-template-columns:1fr;

}

.plan-meta{

flex-direction:column;

}

.plan-meta div{

width:100%;

}

}

/*==================================================
PRO PLAN META
==================================================*/

.pro-plan-meta{

display:grid;

grid-template-columns:1.4fr .9fr;

gap:22px;

margin:40px 0;

align-items:stretch;

}

.pro-pricing-card,
.pro-setup-card{

background:#fff;

border-radius:22px;

padding:24px;

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

}

/* Heading */

.pricing-label{

display:block;

font-size:12px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#ff1c71;

margin-bottom:18px;

}

/* Prices */

.price-row{

display:flex;

align-items:baseline;

gap:8px;

}

.price-row strong{

font-size:34px;

font-weight:700;

line-height:1.2;

color:#111827;

}

.price-row span{

font-size:16px;

font-weight:600;

color:#6b7280;

}

.annual{

margin-top:18px;

}

.annual strong{

font-size:30px;

color:#374151;

}

/* Divider */

.pricing-divider{

display:flex;

align-items:center;

gap:12px;

margin:18px 0;

font-size:12px;

font-weight:700;

color:#9ca3af;

}

.pricing-divider:before,
.pricing-divider:after{

content:"";

height:1px;

background:#e5e7eb;

flex:1;

}

.pricing-note{

display:block;

margin-top:18px;

font-size:14px;

font-weight:600;

color:#10b981;

}

/* Setup card */

.pro-setup-card{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

}

.pro-setup-card strong{

font-size:35px;

font-weight:700;

line-height:1.1;

color:#111827;

}

.pro-setup-card span{

margin-top:8px;

font-size:15px;

color:#6b7280;

}

@media(max-width:992px){
    .pro-plan-meta{

grid-template-columns:1fr;

}

.pro-pricing-card,
.pro-setup-card{

width:100%;

}

.price-row strong{

font-size:30px;

}

.annual strong{

font-size:26px;

}

.pro-setup-card strong{

font-size:34px;

}
/* Pro pricing card - mobile */

.pro-pricing-card{

text-align:center;

}

.price-row{

justify-content:center;

align-items:center;

}

.price-row strong{

font-size:30px;

}

.price-row span{

margin:0;

}

.pricing-label{

text-align:center;

}

.pricing-note{

text-align:center;

}

.pricing-divider{

justify-content:center;

}
}

.enterprise-domain-note {
    margin-top: 22px;
    margin-bottom: 22px;
    padding: 14px 16px;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    border: 1px solid rgba(232, 26, 87, 0.14);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(232, 26, 87, 0.07),
            rgba(111, 76, 255, 0.06)
        );

    color: #343434;

    font-size: 13px;
    line-height: 1.55;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.04);
}


/* Icon */

.enterprise-domain-note i {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

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

    border-radius: 10px;

    background: #fff;

    color: #e81a57;

    font-size: 14px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08);
}


/* Text */

.enterprise-domain-note {
    font-weight: 500;
}

.enterprise-domain-note strong {
    color: #171717;
    font-weight: 700;
}


/* Mobile */

@media (max-width: 600px) {

    .enterprise-domain-note {
        margin-top: 18px;
        padding: 13px 14px;

        gap: 10px;

        font-size: 12px;
    }

    .enterprise-domain-note i {
        width: 31px;
        height: 31px;

        flex-basis: 31px;

        font-size: 13px;
    }

}