/* Made by Sooi Van Bostraeten - SooITech Business Solutions | Copyrights (c) 2026 by Nuga Best Medical Group - All rights reserved. */
/* Homepage design */
html{
    height:100%;
    width:100%;
    background-color:lightGray;
    overflow:auto;
}
body{
    width:96%;
    margin-top:0;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:5%;
    border:1px solid;
    overflow:inherit;
    background-color:#fff;
    text-align:center;
    font-family:Verdana, Arial, sans-serif;
    color:#000;
    font-size:16px;
    font-weight:normal;
}
h3{
    margin:0;
    box-shadow:-4px 4px 10px rgba(0,0,0,0.5);
}

/* Header design */
/* Navigation styling */
nav{
    width:100%;
}
nav ul{
    text-align:center;
    margin:0 0 0 0;
    padding-left:0;
}
nav ul li{
    list-style-type:none;
    width:25%;
    background:linear-gradient(#9FB3B5,#E3E9EA,#7C9799);
    float:left;
    display:block;
}
nav ul li a{
    text-decoration:none;
    font-size:1.7rem;
    opacity:0.5;
    filter:alpha(opacity=50);
}
nav ul li a:hover,nav ul li a:focus{
    color:firebrick;
    background-color:rgba(255, 255, 0, 0.4);
    letter-spacing:5px;
}
nav ul li a:visited{
    color:purple;
}
nav ul li a:active{
    color:green;
}
/* Logo styling */
#banner{
    margin-top:15px;
    padding-top:10%;
    background-image:url(../assets/animations/banner/nuga-best-header.gif);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    height:450px;
}
#banner h2{
    color:white;
    text-align:center;
    text-shadow:4px 4px 10px black;
}
#logo{
    width:30%;
    animation-name:revolution;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    -webkit-animation-name:revolution;
    -webkit-animation-duration:3s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -o-animation-name:revolution;
    -o-animation-duration:3s;
    -o-animation-timing-function:linear;
    -o-animation-iteration-count:infinite;
    -moz-animation-name:revolution;
    -moz-animation-duration:3s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:revolution;
    -ms-animation-duration:3s;
    -ms-animation-timing-function:linear;
    -ms-animation-iteration-count:infinite;
}
@-webkit-keyframes revolution{
    from{transform:rotateY(0deg);}
    to{transform:rotateY(360deg);}
}
@-moz-keyframes revolution{
    from{transform:rotateY(0deg);}
    to{transform:rotateY(360deg);}
}
@-o-keyframes revolution{
    from{transform:rotateY(0deg);}
    to{transform:rotateY(360deg);}
}
@-ms-keyframes revolution{
    from{transform:rotateY(0deg);}
    to{transform:rotateY(360deg);}
}
@keyframes revolution{
    from{transform:rotateY(0deg);}
    to{transform:rotateY(360deg);}
}

/* Main content design */
main{
    width:100%;
    margin:0;
    padding-bottom:3%;
}
#product-videos{
    margin-top:5%;
}
/* Disc styling */
#disc{
    border-radius:50%;
    display:inline-block;
    opacity:0.8;
    filter:alpha(opacity=80);
    width:400px;
    height:400px;
    margin-top:5%;
    background:-moz-radial-gradient(45px 45px 45deg,circle cover,grey 0%,black 100%,black 95%);
    background:-webkit-radial-gradient(45px 45px,circle cover,grey,black);
    background:radial-gradient(45px 45px 45deg,circle cover,grey 0%,black 100%,black 95%);
    animation-name:rotation;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    -webkit-animation-name:rotation;
    -webkit-animation-duration:3s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -o-animation-name:rotation;
    -o-animation-duration:3s;
    -o-animation-timing-function:linear;
    -o-animation-iteration-count:infinite;
    -moz-animation-name:rotation;
    -moz-animation-duration:3s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:rotation;
    -ms-animation-duration:3s;
    -ms-animation-timing-function:linear;
    -ms-animation-iteration-count:infinite;
}
@keyframes rotation{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
@-webkit-keyframes rotation{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
@-ms-keyframes rotation{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
@-o-keyframes rotation{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
@-moz-keyframes rotation{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
#center{
    width:105px;
    height:105px;
    background:orange;
    position:relative;
    top:37%;
    left:37%;
    display:block;
    border:0.5px solid #fff;
    border-radius:50%;
    text-transform:uppercase;
}
/* Pagers styling */
#pager a{
    font-size:3rem;
    font-weight:bolder;
    text-decoration:none;
    border-radius:50%;
    box-shadow:4px 4px 15px rgba(0,0,0,0.8);
    padding-left:10px;
    padding-right:10px;
}
#pager a:hover{
    opacity:0.7;
    filter:alpha(opacity=70);
    font-size:3.2rem;
    background:linear-gradient(to bottom,hsl(0,80%,50%),#10069f);
    color:white;
}
#previous{
    z-index:1;
    margin-left:10px;
    position:fixed;
    top:45%;
    left:4%;
}
#next{
    z-index:1;
    margin-right:10px;
    position:fixed;
    top:45%;
    right:4%;
}

/* Footer design */
footer{
    position:relative;
    bottom:0;
    right:0;
    left:0;
    margin:0;
    float:left;
    text-align:center;
    width:100%;
    padding-top:20px;
    padding-bottom:10px;
    background:linear-gradient(to bottom,hsl(0,80%,50%),#10069f);
    color:whitesmoke;
}
footer img{
    margin:0;
    width:4%;
}
footer img:hover{
    opacity:0.6;
    filter:alpha(opacity=60);
}
footer small{
    margin:0;
    color:white;
    display:block;
    margin-top:1%;
}
#x,#tiktok{
    background-color:white;
    border-radius:10%;
}

/* products page design */
/* Header styling */
#products-banner{
    margin-top:15px;
    padding-top:10%;
    background-image:url(../assets/animations/banner/nuga-best-massage-bed-banner.gif);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    height:450px;
}
#products-banner h2{
    color:white;
    text-align:center;
    text-shadow:4px 4px 10px black;
    position:relative;
    top:300px;
}
#products-banner p{
    color:white;
    text-align:center;
    font-size:18px;
    transform:translateY(400%);
}
/* main styling */
main ul li{
    list-style-type:none;
}
#products{
    width:25%;
    padding-left:5%;
    float:left;
}
#products ul li img{
    width:80%;
    margin-top:9%;
    box-shadow:4px 4px 10px rgba(0,0,0,0.5);
}
#products ul li img:hover{
    opacity:0.7;
    filter:alpha(opacity=70);
    transform:scale(1.1);
}
#product-details{
    width:55%;
    border-radius:2%;
    box-shadow:4px 4px 10px rgba(0,0,0,0.5);
    float:left;
    background:linear-gradient(to bottom,hsl(0,80%,50%),#10069f);
}
#product-details h3{
    background-color:white;
    box-shadow:-4px 4px 10px rgba(0,0,0,0.5);
    margin-bottom:5%;
}
#product-details h4{
    color:whitesmoke;
}
table{
    width:100%;
    margin-top:15%;
    background-color:white;
    border:1px solid black;
    border-collapse:collapse;
}
table th,table caption{
    text-transform:uppercase;
}
tbody tr:nth-child(odd){
    background-color:#868585;
}
tbody tr:hover{
    opacity:0.6;
    filter:alpha(opacity=60);
}
#video1,#video2,#video3{
    width:100%;
}
caption{
    font-size:larger;
    font-weight:bold;
    border:1px solid black;
    background-color:white;
    padding-top:15px;
    padding-bottom:15px;
}
td img:hover{
    transform:scale(1.1);
}

/* Order form page design */
/* Header styling */
#order-form-banner{
    margin-top:15px;
    padding-top:10%;
    /*  */
    background-image:url(../assets/animations/banner/);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    height:450px;
}
/* main styling */
form{
    width:100%;
    margin:0;
    text-align:center;
    background:linear-gradient(to bottom,hsl(0,80%,50%),#10069f);
    color:white;
}
legend{
    font-size:1.5em;
    font-weight:bold;
}
fieldset{
    border:solid 4px #009D22;
    width:70%;
    margin:auto;
    border-radius:2%;
}
input,select,textarea{
    border:solid 1px rgb(0,0,0);
    margin:5px auto;
    padding:5px 30px 5px 50px;
    width:50%;
    text-align:center;
    font-size:1em;
    border-radius:5px;
}
input:focus,textarea:focus{
    box-shadow:6px 6px 10px #009D22;
}
select{
    width:35%;
}
input[type=date]{
    width:25%;
}
input[type=checkbox],input[type=radio]{
    width:4%;
}
input[type=submit]{
    background-color:#2eef1e;
    width:43%;
}
input[type=submit]:hover{
    opacity:0.5;
    filter:alpha(opacity=50);
    transition:opacity 0.5s linear;
}
label{
    display:block;
    margin-top:4%;
    font-weight:bold;
}

/* Contact page design */
/* Header styling */
#contact-form-banner{
    margin-top:15px;
    padding-top:10%;
    /*  */
    background-image:url(../assets/animations/banner/);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    height:450px;
}
/* Main styling */
#contact{
    margin-left:auto;
    margin-right:auto;
    width:50%;
    text-align:justify;
    line-height:1.6em;
}
#contact span{
    font-size:1.3rem;
    letter-spacing:5px;
    text-shadow:2px 2px 4px #2eef1e;
    text-transform:uppercase;
}