/* ======================================
   RESET
======================================*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Red Hat Display",sans-serif;
}

body{
    background:#f5faff;
    line-height:1.5;
    color:#1e293b;
}

/* ======================================
   BANNER
======================================*/

.plans-banner{
    width:100%;
    height:380px;
    position:relative;
    overflow:hidden;
}

.plans-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.plans-banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
}

.banner-content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 20px;
    z-index:2;
}

.plans-feature-title{
    color:#fff;
    font-size:42px;
    font-weight:700;
    margin-bottom:15px;

    opacity:0;
    transform:translateY(30px);
    animation:fadeUp .8s ease forwards;
}

.plans-subtitle{
    color:#e0e0e0;
    max-width:750px;
    font-size:16px;
    line-height:1.6;

    opacity:0;
    transform:translateY(30px);
    animation:fadeUp 1s ease forwards;
    animation-delay:.3s;
}

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ======================================
   CONTAINER
======================================*/

.plans-feature-container{
    width:100%;
}

.plans-feature-section{
    max-width:1100px;
    margin:auto;
    padding:0 20px;
}

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

.plans-section-heading{
    font-size:1.8rem;
    font-weight:700;
    margin:3rem auto 1.5rem auto;
    color:#164b7a;
    text-align:center;
    position:relative;
}

.plans-section-heading::after{
    content:"";
    width:60px;
    height:3px;
    background:#164b7a;
    display:block;
    margin:6px auto 0;
    border-radius:2px;
}

/* ======================================
   TABLE WRAPPER
======================================*/

.plans-table-wrapper{
    overflow-x:auto;
    background:#fff;
    margin-bottom:1.5rem;
}

/* ======================================
   FEATURE TABLE
======================================*/

.plans-feature-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    min-width:720px;
    font-size:.95rem;
}

/* COLUMN WIDTH FIX */

.plans-col-features{width:32%;}
.plans-col-core{width:22.67%;}
.plans-col-professional{width:22.67%;}
.plans-col-ultimate{width:22.66%;}

/* HEADER */

.plans-header-row th{
    text-align:center;
    padding:1.3rem 1rem;
    font-weight:600;
    font-size:1.05rem;
    color:#0f3b6b;
    border-bottom:2px solid #d0e2ff;
    white-space:nowrap;
}

.plans-header-row th:first-child{
    text-align:left;
    padding-left:2rem;
}

/* CELLS */

.plans-feature-table td{
    padding:1rem .8rem;
    border-bottom:1px solid #f0f5fd;
    vertical-align:middle;
    color: black;
}

.plans-feature-table td:first-child{
    font-weight:500;
    color:#1a344c;
    padding-left:2rem;
    text-align:left;
}

.plans-feature-table td:not(:first-child){
    text-align:center;
    font-weight:500;
    /* color:#000; */
}

/* ROW HOVER */

.plans-data-row{
    transition:.18s;
}

.plans-data-row:hover{
    background:#e8f1fe;
}

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

.plans-icon-check{
    font-size:1.4rem;
    font-weight:600;
    color:#0eb57d;
}

.plans-icon-cross{
    font-size:1.4rem;
    font-weight:600;
    color:#f25151; 
}



.blink-text {
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}


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

.plans-col-highlight{
    background:#daecff !important;
}

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

@media(max-width:768px){

    .plans-feature-section{
        padding:0;
    }

    .plans-feature-table{
        min-width:700px;
    }

}

@media(max-width:600px){

    .plans-feature-title{
        font-size:1.9rem;
    }

    .plans-section-heading{
        font-size:1.3rem;
    }

    .plans-feature-table{
        min-width:650px;
        font-size:.9rem;
    }

    .plans-header-row th{
        padding:1rem .5rem;
        font-size:.95rem;
        color: black;
    }

    .plans-feature-table td{
        padding:.8rem .5rem;
    }

    .plans-feature-table td:first-child{
        padding-left:1rem;
    }

}

/* ======================================
   MOBILE NAV
======================================*/

.menu-toggle{
    display:none;
    font-size:24px;
    cursor:pointer;
}

@media(max-width:992px){

    .menu-toggle{
        display:block;
        color:#000;
    }

    .nav{
        position:absolute;
        top:100%;
        right:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        align-items:flex-start;
        padding:20px;
        display:none;
        box-shadow:0 5px 15px rgba(0,0,0,.1);
        z-index:999;
    }

    .nav a{
        padding:10px 0;
        width:100%;
    }

    .nav.active{
        display:flex;
    }

    .call-box{
        display:none;
    }

}