@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Top Bar
	3.2 Header Content
	3.3 Logo
	3.4 Main Nav
	3.5 Hamburger
4. Menu
5. Home
6. Contact
7. Footer


******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500,600,700,800,900');

/*********************************
2. Body and some general stuff
*********************************/
/* Center Phone */

.phone-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:60px auto;
    clear:both;
}

.phone{
    margin:0 auto;
}

.phone-section{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px 0;
    overflow:hidden;
}

.phone{
    position:relative;
    width:300px;
    max-width:90vw;
    aspect-ratio:9/18.8;
    background:linear-gradient(145deg,#6f6f78,#1b1b22,#9a9aa3);
    border-radius:42px;
    padding:8px;
    box-shadow:
        0 25px 55px rgba(0,0,0,.35),
        inset 0 0 8px rgba(255,255,255,.35);
}

.phone::before{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:39px;
    border:2px solid rgba(255,255,255,.18);
    pointer-events:none;
}

.screen{
    position:relative;
    width:100%;
    height:100%;
    background:#000;
    border-radius:34px;
    overflow:hidden;
}

.screen video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#000;
}

.dynamic-island{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:86px;
    height:24px;
    background:#000;
    border-radius:30px;
    z-index:20;
}

.glass{
    position:absolute;
    top:0;
    left:-55%;
    width:55%;
    height:100%;
    background:linear-gradient(
        110deg,
        rgba(255,255,255,.22),
        rgba(255,255,255,.05),
        rgba(255,255,255,0)
    );
    transform:skewX(-18deg);
    pointer-events:none;
    animation:shine 7s infinite;
}

@keyframes shine{
    0%{left:-70%;}
    100%{left:130%;}
}