/* Google Font
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
    */

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

    html{
        scroll-behavior:smooth;
    }

    body{
        background:#ffffff;
        color:#111;
        font-family:'Inter',sans-serif;
    }

    /* ===========================
    HEADER
    =========================== */

    .header{

        width:100%;
        height:100px;

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

        padding:0 80px;

        background:white;

        border-bottom:1px solid #ececec;

        position:sticky;
        top:0;
        z-index:999;

    }



    .logo img{
        height:75px;
        opacity:0;
        filter:blur(8px);
        transform:scale(0.95);
        animation:inkAppear 3s ease forwards;
    }

    @keyframes inkAppear{
        0%{
            opacity:0;
            filter:blur(10px);
            transform:scale(0.95);
        }

        60%{
            opacity:0.7;
            filter:blur(3px);
        }

        100%{
            opacity:1;
            filter:blur(0);
            transform:scale(1);
        }
    }

    .logo{
        width: 9vw;
        height: 12vh;
    }
    .logo img{

        width: 100%;
        height: 100%;

    }

    .nav{

        display:flex;
        align-items:center;

    }

    .nav a{

        text-decoration:none;

        color:#111;

        margin-left:45px;

        letter-spacing:2px;

        text-transform:uppercase;

        font-size:14px;

        transition:.3s;

    }

    .nav a:hover{

        opacity:.45;

    }

    .instagram{

    margin-left:35px;

    vertical-align:middle;

}

.instagram img{

    width:28px;

    height:28px;

    transition:.3s;

}

.instagram img:hover{

    transform:scale(1.15);

    opacity:.7;

}


    /* ===========================
    HERO
    =========================== */
    .hero{
        position:relative;
        width:100%;
        height:calc(100vh - 100px);
        overflow:hidden;
    }

    .hero-video{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        object-fit:cover;
        z-index:0;
    }

    .overlay{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.35);
        z-index:1;
    }

    .hero-content{
        position:relative;
        z-index:2;
        width:50%;
        padding-top:160px;
        padding-left:8%;
        color:white;
    }

    .hero-content h1{
        font-family:'Cormorant Garamond',serif;
        font-size:92px;
        font-weight:600;
        line-height:0.95;
        margin-bottom:35px;
        color:white;
    }

    .hero-content p{
        font-size:18px;
        line-height:2;
        color:white;
        max-width:520px;
    }

    .small-title{
        font-size:14px;
        letter-spacing:4px;
        text-transform:uppercase;
        margin-bottom:25px;
        color:white;
    }

    .btn-outline{
        display:inline-block;
        margin-left:20px;
        padding:16px 42px;
        border:1px solid white;
        color:white;
        text-decoration:none;
        letter-spacing:2px;
        transition:.3s;
    }

    .btn-outline:hover{
        background:white;
        color:#111;
    }
    /* ===========================
    FEATURE
    =========================== */

    .feature-section{

        width:100%;

        padding:120px 8%;

        display:flex;

        justify-content:space-between;

        gap:40px;

        background:#f8f8f8;

    }

    .feature-card{

        flex:1;

    }

    .feature-card img{

        width:100%;

        height:420px;

        object-fit:cover;

    }

    .feature-card h2{

        margin-top:35px;

        font-family:'Cormorant Garamond';

        font-size:42px;

        font-weight:600;

    }

    .feature-card p{

        margin-top:20px;

        line-height:1.9;

        color:#666;

    }


    /* ===========================
    PROCESS
    =========================== */

    .process{

        padding:140px 8%;

        background:#111;

        color:white;

        text-align:center;

    }

    .process h2{

        font-family:'Cormorant Garamond';

        font-size:60px;

        margin-bottom:20px;

    }

    .process-intro{

        color:#ccc;

        margin-bottom:70px;

    }

    .steps{

        display:flex;

        gap:35px;

    }

    .step{

        flex:1;

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

        padding:45px;

    }

    .step span{

        font-size:55px;

        font-family:'Cormorant Garamond';

    }

    .step h3{

        margin:25px 0;

        font-size:28px;

    }

    .step p{

        color:#ccc;

        line-height:1.9;

    }


    /* ===========================
    PRODUCTS
    =========================== */

    .products{

        padding:130px 8%;

        background:white;

    }

    .products h2{

        text-align:center;

        font-family:'Cormorant Garamond';

        font-size:65px;

        margin-bottom:80px;

    }

    .product-grid{

        display:flex;

        gap:35px;

    }

    .product-card{

        flex:1;

        border:1px solid #ddd;

        padding:45px;

        transition:.4s;

    }

    .product-card:hover{

        transform:translateY(-10px);

        box-shadow:0 20px 40px rgba(0,0,0,.08);

    }

    .product-card h3{

        font-family:'Cormorant Garamond';

        font-size:34px;

    }

    .product-card p{

        margin-top:20px;

        color:#666;

        line-height:1.8;

    }

    .price{

        color:#111;

        font-weight:600;

    }


    /* ===========================
    CTA
    =========================== */

    .cta{

        padding:150px 8%;

        text-align:center;

        background:#f7f7f7;

    }

    .cta h2{

        font-family:'Cormorant Garamond';

        font-size:70px;

        margin-bottom:25px;

    }

    .cta p{

        color:#666;

        margin-bottom:40px;

    }


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

    .footer{

        background:#111;

        color:white;

        text-align:center;

        padding:70px 0;

    }

    .footer h3{

        font-family:'Cormorant Garamond';

        font-size:42px;

        letter-spacing:5px;

        margin-bottom:20px;

    }

    .footer p{

        color:#bbb;

        margin-top:10px;

    }


    /* ===========================
    Responsive
    =========================== */

    /* Tablet */
    @media (max-width: 1024px){
        .header{
            padding:0 40px;
        }

        .logo{
            width:120px;
            height:auto;
        }

        .logo img{
            height:auto;
        }

        .nav a{
            margin-left:25px;
            font-size:12px;
        }

        .hero-content{
            width:70%;
            padding-top:120px;
        }

        .hero-content h1{
            font-size:64px;
        }

        .feature-card img{
            height:320px;
        }

        .process h2,
        .products h2,
        .cta h2{
            font-size:48px;
        }
    }

    /* iPhone and other mobile phones */
    @media (max-width: 767px){
        body{
            overflow-x:hidden;
        }

        .header{
            position:relative;
            height:auto;
            padding:14px 18px;
            flex-direction:column;
        }

        .logo{
            width:110px;
            height:auto;
        }

        .logo img{
            width:100%;
            height:auto;
        }

        .nav{
            width:100%;
            margin-top:12px;
            justify-content:center;
            flex-wrap:wrap;
            gap:8px 14px;
        }

        .nav a{
            margin-left:0;
            font-size:10px;
            letter-spacing:1px;
        }

        .hero{
            min-height:640px;
            height:calc(100svh - 115px);
            padding:0;
        }

        .hero-content{
            width:100%;
            padding:90px 22px 45px;
        }

        .hero-content h1{
            font-size:43px;
            line-height:1.02;
            margin-bottom:24px;
        }

        .hero-content p{
            font-size:14px;
            line-height:1.7;
            max-width:100%;
        }

        .small-title{
            font-size:10px !important;
            letter-spacing:2px;
            margin-bottom:18px;
        }

        .hero-buttons{
            display:flex;
            flex-direction:column;
            gap:12px;
            margin-top:26px;
        }

        .btn,
        .btn-outline{
            display:block;
            width:100%;
            margin:0;
            padding:14px 20px;
            text-align:center;
        }

        .feature-section{
            padding:70px 22px;
            flex-direction:column;
            gap:60px;
        }

        .feature-card img{
            height:240px;
        }

        .feature-card h2{
            margin-top:24px;
            font-size:34px;
        }

        .feature-card p{
            margin-top:14px;
            font-size:15px;
        }

        .process{
            padding:80px 22px;
        }

        .process h2{
            font-size:40px;
        }

        .process-intro{
            margin-bottom:45px;
        }

        .steps{
            flex-direction:column;
            gap:18px;
        }

        .step{
            padding:30px 24px;
        }

        .step span{
            font-size:42px;
        }

        .step h3{
            font-size:24px;
        }

        .products{
            padding:80px 22px;
        }

        .products h2{
            font-size:42px;
            margin-bottom:45px;
        }

        .product-grid{
            flex-direction:column;
            gap:18px;
        }

        .product-card{
            padding:30px 24px;
        }

        .product-card h3{
            font-size:28px;
        }

        .cta{
            padding:90px 22px;
        }

        .cta h2{
            font-size:40px;
        }

        .footer{
            padding:50px 20px;
        }

        .footer h3{
            font-size:30px;
            letter-spacing:3px;
        }
    }

    /* Small iPhones */
    @media (max-width: 390px){
        .hero-content h1{
            font-size:38px;
        }

        .nav{
            gap:7px 10px;
        }

        .nav a{
            font-size:9px;
        }
    }