/* ==========================================
   REC STUDIO
   Main Stylesheet
========================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================
   CSS Variables
========================================== */



:root{

    --primary:#ff3131;
    --black:#000000;
    --white:#ffffff;
    --gray:#b8b8b8;
    --border:rgba(255,255,255,.08);

    --container:1280px;

    --transition:.35s ease;

}

/* ==========================================
   Reset
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:var(--black);
    color:var(--white);
    overflow-x:hidden;
    line-height:1.6;

}



body::before{

    content:"";

    position:fixed;

    inset:0;

    background:url("../images/background/noise.png") repeat;

    opacity:.03;

    pointer-events:none;

    z-index:1;

}

header,
main,
footer{

    position:relative;

    z-index:2;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

/* ==========================================
   Container
========================================== */

.container{

    width:min(100% - 48px,var(--container));
    margin:auto;

}

/* ==========================================
   Header
========================================== */

#header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(16px);

    background:rgba(0,0,0,.35);

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

}

#header .container{

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo img{

    height:42px;
    width:auto;

}

nav ul{

    display:flex;
    gap:40px;

}

nav a{

    position:relative;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:2px;

    transition:var(--transition);

}

nav a:hover{

    color:var(--primary);

}

nav a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}

nav a:hover::after,
nav a.active::after{

    width:100%;

}

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

#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:120px;
    padding-bottom:80px;

}

.hero-content{

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;

    gap:20px;

    width:100%;

}

.hero-left{

    position:relative;

    z-index:5;

}

.hero-right{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

}

.hero-right img{

    width:100%;

    max-width:900px;

    user-select:none;

    pointer-events:none;

}

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

.coming-text{

    display:block;

    color:var(--primary);

    font-size:1rem;

    font-weight:600;

    letter-spacing:14px;

    margin-bottom:10px;

}

.soon-text{

    font-size:clamp(90px,11vw,170px);

    line-height:.82;

    font-weight:900;

    color:#fff;

    text-transform:uppercase;

    margin-bottom:30px;

    text-shadow:
        0 0 18px rgba(255,255,255,.15);

}

.hero-left h2{

    font-size:54px;

    font-weight:300;

    margin-bottom:30px;

    line-height:1.2;

}

.hero-left h2 span{

    color:var(--primary);

}

.hero-divider{

    width:70px;

    height:3px;

    background:var(--primary);

    margin-bottom:35px;

}

.hero-left p{

    max-width:520px;

    color:var(--gray);

    line-height:2;

    font-size:18px;

    margin-bottom:45px;

}

.hero-button{

    display:inline-flex;

    align-items:center;

    gap:20px;

    padding:18px 40px;

    border:2px solid var(--primary);

    border-radius:70px;

    color:#fff;

    font-weight:700;

    letter-spacing:2px;

    transition:.35s ease;

}

.hero-button span{

    font-size:24px;

    transition:.35s;

}

.hero-button:hover{

    background:var(--primary);

    box-shadow:0 0 40px rgba(255,49,49,.35);

}

.hero-button:hover span{

    transform:translate(5px,-5px);

}

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;

    color:var(--primary);

    letter-spacing:6px;

    font-size:12px;

}

.scroll-line{

    width:2px;

    height:90px;

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

    position:relative;

}

.scroll-dot{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}

/* ==========================================
   CONTACT
========================================== */

#contact{

    position:relative;

    padding:180px 0;

    background:#000;

}

.contact-header{

    max-width:800px;

    margin:0 auto 80px;

    text-align:center;

}

.contact-header span{

    display:inline-block;

    color:var(--primary);

    font-size:14px;

    letter-spacing:8px;

    margin-bottom:18px;

}

.contact-header h2{

    font-size:clamp(42px,5vw,68px);

    font-weight:800;

    margin-bottom:25px;

    line-height:1.1;

}

.contact-header p{

    color:#9d9d9d;

    font-size:18px;

    line-height:1.9;

}

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

.contact-list{

    display:grid;

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

    gap:25px;

    max-width:1200px;

    margin:auto;

}

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

.contact-card{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:38px;

    min-height:160px;

    background:#090909;

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

    border-radius:22px;

    overflow:hidden;

    transition:.35s ease;

}

.contact-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:var(--primary);

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,49,49,.45);

    box-shadow:

        0 20px 50px rgba(255,49,49,.08);

}

.contact-card:hover::before{

    transform:scaleY(1);

}

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

.contact-left{

    display:flex;

    align-items:center;

    gap:25px;

}

.contact-left img{

    width:48px;
    height:48px;

    filter:brightness(0) invert(1);

    transition:.35s ease;

}

.contact-card:hover .contact-left img{

    filter:brightness(0)
saturate(100%)
invert(28%)
sepia(99%)
saturate(5197%)
hue-rotate(344deg)
brightness(104%)
contrast(102%);

    transform:rotate(-10deg) scale(1.1);

}

.contact-left div{

    display:flex;

    flex-direction:column;

}

.contact-left h3{

    font-size:24px;

    font-weight:700;

    margin-bottom:8px;

    color:#fff;

}

.contact-left p{

    color:#9b9b9b;

    font-size:17px;

}

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

.arrow{

    width:30px;

    height:30px;

    opacity:.7;

    transition:.35s ease;

}

.contact-card:hover .arrow{

    opacity:1;

    transform:translate(8px,-8px);

}

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

@media(max-width:900px){

    .contact-list{

        grid-template-columns:1fr;

    }

}

/* ==========================================
   Preloader
========================================== */

#preloader{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .8s ease,
               visibility .8s ease;

}

#preloader.hide{

    opacity:0;

    visibility:hidden;

}

.preloader-content{

    text-align:center;

}

.preloader-content img{

    width:180px;

    margin:auto;

    margin-bottom:40px;

}

.loader-bar{

    width:220px;

    height:3px;

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

    overflow:hidden;

    border-radius:50px;

}

.loader-bar span{

    display:block;

    height:100%;

    width:0;

    background:var(--primary);

    animation:loading 2s ease forwards;

}

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

/* ==========================================
   Custom Cursor
========================================== */

.cursor{

    position:fixed;

    width:18px;
    height:18px;

    border:2px solid var(--primary);

    border-radius:50%;

    pointer-events:none;

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

    z-index:999999;

    transition:
        width .25s ease,
        height .25s ease,
        background .25s ease,
        border-color .25s ease,
        opacity .25s ease;

    mix-blend-mode:difference;

}

.cursor.hover{

    width:45px;
    height:45px;

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

    border-color:var(--primary);

}

/* Hide default cursor */

html,
body,
a,
button,
input,
textarea,
select,
label,
* {
    cursor: none !important;
}

/*==========================================
FOOTER
==========================================*/

#footer{

    padding:90px 0 35px;

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

    background:#050505;

}

.footer-logo{

    text-align:center;

}

.footer-logo img{

    width:180px;

    opacity:.95;

}

.footer-tagline{

    text-align:center;

    margin:22px 0 45px;

    color:#8d8d8d;

    font-size:18px;

    letter-spacing:.5px;

}

.footer-nav{

    display:flex;

    justify-content:center;

    gap:50px;

    margin-bottom:55px;

}

.footer-nav a{

    color:#bdbdbd;

    font-weight:600;

    letter-spacing:2px;

    transition:.3s;

}

.footer-nav a:hover{

    color:var(--primary);

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:30px;

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

}

.footer-bottom p{

    color:#777;

    font-size:14px;

}

@media(max-width:768px){

    .footer-bottom{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

    .footer-nav{

        gap:30px;

    }

}