:root {
    --blue: #009fe3;
    --red: #e31e24;
    --ink: #101c26;
    --steel: #1b2b38;
    --mut: #54626e;
    --bg: #fff;
    --alt: #eef7fc;
    --line: #d6e3ec;
    --glow: #ff7a18;
    --hf: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --bf: 'Barlow', system-ui, sans-serif
}

@media(prefers-color-scheme:dark) {
    :root {
        --ink: #e8f0f5;
        --mut: #a3b2be;
        --bg: #0d151c;
        --alt: #132029;
        --line: #26394a;
        --steel: #0a1117
    }
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font: 400 1.0625rem/1.65 var(--bf);
    color: var(--ink);
    background: var(--bg)
}

img,
svg {
    max-width: 100%
}

a {
    color: var(--blue)
}

h1,
h2,
h3,
h4 {
    font-family: var(--hf);
    line-height: 1.1;
    margin: 0 0 .6em;
    letter-spacing: .01em
}

h1 {
    font-size: clamp(2.4rem, 6vw, 4.4rem)
}

h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem)
}

h3 {
    font-size: 1.4rem
}

p {
    margin: 0 0 1em;
    max-width: 68ch
}

.wrap {
    width: min(1160px, 100% - 2.5rem);
    margin-inline: auto
}

.skip {
    position: absolute;
    left: -999px
}

.skip:focus {
    left: 8px;
    top: 8px;
    background: #fff;
    color: #000;
    padding: 8px;
    z-index: 99
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px
}

.hd {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--line)
}

.hd-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px
}

.logo {
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: var(--red);
    font: 700 1.45rem var(--hf);
    letter-spacing: .08em
}
.logo img{display:block;height:66px;width:auto}

.nav {
    display: flex;
    gap: 1.4rem;
    align-items: center
}

.nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 500
}

.nav a.on {
    color: var(--blue);
    box-shadow: 0 2px 0 var(--blue)
}

.btn {
    display: inline-block;
    background: var(--red);
    color: #fff !important;
    padding: .8em 1.5em;
    border: 2px solid var(--red);
    border-radius: 4px;
    font: 600 1rem var(--bf);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s
}

.btn:hover {
    background: #b9151a
}

.btn.sm {
    padding: .45em 1em;
    box-shadow: none !important
}

.btn.ghost {
    background: transparent;
    border-color: #fff
}

.btn.ghost:hover {
    background: rgba(255, 255, 255, .15)
}

.burger {
    display: none;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer
}

.burger i {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
    margin: 5px 0
}

.hero {
    background: radial-gradient(ellipse at 85% 90%, rgba(255, 122, 24, .55), transparent 55%), linear-gradient(160deg, #0a1117, #1b2b38);
    color: #fff;
    padding: clamp(3rem, 9vw, 7rem) 0;
    overflow: hidden
}

.hero-in {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center
}

.kick {
    color: #8fd8ff;
    font-weight: 600;
    margin-bottom: 1rem
}

.lead {
    font-size: 1.2rem;
    color: #d6e3ec
}

.acts {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.8rem
}

.pour {
    position: relative;
    height: 300px
}

.pour span {
    position: absolute;
    left: 50%;
    top: 0;
    width: 34px;
    height: 0;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(#ffd27a, var(--glow) 50%, var(--red));
    box-shadow: 0 0 40px 10px rgba(255, 122, 24, .6);
    animation: pour 2.4s ease-out forwards
}

.pour span:nth-child(2) {
    margin-left: -60px;
    width: 14px;
    animation-delay: .4s
}

.pour span:nth-child(3) {
    margin-left: 50px;
    width: 18px;
    animation-delay: .8s
}

@keyframes pour {
    to {
        height: 100%
    }
}

.stats {
    background: var(--steel);
    color: #fff;
    padding: 2rem 0
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem
}

.stats b {
    display: block;
    font: 700 2.2rem var(--hf);
    color: var(--glow)
}

.stats span {
    color: #b8c7d2;
    font-size: .95rem
}

.sec {
    padding: clamp(3rem, 7vw, 5.5rem) 0
}

.alt {
    background: var(--alt)
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem
}

.card {
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-top: 4px solid var(--blue);
    border-radius: 4px;
    background: var(--bg)
}

/* css for gallary pages */
.gtabs>input{position:absolute;opacity:0;pointer-events:none}
.gtab-bar{display:flex;max-width:560px;margin:0 auto 2.5rem}
.gtab-bar label{flex:1;text-align:center;padding:.8rem 1rem;font:500 1.3rem var(--bf);color:#9aa3ab;cursor:pointer;border-bottom:4px solid #c0c0c0}
#t-img:checked~.gtab-bar label[for=t-img],#t-vid:checked~.gtab-bar label[for=t-vid]{border-color:var(--blue);color:var(--blue)}
#t-img:focus-visible~.gtab-bar label[for=t-img],#t-vid:focus-visible~.gtab-bar label[for=t-vid]{outline:3px solid var(--blue);outline-offset:2px}

.gg{display:none;grid-template-columns:repeat(3,1fr);gap:1.5rem}
#t-img:checked~.p-img,#t-vid:checked~.p-vid{display:grid}

.gc{margin:0;background:var(--bg);border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.12)}
.gc a{display:block}
.gc img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center}
.gc video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.gc figcaption{padding:1rem 1.2rem 1.3rem;text-align:center;font-size:1.05rem}

@media(max-width:900px){.gg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gg{grid-template-columns:1fr}.gtab-bar label{font-size:1.1rem}}

.card p {
    margin: 0;
    color: var(--mut)
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start
}

.panel {
    background: var(--steel);
    color: #e8f0f5;
    padding: 2rem;
    border-radius: 4px
}

.panel h3 {
    color: var(--glow)
}

.ticks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem
}

.ticks li {
    padding: .35em 0 .35em 1.6em;
    position: relative
}

.ticks li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .95em;
    width: .7em;
    height: .7em;
    background: var(--red);
    clip-path: polygon(0 0, 100% 50%, 0 100%)
}

.ticks.plain li:before {
    background: var(--blue)
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.chips span {
    padding: .45em 1em;
    border: 1px solid var(--blue);
    border-radius: 99px
}

.chips.big span {
    font: 600 1.3rem var(--hf);
    padding: .5em 1.2em
}

.small {
    color: var(--mut);
    font-size: .95rem
}

.phero {
    background: linear-gradient(120deg, #0a1117, #1b2b38 70%, #7a2410);
    color: #fff;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0
}

.phero p {
    color: #d6e3ec;
    font-size: 1.15rem;
    margin: 0
}

.tbl {
    overflow-x: auto
}

.mt {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg)
}

.mt th {
    background: var(--blue);
    color: #fff;
    text-align: left
}

.mt th,
.mt td {
    padding: .7em 1em;
    border-bottom: 1px solid var(--line)
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.6rem
}

.filters button {
    font: 500 .95rem var(--bf);
    padding: .5em 1.1em;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--bg);
    color: var(--ink);
    cursor: pointer
}

.filters .on {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.pc {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg)
}

.pc h3 {
    margin: .9rem 1rem .3rem
}

.pc p {
    margin: 0 1rem 1rem;
    color: var(--mut);
    font-size: .95rem
}

/* .cert{display:block;max-width:420px;margin:1.5rem auto 1rem;background:#fff;padding:12px;border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.cert img{display:block;width:100%;height:auto}
.cert+.small{text-align:center;margin-inline:auto} */

.certs{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:1.5rem;align-items:start}
.certs figure{margin:0}
.certs .cert{max-width:100%;margin:0 0 1rem}
.certs figcaption h3{margin-bottom:.2em}
.certnote{text-align:center;margin:1.5rem auto 0}
@media(max-width:700px){.certs{grid-template-columns:1fr}}

.pi {
   aspect-ratio:auto!important;
    height:240px;
    background-size:cover!important;
    background-position:center top!important;
    }
    
.pg{align-items:start}


.pc[hidden] {
    display: none
}

.cta {
    background: var(--blue);
    color: #fff;
    padding: 3.5rem 0;
    text-align: center
}

.cta p {
    margin-inline: auto
}

.form {
    display: grid;
    gap: 1rem
}

.form label {
    display: grid;
    gap: .3rem;
    font-weight: 500
}

.form input,
.form select,
.form textarea {
    font: inherit;
    padding: .7em;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg);
    color: var(--ink)
}

.form .invalid {
    border-color: var(--red)
}

.msg {
    color: var(--red);
    margin: 0
}

.ft {
    background: var(--steel);
    color: #b8c7d2;
    padding-top: 3rem
}

.ft a {
    display: block;
    color: #b8c7d2;
    text-decoration: none;
    padding: .2em 0
}

.ft a:hover {
    color: #fff
}

.ft h4 {
    color: #fff
}

.ftl {
    color: #fff;
    font: 700 1.4rem var(--hf);
    letter-spacing: .08em
}

.ft-in {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 2rem
}

.copy {
    border-top: 1px solid #2c3f4e;
    margin-top: 2rem;
    padding: 1.2rem 0;
    font-size: .9rem
}
.plan{display:grid;grid-template-columns:1.5fr 1fr;gap:1.4rem;margin-top:1.5rem}
.plan-main{padding:2rem;border-radius:4px;background:var(--steel);color:#e8f0f5;border-left:6px solid var(--glow)}
.plan-main h3{font-size:1.8rem;color:#fff}
.plan-main .small{color:#b8c7d2}
.plan-side{display:grid;gap:1.4rem;align-content:start}
.tag{display:inline-block;margin-bottom:.8rem;padding:.2em .8em;border-radius:99px;background:var(--glow);color:#101c26;font:600 .85rem var(--bf);text-transform:uppercase;letter-spacing:.05em}
@media(max-width:900px){.plan{grid-template-columns:1fr}}

@media(min-width:901px){.split3{grid-template-columns:repeat(3,1fr)}}

@media(max-width:900px) {

    .hero-in,
    .split,
    .grid3,
    .ft-in {
        grid-template-columns: 1fr
    }

    .grid4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .pour {
        height: 140px
    }

    .burger {
        display: block
    }

    .nav {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--bg);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.25rem 1.5rem;
        border-bottom: 1px solid var(--line);
        display: none
    }

    .nav.open {
        display: flex
    }
}

@media(max-width:560px) {
    .pg.grid4 {
        grid-template-columns: 1fr
    }

    .mt thead {
        display: none
    }

    .mt tr {
        display: block;
        border-bottom: 2px solid var(--line);
        padding: .5em 0
    }

    .mt td {
        display: flex;
        justify-content: space-between;
        border: 0;
        padding: .3em 1em
    }

    .mt td:before {
        content: attr(data-l);
        font-weight: 600
    }
}

@media(prefers-reduced-motion:reduce) {
    .pour span {
        animation: none;
        height: 100%
    }

    html {
        scroll-behavior: auto
    }
}

.slider {
    position: relative;
    background: #0a1117;
    color: #fff;
    overflow: hidden
}

.slide {
    display: none;
    min-height: clamp(320px, 48vw, 460px);
    align-items: center;
    background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), var(--img) center/cover, var(--g)
}

.slide.on {
    display: flex;
    animation: sfade .6s ease
}

@keyframes sfade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.slide .wrap {
    padding-block: 3rem
}

.st {
    max-width: 560px
}

.st h2 {
    font-size: clamp(2rem, 5vw, 3.2rem)
}

.st p {
    font-size: 1.15rem;
    color: #e8f0f5;
    margin-bottom: 1.5rem
}

.sl-prev,
.sl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer
}

.sl-prev:hover,
.sl-next:hover {
    background: var(--red)
}

.sl-prev {
    left: 12px
}

.sl-next {
    right: 12px
}

.sl-dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px
}

.sl-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    padding: 0;
    cursor: pointer
}

.sl-dots .on {
    background: #fff
}

@media(max-width:700px) {

    .sl-prev,
    .sl-next {
        top: auto;
        bottom: 6px;
        transform: none;
        width: 36px;
        height: 36px
    }

    .slide .wrap {
        padding-bottom: 4rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .slide.on {
        animation: none
    }
}