/*==============================
Google Font
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f5f8fc;
    color:#333;
    overflow-x:hidden;
}

/*==============================
Navbar
==============================*/

.navbar{
    background:#fff;
    padding:15px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:999;
}

.navbar-brand img{
    height:60px;
}

.navbar-nav .nav-link{
    color:#333;
    font-weight:600;
    margin-left:18px;
    transition:.3s;
}

.navbar-nav .nav-link:hover{
    color:#00a651;
}

.dropdown-menu{
    border:none;
    border-radius:12px;
    box-shadow:0 15px 35px rgba(0,0,0,.1);
}

/*==============================
Carousel
==============================*/

.slider-img{
    width:100%;
    height:650px;
    object-fit:cover;
    filter:brightness(60%);
}

.carousel-caption{
    bottom:28%;
}

.carousel-caption h1{
    font-size:58px;
    font-weight:800;
}

.carousel-caption p{
    font-size:22px;
    margin:20px 0;
}

.carousel-caption .btn{
    padding:14px 40px;
    border-radius:40px;
    font-size:18px;
}

/*==============================
Section
==============================*/

section{
    padding:80px 0;
}

section h2{
    font-size:40px;
    font-weight:700;
    color:#00a651;
    margin-bottom:20px;
}

section p{
    line-height:1.8;
    color:#666;
}

/*==============================
Cards
==============================*/

.card{
    border:none;
    border-radius:20px;
    transition:.4s;
    overflow:hidden;
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.card-body{
    padding:30px;
}

.card img{
    height:250px;
    object-fit:cover;
}

/*==============================
Benefits
==============================*/

.fa-solid{
    transition:.4s;
}

.card:hover .fa-solid{
    transform:scale(1.2);
    color:#ff4081 !important;
}

/*==============================
Statistics
==============================*/

.text-success{
    color:#00a651 !important;
}

.stats-box{

    background:#fff;

    border-radius:20px;

    padding:40px;

    text-align:center;

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

}

.stats-box h1{

    font-size:55px;

    font-weight:700;

}

.stats-box p{

    font-size:18px;

    margin-top:10px;

}

/*==============================
Testimonial
==============================*/

.testimonial{

    background:#fff;

    border-radius:20px;

    padding:30px;

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

}

.testimonial p{

    margin-top:15px;

    font-size:15px;

}

.testimonial h5{

    margin-top:20px;

    color:#00a651;

}

/*==============================
Winner
==============================*/

.winner-card{

    border-radius:20px;

    overflow:hidden;

    transition:.4s;

}

.winner-card:hover{

    transform:translateY(-8px);

}

.winner-card img{

    height:250px;

    object-fit:cover;

}

/*==============================
Franchise
==============================*/

.bg-success{

    background:linear-gradient(135deg,#00a651,#009245)!important;

}

.bg-success h2{

    color:#fff;

}

.bg-success p{

    color:#fff;

}

.bg-success .btn{

    padding:15px 45px;

    border-radius:40px;

    font-weight:600;

}

/*==============================
Buttons
==============================*/

.btn-success{

    background:#00a651;

    border:none;

    border-radius:35px;

    padding:12px 30px;

    transition:.3s;

}

.btn-success:hover{

    background:#ff4081;

}

/*==============================
Footer
==============================*/

.footer{

    background:#101820;

    color:#fff;

    padding:70px 0 20px;

}

.footer h4{

    margin-bottom:20px;

    color:#fff;

}

.footer p{

    color:#ccc;

}

.footer ul{

    list-style:none;

    padding:0;

}

.footer ul li{

    margin-bottom:10px;

}

.footer ul li a{

    color:#ccc;

    text-decoration:none;

}

.footer ul li a:hover{

    color:#00a651;

}

.footer hr{

    border-color:#444;

}

.footer .text-center{

    margin-top:20px;

}

/*==============================
Image Hover
==============================*/

img{

    transition:.4s;

}

img:hover{

    transform:scale(1.05);

}

/*==============================
Animation
==============================*/

.card,
.stats-box,
.testimonial{

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*==============================
Responsive
==============================*/

@media(max-width:991px){

.slider-img{

height:400px;

}

.carousel-caption{

bottom:15%;

}

.carousel-caption h1{

font-size:36px;

}

.carousel-caption p{

font-size:18px;

}

section{

padding:50px 0;

}

section h2{

font-size:30px;

}

}

@media(max-width:767px){

.slider-img{

height:300px;

}

.navbar-brand img{

height:45px;

}

.carousel-caption h1{

font-size:28px;

}

.carousel-caption p{

font-size:15px;

}

.card{

margin-bottom:20px;

}

.stats-box{

margin-bottom:20px;

}

}

/*==================================================
Draws Page
==================================================*/

.draws-page{
    --draw-primary:#00a651;
    --draw-secondary:#009245;
    --draw-dark:#08713e;
    --draw-deep:#064c2d;
    --draw-light:#eaf9f1;
    --draw-background:#f5f8fc;
    --draw-gold:#f4b400;
    --draw-text:#17221c;
    --draw-muted:#68736d;

    background:var(--draw-background);
    color:var(--draw-text);
    overflow:hidden;
}

/*==================================================
Draws Hero
==================================================*/

.draws-page .draws-hero{
    min-height:500px;
    padding:0;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(4,69,37,.94),
            rgba(0,166,81,.72)
        ),
        url('../images/draws-banner.jpg') center center/cover no-repeat;

    color:#fff;
}

.draws-page .draws-hero::before{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    top:-150px;
    right:-80px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.draws-page .draws-hero::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    bottom:-130px;
    left:-80px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
}

.draws-page .draws-hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
    padding:80px 0;
}

.draws-page .hero-label{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:9px 18px;
    margin-bottom:20px;

    border:1px solid rgba(255,255,255,.28);
    border-radius:50px;

    background:rgba(255,255,255,.15);
    backdrop-filter:blur(8px);

    font-size:14px;
    font-weight:700;
}

.draws-page .draws-hero h1{
    margin-bottom:20px;
    color:#fff;
    font-size:clamp(40px,6vw,68px);
    font-weight:800;
    line-height:1.08;
}

.draws-page .draws-hero h1 span{
    color:#ffe082;
}

.draws-page .draws-hero p{
    max-width:660px;
    margin:0;
    color:rgba(255,255,255,.9);
    font-size:18px;
    line-height:1.8;
}

.draws-page .hero-button{
    display:inline-flex;
    align-items:center;
    gap:9px;

    margin-top:25px;
    padding:14px 27px;

    border-radius:40px;
    background:#fff;
    color:var(--draw-primary);

    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.draws-page .hero-button:hover{
    color:var(--draw-dark);
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(0,0,0,.2);
}

/*==================================================
Common Draws Sections
==================================================*/

.draws-page .section-space{
    padding:80px 0;
}

.draws-page .section-heading{
    max-width:700px;
    margin:0 auto 45px;
    text-align:center;
}

.draws-page .section-heading .small-title{
    margin-bottom:8px;
    color:var(--draw-primary);
    font-size:13px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.draws-page .section-heading h2{
    margin-bottom:13px;
    color:var(--draw-text);
    font-size:clamp(30px,4vw,42px);
    font-weight:800;
}

.draws-page .section-heading p{
    margin:0;
    color:var(--draw-muted);
    line-height:1.8;
}

/*==================================================
Draw Statistics
==================================================*/

.draws-page .stats-wrapper{
    position:relative;
    z-index:10;
    margin-top:-55px;
    padding:0;
}

.draws-page .stat-card{
    height:100%;
    padding:27px 23px;

    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 35px rgba(19,54,36,.1);

    transition:.3s;
}

.draws-page .stat-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 45px rgba(19,54,36,.15);
}

.draws-page .stat-icon{
    width:58px;
    height:58px;

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

    margin-bottom:16px;
    border-radius:17px;

    background:var(--draw-light);
    color:var(--draw-primary);
    font-size:26px;
}

.draws-page .stat-value{
    margin-bottom:7px;
    color:var(--draw-primary);
    font-size:30px;
    font-weight:800;
    line-height:1;
}

.draws-page .stat-label{
    color:var(--draw-muted);
    font-size:14px;
}

/*==================================================
How It Works
==================================================*/

.draws-page .how-card{
    position:relative;
    height:100%;
    padding:32px 24px;

    border:1px solid #e6eee9;
    border-radius:20px;
    background:#fff;

    text-align:center;
    transition:.3s;
}

.draws-page .how-card:hover{
    transform:translateY(-8px);
    border-color:rgba(0,166,81,.3);
    box-shadow:0 18px 40px rgba(0,0,0,.09);
}

.draws-page .how-number{
    position:absolute;
    top:16px;
    right:17px;

    width:32px;
    height:32px;

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

    border-radius:50%;
    background:var(--draw-light);
    color:var(--draw-primary);

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

.draws-page .how-icon{
    width:74px;
    height:74px;

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

    margin:5px auto 20px;
    border-radius:22px;

    background:linear-gradient(
        135deg,
        var(--draw-primary),
        var(--draw-dark)
    );

    color:#fff;
    font-size:32px;
    box-shadow:0 12px 25px rgba(0,166,81,.24);
}

.draws-page .how-card h5{
    margin-bottom:10px;
    font-weight:700;
}

.draws-page .how-card p{
    margin:0;
    color:var(--draw-muted);
    font-size:14px;
    line-height:1.7;
}

/*==================================================
Coupons Section
==================================================*/

.draws-page .coupons-section{
    background:#eef5f1;
}

.draws-page .coupon-card{
    height:100%;
    overflow:hidden;

    border:none;
    border-radius:24px;
    background:#fff;

    box-shadow:0 10px 30px rgba(30,60,44,.09);
    transition:.35s;
}

.draws-page .coupon-card:hover{
    transform:translateY(-9px);
    box-shadow:0 22px 48px rgba(30,60,44,.16);
}

.draws-page .coupon-top{
    position:relative;
    overflow:hidden;
    padding:30px 27px 28px;

    background:linear-gradient(
        135deg,
        #0eaf5c,
        #08783f
    );

    color:#fff;
}

.draws-page .coupon-top::before,
.draws-page .coupon-top::after{
    content:"";
    position:absolute;
    bottom:-16px;

    width:32px;
    height:32px;

    border-radius:50%;
    background:#eef5f1;
}

.draws-page .coupon-top::before{
    left:-16px;
}

.draws-page .coupon-top::after{
    right:-16px;
}

.draws-page .coupon-top-decoration{
    position:absolute;
    top:-55px;
    right:-40px;

    width:130px;
    height:130px;

    border:24px solid rgba(255,255,255,.07);
    border-radius:50%;
}

.draws-page .coupon-status{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-bottom:18px;
    padding:7px 14px;

    border-radius:30px;
    background:rgba(255,255,255,.16);

    font-size:12px;
    font-weight:700;
}

.draws-page .status-dot{
    width:7px;
    height:7px;

    border-radius:50%;
    background:#8bffb9;
    box-shadow:0 0 0 4px rgba(139,255,185,.14);
}

.draws-page .coupon-title{
    margin-bottom:8px;
    font-size:24px;
    font-weight:800;
}

.draws-page .coupon-code{
    display:inline-flex;
    align-items:center;
    gap:7px;

    color:rgba(255,255,255,.84);
    font-size:13px;
    font-weight:500;
    letter-spacing:.7px;
}

.draws-page .coupon-body{
    padding:26px;
}

.draws-page .coupon-price-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px;
}

.draws-page .coupon-price{
    color:var(--draw-primary);
    font-size:34px;
    font-weight:800;
    line-height:1;
}

.draws-page .coupon-price small{
    display:block;
    margin-top:8px;
    color:var(--draw-muted);
    font-size:12px;
    font-weight:500;
}

.draws-page .ticket-icon{
    width:50px;
    height:50px;

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

    border-radius:15px;
    background:var(--draw-light);
    color:var(--draw-primary);

    font-size:24px;
}

.draws-page .coupon-detail{
    display:flex;
    justify-content:space-between;
    gap:15px;

    padding:12px 0;
    border-bottom:1px dashed #d9e4dd;

    font-size:14px;
}

.draws-page .coupon-detail span:first-child{
    color:var(--draw-muted);
}

.draws-page .coupon-detail strong{
    color:var(--draw-text);
    text-align:right;
}

.draws-page .availability-head{
    display:flex;
    justify-content:space-between;

    margin-top:18px;
    margin-bottom:8px;

    color:var(--draw-muted);
    font-size:12px;
}

.draws-page .availability-progress{
    height:8px;
    overflow:hidden;

    border-radius:20px;
    background:#e5ece8;
}

.draws-page .availability-progress span{
    display:block;
    height:100%;

    border-radius:inherit;
    background:linear-gradient(
        90deg,
        var(--draw-primary),
        #55cc8c
    );
}

.draws-page .coupon-countdown{
    display:flex;
    align-items:center;
    gap:8px;

    margin:18px 0;
    padding:12px 14px;

    border-radius:12px;
    background:#fff7d9;
    color:#866500;

    font-size:13px;
    font-weight:600;
}

.draws-page .buy-coupon-btn{
    width:100%;
    padding:13px 19px;

    border:none;
    border-radius:35px;

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

    color:#fff;
    font-weight:700;
    transition:.3s;
}

.draws-page .buy-coupon-btn:hover{
    background:linear-gradient(
        135deg,
        var(--draw-secondary),
        var(--draw-dark)
    );

    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 11px 24px rgba(0,166,81,.25);
}

/*==================================================
Prize Cards
==================================================*/

.draws-page .prize-card{
    position:relative;
    min-height:310px;
    overflow:hidden;

    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.draws-page .prize-card img{
    width:100%;
    height:310px;
    object-fit:cover;
    transition:.5s;
}

.draws-page .prize-card:hover img{
    transform:scale(1.08);
}

.draws-page .prize-overlay{
    position:absolute;
    right:0;
    bottom:0;
    left:0;

    padding:65px 23px 23px;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,.86)
    );

    color:#fff;
}

.draws-page .prize-overlay h5{
    margin-bottom:4px;
    font-weight:800;
}

.draws-page .prize-overlay p{
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:13px;
}

/*==================================================
Benefits
==================================================*/

.draws-page .benefit-item{
    display:flex;
    align-items:flex-start;
    gap:16px;

    height:100%;
    padding:23px;

    border-radius:18px;
    background:#fff;
    box-shadow:0 9px 26px rgba(0,0,0,.06);

    transition:.3s;
}

.draws-page .benefit-item:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(0,0,0,.1);
}

.draws-page .benefit-icon{
    flex:0 0 50px;

    width:50px;
    height:50px;

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

    border-radius:15px;
    background:var(--draw-light);
    color:var(--draw-primary);

    font-size:23px;
}

.draws-page .benefit-item h6{
    margin-bottom:6px;
    font-weight:700;
}

.draws-page .benefit-item p{
    margin:0;
    color:var(--draw-muted);
    font-size:13px;
    line-height:1.65;
}

/*==================================================
Empty Coupon State
==================================================*/

.draws-page .empty-coupons{
    padding:70px 25px;

    border-radius:24px;
    background:#fff;

    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
}

.draws-page .empty-icon{
    width:90px;
    height:90px;

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

    margin:0 auto 20px;
    border-radius:50%;

    background:var(--draw-light);
    color:var(--draw-primary);

    font-size:40px;
}

/*==================================================
Buy Coupon Modal
==================================================*/

#buyCouponModal .modal-dialog{
    max-width:570px;
}

#buyCouponModal .modal-content{
    overflow:hidden;

    border:none;
    border-radius:23px;
    box-shadow:0 22px 65px rgba(0,0,0,.24);
}

#buyCouponModal .modal-header{
    padding:22px 25px;

    border:none;
    background:linear-gradient(
        135deg,
        #00a651,
        #08783f
    );

    color:#fff;
}

#buyCouponModal .modal-title{
    font-weight:700;
}

#buyCouponModal .modal-body{
    padding:27px;
}

#buyCouponModal .modal-footer{
    padding:0 27px 27px;
    border:none;
}

#buyCouponModal .form-label{
    color:#333;
    font-weight:600;
}

#buyCouponModal .form-control{
    min-height:49px;
    padding:12px 15px;

    border:1px solid #dce4df;
    border-radius:12px;
}

#buyCouponModal .form-control:focus{
    border-color:#00a651;
    box-shadow:0 0 0 .2rem rgba(0,166,81,.13);
}

#buyCouponModal .buy-summary{
    padding:18px;

    border-radius:15px;
    background:#eaf9f1;
}

#buyCouponModal .modal-buy-btn{
    padding:12px 25px;

    border:none;
    border-radius:35px;

    background:#00a651;
    color:#fff;

    font-weight:700;
    transition:.3s;
}

#buyCouponModal .modal-buy-btn:hover{
    background:#08783f;
    color:#fff;
}

/*==================================================
Draws Page Animations
==================================================*/

.draws-page .stat-card,
.draws-page .how-card,
.draws-page .coupon-card,
.draws-page .prize-card,
.draws-page .benefit-item{
    animation:drawFadeUp .8s ease both;
}

@keyframes drawFadeUp{
    from{
        opacity:0;
        transform:translateY(35px);
    }

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

/*==================================================
Draws Responsive
==================================================*/

@media(max-width:991px){

    .draws-page .draws-hero{
        min-height:450px;
    }

    .draws-page .draws-hero-content{
        padding:70px 0 95px;
    }

    .draws-page .draws-hero h1{
        font-size:48px;
    }

    .draws-page .section-space{
        padding:60px 0;
    }

    .draws-page .stats-wrapper{
        margin-top:-40px;
    }

}

@media(max-width:767px){

    .draws-page .draws-hero{
        min-height:430px;
        text-align:center;
    }

    .draws-page .draws-hero-content{
        padding:60px 0 90px;
    }

    .draws-page .draws-hero h1{
        font-size:36px;
    }

    .draws-page .draws-hero p{
        font-size:15px;
    }

    .draws-page .hero-button{
        padding:12px 22px;
    }

    .draws-page .stats-wrapper{
        margin-top:-30px;
    }

    .draws-page .stat-card{
        padding:22px 17px;
        text-align:center;
    }

    .draws-page .stat-icon{
        margin-left:auto;
        margin-right:auto;
    }

    .draws-page .stat-value{
        font-size:26px;
    }

    .draws-page .section-space{
        padding:50px 0;
    }

    .draws-page .section-heading{
        margin-bottom:32px;
    }

    .draws-page .section-heading h2{
        font-size:29px;
    }

    .draws-page .coupon-body{
        padding:22px;
    }

    .draws-page .coupon-title{
        font-size:21px;
    }

    .draws-page .coupon-price{
        font-size:30px;
    }

    .draws-page .prize-card,
    .draws-page .prize-card img{
        min-height:270px;
        height:270px;
    }

}

@media(max-width:575px){

    .draws-page .draws-hero h1{
        font-size:31px;
    }

    .draws-page .hero-label{
        font-size:12px;
    }

    .draws-page .stat-card{
        padding:20px 12px;
    }

    .draws-page .stat-label{
        font-size:12px;
    }

    .draws-page .coupon-detail{
        font-size:13px;
    }

    #buyCouponModal .modal-dialog{
        margin:12px;
    }

    #buyCouponModal .modal-body{
        padding:21px;
    }

    #buyCouponModal .modal-footer{
        padding:0 21px 21px;
    }

}



.ticket-selector{
    margin-top:10px;
}

.ticket-label{
    display:block;
    margin-bottom:16px;
    color:#9a9dac;
    font-size:15px;
    font-weight:700;
    letter-spacing:1px;
}

.ticket-options{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.ticket-option{
    width:62px;
    height:62px;

    border:2px solid transparent;
    border-radius:20px;

    background:#f1f2f5;
    color:#657080;

    font-size:18px;
    font-weight:700;

    transition:.25s ease;
}

.ticket-option:hover{
    transform:translateY(-2px);
    border-color:#00a651;
    color:#00a651;
}

.ticket-option.active{
    background:#00a651;
    color:#fff;
    border-color:#111;
    box-shadow:0 10px 22px rgba(0,166,81,.28);
}

.ticket-total-box{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 20px;

    border-radius:15px;
    background:#f7f8fa;

    color:#667085;
    font-size:17px;
}

.ticket-total-box strong{
    color:#111827;
    font-size:21px;
    font-weight:800;
}

@media(max-width:575px){

    .ticket-option{
        width:52px;
        height:52px;
        border-radius:16px;
    }

    .ticket-total-box{
        padding:15px;
        font-size:14px;
    }

    .ticket-total-box strong{
        font-size:18px;
    }
}


.payment-option{
    position:relative;
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    min-height:105px;
    padding:16px;
    border:2px solid #e1e9e4;
    border-radius:16px;
    background:#fff;
    cursor:pointer;
    transition:.25s;
}

.payment-option:hover{
    border-color:#00a651;
    transform:translateY(-2px);
}

.payment-option.active{
    border-color:#00a651;
    background:#eaf9f1;
    box-shadow:0 8px 20px rgba(0,166,81,.12);
}

.payment-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.payment-option-icon{
    flex:0 0 45px;
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#eaf9f1;
    color:#00a651;
    font-size:22px;
}

.payment-option.active .payment-option-icon{
    background:#00a651;
    color:#fff;
}

.payment-option strong,
.payment-option small{
    display:block;
}

.payment-option strong{
    color:#1d2923;
    font-size:15px;
}

.payment-option small{
    margin-top:3px;
    color:#738078;
    font-size:12px;
}



/*==================================================
Customer Profile Page
==================================================*/

.profile-page{
    min-height:100vh;
    background:#f5f8fc;
}

.profile-hero{
    padding:70px 0 115px;
    color:#fff;
    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.15),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #08783f,
            #00a651
        );
}

.profile-hero-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.profile-hero-user{
    display:flex;
    align-items:center;
    gap:22px;
}

.profile-hero-avatar{
    flex:0 0 105px;
    width:105px;
    height:105px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border:5px solid rgba(255,255,255,.25);
    border-radius:30px;
    background:rgba(255,255,255,.16);
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.profile-hero-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-hero-avatar span{
    font-size:44px;
    font-weight:800;
}

.profile-label{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 13px;
    margin-bottom:12px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:25px;
    background:rgba(255,255,255,.12);
    font-size:12px;
    font-weight:700;
}

.profile-hero h1{
    margin-bottom:8px;
    color:#fff;
    font-size:42px;
    font-weight:800;
}

.profile-hero p{
    max-width:610px;
    margin:0;
    color:rgba(255,255,255,.84);
    line-height:1.7;
}

.profile-ticket-link{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 22px;
    border-radius:35px;
    color:#00a651;
    background:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.25s;
}

.profile-ticket-link:hover{
    color:#08783f;
    transform:translateY(-2px);
}

.profile-content{
    padding:0 0 80px;
}

.profile-content > .container{
    position:relative;
    margin-top:-60px;
}

.profile-sidebar-card,
.profile-form-card{
    border:1px solid #e5ece8;
    border-radius:24px;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.profile-sidebar-card{
    position:sticky;
    top:105px;
    padding:30px;
    text-align:center;
}

.profile-sidebar-avatar{
    width:115px;
    height:115px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 18px;
    border:6px solid #eaf9f1;
    border-radius:32px;
    background:#eaf9f1;
    color:#00a651;
}

.profile-sidebar-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-sidebar-avatar span{
    font-size:47px;
    font-weight:800;
}

.profile-sidebar-card h4{
    margin-bottom:5px;
    font-weight:800;
}

.profile-sidebar-card > p{
    color:#758078;
    font-size:13px;
}

.profile-meta-list{
    margin-top:25px;
    padding-top:15px;
    border-top:1px solid #edf2ef;
}

.profile-meta-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid #edf2ef;
    text-align:left;
    font-size:12px;
}

.profile-meta-item span{
    color:#77827b;
}

.profile-meta-item span i{
    margin-right:5px;
    color:#00a651;
}

.profile-meta-item strong{
    text-align:right;
    word-break:break-word;
}

.profile-security-note{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
    padding:15px;
    border-radius:16px;
    background:#eaf9f1;
    text-align:left;
}

.profile-security-note > i{
    color:#00a651;
    font-size:24px;
}

.profile-security-note strong,
.profile-security-note small{
    display:block;
}

.profile-security-note strong{
    font-size:13px;
}

.profile-security-note small{
    margin-top:2px;
    color:#6d7d74;
    font-size:10px;
}

.profile-form-card{
    padding:32px;
}

.profile-card-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:28px;
    padding-bottom:22px;
    border-bottom:1px solid #edf2ef;
}

.profile-card-heading span{
    color:#00a651;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.profile-card-heading h3{
    margin:5px 0 7px;
    font-weight:800;
}

.profile-card-heading p{
    margin:0;
    color:#748079;
    font-size:13px;
}

.profile-heading-icon{
    flex:0 0 54px;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    color:#00a651;
    background:#eaf9f1;
    font-size:25px;
}

.profile-image-upload{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px;
    border:1px dashed #ccddd3;
    border-radius:17px;
    background:#f9fcfa;
}

.upload-icon{
    flex:0 0 50px;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:#eaf9f1;
    color:#00a651;
    font-size:22px;
}

.profile-form-section{
    margin-top:28px;
    padding-top:25px;
    border-top:1px solid #edf2ef;
}

.profile-form-section h5{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:20px;
    color:#173624;
    font-size:16px;
    font-weight:750;
}

.profile-form-section h5 i{
    color:#00a651;
}

.profile-input-wrapper{
    position:relative;
}

.profile-input-wrapper > i{
    position:absolute;
    z-index:4;
    left:15px;
    top:50%;
    color:#839088;
    transform:translateY(-50%);
}

.profile-input-wrapper .form-control,
.profile-input-wrapper .form-select{
    padding-left:43px;
}

.profile-input-wrapper .form-control,
.profile-input-wrapper .form-select,
.profile-form-card > form textarea{
    min-height:50px;
    border:1px solid #dce6e0;
    border-radius:13px;
    background:#fbfdfc;
}

.profile-form-card textarea{
    padding:13px 15px;
}

.profile-input-wrapper .form-control:focus,
.profile-input-wrapper .form-select:focus,
.profile-form-card textarea:focus{
    border-color:#00a651;
    box-shadow:0 0 0 .2rem rgba(0,166,81,.11);
}

.profile-password-toggle{
    position:absolute;
    z-index:5;
    top:50%;
    right:15px;
    padding:0;
    border:0;
    color:#7e8d84;
    background:transparent;
    transform:translateY(-50%);
}

.profile-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:25px;
}

.profile-save-btn{
    min-width:180px;
    min-height:48px;
    border:0;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(
        135deg,
        #00a651,
        #08783f
    );
    font-weight:700;
    box-shadow:0 12px 25px rgba(0,166,81,.22);
    transition:.25s;
}

.profile-save-btn:hover{
    color:#fff;
    transform:translateY(-2px);
}

.profile-page .alert{
    border:0;
    border-radius:15px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}

@media(max-width:991px){

    .profile-hero-content{
        align-items:flex-start;
        flex-direction:column;
    }

    .profile-sidebar-card{
        position:relative;
        top:auto;
    }

}

@media(max-width:767px){

    .profile-hero{
        padding:55px 0 90px;
        text-align:center;
    }

    .profile-hero-user{
        align-items:center;
        flex-direction:column;
    }

    .profile-hero-content{
        align-items:center;
    }

    .profile-hero h1{
        font-size:34px;
    }

    .profile-content > .container{
        margin-top:-40px;
    }

    .profile-form-card{
        padding:23px 18px;
    }

    .profile-card-heading{
        align-items:flex-start;
    }

    .profile-heading-icon{
        display:none;
    }

    .profile-image-upload{
        align-items:flex-start;
        flex-direction:column;
    }

    .profile-form-actions{
        align-items:stretch;
        flex-direction:column-reverse;
    }

    .profile-form-actions button{
        width:100%;
    }

}


/*==================================================
My Tickets Page
==================================================*/

.my-tickets-page{
    min-height:100vh;
    background:#f5f8fc;
}

.tickets-hero{
    padding:75px 0 120px;
    color:#fff;
    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #08783f,
            #00a651
        );
}

.tickets-hero-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.tickets-hero-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 15px;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:30px;
    background:rgba(255,255,255,.13);
    font-size:13px;
    font-weight:700;
}

.tickets-hero h1{
    margin-bottom:10px;
    color:#fff;
    font-size:48px;
    font-weight:800;
}

.tickets-hero p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.86);
    line-height:1.8;
}

.tickets-buy-more-btn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 24px;
    border-radius:35px;
    color:#00a651;
    background:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.25s;
}

.tickets-buy-more-btn:hover{
    color:#08783f;
    transform:translateY(-2px);
}

.tickets-content{
    padding:0 0 80px;
}

.tickets-content > .container{
    position:relative;
    margin-top:-60px;
}

.tickets-stats-row{
    margin-bottom:34px;
}

.ticket-stat-card{
    height:100%;
    display:flex;
    align-items:center;
    gap:15px;
    padding:22px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.09);
}

.ticket-stat-icon{
    flex:0 0 55px;
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:#00a651;
    background:#eaf9f1;
    font-size:25px;
}

.ticket-stat-icon.paid{
    color:#198754;
    background:#e3f7eb;
}

.ticket-stat-icon.pending{
    color:#bd8200;
    background:#fff4d2;
}

.ticket-stat-icon.online{
    color:#2469c7;
    background:#e9f2ff;
}

.ticket-stat-card h3{
    margin:0 0 4px;
    font-size:28px;
    font-weight:800;
}

.ticket-stat-card span{
    color:#758078;
    font-size:13px;
}

.tickets-filter-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:23px 25px;
    margin-bottom:30px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 9px 28px rgba(0,0,0,.07);
}

.tickets-filter-card h5{
    margin-bottom:4px;
    font-weight:800;
}

.tickets-filter-card p{
    margin:0;
    color:#778079;
    font-size:13px;
}

.tickets-filter-card .form-select{
    min-width:200px;
    min-height:46px;
    border-radius:12px;
}

.user-ticket-card{
    height:100%;
    overflow:hidden;
    border:1px solid #e5ece8;
    border-radius:23px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
    transition:.3s;
}

.user-ticket-card:hover{
    transform:translateY(-7px);
    box-shadow:0 19px 44px rgba(0,0,0,.12);
}

.ticket-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding:23px;
    background:linear-gradient(135deg,#effbf5,#fbfffd);
    border-bottom:1px dashed #dbe6df;
}

.ticket-card-top h5{
    margin:13px 0 4px;
    font-weight:750;
}

.ticket-card-top small{
    color:#768079;
}

.ticket-method-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 11px;
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.ticket-method-badge.cash{
    color:#946900;
    background:#fff1cf;
}

.ticket-method-badge.online{
    color:#2367c7;
    background:#e8f1ff;
}

.ticket-status-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:7px 11px;
    border-radius:25px;
    font-size:11px;
    font-weight:700;
}

.ticket-status-badge.paid{
    color:#147540;
    background:#dff6e8;
}

.ticket-status-badge.pending{
    color:#926500;
    background:#fff1d2;
}

.ticket-code-area{
    padding:27px;
    text-align:center;
}

.ticket-code-area > span{
    display:block;
    margin-bottom:8px;
    color:#818a84;
    font-size:11px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.ticket-code-area > strong{
    display:block;
    margin-bottom:15px;
    color:#00a651;
    font-size:31px;
    font-weight:800;
    letter-spacing:3px;
}

.copy-ticket-btn{
    padding:8px 16px;
    border:1px solid #dce7e1;
    border-radius:25px;
    color:#68756e;
    background:#fff;
    font-size:12px;
    font-weight:600;
    transition:.2s;
}

.copy-ticket-btn:hover,
.copy-ticket-btn.copied{
    border-color:#00a651;
    color:#00a651;
    background:#eaf9f1;
}

.ticket-details{
    padding:0 23px;
}

.ticket-detail-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid #eef2ef;
    font-size:13px;
}

.ticket-detail-row span{
    color:#758078;
}

.ticket-detail-row span i{
    margin-right:6px;
    color:#00a651;
}

.ticket-detail-row strong{
    text-align:right;
}

.payment-reference{
    max-width:145px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ticket-card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:18px 23px;
    margin-top:12px;
    background:#f9fbfa;
}

.ticket-card-footer small{
    color:#7b857f;
}

.draw-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:700;
}

.draw-status > span{
    width:8px;
    height:8px;
    border-radius:50%;
}

.draw-status.active{
    color:#16834b;
}

.draw-status.active > span{
    background:#20a861;
    box-shadow:0 0 0 4px rgba(32,168,97,.12);
}

.draw-status.upcoming{
    color:#b67c00;
}

.draw-status.upcoming > span{
    background:#f4b400;
}

.draw-status.ended{
    color:#d14343;
}

.draw-status.ended > span{
    background:#dc3545;
}

.no-tickets-card{
    padding:75px 25px;
    border-radius:24px;
    background:#fff;
    text-align:center;
    box-shadow:0 12px 35px rgba(0,0,0,.07);
}

.no-tickets-icon{
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    border-radius:50%;
    color:#00a651;
    background:#eaf9f1;
    font-size:40px;
}

.no-tickets-card h3{
    font-weight:800;
}

.no-tickets-card p{
    margin-bottom:25px;
    color:#78827c;
}

.tickets-pagination .pagination{
    justify-content:center;
}

@media(max-width:991px){

    .tickets-hero-content{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media(max-width:767px){

    .tickets-hero{
        padding:55px 0 95px;
        text-align:center;
    }

    .tickets-hero-content{
        align-items:center;
    }

    .tickets-hero h1{
        font-size:36px;
    }

    .tickets-content > .container{
        margin-top:-42px;
    }

    .ticket-stat-card{
        align-items:center;
        flex-direction:column;
        padding:18px 12px;
        text-align:center;
    }

    .tickets-filter-card{
        align-items:stretch;
        flex-direction:column;
    }

    .tickets-filter-card .form-select{
        width:100%;
    }

    .ticket-card-footer{
        align-items:flex-start;
        flex-direction:column;
    }

}