/* Reset some default margins/padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
    height: auto;
    overflow-y: auto; /* Enable vertical scrolling if needed */
    scroll-behavior: smooth;   /* optional smooth scrolling */
}

.overlay             { min-height: 100%; display: flex; flex-direction: column; }
main                 { flex: 1 0 auto; }   /* grows to fill, pushes footer down */
footer               { flex-shrink: 0; }

@font-face {
    font-family: 'Futura';
    src: url('/static/fonts/Futura-Book-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('/static/fonts/futur.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Phenomena';
    src: url('/static/fonts/Phenomena-Bold.otf')format('opentype');
    font-weight: normal;
    font-style: normal;
}


body {
  background: url("/static/images/cover.png") no-repeat center center fixed;
  background-size: cover;
  font-family: "Futura";
  color: #000;
}


.overlay{
  background-color: rgba(255, 255, 255, 0.8);
  min-height: 100vh;
  flex: 1;
}

header {
  justify-content: center;
  align-items: center;
  padding: 0;
}

/************************************
  CUSTOM NAVBAR OVERRIDES
*************************************/
.custom-blur-navbar {
  background-color: rgba(255, 255, 255, 0.4) !important; /* Transparent background */
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
  position: fixed !important;
  width: 100%;
  z-index: 1050; /* Ensure it's above other content */
}

/* Brand link styling */
.navbar .navbar-brand {
  color: #333 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  text-decoration: none;
}

/* Brand hover */
.navbar .navbar-brand:hover {
  color: #e60000 !important;
  text-decoration: none !important;
}

/* Nav links */
.navbar .nav-link {
  color: #555 !important;        /* normal text color */
  font-weight: 600 !important;   /* semi-bold weight */
  padding: 0.75rem 1rem !important;
  transition: color 0.3s, background-color 0.3s;
}

/* Nav link hover */
.navbar .nav-link:hover {
  color: #fff !important;
  background-color: #e60000 !important;
  border-radius: 4px;
  text-decoration: none !important;
}

/* Adjust navbar-toggler icon color if desired */
.navbar .navbar-toggler {
  border-color: #ccc !important;

}
.navbar .navbar-toggler-icon {
  /* By default it's a dark or light icon depending on .navbar-light / .navbar-dark */
  /* If you want your own color, you can override via an SVG or filter. Example: */
  filter: invert(50%);
}

/* Adjust spacing on small screens if needed */
@media (max-width: 767px) {
  .navbar .nav-link {
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
  }
}



/* Main content area (centered text, some padding) */
main {
  text-align: center; /* So headings & logo appear centered */
  padding: 40px;
  min-height: 400px;  /* Just to give some vertical space */
  flex: 1;
}

.home-content{
  margin-top: 150px;
  text-align: left;
}

/* Footer styling: Red bar with white text */
footer {
  bottom: 0;
  width: 100%;
  background-color: #ff0000; /* Red footer */
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Simple utility classes */
.container-fluid img {
  width: 120px; /* Adjust as needed */
  height: auto;
  border-radius: 100px;
}

.footer-content{
  margin-bottom: 10px;
}

.partner_logos{
  background-color: rgba(255, 255, 255, 0.8);
  align-items: center;    /* Vertically align them if needed */
}

.logo-linkedin       { height: 80px; transition: transform .2s ease; }
.logo-linkedin:hover { transform: scale(1.06); }

.linkedin-heading    { margin-top: 1.5rem; font-size: 1.1rem; }

.logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d9d9d9;      /* light grey */
  border-radius: 26px;
  padding: 1.5rem 2.75rem;  /* same “breathing room” as the others */
  margin: 0.5rem;
}

.imi:link, .ccc:link, .wika:link, .thomassen:link{
    background-color: #dddddd;
    color: black;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 25px;
}

.imi:hover, .ccc:hover, .wika:hover, .thomassen:hover{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  transition: 0.5s;
}

.logo_imi, .logo_ccc, .logo_thomassen, .logo_wika {
  width: 250px;   /* or whatever size you want */
  height: 120px;   /* keeps the original aspect ratio */
  border-radius: 25px;
  overflow: hidden;
  position: relative;
}

.logo_dmsa{
  width: 120px;   /* or whatever size you want */
  height: auto;   /* keeps the original aspect ratio */
  border-radius: 25px;
  overflow: hidden;
  position: relative;
}
.thomassen img{
    height: 120px;
    width: 220px;
    object-fit: cover;
}

.carousel-item img {
      width: 100%;
      height: 550px;
      object-fit: cover;
      border-radius: 25px;
}
.carousel slide{
    border-radius: 20px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.carousel-item{
    transition: 1s;
    border-radius: 25px;
}

.carousel-caption h5{
  font-size: 3rem;
  text-align: left; /* Change to left or right if desired */
  font-family: 'Futura', sans-serif;
  font-weight: bold;
  color:#FFD700; /* Change text color */
  margin: 0; /* Optional: adjust spacing */
}

.carousel-caption p{
    font-size: 2rem;
    text-align: left;
    font-family: 'Futura', sans-serif;
    color:#FFD700;
}

/* Container for the products section */
.home-content2 {
  /* Use column-direction flex or simply rely on block layout */
  display: flex;
  flex-direction: column;
  /* Center contents horizontally if you want, or use align-items: start */
  align-items: center;
  margin-top:25px;

  padding: 50px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 25px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10.1px);
  transition: 1s;
  box-sizing: border-box;
}

.home-content2:hover {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10.1px);
  transform: scale(1.01);
  transition: 1s;
  border-radius: 25px;
}

/* Heading style */
.product-title {
  font-size: 2rem;
  color: black;
  font-family: "Futura";
  font-weight: bold;
  margin-bottom: 20px; /* space below heading */
  transform: none;     /* remove translateY if you like */
}

/* Wrapper around the list + "View More" button */
.product-buttons {
  display: flex;
  flex-direction: column; /* stack list above the button */
  align-items: center;
  width: 100%;
}

/* The UL containing product cards */
.product-button-list {
  display: flex;
  flex-wrap: wrap;        /* allow wrapping to new lines */
  list-style: none;
  justify-content: center;
  gap: 35px;              /* space between items */
  padding: 0;
  margin-bottom: 20px;    /* some space below the product grid */
}

/* Each product box link */
.product-button {
  width: 250px;
  height: 250px;
  background-color: #cccccc;
  color: black;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;   /* or flex if you want inner layout control */
  font-size: 18px;
  font-family: "Futura";
  font-weight: bold;
  overflow: hidden;
  transition: 0.5s;        /* for hover effect */
}

/* Hover effect for product boxes */
.product-button:hover {
  background-color: red;
  transform: scale(1.02);
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),
              0 17px 50px 0 rgba(0,0,0,0.19);
}

/* Product images fill the box */
.product-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "View More" button container */
.viewmore-button {
  background-color: #cccccc;
  padding: 5px 10px;
  display: inline-block;
  font-size: 18px;
  font-family: "Futura";
  border-radius: 25px;
  transition: 0.5s;
}

.viewmore-button:hover {
  background-color: red;
  transform: scale(1.01);
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.4),
              0 17px 50px 0 rgba(0,0,0,0.5);
}

.viewmore-text {
  color: black;
  text-decoration: none;
}

.viewmore-text:hover {
  color: white;
  text-decoration: underline;
}

/* === Responsive: Stack product-boxes on smaller screens === */
@media (max-width: 768px) {
  .product-button {
    width: 100%;       /* full width on small screens */
    height: auto;      /* let height grow based on image aspect */
  }
  .product-button img {
    height: auto;      /* preserve aspect ratio */
  }
}


/* Products*/

.parallax{
  background-image:url('/static/images/cover.png');
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.parallax1{
  background-image:url('/static/images/cover2.png');
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.parallax2{
  background-image:url('/static/images/slider/4.png');
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.parallax3{
  background-image:url('/static/images/Thomassen_gearreducerCD.jpg');
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}


.ccc-box{
    display: flex;
    flex-wrap: wrap;
    background-color:red;
    height:auto;
    width:100%;
    align-items: center;
    justify-content: center;
    padding: 50px;
    gap: 50px;
    box-sizing: border-box;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.remosa-box{
    display: flex;
    flex-wrap: wrap;
    background-color:#4B0076;
    height:auto;
    width:100%;
    align-items: center;
    justify-content: center;
    padding: 50px;
    gap: 50px;
    box-sizing: border-box;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.wika-box{
    display: flex;
    flex-wrap: wrap;
    background-color:#00008B;
    height:auto;
    width:100%;
    align-items: center;
    justify-content: center;
    padding: 50px;
    gap: 50px;
    box-sizing: border-box;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.thomassen-box{
    display: flex;
    flex-wrap: wrap;
    background-color:#cc0000;
    height:auto;
    width:100%;
    align-items: center;
    justify-content: center;
    padding: 50px;
    gap: 50px;
    box-sizing: border-box;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.product-box{
    width: 400px;
    height: 350px;
    background-color: #cccccc;
    color: black;
    font-family: "Futura";
    font-weight: bold;
    border-radius:10px;
    flex: 0 0 400px;
    overflow: hidden;
    align-items:center;
    transition:0.5s;
    padding: 1rem;
}

.product-box:hover{
    width: 400px;
    height: 700px;
    background-color: #1338BE;
    color: white;
    font-family: "Futura";
    font-weight: bold;
    overflow: hidden;
    flex: 0 0 400px;
    border-radius:10px;
    transform:scale(1.02);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.4),0 17px 50px 0 rgba(0,0,0,0.5);
    transition:0.5s;
}

.product-box img {
    width:320px;
    height:auto;
}

.product-box1{
    width: 400px;
    max-height: 360px;
    background-color: #cccccc;
    color: black;
    font-family: "Futura";
    font-weight: bold;
    overflow: hidden;
    flex: 0 0 400px;
    border-radius:10px;
    align-items:center;
    transition:0.5s;
    padding: 1rem;
}

.product-box1:hover{
    width: 400px;
    max-height: 1600px;
    background-color:#45b6fe;
    color: white;
    font-family: "Futura";
    font-weight: bold;
    overflow: hidden;
    flex: 0 0 400px;
    border-radius:10px;
    transform:scale(1.02);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.4),0 17px 50px 0 rgba(0,0,0,0.5);
    transition:0.5s;
    padding: 1rem;

}

.product-box1 img {
    width:320px;
    height:auto;
}

.product-box2{
    width: 400px;
    max-height: 360px;
    background-color: #cccccc;
    color: black;
    font-family: "Futura";
    font-weight: bold;
    border-radius:10px;
    flex: 0 0 400px;
    overflow: hidden;
    align-items:center;
    padding: 1rem;
    transition:0.5s;
}

.product-box2:hover{
    width: 400px;
    max-height: 1600px;
    background-color: #FF9912;
    color: white;
    font-family: "Futura";
    font-weight: bold;
    overflow: hidden;
    flex: 0 0 400px;
    border-radius:10px;
    transform:scale(1.02);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.4),0 17px 50px 0 rgba(0,0,0,0.5);
    transition:0.5s;

}

.product-box2 img {
    width:320px;
    height:auto;
}

.product-box3{
    width: 400px;
    max-height: 360px;
    background-color: #cccccc;
    color: black;
    font-family: "Futura";
    font-weight: bold;
    border-radius:10px;
    flex: 0 0 400px;
    overflow: hidden;
    align-items:center;
    padding: 1rem;
}

.product-box3:hover{
    width: 400px;
    max-height: 1600px;
    background-color: #0000FF;
    color: white;
    font-family: "Futura";
    font-weight: bold;
    overflow: hidden;
    flex: 0 0 400px;
    border-radius:10px;
    transform:scale(1.02);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.4),0 17px 50px 0 rgba(0,0,0,0.5);
    transition:0.5s;

}

.product-box3 img {
    width:320px;
    height:auto;
}

/* About Us*/

.aboutus-parallax{
  /* 3) Parallax background */
  background-image: url('/static/images/slider/A1.jpg');
  background-attachment: fixed;      /* you can switch to scroll on mobile below */
  background-position: center center;
  background-size: cover;
  min-height: 450px;  /* replace with your actual image dimensions */
}


.aboutus-box{
    display: flex;
    flex-wrap: wrap;
    background-color:red;
    color: white;
    height:auto;
    width:100%;
    text-align: left;
    align-items: center;
    justify-content: center;
    padding: 50px;
    gap: 50px;
    box-sizing: border-box;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/* 1) Use viewport units for the base height */
.aboutus-parallax2 {

  /* 3) Parallax background */
  background-image: url('/static/images/slider/A2.jpg');
  background-attachment: fixed;      /* you can switch to scroll on mobile below */
  background-position: center center;
  background-size: cover;
  min-height: 450px;
}

.aboutus-box2{
    display: flex;
    flex-wrap: wrap;
    background-color:#00008B;
    color: white;
    height:auto;
    width:100%;
    text-align: left;
    align-items: center;
    justify-content: center;
    padding: 50px;
    gap: 50px;
    box-sizing: border-box;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.aboutus-parallax3{
  background-image:url('/static/images/slider/A3.jpg');
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.aboutus-box3{
    display: flex;
    flex-wrap: wrap;
    background-color:red;
    color: white;
    height:auto;
    width:100%;
    text-align: left;
    align-items: center;
    justify-content: center;
    padding: 50px;
    gap: 50px;
    box-sizing: border-box;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

@media (max-width: 1080px) {
  .aboutus-parallax {
    left: auto;
    margin: 0;
    width: 100%;
    background-attachment: scroll;
    /* height now comes from aspect-ratio */
    }

  .aboutus-parallax2 {
    left: auto;
    margin: 0;
    width: 100%;
    background-attachment: scroll;
    /* height now comes from aspect-ratio */
  }
 }