/* ==================================================
   SIP-COM
   FILE : assets/css/style.css
   GLOBAL LAYOUT ONLY
================================================== */

/* ==================================================
   ROOT
================================================== */

:root{

    --primary:#0f766e;
    --primary-dark:#115e59;

    --bg:#f5f7fb;
    --white:#ffffff;

    --text:#102a43;
    --muted:#627d98;

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

}

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

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

html,
body{

    width:100%;
    height:100%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:var(--bg);
    color:var(--text);

    overflow-x:hidden;

}

/* ==================================================
   APP
================================================== */

#app{

    width:100%;
    height:100vh;

}

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

.container{

    width:100%;
    max-width:1400px;

    margin:0 auto;

}

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

.topbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:80px;

    z-index:1000;

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

    backdrop-filter:blur(12px);

    border-bottom:
        1px solid rgba(0,0,0,.05);

}

.topbar .container{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;

    padding:0 24px;

}

/* ==================================================
   BRAND
================================================== */

.brand{

    display:flex;

    align-items:center;

    gap:12px;

}

/* ==================================================
   LOGO
================================================== */

.header-logo{

    width:52px;

    height:52px;

    object-fit:contain;

    flex-shrink:0;

}

/* ==================================================
   TEXT
================================================== */

.brand-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.brand-text h1{

    margin:0;

    font-size:28px;

    line-height:1;

    font-weight:800;

    color:#0f172a;

    letter-spacing:.5px;

}

.brand-text span{

    margin-top:4px;

    font-size:13px;

    color:#64748b;

    line-height:1.2;

}

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

@media (max-width:768px){

    .topbar{

        height:72px;

    }

    .header-logo{

        width:44px;

        height:44px;

    }

    .brand-text h1{

        font-size:22px;

    }

    .brand-text span{

        font-size:11px;

    }

}
/* ==================================================
   BRAND
================================================== */

.brand{

    display:flex;
    align-items:center;

    gap:12px;

    min-width:0;

}

/* ==================================================
   LOGO
================================================== */

.brand-logo{

    width:42px;
    height:42px;

    flex-shrink:0;

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

}

.brand-logo img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

}

/* ==================================================
   INFO
================================================== */

.brand-info{

    min-width:0;

}

.brand-info h1{

    margin:0;

    font-size:18px;
    font-weight:700;
    line-height:1.1;

    color:var(--text);

}

.brand-info span{

    display:block;

    margin-top:2px;

    font-size:12px;
    line-height:1.3;

    color:var(--muted);

}

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

@media (max-width:768px){

    .topbar{

        height:64px;

    }

    .topbar .container{

        padding:0 16px;

    }

    .brand{

        gap:10px;

    }

    .brand-logo{

        width:38px;
        height:38px;

    }

    .brand-info h1{

        font-size:16px;

    }

    .brand-info span{

        font-size:11px;

    }

}

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

.slides-wrapper{

    width:100%;
    height:100vh;

    overflow:hidden;

}

.slides-track{

    display:flex;

    width:400vw;
    height:100vh;

    transition:
        transform .35s ease;

}

.slide{

    width:100vw;
    height:100vh;

    flex-shrink:0;

}

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

.slide-scroll{

    width:100%;
    height:100vh;

    overflow-y:auto;
    overflow-x:hidden;

    padding:
        90px
        24px
        130px;

}

/* ==================================================
   SCROLLBAR
================================================== */

.slide-scroll::-webkit-scrollbar{

    width:8px;

}

.slide-scroll::-webkit-scrollbar-thumb{

    background:
        rgba(15,118,110,.25);

    border-radius:20px;

}

/* ==================================================
   BOTTOM NAVIGATION
================================================== */

.bottom-nav{

    position:fixed;

    left:50%;
    bottom:20px;

    transform:
        translateX(-50%);

    z-index:1000;

    display:flex;

    gap:8px;

    padding:10px;

    border-radius:24px;

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

    backdrop-filter:
        blur(15px);

    box-shadow:
        var(--shadow);

}

.nav-item{

    border:none;

    background:none;

    cursor:pointer;

    min-width:110px;

    padding:12px;

    border-radius:18px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:4px;

    color:var(--text);

    transition:
        .25s ease;

}

.nav-item:hover{

    background:
        rgba(15,118,110,.08);

}

.nav-item.active{

    background:
        var(--primary);

    color:#ffffff;

}

.nav-icon{

    font-size:18px;
    line-height:1;

}

.nav-item small{

    font-size:11px;

}

/* ==================================================
   TABLET
================================================== */

@media(max-width:992px){

    .slide-scroll{

        padding:
            90px
            20px
            125px;

    }

}

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

@media(max-width:768px){

    .topbar .container{

        padding:0 16px;

    }

    .brand-logo{

        width:38px;
        height:38px;

    }

    .brand-info h1{

        font-size:16px;

    }

    .brand-info span{

        font-size:11px;

    }

    .slide-scroll{

        padding:
            85px
            16px
            120px;

    }

    .bottom-nav{

        left:10px;
        right:10px;

        bottom:10px;

        transform:none;

        justify-content:space-between;

    }

    .nav-item{

        flex:1;

        min-width:auto;

        padding:10px 4px;

    }

    .nav-icon{

        font-size:16px;

    }

}

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

@media(max-width:480px){

    .slide-scroll{

        padding:
            80px
            14px
            115px;

    }

    .nav-item small{

        font-size:10px;

    }

}