body {

margin: 0;

padding-top: 50px;

}


.header {

position: fixed;

color: #75ff00;

top: 0;

left: 0;

width: 100%;

background: black;

box-sizing: border-box;

display: flex;

justify-content: space-between;

z-index: 1000;

}


.brand-name {

display: flex;

width: 150px;

height: 50px;

background: black;

border: 1px solid black;

margin: 0;

justify-content: center;

align-items: center;

font-weight: bold;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


.menu-box {

width: 400px;

height: 50px;

background-color: black;

border: 1px solid black;

display: flex;

align-items: center;

justify-content: space-between;

margin-left: auto;

}


.menu-box a {

text-decoration: none;

color: #75ff00;

font-weight: bold;

display: block;

padding-top: 0px;

padding-right: 5px;

padding-left: 5px;

}


.menu-box a:hover {

background-color: white;

color: black;

}


.menu {

display: none;

}


.menu-icon {

display: none;

}


.menu ul {

list-style: none;

padding: 0;

margin: 0;

}


.menu li {

padding: 15px;

border-bottom: 1px solid #666;

}


.menu a {

color: #75ff00;

text-decoration: none;

}


input[type="checkbox"] {

display: none;

}


@media (max-width: 767px) {

.menu-box {

display: none;

}


.header {

justify-content: center;

}


.menu {

position: fixed;

top: 0;

left: -200px;

width: 200px;

height: 100%;

background: black;

padding-top: 60px;

transition: left 0.3s ease;

z-index: 1002;

display: block;

font-weight: bold;

}


.menu-icon {

position: fixed;

top: 10px;

left: 20px;

color: #75ff00;

font-size: 24px;

cursor: pointer;

z-index: 1003;

display: block;

font-weight: bold;

}


input[type="checkbox"]:checked + .menu {

left: 0;

}

}


.products {

background: black;

padding-bottom: 40px;

width: 100%;

}


.products-heading p{

color: #75ff00;

font-size: 80px;

margin: 0px;

padding-right: 25px;

padding-left: 25px;

padding-top: 30px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


@media (min-width: 1px) and (max-width: 361px) {

.products-heading p{

font-size: 40px;

}

}


@media (min-width: 361px) and (max-width: 439px) {

.products-heading p{

font-size: 50px;

}

}


@media (min-width: 439px) and (max-width: 517px) {

.products-heading p{

font-size: 60px;

}

}


@media (min-width: 517px) and (max-width: 673px) {

.products-heading p{

font-size: 70px;

}

}


.first-flex-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

padding-left: 25px;

padding-right: 25px;

}


.first-flex-container > div {

background: linear-gradient(to right, rgba(10, 10, 10, 0.3), rgba(51, 51, 51, 0.3));

color: #75ff00;

margin: 10px;

padding: 0px;

text-align: center;

border-radius: 0px;

width: calc(33.33% - 20px);

box-sizing: border-box;

height: 500px;

}


.line {

position: relative;

width: 100%;

height: 7px;

background-color: #75ff00;

animation: expandline 1s ease-in-out infinite;

}


@keyframes expandline {

0% {

width: 0;

left: 50%;

}

50% {

width: 100%;

left: 0;

}

100% {

width: 100%;

left: 0;

}

}


.slider-container {

position: relative;

width: 100%;

height: 600px;

overflow: hidden;

box-sizing: border-box;

background-color: black;

}

@media (max-width: 767px) {

.slider-container {

height: 400px;

}

}

.slider {

display: flex;

width: 1000%; /* Total width of all slides (5 slides * 60% each) */

height: 100%;

transition: transform 0.5s ease-in-out;

box-sizing: border-box;

}


.slide {

width: 100%; /* Each slide is 60% of the screen width */

height: 100%;

display: flex;

justify-content: center;

align-items: center;

position: relative;

opacity: 1;

transition: opacity 0.5s ease-in-out;

box-sizing: border-box;

}


.circle {

width: 100%;

height: 100%;

overflow: hidden;

display: flex;

justify-content: center;

align-items: center;

box-sizing: border-box;

}


.circle img {

width: 100%;

height: 100%;

object-fit: fill;

box-sizing: border-box;

}


.navigation {

position: absolute;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

display: flex;

box-sizing: border-box;

}


.nav-button {

width: 10px;

height: 10px;

background: #ccc;

border-radius: 50%;

margin: 0 5px;

cursor: pointer;

box-sizing: border-box;

}


.buttons {

position: absolute;

bottom: 20px;

width: 100%;

display: flex;

justify-content: space-between;

padding: 0 20px;

box-sizing: border-box;

}


.prev, .next {

cursor: pointer;

font-size: 24px;

color: #fff;

background: rgba(0, 0, 0, 0.5);

padding: 10px;

border-radius: 50%;

box-sizing: border-box;

}


.buttons .prev,

.buttons .next {

display: none;

}


#slide1:checked ~ .buttons label[for="slide10"].prev,
#slide1:checked ~ .buttons label[for="slide2"].next,
#slide2:checked ~ .buttons label[for="slide1"].prev,
#slide2:checked ~ .buttons label[for="slide3"].next,
#slide3:checked ~ .buttons label[for="slide2"].prev,
#slide3:checked ~ .buttons label[for="slide4"].next,
#slide4:checked ~ .buttons label[for="slide3"].prev,
#slide4:checked ~ .buttons label[for="slide5"].next,
#slide5:checked ~ .buttons label[for="slide4"].prev,
#slide5:checked ~ .buttons label[for="slide6"].next,
#slide6:checked ~ .buttons label[for="slide5"].prev,
#slide6:checked ~ .buttons label[for="slide7"].next,
#slide7:checked ~ .buttons label[for="slide6"].prev,
#slide7:checked ~ .buttons label[for="slide8"].next,
#slide8:checked ~ .buttons label[for="slide7"].prev,
#slide8:checked ~ .buttons label[for="slide9"].next,
#slide9:checked ~ .buttons label[for="slide8"].prev,
#slide9:checked ~ .buttons label[for="slide10"].next,
#slide10:checked ~ .buttons label[for="slide9"].prev,
#slide10:checked ~ .buttons label[for="slide1"].next {

display: block;

}


#slide1:checked ~ .slider {

transform: translateX(0%);

}


#slide2:checked ~ .slider {

transform: translateX(-10%);

}


#slide3:checked ~ .slider {

transform: translateX(-20%);

}


#slide4:checked ~ .slider {

transform: translateX(-30%);

}


#slide5:checked ~ .slider {

transform: translateX(-40%);

}


#slide6:checked ~ .slider {

transform: translateX(-50%);

}


#slide7:checked ~ .slider {

transform: translateX(-60%);

}


#slide8:checked ~ .slider {

transform: translateX(-70%);

}


#slide9:checked ~ .slider {

transform: translateX(-80%);

}


#slide10:checked ~ .slider {

transform: translateX(-90%);

}


#slide1:checked ~ .navigation .nav-button:nth-child(1),
#slide2:checked ~ .navigation .nav-button:nth-child(2),
#slide3:checked ~ .navigation .nav-button:nth-child(3),
#slide4:checked ~ .navigation .nav-button:nth-child(4),
#slide5:checked ~ .navigation .nav-button:nth-child(5),
#slide6:checked ~ .navigation .nav-button:nth-child(6),
#slide7:checked ~ .navigation .nav-button:nth-child(7),
#slide8:checked ~ .navigation .nav-button:nth-child(8),
#slide9:checked ~ .navigation .nav-button:nth-child(9),
#slide10:checked ~ .navigation .nav-button:nth-child(10) {

background: #333;

}


.slider-container input[type="radio"] {

display: none;

}


.button-container {

position: relative;

display: inline-block;

width: 100%;

height: 100%;

}


.image-button {

display: block;

text-decoration: none;

width: 100%;

height: 100%;

}


.image-button a {

display: block;

text-decoration: none;

}


.image-button img {

width: 100%;

height: 100%;
      
transition: transform 0.3s ease-in-out;

}


.image-button img:hover {

transform: scale(1.0);

cursor: pointer;

}


.overlay {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.7);

justify-content: center;

align-items: center;

text-align: center;

z-index: 1000;

}


.overlay img {

width: 100%;

height: 100%;

object-fit: fill;

}


.overlay .close {

position: absolute;

top: 10px;

right: 20px;

color: white;

font-size: 30px;

cursor: pointer;

z-index: 1001;

}


#toggle-overlay-1:checked + .overlay {

display: flex;

}


#toggle-overlay-1 {

display: none;

}


#toggle-overlay-2:checked + .overlay {

display: flex;

}


#toggle-overlay-2 {

display: none;

}


#toggle-overlay-3:checked + .overlay {

display: flex;

}


#toggle-overlay-3 {

display: none;

}


#toggle-overlay-4:checked + .overlay {

display: flex;

}


#toggle-overlay-4 {

display: none;

}


#toggle-overlay-5:checked + .overlay {

display: flex;

}


#toggle-overlay-5 {

display: none;

}


#toggle-overlay-6:checked + .overlay {

display: flex;

}


#toggle-overlay-6 {

display: none;

}


#toggle-overlay-7:checked + .overlay {

display: flex;

}


#toggle-overlay-7 {

display: none;

}


#toggle-overlay-8:checked + .overlay {

display: flex;

}


#toggle-overlay-1 {

display: none;

}


#toggle-overlay-9:checked + .overlay {

display: flex;

}


#toggle-overlay-9 {

display: none;

}


#toggle-overlay-10:checked + .overlay {

display: flex;

}


#toggle-overlay-10 {

display: none;

}


.mobile-image {
display: none;
}
  

@media (max-width: 767px) {
.desktop-image {
display: none;
}
.mobile-image {
display: block;
}
}

.product-information {

background-color: black;

padding-bottom: 60px;

padding-top: 60px;

}


.product-information h1{

color: #75ff00;

margin: 0px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

padding-left: 25px;

padding-right: 25px;

padding-top: 15px;

font-size: 50px;

}


.product-information p{

color: #75ff00;

margin: 0px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

padding-left: 25px;

padding-right: 25px;

padding-top: 15px;

padding-bottom: 15px;

font-size: 40px;

}


@media (max-width: 409px) {

.product-information h1 {

font-size: 17px;

padding-right: 15px;

padding-left: 15px;

}


.product-information p {

font-size: 17px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 409px) and (max-width: 588px) {

.product-information h1 {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}


.product-information p {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 588px) and (max-width: 813px) {

.product-information h1 {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}


.product-information p {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 813px) and (max-width: 1068px) {

.product-information h1 {

font-size: 30px;

}


.product-information p {

font-size: 20px;

}

}


@media (min-width: 1068px) and (max-width: 1323px) {

.product-information h1 {

font-size: 40px;

}


.product-information p {

font-size: 30px;

}

}


.conclusion-button-container {

background-color: black;

display: flex;

justify-content: center;

padding-bottom: 60px;

}


.conclusion-button {

padding-top: 10px;

padding-bottom: 10px;

padding-right: 20px;

padding-left: 20px;

background-color: #75ff00;

color: black;

text-decoration: none;

border-radius: 5px;

font-size: 3vw;

transition: background-color 0.3s;

font-weight: bold;

}


.conclusion-button:hover {

background-color: white;

color: black;

}

.conclusion-button-container-1 {

background-color: black;

display: flex;

justify-content: left;

padding-top: 15px;

padding-bottom: 15px;

padding-right: 25px;

padding-left: 25px;

}


.conclusion-button-1 {

padding-top: 10px;

padding-bottom: 10px;

padding-right: 20px;

padding-left: 20px;

background-color: #75ff00;

color: black;

text-decoration: none;

border-radius: 5px;

font-size: 3vw;

transition: background-color 0.3s;

font-weight: bold;

}


.conclusion-button-1:hover {

background-color: white;

color: black;

}

@media (max-width: 409px) {

.conclusion-button-container-1 {

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 409px) and (max-width: 588px) {

.conclusion-button-container-1 {

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 588px) and (max-width: 813px) {

.conclusion-button-container-1 {

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 813px) and (max-width: 1068px) {

.conclusion-button-container-1 {

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 1068px) and (max-width: 1323px) {

.conclusion-button-container-1 {

padding-right: 15px;

padding-left: 15px;

}

}

.footer {

background: black;

}


.footer-start {

display: flex;

}


.brand-name-footer {

margin: 0px;

font-size: 30px;

color: #75ff00;

padding-left: 25px;

padding-top: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


.social-icons i {

font-size: 40px;

color: #75ff00;

transition: color 0.3s ease;

}


.social-icons i:hover {

color: #1da1f2;

}


.social-icons {

padding-top: 25px;

padding-right: 25px;

width: 400px;

display: flex;

align-items: center;

justify-content: space-between;

margin-left: auto;

}


.brand-tagline p {

margin: 0px;

font-size: 30px;

color: #75ff00;

padding-left: 25px;

padding-top: 25px;

padding-right: 25px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

}


.footer-links {

font-size: 20px;

padding-top: 45px;

padding-left: 25px;

padding-right: 25px;

color: #75ff00;

display: flex;

align-items: center;

justify-content: space-between;

}


.footer-links a {

text-decoration: none;

color: #75ff00;

font-weight: bold;

}


.footer-links a:hover {

background-color: white;

color: black;

}


.copyright {

padding-top: 45px;

padding-bottom: 10px;

text-align: center;

color: #75ff00;

padding-right: 25px;

padding-left: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


.copyright p {

margin: 0px;

}


@media (max-width: 767px) {

.footer-start {

flex-direction: row;

align-items: center;

justify-content: space-between;

padding-left: 15px;

padding-top: 15px;

}


.brand-name-footer {

font-size: 24px;

padding-left: 0;

padding-top: 0;

}


.social-icons {

flex-direction: row;

align-items: center;

width: auto;

margin-left: auto;

padding-right: 15px;

padding-top: 0;

}


.social-icons i {

font-size: 30px;

margin-left: 10px;

}


.brand-tagline p {

font-size: 16px;

padding-left: 15px;

padding-top: 10px;

padding-right: 15px;

}


.footer-links {

flex-direction: column;

padding-top: 20px;

padding-left: 0;

padding-right: 0;

align-items: center;

justify-content: center;

}


.footer-links a {

font-size: 18px;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

}


.copyright {

font-size: 14px;

padding-top: 20px;

padding-bottom: 20px;

padding-right: 15px;

padding-left: 15px;

}

}