/*********************************
IMPORT FONT & COLOR & FONT_AWESOME
**********************************/
@import "./fonts.css";
@import "./colors.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css";


/*********************************
        DEFAULT SETTING
**********************************/
*, html{
    scroll-behavior: smooth;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*********************************
      CUSTOM SCROLL BAR
**********************************/
::-webkit-scrollbar {
    height: 12px;
    width: 2px;
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: gray;
    -webkit-box-shadow: 0px 1px 2px var(--dark);
}

::-webkit-scrollbar-corner {
    background: var(--dark);
}


/*********************************
       DEFAULT ELEMENTS
**********************************/
body{
    margin:0;
    overflow-x:hidden !important;
    font-family: var(--default_font);
}

a{
    text-decoration:none !important;
    min-width: fit-content;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
}

a, button{
    transition:0.5s;
}

em{
    font-style:normal;
}

figure{
    padding:0;
    margin:0;
}

figure img{
    width:100%;
    height:100%;
}

a, p, .btn{
    font-size:16px;
}

p{
    line-height:1.9em;
}

a, button, input, textarea, select{
    outline:none !important;
}

fieldset{
    border:0;
}

h1, h2, h3, h4, h5, h6{
    margin:0;
}

ul{
    list-style:none;
    padding:0;
    margin:0;
}

.title, .sub_title{
    font-family:var(--title_font);
}

.flex, .fixed_flex{
    display:flex;
}

.flex_content{
    width:100%;
}

.align_center{
    align-items:center;
}

.t_center{
    text-align:center;
}

.padding_1{
    padding:1rem;
}

.padding_2{
    padding:2rem;
}

.padding_3{
    padding:3rem;
}

.padding_4{
    padding:4rem;
}

.big{
    font-size:60px;
}

.medium{
    font-size:40px;
}

.small{
    font-size:22px;
}

.relative{
    position:relative;
}

.btn{
    padding:0.6rem 1rem;
    color:inherit;
    text-transform:uppercase;
    font-weight:500;
}

.btn_1{
    background-color:var(--dark);
    color:var(--primary);
}

.btn_1:hover{
    background-color:var(--gray);
    color:var(--dark);
}

.bulletin, .angle_down{
    position:relative;
}

.angle_down:after{
    font-family:"FontAwesome";
    transition:0.5s;
}

.bulletins{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    gap:1rem;
}

.bulletin{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

.bulletin:before{
    content:"";
    display: inline-block;
    width: 20px;
    height: 20px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 6h2v2h-2zm-2 4V8h2v2zm-2 2v-2h2v2zm-2 2h2v-2h-2zm-2 2h2v-2h-2zm-2 0v2h2v-2zm-2-2h2v2H6zm0 0H4v-2h2z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    margin-right:10px;
}

.angle_down:after{
    content:"\f107";
    margin-left:5px;
}

.italic{
    font-style:italic;
}


/*********************************
         MEDIA QUERY
**********************************/
@media screen and (max-width:1080px){
    .big{
        font-size:3em;
    }

    .medium{
        font-size:1.7em;
    }

    .small{
        font-size:1.1em;
    }
}

@media screen and (max-width:720px){
    .flex{
        flex-wrap:wrap;
    }
    
    .padding_1, .padding_2, .padding_3, .padding_4{
        padding:1rem;
    }
    
    .big{
        font-size:1.8em;
    }
    
    .medium{
        font-size:1.4em;
    }
    
    .small{
        font-size:14px;
    }
    
    .btn{
        padding:0.5rem 1rem;
    }
    
    a, p, .btn, ul{
        font-size:14px;
    }
}

/*SMALL SCREEN*/
@media (max-width:300px){
    .padding_1, .padding_2, .padding_3, .padding_4{
        padding:0.5rem;
    }
    
    .big{
        font-size:1.3em;
    }
    
    .medium{
        font-size:1em;
    }
    
    .small{
        font-size:0.7em;
    }
    
    a, p, .btn{
        font-size:10px;
    }
    
}


/*********************************
         ADDITIONAL
**********************************/
/*POPUP*/
.popup{
    position:fixed;
    bottom:1rem;
    right:1rem;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    overflow-y:auto;
    gap:5px;
    z-index:99 !important;
    border-radius:10px;
    box-shadow:0px 6px 16px -6px var(--dark);
}

.popup .alert{
    max-width:350px;
    position:relative;
    background-color:var(--dark);
    padding:0.5rem 1rem;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.3);
    color:var(--white);
    display:flex;
    align-items:center;
    gap:10px;
    overflow:hidden;
}

.popup .alert article{
    padding-right:1rem;
}

.popup .alert article .title{
    position:relative;
    top:5px;
    display:flex;
    align-items:center;
    gap:5px;
}

.popup .alert article .title .icon{
    position:relative;
    top:1px;
}

.popup .alert article p{
    font-weight:300;
    opacity:0.6;
    font-size:12px;
}


/*ICON*/
.icon_danger{
    color:var(--red);
}

.icon_warning{
    color:var(--yellow);
}

.icon_success{
    color:var(--green);
}

/*CLOSE*/
.close{
    position:absolute;
    top:0.2rem;
    right:0.2rem;
    padding:0.1rem 0.2rem;
    border-radius:3px;
    border:1px solid rgba(255,255,255,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    color:inherit;
    opacity:0.6;
}

.close:hover{
    opacity:1;
}

@media (max-width:520px){
    .popup{
        bottom:0.3rem;
        right:50%;
        transform:translate(50%, 0%);
        width:98%;
        align-items:center;
        justify-content:center;
    }
    
    .popup .alert{
        max-width:100%;
        width:100%;
        border-radius:0px;
    }
}

@media (max-width:300px){
    .popup .alert{
        flex-wrap:wrap;
    }
}