/* ==========================================================
   RESET
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#333;
}

/* ==========================================================
   CONTAINER
========================================================== */

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

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

.site-header{
    width:100%;
    background:#ffffff;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:999;
}

.site-header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px;
}

/* Logo */

.logo img,
.custom-logo{
    display:block;
    width:auto;
    max-height:55px;
}

/* ==========================================================
   MENU
========================================================== */

.nav ul{
    display:flex;
    align-items:center;
    list-style:none;
    gap:35px;
}

.nav li{
    list-style:none;
}

.nav a {
    border-radius: 6px;
    display: block;
    text-decoration: none;
    color: #f7f7f7;
    font-size: 15px;
    font-weight: 600;
    transition: .25s;
    background: #FF5722;
    padding: 5px 10px;
}

/* ==========================================================
   HERO SLIDER
========================================================== */

.hero-slider{
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .6s ease;
}

.slide.active{
    opacity:1;
    z-index:2;
}

.slide img{
    width:100%;
    height:100%;
}

/* ==========================================================
   BUTTON
========================================================== */

.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.8);
    cursor:pointer;
    font-size:24px;
    z-index:20;
}

.prev{
    left:25px;
}

.next{
    right:25px;
}

.prev:hover,
.next:hover{
    background:#fff;
}

/* ==========================================================
   DOTS
========================================================== */

.dots{
    position:absolute;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:20;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    cursor:pointer;
}

.dot.active{
    background:#fff;
}

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

.site-footer{
    background:#222;
    color:#fff;
    text-align:center;
    padding:30px;
}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .site-header .container{
        height:70px;
    }

    .nav ul{
        gap:18px;
        font-size:14px;
    }

    .hero-slider{
        height:320px;
    }

}

/* ===================================
   PAGE
=================================== */

.page-content{
    padding:60px 0;
}

.page-content .container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}