/* variables */
:root {
    --text: #0e1210;
    --text-light: #f5f7f6;
    --background: #f5f7f6;
    --background-contrast: #e1e8e5;
    --background-contrast-dark: var(--primary);
    --primary: #1b6d41;
    --primary-rgb: 27, 109, 65;
    --primary-light: #89bda3;
    --primary-lightest: #a9c9b9;
    --secondary: #b4b7c4;
    --accent: #c93c4b;


    --font-base: sans-serif;
    --box-shadow: 0px 15px 25px rgba(0,0,0,0.15);
    --transition: all 0.5s ease;
}

/* variables dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --text: #0e1210;
        --background: #f5f7f6;
        --background-contrast: #f2f2f2;
        --background-contrast-dark: var(--primary);
        --primary: #1b6d41;
        --primary-light: #89bda3;
        --primary-lightest: #a9c9b9;
        --secondary: #b4b7c4;
        --accent: #c93c4b;
    }
}

/* reset and base and helper */
html, body {
    position: relative;
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: var(--font-base);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--text);
}
h1 {
    word-wrap: break-word;  /* This breaks long words */
    overflow-wrap: break-word;  /* Ensures it works across browsers */
}
a {
    text-decoration: none;
    color: var(--primary);
    transition: var(--transition);
}
a:hover {
    color: var(--primary-light);
}
img{
    max-width: 100%;
    height: auto;
}
.section-padding {
    padding-top: 140px;
    padding-bottom: 140px;
}
.light-text {
    color: var(--text-light);
}
.primary-text {
    color: var(--primary);
}
.contrast-bg-light {
    background-color: var(--background-contrast);
}
.contrast-bg-dark {
    background-color: var(--background-contrast-dark);
}

.hide {
    display: none;
}


/* nav bar navbar */
.navbar {
    box-shadow: var(--box-shadow);
}
.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--text);
    transition: font-size 0.3s ease, text-shadow 0.3s ease;
}
.navbar-nav .nav-link:hover {
    font-size: 1.1rem;
}
.navbar-nav .nav-link.active {
    color: var(--accent);
    font-size: 1.1rem; /* Slightly increase the font size */
    transition: font-size 0.5s ease, box-shadow 0.5s ease; /* Smooth transition */
    text-shadow: 0 0 2px var(--accent);
}


.navbar-brand img {
    max-width: 300px; /* Adjust this value as needed */
    height: auto; /* Maintain the aspect ratio */
}
.svg-logo {
    max-width: 300px; /* Set the maximum width */
    height: auto;    /* Maintain the aspect ratio */
    display: block;  /* Ensure the SVG scales properly */
}
svg path {
    stroke: var(--text); /* Change the stroke color */
}
svg text {
    fill: var(--text); /* Change the text color */
}
.svg-light path {
    stroke: var(--primary-light); /* Change the stroke color */
}
.svg-light text {
    fill: var(--primary-light); /* Change the text color */
}

/* button btn */
.btn {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 0;
    padding: 10px 24px;
}
.btn-brand {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-light);
}
.btn-brand:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--text-light);
}
.btn-call-to-action {
    margin-top: 30px;
}
.btn-call-to-action:hover {
    color: var(--text);
    transform: scale(1.1);
    transition: var(--transition);
}
.btn-call-to-action:active {
    color: var(--accent);
}
.btn-call-to-action-light {
    color: var(--text-light);
    margin-top: 30px;
}
.btn-call-to-actio-light:hover {
    transform: scale(1.1);
    transition: var(--transition);
    color: var(--accent);
}





/* Image Zoom and style */
.image-zoom {
    position: relative;
    /* overflow: hidden; */
}
.image-zoom-wrapper {
    overflow: hidden;
    position: relative;
}
.image-zoom-wrapper img {
    transition: var(--transition)
}
.image-zoom:hover .image-zoom-wrapper img {
    transform: scale(1.1);
}

/* iconbox */
.iconbox {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:rgba(var(--primary-rgb), 0.2);
    color: var(--primary);
    font-size: 34px;
    flex: none;
}

/* Hero section */
#hero {
    /* #1b6d41 (primary to RGB(27, 109, 65) */
    background: linear-gradient(rgba(var(--primary-rgb), 0.507), rgba(0, 0, 0, 0.738)), url(../../assets/images/hero-mountain.webp);
    background-position: center;
    background-size: cover; 
}

#hero h1, #hero * h1, #hero h5, #hero * h5 {
    color: var(--text-light);
}


/* section title */
.section-title {
    margin-bottom: 60px;
}
.section-title .line {
    width: 60px;
    height: 4px;
    background-color: var(--primary);
    margin: 16px auto 24px auto;
}
.section-title p {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* About section */
.about .row {
    margin-top: 20px;
}

/* Align the image container to the right */
.about .col-md-6 {
    display: flex;
    justify-content: flex-end; /* Align content to the right */
    max-width: 90%;  /* Adjust the width to make the content smaller */
    margin: 0 auto;  /* Keep it centered */
}

/* Ensure the image stays responsive and aligned to the right */
.about img {
    max-width: 100%;  /* Ensure the image scales within its container */
    height: auto;
    object-fit: cover;  /* Ensure the image fills the space without distortion */
    border-radius: 20px;
}

/* Optional: Additional tweaks for small screen sizes */
@media (max-width: 767px) {
    .about .col-md-6 {
        text-align: center;
        justify-content: center;  /* Center the image horizontally */
        align-items: center;
        max-width: 100%;  /* Allow the columns to take full width on small screens */
        margin-bottom: 20px;  /* Add space between the image and text when stacked */
    }
}


/* Services Angebote section */ 
.service-card {
    background-color: var(--background);
    height: 300px;
    max-width: 300px;
    padding: 30px;
    border-radius: 20px;
    justify-self: center;
    margin-top: 40px;
}
.service-card strong, p {
    margin-top: 20px;
}
.service-card:hover {
    transform: scale(1.1);
    transition: var(--transition);
}
.collapsible-header {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1rem;
    background-color: var(--background);
    border: 1px solid var(--background);
    border-radius: 20px
}
.plus-icon {
    color: var(--accent);
    font-size: 2.5rem;
}


/* Bildungsurlaub education-days section */
#education-days {
    /* #1b6d41 (primary to RGB(27, 109, 65) */
    background: linear-gradient(rgba(var(--primary-rgb), 0.307), rgba(0, 0, 0, 0.538)), url(../../assets/images/hero-mountain-bildungsurlaub.webp);
    background-position: center;
    background-size: cover; 
}

#education-days h1, 
#education-days  * h1,
#education-days p, 
#education-days  h5, 
#education-days  * h5 {
    color: var(--text-light);
}


/* travel-overview section */ 
.travel-card {
    min-height: 840px;
    background-color: var(--background-contrast);
    max-width: 350px;
    padding: 20px;
    border-radius: 20px;
    justify-self: center;
    margin-top: 20px;
}
.travel-card-heading {
    text-align: center;
    margin-bottom: 20px;
}

.travel-card-description {

}

.travel-card-link{
    text-align: right;
}

.travel-card-keywords{
    margin-top: 40px;
    align-self: flex-end;
    text-align: right;
    font-style: italic;
}

.travel-card-info {
    display: flex;
    justify-content: flex-start;
    font-style: italic;
    font-size: 0.8em;
    margin-bottom: 20px;
}
.travel-card-info-text {
    display: inline-block;
    text-align: left;
}

.travel-card strong, p {
    margin-top: 20px;
}
.travel-card:hover {
    transform: scale(1.1);
    transition: var(--transition);
}

/* contact section */
#contact {
    position: relative;
    z-index: 2;
}
#contact::after {
    content: "";
    width: 100%;
    height: 70%;
    background: linear-gradient(rgba(var(--primary-rgb), 0.8), rgba(var(--primary-rgb), 0.8)), url(../../assets/images/hero-mountain.webp);
    background-position: center;
    background-size: cover; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#contact form {
    box-shadow: var(--box-shadow);
}
#contact .form-control {
    border-radius: 0;
}
#contact .form-control:focus {
    box-shadow: none;
    border-color: var(--primary);
}

/* Blog section */


/* Footer */
footer {
    padding-top: 120px;
}

.footer-top {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.3);
}
.footer-bottom {
    padding-top: 40px;
    padding-bottom: 40px;
}
#footer {
    color: var(--text-light);
}
footer li,
footer p,
footer a {
    color: var(--text-light);
}

footer ul {
    list-style: none;
    padding: 0;
}
footer .line {
    width: 40px;
    height: 4px;
    background-color: var(--primary);
    margin-top: 12px;
    margin-bottom: 24px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    border-radius: 100px;
}
.social-icons a:hover {
    background-color: var(--primary-light);
    color: var(--text-light);
}



/* adjust for smarthpone / small screens */
@media (max-width: 768px) {
    

    /* nav bar navbar - smarthpone / small screens */
    .navbar-brand img {
        max-width: 200px; /* Adjust this value as needed */
    }
    .svg-logo {
        max-width: 200px; /* Set the maximum width */
        height: auto;    /* Maintain the aspect ratio */
        display: block;  /* Ensure the SVG scales properly */
    }

    /* contact */
    #contact::after {
        background-position: top center;  /* Adjust the position of the background for smaller screens */
        background-size: 150%;  /* Scale up the background to cover more of the image */
    }

    /* Education days Bildungsurlaub section*/
    #education-days h1 {
        font-size: 2.1rem;
        margin-bottom: 50px;  
    }
    #education-days h5 {
        font-size: 1.2rem;
        margin-bottom: 50px; 
    }
    #education-days p {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    /* Blog */
    .blog-post {
        border-radius: 20px;
        padding: 40px 20px ;
        background-color: var(--background);
        margin-bottom: 20px;
    }
    .blog-post .image-zoom-wrapper {
        border-radius: 20px;
    }
}