/* =========================================================
   HOMA HOTELS GROUP - PREMIUM UI
   ========================================================= */

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:100;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-Thin.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-Thin.woff2') format('woff2');
}

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:200;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-ExtraLight.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-ExtraLight.woff2') format('woff2');
}

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:300;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-Light.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-Light.woff2') format('woff2');
}

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-Regular.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-Regular.woff2') format('woff2');
}

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-Medium.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-Medium.woff2') format('woff2');
}

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-SemiBold.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-SemiBold.woff2') format('woff2');
}

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-Bold.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-Bold.woff2') format('woff2');
}

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:800;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-ExtraBold.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-ExtraBold.woff2') format('woff2');
}

@font-face{
    font-family:maziar;
    font-style:normal;
    font-weight:900;
    font-display:swap;
    src:url('fonts/ttfe/Vazirmatn-RD-UI-FD-Black.ttf') format('ttf'),
        url('fonts/woff2e/Vazirmatn-RD-UI-FD-Black.woff2') format('woff2');
}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
    font-family:maziar,sans-serif;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    color:#172033;
    background:
        radial-gradient(circle at 10% 10%,rgba(20,91,130,.13),transparent 30%),
        radial-gradient(circle at 90% 15%,rgba(218,170,75,.13),transparent 28%),
        radial-gradient(circle at 50% 100%,rgba(25,95,135,.08),transparent 35%),
        linear-gradient(135deg,#f8fafc 0%,#eef3f7 45%,#f8f6f1 100%);
    overflow-x:hidden;
    position:relative;
}


/* Background decorative lights */

body::before,
body::after{
    content:"";
    position:fixed;
    width:380px;
    height:380px;
    border-radius:50%;
    pointer-events:none;
    filter:blur(80px);
    opacity:.28;
    z-index:-1;
    animation:ambientMove 12s ease-in-out infinite alternate;
}

body::before{
    top:-180px;
    right:-100px;
    background:rgba(25,93,130,.32);
}

body::after{
    bottom:-200px;
    left:-120px;
    background:rgba(214,166,69,.28);
    animation-delay:2s;
}

@keyframes ambientMove{
    0%{
        transform:translate(0,0) scale(1);
    }
    100%{
        transform:translate(-35px,25px) scale(1.15);
    }
}


/* =========================================================
   HEADER
   ========================================================= */

.pricing-header{
    position:relative;
    max-width:900px !important;
    margin:0 auto 35px !important;
    padding:55px 20px 20px !important;
    animation:headerAppear .9s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes headerAppear{
    from{
        opacity:0;
        transform:translateY(-35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* Logo */

.pricing-header img{
    width:auto;
    max-width:280px;
    max-height:125px;
    object-fit:contain;
    margin:0 auto 22px;
    display:block;
    filter:
        drop-shadow(0 15px 20px rgba(0,0,0,.13))
        drop-shadow(0 0 18px rgba(199,155,58,.12));
    animation:logoFloat 4s ease-in-out infinite;
    transition:all .5s cubic-bezier(.2,.8,.2,1);
}

.pricing-header img:hover{
    transform:scale(1.06) translateY(-4px);
    filter:
        drop-shadow(0 20px 30px rgba(0,0,0,.17))
        drop-shadow(0 0 25px rgba(199,155,58,.25));
}

@keyframes logoFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-7px);
    }
}


/* Header line */

.pricing-header::after{
    content:"";
    display:block;
    width:90px;
    height:3px;
    margin:22px auto 0;
    border-radius:50px;
    background:linear-gradient(90deg,#b78a32,#e5c36b,#b78a32);
    box-shadow:0 0 14px rgba(183,138,50,.35);
    animation:lineGrow 1.2s ease .5s both;
}

@keyframes lineGrow{
    from{
        width:0;
        opacity:0;
    }
    to{
        width:90px;
        opacity:1;
    }
}


/* Description */

p.lead{
    font-weight:500;
    font-size:15px;
    line-height:2;
    color:#667085;
    margin:0 auto;
    max-width:700px;
    letter-spacing:-.2px;
}


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

.container{
    max-width:1180px !important;
    padding-left:18px;
    padding-right:18px;
}


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

.card-deck{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:50px !important;
}


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

.card-deck .card{
    position:relative;
    min-width:0 !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.85);
    border-radius:20px !important;
    overflow:hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(255,255,255,.70)
        );
    box-shadow:
        0 8px 25px rgba(22,36,55,.07),
        inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    transform:translateY(35px);
    opacity:0;
    animation:cardAppear .7s cubic-bezier(.2,.8,.2,1) forwards;
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* Staggered animation */

.card-deck .card:nth-child(1){animation-delay:.05s}
.card-deck .card:nth-child(2){animation-delay:.10s}
.card-deck .card:nth-child(3){animation-delay:.15s}
.card-deck .card:nth-child(4){animation-delay:.20s}
.card-deck .card:nth-child(5){animation-delay:.25s}
.card-deck .card:nth-child(6){animation-delay:.30s}
.card-deck .card:nth-child(7){animation-delay:.35s}
.card-deck .card:nth-child(8){animation-delay:.40s}
.card-deck .card:nth-child(9){animation-delay:.45s}
.card-deck .card:nth-child(10){animation-delay:.50s}
.card-deck .card:nth-child(11){animation-delay:.55s}
.card-deck .card:nth-child(12){animation-delay:.60s}
.card-deck .card:nth-child(13){animation-delay:.65s}
.card-deck .card:nth-child(14){animation-delay:.70s}
.card-deck .card:nth-child(15){animation-delay:.75s}
.card-deck .card:nth-child(16){animation-delay:.80s}
.card-deck .card:nth-child(17){animation-delay:.85s}
.card-deck .card:nth-child(18){animation-delay:.90s}
.card-deck .card:nth-child(19){animation-delay:.95s}
.card-deck .card:nth-child(20){animation-delay:1s}
.card-deck .card:nth-child(21){animation-delay:1.05s}
.card-deck .card:nth-child(22){animation-delay:1.10s}
.card-deck .card:nth-child(23){animation-delay:1.15s}
.card-deck .card:nth-child(24){animation-delay:1.20s}
.card-deck .card:nth-child(25){animation-delay:1.25s}
.card-deck .card:nth-child(26){animation-delay:1.30s}
.card-deck .card:nth-child(27){animation-delay:1.35s}
.card-deck .card:nth-child(28){animation-delay:1.40s}
.card-deck .card:nth-child(29){animation-delay:1.45s}
.card-deck .card:nth-child(30){animation-delay:1.50s}
.card-deck .card:nth-child(31){animation-delay:1.55s}
.card-deck .card:nth-child(32){animation-delay:1.60s}
.card-deck .card:nth-child(33){animation-delay:1.65s}
.card-deck .card:nth-child(34){animation-delay:1.70s}
.card-deck .card:nth-child(35){animation-delay:1.75s}


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


/* Animated shine */

.card-deck .card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.65),
        transparent
    );
    transform:skewX(-20deg);
    transition:left .8s ease;
    pointer-events:none;
    z-index:3;
}

.card-deck .card:hover::before{
    left:140%;
}


/* Top golden line */

.card-deck .card::after{
    content:"";
    position:absolute;
    top:0;
    left:10%;
    width:80%;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        #c69a42,
        #e4c56f,
        #c69a42,
        transparent
    );
    opacity:.45;
    transition:
        opacity .4s ease,
        width .4s ease;
}


/* Hover */

.card-deck .card:hover{
    transform:translateY(-10px) scale(1.025);
    border-color:rgba(193,150,62,.35);
    box-shadow:
        0 22px 45px rgba(22,36,55,.14),
        0 0 0 1px rgba(193,150,62,.08),
        0 0 35px rgba(193,150,62,.10);
    z-index:5;
}

.card-deck .card:hover::after{
    opacity:1;
    width:90%;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.card-header{
    position:relative;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px 12px !important;
    border:0 !important;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.65),
            rgba(244,239,227,.55)
        ) !important;
}


/* small decorative icon-like element */

.card-header::before{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#c69a42;
    top:14px;
    right:15px;
    box-shadow:0 0 9px rgba(198,154,66,.5);
}

.card-header::after{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#c69a42;
    bottom:14px;
    left:15px;
    box-shadow:0 0 9px rgba(198,154,66,.5);
}


.card-header h4{
    position:relative;
    z-index:2;
    margin:0 !important;
    font-weight:600;
    font-size:13px;
    line-height:1.8;
    color:#263447;
    transition:all .35s ease;
}

.card:hover .card-header h4{
    color:#9a7028;
    transform:translateY(-1px);
}


/* =========================================================
   CARD BODY
   ========================================================= */

.card-body{
    position:relative;
    padding:15px 16px 18px !important;
    background:rgba(255,255,255,.30);
}


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

.card-body button{
    position:relative;
    overflow:hidden;
    height:46px;
    border:1px solid rgba(183,138,50,.45) !important;
    border-radius:12px !important;
    font-weight:700;
    font-size:12px;
    letter-spacing:.1px;
    color:#88621f !important;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.95),
        rgba(249,243,231,.9)
    ) !important;
    box-shadow:
        0 5px 14px rgba(0,0,0,.05),
        inset 0 1px 0 rgba(255,255,255,1);
    transition:
        all .35s cubic-bezier(.2,.8,.2,1);
}


/* Button shine */

.card-body button::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );
    transform:skewX(-20deg);
    transition:left .65s ease;
}

.card-body button:hover::before{
    left:150%;
}


/* Button hover */

.card-body button:hover{
    color:#fff !important;
    border-color:#b98a32 !important;
    background:linear-gradient(
        135deg,
        #a87925,
        #d2aa58
    ) !important;
    transform:translateY(-3px);
    box-shadow:
        0 10px 22px rgba(163,121,38,.25),
        0 0 18px rgba(201,157,67,.12);
}


/* Button active */

.card-body button:active{
    transform:translateY(0) scale(.97);
    box-shadow:0 4px 10px rgba(0,0,0,.1);
}


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

footer{
    position:relative;
    border-top:1px solid rgba(130,145,160,.18) !important;
    padding:25px 10px !important;
    margin-top:55px !important;
    margin-bottom:25px !important;
}

footer p{
    margin:0;
    color:#8993a1;
    font-size:11px;
    font-weight:400;
    transition:color .3s ease;
}

footer:hover p{
    color:#667085;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width:1100px){

    .card-deck{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

    .pricing-header{
        padding-top:45px !important;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width:767px){

    .pricing-header{
        padding:35px 15px 15px !important;
        margin-bottom:25px !important;
    }

    .pricing-header img{
        max-width:220px;
        max-height:100px;
    }

    p.lead{
        font-size:13px;
        line-height:2;
        padding:0 10px;
    }

    .card-deck{
        grid-template-columns:repeat(2,1fr);
        gap:13px;
    }

    .card-deck .card{
        border-radius:16px !important;
    }

    .card-header{
        min-height:72px;
        padding:12px 8px !important;
    }

    .card-header h4{
        font-size:11px;
    }

    .card-body{
        padding:10px !important;
    }

    .card-body button{
        height:42px;
        font-size:11px;
        border-radius:10px !important;
    }

    .card-deck .card:hover{
        transform:translateY(-5px) scale(1.015);
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:430px){

    .container{
        padding-left:12px;
        padding-right:12px;
    }

    .card-deck{
        gap:10px;
    }

    .card-header{
        min-height:68px;
    }

    .card-header h4{
        font-size:10px;
    }

    .card-body button{
        font-size:10px;
        height:40px;
    }

}


/* =========================================================
   REDUCE MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}