@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

:root {
   
   --green: #4CAF50;        
   --blue: #007BFF;         
   --red: #FF5733;          
   --orange: #FF8C00;       
   --black: #333333;        
   --white: #FFFFFF;        
   --light-bg: rgba(242, 242, 242, 0.75); 
   --box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); 
   --border: 2px solid var(--black);  
   --td_background: #F4F4F9; 
   --primary-color: #FFFFFF; 
   --dark-green: #2C6B2F;    
}

*{
   font-family: 'Poppins', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border: none;
   text-decoration: none;
}

*::-webkit-scrollbar{
   width: 10px;
   height: 5px;
}

*::-webkit-scrollbar-track{
   background-color: transparent;
}

*::-webkit-scrollbar-thumb{
   background-color: var(--blue);
}

body{
   background-color: var(--light-bg);
}

/* Image styling */
.img_size {
   width: 110px;
   height: auto; 
   transform-origin: center center; 
   transition: transform 0.25s ease, visibility 0.25s ease-in-out, box-shadow 0.3s ease; 
   border-radius: 8px; 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); 
}

/* Hover effect for scaling */
.img_size:hover {
   transform: scale(1.1); 
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}


.message{
   position: relative;
   top:10; left:0; right:0;
   padding:15px 10px;
   background-color: var(--white);
   text-align: center;
   z-index: 1000;
   box-shadow: var(--box-shadow);
   color:var(--black);
   font-size: 20px;
   text-transform: capitalize;
   cursor: pointer;
}
/* General button styles */
.btn,
.delete-btn,
.option-btn {
   display: inline-block;
   padding: 12px 30px; 
   font-size: 18px;
   color: var(--white);
   border-radius: 30px; 
   text-transform: capitalize;
   font-weight: 600; 
   text-align: center;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease; 
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
}

/* Icon styling */
.material-symbols-outlined {
   font-size: 40px !important;
   font-variation-settings: 'FILL' 4, 'wght' 600, 'GRAD' 0, 'opsz' 24;
   margin-right: 8px; 
}

/* Hover effect for all buttons */
.btn:hover,
.delete-btn:hover,
.option-btn:hover {
   background-color: var(--green); 
   transform: translateY(-3px); 
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); 
}

/* Individual button styles */
.btn {
   background-color: var(--blue); 
}

.delete-btn {
   background-color: var(--red); 
}

.option-btn {
   background-color: var(--orange); 
}

/* Cart-related styling */
.cart {
   margin-left: 500px; 
   display: flex;
   align-items: center;
   justify-content: center;
}

.cart-inhoud {
   font-size: 27px !important;
   font-weight: bold; 
   /* color: var(--black); Contrast text for cart content */
   padding: 10px;
   border-radius: 5px;
   background-color: var(--light-bg); 
}


/* Main form container styling */
.form-container {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   padding-bottom: 70px;
   background-color: var(--light-bg); 
}
/* Form styling */
.form-container form {
   width: 100%;
   max-width: 500px;
   border-radius: 10px; 
   border: 1px solid var(--border); 
   padding: 30px;
   text-align: center;
   background-color: var(--white);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
   transition: transform 0.3s ease-in-out; 
}

/* Form heading */
.form-container form h3 {
   font-size: 30px;
   margin-bottom: 20px;
   text-transform: uppercase;
   color: var(--black);
   font-weight: bold;
   letter-spacing: 2px;
}

/* Input field styling */
.form-container form .box {
   width: 100%;
   border-radius: 8px; 
   border: 1px solid var(--border);
   padding: 12px 14px;
   font-size: 18px;
   margin: 15px 0;
   background-color: var(--light-bg);
   color: var(--black);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
   transition: box-shadow 0.3s ease, transform 0.3s ease; 
}

/* Input field focus effect */
.form-container form .box:focus {
   outline: none;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
   transform: scale(1.02); 
}

/* Paragraph and link styling */
.form-container form p {
   margin-top: 20px;
   font-size: 18px;
   color: var(--black);
}

.form-container form p a {
   color: var(--red);
   font-weight: bold; 
   transition: color 0.3s ease;
}

/* Link hover effect */
.form-container form p a:hover {
   text-decoration: underline;
   color: var(--green); 
}

/* Hover effect for form container */
.form-container form:hover {
   transform: translateY(-5px); 
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1); 
}


.container {
   width: 90%;
   max-width: 1200px;
   margin: 20px auto;
}

.heading {
   text-align: center;
   font-size: 2rem;
   color: var(--green);
   margin-bottom: 20px;
   font-weight: 700;
}

.discount-table {
   width: 100%;
   border-collapse: collapse;
   margin: 20px 0;
   background-color: var(--white);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: var(--box-shadow);
}

.discount-table thead th {
   background-color: var(--green);
   color: var(--white);
   font-size: 1.2rem;
   padding: 15px;
   text-align: left;
   border-bottom: 2px solid var(--dark-green);
}

.discount-table tbody tr {
   border-bottom: 1px solid var(--light-gray);
}

.discount-table tbody tr:nth-child(even) {
   background-color: var(--light-bg);
}

.discount-table tbody tr td {
   padding: 12px 15px;
   font-size: 1rem;
   color: var(--text-color);
}

.discount-table tbody tr td:first-child {
   font-weight: bold;
   color: var(--green);
}

.no-discount {
   text-align: center;
   font-size: 1.2rem;
   color: var(--gray);
   margin: 20px 0;
}

.container .user-profile {
   padding: 20px;
   text-align: center;
   border: var(--border);
   background-color: var(--white);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
   border-radius: 10px; 
   margin: 20px auto;
   max-width: 478px;
   transform: scale(0.9); 
   opacity: 0; 
   animation: popIn 1.5s ease-out forwards, pulse 2.5s infinite alternate ease-in-out;
}

/* Pop-in animation */
@keyframes popIn {
   0% {
      transform: scale(0.5) translateY(-50px); 
      opacity: 0;
   }
   60% {
      transform: scale(1.05) translateY(0); 
      opacity: 1;
   }
   100% {
      transform: scale(1);
      opacity: 1;
   }
}

/* Subtle pulsing animation */
@keyframes pulse {
   0% {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 0 0 10px rgba(255, 255, 255, 0.2);
   }
   100% {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3);
   }
}


.container .user-profile {
   background: linear-gradient(145deg, #ffffff, #f3f3f3);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   max-width: 500px;
   margin: 20px auto;
   text-align: center;
}

.container .user-profile p {
   margin-bottom: 15px;
   font-size: 16px;
   color: #333;
   line-height: 1.5;
   font-family: 'Arial', sans-serif;
}

.container .user-profile p span {
   color: #e74c3c;
   font-weight: bold;
}

.container .user-profile .flex {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 15px;
   align-items: flex-end;
   margin-top: 15px;
}

.container .user-profile .flex > * {
   background: linear-gradient(145deg, #f9f9f9, #eaeaea);
   padding: 10px 15px;
   border-radius: 5px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   font-size: 14px;
   color: #444;
   transition: all 0.3s ease;
   text-align: center;
   cursor: pointer;
}

.container .user-profile .flex > *:hover {
   background: linear-gradient(145deg, #ffffff, #e5e5e5);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   transform: translateY(-3px);
}

.container .user-profile h2 {
   font-size: 24px;
   font-weight: bold;
   color: #2c3e50;
   margin-bottom: 20px;
}

.container .user-profile .action-buttons button {
   padding: 10px 20px;
   font-size: 16px;
   background: linear-gradient(145deg, #4caf50, #66bb6a);
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s ease;
   text-transform: uppercase;
   margin: 10px 5px;
}

.container .user-profile .action-buttons button:hover {
   background: linear-gradient(145deg, #45a049, #5ec165);
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Box Container Styling */
.container .products .box-container {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   justify-content: center;
   margin-top: 20px; 
}

/* Styling for individual box (box_korting) */
.container .products .box-container .box_korting {
   text-align: center;
   border-radius: 10px; 
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
   border: 1px solid var(--border);
   position: relative;
   padding: 20px;
   background-color: var(--white);
   width: 100%; 
   max-width: 450px;
   margin-top: 20px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container .products .box-container .box_korting:hover {
   transform: translateY(-5px); 
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); 
}

/* Table Styling inside the box_korting */
.container .products .box-container .box_korting table {
   width: 100%;
   border-collapse: collapse;
   margin: 20px 0;
   padding: 8px;
   border-radius: 8px;
   overflow: hidden;
}

.container .products .box-container .box_korting table th,
.container .products .box-container .box_korting table td {
   padding: 12px;
   text-align: center;
   font-size: 16px;
   color: var(--black);
   border: 1px solid var(--border);
   border-radius: 5px;
}

.container .products .box-container .box_korting table th {
   background-color: var(--green); 
   color: var(--white); 
   font-weight: 600;
}

.container .products .box-container .box_korting table td {
   background-color: var(--light-bg); 
}

/* Optional: Add hover effect on table rows */
.container .products .box-container .box_korting table tbody tr:hover {
   background-color: #e4dadd; 
}



.container .products .box-container .box {
   text-align: center;
   border-radius: 10px; 
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
   border: var(--border);
   position: relative;
   padding: 20px;
   background-color: var(--white);
   width: 350px;
   opacity: 0; 
   transform: translateY(30px) scale(0.95); 
   animation: fadeInUp 1.5s ease-out forwards;
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Entrance animation */
@keyframes fadeInUp {
   0% {
      opacity: 0;
      transform: translateY(50px) scale(0.9); 
   }
   60% {
      opacity: 1;
      transform: translateY(-10px) scale(1.02); 
   }
   100% {
      opacity: 1;
      transform: translateY(0) scale(1); 
   }
}

/* Hover animation for interactivity */
.container .products .box-container .box:hover {
   transform: scale(1.05); 
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); 
   z-index: 10; 
}


.container .products .box-container .box:hover::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 10px;
   border: 2px solid rgba(0, 123, 255, 0.5); 
   pointer-events: none; 
   box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
   animation: glow 1.5s infinite alternate ease-in-out;
}


@keyframes glow {
   0% {
      box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
   }
   100% {
      box-shadow: 0 0 20px rgba(0, 123, 255, 0.6);
   }
}


.container .products .box-container .box img{
   height: 400px;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
   border-radius: 20px;
}

.container .products .box-container .box img:hover{
   box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    transform: translateY(-5px);
}

.container .products .box-container .box .name{
   font-size: 20px;
   color:var(--black);
   padding:5px 0;
}

.container .products .box-container .box .leeftijd{
   position: absolute;
   top:10px; left:10px;
   padding:5px 10px;
   border-radius: 5px;
   background-color: var(--black);
   color:var(--white);
   font-size: 25px;
}

.container .products .box-container .box input{
   margin:10px 0;
   width: 100%;
   border:var(--border);
   border-radius: 5px;
   font-size: 20px;
   color:var(--black);
   padding:12px 14px
}

input[type="text"]{
   margin:10px 0;
   width: 30%;
   border:var(--border);
   border-radius: 5px;
   font-size: 20px;
   color:var(--black);
   padding:12px 14px
}

.container .products .box-container .box2 {
   text-align: center;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   border: 1px solid #e0e0e0;
   position: relative;
   padding: 20px;
   background: linear-gradient(145deg, #fdfbfb, #f7cfcf);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   width: 200px;
   margin: 10px auto;
}

.container .products .box-container .box2:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.container .products .box-container .box2 img {
   height: 150px;
   width: 164px;
   border-radius: 20px;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.container .products .box-container .box2 img:hover {
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
   transform: translateY(-8px);
}

.container .products .box-container .box2 .name {
   font-size: 18px;
   color: var(--black);
   padding: 10px 0;
   font-weight: bold;
   text-transform: capitalize;
}

.container .products .box-container .box2 .price {
   position: absolute;
   top: 10px;
   left: 10px;
   padding: 5px 10px;
   border-radius: 8px;
   background: linear-gradient(145deg, #000, #555);
   color: var(--white);
   font-size: 22px;
   font-weight: bold;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.container .products .box-container .box2 input {
   margin: 10px 0;
   width: 100%;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-size: 18px;
   color: var(--black);
   padding: 12px 14px;
   background-color: #fdfdfd;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.container .products .box-container .box2 input:focus {
   border-color: #f7a1a1;
   box-shadow: 0 0 5px rgba(255, 80, 80, 0.5);
   outline: none;
}


.container .shopping-cart {
   padding: 20px 0;
   background-color: #f9f9f9;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   margin: 20px auto;
}

.container .shopping-cart table {
   width: 100%;
   text-align: center;
   border: 1px solid #ddd;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
   background: linear-gradient(145deg, #ffffff, #f5f5f5);
}

.container .shopping-cart table thead {
   background: linear-gradient(145deg, #333, #555);
   color: #fff;
}

.container .shopping-cart table thead th {
   padding: 12px 15px;
   color: #ffffff;
   text-transform: capitalize;
   font-size: 20px;
   font-weight: bold;
}

.container .shopping-cart table tbody tr:nth-child(even) {
   background: #f7f7f7;
}

.container .shopping-cart table tr td {
   padding: 15px;
   font-size: 18px;
   color: #444;
   border-bottom: 1px solid #ddd;
}



.container .shopping-cart table tr td input[type="number"] {
   width: 80px;
   border: 1px solid #ddd;
   border-radius: 5px;
   padding: 8px 10px;
   font-size: 16px;
   color: #333;
   background-color: #fff;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
}

.container .shopping-cart table tr td input[type="number"]:focus {
   border-color: #888;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
   outline: none;
}

.container .shopping-cart .cart-btn {
   margin-top: 20px;
   text-align: center;
}

.container .shopping-cart .cart-btn button {
   padding: 12px 20px;
   font-size: 18px;
   color: #fff;
   background: linear-gradient(145deg, #4caf50, #66bb6a);
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s ease;
   text-transform: uppercase;
}

.container .shopping-cart .cart-btn button:hover {
   background: linear-gradient(145deg, #45a049, #5ec165);
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.container .shopping-cart .disabled {
   pointer-events: none;
   background-color: #e57373;
   color: #fff;
   opacity: 0.6;
   user-select: none;
   -webkit-user-select: none;
}

.container .shopping-cart .disabled:hover {
   background-color: #e57373;
   box-shadow: none;
   transform: none;
}

/* Main menu styles */
.menu {
   display: flex;
   align-items: center;
   justify-content: left; 
   background-color: var(--black);
   padding: 10px 20px; 
   gap: 16px;
   border-radius: 0% 100% 0% 100% / 83% 0% 100% 17%; 
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
   animation: slideIn 1.2s ease-out forwards;
   position: relative;
   z-index: 1;
   /* overflow: hidden; */ /* Ensures any animated elements don't overflow */
}


.menu a {
   text-decoration: none;
   color: var(--white);
   font-size: 18px;
   font-weight: 600;
   padding: 8px 12px;
   position: relative;
   border-radius: 5px;
   transition: background-color 0.3s ease, transform 0.3s ease;
}

.menu a:hover {
   background-color: rgba(255, 255, 255, 0.1); 
   transform: scale(1.1); 
   color: var(--black); 
}


.menu a::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0%;
   height: 2px;
   background-color: var(--primary-color); 
   transition: width 0.3s ease-in-out;
}

.menu a:hover::after {
   width: 100%; /* Fills underline */
}

/* Entrance animation for the menu */
@keyframes slideIn {
   0% {
      transform: translateY(-100%);
      opacity: 0;
   }
   60% {
      transform: translateY(10%);
      opacity: 0.7;
   }
   100% {
      transform: translateY(0);
      opacity: 1;
   }
}

/* Add a glowing hover animation to the menu */
.menu:hover {
   box-shadow: 0 6px 15px rgba(0, 255, 123, 0.3); /* Adds a glow on hover */
}

/* Optional: Animation for menu items */
.menu a {
   animation: fadeIn 0.8s ease-in-out forwards;
   opacity: 0;
} 



/* Keyframe for menu items fade-in */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}


.menu a, .menu .dropbtn {
   color: var(--white);
   text-decoration: none;
   padding: 10px 15px;
   font-size: 16px;
   font-weight: 500;
   display: inline-block;
   cursor: pointer;
   background: transparent;
}

/* .menu a:hover, .menu .dropbtn:hover {
   background-color: #575757;
} */

/* Dropdown menu styles */
.dropdown {
   position: relative;
   display: inline-block; 
}

.dropdown-content {
   display: none;
   position: absolute;
   top: 100%; 
   left: 0;
   background-color: var(--white);
   min-width: 350px; 
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
   z-index: 1;
   padding: 5px 0;
}

.dropdown-content a {
   color: var(--black);
   text-decoration: none;
   display: flex;
   align-items: center;
   padding: 10px 15px;
   white-space: nowrap;

   text-overflow: ellipsis;
   font-size: 13px;
   gap: 10px;
}

.dropdown-content a img.movie-thumbnail {
   width: 40px;
   height: 40px;
   object-fit: cover;
   border-radius: 5px;
}

 .dropdown-content a:hover {
   background-color: #f1f1f1;
} 

.dropdown:hover .dropdown-content {
   display: block;
}

.dropdown:hover  {
   background-color: #575757;
} 

/* Cart styling */
.cart {
   display: flex!important;
   align-items: center;
   gap: 5px;
   color: var(--white);
}

.nav {
margin: 27px auto 0;

position: fixed;
width: 1400px;
height: 90px;
/* background-color: var(--light-bg); */
border-radius: 8px;
font-size: 0;
}
nav a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: var(--black);
cursor: pointer;
}
nav .animation {
position: absolute;
height: 136%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}

.menu a:nth-child(1) {
width: 130px;
animation-delay: 0.2s;
}
.menu a:nth-child(2) {
width: 130px;
animation-delay: 0.4s;
}
.menu a:nth-child(3) {
width: 120px;
animation-delay: 0.6s;
}
.menu a:nth-child(4) {
width: 160px;
animation-delay: 0.8s;
}
.menu a:nth-child(5) {
width: 140px;
animation-delay: 1.0s;
}
.menu a:nth-child(6) {
width: 120px;
animation-delay: 1.2s;
}
.menu a:nth-child(7) {
   width: 120px;
   animation-delay: 1.4s;
   }

nav .start-home, a:nth-child(1):hover~.animation {
width: 135px;
left: 16px;
background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
width: 160px;
left: 143px;
background-color: #c08983;
}
nav .start-blog, a:nth-child(3):hover~.animation {
width: 130px;
left: 287px;
background-color: #3498db;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
width: 170px;
left: 410px;
background-color: #9b59b6;
}
nav .start-contact, a:nth-child(5):hover~.animation {
width: 146px;
left: 620px;
background-color: #e67e22;
}

nav .start-products, a:nth-child(6):hover~.animation {
width: 130px;
left: 720px;
background-color: #cbc821;
}
nav .start-products, a:nth-child(7):hover~.animation {
   width: 200px;
   left: 1330px;
   background-color: #cbc821;
   }

   /* Mobile Menu */
.mobile-menu {
   display: none;
   flex-direction: column;
   background-color: var(--black);
   padding: 10px 0;
   position: relative;
   top: 0px;
   left: 0;
   width: 100%;
 }
 
 .mobile-menu a {
   color: white;
   padding: 10px 20px;
   text-decoration: none;
 }
 
 .mobile-menu a:hover {
   background-color: #555;
 }
.block_menu {
   display: none;
}
    
#titel_tekst {
   font-size: 42px; 
   font-weight: 700;
   font-style: italic;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 2px; 
   color: var(--blue); 
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25), 0 0 10px rgba(0, 0, 0, 0.15); 
   animation: fadeInUp 2s ease-out, glowingText 2.5s infinite alternate ease-in-out;
   margin: 20px auto;
}


@keyframes fadeInUp {
   0% {
      opacity: 0;
      transform: translateY(-40px); 
   }
   100% {
      opacity: 1;
      transform: translateY(0); 
   }
}


@keyframes glowingText {
   0% {
      text-shadow: 0 0 10px rgba(30, 144, 255, 0.5), 0 0 20px rgba(30, 144, 255, 0.3);
   }
   50% {
      text-shadow: 0 0 15px rgba(30, 144, 255, 0.8), 0 0 25px rgba(30, 144, 255, 0.6);
   }
   100% {
      text-shadow: 0 0 25px rgba(30, 144, 255, 1), 0 0 35px rgba(30, 144, 255, 0.8);
   }
}



/* /* Wrapper div that holds all your content 
.wrapper {
   display: flex;
   flex-direction: column;
   min-height: 100vh; /* Full viewport height 
}

/* Content area - this will take the remaining space 
.content {
   flex-grow: 1; /* This makes sure the content takes up available space 
} */


.order-details, .address-details {
   width: 100%;
   max-width: 800px; 
   margin: 20px auto; 
   border-collapse: collapse;
   font-size: 16px;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: 8px;
   overflow: hidden;
}

.order-details thead th {
   background-color: var(--green);
   color: var(--white);
   text-align: center;
   font-size: 18px;
   padding: 15px;
}

.order-details td, .address-details td {
   padding: 12px 15px;
   border-bottom: 1px solid gray;
   text-align: left; 
}

.order-details tbody tr:last-child td,
.address-details tbody tr:last-child td {
   border-bottom: none;
}

.address-details tbody tr:first-child td {
   font-weight: bold;
   color: var(--green);
}

h3 {
   margin: 20px auto 10px;
   font-size: 22px;
   color: var(--green);
   text-align: center;
}

.back-link {
   display: block;
   margin: 30px auto;
   padding: 10px 20px;
   background-color: var(--green);
   color: var(--white);
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   width: fit-content; 
   border-radius: 5px;
   transition: background-color 0.3s ease;
}

.back-link:hover {
   background-color: var(--dark-green);
}

.custom-select {
   position: relative;
   display: inline-block;
   width: 200px;
}
.payment-methods {
   display: flex;
   gap: 20px;
   margin-top: 10px;
}

.payment-option {
   display: flex;
   align-items: center;
   gap: 10px;
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
   transition: box-shadow 0.3s, border-color 0.3s;
}

.payment-option:hover {
   border-color: var(--blue);
   box-shadow: 0 0 10px rgba(0, 85, 179, 0.3);
}

.payment-option img {
   width: 40px;
   height: auto;
}

.payment-option input[type="radio"] {
   display: none;
}

.payment-option span {
   font-size: 16px;
   font-weight: 600;
   color: #333;
}

.payment-option input[type="radio"]:checked + img + span {
   color: var(--blue);
   font-weight: bold;
}

.footer {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   text-align: center;
   background: linear-gradient(45deg, var(--black), #333);
   padding: 20px;
   gap: 20px;
   border-radius: 0% 44% 10% 0% / 10% 19% 0% 10%;
   position: relative;
   bottom: 5px;
   color: var(--white);
   width: 100%;
   margin-top: 40px;
   font-size: 16px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   animation: fadeIn1 1.5s ease-in-out;
}

.footer a {
   color: var(--white);
   text-decoration: none;
   margin: 0 10px;
   font-weight: bold;
   transition: color 0.3s, transform 0.3s;
}

.footer a:hover {
   color: var(--green); 
   transform: scale(1.1);
}

.footer p {
   margin: 0;
   padding: 5px;
   font-size: 14px;
   opacity: 0.9;
}

.footer::before {
   content: "";
   position: absolute;
   top: -10px;
   left: 0;
   right: 0;
   height: 5px;
   background: linear-gradient(90deg, var(--green), var(--white), var(--green));
   border-radius: 50%;
   animation: pulse1 3s infinite;
}

@keyframes fadeIn1 {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes pulse1 {
   0%, 100% {
      transform: scaleX(1);
   }
   50% {
      transform: scaleX(1.1);
   }
}

/* Style for the contact form container */
.contact-form-container {
   width: 100%;
   max-width: 600px;
   margin: 20px auto;
   background: #f7f7f7;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-form {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.contact-form .form-group {
   display: flex;
   flex-direction: column;
}

.contact-form label {
   font-size: 16px;
   font-weight: bold;
   color: var(--black);
}

.contact-form textarea {
   width: 100%;
   padding: 12px;
   font-size: 14px;
   border: 1px solid #ccc;
   border-radius: 8px;
   resize: vertical;
}

.contact-form textarea:focus {
   border-color: var(--green);
   outline: none;
}

/* Button Styling */
.option-btn {
   padding: 10px 20px;
   font-size: 16px;
   background-color: var(--green);
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
}

.option-btn:hover {
   background-color: var(--dark-green);
   transform: translateY(-2px);
}

/* Message Styling */
.message {
   text-align: center;
   padding: 10px;
   border-radius: 5px;
   font-size: 16px;
}

.message.success {
   background-color: #d4edda;
   color: #155724;
}

.message.error {
   background-color: #f8d7da;
   color: #721c24;
}



@media (max-width:1200px){
   .container .shopping-cart{
      overflow-x: scroll;
   }

   .container .shopping-cart table{
      width: 600px;
   }
}

@media (max-width: 768px) {
   /* Disable animations and transitions on mobile */
   * {
     /*  animation: none !important; */
      transition: none !important;
   }

   /* Image size adjustments */
   .img_size {
      width: 80px; /* Smaller image size for mobile */
   }

   /* Box container adjustments */
   .container .products .box-container .box_korting {
      width: 90%;  /* Slightly smaller width to fit better */
   }

   .container .products .box-container .box_korting table th,
   .container .products .box-container .box_korting table td {
      font-size: 14px;  /* Adjust font size for better readability */
      padding: 8px;  /* Smaller padding */
   }

   /* Contact form adjustments */
   .contact-form-container {
      padding: 15px;
   }

   .contact-form textarea {
      font-size: 14px;
   }

   .option-btn {
      font-size: 14px; /* Slightly smaller button font size */
   }

   .container {
      font-size: 12px; /* Smaller font size for better mobile readability */
   }

   /* Image height adjustments */
   .container .products .box-container .box img,
   .container .products .box-container .box2 img,
   .container .products .box-container .box_korting img {
      height: 200px; /* Uniform image height for mobile */
   }

   /* Box container adjustments */
   .container .products .box-container .box2 {
      font-size: 12px;
      max-width: 200px; /* Max width to avoid overflow */
      max-height: 406px;
   }

   /* Button padding and font size for mobile */
   .btn, .delete-btn, .option-btn {
      padding: 10px 20px;  /* Smaller padding for buttons */
      font-size: 16px;  /* Smaller font size for better readability */
   }

   /* Cart adjustments for small screens */
   .cart {
      margin-left: 0;
      margin-top: 20px;  /* Adjust cart positioning */
   }

   /* Price font size adjustments */
   .container .products .box-container .box2 .price {
      font-size: 15px;
   }

   /* Product name adjustments */
   .container .products .box-container .box2 .name {
      font-size: 13px;  /* Smaller name font size */
   }

   /* Input field adjustments */
   .container .products .box-container .box2 input {
      font-size: 13px;
      width: 20%;
   }

   /* Shopping cart table adjustments */
   .container .shopping-cart table {
      width: 100%;
      font-size: 10px;  /* Smaller font size for better fitting */
      display: block;
      overflow-x: auto;
      border: none;
   }

   .container .shopping-cart table thead {
      display: none;  /* Hide header for mobile */
   }

   .container .shopping-cart table tr {
      display: block;
      margin-bottom: 10px;
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 10px;
   }

   .container .shopping-cart table tr td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 5px;
      text-align: left;
      font-size: 16px;
   }

   .container .shopping-cart table tr td::before {
      content: attr(data-label);
      font-weight: bold;
      text-transform: capitalize;
      margin-right: 10px;
      color: var(--black);
   }

   .container .shopping-cart table tr td input[type="number"] {
      width: 20%;
      font-size: 12px;
      padding: 8px;
   }

   /* Mobile menu adjustments */
   .menu {
      display: none;
   }

   .menu-container .menu-toggle {
      display: block;
   }

   .material-symbols-outlined {
      font-size: 20px !important;
   }

   .mobile-menu {
      display: flex;
   }
}