@font-face {
    font-family: 'Gandhi Serif';
    src: url('font/GandhiSerif-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Questa Light', sans-serif;
    color: #003e32;
}

.title h1{
    font-size: 4em;
}

.title-container {
    height: 100vh;
    position: relative;
    background-image: url('../img/welderworking.jpeg');
    background-size: cover;
    background-position: center;

}

.title-gallery-container{
    height: 70vh;
    padding-bottom: 82px; /* Add padding equal to the navbar height */
    position: relative;
    background-image: url('../img/welderworking.jpeg');
    background-size: cover;
    background-position: center;

    
}




.title-container .row {
    position: relative;
}

.content-container{
    margin-top: 130px;
}

.content-container h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
}


.navbar-logo {
    height: 56px; /* Match the default height of the Bootstrap navbar */
    object-fit: contain; /* Ensure the image scales properly */
}

.btn-primary{
    background-color: #6cb3ff;
    border-color: #6cb3ff;
    border-radius: 25px;
    color: #446a75
}
.btn-primary:hover{
    background-color: #9ecdff;
    border-color: #9ecdff;
    color: #446a75

}

.onze-diensten{
    background-color: #d2f0f2;
}

.contacteer-ons{
    background-color: #d4f1e9
}

.who-we-are{
    background-color: #d2f0f2;
}




.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #003e32; /* Dark green background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.back-to-top img {
    width: 24px;
    height: 24px;
    filter: invert(1); /* Makes the arrow white */

}

.back-to-top:hover {
    background-color: #005f46; /* Slightly lighter green on hover */
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}
.bi-arrow-up{
    color: #ffffff;
}
.img-footer{
    height: 90px;
    max-width: auto;
}

.parallax {
    background-image: url('../img/project_img.jpg'); /* Replace with your image path */
    min-height: 600px; /* Adjust height as needed */
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.onze-technieken .card, .material img{
    transition: transform 0.5s ease; /* Slows down the scaling effect */
}

.onze-technieken .card:hover,  .material img:hover{
    transform: scale(1.05); /* Scale up on hover */
}

.material-container{
    transition: transform 0.5s ease; /* Slows down the scaling effect */
}

.material-container:hover{
    transform: scale(1.05); /* Scale up on hover */
}


.letter {
    display: inline-block; /* Ensure each letter is treated as a block for animation */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth rotation and fade */
    opacity: 1;
}

.letter.hidden {
    opacity: 0;
    transform: rotateX(90deg); /* Rotate out */
}

.letter.visible {
    opacity: 1;
    transform: rotateX(0deg); /* Rotate in */
}

/* Initial state: hidden */
.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Slightly move down */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

/* When the element is visible */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
}

.fade-in-right{
    opacity: 0;
    transform: translateX(50px); /* Slightly move right */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

.fade-in-right.visible{
    opacity: 1;
    transform: translateX(0); /* Move to original position */
}

.fade-in-left{
    opacity: 0;
    transform: translateX(-50px); /* Slightly move right */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

.fade-in-left.visible{
    opacity: 1;
    transform: translateX(0); /* Move to original position */
}

/* Initial state for the sliding animation */
.slide-in-left {
    transform: translateX(-100%); /* Start off-screen to the left */
    opacity: 0; /* Start invisible */
    animation: slideInLeft 1s ease-out forwards; /* Apply the animation */
}

/* Keyframes for the sliding animation */
@keyframes slideInLeft {
    0% {
        transform: translateX(-50%); /* Start off-screen to the left */
        opacity: 0; /* Invisible */
    }
    100% {
        transform: translateX(0); /* End at the original position */
        opacity: 1; /* Fully visible */
    }
}

/* Initial state for the sliding animation */
.slide-in-right {
    transform: translateX(+100%); /* Start off-screen to the left */
    opacity: 0; /* Start invisible */
    animation: slideInRight 1s ease-out forwards; /* Apply the animation */
}

/* Keyframes for the sliding animation */
@keyframes slideInRight {
    0% {
        transform: translateX(20%); /* Start off-screen to the left */
        opacity: 0; /* Invisible */
    }
    100% {
        transform: translateX(0); /* End at the original position */
        opacity: 1; /* Fully visible */
    }
}


.material-container {
    position: relative;
    text-align: center;
}

.material-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.material-container h3 {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 62, 50, 0.8); /* Dark green background with transparency */
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 0px;
    font-size: 1.2rem;
    font-weight: bold;
}

.material-container p {
    position: absolute;
    top: 10px;
    margin-top: 50px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 62, 50, 0.413); /* Dark green background with transparency */
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 0px;
    font-size: 1rem;
}

.row-margin{
    margin-top: 100px; 
    margin-bottom: 100px; 
}

.img-container {
    margin: 5px;
    padding: 0px;
}
.img-container img{
    border-radius: 20px;
}

.img-wider{
    max-height: 100%;
    max-width:auto;
}

.img-section-row{
    min-height: 90vh;
}

.img-section-row img:hover{
    transform: scale(1.05);
    transition: transform 0.5s ease-in-out; /* Slows down the scaling effect */

}