/*=========================================================
    Andcytron Systems Pvt Ltd
    COMPONENTS.CSS
    Part 1
=========================================================*/

@import url("variables.css");

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

.section-header{
    text-align:center;
    margin-bottom:70px;
}

.section-subtitle{
    display:inline-block;
    padding:8px 22px;
    border-radius:40px;
    background:rgba(0,87,217,.08);
    color:var(--primary);
    font-size:.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:18px;
}

.section-title{
    font-size:2.8rem;
    font-weight:800;
    color:var(--text-dark);
    margin-bottom:18px;
}

.section-title span{
    color:var(--secondary);
}

.section-description{
    max-width:760px;
    margin:auto;
    color:var(--gray-600);
    font-size:1.05rem;
    line-height:1.8;
}

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 34px;
    border-radius:50px;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
    border:none;
    text-decoration:none;
}

.btn-primary{
    background:var(--gradient-primary);
    color:#fff;
}

.btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}

.btn-secondary{
    background:var(--gradient-secondary);
    color:#fff;
}

.btn-secondary:hover{
    transform:translateY(-4px);
}

.btn-outline{
    border:2px solid var(--primary);
    color:var(--primary);
    background:#fff;
}

.btn-outline:hover{
    background:var(--primary);
    color:#fff;
}

.btn-light{
    background:#fff;
    color:var(--primary);
}

.btn-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

/*=========================================================
    CARDS
=========================================================*/

.card{
    background:#fff;
    border-radius:22px;
    padding:35px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
    height:100%;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

.card-header{
    margin-bottom:25px;
}

.card-title{
    font-size:1.4rem;
    color:var(--primary);
    margin-bottom:12px;
}

.card-text{
    color:var(--gray-600);
}

.card-footer{
    margin-top:25px;
}

/*=========================================================
    GLASS CARDS
=========================================================*/

.glass-card{
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.28);
    border-radius:24px;
    padding:35px;
    box-shadow:var(--shadow-md);
    transition:.35s;
}

.glass-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-xl);
}

.glass-dark{
    background:rgba(8,20,45,.35);
    color:#fff;
}

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

.icon-box{
    text-align:center;
    padding:35px;
    border-radius:22px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.icon-box:hover{
    transform:translateY(-8px);
}

.icon-circle{
    width:90px;
    height:90px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    background:var(--gradient-primary);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:36px;
    transition:.35s;
}

.icon-box:hover .icon-circle{
    background:var(--gradient-secondary);
    transform:rotate(10deg);
}

.icon-box h4{
    color:var(--primary);
    margin-bottom:15px;
}

.icon-box p{
    color:var(--gray-600);
}

/*=========================================================
    FEATURE CARDS
=========================================================*/

.feature-card{
    display:flex;
    gap:22px;
    padding:30px;
    border-radius:22px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.feature-card:hover{
    transform:translateX(8px);
    box-shadow:var(--shadow-md);
}

.feature-icon{
    width:70px;
    height:70px;
    flex-shrink:0;
    border-radius:18px;
    background:var(--gradient-primary);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:28px;
}

.feature-content h5{
    color:var(--primary);
    margin-bottom:10px;
}

.feature-content p{
    margin:0;
}

/*=========================================================
    BADGES
=========================================================*/

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border-radius:30px;
    font-size:.82rem;
    font-weight:600;
}

.badge-primary{
    background:var(--primary-light);
    color:var(--primary);
}

.badge-secondary{
    background:var(--secondary-light);
    color:var(--secondary);
}

.badge-success{
    background:var(--success-light);
    color:var(--success);
}

.badge-dark{
    background:var(--gray-800);
    color:#fff;
}

.badge-gradient{
    background:var(--gradient-primary);
    color:#fff;
}

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

.tag{
    display:inline-block;
    padding:8px 16px;
    border-radius:20px;
    background:#f3f7ff;
    color:var(--primary);
    font-size:.8rem;
    font-weight:500;
    margin:4px;
    transition:.3s;
}

.tag:hover{
    background:var(--secondary);
    color:#fff;
}

.tag-outline{
    border:1px solid var(--primary);
    background:transparent;
}

.tag-outline:hover{
    background:var(--primary);
    color:#fff;
}

/*=========================================================
    LISTS
=========================================================*/

.list-check{
    list-style:none;
    padding:0;
}

.list-check li{
    position:relative;
    padding-left:32px;
    margin-bottom:14px;
    color:var(--gray-700);
}

.list-check li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--secondary);
    font-weight:700;
}

.list-arrow{
    list-style:none;
    padding:0;
}

.list-arrow li{
    position:relative;
    padding-left:28px;
    margin-bottom:14px;
}

.list-arrow li::before{
    content:"➜";
    position:absolute;
    left:0;
    color:var(--primary);
}

.list-icon{
    list-style:none;
    padding:0;
}

.list-icon li{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.list-icon i{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:.8rem;
}

/*=========================================================
    DIVIDERS
=========================================================*/

.divider{
    width:80px;
    height:4px;
    background:var(--gradient-secondary);
    margin:20px auto;
    border-radius:10px;
}

.divider-left{
    margin-left:0;
}

/*=========================================================
    IMAGE WRAPPERS
=========================================================*/

.image-card{
    overflow:hidden;
    border-radius:24px;
    box-shadow:var(--shadow-md);
}

.image-card img{
    width:100%;
    transition:.4s;
}

.image-card:hover img{
    transform:scale(1.08);
}

/*=========================================================
    COMPONENTS PART 1 END
=========================================================*/
/*=========================================================
    COMPONENTS.CSS
    Part 2
    Accordions • FAQ • Tabs • Timeline
    Process • Progress • Number Steps
=========================================================*/


/*=========================================================
    ACCORDION
=========================================================*/

.accordion{
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}

.accordion-item{
    border:none;
    border-bottom:1px solid #eef2f7;
}

.accordion-item:last-child{
    border-bottom:none;
}

.accordion-button{

    background:#ffffff;

    color:var(--primary);

    font-weight:600;

    padding:22px 28px;

    font-size:1rem;

    transition:.35s;

    box-shadow:none;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-button:not(.collapsed){

    background:var(--primary-light);

    color:var(--primary);

}

.accordion-button::after{

    transition:.35s;

}

.accordion-body{

    background:#fff;

    padding:28px;

    color:var(--gray-600);

    line-height:1.8;

}


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

.faq{

    background:#f8fbff;

}

.faq-item{

    margin-bottom:20px;

}

.faq-question{

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq-question h5{

    margin:0;

}

.faq-answer{

    padding-top:18px;

    color:var(--gray-600);

}

.faq-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.faq-item:hover .faq-icon{

    transform:rotate(180deg);

}


/*=========================================================
    TABS
=========================================================*/

.custom-tabs{

    border:none;

    justify-content:center;

    gap:15px;

}

.custom-tabs .nav-link{

    border:none;

    border-radius:50px;

    padding:14px 28px;

    font-weight:600;

    color:var(--gray-700);

    background:#f3f6fa;

    transition:.35s;

}

.custom-tabs .nav-link.active{

    background:var(--gradient-primary);

    color:#fff;

}

.tab-content{

    margin-top:40px;

}

.tab-pane{

    animation:fadeIn .5s ease;

}


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

.timeline{

    position:relative;

    margin:80px 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    background:linear-gradient(
        var(--primary),
        var(--secondary)
    );

    transform:translateX(-50%);

}

.timeline-item{

    position:relative;

    width:50%;

    padding:30px 50px;

}

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

    left:0;

    text-align:right;

}

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

    left:50%;

}

.timeline-content{

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:var(--shadow-md);

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

}

.timeline-dot{

    position:absolute;

    top:45px;

    right:-14px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:var(--secondary);

    border:6px solid #fff;

    box-shadow:0 0 0 6px rgba(0,87,217,.15);

}

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

    left:-14px;

}

.timeline-year{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:var(--gradient-primary);

    color:#fff;

    font-size:.85rem;

    margin-bottom:18px;

}


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

.process{

    position:relative;

}

.process-card{

    text-align:center;

    padding:35px;

    border-radius:24px;

    background:#fff;

    box-shadow:var(--shadow-sm);

    transition:.35s;

    position:relative;

}

.process-card:hover{

    transform:translateY(-10px);

}

.process-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    margin-bottom:22px;

}

.process-arrow{

    position:absolute;

    right:-35px;

    top:45%;

    font-size:34px;

    color:var(--secondary);

}


/*=========================================================
    PROGRESS BARS
=========================================================*/

.progress{

    height:12px;

    border-radius:30px;

    background:#edf2f7;

    overflow:hidden;

    margin-bottom:25px;

}

.progress-bar{

    background:var(--gradient-primary);

    border-radius:30px;

    transition:width 1.5s ease;

}

.skill{

    margin-bottom:28px;

}

.skill-title{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    font-weight:600;

    color:var(--primary);

}


/*=========================================================
    NUMBERED STEPS
=========================================================*/

.number-step{

    display:flex;

    align-items:flex-start;

    gap:22px;

    margin-bottom:35px;

}

.step-number{

    min-width:65px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:var(--gradient-secondary);

    color:#fff;

    font-size:24px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

}

.step-content h4{

    color:var(--primary);

    margin-bottom:10px;

}

.step-content p{

    margin:0;

}


/*=========================================================
    EXPANDABLE PANELS
=========================================================*/

.expand-panel{

    background:#fff;

    border-radius:22px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    margin-bottom:25px;

}

.expand-header{

    padding:22px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    background:#fff;

    transition:.35s;

}

.expand-header:hover{

    background:var(--primary-light);

}

.expand-title{

    font-weight:600;

    color:var(--primary);

}

.expand-icon{

    width:40px;

    height:40px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.expand-panel.active .expand-icon{

    transform:rotate(180deg);

}

.expand-body{

    display:none;

    padding:28px 30px;

    border-top:1px solid #eef2f7;

    color:var(--gray-600);

}

.expand-panel.active .expand-body{

    display:block;

}


/*=========================================================
    STEP CONNECTOR
=========================================================*/

.step-line{

    position:absolute;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    top:45px;

    left:50%;

    z-index:-1;

}


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

.ribbon{

    position:absolute;

    top:20px;

    right:-35px;

    background:var(--gradient-secondary);

    color:#fff;

    padding:8px 40px;

    transform:rotate(45deg);

    font-size:.75rem;

    font-weight:600;

    box-shadow:var(--shadow-sm);

}


/*=========================================================
    ANIMATION SUPPORT
=========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.scale-in{

    transform:scale(.9);

    opacity:0;

    transition:.6s;

}

.scale-in.show{

    transform:scale(1);

    opacity:1;

}


/*=========================================================
    COMPONENTS PART 2 END
=========================================================*/
/*=========================================================
    COMPONENTS.CSS
    PART 3A
    Pricing • Team • Statistics
=========================================================*/


/*=========================================================
    PRICING CARDS
=========================================================*/

.pricing-section{
    background:#f8fbff;
    position:relative;
}

.pricing-card{

    position:relative;

    background:#ffffff;

    border-radius:28px;

    padding:45px 35px;

    text-align:center;

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

    transition:.4s;

    overflow:hidden;

    height:100%;

}

.pricing-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(0,87,217,.18);

}

.pricing-card.popular{

    border:3px solid var(--secondary);

    transform:scale(1.04);

}

.pricing-card.popular::before{

    content:"Most Popular";

    position:absolute;

    top:18px;

    right:-38px;

    width:180px;

    text-align:center;

    padding:8px;

    background:var(--gradient-secondary);

    color:#fff;

    font-size:.75rem;

    font-weight:600;

    transform:rotate(45deg);

}

.plan-icon{

    width:95px;

    height:95px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-primary);

    color:#fff;

    font-size:42px;

}

.plan-title{

    color:var(--primary);

    font-size:1.6rem;

    font-weight:700;

}

.plan-price{

    margin:25px 0;

}

.plan-price h2{

    color:var(--secondary);

    font-size:3.5rem;

    font-weight:800;

}

.plan-price span{

    color:var(--gray-500);

    font-size:1rem;

}

.plan-features{

    list-style:none;

    padding:0;

    margin:35px 0;

}

.plan-features li{

    padding:12px 0;

    color:var(--gray-700);

    border-bottom:1px solid #edf2f7;

}

.plan-features li:last-child{

    border:none;

}

.plan-features i{

    color:var(--secondary);

    margin-right:10px;

}


/*=========================================================
    TEAM / LEADERSHIP
=========================================================*/

.team-section{

    background:#ffffff;

}

.team-card{

    background:#fff;

    border-radius:26px;

    overflow:hidden;

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

    transition:.4s;

    height:100%;

}

.team-card:hover{

    transform:translateY(-10px);

}

.team-image{

    position:relative;

    overflow:hidden;

}

.team-image img{

    width:100%;

    transition:.45s;

}

.team-card:hover .team-image img{

    transform:scale(1.08);

}

.team-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,0),
        rgba(0,40,80,.75)
    );

    opacity:0;

    transition:.4s;

}

.team-card:hover .team-overlay{

    opacity:1;

}

.team-social{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

}

.team-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.team-social a:hover{

    background:var(--secondary);

    color:#fff;

}

.team-content{

    padding:30px;

    text-align:center;

}

.team-content h4{

    color:var(--primary);

    margin-bottom:8px;

}

.team-content h6{

    color:var(--secondary);

    font-weight:600;

    margin-bottom:18px;

}

.team-content p{

    color:var(--gray-600);

    font-size:.95rem;

}


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

.leader-card{

    display:flex;

    gap:35px;

    align-items:center;

    padding:40px;

    background:#fff;

    border-radius:28px;

    box-shadow:var(--shadow-md);

}

.leader-photo{

    width:220px;

    border-radius:24px;

    overflow:hidden;

    flex-shrink:0;

}

.leader-photo img{

    width:100%;

}

.leader-info h3{

    color:var(--primary);

}

.leader-info h5{

    color:var(--secondary);

    margin-bottom:20px;

}


/*=========================================================
    TEAM BADGES
=========================================================*/

.team-badge{

    display:inline-block;

    padding:7px 16px;

    border-radius:20px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:.8rem;

    margin-top:10px;

}


/*=========================================================
    STATISTICS CARDS
=========================================================*/

.stats-section{

    background:var(--gradient-dark);

    color:#fff;

}

.stats-card{

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

    backdrop-filter:blur(15px);

    border-radius:24px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

}

.stats-card:hover{

    transform:translateY(-8px);

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

}

.stats-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-secondary);

    color:#fff;

    font-size:36px;

}

.stats-number{

    font-size:3.5rem;

    font-weight:800;

    color:#fff;

    margin-bottom:10px;

}

.stats-number span{

    color:var(--secondary);

}

.stats-title{

    font-size:1.05rem;

    letter-spacing:.5px;

    color:rgba(255,255,255,.85);

}


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

.mini-stat{

    display:flex;

    gap:18px;

    align-items:center;

}

.mini-stat-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    background:var(--gradient-primary);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

}

.mini-stat-info h3{

    margin:0;

    color:var(--primary);

}

.mini-stat-info p{

    margin:0;

    color:var(--gray-600);

}


/*=========================================================
    ACHIEVEMENT BAR
=========================================================*/

.achievement{

    margin-top:40px;

}

.achievement-item{

    display:flex;

    justify-content:space-between;

    margin-bottom:12px;

    font-weight:600;

    color:var(--primary);

}

.achievement-progress{

    width:100%;

    height:10px;

    border-radius:30px;

    background:#edf2f7;

    overflow:hidden;

    margin-bottom:25px;

}

.achievement-progress span{

    display:block;

    height:100%;

    background:var(--gradient-secondary);

}


/*=========================================================
    END PART 3A
=========================================================*/
/*=========================================================
    COMPONENTS.CSS
    PART 3B-1
    Blog • Case Studies • Resources
=========================================================*/


/*=========================================================
    BLOG / INSIGHTS CARDS
=========================================================*/

.blog-card{
    position:relative;
    background:#ffffff;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
}

.blog-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 65px rgba(0,87,217,.16);
}

.blog-image{
    position:relative;
    overflow:hidden;
}

.blog-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.5s;
}

.blog-card:hover .blog-image img{
    transform:scale(1.08);
}

.blog-category{
    position:absolute;
    top:20px;
    left:20px;
    padding:8px 18px;
    border-radius:30px;
    background:var(--gradient-primary);
    color:#fff;
    font-size:.75rem;
    font-weight:600;
}

.blog-content{
    padding:30px;
}

.blog-meta{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:18px;
    font-size:.85rem;
    color:var(--gray-500);
}

.blog-meta i{
    color:var(--secondary);
    margin-right:6px;
}

.blog-title{
    font-size:1.45rem;
    font-weight:700;
    color:var(--primary);
    margin-bottom:15px;
    transition:.3s;
}

.blog-card:hover .blog-title{
    color:var(--secondary);
}

.blog-text{
    color:var(--gray-600);
    margin-bottom:25px;
    line-height:1.8;
}

.blog-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.read-more{
    color:var(--primary);
    font-weight:600;
    transition:.3s;
}

.read-more:hover{
    color:var(--secondary);
    padding-left:6px;
}


/*=========================================================
    FEATURED BLOG
=========================================================*/

.blog-featured{
    display:flex;
    gap:40px;
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.blog-featured-image{
    flex:1;
}

.blog-featured-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.blog-featured-content{
    flex:1;
    padding:45px;
}

.blog-featured-content h2{
    color:var(--primary);
}

.blog-featured-content p{
    color:var(--gray-600);
}


/*=========================================================
    CASE STUDY CARDS
=========================================================*/

.case-card{
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    transition:.4s;
    height:100%;
}

.case-card:hover{
    transform:translateY(-10px);
}

.case-banner{
    position:relative;
}

.case-banner img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.case-result{
    position:absolute;
    bottom:20px;
    left:20px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(15px);
    padding:12px 18px;
    border-radius:18px;
    font-weight:700;
    color:var(--primary);
}

.case-content{
    padding:32px;
}

.case-company{
    color:var(--secondary);
    font-weight:600;
    margin-bottom:12px;
}

.case-title{
    color:var(--primary);
    margin-bottom:18px;
}

.case-description{
    color:var(--gray-600);
    margin-bottom:20px;
}

.case-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:25px;
}

.metric-box{
    text-align:center;
    background:#f7f9fc;
    border-radius:18px;
    padding:18px;
}

.metric-box h4{
    color:var(--secondary);
    margin-bottom:6px;
}

.metric-box span{
    color:var(--gray-600);
    font-size:.85rem;
}


/*=========================================================
    SUCCESS STORY
=========================================================*/

.success-story{
    position:relative;
    padding:50px;
    border-radius:30px;
    background:var(--gradient-dark);
    color:#fff;
    overflow:hidden;
}

.success-story::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-120px;
    top:-120px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
}

.success-story h2{
    color:#fff;
}

.success-story p{
    color:rgba(255,255,255,.85);
}


/*=========================================================
    RESOURCE CARDS
=========================================================*/

.resource-card{
    display:flex;
    gap:24px;
    padding:30px;
    border-radius:24px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:.35s;
    height:100%;
}

.resource-card:hover{
    transform:translateX(8px);
    box-shadow:var(--shadow-md);
}

.resource-icon{
    width:80px;
    height:80px;
    border-radius:22px;
    background:var(--gradient-primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:34px;
    flex-shrink:0;
}

.resource-content h4{
    color:var(--primary);
    margin-bottom:12px;
}

.resource-content p{
    color:var(--gray-600);
    margin-bottom:18px;
}

.resource-type{
    display:inline-block;
    padding:6px 16px;
    border-radius:20px;
    background:var(--primary-light);
    color:var(--primary);
    font-size:.75rem;
    font-weight:600;
}

.resource-download{
    margin-top:18px;
}

.resource-download a{
    color:var(--secondary);
    font-weight:600;
    transition:.3s;
}

.resource-download a:hover{
    color:var(--primary);
}


/*=========================================================
    DOWNLOAD BOX
=========================================================*/

.download-box{
    text-align:center;
    background:#fff;
    border-radius:28px;
    padding:45px;
    box-shadow:var(--shadow-md);
    transition:.35s;
}

.download-box:hover{
    transform:translateY(-8px);
}

.download-icon{
    width:90px;
    height:90px;
    margin:auto;
    margin-bottom:25px;
    border-radius:50%;
    background:var(--gradient-secondary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
}

.download-box h3{
    color:var(--primary);
    margin-bottom:15px;
}

.download-box p{
    color:var(--gray-600);
    margin-bottom:25px;
}


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

.resource-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.resource-tags span{
    padding:7px 14px;
    border-radius:20px;
    background:#eef5ff;
    color:var(--primary);
    font-size:.8rem;
    font-weight:500;
}

/*=========================================================
    END PART 3B-1
=========================================================*/
/*=========================================================
    COMPONENTS.CSS
    PART 3B-2A
    Portfolio / Project Cards
=========================================================*/


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

.portfolio-section{
    background:#f8fbff;
    position:relative;
    overflow:hidden;
}

.portfolio-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    top:-250px;
    right:-220px;
    background:rgba(0,87,217,.05);
    border-radius:50%;
}

.portfolio-section::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    bottom:-220px;
    left:-180px;
    background:rgba(255,122,0,.05);
    border-radius:50%;
}


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

.portfolio-card{

    position:relative;

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

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

    transition:.45s;

    height:100%;

}

.portfolio-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(0,87,217,.18);

}


/*=========================================================
    PROJECT IMAGE
=========================================================*/

.project-image{

    position:relative;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:270px;

    object-fit:cover;

    transition:.55s;

}

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

    transform:scale(1.08);

}


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

.project-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.05),
        rgba(0,40,80,.90)
    );

    display:flex;

    align-items:flex-end;

    justify-content:center;

    opacity:0;

    transition:.4s;

}

.portfolio-card:hover .project-overlay{

    opacity:1;

}

.project-overlay-content{

    width:100%;

    padding:30px;

    text-align:center;

}

.project-overlay-content a{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#ffffff;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:20px;

    transition:.3s;

}

.project-overlay-content a:hover{

    background:var(--secondary);

    color:#ffffff;

}


/*=========================================================
    PROJECT BODY
=========================================================*/

.project-content{

    padding:35px;

}

.project-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:25px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:.8rem;

    font-weight:600;

    margin-bottom:18px;

}

.project-title{

    color:var(--primary);

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:15px;

    transition:.3s;

}

.portfolio-card:hover .project-title{

    color:var(--secondary);

}

.project-description{

    color:var(--gray-600);

    line-height:1.8;

    margin-bottom:25px;

}


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

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.project-tech span{

    padding:7px 14px;

    border-radius:20px;

    background:#eef5ff;

    color:var(--primary);

    font-size:.78rem;

    font-weight:500;

}


/*=========================================================
    PROJECT METRICS
=========================================================*/

.project-metrics{

    display:grid;

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

    gap:15px;

}

.metric{

    background:#f8fbff;

    border-radius:18px;

    padding:16px;

    text-align:center;

}

.metric h4{

    color:var(--secondary);

    margin-bottom:6px;

    font-size:1.35rem;

}

.metric span{

    color:var(--gray-600);

    font-size:.8rem;

}


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

.project-footer{

    margin-top:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.project-link{

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.project-link:hover{

    color:var(--secondary);

}

.project-date{

    color:var(--gray-500);

    font-size:.85rem;

}


/*=========================================================
    FEATURED PROJECT
=========================================================*/

.featured-project{

    background:linear-gradient(
        135deg,
        #003b80,
        #0057D9,
        #0078ff
    );

    border-radius:30px;

    overflow:hidden;

    color:#ffffff;

    position:relative;

}

.featured-project::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-120px;

    top:-120px;

    border-radius:50%;

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

}

.featured-project-content{

    padding:60px;

    position:relative;

    z-index:2;

}

.featured-project h2{

    color:#ffffff;

    margin-bottom:20px;

}

.featured-project p{

    color:rgba(255,255,255,.88);

    line-height:1.9;

}

.featured-project .btn{

    margin-top:20px;

}


/*=========================================================
    PROJECT STATUS BADGES
=========================================================*/

.project-status{

    position:absolute;

    top:20px;

    right:20px;

    padding:8px 16px;

    border-radius:25px;

    background:#16a34a;

    color:#ffffff;

    font-size:.75rem;

    font-weight:600;

}

.project-status.live{

    background:#22c55e;

}

.project-status.beta{

    background:#f59e0b;

}

.project-status.research{

    background:#2563eb;

}

.project-status.archived{

    background:#6b7280;

}


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

.project-timeline{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

}

.project-timeline::before{

    content:"";

    position:absolute;

    top:16px;

    left:0;

    width:100%;

    height:3px;

    background:#e5e7eb;

    z-index:0;

}

.timeline-step{

    position:relative;

    z-index:2;

    text-align:center;

}

.timeline-step .circle{

    width:32px;

    height:32px;

    margin:auto;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:8px;

}

.timeline-step span{

    font-size:.78rem;

    color:var(--gray-600);

}


/*=========================================================
    CLIENT LOGO BAR
=========================================================*/

.project-client{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

}

.project-client img{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

}

.project-client h5{

    margin:0;

    color:var(--primary);

}

.project-client small{

    color:var(--gray-500);

}


/*=========================================================
    PROJECT RIBBON
=========================================================*/

.project-ribbon{

    position:absolute;

    top:22px;

    left:-45px;

    width:180px;

    text-align:center;

    padding:8px;

    background:var(--gradient-secondary);

    color:#ffffff;

    font-size:.75rem;

    font-weight:600;

    transform:rotate(-45deg);

}


/*=========================================================
    END PORTFOLIO COMPONENTS
=========================================================*/
/*=========================================================
    COMPONENTS.CSS
    Responsive Grid Layouts
    Auto-fit Grid Utilities
    Dashboard Layouts
    Equal Height Utilities
=========================================================*/


/*=========================================================
    GLOBAL GRID CONTAINER
=========================================================*/

.grid{
    display:grid;
    gap:30px;
}

.grid-sm{
    gap:15px;
}

.grid-md{
    gap:25px;
}

.grid-lg{
    gap:40px;
}

.grid-xl{
    gap:60px;
}


/*=========================================================
    AUTO FIT GRIDS
=========================================================*/

.grid-auto-200{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:25px;
}

.grid-auto-250{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.grid-auto-280{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.grid-auto-300{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;
}

.grid-auto-350{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:35px;
}

.grid-auto-400{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:40px;
}


/*=========================================================
    FIXED COLUMN GRIDS
=========================================================*/

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.grid-5{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
}

.grid-6{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}


/*=========================================================
    HERO SPLIT LAYOUT
=========================================================*/

.hero-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    align-items:center;
    gap:70px;
}


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

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}


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

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
}


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

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}


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

.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:35px;
}


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

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:40px;
}


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

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
}


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

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:35px;
}


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

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}


/*=========================================================
    CLIENT LOGO GRID
=========================================================*/

.logo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:25px;
    align-items:center;
}


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

.tech-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:30px;
}


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

.sidebar-layout{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:45px;
}


/*=========================================================
    DASHBOARD LAYOUT
=========================================================*/

.dashboard-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    min-height:100vh;
}

.dashboard-sidebar{
    background:var(--primary);
    color:#fff;
}

.dashboard-content{
    padding:40px;
    background:#f8fbff;
}


/*=========================================================
    DASHBOARD CARD GRID
=========================================================*/

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}


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

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}


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

.cta-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:center;
}


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

.form-grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.form-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}


/*=========================================================
    EQUAL HEIGHT UTILITIES
=========================================================*/

.equal-height{
    display:flex;
}

.equal-height>*{
    flex:1;
}

.card-equal{
    height:100%;
    display:flex;
    flex-direction:column;
}

.card-body-grow{
    flex:1;
}

.align-bottom{
    margin-top:auto;
}


/*=========================================================
    STRETCH GRID ITEMS
=========================================================*/

.grid-stretch>*{
    display:flex;
}

.grid-stretch .card{
    width:100%;
}


/*=========================================================
    GRID ALIGNMENT UTILITIES
=========================================================*/

.grid-center{
    justify-items:center;
    align-items:center;
}

.grid-start{
    justify-items:start;
    align-items:start;
}

.grid-end{
    justify-items:end;
    align-items:end;
}


/*=========================================================
    RESPONSIVE GRID UTILITIES
=========================================================*/

@media(max-width:1200px){

.hero-grid,
.sidebar-layout,
.dashboard-layout,
.cta-grid{
    grid-template-columns:1fr;
}

.grid-5{
    grid-template-columns:repeat(3,1fr);
}

.grid-6{
    grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:992px){

.grid-4,
.grid-3{
    grid-template-columns:repeat(2,1fr);
}

.form-grid-3{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.form-grid-2{
    grid-template-columns:1fr;
}

.dashboard-content{
    padding:25px;
}

.grid,
.grid-auto-200,
.grid-auto-250,
.grid-auto-280,
.grid-auto-300,
.grid-auto-350,
.grid-auto-400{
    gap:25px;
}

}

@media(max-width:576px){

.grid,
.feature-grid,
.service-grid,
.product-grid,
.portfolio-grid,
.blog-grid,
.team-grid,
.testimonial-grid,
.stats-grid{
    gap:20px;
}

}

/*=========================================================
    END GRID UTILITIES
=========================================================*/
/*=========================================================
    COMPONENTS.CSS
    PART 3B-2C
    Premium Hover Effects & Animation Utilities
=========================================================*/


/*=========================================================
    PREMIUM CARD HOVER
=========================================================*/

.hover-lift{
    transition:all .35s ease;
    cursor:pointer;
}

.hover-lift:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,87,217,.18);
}

.hover-scale{
    transition:.4s;
}

.hover-scale:hover{
    transform:scale(1.04);
}

.hover-zoom{
    overflow:hidden;
}

.hover-zoom img{
    transition:.6s;
}

.hover-zoom:hover img{
    transform:scale(1.12);
}


/*=========================================================
    ROTATE EFFECT
=========================================================*/

.hover-rotate{
    transition:.4s;
}

.hover-rotate:hover{
    transform:rotate(2deg) scale(1.03);
}


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

.hover-icon i,
.hover-icon svg{
    transition:.35s;
}

.hover-icon:hover i,
.hover-icon:hover svg{
    transform:translateX(6px);
}


/*=========================================================
    GLOW EFFECT
=========================================================*/

.hover-glow{
    transition:.35s;
}

.hover-glow:hover{
    box-shadow:
        0 0 15px rgba(0,87,217,.25),
        0 0 30px rgba(0,87,217,.15),
        0 0 50px rgba(0,87,217,.08);
}


/*=========================================================
    BORDER GLOW
=========================================================*/

.hover-border{
    position:relative;
    overflow:hidden;
}

.hover-border::before{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid transparent;
    border-radius:inherit;
    transition:.4s;
}

.hover-border:hover::before{
    border-color:var(--secondary);
}


/*=========================================================
    GLASS HOVER
=========================================================*/

.glass-hover{
    position:relative;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.20);
    transition:.4s;
}

.glass-hover:hover{
    backdrop-filter:blur(28px);
    background:rgba(255,255,255,.25);
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,87,217,.18);
}


/*=========================================================
    GLASS DARK
=========================================================*/

.glass-dark-hover{
    background:rgba(10,25,45,.35);
    backdrop-filter:blur(20px);
    transition:.4s;
}

.glass-dark-hover:hover{
    background:rgba(10,25,45,.55);
}


/*=========================================================
    SHINE EFFECT
=========================================================*/

.shine{
    position:relative;
    overflow:hidden;
}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:skewX(-25deg);

}

.shine:hover::before{

    animation:shineMove 1s ease;

}

@keyframes shineMove{

0%{
left:-120%;
}

100%{
left:150%;
}

}


/*=========================================================
    3D CARD EFFECT
=========================================================*/

.card-3d{

    transform-style:preserve-3d;

    perspective:1000px;

}

.card-3d-inner{

    transition:.5s;

    transform-style:preserve-3d;

}

.card-3d:hover .card-3d-inner{

    transform:
        rotateX(6deg)
        rotateY(-6deg)
        translateY(-10px);

}

.card-3d img{

    transform:translateZ(20px);

}

.card-3d h3{

    transform:translateZ(25px);

}


/*=========================================================
    FLOATING EFFECT
=========================================================*/

.float-hover:hover{

    animation:floatCard 2.5s infinite ease-in-out;

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}


/*=========================================================
    RIPPLE EFFECT
=========================================================*/

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple::after{

content:"";

position:absolute;

width:20px;

height:20px;

border-radius:50%;

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

transform:scale(0);

opacity:0;

pointer-events:none;

}

.ripple:hover::after{

animation:rippleEffect .7s ease;

}

@keyframes rippleEffect{

0%{

opacity:1;

transform:scale(0);

}

100%{

opacity:0;

transform:scale(18);

}

}


/*=========================================================
    IMAGE PARALLAX
=========================================================*/

.parallax-hover{

overflow:hidden;

}

.parallax-hover img{

transition:transform .6s ease;

}

.parallax-hover:hover img{

transform:scale(1.08) translateY(-8px);

}


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

.fade-slide{

opacity:0;

transform:translateY(35px);

transition:.8s ease;

}

.fade-slide.show{

opacity:1;

transform:translateY(0);

}


/*=========================================================
    SCALE IN
=========================================================*/

.scale-in{

opacity:0;

transform:scale(.9);

transition:.7s ease;

}

.scale-in.show{

opacity:1;

transform:scale(1);

}


/*=========================================================
    ROTATE IN
=========================================================*/

.rotate-in{

opacity:0;

transform:rotate(-8deg);

transition:.7s ease;

}

.rotate-in.show{

opacity:1;

transform:rotate(0);

}


/*=========================================================
    STAGGER DELAYS
=========================================================*/

.delay-100{transition-delay:.1s;}
.delay-200{transition-delay:.2s;}
.delay-300{transition-delay:.3s;}
.delay-400{transition-delay:.4s;}
.delay-500{transition-delay:.5s;}
.delay-600{transition-delay:.6s;}


/*=========================================================
    ENTERPRISE PAGE LOAD
=========================================================*/

.page-enter{

animation:pageEnter .9s ease;

}

@keyframes pageEnter{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*=========================================================
    GRADIENT TEXT ANIMATION
=========================================================*/

.gradient-text{

background:linear-gradient(
90deg,
var(--primary),
var(--secondary),
var(--primary)
);

background-size:200% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:gradientFlow 5s linear infinite;

}

@keyframes gradientFlow{

to{

background-position:200% center;

}

}


/*=========================================================
    PULSE BUTTON
=========================================================*/

.btn-pulse{

animation:pulseGlow 2s infinite;

}

@keyframes pulseGlow{

0%{

box-shadow:0 0 0 0 rgba(0,87,217,.45);

}

70%{

box-shadow:0 0 0 18px rgba(0,87,217,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,87,217,0);

}


/*=========================================================
    SMOOTH TRANSITION UTILITIES
=========================================================*/

.transition-fast{transition:.2s ease;}
.transition{transition:.35s ease;}
.transition-slow{transition:.6s ease;}

.cursor-pointer{cursor:pointer;}

.will-change{
    will-change:transform,opacity;
}

/*=========================================================
    END PREMIUM EFFECTS
=========================================================*/


/*=========================================================
    COMPONENTS.CSS
    PART 4A
    Forms
    Validation
    Floating Labels
    Search Box
=========================================================*/

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

.form-wrapper{
    background:#ffffff;
    border-radius:24px;
    padding:45px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.form-title{
    font-size:2rem;
    font-weight:700;
    color:var(--primary);
    margin-bottom:12px;
}

.form-description{
    color:var(--gray-600);
    margin-bottom:35px;
}


/*=========================================================
    FORM GROUP
=========================================================*/

.form-group{
    margin-bottom:25px;
    position:relative;
}

.form-label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--gray-700);
}


/*=========================================================
    INPUTS
=========================================================*/

.form-control,
.form-select,
textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #d9e3ef;

    border-radius:14px;

    background:#ffffff;

    color:var(--gray-700);

    font-size:1rem;

    transition:.35s;

}

textarea{

    min-height:150px;

    resize:vertical;

}

.form-control:focus,
.form-select:focus,
textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(0,87,217,.12);

    outline:none;

}


/*=========================================================
    PLACEHOLDER
=========================================================*/

.form-control::placeholder,
textarea::placeholder{

    color:#9aa8b5;

}


/*=========================================================
    INPUT GROUPS
=========================================================*/

.input-group{

    display:flex;

    align-items:center;

    border:1px solid #d9e3ef;

    border-radius:14px;

    overflow:hidden;

    transition:.35s;

}

.input-group:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(0,87,217,.12);

}

.input-group-icon{

    padding:0 18px;

    color:var(--primary);

    font-size:18px;

    background:#f8fbff;

}

.input-group input{

    flex:1;

    border:none;

    padding:16px;

    outline:none;

    background:#fff;

}

.input-group button{

    border:none;

    padding:16px 22px;

    background:var(--gradient-primary);

    color:#fff;

    cursor:pointer;

}


/*=========================================================
    FLOATING LABELS
=========================================================*/

.floating-group{

    position:relative;

}

.floating-group input,
.floating-group textarea{

    padding:22px 18px 10px;

}

.floating-group label{

    position:absolute;

    top:17px;

    left:18px;

    color:#8b98a8;

    pointer-events:none;

    transition:.25s;

    background:#fff;

    padding:0 5px;

}

.floating-group input:focus + label,
.floating-group input:not(:placeholder-shown)+label,
.floating-group textarea:focus + label,
.floating-group textarea:not(:placeholder-shown)+label{

    top:-10px;

    font-size:.78rem;

    color:var(--primary);

}


/*=========================================================
    CHECKBOX
=========================================================*/

.checkbox-group{

    display:flex;

    align-items:center;

    gap:12px;

}

.checkbox-group input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}


/*=========================================================
    RADIO BUTTONS
=========================================================*/

.radio-group{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.radio-group input{

    accent-color:var(--secondary);

}


/*=========================================================
    SWITCH
=========================================================*/

.switch{

    position:relative;

    width:55px;

    height:28px;

}

.switch input{

    display:none;

}

.slider{

    position:absolute;

    inset:0;

    background:#d9e3ef;

    border-radius:30px;

    cursor:pointer;

    transition:.35s;

}

.slider::before{

    content:"";

    position:absolute;

    width:22px;

    height:22px;

    left:3px;

    top:3px;

    border-radius:50%;

    background:#fff;

    transition:.35s;

}

.switch input:checked + .slider{

    background:var(--primary);

}

.switch input:checked + .slider::before{

    transform:translateX(27px);

}


/*=========================================================
    FORM VALIDATION
=========================================================*/

.is-valid{

    border-color:#22c55e !important;

}

.is-invalid{

    border-color:#ef4444 !important;

}

.valid-feedback{

    margin-top:8px;

    color:#22c55e;

    font-size:.85rem;

}

.invalid-feedback{

    margin-top:8px;

    color:#ef4444;

    font-size:.85rem;

}

.validation-icon{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:18px;

}

.validation-success{

    color:#22c55e;

}

.validation-error{

    color:#ef4444;

}


/*=========================================================
    FILE UPLOAD
=========================================================*/

.file-upload{

    border:2px dashed #d9e3ef;

    border-radius:18px;

    padding:40px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

}

.file-upload:hover{

    border-color:var(--primary);

    background:#f8fbff;

}

.file-upload input{

    display:none;

}


/*=========================================================
    SEARCH BOX
=========================================================*/

.search-box{

    position:relative;

    max-width:500px;

}

.search-box input{

    width:100%;

    padding:16px 60px 16px 20px;

    border-radius:50px;

    border:1px solid #d9e3ef;

    transition:.35s;

}

.search-box input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(0,87,217,.12);

    outline:none;

}

.search-box button{

    position:absolute;

    right:6px;

    top:6px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.search-box button:hover{

    transform:scale(1.05);

}


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

.newsletter-form{

    display:flex;

    max-width:700px;

    margin:auto;

    background:#fff;

    border-radius:60px;

    overflow:hidden;

    box-shadow:var(--shadow-md);

}

.newsletter-form input{

    flex:1;

    border:none;

    padding:18px 24px;

    outline:none;

}

.newsletter-form button{

    border:none;

    padding:18px 36px;

    background:var(--gradient-secondary);

    color:#fff;

    font-weight:600;

    cursor:pointer;

}


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

@media(max-width:768px){

.newsletter-form{

    flex-direction:column;

    border-radius:18px;

}

.newsletter-form button{

    width:100%;

}

.input-group{

    flex-direction:column;

}

.input-group-icon{

    width:100%;

    padding:15px;

    text-align:center;

}

.input-group button{

    width:100%;

}

}

/*=========================================================
    COMPONENTS.CSS
    PART 4B
    Modals • Alerts • Toasts • Confirmation Dialogs
=========================================================*/


/*=========================================================
    MODAL BACKDROP
=========================================================*/

.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(5,15,35,.65);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:9998;
}

.modal-backdrop.active{
    opacity:1;
    visibility:visible;
}

/*=========================================================
    MODAL
=========================================================*/

.modal{
    width:min(700px,92%);
    background:#ffffff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 35px 90px rgba(0,0,0,.25);
    transform:translateY(30px) scale(.96);
    transition:.35s;
}

.modal-backdrop.active .modal{
    transform:translateY(0) scale(1);
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 30px;
    background:var(--gradient-primary);
    color:#fff;
}

.modal-title{
    font-size:1.4rem;
    font-weight:700;
}

.modal-close{
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.modal-close:hover{
    background:#fff;
    color:var(--primary);
}

.modal-body{
    padding:35px;
    color:var(--gray-700);
    line-height:1.8;
}

.modal-footer{
    padding:22px 30px;
    border-top:1px solid #eef2f7;
    display:flex;
    justify-content:flex-end;
    gap:15px;
}

/*=========================================================
    MODAL SIZES
=========================================================*/

.modal-sm{max-width:420px;}
.modal-lg{max-width:900px;}
.modal-xl{max-width:1200px;}
.modal-full{
    width:96%;
    height:94vh;
}

/*=========================================================
    GLASS MODAL
=========================================================*/

.modal-glass{
    background:rgba(255,255,255,.20);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
}

/*=========================================================
    ALERTS
=========================================================*/

.alert{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:18px 24px;
    border-radius:18px;
    margin-bottom:20px;
    border-left:6px solid;
    box-shadow:0 8px 24px rgba(0,0,0,.05);
}

.alert-icon{
    font-size:24px;
    flex-shrink:0;
}

.alert-title{
    font-weight:700;
    margin-bottom:6px;
}

.alert p{
    margin:0;
    line-height:1.7;
}

.alert-success{
    background:#f0fff4;
    border-color:#16a34a;
    color:#166534;
}

.alert-info{
    background:#eff6ff;
    border-color:#2563eb;
    color:#1d4ed8;
}

.alert-warning{
    background:#fff7ed;
    border-color:#f59e0b;
    color:#b45309;
}

.alert-danger{
    background:#fef2f2;
    border-color:#dc2626;
    color:#b91c1c;
}

/*=========================================================
    DISMISSIBLE ALERT
=========================================================*/

.alert-dismissible{
    position:relative;
    padding-right:60px;
}

.alert-close{
    position:absolute;
    right:18px;
    top:18px;
    background:none;
    border:none;
    font-size:20px;
    cursor:pointer;
    color:inherit;
}

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

.toast-container{
    position:fixed;
    top:25px;
    right:25px;
    display:flex;
    flex-direction:column;
    gap:16px;
    z-index:10000;
}

/*=========================================================
    TOAST
=========================================================*/

.toast{
    width:360px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px;
    animation:toastIn .45s ease;
}

.toast-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    flex-shrink:0;
}

.toast-success .toast-icon{
    background:#16a34a;
}

.toast-error .toast-icon{
    background:#dc2626;
}

.toast-warning .toast-icon{
    background:#f59e0b;
}

.toast-info .toast-icon{
    background:#2563eb;
}

.toast-content h5{
    margin:0 0 6px;
    color:var(--primary);
}

.toast-content p{
    margin:0;
    color:var(--gray-600);
    font-size:.9rem;
}

.toast-close{
    margin-left:auto;
    cursor:pointer;
    color:#999;
    font-size:18px;
}

@keyframes toastIn{
    from{
        opacity:0;
        transform:translateX(60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/*=========================================================
    CONFIRMATION DIALOG
=========================================================*/

.confirm-dialog{
    max-width:500px;
    text-align:center;
}

.confirm-icon{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
    color:#fff;
    background:var(--gradient-secondary);
    margin-bottom:25px;
}

.confirm-title{
    font-size:1.8rem;
    color:var(--primary);
    margin-bottom:15px;
}

.confirm-text{
    color:var(--gray-600);
    margin-bottom:35px;
}

.confirm-actions{
    display:flex;
    justify-content:center;
    gap:18px;
}

/*=========================================================
    LOADING MODAL
=========================================================*/

.modal-loading{
    text-align:center;
    padding:50px;
}

.modal-loading .spinner{
    width:70px;
    height:70px;
    border:6px solid #e5e7eb;
    border-top-color:var(--primary);
    border-radius:50%;
    margin:0 auto 25px;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

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

@media(max-width:768px){

.modal{
    width:95%;
}

.modal-header,
.modal-body,
.modal-footer{
    padding:20px;
}

.modal-footer{
    flex-direction:column;
}

.modal-footer .btn{
    width:100%;
}

.toast{
    width:100%;
}

.toast-container{
    left:15px;
    right:15px;
}

.confirm-actions{
    flex-direction:column;
}

.confirm-actions .btn{
    width:100%;
}

}

/*=========================================================
    END PART 4B
=========================================================*/
/*=========================================================
    COMPONENTS.CSS
    PART 4C
    Pagination • Breadcrumbs • Tables
=========================================================*/


/*=========================================================
    BREADCRUMBS
=========================================================*/

.breadcrumb-wrapper{
    background:#f8fbff;
    padding:18px 0;
    border-bottom:1px solid #edf2f7;
}

.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    list-style:none;
    margin:0;
    padding:0;
}

.breadcrumb li{
    display:flex;
    align-items:center;
    color:var(--gray-600);
    font-size:.95rem;
}

.breadcrumb li a{
    color:var(--primary);
    font-weight:500;
    transition:.3s;
}

.breadcrumb li a:hover{
    color:var(--secondary);
}

.breadcrumb li:not(:last-child)::after{
    content:"/";
    margin-left:12px;
    color:#b8c2cc;
}

.breadcrumb .active{
    color:var(--secondary);
    font-weight:600;
}


/*=========================================================
    PAGINATION
=========================================================*/

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    list-style:none;
    margin:40px 0;
    padding:0;
}

.page-item{
    display:inline-flex;
}

.page-link{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffffff;
    border:1px solid #dbe4ef;
    color:var(--gray-700);
    font-weight:600;
    transition:.3s;
}

.page-link:hover{
    background:var(--gradient-primary);
    color:#fff;
    border-color:transparent;
    transform:translateY(-3px);
}

.page-item.active .page-link{
    background:var(--gradient-secondary);
    color:#fff;
    border-color:transparent;
}

.page-item.disabled .page-link{
    opacity:.45;
    pointer-events:none;
}


/*=========================================================
    PAGINATION COMPACT
=========================================================*/

.pagination-sm .page-link{
    width:38px;
    height:38px;
    font-size:.85rem;
}

.pagination-lg .page-link{
    width:58px;
    height:58px;
    font-size:1.05rem;
}


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

.table-responsive{
    width:100%;
    overflow-x:auto;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
}

.table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    min-width:700px;
}

.table th,
.table td{
    padding:18px 20px;
    text-align:left;
    border-bottom:1px solid #edf2f7;
}

.table th{
    background:var(--gradient-primary);
    color:#fff;
    font-weight:600;
    letter-spacing:.3px;
}

.table tbody tr{
    transition:.25s;
}

.table tbody tr:hover{
    background:#f8fbff;
}

.table-striped tbody tr:nth-child(even){
    background:#fafcff;
}

.table-bordered th,
.table-bordered td{
    border:1px solid #e5edf5;
}

.table-hover tbody tr:hover{
    background:rgba(0,87,217,.05);
}


/*=========================================================
    DATA TABLE
=========================================================*/

.data-table{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.data-table-header{
    padding:20px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #edf2f7;
}

.data-table-title{
    font-size:1.3rem;
    color:var(--primary);
    font-weight:700;
}

.data-table-actions{
    display:flex;
    gap:12px;
    align-items:center;
}

.data-table-footer{
    padding:20px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #edf2f7;
    color:var(--gray-600);
}


/*=========================================================
    TABLE STATUS BADGES
=========================================================*/

.status{
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border-radius:30px;
    font-size:.8rem;
    font-weight:600;
}

.status-success{
    background:#ecfdf5;
    color:#15803d;
}

.status-warning{
    background:#fff7ed;
    color:#c2410c;
}

.status-danger{
    background:#fef2f2;
    color:#b91c1c;
}

.status-info{
    background:#eff6ff;
    color:#1d4ed8;
}


/*=========================================================
    SORT ICONS
=========================================================*/

.sortable{
    cursor:pointer;
    user-select:none;
}

.sortable i{
    margin-left:6px;
    opacity:.5;
    transition:.3s;
}

.sortable:hover i{
    opacity:1;
}


/*=========================================================
    TABLE ACTION BUTTONS
=========================================================*/

.table-actions{
    display:flex;
    gap:10px;
}

.table-btn{
    width:38px;
    height:38px;
    border:none;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.3s;
}

.table-btn.view{
    background:#eff6ff;
    color:#2563eb;
}

.table-btn.edit{
    background:#fff7ed;
    color:#ea580c;
}

.table-btn.delete{
    background:#fef2f2;
    color:#dc2626;
}

.table-btn:hover{
    transform:translateY(-3px);
}


/*=========================================================
    EMPTY TABLE STATE
=========================================================*/

.table-empty{
    text-align:center;
    padding:60px 20px;
    color:var(--gray-500);
}

.table-empty i{
    font-size:54px;
    color:var(--primary);
    margin-bottom:20px;
    display:block;
}


/*=========================================================
    RESPONSIVE TABLE CARDS
=========================================================*/

@media(max-width:768px){

.table{
    min-width:100%;
}

.table thead{
    display:none;
}

.table,
.table tbody,
.table tr,
.table td{
    display:block;
    width:100%;
}

.table tr{
    margin-bottom:20px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    overflow:hidden;
}

.table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:none;
    border-bottom:1px solid #edf2f7;
    padding:14px 18px;
}

.table td:last-child{
    border-bottom:none;
}

.table td::before{
    content:attr(data-label);
    font-weight:700;
    color:var(--primary);
}

.data-table-header,
.data-table-footer{
    flex-direction:column;
    gap:15px;
    align-items:flex-start;
}

.pagination{
    flex-wrap:wrap;
}

}

/*=========================================================
    END PART 4C
=========================================================*/
/*=========================================================
    COMPONENTS.CSS
    PART 4D
    Loaders • Progress Indicators • Skeleton UI
=========================================================*/


/*=========================================================
    SPINNER LOADER
=========================================================*/

.spinner{
    width:60px;
    height:60px;
    border:5px solid rgba(0,87,217,.15);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:spinnerRotate 1s linear infinite;
}

.spinner-sm{
    width:35px;
    height:35px;
    border-width:4px;
}

.spinner-lg{
    width:90px;
    height:90px;
    border-width:8px;
}

@keyframes spinnerRotate{
    to{
        transform:rotate(360deg);
    }
}


/*=========================================================
    DUAL RING LOADER
=========================================================*/

.dual-ring{
    width:70px;
    height:70px;
    border-radius:50%;
    border:6px solid transparent;
    border-top-color:var(--primary);
    border-bottom-color:var(--secondary);
    animation:spinnerRotate 1.2s linear infinite;
}


/*=========================================================
    DOT LOADER
=========================================================*/

.dot-loader{
    display:flex;
    gap:10px;
}

.dot-loader span{
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--primary);
    animation:bounceDots 1.2s infinite ease-in-out;
}

.dot-loader span:nth-child(2){
    animation-delay:.2s;
}

.dot-loader span:nth-child(3){
    animation-delay:.4s;
}

@keyframes bounceDots{

0%,80%,100%{
transform:scale(.6);
opacity:.4;
}

40%{
transform:scale(1.2);
opacity:1;
}

}


/*=========================================================
    BAR LOADER
=========================================================*/

.bar-loader{
    display:flex;
    align-items:flex-end;
    gap:6px;
    height:40px;
}

.bar-loader span{
    width:8px;
    background:var(--gradient-primary);
    border-radius:20px;
    animation:bars 1s infinite ease-in-out;
}

.bar-loader span:nth-child(2){animation-delay:.1s;}
.bar-loader span:nth-child(3){animation-delay:.2s;}
.bar-loader span:nth-child(4){animation-delay:.3s;}
.bar-loader span:nth-child(5){animation-delay:.4s;}

@keyframes bars{

0%,100%{
height:12px;
}

50%{
height:40px;
}

}


/*=========================================================
    PROGRESS BAR
=========================================================*/

.progress{
    width:100%;
    height:14px;
    background:#edf2f7;
    border-radius:30px;
    overflow:hidden;
}

.progress-bar{
    height:100%;
    width:0;
    background:var(--gradient-primary);
    border-radius:30px;
    transition:width .8s ease;
}


/*=========================================================
    STRIPED PROGRESS
=========================================================*/

.progress-striped .progress-bar{

background-image:linear-gradient(
45deg,
rgba(255,255,255,.18) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,.18) 50%,
rgba(255,255,255,.18) 75%,
transparent 75%
);

background-size:40px 40px;

animation:progressMove 1s linear infinite;

}

@keyframes progressMove{

to{
background-position:40px 0;
}

}


/*=========================================================
    CIRCULAR PROGRESS
=========================================================*/

.circular-progress{

width:150px;
height:150px;
border-radius:50%;

background:
conic-gradient(
var(--primary) 75%,
#e8eef5 0
);

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

}

.circular-progress span{

width:120px;
height:120px;

border-radius:50%;

background:#fff;

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

font-size:1.4rem;
font-weight:700;
color:var(--primary);

}


/*=========================================================
    SKELETON UI
=========================================================*/

.skeleton{

position:relative;

overflow:hidden;

background:#eef3f8;

border-radius:10px;

}

.skeleton::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.65),
transparent
);

animation:skeletonMove 1.4s infinite;

}

@keyframes skeletonMove{

0%{
transform:translateX(-100%);
}

100%{
transform:translateX(100%);
}

}

.skeleton-title{
height:22px;
width:70%;
margin-bottom:18px;
}

.skeleton-text{
height:14px;
margin-bottom:12px;
}

.skeleton-image{
height:220px;
border-radius:18px;
}

.skeleton-avatar{
width:70px;
height:70px;
border-radius:50%;
}


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

.skeleton-card{

padding:25px;

background:#fff;

border-radius:20px;

box-shadow:var(--shadow-sm);

}


/*=========================================================
    EMPTY STATES
=========================================================*/

.empty-state{

text-align:center;

padding:70px 30px;

background:#fff;

border-radius:24px;

box-shadow:var(--shadow-sm);

}

.empty-icon{

font-size:70px;

margin-bottom:25px;

color:var(--primary);

opacity:.85;

}

.empty-title{

font-size:2rem;

font-weight:700;

margin-bottom:15px;

color:var(--primary);

}

.empty-text{

max-width:600px;

margin:auto auto 30px;

color:var(--gray-600);

line-height:1.8;

}


/*=========================================================
    LOADING OVERLAY
=========================================================*/

.loading-overlay{

position:fixed;

inset:0;

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

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

backdrop-filter:blur(6px);

}

.loading-content{

text-align:center;

}

.loading-text{

margin-top:20px;

font-size:1rem;

font-weight:600;

color:var(--primary);

letter-spacing:.8px;

}


/*=========================================================
    PULSE PLACEHOLDER
=========================================================*/

.pulse{

animation:pulseAnim 1.5s infinite;

}

@keyframes pulseAnim{

0%{
opacity:.5;
}

50%{
opacity:1;
}

100%{
opacity:.5;
}

}


/*=========================================================
    FADE IN LOADING
=========================================================*/

.fade-loading{

animation:fadeLoading .7s ease;

}

@keyframes fadeLoading{

from{
opacity:0;
transform:translateY(20px);
}

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

}


/*=========================================================
    SCALE LOADING
=========================================================*/

.scale-loading{

animation:scaleLoading .5s ease;

}

@keyframes scaleLoading{

from{
transform:scale(.92);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}


/*=========================================================
    PAGE TRANSITION
=========================================================*/

.page-loading{

animation:pageReveal .8s ease;

}

@keyframes pageReveal{

0%{
opacity:0;
transform:translateY(30px);
}

100%{
opacity:1;
transform:translateY(0);
}

}


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

@media(max-width:768px){

.circular-progress{
width:120px;
height:120px;
}

.circular-progress span{
width:95px;
height:95px;
font-size:1.1rem;
}

.loading-overlay{
padding:20px;
}

.spinner-lg{
width:70px;
height:70px;
}

}


/*=========================================================
    END PART 4D
=========================================================*/