/*=====================================================================
    VIAREXIS V2
    GLOBAL STYLE SHEET

    PART 1 / 4

    CONTENTS

    1. RESET
    2. ROOT VARIABLES
    3. TYPOGRAPHY
    4. GLOBAL ELEMENTS
    5. LAYOUT
    6. HEADER
    7. MAIN NAVIGATION
    8. LANGUAGE SELECTOR
======================================================================*/


/*=====================================================================
    1. RESET
======================================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    background:#06131c;

    color:#f3efe6;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height:1.7;

    overflow-x:hidden;
}

img{

    display:block;

    max-width:100%;

    height:auto;
}

a{

    color:inherit;

    text-decoration:none;
}

button{

    font:inherit;

    background:none;

    border:none;

    cursor:pointer;
}

ul{

    list-style:none;
}


/*=====================================================================
    2. ROOT VARIABLES
======================================================================*/

:root{

    --background:#06131c;

    --background-dark:#020b11;

    --background-light:#0b2232;

    --panel:#0d1f2b;

    --gold:#c99a42;

    --gold-light:#d8b36a;

    --gold-dark:#9a6d1d;

    --white:#ffffff;

    --text:#f3efe6;

    --text-soft:#d5d5d5;

    --border:rgba(201,154,66,.35);

    --shadow:0 10px 35px rgba(0,0,0,.35);

    --radius:10px;

    --transition:.30s ease;

    --content-width:1200px;

}


/*=====================================================================
    3. TYPOGRAPHY
======================================================================*/

h1{

    font-family:Georgia,"Times New Roman",serif;

    font-size:clamp(42px,6vw,72px);

    font-weight:400;

    line-height:1.15;

    margin-bottom:24px;
}

h2{

    font-family:Georgia,"Times New Roman",serif;

    font-size:clamp(34px,4vw,56px);

    font-weight:400;

    line-height:1.2;

    margin-bottom:20px;
}

h3{

    font-family:Georgia,"Times New Roman",serif;

    font-size:28px;

    font-weight:400;

    margin-bottom:18px;
}

h4{

    font-size:18px;

    font-weight:500;

    margin-bottom:10px;
}

p{

    margin-bottom:20px;

    color:var(--text-soft);
}

strong{

    color:var(--gold-light);

    font-weight:600;
}


/*=====================================================================
    4. GLOBAL ELEMENTS
======================================================================*/

section{

    width:100%;
}

.content{

    padding:90px 8%;
}

.content-inner{

    width:100%;

    max-width:var(--content-width);

    margin:auto;
}

.text-center{

    text-align:center;
}

.text-left{

    text-align:left;
}

.text-right{

    text-align:right;
}

.mt-20{

    margin-top:20px;
}

.mt-40{

    margin-top:40px;
}

.mt-60{

    margin-top:60px;
}

.mb-20{

    margin-bottom:20px;
}

.mb-40{

    margin-bottom:40px;
}

.mb-60{

    margin-bottom:60px;
}


/*=====================================================================
    5. LAYOUT
======================================================================*/

.two-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.reverse{

    direction:rtl;
}

.reverse>*{

    direction:ltr;
}


/*=====================================================================
    6. HEADER
======================================================================*/

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(2,11,17,.96);

    backdrop-filter:blur(8px);

    border-bottom:1px solid var(--border);

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 6%;
}

.brand{

    font-size:20px;

    letter-spacing:.35em;

    font-weight:300;

    color:var(--white);

    transition:var(--transition);
}

.brand:hover{

    color:var(--gold);
}


/*=====================================================================
    7. MAIN NAVIGATION
======================================================================*/

.main-nav{

    display:flex;

    align-items:center;

    gap:34px;
}

.main-nav a{

    position:relative;

    font-size:12px;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:var(--text);

    transition:var(--transition);
}

.main-nav a:hover{

    color:var(--gold);
}

.main-nav a.active{

    color:var(--gold-light);
}

.main-nav a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:var(--gold);
}


/*=====================================================================
    8. LANGUAGE SELECTOR
======================================================================*/

.language-selector{

    position:relative;
}

.language-button{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    border:1px solid rgba(201,154,66,.35);

    border-radius:30px;

    color:var(--gold-light);

    transition:var(--transition);
}

.language-button:hover{

    background:rgba(201,154,66,.08);

    border-color:var(--gold);
}

.language-menu{

    position:absolute;

    top:115%;

    right:0;

    width:220px;

    display:none;

    background:#09131f;

    border:1px solid var(--border);

    border-radius:10px;

    overflow:hidden;

    box-shadow:var(--shadow);
}

.language-menu.show{

    display:block;
}

.language-menu a{

    display:block;

    padding:14px 18px;

    font-size:14px;

    transition:var(--transition);
}

.language-menu a:hover{

    background:#13263a;

    color:var(--gold);
}

.language-menu hr{

    border:none;

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

.language-menu .disabled{

    opacity:.45;

    pointer-events:none;
}

.language-menu small{

    display:block;

    margin-top:3px;

    font-size:11px;
}/*=====================================================================
    VIAREXIS V2
    GLOBAL STYLE SHEET

    PART 2 / 4

    CONTENTS

    9. HERO
    10. HERO CONTENT
    11. PAGE INTRO
    12. CONTENT SECTIONS
    13. SECTION IMAGES
    14. STATEMENT
    15. CTA
    16. BUTTONS
======================================================================*/


/*=====================================================================
    9. HERO
======================================================================*/

.hero{

    position:relative;

    width:100%;

    min-height:85vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#020b11;
}

.hero img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;
}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(2,11,17,.35),
            rgba(2,11,17,.75)
        );

    z-index:1;
}


/*=====================================================================
    10. HERO CONTENT
======================================================================*/

.hero-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:900px;

    padding:0 30px;

    text-align:center;
}

.hero-content p{

    max-width:760px;

    margin:0 auto 35px;

    font-size:20px;

    color:#ece7de;
}

.hero-actions{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;
}


/*=====================================================================
    11. PAGE INTRO
======================================================================*/

.page-intro{

    padding:90px 8% 40px;
}

.page-intro .content-inner{

    max-width:900px;

    text-align:center;
}

.page-intro p{

    font-size:19px;
}


/*=====================================================================
    12. CONTENT SECTIONS
======================================================================*/

.content-section{

    padding:90px 8%;
}

.content-section:nth-child(even){

    background:var(--background-dark);
}

.content-section:nth-child(odd){

    background:transparent;
}

.content-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    max-width:var(--content-width);

    margin:auto;
}

.content-grid.reverse{

    direction:rtl;
}

.content-grid.reverse>*{

    direction:ltr;
}

.content-text{

    width:100%;
}

.content-text h2{

    margin-bottom:24px;
}

.content-text h3{

    margin-bottom:20px;
}

.content-text p:last-child{

    margin-bottom:0;
}


/*=====================================================================
    13. SECTION IMAGES
======================================================================*/

.section-image{

    width:100%;

    border-radius:var(--radius);

    overflow:hidden;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    background:#09131f;
}

.section-image img{

    width:100%;

    display:block;

    transition:.6s ease;
}

.section-image:hover img{

    transform:scale(1.04);
}


/*=====================================================================
    14. STATEMENT
======================================================================*/

.statement{

    padding:110px 8%;

    background:#08141d;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);
}

.statement .content-inner{

    max-width:900px;

    text-align:center;
}

.statement h2{

    margin-bottom:30px;
}

.statement p{

    font-size:21px;

    line-height:1.8;

    color:#ece7de;
}


/*=====================================================================
    15. CTA
======================================================================*/

.cta{

    padding:110px 8%;

    text-align:center;

    background:linear-gradient(
        180deg,
        #07131b,
        #0d2230
    );
}

.cta .content-inner{

    max-width:850px;
}

.cta h2{

    margin-bottom:25px;
}

.cta p{

    margin-bottom:40px;

    font-size:18px;
}


/*=====================================================================
    16. BUTTONS
======================================================================*/

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:190px;

    padding:15px 30px;

    border-radius:40px;

    border:1px solid var(--gold);

    background:var(--gold);

    color:#06131c;

    font-size:12px;

    font-weight:600;

    letter-spacing:.14em;

    text-transform:uppercase;

    transition:var(--transition);
}

.button:hover{

    background:var(--gold-light);

    border-color:var(--gold-light);

    transform:translateY(-2px);
}

.button-outline{

    background:transparent;

    color:var(--gold-light);
}

.button-outline:hover{

    background:rgba(201,154,66,.12);

    color:var(--white);
}

.button-dark{

    background:#0b1d29;

    color:var(--gold-light);

    border-color:rgba(201,154,66,.35);
}

.button-dark:hover{

    background:#122838;

    border-color:var(--gold);
}/*=====================================================================
    VIAREXIS V2
    GLOBAL STYLE SHEET

    PART 3 / 4

    CONTENTS

    17. CARDS
    18. FEATURE GRID
    19. IMAGE GALLERY
    20. TIMELINE
    21. QUOTES
    22. TABLES
    23. FOOTER
    24. UTILITIES
======================================================================*/


/*=====================================================================
    17. CARDS
======================================================================*/

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:60px;
}

.card{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow);
}

.card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);
}

.card-image{

    width:100%;

    aspect-ratio:16/10;

    overflow:hidden;

    background:#09131f;
}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;
}

.card:hover .card-image img{

    transform:scale(1.05);
}

.card-content{

    padding:28px;
}

.card-content h3{

    margin-bottom:16px;
}

.card-content p:last-child{

    margin-bottom:0;
}


/*=====================================================================
    18. FEATURE GRID
======================================================================*/

.features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:60px;
}

.feature{

    padding:35px;

    text-align:center;

    border:1px solid var(--border);

    border-radius:var(--radius);

    background:#09141d;

    transition:var(--transition);
}

.feature:hover{

    transform:translateY(-6px);

    border-color:var(--gold);
}

.feature-icon{

    font-size:42px;

    color:var(--gold);

    margin-bottom:20px;
}

.feature h3{

    font-size:22px;

    margin-bottom:15px;
}

.feature p{

    margin-bottom:0;
}


/*=====================================================================
    19. IMAGE GALLERY
======================================================================*/

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

    margin-top:60px;
}

.gallery img{

    width:100%;

    border-radius:var(--radius);

    border:1px solid var(--border);

    transition:.35s;

    box-shadow:var(--shadow);
}

.gallery img:hover{

    transform:scale(1.03);
}


/*=====================================================================
    20. TIMELINE
======================================================================*/

.timeline{

    position:relative;

    max-width:900px;

    margin:70px auto;
}

.timeline::before{

    content:"";

    position:absolute;

    left:25px;

    top:0;

    bottom:0;

    width:2px;

    background:var(--gold);
}

.timeline-item{

    position:relative;

    padding-left:75px;

    margin-bottom:55px;
}

.timeline-item:last-child{

    margin-bottom:0;
}

.timeline-item::before{

    content:"";

    position:absolute;

    left:16px;

    top:8px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--gold);

    border:4px solid var(--background);
}

.timeline-item h3{

    margin-bottom:12px;
}


/*=====================================================================
    21. QUOTES
======================================================================*/

.quote{

    max-width:900px;

    margin:80px auto;

    padding:40px;

    border-left:4px solid var(--gold);

    background:#09131d;

    font-style:italic;

    font-size:22px;

    color:#ece7de;
}

.quote footer{

    margin-top:25px;

    font-size:14px;

    color:var(--gold);

    font-style:normal;
}


/*=====================================================================
    22. TABLES
======================================================================*/

.table-wrapper{

    overflow-x:auto;

    margin:50px 0;
}

table{

    width:100%;

    border-collapse:collapse;
}

th{

    background:#09141d;

    color:var(--gold);

    text-align:left;

    padding:18px;
}

td{

    padding:18px;

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

tr:nth-child(even){

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


/*=====================================================================
    23. FOOTER
======================================================================*/

.site-footer{

    background:#01080d;

    border-top:1px solid var(--border);

    padding:60px 8% 30px;
}

.footer-inner{

    max-width:var(--content-width);

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;
}

.footer-brand h3{

    margin-bottom:20px;

    color:var(--gold);
}

.footer-brand p{

    margin-bottom:0;
}

.footer-links h4{

    margin-bottom:18px;

    font-size:16px;

    color:var(--gold-light);
}

.footer-links a{

    display:block;

    margin-bottom:10px;

    color:var(--text-soft);

    transition:var(--transition);
}

.footer-links a:hover{

    color:var(--gold);
}

.footer-bottom{

    margin-top:50px;

    padding-top:25px;

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

    text-align:center;

    font-size:13px;

    color:#8fa0ac;
}


/*=====================================================================
    24. UTILITIES
======================================================================*/

.hidden{

    display:none!important;
}

.w-100{

    width:100%;
}

.max-900{

    max-width:900px;

    margin-inline:auto;
}

.max-1200{

    max-width:1200px;

    margin-inline:auto;
}

.rounded{

    border-radius:var(--radius);
}

.shadow{

    box-shadow:var(--shadow);
}

.border{

    border:1px solid var(--border);
}

.gold{

    color:var(--gold);
}

.gold-light{

    color:var(--gold-light);
}

.bg-dark{

    background:var(--background-dark);
}

.bg-panel{

    background:var(--panel);
}

.fade{

    opacity:.8;
}

.spacer-40{

    height:40px;
}

.spacer-80{

    height:80px;
}

.spacer-120{

    height:120px;
}/*=====================================================================
    VIAREXIS V2
    GLOBAL STYLE SHEET

    PART 4 / 4

    CONTENTS

    25. TABLET
    26. SMARTPHONE
    27. MOBILE NAVIGATION
    28. ACCESSIBILITY
    29. ANIMATIONS
    30. PRINT
    31. FINAL UTILITIES

======================================================================*/


/*=====================================================================
    25. TABLET
======================================================================*/

@media (max-width:1100px){

    .content,
    .content-section,
    .page-intro,
    .statement,
    .cta{

        padding:70px 6%;
    }

    .content-grid,
    .two-columns{

        grid-template-columns:1fr;

        gap:50px;
    }

    .hero{

        min-height:70vh;
    }

    .hero-content h1{

        font-size:56px;
    }

    .hero-content p{

        font-size:18px;
    }

    .footer-inner{

        grid-template-columns:1fr 1fr;
    }

}



/*=====================================================================
    26. SMARTPHONE
======================================================================*/

@media (max-width:768px){

    body{

        font-size:15px;
    }

    h1{

        font-size:42px;
    }

    h2{

        font-size:34px;
    }

    h3{

        font-size:24px;
    }

    .content,
    .content-section,
    .page-intro,
    .statement,
    .cta{

        padding:55px 22px;
    }

    .hero{

        min-height:60vh;
    }

    .hero-content{

        padding:0 20px;
    }

    .hero-content p{

        font-size:17px;
    }

    .hero-actions{

        flex-direction:column;

        align-items:center;
    }

    .button{

        width:100%;

        max-width:320px;
    }

    .cards{

        grid-template-columns:1fr;
    }

    .features{

        grid-template-columns:1fr;
    }

    .gallery{

        grid-template-columns:1fr;
    }

    .timeline{

        margin:40px auto;
    }

    .timeline::before{

        left:14px;
    }

    .timeline-item{

        padding-left:45px;
    }

    .timeline-item::before{

        left:6px;
    }

    .quote{

        padding:28px;

        font-size:18px;
    }

    .footer-inner{

        grid-template-columns:1fr;

        gap:35px;
    }

}



/*=====================================================================
    27. MOBILE NAVIGATION
======================================================================*/

@media (max-width:900px){

    .site-header{

        height:64px;

        padding:0 20px;
    }

    .brand{

        font-size:17px;

        letter-spacing:.22em;
    }

    .main-nav{

        display:none;
    }

    .language-button{

        padding:8px 12px;

        font-size:12px;
    }

    .language-menu{

        width:200px;
    }

}



/*=====================================================================
    28. ACCESSIBILITY
======================================================================*/

:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:3px;
}

button:focus-visible,
a:focus-visible{

    border-radius:4px;
}

::selection{

    background:var(--gold);

    color:#06131c;
}



/*=====================================================================
    29. ANIMATIONS
======================================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);
    }

    to{

        opacity:1;

        transform:none;
    }

}

.fade-up{

    animation:fadeUp .8s ease both;
}



@keyframes fade{

    from{

        opacity:0;
    }

    to{

        opacity:1;
    }

}

.fade-in{

    animation:fade .8s ease both;
}



@keyframes zoom{

    from{

        transform:scale(.95);

        opacity:0;
    }

    to{

        transform:scale(1);

        opacity:1;
    }

}

.zoom-in{

    animation:zoom .7s ease both;
}



/*=====================================================================
    30. PRINT
======================================================================*/

@media print{

    .site-header,
    .site-footer,
    .hero-actions,
    .language-selector{

        display:none!important;
    }

    body{

        background:white;

        color:black;
    }

}



/*=====================================================================
    31. FINAL UTILITIES
======================================================================*/

.clearfix::after{

    content:"";

    display:block;

    clear:both;
}

.flex{

    display:flex;
}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;
}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.grid{

    display:grid;
}

.grid-2{

    display:grid;

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

    gap:40px;
}

.grid-3{

    display:grid;

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

    gap:35px;
}

.grid-4{

    display:grid;

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

    gap:30px;
}

@media(max-width:900px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;
    }

}

.opacity-80{

    opacity:.8;
}

.opacity-60{

    opacity:.6;
}

.opacity-40{

    opacity:.4;
}

.no-margin{

    margin:0!important;
}

.no-padding{

    padding:0!important;
}

.text-gold{

    color:var(--gold);
}

.text-white{

    color:white;
}

.bg-gold{

    background:var(--gold);

    color:#06131c;
}

.border-gold{

    border:1px solid var(--gold);
}

.radius{

    border-radius:var(--radius);
}

.shadow-lg{

    box-shadow:
        0 20px 45px rgba(0,0,0,.45);
}

/*=====================================================================

    END OF FILE
    VIAREXIS V2

======================================================================*/