/* General Styles */
body {
    font-family: Arial, sans-serif; 
    margin: 0;
    padding: 0;
    height: 100%;
   
    overflow-x: hidden;  /*Prevent horizontal scroll */
}

/* Footer Logo */
.footer-logo {
    width: 80px; /* Set the desired width */
    height: 80px; /* Set the height equal to the width */
    /*object-fit: cover; /* Ensures the image scales correctly without distortion */
   /* border-radius: 10px;  Optional: Add rounded corners */
  
}
@media (max-width: 768px) {
    .footer-logo {
        width: 70px; /* Smaller size for tablets */
        height: 70px;
      
    }}

@media (max-width: 576px) {
        .footer-logo {
            width: 60px; /* Even smaller size for mobile */
            height: 60px;
           }}

.container {
    
    margin-top: 10px;
    margin-bottom: 10px;
    text-shadow: #343a40;
    
   
}
.navbar-nav  li{
    padding-left: 20px;
    font-size:x-large;
    font-weight: 200px;
}

/* Hero Section */
.carousel-item {
    height: 88vh;
    background-size: cover;
    background-position: center;
}

.carousel-caption display-3 {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 10px;
    
}
.lead-c{
    font-size: 30px;
}
@media (max-width: 576px) {

}
/*
.desktop-image { 
    display: block;
}

.mobile-image {
    display: none;
}
@media screen and (max-width: 768px) {
    .desktop-image {
        display: none;
    }

    .mobile-image {
        display: block;
    }
}
*/
/*parallex img--------------------------------------------*/   
.bgimg-2 {
    background-image: url("img_parallax2.jpg");
    max-height: 250px;
    text-align: center;
    text-size-adjust: auto;
  /*  margin-top: 40px;*/
    margin:auto;
    padding: 100px;
    font-size: larger;
}
.fw-bold{
    font-size: 40px;
}
.bgimg-2-p{
    font-size: 30px;
}
@media (max-width: 576px) {
    .bgimg-2 {
    background-image: url("img_parallax2.jpg");
    max-height: 200px;
    text-align: center;
    text-size-adjust: auto;
    margin:auto;
    padding: 50px;
    font-size: larger;
}
.fw-bold{
    font-size: 30px;}
.bgimg-2-p{
        font-size: 20px;
    }}

    /* Turn off parallax scrolling for tablets and mobiles */
@media only screen and (max-width: 1024px) {
     .bgimg-2 {
        background-attachment: scroll;
    }
    
}
/*about us---------------------------------*/


#aboutTabsContent  p{
    font-size:20px;
    padding: 7px;
}
#aboutTabsContent h3{
    padding: 10px;
   
}
.list-unstyled{
    padding: 12px;
    font-size: 22px;
}
.img-fluid{
    height: 75vh;
    width: 60vh;
}
/* more service ------------------------------*/
/*.service-box  img{
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}*/
.more-services-btn{
        background: linear-gradient(to top right, #8d8f9c -5%, #6e8dbb 100%);
        border: none;
        color: #fff;
        padding: 10px 15px;
        width: 100%;
        max-width: 250px; /* Limits button size on larger screens */
        height: 50px; /* Sets fixed height */
        margin: 25px auto; /* Centers button horizontally */
        display: flex; /* Enables flexbox for centering text */
        align-items: center; /* Centers text vertically */
        justify-content: center; /* Centers text horizontally */
        border-radius: 20px;
        cursor: pointer;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 2px;
        text-transform: uppercase; /* Makes the text uppercase */
        transition: all 0.3s ease; /* Smooth transition for hover effects */
    }
    
    /* Hover effect for button and text */
    .more-services-btn:hover {
        background: linear-gradient(to top right, #00c3ff -5%, #c25151 100%);
        transform: scale(1.05); /* Slightly increases size */
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Adds shadow effect */
    }
    
    /* Hover effect for text */
    .more-services-btn:hover p {
        color: #ffffff; /* Changes text color on hover */
        transform: translateY(-2px); /* Slight upward movement of text */
    }
    
    /* Text inside the button */
    .more-services-btn p {
        margin: 0; /* Removes default margin */
        transition: all 0.3s ease; /* Smooth transition for text hover effects */
    }
    
    /* Mobile Responsiveness */
    @media (max-width: 768px) {
        .more-services-btn {
            font-size: 15px;
            height: 40px; /* Adjusts height for smaller screens */
            padding: 8px 12px;
            border-radius: 25px;
            max-width: 200px;
        }
    }
  /*services button---------------------------------------------------------------------------*/  
@media (max-width: 768px) {
    .img-fluid {
            width: 60vh; /* Smaller size for tablets */
            height: 75vh;
            padding-top: 25px;
               padding-left: 25px;
              /* padding-bottom: -85px;*/ 
    }
}
    
@media (max-width: 576px) {
            .img-fluid {
                width: 55vh; /* Even smaller size for mobile */
                height: 60vh;
               padding-top: 25px;
               padding-left: 15px;
               }
            #about-hide{
                content-visibility: hidden;
            }
            #mission-hide{
                content-visibility: hidden;

            }
        #our-vision{content-visibility: hidden;}
        #our-mission{content-visibility: hidden;}
    }
            

/* line scroll------------------------------------*/
#line-scroll {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3vh;
}

.scroll-line-container {
  width: 100%; /* Full width */
  overflow: hidden; /* Hide overflow content */
  position: relative;
  height: 70px; /* Height of the scrolling line */
  /*background-color: #282828;  Background of the line */
  background-image: url(parallex1.jpeg);
  display: flex;
  align-items: center;
}

.scroll-line {
  display: flex; /* Arrange items in a row */
  width: 200%; /* Twice the width for smooth looping */
  animation: scroll-horizontal 15s linear infinite; /* Controls the animation */
}

.service {
  white-space: nowrap; /* Prevent breaking of content */
  padding: 0 20px; /* Spacing between services */
  font-size: 25px; /* Text size */
  color: #f2f2f2; /* Text color */
  text-transform: capitalize; /* Capitalize text */
  font-weight: bold;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Keyframes for infinite scrolling */
@keyframes scroll-horizontal {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* Move by half of the content */
  }
}

/* Service -------------------------------------------------------------------- */
.service-box {
    padding: 30px;
    
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   
}

#services{margin-bottom: 10px;}

/* Contact Section */
#contact {
    background-color: #fff;
    position: relative;
    box-shadow: 20px 22px 44px #cccc;
    border-radius: 25px;

    margin-top: 40px;
}

/*btn class button */
.btn {
    background: linear-gradient(to top right, #8d8f9c -5%, #6e8dbb 100%);
    border: none;
    color: #fff;
    padding: 10px 15px;
    width: 100%;
    max-width: 200px; /* Limits button size on larger screens */
    height: 50px; /* Sets fixed height */
    margin: 25px auto; /* Centers button horizontally */
    display: flex; /* Enables flexbox for centering text */
    align-items: center; /* Centers text vertically */
    justify-content: center; /* Centers text horizontally */
    border-radius: 20px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase; /* Makes the text uppercase */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover effect for button and text */
.btn:hover {
    background: linear-gradient(to top right, #00c3ff -5%, #c25151 100%);
    transform: scale(1.05); /* Slightly increases size */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Adds shadow effect */
}

/* Hover effect for text */
.btn:hover p {
    color: #ffffff; /* Changes text color on hover */
    transform: translateY(-2px); /* Slight upward movement of text */
}

/* Text inside the button */
.btn p {
    margin: 0; /* Removes default margin */
    transition: all 0.3s ease; /* Smooth transition for text hover effects */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .btn {
        font-size: 16px;
        height: 40px; /* Adjusts height for smaller screens */
        padding: 8px 12px;
        border-radius: 25px;
    }
}

/* Button styling --------------------------------------------------------------------*/
.contact_form_submit {
    background: linear-gradient(to top right, #8d8f9c -5%, #6e8dbb 100%);
    border: none;
    color: #fff;
    padding: 10px 15px;
    width: 100%;
    max-width: 300px; /* Limits button size on larger screens */
    height: 50px; /* Sets fixed height */
    margin: 25px auto; /* Centers button horizontally */
    display: flex; /* Enables flexbox for centering text */
    align-items: center; /* Centers text vertically */
    justify-content: center; /* Centers text horizontally */
    border-radius: 35px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase; /* Makes the text uppercase */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover effect for button and text */
.contact_form_submit:hover {
    background: linear-gradient(to top right, #00c3ff -5%, #c25151 100%);
    transform: scale(1.05); /* Slightly increases size */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Adds shadow effect */
}

/* Hover effect for text */
.contact_form_submit:hover p {
    color: #ffffff; /* Changes text color on hover */
    transform: translateY(-2px); /* Slight upward movement of text */
}

/* Text inside the button */
.contact_form_submit p {
    margin: 0; /* Removes default margin */
    transition: all 0.3s ease; /* Smooth transition for text hover effects */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .contact_form_submit {
        font-size: 16px;
        height: 40px; /* Adjusts height for smaller screens */
        padding: 8px 12px;
        border-radius: 25px;
    }
}


/* Footer*/
.footer {
    background-color: #8f8f8f;
    color: #fff;
}

.footer p {
    margin-bottom: 0;
} 

/* Responsive Design */
@media (max-width: 768px) {
    .carousel-item {
        height: 60vh;
    }

    .carousel-caption h1 {
        font-size: 2rem;
    }

    .nav-tabs {
        flex-direction: column;
    }
}

/*footer */
/* Footer Styles */
.footer {
    background-color: #333; /* Light black background */
    color: #fff; /* White text */
    padding: 40px 20px; /* Add padding for spacing */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.footer:hover {
    background-color: #000; /* Dark black on hover */
}

/* Footer Text Styling */
.footer h5 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: #fff; /* White heading text */
}

.footer p {
    color: #ddd; /* Light gray text for better contrast */
    margin-bottom: 10px;
}

/* Footer Links Styling */
.footer a {
    color: #aaa; /* Light gray for links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #fff; /* Bright white on hover */
}





/*social icon start*/
/* Container for social icons */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 25px; /* Spacing between icons */
    
}

/* Style for the social media icons */
.social-icons a {
    font-size: 36px; /* Increased icon size */
    text-decoration: none; /* Remove underline */
    transition: transform 0.3s, color 0.3s; /* Smooth hover effect */
}

/* Facebook Icon Color */
.social-icons a i.fa-facebook {
    color: #1877F2; /* Facebook blue */
}

/* Twitter Icon Color */
.social-icons a i.fa-twitter {
    color: #1DA1F2; /* Twitter blue */
}

/* Instagram Icon Color */
.social-icons a i.bi-instagram {
    color: #E1306C; /* Instagram pink */
}

/* LinkedIn Icon Color */
.social-icons a i.bi-linkedin {
    color: #0077B5; /* LinkedIn blue */
}
/* WhatsApp Icon Color */
.social-icons a i.fa-whatsapp {
    color: #075E54 !important; /* WhatsApp green */
}

/* Hover Effect */
.social-icons a:hover {
    transform: scale(1.3); /* Slightly enlarge icon on hover */
}

/* Hover colors */
.social-icons a:hover i.fa-facebook {
    color: #0D5B96; /* Darker Facebook blue on hover */
}

.social-icons a:hover i.fa-twitter {
    color: #0D95D1; /* Darker Twitter blue on hover */
}

.social-icons a:hover i.bi-instagram {
    color: #9C2A53; /* Darker Instagram pink on hover */
}

.social-icons a:hover i.bi-linkedin {
    color: #005B8A; /* Darker LinkedIn blue on hover */
}
.social-icons a:hover i.fa-whatsapp {
    color: #075E54 !important; /* Darker WhatsApp green */
}


/* Responsive Design - Adjust icon size on smaller screens */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px; /* Reduce the gap between icons on smaller screens */
    }

    /* Reduce icon size on smaller screens */
    .social-icons a {
        font-size: 30px;
    }

    .social-icons a:hover {
        transform: scale(1.2); /* Slightly reduce hover effect on smaller screens */
    }
}

@media (max-width: 480px) {
    .social-icons {
        gap: 10px; /* Further reduce the gap between icons */
    }

    /* Further reduce icon size on mobile devices */
    .social-icons a {
        font-size: 26px;
    }
}

/* Copyright Section */
.footer .copyright {
    margin-top: 20px;
    font-size: 0.875rem;
    color: #bbb; /* Light gray text */
    text-align: center;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .footer {
        text-align: center; /* Center-align for smaller screens */
    }
}


/* Canvas Styling for Liquid Cursor 
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensure it doesn't block page interactions */
   /* z-index: 9999; /* Layer on top of other elements 
}
*/
/*image round curver*/
/* alle kinderen hebben een index */

:nth-child(1) { --i:1; }
:nth-child(2) { --i:2; }
:nth-child(3) { --i:3; }
:nth-child(4) { --i:4; }
:nth-child(5) { --i:5; }
:nth-child(6) { --i:6; }
:nth-child(7) { --i:7; }
:nth-child(8) { --i:8; }
:nth-child(9) { --i:9; }
:nth-child(10) { --i:10; }





/**************/
/* DE SECTION */
/**************/

.gallery {
   
	height:500px;
    margin: 0;
	display:grid;
	place-items:center;
    background: url('parallex1.jpeg') no-repeat center center/cover;
    padding-top: 10px ;
    padding-bottom: 5px;

}




/**********************/
/* DE LIJST MET ITEMS */
/*   DE 3D OMGEVING   */
/**********************/

.imageul ul {
	/* settings voor de carrousel */
	/* die zou je allemaal met CSS kunnen animeren */
	/* en/of aanpassen met JS */
	
	--n:10; /* aantal items */
	
	--duration:60s;
	
	--caro-tiltZ:2deg;
	--caro-tiltX:2deg;
	
	--caro-max-radius:28em;
	--caro-radius:min( 40vw, var(--caro-max-radius) );
	--caro-omtrek:calc( 2 * pi * var(--caro-radius) );
	
	/* maat van item berekenen adhv aantal items en omtrek */
	--item-size-bruto:calc( var(--caro-omtrek) / var(--n) );
	/* rekening houden met spacing */
	--item-spacing:.4; /* .5 voor helft van een item */
	--item-size-netto:calc( var(--item-size-bruto) / (1 + var(--item-spacing)) );
	
	--item-tiltX:2deg;
	
	/* basics */
	margin:0;
	padding:0;
	list-style-type:"";
	
	/* om de li's op elkaar in 1 gridcel te zetten */
	display:grid;
	
	/* 3D omgeving */
	perspective:100vw;
	transform-style:preserve-3d;
}




/************/
/* EEN ITEM */
/************/

 li {
	/* delay berekenen op basis van aantal items en duration */
	--delay:calc( var(--duration) / var(--n) * var(--i) - var(--duration) );
	
	/* alle li's staan op elkaar in de eerste (dezelfde) gridcel */
	/* dan kunnen ze van daaruit animeren */
	grid-area:1/1;
	
	width:var(--item-size-netto);
	
	transform:
		rotateZ( var(--caro-tiltZ) )
		rotateX( var(--caro-tiltX) )
		rotateY( var(--item-rotateY) )
		translateZ( var(--caro-radius) )
		rotateX( var(--item-tiltX) );
	
	animation:
		item-rotateY var(--duration) var(--delay) infinite linear;
}

/* een custom property kun je alleen animeren als de browser weet wat voor type property het is */
@keyframes item-rotateY {
	100% {
		--item-rotateY:360deg;
	}
}

/* dat doe je door de custom property aan te melden met @property */
@property --item-rotateY {
	syntax:"<angle>";
	inherits:true;
	initial-value:0deg;
}




/*****************/
/* DE AFBEELDING */
/*****************/

img {
	width:100%;
    height: 200px;
    
	/* bonus: tranparante fade 
	mask:linear-gradient(deg, transparent, red);*/
}
@media (max-width: 768px) {
    .imageul img{

            width:130%;
            height: 200px;
    }
    .imageul ul{
        --caro-max-radius:28em;
	--caro-radius:min( 38vw, var(--caro-max-radius) );
	--caro-omtrek:calc( 2 * pi * var(--caro-radius) );
    }
}