/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/* Use Karla for body text */
body {
    font-family: 'Karla', Arial, sans-serif;
}

/* Use Montserrat for all headings */
h1, h2, h3, h4, h5, h6,
.text-lg, .text-medium, .text-uppercase {
    font-family: 'Montserrat', Arial, sans-serif;
}

body section h2.text-medium { font-size: 40px !important;}

/* Language Switcher Styles */
#lang-switcher {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 9999;
    background: #182a3b;
    padding: 8px 18px;
    border-radius: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    user-select: none;
}
#lang-switcher a {
    color: #fff;
    text-decoration: none;
    margin: 0 2px;
    font-weight: 700;
    transition: color 0.2s;
}
#lang-switcher a.active,
#lang-switcher a:hover {
    color: #e19f1f;
    text-decoration: underline;
}


.hero-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
}
.hero-logo:hover {
    transform: scale(1.01) !important;
}

#section3,
#section4 {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

#scrollTop:after, #scrollTop:before,
#dotsMenu ul li:hover,
#dotsMenu ul li.current {
    background-color: #e19f1f !important;
}

#gpx-map-wrapper {
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#map { height: 400px; }
#elevation-chart { height: 200px; }
@media (max-width:768px){
  #map { height: 300px; }
  #elevation-chart { height: 150px; }
}