/***************************************
*	Author: 			Travolgi
*	Theme: 			Sled Html
*	Version:			3.0.5
*  Created:		 	11/01/2023
*  Last update: 	28/12/2025
***************************************/

/*--------------------------------------------------------

CONTENT:

	1.  CSS RESET
	2.  UTILITIES
	3.  HOMEPAGE NAVIGATION
	4.  PAGE HEADER
	5.  NAV TOGGLE
	6.  TEAM
	7.  REVIEWS
	8.  TABS
	9.  MENUS
	10. GALLERY
	11. LIGHTBOX MODAL
	12. PRICING
	13. SPONSOR
	14. FAQS
	15. CONTACT INFO AND MAPS
	16. CONTACT FORM
	17. CALL TO ACTION
   18. WORKSHOP
   19. FOOTER

--------------------------------------------------------*/

/*--------------------------------------------------------
1. CSS RESET
--------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	outline: none;
	box-sizing: border-box;
}

:root {
	--white: #fff;
	--black: #181818;
	--primary: 10,121,136;
	--green: #08b308;
	--red: #e40b00;
	--w-overlay: rgba(255,255,255,.85);
	--overlay: rgba(0,0,0,.5);

	--gap: 2.6rem;
	--radius: .8rem;
	--border: .15rem solid rgba( var(--primary), .6);
	--ff-secondary: 'Ubuntu', sans-serif;

	--anim: .4s cubic-bezier(.5, .05, .155, .99);
}
body.primary-gym {
	--black: #261900;
	--primary: 255,165,0;
}
body.primary-beer {
	--black: #1a110c;
	--primary: 181,103,58;
	--overlay: rgba(26,17,12,.5);
}
body.primary-halloween {
	--black: #130912;
	--primary: 239, 72, 1;
	--violet: 51, 26, 54;
}
body.primary-florist {
	--black: #130912;
	--primary: 221, 103, 118;
	--secondary: 89, 117, 84;
}
body.primary-photographer {
	--black: #050d0d;
	--primary: 14 ,167, 158;
	--secondary: 175, 9, 83;
}

::-webkit-scrollbar {
	width: .7rem;
}
::-webkit-scrollbar-track {
	background: transparent; 
}
::-webkit-scrollbar-thumb {
	border-radius: 1rem;
}
html {
	scrollbar-width: thin;
	scroll-behavior: smooth;
}

body {
	width: 100%;
	min-height: 100vh;
	font-family: var(--ff-secondary);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--white);
	background-color: var(--black);
   overflow-x: hidden;
}
body.primary-gym,
body.primary-florist {
	background-color: var(--white);
}
body.primary-gym main,
body.primary-gym main h1,
body.primary-gym main h2,
body.primary-florist main,
body.primary-florist main h1,
body.primary-florist main h2 {
	color: var(--black);
}
body.primary-halloween h1,
body.primary-halloween h2,
body.primary-halloween h3 {
   font-family: 'Henny Penny', serif;
}
body.primary-florist {
	font-family: 'Roboto', sans-serif;
}
body.primary-florist h1,
body.primary-florist h2,
body.primary-florist h3 {
	font-family: "Petit Formal Script", serif;
}
body.primary-photographer {
	font-family: 'Montserrat', serif;
}
body.primary-photographer h1,
body.primary-photographer h2,
body.primary-photographer h3 {
	font-family: "Montserrat", serif;
}

header, footer {
   position: relative;
   display: block;
   text-align: center;
}
section, article, footer {
	padding-block: 2rem;
}

h1, h2, h3 {
	color: var(--white);
}
h1 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1rem;
	
}
h2 {
	font-size: 1.6rem;
	font-weight: 600;
}
h3 {
	font-size: 1.2rem;
}

body.primary-halloween h1 {
	font-size: 2.5rem;
}
body.primary-halloween h2 {
	font-size: 1.8rem;
}
body.primary-halloween h3 {
	font-size: 1.5rem;
}
body.primary-photographer h1,
body.primary-photographer .title {
	font-size: 4.5rem;
	font-weight: 800;
}

a {
	color: rgb( var(--primary) );
	text-decoration: none;
	transition: var(--anim);
	cursor: pointer;
}
a:hover {
	color: rgba( var(--primary), .8);
	text-decoration: underline;
}
body.primary-photographer a:not(a.btn) {
	color: rgb( var(--secondary) );
	font-weight: 600;
}
button {
	background-color: rgba( var(--primary), .6);
	cursor: pointer;
}

img {
	width: 100%;
}


/*--------------------------------------------------------
2. UTILITIES
--------------------------------------------------------*/
.container {
	padding: 5rem 1rem;
	max-width: 60rem;
	margin-inline: auto;
}
.primary-photographer .container {
	max-width: 66rem;
}
.section-with-bg {
   background: var(--bg-url) no-repeat center;
   background-size: cover;
}
.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 2rem;
}
.gtc-2-1 {
	grid-template-columns: 1fr .5fr;
}
.gtc-2-3-1 {
	grid-template-columns: 2fr 3fr 1fr;
	align-items: start;
}
.gtc-x3 {
	grid-template-columns: repeat(3, 1fr);
}
.g-3 {
   gap: 3rem;
}

.hidden {
	display: none;
}

.inline, ul.inline li {
	display: inline-block;
	padding-inline: .6rem;
}

.subtitle {
   font-style: italic;
   font-weight: 300;
	color: rgb( var(--primary) );
}
.italic {
   font-style: italic;
}
.txt-center {
	text-align: center;
}
.txt-left {
	text-align: left;
}
.txt-white {
	color: var(--white) !important;
}
.txt-black {
	color: var(--black) !important;
}
.txt-primary {
	color: rgb( var(--primary) );
}
.txt-secondary {
	color: rgb( var(--secondary) );
}
.bg-top-center {
   background-position: top center;
}
.bg-dark {
   background-color: var(--black);
}
.bg-light {
	background: rgba(255,255,255, .2);
}
.bg-violet {
	background: rgb( var(--violet) );
}
.bg-secondary {
	background: rgb( var(--secondary) );
}
.bg-br-primary {
   background: rgba(var(--primary),.2);
	border: var(--border);
	border-color: rgb( var(--primary) );
}
body.primary-florist .bg-image {
	background: url('../imgs/slider/florist/slider.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.rounded {
	border-radius: .8rem;
}
.p-1 {
	padding: 1.5rem 1.2rem;
}
.mt-1 {
	margin-top: 1rem;
}
.mt-2 {
	margin-top: 2rem;
}
.mb-1 {
	margin-bottom: 1rem;
}
.mb-2 {
	margin-bottom: 2rem;
}

.btn {
	display: inline-block;
   border-radius: 1rem;
   padding: .2rem 1rem;
   font-style: italic;
   font-weight: 300;
   color: var(--white);
   background-color: rgba( var(--primary), .6);
}
body.primary-photographer .btn {
   padding: .4rem 1.6rem;
}
.bubble-icon {
	display: inline-block;
   width: 5rem;
   aspect-ratio: 1;
	padding: 1rem;
   border-radius: 50%;
   background-color: rgb( var(--primary) );
}
.bubble-icon > i {
   font-size: 2rem;
   padding-top: .5rem;
}
body.primary-photographer .bubble-icon {
   background: rgb( var(--secondary) );
}

a.btn {
	border: var(--border);
	border-color: rgba( var(--primary), 6 );
	transition: var(--anim);
	text-transform: uppercase;
	font-weight: 700;
}
a.btn:hover {
	color: rgb( var(--primary) );
	background-color: transparent;
	border: var(--border);
	text-decoration: none;
}
body.primary-photographer a.btn:hover {
	background-color: rgb( var(--secondary) );
	color: var(--white);
}

.relative {
	position: relative;
}

.label {
	background-color: rgb(238, 0, 0);
	position: absolute;
	right: 0;
	top: 1rem;
	color: var(--white);
	font-weight: bold;
	padding: .5rem 1rem;
	z-index: 99;
}
.relative.label {
	position: relative;
	right: unset;
	top: unset;
	display: inline-block;
}

.card {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1rem;
	align-items: center;
	box-shadow: 0 .15rem .2rem var(--overlay);
	border-radius: .3rem;
	padding: 1rem;
}
.card i {
	height: 3rem;
	width: 3rem;
	padding: 1rem;
	background-color: rgb( var(--primary) );
	border-radius: 50%;
	color: var(--white);
}
.card-sm {
	padding: 0;
	box-shadow: none;
	padding: .5rem;
}
.card-sm i {
	height: 3.5rem;
	width: 3.5rem;
	font-size: 1.5rem;
}

.top-shadow {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 8rem;
   background-image: linear-gradient(var(--overlay), transparent);
}

.flogo img {
	width: 16rem;
	margin-bottom: .8rem;
}
.flogo h3 {
	font-weight: 500;
	margin-bottom: 1.8rem;
}

.pulse {
	animation: pulse 4s infinite ease-in-out alternate;
	transition: 1s ease;
}
@keyframes pulse {
	0% { transform: scale(1); }
	40% { transform: scale(0.9); }
	to { transform: scale(1.05); }
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

@media (max-width: 72em) {
	.grid, .gtc-2-1, .gtc-x3 {
		grid-template-columns: 1fr;
	}
	.sm-hidden {
		display: none;
	}
	.sm-block {
		display: inline-block;
	}
}


button#gotop {
   display: none;
   position: fixed;
   right: 3rem;
   bottom: 3rem;
   aspect-ratio: 1;
   padding: .8rem 1rem;
   border-radius: 50%;
   border: var(--border);
   border-color: rgb( var(--primary) );
   color: rgb( var(--primary) );
   background-color: transparent;
   animation: fadeIn ease-out 1.5s;
   transition: var(--anim);
   z-index: 995;
}
button#gotop:hover {
   color: var(--white);
   background-color: rgb( var(--primary) );
}
body.primary-photographer button#gotop {
   padding: .6rem .8rem;
   border: .25rem solid rgb( var(--secondary) );
}

button#gotop i {
   font-size: 1.8rem;
}

.visible {
   display: block !important;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (max-width: 72em) {
   button#gotop {
      right: 1rem;
      bottom: 1rem;
      background-color: var(--black);
   }
}


.btn-buy {
	z-index: 999999;
   position: fixed;
   top: 25%;
	right: -8rem;
	padding-inline: .8rem;
   border-radius: 0;
   border-right: 0;
   padding-right: 2rem;
   font-size: 1.3rem;
}
.btn-buy span {
	margin-left: .5rem
}
.btn-buy:hover {
	right: -.8rem;
}


/*--------------------------------------------------------
3. HOMEPAGE NAVIGATION
--------------------------------------------------------*/
header.logo {
   position: fixed;
   top: 0;
   width: 100%;
   padding-block: 1rem;
   z-index: 9;
}
header img {
   position: relative;
   width: 12rem;
   z-index: 10;
}
header.logo h2 {
   font-size: 1.3rem;
   font-weight: 500;
   text-shadow: 0 0 .8rem var(--white);
}
main.slider {
	overflow: hidden;
   scroll-behavior: smooth;
}
.slider {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: all 1s ease;
}
.slider-gym {
   background-image: url('../imgs/slider/gym/slide1.webp');
   animation: slideGymBg 15s ease-in-out infinite alternate;
}
.slider-restobar {
   background-image: url('../imgs/slider/restobar/slide1.webp');
   animation: slideRestobarBg 20s ease-in-out infinite alternate;
}
.slider-beer {
   background-image: url('../imgs/slider/beer/slide.webp');
}
.slider-halloween {
   background-image: url('../imgs/slider/halloween/slide.webp');
}
.slider-florist {
   background-image: url('../imgs/slider/florist/slider.webp');
}
.slider-photographer {
	background-image: url('../imgs/slider/photographer/slide1.webp');
	animation: slidePhBg 20s ease-in-out infinite alternate;
}
nav#navbar h1 {
	font-size: 2.5rem;
   color: var(--white);
}
nav#navbar,
nav#navbar ul,
nav#navbar ul li,
nav#navbar ul li a {
   width: 100%;
   height: 100%;
}

nav#navbar ul {
   min-height: 100vh;
   display: grid;
   grid-template-columns: repeat(8, 25vw);
}
nav#navbar ul li {
   text-align: center;
   transition: background-color var(--anim);
}
nav#navbar ul li:hover {
   background-color: rgba( var(--primary), .6);
}
body.primary-halloween nav#navbar ul li:hover,
body.primary-photographer nav#navbar ul li:hover {
   background-color: var(--overlay);
}
body.primary-florist nav#navbar ul li:hover {
   background-color: rgba( var(--secondary) , .6 );
}
nav#navbar.nav-dark ul li:hover {
   background-color: var(--overlay);
}
nav#navbar ul li a {
   display: grid;
   place-items: center;
   grid-template-rows: .8fr 1fr 1fr;
   text-decoration: none;
}
body.primary-photographer nav#navbar ul li a {
   grid-template-rows: 1.5fr 1fr 1fr;
}
body.primary-photographer nav#navbar ul li h1 {
	position: relative;
	font-weight: 800;
   transition: var(--anim);
	margin-bottom: 1.5rem;
}
body.primary-photographer nav#navbar ul li h1::after {
	background-color: rgb(var(--secondary));
	border-radius: 1rem;
	bottom: -.5rem;
	content: "";
	height: .4rem;
	left: 50%;
	position: absolute;
	transform: translate(-50%);
	width: 6rem;
}
nav#navbar ul li a section {
   grid-area: 2;
}
nav#navbar ul li a section p.btn {
   transform: translateY(-4rem);
   transition: all var(--anim);
   opacity: 0;
}
nav#navbar ul li a:hover section p.btn {
   transform: translateY(0);
   opacity: 1;
}

nav#navbar ul li a footer {
   grid-area: 3;
   align-self: end;
   padding-bottom: 1.5rem;
   transform: translateY(100%);
   transition: all var(--anim);
}
nav#navbar ul li a:hover footer {
   transform: translateY(0);
}
nav#navbar ul li a footer i {
   font-size: 2rem;
   color: var(--white);
}
body.primary-photographer nav#navbar ul li a footer i {
	width: 66px;
	height: 66px;
   font-size: 2rem;
   color: var(--white);
   background-color: rgb( var(--primary) );
	border: .25rem solid rgb( var(--secondary) );
	padding: .8rem;
	border-radius: 50%;
	margin-bottom: .5rem;
}
nav#navbar ul li a footer h3 {
   color: var(--primary);
   font-style: italic;
	font-weight: 300;
}
nav#navbar ul li a footer p {
   color: var(--white);
   font-weight: 500;
}

@keyframes slideGymBg {
   0% {
      background-image: url('../imgs/slider/gym/slide1.webp');
   }
   33.5% {
      background-image: url('../imgs/slider/gym/slide2.webp');
   }
   66.5% {
      background-image: url('../imgs/slider/gym/slide3.webp');
   }
   100% {
      background-image: url('../imgs/slider/gym/slide4.webp');
   }
}

@keyframes slideRestobarBg {
   0% {
      background-image: url('../imgs/slider/restobar/slide1.webp');
   }
   25% {
      background-image: url('../imgs/slider/restobar/slide2.webp');
   }
   50% {
      background-image: url('../imgs/slider/restobar/slide3.webp');
   }
   75% {
      background-image: url('../imgs/slider/restobar/slide4.webp');
   }
   100% {
      background-image: url('../imgs/slider/restobar/slide5.webp');
   }
}
@keyframes slidePhBg {
   0% {
      background-image: url('../imgs/slider/photographer/slide1.webp');
   }
   25% {
      background-image: url('../imgs/slider/photographer/slide2.webp');
   }
   50% {
      background-image: url('../imgs/slider/photographer/slide3.webp');
   }
}


@media (max-width: 72em) {
   main.slider {
      overflow: auto;
   }
   .slider-gym {
      background-image: url('../imgs/slider/gym/slide-sm.webp');
      animation: unset;
   }
   .slider-beer {
      background-image: url('../imgs/slider/beer/slide-sm.webp');
   }
   .slider-halloween {
      background-image: url('../imgs/slider/halloween/slide-sm.webp');
   }
   .slider-florist {
      background-image: url('../imgs/slider/florist/slider-sm.webp');
   }
   nav#navbar ul {
      display: grid;
      grid-template-columns: 1fr;
      margin-top: 7.5rem;
   }
   .primary-photographer nav#navbar ul {
      margin-top: 16.5rem;
   }
   nav#navbar ul li a {
      grid-template-rows: 1fr;
   }
   nav#navbar ul li a section {
      grid-area: 1;
   }
   nav#navbar ul li a section p.btn {
      transform: translateY(0);
      opacity: 1;
   }
   nav#navbar ul li a footer {
      display: none;
   }
}


/*--------------------------------------------------------
4. PAGE HEADER
--------------------------------------------------------*/
.page-title {
   display: grid;
   place-items: center;
   grid-template-rows: .8fr 1fr .5fr;
   gap: 2rem;
   min-height: 40vh;
   padding: 0;
   background-color: rgba( var(--primary), .6);
   z-index: 9;
}

.page-title h1 {
   font-size: 2.56rem;
}

.goback {
   width: 3rem;
   height: 3rem;
   position: relative;
}
.goback::before, .goback::after {
   content: '';
   display: inline-block;
   position: absolute;
   inset: 0;
   top: 2rem;
   width: 100%;
   height: .1rem;
   background-color: var(--white);
   transform: rotate(45deg);
   transition: transform var(--anim);
}
.goback::after {
   transform: rotate(-45deg);
}
.goback:hover::before {
   transform: translateX(1.05rem) rotate(45deg);
}
.goback:hover::after {
   transform: translateX(-1.05rem) rotate(-45deg);
}

.page-title > i.bubble-icon {
   font-size: 2rem;
}

.page-title > .bubble-icon {
   margin-bottom: -4rem;
   display: grid;
   place-content: center;
}
.bg404 {
   min-height: 100vh;
   display: grid;
   place-items: center;
   background-image: url(../imgs/slider/restobar/slide3.webp);
   background-size: cover;
}

/*--------------------------------------------------------
5. NAV TOGGLE
--------------------------------------------------------*/
.nav-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: .4rem;
	width: 3.6rem;
	padding: .8rem;
	z-index: 996;
}
.nav-toggle span {
	font-size: .7rem;
	font-weight: 400;
	margin-top: .2rem;
	color: var(--white);
}
.nav-toggle .bar1,
.nav-toggle .bar2,
.nav-toggle .bar3 {
	width: 100%;
	height: .1rem;
	background: var(--white);
	transition: var(--anim);
}
.nav-toggle .bar1,
.nav-toggle .bar3 {
	width: 75%;
}
.nav-toggle:hover .bar1,
.nav-toggle:hover .bar2,
.nav-toggle:hover .bar3 {
	background-color: var(--black);
}
.nav-toggle[aria-expanded="true"] .bar1,
.nav-toggle[aria-expanded="true"] .bar3 {
	width: 100%;
	transform: rotate(-45deg) translate(-25%);
}
.nav-toggle[aria-expanded="true"] .bar3 {
	transform: rotate(45deg) translate(-25%);
}
.nav-toggle[aria-expanded="true"] .bar2 {
	width: 0;
}
#navpannel {
	position: fixed;
	top: 4.5rem;
	right: -1rem;
	width: 18rem;
	max-height: 70vh;
	padding: 1rem;
	padding-right: 4.5rem;
	border: var(--border);
	border-color: rgba( var(--primary), .6);
	border-radius: var(--radius);
	background: var(--black);
	opacity: 0;
	overflow-y: scroll;
	transform: translateX(100%);
	transition: var(--anim);
	z-index: 995;
}
.primary-florist #navpannel {
	background-color: var(--white);
	border-color: rgba( var(--secondary), .6);
}
#navpannel[data-visible="true"] {
	opacity: 1;
	transform: translateX(0%);
}
#navpannel ul {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
#navpannel ul li.has-submenu {
	display: grid;
}
#navpannel ul li.has-submenu ul.submenu {
	display: none;
	position: absolute;
	padding-left: 2rem;
	padding-block: .5rem;
	transition: var(--anim);
}
#navpannel ul li.has-submenu.open ul.submenu {
	position: relative;
	display: block;
}


/*--------------------------------------------------------
6. TEAM
--------------------------------------------------------*/
.team-vertical {
   display: grid;
   grid-template-columns: 1fr min-content 1.2rem;
   align-items: start;
}

.team-vertical img {
   border-radius: .8rem;
}

.team-vertical h3, .team-vertical h2 {
   writing-mode: vertical-rl;
}
body.primary-photographer .team-vertical h2 {
	font-size: 2.5rem;
}

body.primary-halloween .team-vertical h3 {
   font-family: var(--ff-secondary);
   font-size: 1.2rem;
   font-weight: 400;
}


/*--------------------------------------------------------
7. REVIEWS
--------------------------------------------------------*/
.review {
   padding: 2rem;
   text-align: center;
}
body.primary-florist .review {
	background-color: rgba( var(--secondary) , .5 );
	border-radius: .3rem;
}

.review img {
   width: 6.5rem;
   border-radius: 100%;
   margin-bottom: .5rem;
}

.review span {
   display: block;
   font-size: 1.3rem;
   margin-bottom: 1rem;
}

.rating-1::before { content: '\2B50'; }
.rating-2::before { content: '\2B50\2B50'; }
.rating-3::before { content: '\2B50\2B50\2B50'; }
.rating-4::before { content: '\2B50\2B50\2B50\2B50'; }
.rating-5::before { content: '\2B50\2B50\2B50\2B50\2B50'; }


/*--------------------------------------------------------
8. TABS
--------------------------------------------------------*/
.tab-list {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
}
.tab-list button {
   border-radius: 1rem;
   padding: .4rem 1.3rem;
   font-weight: 600;
   text-transform: uppercase;
   color: rgb( var(--primary) );
   background-color: transparent;
   border-color: transparent;
   transition: var(--anim);
}
.tab-list button[aria-selected="true"] {
   border-color: var(--white);
   color: var(--white);
}
.tab-list button:hover {
   border-color: rgba( var(--primary), .6);
   color: var(--white);
   background-color: rgba( var(--primary), .6);
}


/*--------------------------------------------------------
9. MENUS
--------------------------------------------------------*/
ul.menu-list {
   margin-block: 2rem;
}
ul.menu-list li {
   margin-bottom: 3.5rem;
}

ul.menu-list img {
   display: none;
}

ul.menu-list li h3 {
   display: grid;
   grid-template-columns: 1fr max-content;
   align-items: center;
   gap: 1rem;
   padding-bottom: .8rem;
   margin-bottom: .8rem;
   border-bottom: .1rem solid rgb( var(--primary) );
   text-transform: uppercase;
   grid-area: name;
}

ul.menu-list li .formula {
   font-style: italic;
   font-weight: 300;
   letter-spacing: .1rem;
   grid-area: formula;
}
ul.menu-list li.subcategory {
   text-align: center;
}
ul.menu-list li h2.btn {
   text-transform: uppercase;
   font-size: 1.15rem;
}

@media (min-width: 72em) {
   ul.menu-list li.photo {
      display: grid;
      grid-template-columns: 8rem 1fr;
      grid-template-areas: 'img name' 'img formula';
      column-gap: 1rem;
   }
   
   ul.menu-list img {
      display: block;
      aspect-ratio: 1;
      max-width: 8rem;
      border-radius: .8rem;
      grid-area: img;
   }
}


/*--------------------------------------------------------
10. GALLERY
--------------------------------------------------------*/
.gallery-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   padding: 0;
}
body.primary-florist .gallery-container {
	display: grid;
   grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
	text-align: center;
}

.gallery-container > a {
   display: flex;
}
.gallery-container a > img {
   aspect-ratio: 1;
   object-fit: cover;
}
.gallery-container a > img:hover {
   filter: brightness(.5);
   transition: var(--anim);
}
body.primary-florist .gallery-container > a {
	display: block;
}
body.primary-florist .gallery-container > a:hover {
	text-decoration: none;
}
body.primary-florist .gallery-container > a h3 {
	color: var(--black);
	font-size: 1.5rem;
}
body.primary-florist .gallery-container > img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: .3rem;
}
body.primary-florist .gallery-container > img:hover {
   -webkit-filter: brightness(.5);
   filter: brightness(.5);
   transition: var(--anim);
}

.gallery-container a.span2 {
   grid-column: span 2;
}
.gallery-container a.span2 img {
   aspect-ratio: 2/1;
}

@media (max-width: 72em) {
   .gallery-container {
      grid-template-columns: 1fr;
   }
   .gallery-container a.span2 {
      grid-column: unset;
   }
}

.galleries-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--gap);
   row-gap: 4rem;
   padding-block: 2rem;
}

.galleries-grid > a:hover {
   transform: scale(1.1);
   text-decoration: none;
}

.galleries-grid > a.span2 {
   grid-column: span 2;
}
.galleries-grid > a.span2 img {
   aspect-ratio: 2/1;
}

.galleries-grid article {
   padding-block: 0;
}

.galleries-grid article img {
   aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius);
}

.galleries-grid article > h2 {
   color: var(--white);
}

@media (max-width: 72em) {
	.galleries-grid {
		grid-template-columns: 1fr;
	}
}


/*--------------------------------------------------------
11. LIGHTBOX MODAL
--------------------------------------------------------*/
.lightbox {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   background: var(--overlay);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 999;
}
.open {
   display: flex;
}
.lightbox img {
   width: auto;
   max-height: 95vh;
   box-shadow: .3rem .3rem 1rem var(--overlay);
}
.lightbox > i {
   position: absolute;
   font-size: 2rem;
   color: var(--white);
   cursor: pointer;
}

.lightbox > i.fa-xmark {
   top: 1rem;
   right: 1rem;
}
.lightbox > i.fa-arrow-left {
   left: 1rem;
}
.lightbox > i.fa-arrow-right {
   right: 1rem;
}

@media (max-width: 72em) {
   .lightbox img {
      max-width: 100%;
   }
   .lightbox > i {
      font-size: 1.5rem;
   }
}


/*--------------------------------------------------------
12. PRICING
--------------------------------------------------------*/
.price-card {
   border: .25rem solid rgb( var(--primary) );
   border-radius: .8rem;
   padding: 2rem;
   text-align: left;
}

.price-card h1 {
   font-size: 3rem;
   color: rgb( var(--primary) ) !important;
}

.price-card > ul {
   margin-bottom: 1.5rem;
}
.price-card > ul li {
   padding-bottom: .5rem;
}


/*--------------------------------------------------------
13. SPONSOR
--------------------------------------------------------*/
.sponsor > img {
   padding-inline: 2rem;
}

@media (max-width: 72em) {
   section.sponsor {
      grid-template-columns: repeat(2, 1fr);
   }
   .sponsor > img {
      padding-inline: .5rem;
   }
}

body.primary-photographer .sponsor {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--gap);
}

@media (max-width: 72em) {
   body.primary-photographer .sponsor {
      grid-template-columns: repeat(2, 1fr);
   }
}


/*--------------------------------------------------------
14. FAQS
--------------------------------------------------------*/
article.faq {
   position: relative;
	display: block;
	border: var(--border);
	border-color: rgb( var(--primary) );
   padding: 0;
	border-radius: .8rem;
	margin-bottom: 1rem;
	transition: var(--anim);
	overflow: hidden;
}
body.primary-photographer article.faq {
	border: var(--border);
	border-color: rgba(var(--secondary), .5);
}
article.faq::after {
   content: '';
   position: absolute;
   inset: 0;
}
.faq-question {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1.3rem;
   align-items: center;
   gap: 1rem;
   padding: .5rem 1rem;
	transition: var(--anim);
}
.faq-question svg {
   height: 1.3rem;
}
.faq:hover .faq-question,
.faq[data-faq-opened="true"] .faq-question{
   background: rgb( var(--primary), .3);
}
body.primary-photographer .faq:hover .faq-question,
body.primary-photographer .faq[data-faq-opened="true"] .faq-question{
   background: rgb( var(--secondary), .3);
}
.faq-answer {
   height: 0;
   transform: rotateX(90deg);
   transform-origin: top;
   transition: var(--anim);
}
.faq[data-faq-opened="true"] .faq-answer {
   height: auto;
   padding: 1rem;
   transform: rotateX(0);
}


/*--------------------------------------------------------
15. CONTACT INFO AND MAPS
--------------------------------------------------------*/
ul.contact-info {
   font-weight: 600;
   letter-spacing: .1rem;
   max-width: fit-content;
   margin-inline: auto;
}
ul.contact-info li {
   margin-bottom: 1.5rem;
}
ul.contact-info li:last-child {
   margin-bottom: 0;
}
ul.contact-info i {
   font-size: 1.2rem;
   padding-right: 1rem;
}
address {
   display: inline;
}

iframe.map {
   width: 100%;
   height: 22rem;
}

.hours-time {
   max-width: fit-content;
   margin-inline: auto;
   text-align: left;
}
time {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 3rem;
   margin-bottom: 1.2rem;
}


/*--------------------------------------------------------
16. CONTACT FORM 
--------------------------------------------------------*/
form {
   margin-top: 3rem;
}

label {
   position: absolute;
   display: block;
}
label > i {
   font-size: 1.3rem !important;
   padding-top: 1rem;
   padding-left: 1rem;
   color: rgba( var(--primary), .6);
}

input, textarea {
   width: 100%;
   padding: 1rem 1.5rem 1rem 3rem;
   margin-bottom: 1rem;
   border: var(--border);
	border-color: var(--white);
	border-radius: .8rem;
   font-family: var(--ff-secondary);
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: .1rem;
   color: var(--white);
   transition: var(--anim);
}
body.primary-gym input,
body.primary-gym textarea {
   border-color: var(--black);
   color: var(--black);
}
body.primary-halloween input,
body.primary-halloween textarea {
   border-color: rgb( var(--violet) );
}
body.primary-florist input,
body.primary-florist textarea {
	border-color: rgb( var(--primary) );
   border-radius: .3rem;
   color: var(--black);
}
input:hover, textarea:hover {
	border-bottom-color: rgba( var(--primary), .6) !important;
}

input::placeholder {
	color: var(--w-overlay);
}
body.primary-florist input::placeholder {
   color: var(--black);
}
body.primary-gym input::placeholder {
   color: var(--overlay);
}

.sent, .error {
   text-align: center;
   margin-bottom: 1rem;
   color: var(--green);
   transition: var(--anim);
}
.error {
   color: var(--red); 
}

button[type="submit"] {
   aspect-ratio: 1;
   display: block;
   margin: auto;
   padding: 1.2rem;
   margin-top: 1rem;
   border-radius: 50%;
   border: var(--border);
   border-color: rgb( var(--primary) );
   background-color: transparent;
   color: rgb( var(--primary) );
   transition: var(--anim);
}
body.primary-florist button[type="submit"] {
	border-radius: .3rem;
	float: right;
}

button[type="submit"] i {
   font-size: 1.6rem;
}

button[type="submit"]:hover {
   background-color: rgb( var(--primary) );
   color: var(--white);
}


/*--------------------------------------------------------
17. CALL TO ACTION 
--------------------------------------------------------*/
section.cta {
	display: grid;
	grid-template-columns: 1fr 15rem;
	place-items: center;
	gap: 2rem;
   padding: 5rem 2rem 7rem 2rem;
   margin-bottom: 2rem;
   border-radius: var(--radius);
   color: var(--white);
   background: url('../imgs/slider/photographer/slide2.webp');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

section.cta h2 {
	font-family: 'Montserrat', sans-serif;
   font-size: 2rem;
   line-height: 1;
   margin-bottom: 1rem;
}

section.cta > .btn {
	align-self: end;
}

.btn-cta {
	font-size: 1.5rem;
}
.btn-cta:hover {
	transform: scale(1.5);
}

@media (max-width: 72em) {
	section.cta {
		grid-template-columns: 1fr;
	}
}


/*--------------------------------------------------------
18. WORKSHOP 
--------------------------------------------------------*/
.workshop-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap);
   row-gap: 4rem;
   padding-block: 2rem;
}

.workshop-grid > article:hover {
   transform: scale(1.1);
}

.workshop-grid img {
   border-radius: var(--radius);
}
.workshop-grid h2 {
	text-decoration: none;
	color: rgb( var(--secondary) );
	transition: var(--anim);
}
.workshop-grid article:hover h2 {
	color: rgb( var(--primary) );
}

.workshop-grid article {
   padding-block: 0;
   text-align: left;
	transition: var(--anim);
}

.workshop-grid article > h3 {
   color: rgb( var(--secondary) );
	margin-bottom: .5rem;
}
.workshop-grid article > p {
   color: var(--white);
	font-weight: 400;
}

@media (max-width: 72em) {
	.workshop-grid {
		grid-template-columns: 1fr;
	}
}


/*--------------------------------------------------------
19. FOOTER
--------------------------------------------------------*/
body.primary-halloween > footer {
	background: url('../imgs/bg/halloween/bg-footer.webp') no-repeat top center;
	background-size: cover;
}
body.primary-florist > footer {
	color: var(--white);
	background: rgb( var(--secondary) );
}
body.primary-photographer > footer {
	background: url('../imgs/bg/photographer/bg-footer.webp') no-repeat top center;
	background-position: center;
	background-size: cover;
	padding-bottom: 1rem;
}
body.primary-photographer > footer section.mb-2 {
	margin: 0;
	padding-bottom: 0;
}