@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&family=Roboto:wght@300&display=swap');
html { scroll-padding-top: 125px; }
body { margin: 0; background-color: #373737; font-family: 'Roboto', sans-serif; scroll-behavior: smooth; }
/* Nav */
.anchors { position: fixed; top: 10px; right: 50px; z-index: 100; color: #ffffff; background-color: rgba(0,0,0,0.75); border-radius: 10px; }
.anchors li { display: inline; margin: 0 20px 0 0; }
.anchors li a:any-link { color: #ffffff; text-decoration: none; cursor: pointer; }
#nav-global { background-color: rgba(0,0,0,0.95); border-bottom: 2px solid #000000; }
#nav-responsive { display: none; }
#nav-responsive-options { display: none; }

/* General Classes and Styles */
h1, h2, h3, h4, h5 { font-family: 'Arimo', sans-serif; margin: inherit; font-weight: 700; }
h1 { font-size: 8rem; }
h2 { font-size: 4rem; }
h3 { font-size: 2rem; }
p { margin: 0 0 15px 0; }
.logo { height: 100px; width: auto; vertical-align: middle; }
.icon-md { font-size: 1.4rem; margin: 0 8px; }
.icon-lg { font-size: 2rem; margin: 0 15px; }
.bg-photo { background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }
.btn { color:#ffffff; text-align: center; padding: 20px; font-size: 1.5rem; margin: 10px; }
.btn-primary { background-color:#d35400; border: none; transition: all 0.5s; }
.btn-primary:hover { background-color:#e9965e; }
.curvy-border { border-radius: 30% 10%; }
.spacer-50 { height: 50px; }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
/* Before / After */
.before-after-container { width: 100%; margin: 0 auto; }

/* Animation Effects */
.hidden { opacity: 0; filter: blur(5px); transform: translateX(-100%); transition: all 1s; }
.show { opacity: 1; filter: blur(0); transform: translateX(0); }
.intro-header { margin: 0; text-align: center; background-image: linear-gradient(0deg, rgb(75, 75, 75), rgb(255, 255, 255)); background-clip: text; -webkit-background-clip: text; color: transparent; transition: 1s; margin: 0 0 25px 0; }
.intro-header:nth-child(1) { transition-delay: 200ms; }
.intro-header:nth-child(2) { transition-delay: 400ms; }
.intro-header:nth-child(3) { transition-delay: 600ms; }

/* Section Settings */
/*section { }*/
section.full-height { min-height: 100vh; }
section.half-height { min-height: 50vh; }

/* Page Sections */
/* Home */
#intro h1 { background-image: linear-gradient(90deg, rgb(167, 0, 0), rgb(255, 187, 0)); background-clip: text; -webkit-background-clip: text; color: transparent; transition: 1s; }
.info { text-align: center; width: 80%; margin: 0 auto; }

/* Exotics & Restoration */
/*
#exotics { background-color: #673ab7; }
#restoration { background-color: #4caf50; }
*/
.projects { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px; margin: 0 10px; }
.project-preview { width: 100%; height: 250px; object-fit: cover; }

/* Projects */
.project-feature { text-align: center; padding: 0 10px; }
.project-feature img { width: 920px; max-width: 100%; height: auto; }

/* Kustom Kolors */
#kustom-colors { background-color: #e91e63; }

/* Performance */
/*#performance { background-color: #9c27b0; }

/* About */
/* #about { background-color: #f44336; } */
.container-about { text-align: left; padding: 10px 30px; font-size: 1rem; }
.container-about img { float: left; margin: 0 20px 20px 0; width: 50%; height: auto; }

/* Contact */
/* #contact { background-color: #130fec; } */
#contact a:any-link { color: #ffffff; }

footer { border-top: 10px solid #d35400; font-size: 0.8rem; }
footer a:any-link { color: #ffffff; }
footer img { max-width: 300px; height: auto; }

@media only screen and (max-width: 850px) {
    /* Nav */
    .anchors { display: block; width: 90%; right: 10px; left: 10px; }
    #nav-desktop { display: none; }
    #nav-responsive { display: flex; justify-content: space-between; width: 100%; }
    #nav-responsive-options { justify-content: center; width: 100%; }
    #nav-responsive-options ul li { display: block; padding: 25px 0 0 0; }
    #nav-toggle { padding: 25px; cursor: pointer; }
    .logo-link { padding: 5px 0 0 15px; }

    /* General Classes */
    section { font-size: 0.8rem; }
    h1 { font-size: 3rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    .btn { padding: 10px; font-size: 1rem; margin: 8px; }
    .btn-primary { border-radius: 4px; background-color:#d35400; border: none; padding: 20px; transition: all 0.5s; display: block; margin: 10px auto; }

    /* Page Sections */
    
    /* About */
    .container-about { font-size: 0.8rem; }
    .container-about img { float: none; margin: 10px 0; width: 100%; height: auto; }
}