:root {

    --main-color: #F6E471;
    --black-color: #000000;
    --text-color: #EFEFEF;
    --text-color-one: #707070;
    --background-color-one: #171717;

    --font-size-title-bg: 50px;
    --font-size-title-sm: 50px;
}
html {
    scroll-behavior: smooth;
}

ul {
    list-style: none;
}
a{
    text-decoration: none;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('../font/century-gothic/CenturyGothic.ttf') format('woff'),
        url('../font/century-gothic/Century\ Gothic.ttf') format('truetype'),
        url('../font/century-gothic/GOTHIC.TTF') format('truetype'),
        url('../font/century-gothic/GOTHICB.TTF') format('truetype'),
        url('../font/century-gothic/GOTHICB0.TTF') format('truetype'),
        url('../font/century-gothic/GOTHICBI.TTF') format('truetype'),
        url('../font/century-gothic/GOTHICI.TTF') format('truetype');
}


body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden !important;
    background-color: var(--background-color-one);
    
    
    font-family: "Raleway", arial, sans-serif;
    font-family: "Wulkan display", Sans-serif;
    font-family: "Montserrat", Sans-serif;
    font-family: 'Century Gothic', sans-serif;

}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Start Main */
#main{
    width: 100%;
    height: fit-content;
    overflow-x: hidden;
    position: relative;
}
#main::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: var(--text-color-one);
    left: 100px;
    top: 0px;
    z-index: 0;
}
@media (max-width: 767px) {
    #main{
        padding-bottom: 80px;
    }
    #main::before{
        display: none !important;
    }
}


/* Start Contact Section */
#back_world{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    /* display: none; */
}
#back_world svg{
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#box_back{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 40%;
    height: 200%;
    transform: translateX(20%) translateY(-50%) rotate(-45deg);
    z-index: 7;
    background-color: var(--main-color);
}
#box_back::before{
    content: "";
    width: 4%;
    height: 100%;
    position: absolute;
    left: 10px;
    bottom: 0px;
    background-color: var(--background-color-one);
}