/* ==========================================================================
   INDO NATURA EXPORTER
   LAYOUT.CSS
   PART 1
   GLOBAL • HEADER • LOGO • NAVIGATION
========================================================================== */

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    background:#081B42;

    color:#ffffff;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    padding-top:85px;

    overflow-x:hidden;

}

main{

    flex:1;

}

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

.container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding-left:20px;

    padding-right:20px;

}

/* ==========================================================================
   LINKS
========================================================================== */

a{

    text-decoration:none;

    transition:.3s;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}

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

.main-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(10,18,28,.88);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

    box-shadow:0 8px 30px rgba(0,0,0,.18);

}

.main-header .container{

    min-height:85px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

}

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

.logo{

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo-link{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

}

.logo img{

    width:auto;

    max-height:46px;

}

.logo span{

    margin-top:6px;

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    background:linear-gradient(
        90deg,
        #BF953F,
        #FCF6BA,
        #B38728,
        #FBF5B7,
        #AA771C
    );

    background-size:250%;

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

/* ==========================================================================
   PREMIUM SHINE
========================================================================== */

.premium-shine{

    position:relative;

    overflow:hidden;

}

.premium-shine::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:55%;

    height:100%;

    background: linear-gradient(
    90deg,
    transparent,
    rgba(57,255,20,.9),
    transparent
);

    transform:skewX(-25deg);

    animation:premiumShine 3s linear infinite;

}

@keyframes premiumShine{

    from{

        left:-130%;

    }

    to{

        left:170%;

    }

}

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

.main-nav{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.nav-links{

    list-style:none;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin:0;

    padding:0;

}

.nav-links li{

    display:flex;

}

.nav-links a{

    color:#b9c8d6;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.8px;

    padding:6px 8px;

    border-radius:6px;

}

.nav-links a:hover{

    color:#BF953F;

}

.btn-inquiry{

    padding:6px 14px !important;

    border-radius:6px;

    background:#BF953F;

    color:#fff !important;

}

.btn-inquiry:hover{

    background:#d6aa54;

    color:#fff !important;

}

/* ==========================================================================
   COMMON
========================================================================== */

.text-center{

    text-align:center;

}

.text-white{

    color:#fff;

}

.w-100{

    width:100%;

}


/* ==========================================================================
   PART 2
   FOOTER • BUTTON • FORM • CARD • UTILITIES
========================================================================== */


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:none;

    outline:none;

    cursor:pointer;

    transition:.30s;

    text-decoration:none;

}

.btn:hover{

    transform:translateY(-2px);

}

.btn:active{

    transform:translateY(0);

}


/* ==========================================================================
   FORM
========================================================================== */

input,
textarea,
select,
button{

    font-family:inherit;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

}

.form-control{

    width:100%;

}


/* ==========================================================================
   CARD
========================================================================== */

.card{

    background:#ffffff;

    border-radius:16px;

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

}


/* ==========================================================================
   SECTION
========================================================================== */

section{

    position:relative;

}

.section-title{

    font-size:2.2rem;

    font-weight:700;

    margin-bottom:20px;

}

.section-subtitle{

    color:#9bb0c0;

    line-height:1.8;

}


/* ==========================================================================
   SPACING
========================================================================== */

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.pt-1{padding-top:10px;}
.pt-2{padding-top:20px;}
.pt-3{padding-top:30px;}
.pt-4{padding-top:40px;}
.pt-5{padding-top:50px;}

.pb-1{padding-bottom:10px;}
.pb-2{padding-bottom:20px;}
.pb-3{padding-bottom:30px;}
.pb-4{padding-bottom:40px;}
.pb-5{padding-bottom:50px;}


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

.main-footer{

    margin-top:auto;

    background:#09131d;

    border-top:1px solid rgba(255,255,255,.08);

    color:#9fb2c2;

    padding:28px 20px;

}

.footer-container{

    max-width:1200px;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-align:center;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.footer-contact p{

    margin:0;

}

.footer-contact a{

    color:#BF953F;

}

.footer-contact a:hover{

    color:#fff;

}

.footer-links{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    justify-content:center;

}

.footer-links a{

    color:#BF953F;

    font-weight:600;

}

.footer-links a:hover{

    color:#ffffff;

}

.footer-copyright{

    font-size:.75rem;

    opacity:.6;

}


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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#08131d;

}

::-webkit-scrollbar-thumb{

    background:#4b6478;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#6e879a;

}


/* ==========================================================================
   SELECTION
========================================================================== */

::selection{

    background:#BF953F;

    color:#ffffff;

}


/* ==========================================================================
   HR
========================================================================== */

hr{

    border:none;

    height:1px;

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

}


/* ==========================================================================
   LIST
========================================================================== */

ul{

    padding-left:18px;

}

li{

    line-height:1.8;

}


/* ==========================================================================
   TABLE
========================================================================== */

table{

    width:100%;

    border-collapse:collapse;

}

th,
td{

    padding:12px;

}


/* ==========================================================================
   IMAGE
========================================================================== */

.img-fluid{

    max-width:100%;

    height:auto;

}

.rounded{

    border-radius:12px;

}


/* ==========================================================================
   SHADOW
========================================================================== */

.shadow{

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}


/* ==========================================================================
   DISPLAY
========================================================================== */

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.flex-column{

    flex-direction:column;

}


/* ==========================================================================
   PART 3
   RESPONSIVE • ANIMATION • FINAL
========================================================================== */


/* ==========================================================================
   DESKTOP LARGE
========================================================================== */

@media (min-width:1400px){

.container{

max-width:1380px;

}

.logo img{

max-height:50px;

}

.logo span{

font-size:16px;

}

}


/* ==========================================================================
   LAPTOP
========================================================================== */

@media (max-width:1200px){

.container{

max-width:1140px;

}

.nav-links{

gap:14px;

}

.nav-links a{

font-size:.78rem;

}

}


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

@media (max-width:992px){

body{

padding-top:90px;

}

.main-header{

padding:8px 0;

}

.main-header .container{

min-height:80px;

}

.logo img{

max-height:40px;

}

.logo span{

font-size:13px;

letter-spacing:1px;

}

.nav-links{

gap:10px;

flex-wrap:wrap;

}

.nav-links a{

font-size:.76rem;

padding:6px;

}

.footer-links{

gap:12px;

}

.section-title{

font-size:1.8rem;

}

}


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

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

@media (max-width:768px){

body{

padding-top:95px;

}

.container{

padding-left:18px;

padding-right:18px;

}

.main-header{

padding:10px 0;

}

.main-header .container{

gap:6px;

}

.logo img{

max-height:36px;

}

.logo span{

font-size:12px;

text-align:center;

line-height:1.3;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

gap:8px;

}

.nav-links a{

font-size:.75rem;

}

.btn-inquiry{

padding:6px 12px !important;

}

.footer-container{

gap:8px;

}

.footer-links{

display:flex;

justify-content:center;

align-items:center;

flex-direction:row;

flex-wrap:wrap;

gap:10px;

text-align:center;

}

.footer-links a{

white-space:nowrap;

font-size:.82rem;

}

.footer-links span{

display:inline-block;

color:#8da2b5;

}

.section-title{

font-size:1.6rem;

}

}

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

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

@media (max-width:768px){

body{

padding-top:95px;

}

.container{

padding-left:18px;

padding-right:18px;

}

.main-header{

padding:10px 0;

}

.main-header .container{

gap:6px;

}

.logo img{

max-height:36px;

}

.logo span{

font-size:12px;

text-align:center;

line-height:1.3;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

gap:8px;

}

.nav-links a{

font-size:.75rem;

}

.btn-inquiry{

padding:6px 12px !important;

}

.footer-container{

gap:8px;

}

.footer-links{

display:flex;

justify-content:center;

align-items:center;

flex-direction:row;

flex-wrap:wrap;

gap:10px;

text-align:center;

}

.footer-links a{

white-space:nowrap;

font-size:.82rem;

}

.footer-links span{

display:inline-block;

color:#8da2b5;

}

.section-title{

font-size:1.6rem;

}

}


/* ==========================================================================
   FADE ANIMATION
========================================================================== */

.fade-up{

opacity:0;

transform:translateY(25px);

animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ==========================================================================
   HOVER
========================================================================== */

.hover-up{

transition:.3s;

}

.hover-up:hover{

transform:translateY(-5px);

}


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

.text-gold{

color:#BF953F;

}


/* ==========================================================================
   GLASS EFFECT
========================================================================== */

.glass{

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

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

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

border-radius:20px;

}


/* ==========================================================================
   REMOVE BLUE TAP MOBILE
========================================================================== */

*{

-webkit-tap-highlight-color:transparent;

}


/* ==========================================================================
   FOCUS
========================================================================== */

button:focus,
a:focus,
input:focus{

outline:none;

}


/* ==========================================================================
   SMOOTH
========================================================================== */

img,
button,
a{

transition:.30s ease;

}


/* ==========================================================================
   END OF FILE
========================================================================== */


.main-nav{
    display:block !important;
}

.nav-links{
    display:flex !important;
}