.elementor-11589 .elementor-element.elementor-element-687413f:not(.elementor-motion-effects-element-type-background), .elementor-11589 .elementor-element.elementor-element-687413f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://hireyy.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-31-2026-04_49_23-PM.png");background-position:center center;background-size:cover;}.elementor-11589 .elementor-element.elementor-element-687413f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11589 .elementor-element.elementor-element-687413f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11589 .elementor-element.elementor-element-464047e{--spacer-size:100px;}.elementor-11589 .elementor-element.elementor-element-a2a14d0{margin-top:-50px;margin-bottom:0px;}.elementor-11589 .elementor-element.elementor-element-dfae0bc{margin-top:0px;margin-bottom:0px;}.elementor-11589 .elementor-element.elementor-element-e91fc9e{margin-top:-50px;margin-bottom:0px;}@media(max-width:1024px){.elementor-11589 .elementor-element.elementor-element-464047e{--spacer-size:40px;}}@media(min-width:768px){.elementor-11589 .elementor-element.elementor-element-9e8087b{width:59.968%;}.elementor-11589 .elementor-element.elementor-element-3323180{width:39.992%;}}/* Start custom CSS for html, class: .elementor-element-b3c1e87 *//*=========================================
            HIRE HERO SECTION
=========================================*/

.hire-hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:120px 0 80px;

    overflow:hidden;

    background:url("../images/hire-banner.webp") center center/cover no-repeat;

}

/*=========================================
            LEFT DARK OVERLAY
=========================================*/

.hire-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.88) 22%,
        rgba(0,0,0,.72) 45%,
        rgba(0,0,0,.42) 65%,
        rgba(0,0,0,.10) 82%,
        rgba(0,0,0,0) 100%
    ),

    linear-gradient(
        0deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.35) 28%,
        rgba(0,0,0,0) 65%
    );

    z-index:1;

}

/*=========================================
        GOLDEN GLOW
=========================================*/

.hire-hero::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-230px;

    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,193,7,.18),
    transparent 72%);

    filter:blur(70px);

    animation:heroGlow 8s ease-in-out infinite alternate;

    z-index:1;

}

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

.hire-hero .container{

    width:min(1320px,92%);

    margin:auto;

    position:relative;

    z-index:5;

}

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

.hire-content{

    max-width:860px;

    position:relative;

    animation:heroFadeUp 1s ease forwards;

}

/*=========================================
            HIRE TAG
=========================================*/

.hire-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    margin-bottom:38px;

    border-radius:60px;

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

    border:1px solid rgba(255,193,7,.28);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    color:#FFC107;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

    box-shadow:

    inset 0 1px 1px rgba(255,255,255,.10),

    0 12px 30px rgba(0,0,0,.22);

    animation:badgeFloat 5s ease-in-out infinite;

}

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

.hire-content h1{

    color:#fff;

    font-size:clamp(58px,6vw,78px);

    line-height:1.03;

    font-weight:600;

    letter-spacing:-2px;

    margin-bottom:28px;

    animation:titleReveal 1s ease forwards;

}

.hire-content h1 span{

    color:#FFC107;

    text-shadow:

    0 0 20px rgba(255,193,7,.45),

    0 0 45px rgba(255,193,7,.18);

}

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

.hero-description{

    max-width:760px;

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

    font-size:19px;

    line-height:1.9;

    margin-bottom:28px;

    animation:fadeDelay .8s ease .3s both;

}

.hero-description strong{

    color:#fff;

    font-weight:600;

}

/*=========================================
            SUBTITLE
=========================================*/

.subtitle{

    color:#fff;

    font-size:34px;

    font-weight:300;

    letter-spacing:.5px;

    margin-bottom:45px;

    animation:fadeDelay .8s ease .5s both;

}
/*=========================================
            HERO FEATURES
=========================================*/

.hero-skills{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin:45px 0 55px;

    max-width:900px;

    animation:fadeDelay .8s ease .7s both;

}

.hero-skills span{

    position:relative;

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 25px;

    border-radius:60px;

    white-space:nowrap;

    color:#fff;

    font-size:14px;

    font-weight:500;

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

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:

    inset 0 1px 1px rgba(255,255,255,.08),

    0 10px 25px rgba(0,0,0,.20);

    cursor:pointer;

    transition:.45s ease;

    overflow:hidden;

}

.hero-skills span i{

    color:#FFC107;

    font-size:18px;

}

.hero-skills span::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-80%;

    width:45%;

    height:260%;

    transform:rotate(25deg);

    background:linear-gradient(

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.9s;

}

.hero-skills span::after{

    content:"";

    position:absolute;

    inset:1px;

    border-radius:60px;

    background:linear-gradient(

        180deg,

        rgba(255,255,255,.10),

        transparent

    );

    pointer-events:none;

}

.hero-skills span:hover::before{

    left:180%;

}

.hero-skills span:hover{

    transform:translateY(-6px);

    background:#FFC107;

    color:#111;

    border-color:#FFC107;

    box-shadow:

    0 18px 40px rgba(255,193,7,.35);

}

.hero-skills span:hover i{

    color:#111;

}


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

.scroll-wrapper{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:20px;

    animation:fadeDelay .8s ease .9s both;

}

.scroll-text{

    color:#fff;

    letter-spacing:4px;

    font-size:13px;

    text-transform:uppercase;

    font-weight:600;

}

.scroll-line{

    position:relative;

    width:2px;

    height:70px;

    overflow:hidden;

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

}

.scroll-line span{

    position:absolute;

    left:0;

    width:100%;

    height:18px;

    background:#FFC107;

    animation:scrollMove 2s linear infinite;

}

@keyframes scrollMove{

0%{

top:-18px;

}

100%{

top:70px;

}

}


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

.hero-skills span:nth-child(1){

    animation:floatOne 5s ease-in-out infinite;

}

.hero-skills span:nth-child(2){

    animation:floatTwo 6s ease-in-out infinite;

}

.hero-skills span:nth-child(3){

    animation:floatThree 5.5s ease-in-out infinite;

}

.hero-skills span:nth-child(4){

    animation:floatTwo 6.5s ease-in-out infinite;

}

.hero-skills span:nth-child(5){

    animation:floatOne 5.8s ease-in-out infinite;

}

@keyframes floatOne{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

}

@keyframes floatTwo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@keyframes floatThree{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}


/*=========================================
        DECORATIVE BLUR ORBS
=========================================*/

.hire-hero .blur-one{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    top:12%;

    right:8%;

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

    filter:blur(90px);

    animation:blurMoveOne 8s ease-in-out infinite alternate;

    z-index:1;

}

.hire-hero .blur-two{

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    bottom:5%;

    left:-120px;

    background:rgba(255,193,7,.10);

    filter:blur(110px);

    animation:blurMoveTwo 10s ease-in-out infinite alternate;

    z-index:1;

}

@keyframes blurMoveOne{

from{

transform:translateY(0) scale(1);

}

to{

transform:translateY(-30px) scale(1.2);

}

}

@keyframes blurMoveTwo{

from{

transform:translateX(0);

}

to{

transform:translateX(40px);

}

}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-687413f */.hire-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.88) 22%,
        rgba(0,0,0,.72) 45%,
        rgba(0,0,0,.42) 65%,
        rgba(0,0,0,.10) 82%,
        rgba(0,0,0,0) 100%
    ),

    linear-gradient(
        0deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.35) 28%,
        rgba(0,0,0,0) 65%
    );

    z-index:1;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bb221a7 *//*==================================================
            RECRUITER SECTION
==================================================*/

.recruiter-section{

    position:relative;

    width:100%;

    padding:90px 0;

    background:#050505;

    overflow:hidden;

    text-align:center;

}

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

.recruiter-section h3{

    color:#ffffff;

    font-size:38px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:45px;

}

/*==================================================
            SLIDER
==================================================*/

.recruiter-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:24px 0;

    background:#0d0d0d;

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

    border-radius:24px;

}

/*==================================================
            SLIDER TRACK
==================================================*/

.slider-track{

    display:flex;

    align-items:center;

    width:max-content;

    gap:18px;

    animation:marquee 35s linear infinite;

}

.recruiter-slider:hover .slider-track{

    animation-play-state:paused;

}

/*==================================================
            COMPANY CARD
==================================================*/

.slider-track span{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    height:64px;

    padding:0 25px;

    border-radius:18px;

    background:#1b1b1b;

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

    color:#8d8d8d;

    font-size:16px;

    font-weight:700;

    letter-spacing:1px;

    transition:.35s ease;

}

.slider-track span:hover{

    transform:translateY(-6px);

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

    border-color:#FFC533;

    color:#ffffff;

    box-shadow:0 15px 35px rgba(255,197,51,.12);

}

/*==================================================
            EDGE FADE
==================================================*/

.recruiter-slider::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:180px;

    height:100%;

    z-index:5;

    pointer-events:none;

    background:linear-gradient(to right,#0d0d0d,transparent);

}

.recruiter-slider::after{

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:180px;

    height:100%;

    z-index:5;

    pointer-events:none;

    background:linear-gradient(to left,#0d0d0d,transparent);

}

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

@keyframes marquee{

    0%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(-50%);

    }

}

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

@media(max-width:992px){

    .recruiter-section{

        padding:70px 0;

    }

    .recruiter-section h3{

        font-size:30px;

    }

}

@media(max-width:768px){

    .recruiter-section h3{

        font-size:24px;

        margin-bottom:30px;

    }

    .slider-track span{

        min-width:150px;

        height:52px;

        font-size:14px;

    }

    .recruiter-slider::before,

    .recruiter-slider::after{

        width:80px;

    }

}

/*==================================================
        FIX FOR ELEMENTOR
==================================================*/

.recruiter-section,
.recruiter-slider,
.slider-track{

    background-color:#050505;

}

.recruiter-slider{

    background:#0d0d0d !important;

}

.elementor-widget-container{

    background:transparent;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cc1dd1d *//*==================================================
        HIREYY ADVANTAGE
        PART 1
        RESET + SECTION + GRID + CARDS
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#060606;
    overflow-x:hidden;
    font-family:Inter,sans-serif;
}

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

.stats-section{

    position:relative;

    overflow:hidden;

    padding:110px 7%;

    background:#060606;

}

/*==================================
      BACKGROUND GLOW
==================================*/

.stats-section::before{

    content:"";

    position:absolute;

    width:850px;

    height:850px;

    left:-320px;

    bottom:-320px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,197,51,.08),
    transparent 72%);

    filter:blur(120px);

    animation:glowOne 12s ease-in-out infinite;

}

.stats-section::after{

    content:"";

    position:absolute;

    width:720px;

    height:720px;

    right:-280px;

    top:-280px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,180,255,.06),
    transparent 72%);

    filter:blur(120px);

    animation:glowTwo 12s ease-in-out infinite;

}

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

.stats-container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1400px;

    margin:auto;

}

/*==================================
        SECTION TITLE
==================================*/

.section-title{

    text-align:center;

    max-width:900px;

    margin:0 auto 75px;

}

.section-title h2{

    color:#fff;

    font-size:54px;

    font-weight:600;

    line-height:1.15;

    letter-spacing:-1px;

    margin-bottom:18px;

}

.section-title p{

    color:#BEBEBE;

    font-size:18px;

    line-height:1.8;

}

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

.stats-grid{

    display:grid;

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

    grid-template-rows:310px 310px;

    gap:28px;

}

/*==================================
        TALL CARD
==================================*/

.tall{

    grid-column:3;

    grid-row:1 / span 2;

}

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

.card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-height:310px;

    padding:34px;

    border-radius:28px;

    background:rgba(24,24,24,.72);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

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

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 45px rgba(0,0,0,.35);

    transition:.45s ease;

}

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

.card-content{

    display:flex;

    flex-direction:column;

    height:100%;

    position:relative;

    z-index:2;

}

.card-header{

    min-height:72px;

    display:flex;

    align-items:flex-start;

    margin-bottom:18px;

}

.card-body{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

/*==================================
        GOLD LINE
==================================*/

.card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #FFC533,
        transparent);

}

/*==================================
        GLASS SHINE
==================================*/

.card::before{

    content:"";

    position:absolute;

    top:-140%;

    left:-120%;

    width:220%;

    height:220%;

    transform:rotate(28deg);

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

    transition:1s;

}
/*==================================================
        HIREYY ADVANTAGE
        PART 2
        TYPOGRAPHY + NUMBERS + HOVER
==================================================*/

/*==================================
        MAIN NUMBER
==================================*/

.card h1{

    color:#ffffff;

    font-size:48px;

    font-weight:600;

    line-height:1;

    letter-spacing:-1px;

    margin-bottom:18px;

    transition:.45s ease;

}

/*==================================
        CARD TITLE
==================================*/

.card h3{

    color:#ffffff;

    font-size:22px;

    font-weight:500;

    line-height:1.35;

    margin:0;

    width:100%;

    transition:.45s ease;

}

/*==================================
        PARAGRAPH
==================================*/

.card p{

    color:#BEBEBE;

    font-size:15px;

    font-weight:400;

    line-height:1.85;

    margin:0;

    transition:.45s ease;

}

/*==================================
        CARD NUMBER
==================================*/

.card-number{

    position:absolute;

    top:22px;

    right:24px;

    font-size:64px;

    font-weight:700;

    line-height:1;

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

    user-select:none;

    pointer-events:none;

    transition:.45s ease;

}

/*==================================
        TALL CARD
==================================*/

.tall .card-header{

    min-height:auto;

    margin-bottom:24px;

}

.tall ul{

    list-style:none;

    margin:0;

    padding:0;

}

.tall li{

    position:relative;

    color:#BEBEBE;

    font-size:15px;

    line-height:2;

    padding-left:26px;

    margin-bottom:12px;

    transition:.45s ease;

}

/*==================================
        GOLD BULLET
==================================*/

.tall li::before{

    content:"";

    position:absolute;

    left:0;

    top:11px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#FFC533;

    box-shadow:0 0 12px rgba(255,197,51,.45);

}

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

.card:hover{

    transform:translateY(-12px);

    background:rgba(30,30,30,.88);

    border-color:rgba(255,197,51,.25);

    box-shadow:

        0 28px 70px rgba(0,0,0,.45),

        0 0 35px rgba(255,197,51,.08);

}

.card:hover::before{

    left:120%;

}

.card:hover h1{

    color:#FFC533;

}

.card:hover h3{

    color:#FFC533;

}

.card:hover p{

    color:#ffffff;

}

.card:hover li{

    color:#ffffff;

}

.card:hover .card-number{

    color:rgba(255,197,51,.12);

    transform:scale(1.08);

}

/*==================================
        CURSOR
==================================*/

.card{

    cursor:pointer;

}

/*==================================
        SMOOTH TRANSITIONS
==================================*/

.card,
.card h1,
.card h3,
.card p,
.card li,
.card-number{

    transition:.45s ease;

}
/*==================================================
        HIREYY ADVANTAGE
        PART 3
        ANIMATION + RESPONSIVE + FINISH
==================================================*/

/*==================================
        FLOAT ANIMATION
==================================*/

.card{

    animation:cardFloat 6s ease-in-out infinite;

    will-change:transform;

    transform-style:preserve-3d;

    backface-visibility:hidden;

}

.card:nth-child(2){

    animation-delay:.3s;

}

.card:nth-child(3){

    animation-delay:.6s;

}

.card:nth-child(4){

    animation-delay:.9s;

}

.card:nth-child(5){

    animation-delay:1.2s;

}

/*==================================
        CARD FLOAT
==================================*/

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================
        BACKGROUND GLOW
==================================*/

@keyframes glowOne{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(45px,35px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes glowTwo{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-45px,-35px);

    }

    100%{

        transform:translate(0,0);

    }

}

/*==================================
        SCROLLBAR
==================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#060606;

}

::-webkit-scrollbar-thumb{

    background:#FFC533;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#FFD86C;

}

/*==================================
        DESKTOP
==================================*/

@media(max-width:1200px){

    .stats-grid{

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

        grid-template-rows:auto;

    }

    .tall{

        grid-column:span 2;

        grid-row:auto;

    }

    .section-title h2{

        font-size:46px;

    }

    .card{

        min-height:280px;

    }

    .card h1{

        font-size:42px;

    }

    .card-number{

        font-size:56px;

    }

}

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

@media(max-width:768px){

    .stats-section{

        padding:80px 20px;

    }

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:15px;

        line-height:1.7;

    }

    .stats-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .tall{

        grid-column:auto;

        grid-row:auto;

    }

    .card{

        min-height:auto;

        padding:28px;

    }

    .card-header{

        min-height:auto;

    }

    .card h1{

        font-size:36px;

    }

    .card h3{

        font-size:20px;

    }

    .card p{

        font-size:14px;

    }

    .card-number{

        font-size:46px;

        top:18px;

        right:18px;

    }

}

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

@media(max-width:480px){

    .stats-section{

        padding:70px 18px;

    }

    .section-title h2{

        font-size:30px;

    }

    .section-title p{

        font-size:14px;

    }

    .card{

        padding:22px;

        border-radius:22px;

    }

    .card h1{

        font-size:30px;

    }

    .card h3{

        font-size:18px;

    }

    .card p{

        font-size:13px;

        line-height:1.7;

    }

    .card-number{

        font-size:36px;

    }

}

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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==================================
        PREMIUM FINISH
==================================*/

::selection{

    background:#FFC533;

    color:#111;

}

.card:focus-within{

    border-color:#FFC533;

}

.section-title h2,
.card h1,
.card h3{

    text-rendering:optimizeLegibility;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}
/*==================================================
        HIREYY ADVANTAGE
        PART 4
        PREMIUM FIXES + BALANCING + FINAL POLISH
==================================================*/

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

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/*==================================
        EQUAL CARD HEIGHT
==================================*/

.stats-grid{

    align-items:stretch;

}

.card{

    height:100%;

}

/*==================================
        PERFECT CONTENT ALIGNMENT
==================================*/

.card-content{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    height:100%;

}

.card-header{

    min-height:72px;

    display:flex;

    align-items:flex-start;

}

.card-body{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

/*==================================
        PARAGRAPH ALIGNMENT
==================================*/

.card p{

    margin:0;

}

.tall .card-header{

    min-height:auto;

}

.tall .card-body{

    justify-content:flex-start;

}

/*==================================
        IMAGE FIX
==================================*/

img{

    max-width:100%;

    display:block;

}

/*==================================
        LINKS
==================================*/

a{

    color:inherit;

    text-decoration:none;

}

/*==================================
        LIST RESET
==================================*/

ul{

    margin:0;

    padding:0;

}

li{

    list-style:none;

}

/*==================================
        PREMIUM SHADOW
==================================*/

.card{

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,.05),

    0 20px 55px rgba(0,0,0,.35);

}

.card:hover{

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,.08),

    0 35px 80px rgba(0,0,0,.45),

    0 0 45px rgba(255,197,51,.08);

}

/*==================================
        GOLDEN BORDER
==================================*/

.card:hover{

    border-color:rgba(255,197,51,.35);

}

/*==================================
        PERFORMANCE
==================================*/

.card,

.card::before,

.card::after{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

/*==================================
        ACCESSIBILITY
==================================*/

.card:focus-visible{

    outline:2px solid #FFC533;

    outline-offset:5px;

}

/*==================================
        SELECTION
==================================*/

::selection{

    background:#FFC533;

    color:#111111;

}

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

@media(max-width:992px){

    .card-header{

        min-height:auto;

    }

}

@media(max-width:768px){

    .stats-grid{

        gap:20px;

    }

    .card{

        min-height:260px;

    }

}

@media(max-width:576px){

    .card{

        min-height:auto;

    }

    .card-number{

        font-size:38px;

    }

}

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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==================================
        END
==================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3a14684 *//*==================================================
        HIREYY PREMIUM ROADMAP
              PART 1
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#050505;

    color:#ffffff;

    overflow-x:hidden;

}


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

.hireyy-roadmap{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:#050505;

}


/*=========================================
        BACKGROUND GLOW
=========================================*/

.hireyy-roadmap::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-260px;

    left:-280px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,197,51,.16),
    transparent 72%);

    filter:blur(110px);

    animation:glowLeft 10s ease-in-out infinite;

}

.hireyy-roadmap::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-250px;

    bottom:-260px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,162,255,.12),
    transparent 72%);

    filter:blur(120px);

    animation:glowRight 12s ease-in-out infinite;

}


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

.container{

    width:90%;

    max-width:1350px;

    margin:auto;

    position:relative;

    z-index:5;

}


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

.heading{

    text-align:center;

    margin-bottom:90px;

}

.heading .tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:100px;

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

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

    color:#FFC533;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    backdrop-filter:blur(20px);

}

.heading h2{

    margin-top:30px;

    font-size:56px;

    line-height:1.15;

    font-weight:600;

    letter-spacing:-1px;

    color:#ffffff;

}

.heading p{

    max-width:760px;

    margin:24px auto 0;

    color:#BDBDBD;

    font-size:18px;

    line-height:1.9;

    font-weight:400;

}


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

.timeline{

    position:relative;

    width:100%;

}


/* Premium Line */

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    border-radius:30px;

    background:linear-gradient(

        180deg,

        #FFC533,

        #FF9800,

        #FF6A00,

        #4FACFE

    );

    box-shadow:

        0 0 18px rgba(255,197,51,.35),

        0 0 40px rgba(79,172,254,.20);

}


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

.timeline-item{

    position:relative;

    display:flex;

    width:100%;

    margin-bottom:42px;

    align-items:center;

}

.timeline-item.left{

    justify-content:flex-start;

}

.timeline-item.right{

    justify-content:flex-end;

}
/*==================================================
        HIREYY PREMIUM ROADMAP
                PART 2
==================================================*/


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

.timeline-card{

    position:relative;

    width:45%;

    max-width:540px;

    min-height:185px;

    padding:30px;

    overflow:hidden;

    border-radius:24px;

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

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

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

    box-shadow:

        0 20px 45px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.05);

    transition:.45s ease;

}


/*=========================================
            GLASS SHINE
=========================================*/

.timeline-card::before{

    content:"";

    position:absolute;

    top:-140%;

    left:-130%;

    width:230%;

    height:230%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.08),

        transparent

    );

    transform:rotate(25deg);

    transition:1s;

}


/*=========================================
        GOLD TOP BORDER
=========================================*/

.timeline-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:

    linear-gradient(

        90deg,

        transparent,

        #FFC533,

        transparent

    );

}


/*=========================================
            STEP BADGE
=========================================*/

.step{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:100px;

    background:rgba(255,197,51,.10);

    border:1px solid rgba(255,197,51,.28);

    color:#FFC533;

    font-size:12px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}


/*=========================================
            TITLE
=========================================*/

.timeline-card h3{

    color:#ffffff;

    font-size:26px;

    font-weight:600;

    line-height:1.3;

    margin-bottom:14px;

}


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

.timeline-card p{

    color:#cfcfcf;

    font-size:15px;

    line-height:1.8;

    font-weight:400;

}


/*=========================================
        LEFT / RIGHT SPACING
=========================================*/

.timeline-item.left .timeline-card{

    margin-right:70px;

}

.timeline-item.right .timeline-card{

    margin-left:70px;

}


/*=========================================
        CARD CURSOR
=========================================*/

.timeline-card{

    cursor:pointer;

}
/*==================================================
        HIREYY PREMIUM ROADMAP
                PART 3
==================================================*/


/*=========================================
        REMOVE EXTRA CIRCLE
=========================================*/

.timeline-item::before{

    display:none !important;

    content:none !important;

}


/*=========================================
        PREMIUM ICON
=========================================*/

.timeline-icon{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:66px;

    height:66px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #FFC533,
        #FF9800
    );

    color:#111;

    font-size:24px;

    border:4px solid #050505;

    z-index:50;

    transition:.45s ease;

    box-shadow:

        0 0 25px rgba(255,197,51,.45),

        0 0 55px rgba(255,197,51,.18);

}


/*=========================================
      REMOVE ICON PSEUDO ELEMENTS
=========================================*/

.timeline-icon::before,
.timeline-icon::after{

    display:none !important;

    content:none !important;

}


/*=========================================
        FONT AWESOME ICON
=========================================*/

.timeline-icon i{

    font-size:24px;

    color:#111;

    line-height:1;

    transition:.35s ease;

}


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

.timeline-item:hover .timeline-icon{

    transform:
        translate(-50%,-50%)
        scale(1.12)
        rotate(8deg);

    box-shadow:

        0 0 35px rgba(255,197,51,.65),

        0 0 70px rgba(255,197,51,.30);

}


/*=========================================
      ICON HOVER
=========================================*/

.timeline-item:hover .timeline-icon i{

    transform:scale(1.08);

}


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

.timeline::before{

    width:4px;

    border-radius:20px;

    background:linear-gradient(

        180deg,

        #FFC533 0%,

        #FF9800 30%,

        #FF6A00 60%,

        #4FACFE 100%

    );

    box-shadow:

        0 0 20px rgba(255,197,51,.30),

        0 0 45px rgba(79,172,254,.15);

}


/*=========================================
      ICON FLOAT
=========================================*/

.timeline-icon{

    animation:iconFloat 4s ease-in-out infinite;

}

@keyframes iconFloat{

0%{

transform:translate(-50%,-50%);

}

50%{

transform:translate(-50%,-56%);

}

100%{

transform:translate(-50%,-50%);

}

}


/*=========================================
      PERFORMANCE
=========================================*/

.timeline-icon,
.timeline-icon i{

    will-change:transform;

    backface-visibility:hidden;

}
/*==================================================
        HIREYY PREMIUM ROADMAP
                PART 4
==================================================*/


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

.timeline-card{

    animation:cardFloat 6s ease-in-out infinite;

}

.timeline-item:nth-child(2) .timeline-card{

    animation-delay:.3s;

}

.timeline-item:nth-child(3) .timeline-card{

    animation-delay:.6s;

}

.timeline-item:nth-child(4) .timeline-card{

    animation-delay:.9s;

}

.timeline-item:nth-child(5) .timeline-card{

    animation-delay:1.2s;

}

.timeline-item:nth-child(6) .timeline-card{

    animation-delay:1.5s;

}

.timeline-item:nth-child(7) .timeline-card{

    animation-delay:1.8s;

}


@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


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

.timeline-card:hover{

    transform:

    translateY(-12px)

    scale(1.02);

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

    border-color:rgba(255,197,51,.35);

    box-shadow:

        0 30px 70px rgba(0,0,0,.45),

        0 0 45px rgba(255,197,51,.12);

}


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

.timeline-card:hover::before{

    left:120%;

}


/*=========================================
        TITLE HOVER
=========================================*/

.timeline-card:hover h3{

    color:#FFC533;

}


/*=========================================
        PARAGRAPH
=========================================*/

.timeline-card:hover p{

    color:#F2F2F2;

}


/*=========================================
        STEP BADGE
=========================================*/

.timeline-card:hover .step{

    background:#FFC533;

    color:#111;

    border-color:#FFC533;

}


/*=========================================
        ICON GLOW
=========================================*/

.timeline-item:hover .timeline-icon{

    animation:none;

    box-shadow:

        0 0 35px rgba(255,197,51,.75),

        0 0 70px rgba(255,197,51,.30);

}


/*=========================================
      SCROLL FADE ANIMATION
=========================================*/

.timeline-item{

    opacity:0;

    transform:translateY(50px);

    animation:fadeUp .8s forwards;

}

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

animation-delay:.1s;

}

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

animation-delay:.25s;

}

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

animation-delay:.4s;

}

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

animation-delay:.55s;

}

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

animation-delay:.7s;

}

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

animation-delay:.85s;

}

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

animation-delay:1s;

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(45px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=========================================
        GOLD LINE GLOW
=========================================*/

.timeline::before{

    animation:lineGlow 4s ease-in-out infinite;

}


@keyframes lineGlow{

0%{

filter:brightness(1);

}

50%{

filter:brightness(1.4);

}

100%{

filter:brightness(1);

}

}


/*=========================================
      BETTER TEXT RENDERING
=========================================*/

.timeline-card{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}


/*=========================================
        SMOOTH TRANSITIONS
=========================================*/

.timeline-card,

.timeline-icon,

.timeline-card h3,

.timeline-card p,

.step{

    transition:.4s ease;

}


/*=========================================
        CURSOR
=========================================*/

.timeline-card{

    cursor:pointer;

}
/*==================================================
        HIREYY PREMIUM ROADMAP
                PART 5
==================================================*/


/*=========================================
        LARGE LAPTOP
=========================================*/

@media(max-width:1400px){

.container{

max-width:1200px;

}

.timeline-card{

max-width:500px;

}

}


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

@media(max-width:1024px){

.heading{

margin-bottom:70px;

}

.heading h2{

font-size:44px;

}

.heading p{

font-size:17px;

}

.timeline-card{

width:42%;

padding:24px;

min-height:170px;

}

.timeline-card h3{

font-size:22px;

}

.timeline-card p{

font-size:14px;

}

.timeline-icon{

width:58px;

height:58px;

font-size:22px;

}

.timeline-item.left .timeline-card{

margin-right:55px;

}

.timeline-item.right .timeline-card{

margin-left:55px;

}

}


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

@media(max-width:900px){

.timeline::before{

left:34px;

transform:none;

}

.timeline-item{

justify-content:flex-start !important;

padding-left:95px;

margin-bottom:28px;

}

.timeline-card{

width:100%;

max-width:100%;

margin:0 !important;

min-height:auto;

}

.timeline-icon{

left:34px;

top:50px;

transform:translateY(-50%);

}

.timeline-item:hover .timeline-icon{

transform:translateY(-50%) scale(1.08);

}

}


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

@media(max-width:600px){

.hireyy-roadmap{

padding:70px 0;

}

.container{

width:92%;

}

.heading{

margin-bottom:50px;

}

.heading .tag{

padding:10px 18px;

font-size:11px;

letter-spacing:1.5px;

}

.heading h2{

font-size:32px;

line-height:1.2;

}

.heading p{

font-size:15px;

line-height:1.7;

}

.timeline::before{

left:28px;

width:3px;

}

.timeline-item{

padding-left:72px;

margin-bottom:22px;

}

.timeline-icon{

left:28px;

width:52px;

height:52px;

font-size:18px;

border-width:3px;

}

.timeline-icon i{

font-size:18px;

}

.timeline-card{

padding:20px;

border-radius:18px;

}

.timeline-card h3{

font-size:20px;

margin-bottom:10px;

}

.timeline-card p{

font-size:13px;

line-height:1.7;

}

.step{

font-size:10px;

padding:6px 14px;

}

}


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

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

.timeline-card,

.timeline-icon,

.timeline-item,

.timeline::before{

animation:none !important;

transition:none !important;

}

}


/*=========================================
        PERFORMANCE
=========================================*/

.timeline-card,
.timeline-icon,
.timeline::before{

will-change:transform;

backface-visibility:hidden;

transform-style:preserve-3d;

}


/*=========================================
      SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#080808;

}

::-webkit-scrollbar-thumb{

background:#FFC533;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#FFD45C;

}


/*=========================================
        SELECTION
=========================================*/

::selection{

background:#FFC533;

color:#111;

}

::-moz-selection{

background:#FFC533;

color:#111;

}/* End custom CSS */