*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.web-container{
    width: 100%;
    height: auto;
    overflow: hidden;
    /* background-color: black; */
}

.navbanner-container{
    width: 100%;
    height: 100vh;
    /* background-color: aqua; */
    background-image: url(luxoria-images/view-futuristic-light-lamp-design.jpg);
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    background-position: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.5s forwards;
}
.navbanner-container:is(:hover, :focus, :active) {
    animation-play-state: running;
}
@keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* .............navbar...................... */

.navbar-container{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    /* background-color: black; */
}
.navlogo-section{
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: blue; */
}
.navlogo-section img{
    width: 200px;
    height: 100px;
}

.navbar-container label {
    display: none;

}
#checking{
    display: none;
}
.navbar-container label {
    display: none;
}
input[type="checkbox"] {
    display: none;
}
.nav-items {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.nav-items a{
    font-size: 18px;
    font-family: monospace;
    font-weight: 500;
    color: whitesmoke;
    text-decoration: none;
}
.nav-items a:hover{
    color: rgb(247,148,29);
}
/* ...............banner....................... */
.banner-container{
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    padding-left: 15%;
}
.banner-container h1{
    color:gray;
    font-size: 72px;
    margin-bottom: 12%;
    text-transform: uppercase;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.banner-container h1 span{
    animation: light 1s linear infinite;
}
.banner-container h1 span:nth-child(1){
    animation-delay: 0s;
}
.banner-container h1 span:nth-child(2){
    animation-delay: 0.2s;
}
.banner-container h1 span:nth-child(3){
    animation-delay: 0.4s;
}
@keyframes light{
    0%,80%{
        color: gray;
        text-shadow: none;
    }
    100%{
        color: white;
        text-shadow:0 0 10px white,
                    0 0 20px white,
                    0 0 40px white,
                    0 0 80px white,
                    0 0 120px white,
                    0 0 160px white ;
    }
}
/* .................about........................... */

.aboutpage-container{
    width:100%;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: black;
    background-image: url(luxoria-images/aboutbg.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.about-heading{
    width: 50%;
    height: 100%;
    display: flex;
    color: white;
    align-items: center;
    flex-direction: column;
    gap: 8%;
    padding-top: 15%;
    /* background-color: bisque; */

}
.about-heading span{
    font-size: 30px;
    font-weight: bolder;
    color:  rgb(245,132,31);
    font-family: Arial, Helvetica, sans-serif;
}
.about-heading h3{
    font-size: 28px;
    font-weight: 500;
    color:  white;
    font-family: Arial, Helvetica, sans-serif;
}
.about-content{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 5%;
    justify-content: center;
    /* align-items: center; */
    gap: 5%;
    /* background-color: bisque; */
}
.about-content p{
    font-size: 22px;
    color: white;
    line-height: 28px;
    margin-right: 5%;
    font-weight: 400;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif  ;
}
.about-content button{
    width: 40%;
    height: 60px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid rgb(245,132,31);
    border-radius: 30px;
    background-color: transparent;
}

/* ..................product......................... */

.productpage-container{
    width: 100%;
    height:160vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
}
.product-title{
    width: 100%;
    height: 100px;
    display: flex;
    padding-left: 15%;
    align-items: center;
    font-size: 22px;
    color: rgb(245,132,31);
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}

.product-container {
    width: 100%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: black;
}

.section {
    width: 30%;
    height: 95%;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    /* background-color: aquamarine; */
}

.section h2 {
    font-size: 1.2rem;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}


.box {
    width: 90%;
    height: 30%;
    background-color: blue;
    border: 2px solid #000;
    margin-top: 15px;
    border-radius: 15px;
    overflow: hidden;
}
.box img{
    width: 100%;
    height: 100%;
}

/* .......................project.................... */

.project-container{
    width: 100%;
    height: auto;
    background-color:black;
}   
.project-title{
    width: 100%;
    height: 100px;
    display: flex;
    padding-left: 15%;
    align-items: center;
    font-size: 22px;
    color: rgb(245,132,31);
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}
.project-page1{
    width: 100%;
    height: 110vh;
    display: flex;
    align-items:center;
    justify-content: space-around;
    /* background-color: blue; */
}
.project-1{
    width: 30%;
    height: 80%;
    /* background-color: beige; */
    display: flex;
    align-items: end;
    align-self: baseline;
    background-image: url(luxoria-images/download.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 25px;
    overflow: hidden;
    border: 5px solid white;
}
.project-2{
    width: 40%;
    height: 70%;
    /* background-color: antiquewhite; */
    /* margin-top: 15%;  */
    align-self: last baseline;
    display: flex;
    align-items: end;
    background-image: url(luxoria-images/Weiss\ Modern\ LED\ Ceiling\ Light\ Dining\ Room\ Kitchen\ White-Warm\ white.jpeg);
    background-size: cover;
    border-radius: 25px;
    overflow: hidden;
    border: 5px solid white;
}
.project-page2{
    width: 100%;
    height: 110vh;
    /* background-color: violet; */
    display: flex;
    align-items: center;
    justify-content: space-around;

}


.project-3{
    width: 40%;
    height: 70%;
    /* background-color: antiquewhite; */
    align-self: first baseline;
    display: flex;
    align-items: end;
    background-image: url(luxoria-images/Faretto\ LED\ da\ incasso\ Beam\ \ 3\,3xH\ 3\,7-bianco.jpeg);
    background-size:cover;
    background-repeat: no-repeat;
    border-radius: 25px;
    overflow: hidden;
    border: 5px solid white;
}
.project-4{
    width: 30%;
    height: 80%;
    /* background-color: beige; */
    align-self: last baseline;
    display: flex;
    align-items: end;
    background-image: url(luxoria-images/Magnetische\ Schienen-Deckenleuchten\ Kühlergrilllicht\ 12W-3000K\ \(warmes\ Licht\).jpeg);
    background-size: cover;
    border-radius: 25px;
    overflow: hidden;
    border: 5px solid white;
}
.project-content{
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    gap: 2%;
    padding-left: 5%;
    background-color:white;
    opacity: 0;
    transition: ease-in;

}
.project-content h3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: black;
}
.project-content p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: black;
}
.project-1:hover .project-content{
    opacity: 1;
}
.project-2:hover .project-content{
    opacity: 1;
}
.project-3:hover .project-content{
    opacity: 1;
}
.project-4:hover .project-content{
    opacity: 1;
}

/* ...................services....................... */

.servicepage-container{
    width: 100%;
    height: 110vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    background-color: black;
    /* background-position: center; */
}
.service-title{
    width: 100%;
    height: 100px;
    display: flex;
    padding-left: 15%;
    align-items: center;
    font-size: 22px;
    color: rgb(245,132,31);
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}
.service-card-container{
    width: 90%;
    height: 80%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    /* background-color: blue; */
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.service-card{
    width: 380px;
    height: 70%;
    display: flex;
    flex-direction: column;
    padding-left: 2%;
    /* background-color: rgb(42, 16, 192); */
    /* border: 1px solid  white; */
    box-shadow: 1px 3px 10px 5px rgba(240, 233, 233, 0.3);
}
.service-card:hover{
    box-shadow: 1px 3px 10px 5px rgb(245,132,31);
    transition:scaleY(1.04)
}
.service-card img{
    width: 100px;
}
.service-card h3{
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin-top: 10%;
    margin-bottom: 5%;
}
.service-card p{
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: 200;
    line-height: 25px;
}
.service-card button{
    width: 150px;
    height: 50px;
    font-size: 15px;
    font-family: sans-serif;
    background-color: rgb(247 148 29);
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 10%;
}
/* ......................banner-2........................... */
.banner2-container{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2%;
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(luxoria-images/bannner2.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: fixed;
    background-color: aqua;
}
.banner2-container h2{
    font-size: 62px;
    color: rgb(245,132,31);
}
.banner2-container p{
    font-size: 42px;
    color:rgb(216, 132, 59);
}


/* ................why.................................... */

.why-choose-us {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color:black;
}
.why-title{
    width: 100%;
    height: 100px;
    display: flex;
    padding-left: 15%;
    align-items: center;
    font-size: 22px;
    color: rgb(245,132,31);
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}


.stats-container {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: aquamarine; */
}

.stat-box {
    width:30% ;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5%;
    /* background-color: rgb(48, 63, 201); */
    /* border: 1px solid rgb(245,132,31); */
    background-image: url(luxoria-images/iphone\ wallpapered\ simple\ christmas\ aesthetic.jpeg);
    background-size: cover;
}
.stat-box img {
    width: 80px;
    margin-top: 20%;
}

.stat-box p {
    font-size: 42px;
    font-weight: bold;
    color: rgb(245,132,31);
    font-family: Arial, Helvetica, sans-serif;
}
.stat-box h3 {
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color:white;
}

/* ................footer............................... */

.footer-container{
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(18,18,18);
}
.footer-content{
    width: 90%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: rgb(18,18,18); */
    border-bottom: 1px solid white;
}
.footer-content img{
    margin-left: 5%;
}
.footer-contact{
    width: 20%;
    height: 100%;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-around;
    align-items: center;
    /* background-color: rgb(42, 30, 174); */
}
.footer-contact img{
    width: 50px;
}
.footer-bottom{
    width: 100%;
    height: 20%;
    display: flex;
    font-size: 20px;
    font-weight: 500;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    align-items: center;
    justify-content: center;
    /* background-color: aqua;   */
}





    
    @media (max-width:769px){
    
        
      /* nav */
      .nav-items {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        background: rgba(255, 255, 255, 0.1); /* Transparent background */
        backdrop-filter: blur(10px); /* Frosted glass effect */
        -webkit-backdrop-filter: blur(10px); /* For Safari */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
        border-radius: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 60%;
        height: 50vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        z-index: 99;
      }

    .nav-items a {
        line-height: 10px;
    }

    .nav-items label {
        position: absolute;
        top: -1%;
        right: 5%;
    }
    .nav-items label img{
        margin-top: 50%;
    }
    .nav-items input {
        display: block;
    }

    #checking:checked~.nav-items {
        right: 0;
    }


    .navbar-container label {
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .navbar-container label img{
        width: 60%;
    }


   
    /* .............about........................ */
 
    
    .aboutpage-container{
        display: flex;
        flex-direction: column;
        background-position: center;
    }
    .about-heading{
        width: 100%;
        height: 30%;
        /* background-color: azure; */
        align-items: flex-start;
        padding-left: 10%;
        padding-top: 5%;
    }
    .about-content{
        width: 100%;
    }
    .about-content p{
        font-size: 18px;
    }
    .about-content button{
        width: 30%;
    }
    
    /* ............service........................ */
    
    .servicepage-container{
        height: 240vh;
    }
    .service-card-container{
        grid-template-columns: repeat(1,3fr);
        flex-direction: column;
        gap: 2%;
    }
    .service-card{
        width: 400px;
        height: 40%;
        padding-left: 5%;
    }
    .service-card p{
        font-size: 16px;
    }
    .service-card button{
        margin-top: 5%;
        margin-bottom: 5%;
    }
    }
    
    @media (max-width:426px){
    .navbanner-container{
        height: 70vh;
    }
 
    /* ..............nav....................... */
    .navlogo-section img{
        width: 100px;
        height: 80px;
    }
    .menu-icon{
        padding: 5%;
    }
    /* ...............banner..................... */
    .banner-container h1{
        font-size: 24px;
        margin-bottom: 25%;
    }
    /* .............about...................... */
    .aboutpage-container{
        height: 110vh;
    }
    .about-heading{
        padding-left: 5%;
        padding-top: 10%;
    }
    .about-content p{
        font-size: 18px;
        line-height: auto;
    }
    .about-content button{
        width: 150px;
        height: 50px;
    }
    /* ................product.............. */
    .product-title{
        justify-content: center;
        padding-left: 0%;
    }
    .productpage-container{
        height: 580vh;
        /* background-color: aqua; */
    }
    .product-container{
        display: flex;
        flex-direction: column;
        height: 98%;
        /* background-color: aqua; */
    }
    .section {
        width: 90%;
        height: 90%;
    }
    .box{
        height: 30%;
    }
    /* .............project.................. */
    .project-title{
        justify-content: center;
        padding-left: 0%;
    }
    .project-page1{
        height:150vh ;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .project-1{
        width: 80%;
        height: 40%;
        margin-left: 5%;
    }
    .project-2{
        width: 80%;
        height: 40%;
        margin-right: 5%;
    }
    .project-page2{
        height:150vh ;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .project-3{
        width: 80%;
        height: 40%;
        margin-left: 5%;
    }
    .project-4{
        width: 80%;
        height: 40%;
        margin-right: 5%;
    }
    
    /* ............service..................... */
    .service-title{
        justify-content: center;
        padding-left: 0%;
    }
    .service-card{
        width: 350px;
        height: 40%;
    }
    .service-card p{
        font-size:15px;
    }
    /* .............banner-2................ */
    .banner2-container{
        height: 50vh;
        background-size: cover;
    }
    .banner2-container h2{
        font-size: 34px;
    }
    .banner2-container p{
        font-size: 26px;
        font-family: cursive;
    }
    /* ..............why..................... */
    .why-choose-us{
        height: 130vh;
    }
    .why-title{
        align-items: center;
        justify-content: center;
        padding: 0%;
    }
    .stats-container{
        width: 100%;
        flex-direction: column;
    }
    .stat-box {
        background-position: center;
    }
    .stat-box img{
        width: 50px;
    }
    .stat-box p {
        font-size: 32px;
    }
    .stat-box h3 {
        font-size: 18px;
    }
    /* ..............footer.................. */
    .footer-content img{
        width: 120px;
    }
    .footer-contact{
       display: flex;
       justify-content: space-evenly;
       flex-direction: column;
    }
    .footer-contact img{
        width: 30px;
    }
    .footer-bottom{
        font-size: 16px;
    }
    }
    
    
    
    @media (max-width:376px){
    /* ..............nav....................... */
    .navlogo-section img{
        width: 80px;
        height: 60px;
    }
    .menu-logo{
        padding: 12%;
    }
   
    /* .............about...................... */
    .aboutpage-container{
        height: 110vh;
    }
    .about-heading span{
        font-size: 22px;
    }
    .about-heading h3{
        font-size: 26px;
    }
    .about-content p{
        font-size: 16px;
        line-height: auto;
    }
    .about-content button{
        width: 150px;
        height: 50px;
        font-size: 12px;
        margin-bottom: 5%;
    }
    /* ................product.............. */
    .productpage-container{
        height: 580vh;
    }
    .product-container{
        display: flex;
        flex-direction: column;
        height: 98%;
        /* background-color: aqua; */
    }
    .product-title{
        font-size: 22px;
    }
    .section {
        height: 95%;
        /* background-color: blue; */
    }
    .box{
        width: 100%;
        height: 30%;
    }
    /* ..........project................. */

    .project-page1{
        height: 140vh;
        /* background-color: antiquewhite; */
    }
    .project-1{
        width: 85%;
        height: 40%;
    }
    .project-2{
        width: 85%;
        height: 40%;
    }
    .project-page2{
        height: 140vh;
        /* background-color: antiquewhite; */
    }
    .project-3{
        width: 85%;
        height: 40%;
    }
    .project-4{
        width: 85%;
        height: 40%;
    }
    
    /* ............service..................... */
    
    .service-card{
        width: 320px;
        height: 40%;
    }
    .service-card p{
        font-size:13px;
    }
  
    /* ..............why..................... */
    .stat-box h3 {
        font-size: 16px;
    }
    /* ..............footer.................. */
    .footer-bottom{
        font-size: 12px;
    }
    }
    
    
    
    @media (max-width:321px){
    /* ..............nav....................... */
    .navlogo-section img{
        width: 60px;
        height: 50px;
    }
    .menu-icon{
        padding: 8%;
    }
    .banner-container{
        padding-left: 10%;
    }
 /* .............about...................... */
    .aboutpage-container{
        height: 115vh;
    }
    .about-content p{
        font-size: 16px;
        line-height: auto;
        margin-bottom: 2%;
    
    }
    .about-content button{
        margin-bottom: 10%;
    }
    /* ................product.............. */
    .productpage-container{
        height: 480vh;
    }
    .section{
        height: 40%;
    }
    .box{
        width: 90%;
        height: 30%;
    }
    /* ............service..................... */
    
    .service-card{
        width: 300px;
        height: 40%;
    }
    .service-card p{
        font-size:13px;
    }
    /* .............banner-2................ */
    .banner2-container h2{
        font-size: 28px;
    }
    .banner2-container p{
        font-size: 25px;
        font-family: cursive;
    }
    /* ..............why..................... */
    .stat-box h3 {
        font-size: 13px;
    }
    }