@font-face {
    font-family: 'Quiche Sans';
    src: url(./fonts/QuicheSans-Regular.otf);
}

@font-face {
    font-family: 'Quiche Sans Medium';
    src: url(./fonts/QuicheSans-Regular.otf);
}

@font-face {
    font-family: 'Quiche Sans Light';
    src: url(./fonts/QuicheSans-Regular.otf);
}
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
               font-family:'Quiche Sans Light', sans-serif !important;
          
        }

        .hero-section {
            width: 100%;
            min-height: 100vh;
            background: url('../images/background.png') center center/cover no-repeat;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .overlay {
            position: absolute;
            inset: 0;
              background: rgb(0 0 0 / 68%);
        }

        .content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 40px 20px;
            text-align: end;
            color: #fff;
        }

        /* LOGO */

        .logo-wrapper {
            margin-bottom: 60px;
        }

        .logo-wrapper img {
            width: 280px;
            max-width: 80%;
            object-fit: contain;
        }

        /* STATS */

        .stats-wrapper {
            display: flex;
            justify-content: end;
            align-items: center;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 60px;
        }

        .stat-box {
            min-width: 180px;
        }

        .stat-box h2 {
            font-size: 55px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .stat-box p {
            font-size: 16px;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin: 0;
            line-height: 1.6;
        }

        /* HEADING */

        .main-heading {
            font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    /* max-width: 1000px; */
    display: flex;
    justify-content: end;
}
        

        /* BUTTON */

        .view-btn {
            display: inline-block;
            margin-top: 40px;
            padding: 14px 40px;
            border: 1px solid #d1864c;
            color: #d1864c;
            text-decoration: none;
            font-size: 16px;
            letter-spacing: 2px;
            transition: 0.3s;
            background: transparent;
        }

        .view-btn:hover {
            background: #fff;
            color: #000;
        }

        /* MOBILE */

        @media(max-width:768px) {

            .logo-wrapper {
                margin-bottom: 40px;
            }

            .logo-wrapper img {
                width: 140px;
            }

            .stats-wrapper {
                gap: 25px;
                margin-bottom: 40px;
            }

            .stat-box {
                width: 45%;
                min-width: auto;
            }

            .stat-box h2 {
                font-size: 36px;
            }

            .stat-box p {
                font-size: 13px;
            }

            .main-heading {
                font-size: 34px;
            }

            .view-btn {
                padding: 12px 30px;
                font-size: 14px;
            }

        }
        /* HEADER */

.custom-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    padding:25px 40px;
    background:rgb(0, 0, 0);
    backdrop-filter:blur(10px);
}

.header-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* LOGO */

.header-logo img{
    width:170px;
    object-fit:contain;
}

/* SOCIAL */

.social-icons{
    display:flex;
    align-items:center;
    gap:18px;
}

.social-icons a{
    color:#fff;
    font-size:18px;
    transition:0.3s;
}

.social-icons a:hover{
    color:#d1864c;
    transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

    .custom-header{
        padding:20px;
    }

    .header-logo img{
        width:120px;
    }

    .social-icons{
        gap:12px;
    }

    .social-icons a{
        font-size:15px;
    }

}
/* PORTFOLIO SECTION */

.portfolio-section{
    background:#111;
    min-height:100vh;
    padding-top:100px !important;
}

/* TABS */

/* TABS */

.custom-tabs{
    gap:20px;
}

.custom-tabs .nav-link{
    background:#1b1b1b;
    border:1px solid #2d2d2d;
    color:#cfcfcf;
    padding:14px 40px;
    letter-spacing:2px;
    font-size:15px;
    transition:0.3s;
    border-radius:0;
    text-transform:uppercase;
    min-width:220px;
}

.custom-tabs .nav-link:hover{
    background:#d1864c;
    border-color:#d1864c;
    color:#fff;
}

.custom-tabs .nav-link.active{
    background:#d1864c !important;
    color:#fff !important;
    border:1px solid #d1864c !important;
}

/* CARDS */

.portfolio-card{
    position:relative;
    overflow:hidden;
    display:block;
    border-radius:12px;
}

.portfolio-card img{
    width:100%;
    height:350px;
    object-fit:cover;
    transition:0.4s;
}

.portfolio-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:0.4s;
}

.portfolio-overlay span{
    color:#fff;
    border:1px solid #d1864c;
    padding:12px 24px;
    letter-spacing:2px;
}

.portfolio-card:hover img{
    transform:scale(1.05);
}

.portfolio-card:hover .portfolio-overlay{
    opacity:1;
}

/* VIDEO */

.video-card{
    overflow:hidden;
    border-radius:12px;
}

.video-card video{
    border-radius:12px;
    height:350px;
    object-fit:cover;
}

/* MOBILE */

@media(max-width:768px){

    .portfolio-section{
        padding-top:120px !important;
    }

    .custom-tabs{
        gap:10px;
    }

    .custom-tabs .nav-link{
        padding:10px 14px;
        font-size:14px;
    }

    .portfolio-card img{
        height:250px;
    }

    .video-card video{
        height:250px;
    }

}