/* ===========================================================
   ARMENIA CRYSTAL
   MAIN.CSS
   =========================================================== */


/* ===========================================================
   PAGE
   =========================================================== */

.page{
    width:100%;
    overflow:hidden;
}


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

.hero{

    position:relative;

    width:100%;
    min-height:100vh;

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

    overflow:hidden;

    background:
        radial-gradient(circle at top,
        rgba(193,162,95,.20),
        transparent 45%),
        linear-gradient(
        180deg,
        #050505 0%,
        #0d0d0d 100%);

}


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

.hero-background{

    position:absolute;

    inset:0;

    background-image:url("../images/hero/background.webp");

    background-size:cover;

    background-position:center;

    opacity:.25;

    transform:scale(1.05);

}


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

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
        90deg,
        rgba(0,0,0,.90) 0%,
        rgba(0,0,0,.55) 55%,
        rgba(0,0,0,.75) 100%);

}


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

.hero-container{

    position:relative;

    z-index:10;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:120px 60px;

}


/* ===========================================================
   LEFT
   =========================================================== */

.hero-content{

    max-width:650px;

}


/* ===========================================================
   KICKER
   =========================================================== */

.hero-kicker{

    display:inline-block;

    margin-bottom:24px;

    color:var(--color-gold);

    font-size:14px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:600;

}


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

.hero-title{

    margin-bottom:30px;

    font-size:72px;

    line-height:1.05;

    font-weight:700;

    color:#ffffff;

}


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

.hero-description{

    max-width:560px;

    margin-bottom:42px;

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

    font-size:20px;

    line-height:1.8;

}


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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}


/* ===========================================================
   PRIMARY
   =========================================================== */

.btn-primary{

    background:var(--color-gold);

    color:#111;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(193,162,95,.30);

}


/* ===========================================================
   SECONDARY
   =========================================================== */

.btn-secondary{

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

    color:#ffffff;

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

    backdrop-filter:blur(18px);

}

.btn-secondary:hover{

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

}


/* ===========================================================
   RIGHT
   =========================================================== */

.hero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}


/* ===========================================================
   CRYSTAL
   =========================================================== */

.crystal-placeholder{

    width:500px;

    height:500px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.08),
    transparent 70%);

}


.crystal-placeholder img{

    width:100%;

    max-width:420px;

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

}


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

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

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

    z-index:20;

}


.scroll-indicator span{

    width:2px;

    height:60px;

    background:var(--color-gold);

    animation:scrollLine 2s infinite;

}


.scroll-indicator p{

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

}


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

@media (max-width:992px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

padding:100px 30px;

}

.hero-content{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-title{

font-size:54px;

}

.crystal-placeholder{

width:360px;
height:360px;

}

}


@media (max-width:768px){

.hero{

min-height:auto;

}

.hero-title{

font-size:42px;

}

.hero-description{

font-size:18px;

}

.hero-container{

padding:90px 20px;

}

.crystal-placeholder{

width:280px;
height:280px;

}

}

/* =========================================================
   CLICKABLE GOOGLE MAPS
========================================================= */
.google-map-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.google-map-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.open-google-map {
    display: inline-block;
    margin-top: 18px;
    color: #d4af37;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .16em;
}