* {
 margin: 0;
 padding: 0;
 font-family: cursive, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
  Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 font-size: 18px;
}

a {
 text-decoration: none;
}

.fas,
.fa,
.fab {
 margin-right: 10px !important;
 color: var(--sec-color);
}

:root {
 --prim-color: rgb(255, 157, 230);
 --sec-color: rgb(228, 10, 210);
 --tet-color: rgb(250, 240, 250);
}

.main-nav {
 position: static;
 display: flex;
 background-color: var(--prim-color);
 max-height: 50px;
 overflow: hidden;
 flex-direction: row;
 justify-content: space-between;
 padding: 0 50px;
 border-radius: 0 0 10px 10px;
 box-shadow: 0px 3px 7px 0px var(--sec-color);
}

.main-nav .nav-items {
 display: flex;
 list-style: none;
 flex-direction: row;
 justify-content: center;
 /* align-items: center; */
 gap: 10px;
 position: relative;
}

.main-nav .nav-items .dropdown-icon {
 display: none;
 scale: 1.2;
}

.main-nav .nav-items .nav-item {
 display: block;
 font-size: 18px;
 color: white;
 font-weight: bold;
 padding: 15px;
 max-height: 50px;
 text-wrap: nowrap;
 max-height: 50px;
 list-style: none;
 transition: all 0.5s ease-out;
}

.main-nav .nav-items .nav-item:hover {
 background-color: white;
 color: var(--sec-color);
 border-radius: 0 50px 50px 0;
 box-shadow: 5px 0px 0px 0px var(--sec-color);
}

.main-nav .nav-logo {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 max-height: 50px;
 width: fit-content;
 text-wrap: nowrap;
 justify-content: center;
 align-items: center;
 gap: 10px;
 color: var(--sec-color);
}

.main-nav .nav-logo img {
 max-width: 50px;
}

.body-section {
 display: block;
 width: fit-content;
 margin: 20px auto;
 width: 90%;
 background-color: var(--prim-color);
 padding: 10px 10px;
 border-radius: 10px;
}

.section-heading {
 display: block;
 width: fit-content;
 margin: auto;
 color: var(--tet-color);
 font-size: 30px;
}

.section-heading:hover {
 scale: 1.1;
 color: var(--sec-color);
}

.section-body {
 background-color: var(--prim-color);
 padding: 20px;
 text-align: center;
}

.section-content {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 width: 100%;
}

/* slideshow styles */
#slideshow {
 display: none;
}
.slide-box {
 display: flex;
 position: relative;
 max-width: 95%;
 overflow-x: auto;
 overflow-y: hidden;
 margin: 0 auto;
 flex-direction: row;
 gap: 10px;
}

.slide-box .slide-img {
 display: inline-block;
 max-width: 100%;
 max-height: 300px;
 aspect-ratio: 1/1;
 margin: auto;
}

/* about section */
.about-card {
 max-width: 100%;
 height: fit-content;
 min-height: 200px;
 position: relative;
 border-radius: 20px;
 overflow: hidden;
 font-size: 18px;
 padding: 20px;
 text-wrap: wrap;
 display: grid;
 grid-template-columns: 1fr auto;
}

.about-heading {
 text-wrap: wrap;
 text-align: left;
 margin: auto;
 text-transform: uppercase;
 margin-bottom: 10px;
}
.about-card .about-image {
 width: fit-content;
 border-radius: 10px 0 0 10px;
 margin-right: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 padding: 20px;
}

.about-card .about-image img {
 max-width: 200px;
 border-radius: 20px;
 image-rendering: pixelated;
 box-shadow: 3px 3px 7px 0px var(--sec-color);
}

/* gallery */
#gallery {
 background: linear-gradient(var(--sec-color) 1%, var(--prim-color), white);
}

#gallery .section-body {
 background: transparent;
}
.gallery-images {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 gap: 10px;
 justify-content: center;
 padding: 20px;
 background-color: var(--tet-color);
 border-radius: 10px;
 padding: 10px 10px;
 box-shadow: 5px 3px 10px 0px var(--sec-color);
 max-height: 415px;
 overflow-x: hidden;
 overflow-y: auto;
 object-fit: fit !important;
}
.gallery-img-box,
.gallery-img-box img {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 gap: 10px;
 justify-content: center;
 min-width: 200px;
 width: 200px;
 max-width: 200px;
 aspect-ratio: 1/1;
 border: 2px solid var(--sec-color);
 box-shadow: 5px 3px 10px 0px var(--prim-color);
 overflow: hidden;
 object-fit: fit !important;
}

.gallery-img-box img:hover {
 transform: scale(0.9);
 transition: transform 0.3s ease-in-out;
}

.image-expanded {
 display: none;
 position: fixed;
 height: auto;
 max-height: 90vh;
 width: fit-content !important;
 max-height: 90vh;
 background: linear-gradient(var(--tet-color), var(--sec-color) 80%);
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: 20px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 10px;
 border: 2px solid var(--tet-color);
 box-shadow: 3px 3px 5px 0 var(--sec-color);
 z-index: 1;
 overflow: hidden;
 padding: 0 10px;
 object-fit: fit !important;
}
.image-expanded .expanded-img-block {
 display: flex;
 justify-content: center;
 max-height: 80%;
 width: auto;
 height: auto;
 position: relative;
 overflow: hidden !important;
 background-color: var(--prim-color);
 border-radius: 40px !important;
 object-fit: fit !important;
}

.expanded-img-block img {
 display: block;
 max-width: 100%;
 width: auto;
 image-resolution: 1080;
 max-height: 100%;
 position: relative;
 overflow: hidden !important;
 box-shadow: 3px 3px 5px 0 var(--sec-color);
}

.image-expanded .expanded-image-top {
 display: flex;
 justify-content: end;
 width: 96.7%;
}
.image-expanded .expanded-image-top button {
 background-color: transparent;
 border: none;
 color: var(--sec-color);
 font-weight: bolder;
}

.image-expanded .expanded-image-top button:hover {
 scale: 1.7;
}
.image-expanded .expanded-image-bottom {
 display: flex;
 flex-direction: row;
 justify-content: center;
 gap: 20px;
}
.image-expanded .expanded-image-bottom button {
 display: block;
 background-color: transparent;
 border: none;
 color: var(--tet-color);
 padding: 0;
 font-size: 35px;
}

.image-expanded .expanded-image-bottom button:hover {
 scale: 1.5;
}

/* contact section */
#contacts {
 max-width: 95% !important;
 margin-top: 20px;
 border-top: 2px solid var(--sec-color);
 border-bottom: none;
 background: linear-gradient(var(--tet-color), var(--prim-color));
}

#contacts .section-heading {
 color: var(--sec-color);
}
.contact-card {
 background: linear-gradient(var(--prim-color), var(--tet-color));
 border-radius: 20px;
 position: relative;
 display: grid;
 grid-template-columns: 1fr 1fr;
 padding: 20px;
 width: calc(100%-40px);
 gap: 20px;
 max-width: 95% !important;
}

.contact-heading {
 color: var(--sec-color);
 text-align: center;
 margin-bottom: 10px;
}

.contact-info .contact-info-content .fas {
 margin-right: 10px;
}

.contact-info .contact-info-content {
 display: flex;
 flex-direction: column;
 gap: 10px;
 /* align-items: center; */
 justify-content: flex-start;
 text-wrap: wrap;
}

.contact-form {
 display: flex;
 justify-content: center;
 flex-direction: column;
 max-width: 95% !important;
 overflow: hidden;
}

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

.contact-form button {
 background-color: var(--sec-color);
 color: white;
 font-size: 19px;
 padding: 5px 10px;
 margin: 20px auto;
 border-radius: 10px;
}

.contact-form button:hover {
 background-color: var(--tet-color);
 color: var(--sec-color);
 box-shadow: 1px 1px 5px 3px var(--sec-color);
 font-weight: bold;
 border: none;
 scale: 1.1;
}

.contact-form .form-group input {
 margin: 5px 0 10px 0px;
 height: 20px;
 border-radius: 10px;
 padding: 5px;
}

.contact-form .form-group textarea {
 border-radius: 10px;
 padding: 10px;
 max-height: 150px;
 max-width: 410px;
 /* height: 50px !important; */
 min-width: 200px;
 min-height: 50px;
 height: fit-content;
 text-overflow: clip;
}

.contact-info {
 display: flex;
 border-right: 2px solid var(--sec-color);
 padding-right: 20px;
 flex-direction: column;
 padding: 0 10px;
 flex-wrap: wrap;
}

.contact-card .social-media-content {
 display: flex;
 gap: 17px;
 flex-direction: column;
 flex-wrap: wrap;
 border-top: 1px solid var(--sec-color);
 padding-top: 20px;
 border-radius: 0 20px 0 0;
 margin-top: 20px;
 width: 100%;
}

.contact-card .social-media-content a {
 color: var(--sec-color);
 font-size: 17px;
 text-decoration: none;
 text-wrap: nowrap;
 width: fit-content;
}

.contact-card .social-media-content a:hover {
 color: var(--tet-color);
 font-weight: bold;
}

.contact-card .social-media-content a i {
 margin-right: 5px;
}

/* pricelist  */
#pricelist {
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 justify-content: center;
}
.price-list {
 display: block;
 width: 100%;
}

.price-list table {
 display: table;
 width: 90%;
 border-collapse: collapse;
 border: 2px solid var(--sec-color);
 margin: auto;
 margin-bottom: -40px;
 max-height: 500px;
 max-width: 500px;
 min-width: 200px;
 overflow: visible;
 box-shadow: 5px 5px 7px 0 var(--tet-color);
}

.price-list table thead tr {
 background-color: var(--sec-color);
 border-bottom: 4px solid var(--tet-color);
}

.price-list table thead tr th {
 padding: 5px 10px;
 color: black;
 text-align: left;
}

.price-list table tbody {
 display: table-row-group;
}
.price-list table tbody tr:nth-child(even) {
 background-color: var(--tet-color);
}
.price-list table tbody tr:nth-child(odd) {
 background-color: rgb(253, 196, 241);
}
.price-list table tbody tr:hover {
 background-color: var(--sec-color);
}

.price-list table tbody tr:hover > td:nth-child(2) {
    font-weight: bold;
}


.price-list table tbody tr td {
 padding: 3px 10px;
 color: black;
 text-align: left;
}

.splitter-row {
 background-color: black !important;
 text-align: center !important;
 font-weight: bold !important;
 color: white !important;
}

.splitter-row td{
    color: var(--tet-color) !important;
    text-align: center !important;
}

/* foooter */
.main-footer {
 display: flex;
 position: relative;
 height: fit-content;
 padding: 20px 10px;
 background-color: var(--prim-color);
 flex-direction: row;
 justify-content: space-evenly;
}

.main-footer a {
 color: var(--sec-color);
 font-weight: bold;
}

.main-footer .copyright-sec {
 display: flex;
 flex-direction: row;
 gap: 20px;
 justify-content: space-evenly;
}