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

.atco-hero{

    position:relative;

    min-height:calc(100vh - 85px);
    padding-bottom:100px;

    overflow:hidden;
}

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

.atco-hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(10,14,22,.82) 0%,
    rgba(10,14,22,.62) 38%,
    rgba(10,14,22,.36) 68%,
    rgba(10,14,22,.16) 100%
    );

    pointer-events:none;
}

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

.hero-content{

    position:relative;
    z-index:2;

}

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

.hero-title{

    margin:0;

    color:#EDE9DF;

    font-size:72px;

    font-weight:500;

    line-height:1.18;

    letter-spacing:-1px;

    max-width:850px;
}

/* =====================================================
   GOLD ACCENT
===================================================== */

.hero-title strong{

    color:#C7A46A;

    font-weight:600;
}

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


.hero-text p{

    margin-top:22px;

    max-width:580px;

    color:#D7D9DD;

    font-size:1.6vw;

    font-weight:500;

    line-height:1.8;

    letter-spacing:.2px;

}


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

.hero-btn{

    margin-top:auto;

    padding-top:34px;
}

.hero-btn .elementor-button{

    background:#C7A15A !important;

    color:#111 !important;

    border:1px solid #C7A15A;

    border-radius:0;

    padding:20px 52px;

    font-size:15px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

    box-shadow:0 18px 45px rgba(15,43,91,.18);
}

.hero-btn .elementor-button:hover{

    background:transparent !important;

    color:#ffffff !important;

    border-color:#C7A15A;

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(0,0,0,.32);
}

/* =====================================================
   SUBTLE ENTRANCE
===================================================== */

.hero-content{

    animation:heroFade 1.2s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

@media (min-width:1600px){

    .hero-content{

        margin-left:10%;
    }

    .hero-title{

        font-size:84px;
    }

}

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

@media (max-width:1200px){

    .atco-hero{

        padding-top:110px;
    }

    .hero-content{

        margin-left:6%;

        max-width:560px;
    }

    .hero-title{

        font-size:58px;
    }

    .hero-text p{

        font-size:17px;
    }

}

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

@media (max-width:1024px){
    
    .hero-text p{
        font-size:2.7vw;
    }

}


@media (max-width:767px){

    .hero-content{

        margin:0 32px;

        max-width:100%;
    }

    .hero-title{

        font-size:42px;

        line-height:1.15;
    }

    .hero-text p{

        font-size:3.8vw;

        line-height:1.8;
    }

    .hero-btn .elementor-button{

        width:100%;

        text-align:center;
    }

}

/* =====================================================
PHONE PORTRAIT
===================================================== */

@media (max-width:480px){


    .hero-content{

        margin:0 24px;

        max-width:100%;

        padding-top:0;

    }

    .hero-title{

        font-size:34px;

        line-height:1.15;

    }

    .hero-text p{

        font-size:14px;

        line-height:1.7;

        margin-top:18px;

    }

    .hero-btn{

        padding-top:28px;

    }

    .hero-btn .elementor-button{

        width:100%;

        text-align:center;

    }

}