/* ==================================================
   WEB XPERTS - PREMIUM HERO
================================================== */

@import url("/css/poppins.css?family=Poppins:wght@200;300;400;500;600;700&display=swap");

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

:root {
    --wx-white: #ffffff;
    --wx-text-muted: rgba(255,255,255,.68);
    --wx-border: rgba(255,255,255,.18);

    /* Change these two to exact Web Xperts brand colours */
    --wx-accent: #38d7ff;
    --wx-accent-2: #4c6fff;

    --wx-dark: #03070c;
	font-family: "Poppins", sans-serif;
}


.logout {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  text-decoration: none;
  color: grey;
  background: steelblue;
  border-radius:16px;
  color:white;
  padding:2px 6px;
  transition:500ms;
  border:1px solid steelblue;
}

.logout-icon{
	background-color:steelblue;
	color:white;
	font-size:1rem;
	width:1.2rem;
	height:1.2rem;
	padding:6px;
	border-radius:50%;
	display:flex;
	justify-content: center;
	align-items: center;
	
}

.logout:hover{
	background: white;
	color:steelblue;
	border:1px solid steelblue;
}


/* ==================================================
   HERO
================================================== */

.hero-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 680px;

    overflow: hidden;

    background: var(--wx-dark);

    isolation: isolate;
}


/* subtle grid */

.hero-banner::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 15;

    pointer-events: none;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 90px 90px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 20%,
            transparent 85%
        );
}


/* ==================================================
   SECTIONS
================================================== */

.banner_section {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    visibility: hidden;
    opacity: 0;
}


.banner_section .outer,
.banner_section .inner {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    will-change: transform;
}


.bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


/* ==================================================
   BACKGROUND IMAGE
================================================== */

.bg-media {
    position: absolute;

    inset: -5%;

    width: 110%;
    height: 110%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.07);

    will-change: transform;
}


/* cinematic overlay */

.bg::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;
background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(255,255,255,0.01));
}


/* bottom depth */

.bg::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(180deg,rgba(0,0,0,.1) 0%,transparent 50%,rgba(0,0,0,.5) 100%);
}


/* ==================================================
   SLIDE IMAGES
================================================== */

.first .bg-media {
    background-image: url('../images/hero1.png');
}

.second .bg-media {
    background-image: url('../images/hero2.png');
}

.third .bg-media {
    background-image: url('../images/hero3.png');
}

.fourth .bg-media {
    background-image: url('../images/hero4.png');
}

.fifth .bg-media {
    background-image: url('../images/hero5.png');
}


/* ==================================================
   CONTENT
================================================== */

.hero-content-wrap {
    position: relative;

    z-index: 5;

    width: min(1400px, calc(100% - 100px));
    height: 100%;

    margin-inline: auto;

    display: flex;
    align-items: center;
}


.hero-content {
    width: min(950px, 76vw);

    padding-bottom: 60px;
}


/* ==================================================
   EYEBROW
================================================== */

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 28px;

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

    font-size: .78rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .22em;
}


.hero-eyebrow > span {
    display: block;

    width: 42px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--wx-accent),
            var(--wx-accent-2)
        );
}


/* ==================================================
   MAIN HEADING
================================================== */

.section-heading {
    position: relative;
    z-index: 5;
    max-width: 100vw;
    margin: 0;
    color: var(--wx-white);
    /* font-size: clamp(3.7rem, 6.7vw, 7.4rem); */
	font-size:3rem;
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.065em;
    text-wrap: balance;
}


/* split text chars */

.section-heading .char {
    display: inline-block;

    will-change:
        transform,
        opacity;
}


/* ==================================================
   DESCRIPTION
================================================== */

.hero-copy {
    max-width: 680px;

    margin:
        34px 0
        0;

    color: var(--wx-text-muted);

    font-size:
        clamp(1rem, 1.25vw, 1.22rem);

    line-height: 1.7;

    font-weight: 400;
}


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

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 38px;
}


.hero-btn {
    min-height: 56px;

    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    border-radius: 999px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    transition:transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}


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


/* primary */

.hero-btn-primary {
    color: #051018;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

    border: 1px solid #fff;
}


.hero-btn-primary i {
    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    font-size: 1rem;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--wx-accent),
            var(--wx-accent-2)
        );

    font-style: normal;
}


.hero-btn-primary:hover {
    color: #051018;
    background: rgba(255,255,255,.88);
}


/* secondary */

.hero-btn-secondary {
    color: #fff;

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

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

    backdrop-filter: blur(10px);
}


.hero-btn-secondary:hover {
    color: #fff;

    border-color:
        rgba(255,255,255,.5);

    background:
        rgba(255,255,255,.10);
}


/* ==================================================
   PROOF / STATS
================================================== */

.hero-proof {
    display: flex;
    align-items: center;

    gap: 42px;

    margin-top: 60px;
}


.hero-proof > div {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.hero-proof > div:not(:last-child)::after {
    content: "";

    position: absolute;

    right: -21px;

    top: 5px;

    height: 34px;

    width: 1px;

    background:
        rgba(255,255,255,.18);
}


.hero-proof strong {
    color: #fff;

    font-size: 1.15rem;

    font-weight: 700;
}


.hero-proof span {
    color:
        rgba(255,255,255,.47);

    font-size: .72rem;

    letter-spacing: .05em;
}


/* ==================================================
   HERO INTERFACE
================================================== */

.hero-interface {
    position: absolute;

    z-index: 30;

    left: 50%;
    bottom: 35px;

    width: min(1400px, calc(100% - 100px));

    transform: translateX(-50%);

    display: flex;
    align-items: flex-end;

    gap: 45px;

    pointer-events: none;
}


/* ==================================================
   COUNTER
================================================== */

.hero-slide-count {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 11px;

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

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .12em;
}


.hero-slide-count .current-slide {
    color: #fff;
}


.counter-line {
    display: block;

    width: 35px;
    height: 1px;

    background:
        rgba(255,255,255,.25);
}


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

.hero-navigation {
    width: 100%;

    display: grid;

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

    gap: 18px;

    pointer-events: auto;
}


.hero-nav-item {
    position: relative;

    padding: 0 0 12px;

    border: 0;

    color: inherit;

    text-align: left;

    background: transparent;

    cursor: pointer;

    opacity: .48;

    transition:
        opacity .3s ease;
}


.hero-nav-item:hover,
.hero-nav-item.active {
    opacity: 1;
}


.hero-nav-number {
    margin-right: 8px;

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

    font-size: .62rem;

    font-weight: 700;
}


.hero-nav-title {
    color: #fff;

    font-size: .7rem;

    font-weight: 600;

    letter-spacing: .06em;
}


.hero-nav-line {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    overflow: hidden;

    background:
        rgba(255,255,255,.18);
}


.hero-nav-progress {
    position: absolute;

    inset: 0;

    transform: scaleX(0);
    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            var(--wx-accent),
            var(--wx-accent-2)
        );
}


/* ==================================================
   SCROLL INDICATOR
================================================== */

.hero-scroll-indicator {
    position: absolute;

    right: 32px;
    bottom: 110px;

    z-index: 30;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

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

    font-size: .6rem;

    letter-spacing: .22em;

    pointer-events: none;
}


.hero-scroll-indicator > span {
    writing-mode: vertical-rl;
}


.hero-scroll-line {
    position: relative;

    width: 1px;
    height: 55px;

    overflow: hidden;

    background:
        rgba(255,255,255,.15);
}


.hero-scroll-line span {
    position: absolute;

    top: -100%;

    width: 1px;
    height: 100%;

    background: #fff;

    animation:
        heroScroll 2.2s ease-in-out
        infinite;
}


@keyframes heroScroll {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200%);
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

    .hero-content-wrap,
    .hero-interface {
        width:
            calc(100% - 60px);
    }


    .hero-content {
        width: 82vw;
    }


    .hero-navigation {
        gap: 10px;
    }


    .hero-nav-title {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .hero-banner {
        min-height: 660px;
    }


    .hero-banner::before {
        background-size:
            60px 60px;
    }


    .bg-media {
        background-position: 63% center;
    }


    .bg::before {
        background:
            linear-gradient(
                180deg,
                rgba(2,7,13,.38) 0%,
                rgba(2,7,13,.68) 38%,
                rgba(2,7,13,.97) 100%
            );
    }


    .hero-content-wrap {
        width:
            calc(100% - 40px);

        align-items: flex-end;

        padding-bottom: 145px;
    }


    .hero-content {
        width: 100%;

        padding: 0;
    }


    .hero-eyebrow {
        margin-bottom: 18px;

        font-size: .67rem;
    }


    .hero-eyebrow > span {
        width: 27px;
    }


    .section-heading {
        font-size:
            clamp(3rem, 13vw, 4.7rem);

        line-height: .94;
    }


    .hero-copy {
        max-width: 100%;

        margin-top: 22px;

        font-size: .96rem;

        line-height: 1.6;
    }


    .hero-actions {
        margin-top: 25px;
    }


    .hero-btn {
        min-height: 52px;

        padding:
            0 20px;

        font-size: .82rem;
    }


    .hero-proof {
        gap: 24px;

        margin-top: 32px;
    }


    .hero-proof > div:not(:last-child)::after {
        display: none;
    }


    .hero-proof strong {
        font-size: .95rem;
    }


    .hero-proof span {
        font-size: .6rem;
    }


    .hero-interface {
        width:
            calc(100% - 40px);

        bottom: 24px;

        gap: 15px;
    }


    .hero-navigation {
        gap: 6px;
    }


    .hero-nav-number,
    .hero-nav-title {
        display: none;
    }


    .hero-nav-item {
        min-height: 22px;

        padding: 0;
    }


    .hero-slide-count {
        display: none;
    }


    .hero-scroll-indicator {
        display: none;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

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

    .hero-scroll-line span {
        animation: none;
    }

}