/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure at least viewport height */
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='91.767' height='80' patternTransform='scale(10) rotate(180)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(205, 0%, 100%, 1)'/><path d='M77.439 0c.478.2.95.41 1.435.627 3.006 1.34 6.41 2.857 12.887 2.857V0ZM45.88 3.484c6.478 0 9.884-1.517 12.89-2.857C59.253.41 59.725.2 60.204 0H31.558c.478.2.95.41 1.435.627 3.005 1.34 6.412 2.857 12.887 2.857Zm27.258 40.779c-2.713 1.21-5.058 2.253-10.051 2.253-4.996 0-7.34-1.043-10.055-2.253-3.005-1.338-6.412-2.857-12.887-2.857-6.474 0-9.881 1.519-12.887 2.857-2.715 1.21-5.058 2.253-10.054 2.253-4.993 0-7.336-1.043-10.05-2.253-1.965-.876-4.102-1.825-7.153-2.38v7.127c1.616.415 2.919.994 4.317 1.618 3.006 1.338 6.413 2.854 12.887 2.854 6.478 0 9.884-1.517 12.89-2.854 2.712-1.21 5.057-2.255 10.05-2.255 4.996 0 7.34 1.046 10.055 2.255 3.005 1.338 6.41 2.854 12.887 2.854 6.474 0 9.881-1.517 12.887-2.854 2.715-1.21 5.058-2.255 10.05-2.255 2.418 0 4.216.245 5.737.637v-7.127c-1.618-.293-3.493-.477-5.736-.477-6.475 0-9.882 1.519-12.887 2.857zm-5.734 10c-2.715 1.21-5.058 2.253-10.054 2.253-4.993 0-7.337-1.043-10.051-2.253-3.006-1.338-6.413-2.857-12.887-2.857-6.478 0-9.882 1.52-12.89 2.857-2.712 1.21-5.057 2.253-10.05 2.253-4.994 0-7.34-1.043-10.052-2.253-.46-.205-.929-.413-1.419-.62v7.606c2.703 1.145 5.985 2.234 11.47 2.234 6.475 0 9.882-1.516 12.888-2.854 2.715-1.21 5.058-2.255 10.054-2.255 4.993 0 7.337 1.045 10.05 2.255 3.006 1.338 6.413 2.854 12.888 2.854 6.477 0 9.882-1.516 12.887-2.854 2.715-1.21 5.058-2.255 10.054-2.255 4.993 0 7.339 1.045 10.051 2.255.46.205.931.413 1.42.62v-7.606c-2.704-1.147-5.985-2.237-11.471-2.237-6.479 0-9.883 1.52-12.888 2.857zm7.153 7.144c-6.477 0-9.884 1.519-12.889 2.857-2.712 1.21-5.058 2.253-10.051 2.253-4.996 0-7.339-1.043-10.054-2.253-3.005-1.338-6.41-2.857-12.887-2.857-6.475 0-9.882 1.519-12.887 2.857-2.715 1.21-5.058 2.253-10.051 2.253-2.42 0-4.218-.244-5.737-.637v7.128c1.618.294 3.492.475 5.737.475 6.474 0 9.881-1.517 12.887-2.857 2.712-1.207 5.058-2.253 10.05-2.253 4.997 0 7.34 1.046 10.055 2.253 3.005 1.34 6.412 2.857 12.887 2.857 6.475 0 9.882-1.517 12.887-2.857 2.715-1.207 5.058-2.253 10.054-2.253 4.993 0 7.336 1.046 10.051 2.253 1.965.876 4.101 1.828 7.153 2.38V65.88c-1.616-.413-2.919-.991-4.317-1.616-3.006-1.337-6.413-2.856-12.888-2.856zm-5.737 10c-6.474 0-9.881 1.517-12.887 2.857-2.714 1.21-5.058 2.252-10.05 2.252-4.996 0-7.34-1.043-10.055-2.253-3.005-1.34-6.412-2.857-12.887-2.857-6.477 0-9.882 1.517-12.887 2.857C7.34 75.474 4.997 76.516.001 76.516V80h14.326c2.2-.922 4.513-1.626 8.614-1.626 4.1 0 6.414.703 8.612 1.626h28.656c2.197-.922 4.512-1.626 8.611-1.626 4.101 0 6.415.703 8.614 1.626h14.327v-3.484c-4.996 0-7.34-1.043-10.055-2.253-3.004-1.34-6.408-2.856-12.886-2.856zm7.154-67.142c-3.006-1.34-6.413-2.857-12.887-2.857-6.478 0-9.882 1.517-12.887 2.857-2.716 1.208-5.059 2.253-10.055 2.253-4.993 0-7.338-1.045-10.05-2.253-3.006-1.34-6.413-2.857-12.89-2.857-6.474 0-9.881 1.517-12.887 2.857-1.398.622-2.7 1.202-4.317 1.615v7.128c3.051-.554 5.188-1.505 7.153-2.38 2.715-1.21 5.058-2.254 10.051-2.254 4.995 0 7.34 1.044 10.054 2.253 3.006 1.34 6.413 2.857 12.887 2.857 6.475 0 9.882-1.517 12.887-2.857 2.716-1.21 5.059-2.253 10.055-2.253 4.993 0 7.336 1.044 10.05 2.253 3.006 1.34 6.413 2.857 12.888 2.857 2.245 0 4.12-.18 5.736-.475V5.88c-1.52.39-3.319.637-5.736.637-4.994-.001-7.337-1.046-10.052-2.253Zm4.317 12.252c-4.995 0-7.339-1.045-10.054-2.253-3.005-1.34-6.41-2.857-12.887-2.857-6.475 0-9.882 1.517-12.887 2.857-2.715 1.208-5.058 2.253-10.051 2.253-4.995 0-7.34-1.045-10.054-2.253-3.006-1.34-6.413-2.857-12.887-2.857-5.486 0-8.767 1.09-11.471 2.237v7.604c.488-.207.959-.415 1.42-.62 2.712-1.21 5.057-2.253 10.05-2.253 4.994 0 7.34 1.043 10.052 2.253 3.007 1.338 6.412 2.857 12.889 2.857 6.474 0 9.881-1.52 12.887-2.857 2.715-1.21 5.058-2.253 10.05-2.253 4.996 0 7.34 1.043 10.055 2.253 3.005 1.338 6.412 2.857 12.887 2.857 5.485 0 8.767-1.09 11.47-2.237v-7.606c-.488.207-.958.416-1.419.622-2.711 1.208-5.057 2.253-10.05 2.253zm-5.734 10c-4.996 0-7.339-1.044-10.054-2.254-3.005-1.338-6.412-2.854-12.887-2.854-6.475 0-9.882 1.517-12.887 2.854-2.715 1.21-5.058 2.255-10.054 2.255-4.993 0-7.339-1.045-10.051-2.255-3.005-1.338-6.413-2.854-12.887-2.854-2.244 0-4.118.18-5.737.476v7.128c1.519-.393 3.316-.637 5.737-.637 4.993 0 7.337 1.044 10.05 2.253 3.006 1.338 6.413 2.857 12.888 2.857 6.477 0 9.882-1.519 12.887-2.857 2.715-1.21 5.058-2.253 10.054-2.253 4.993 0 7.339 1.044 10.051 2.253 3.005 1.338 6.413 2.857 12.89 2.857 6.474 0 9.881-1.519 12.886-2.857 1.398-.625 2.701-1.203 4.318-1.616v-7.128c-3.052.553-5.189 1.503-7.154 2.379-2.714 1.209-5.057 2.254-10.05 2.254zM68.82 36.519c-4.993 0-7.338-1.045-10.05-2.255-3.006-1.338-6.413-2.854-12.89-2.854-6.474 0-9.882 1.516-12.887 2.854-2.712 1.21-5.058 2.255-10.051 2.255-4.996 0-7.339-1.045-10.054-2.255C9.883 32.925 6.476 31.41.001 31.41v6.968c4.996 0 7.339 1.043 10.054 2.253 3.005 1.338 6.41 2.857 12.887 2.857 6.475 0 9.882-1.52 12.887-2.857 2.715-1.21 5.058-2.253 10.051-2.253 4.996 0 7.34 1.043 10.054 2.253 3.006 1.338 6.413 2.857 12.887 2.857 6.478 0 9.882-1.52 12.887-2.857 2.716-1.21 5.059-2.253 10.054-2.253v-6.968c-6.477 0-9.881 1.516-12.887 2.854-2.716 1.21-5.059 2.255-10.055 2.255zM14.324 0H0v3.484c6.477 0 9.882-1.517 12.887-2.857.485-.215.959-.427 1.436-.627Z'  stroke-width='9' stroke='none' fill='hsla(206, 0%, 96%, 0.75)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

header {
    background: #a0a0a0;
    color: #fff;
    padding: 1em;
    text-align: center;
}
header img {
    height: 160px;
    vertical-align: middle;
}

#header img {
    width:1000px;
    max-width: 100%;
    height: auto;
    display: block; 
    margin: 0 auto; 
}


nav {
    background: linear-gradient(90deg, #a0a0a0, #181818, #a0a0a0);
    padding: 10px 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-li .active-page {
    color: #E6E6E6;
    text-shadow: 1px 1px #333333;
    background-image: linear-gradient(#6190DF, #2B68D2);
  }

nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0 10px; 
    position: relative;
}

nav ul li:not(:last-child):after {
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: white;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.active-page {
    color: #E6E6E6;
    text-shadow: 1px 1px #333333;
    background-image: linear-gradient(#6190DF, #2B68D2);
    border-radius: 3px;
  }

main {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

section {
    margin-bottom: 2em;
}

/* slideshow? */

.slideshow-container {
    /* display: flex; */
    width:100%;
    max-width: 95%; 
    height: 400px; 
    border-radius: 8px;
    border-top: 2px solid #C2C2C2;
    border-bottom: 2px solid #C2C2C2;
    background-color: rgba(29, 29, 29, 0.75);
    backdrop-filter: blur(1.5px);
    margin-top: 1em;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none; 
	scrollbar-width: none;
}

.slide {
    box-sizing: border-box;
    border-radius: 14px;
    scroll-snap-align: center;
    width:100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.slide-image {
    border-right:2px solid #C2C2C2;
    border-left:2px solid #C2C2C2;
    flex: 1;
    max-width: 50%; /* Ensure image takes half of the slide */
    height: 100%; /* Ensures images fill the slide */
    /* overflow: hidden; */
}

.slide-image img {
    width: 100%; /* Ensures image fills its container */
    height: 100%; /* Maintains aspect ratio */
    display: block;
    object-fit: cover; /* Scales the image proportionally to cover the entire container */
}

.slide-text {
    border-right: 2px solid #C2C2C2;
    color: white;
    flex: 1;
    padding: 0 20px; /* Adjust padding around text */
    max-width: 50%;
    height: 100%; /* Ensures text boxes fill the slide */
    /* overflow: hidden; */
}

.slide-text h2 {
    font-size: 2.5rem; /* Adjust heading size */
    margin-bottom: 10px;
}

.slide-text p {
    font-size: 1.5rem; /* Adjust paragraph text size */
}

#small-boxes {
    display: flex;
    /* justify-content: space-between; */
    justify-content: center space-between;
    max-width: 98.5%;
}

.box {
    flex: 1;
    background: rgba(190, 190, 190, 0.5);
    backdrop-filter: blur(1px);
    padding: 10px;
    margin: 15px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
    text-align: left;
    border: 1px solid #C2C2C2;
    max-width: 90%;
}

p a {
    text-decoration: none;
    color:steelblue;

}

.box h3 {
    margin-top: 0;
    text-decoration: none;
}

#contact-wrapper {
    display: flex;
    justify-content: center; 
    width: 100%;
}

#contact {
    width:50%;
}

#about-page {
    display: flex;
    justify-content: center;
    margin-inline: 300px;
}

#services-page {
    margin-inline: 300px;
}


@media (max-width: 1750px) {
    #about-page {
        margin-inline: 200px;
    }
    #services-page {
        margin-inline: 100px;
    }
}

@media (max-width: 1000px) {
    .slide-text h2 {
        font-size: 1.5em;
    }
    .slide-text p {
        font-size: 1.2em;
    }
    #about-page {
        margin-inline: 50px;
    }
    #services-page {
        margin-inline: 0px;
    }
}

@media (max-width: 768px) {
    .slide-text h2 {
        font-size: 1.2em;
    }
    .slide-text p {
        font-size: 0.9em;
    }
    #small-boxes {
        flex-direction: column; 
    }

    .box {
        flex: 1 0 auto; 
        width: 95%; 
    }
    #about-page {
        margin-inline: 0px;
    }
}

@media (max-width: 450px) {
    .slide-text h2 {
        font-size: 0.9em;
    }
    .slide-text p {
        font-size: 0.7em;
    }
    .navbar-ul {
        font-size: small;
    }
    nav {
        padding: 5px 0;
    }
    nav ul li {
        padding: 0 5px; 
    }
    .active-page {
        padding: 5px 5px; 
    }
    nav ul li a {
        padding: 5px 7.5px;
    }
}


@media (max-width: 345px) {
    .navbar-ul {
        font-size: xx-small;
    }
    nav {
        padding: 2px 0;
    }
    nav ul li {
        padding: 0 2px; 
    }
    .active-page {
        padding: 2px 2px; 
    }
    nav ul li a {
        padding: 2px 3px;
    }
}



footer {
    background: linear-gradient(135deg, #222222, #181818, #222222);
    color: #fff;
    text-align: center;
    padding: 1em;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto; /* Push footer to bottom */
}

.wrapper {
    flex: 1; /* Take up remaining vertical space */
    display: flex;
    flex-direction: column;
}


/*SCROLLBAR OF WEBSITE
  /* Width */
  ::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #181818;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }