/*

	Theme Name: Panamex
	Author: TheDigitalCube Pte Ltd
	Author URI: https://www.thedigitalcube.com
	Version: 1.0.0

*/

h1, h2, h3, h4, h5, h6, p, blockquote, pre { display: block; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; -webkit-margin-after: 0; -webkit-margin-before: 0; -webkit-text-size-adjust: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea, select, label { cursor: pointer; outline: none; border-radius: 0; max-width: 100%; }
b, strong, em { font-weight: bold; }
pre, i { font-style: italic; }
sup { font-size: smaller; vertical-align: top; }
a, [type="submit"], [type="button"] { transition: all .4s; }
a, label, input, button { cursor: pointer; }
img { width: auto; height: auto; max-width: 100%; display: block; }
.clear { clear: both; }

/* Custom fonts */
@font-face { font-family: 'Panamex'; src: url( '../fonts/panamex/panamex.eot?24169361' ); src: url( '../fonts/panamex/panamex.eot?24169361#iefix' ) format( 'embedded-opentype' ), url( '../fonts/panamex/panamex.woff2?24169361' ) format( 'woff2' ), url( '../fonts/panamex/panamex.woff?24169361' ) format( 'woff' ), url( '../fonts/panamex/panamex.ttf?24169361' ) format( 'truetype' ), url( '../fonts/panamex/panamex.svg?24169361#panamex' ) format( 'svg' ); font-weight: normal; font-style: normal; }
[class^="icon-"]:before, [class*=" icon-"]:before { display: block; line-height: 40px; text-align: center; color: #a31c49; width: 40px; aspect-ratio: 1; border: 1px solid #a31c49; border-radius: 50%; font-family: 'Panamex'; font-style: normal; font-weight: normal; transition: all .4s; }
[class^="icon-"]:hover:before, [class*=" icon-"]:hover:before { background: #a31c49; color: #fff; }
.icon-linkedin:before { content: '\f0e1'; }
.icon-instagram:before { content: '\f16d'; }

/* Animations */
@keyframes slide-up { 0% { transform: translateX( -50% ) translateY( 15px ); opacity: 0; display: none; } 1% { opacity: 0; display: block; } 100% { opacity: 1; display: block; transform: translateX( -50% ) translateY( 0 ); } }
@keyframes rotate { 0% { transform: rotateZ( 0deg ); } 100% { transform: rotateZ( 360deg ); } }

/* General */
body { font: 400 clamp( 11pt, 2.5vw, 14pt )/1.55 'Lexend Deca', 'Arial', sans-serif; color: #231f20; margin: 0; background: no-repeat url( '../images/bg/header-colours.webp' ) top right; overflow-x: hidden; }
.container { width: 1550px; max-width: 95%; margin: auto; }
main.container, #main article { width: 1420px; }
a { text-decoration: none; color: #000; }
h1 { margin: 0; font: 800 clamp( 24pt, 4vw, 46pt )/1.1 'Lexend Deca', 'Arial', sans-serif; letter-spacing: -3px; display: inline-block; }
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { font-style: italic; background: linear-gradient( 90deg, #ffc501, #ff3d16 ); background-clip: text; -webkit-background-clip: text; color: transparent; padding: 0 11px 0 0; margin: 0 0 0 -6px; font-weight: 800; }
h3 em, h4 em, h5 em, h6 em { margin: 0; padding: 0 3px 0 0; }
h2 { font: 900 clamp( 18pt, 4vw, 29pt )/1.1 'Lexend Deca', 'Arial', sans-serif; letter-spacing: -1.25px; }
h3 { font: 900 clamp( 13pt, 3.3vw, 18pt )/1.1 'Lexend Deca', 'Arial', sans-serif; letter-spacing: -1px; }
h5 { font: 700 clamp( 13pt, 2.5vw, 14pt )/1.2 'Lexend Deca', 'Arial', sans-serif; letter-spacing: -.5px; }
.dropped-image-holder { position: relative; }
.dropped-image-holder span { content: ' '; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 70px; background: #f4ffe6; z-index: -1; }
.dropped-image-holder.orange span { background: #fdf4d3; }
.dropped-image-holder.pink span { background: #fff1f1; }
.dropped-image-holder.yellow span { background: #fcfac6; }
.dropped-image-holder.green span { background: #f4ffe6; }
.dropped-image-holder.blue span { background: #eff8ff; }
.dropped-image .vce-single-image-wrapper { overflow: visible; }

/* Shapes */
[class*=' shape-'] { position: relative; }
.actual-shape { content: ' '; position: absolute; opacity: .14; transition: all .4s; z-index: -1; }
.shape-1 .actual-shape { background: no-repeat url( '../images/bg/shape-1.webp' ); width: 362px; aspect-ratio: .837962962; top: 10%; left: 50%; }
.shape-2 .actual-shape { background: no-repeat url( '../images/bg/shape-2.webp' ); width: 216px; aspect-ratio: .675; top: 20%; left: -10vw; }
.shape-3 .actual-shape { background: no-repeat url( '../images/bg/shape-3.webp' ); width: 182px; aspect-ratio: .9629629; top: 30%; right: -12vw;  }

/* Header */
header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 46px 0 42px; }
header img { width: 195px; margin: 3px 0 0; }
header > span { display: none; cursor: pointer; }
header > span span { width: 22px; height: 2px; background: rgba( 0, 0, 0, .6 ); margin: 0 0 5px; }
header > span span:last-of-type { margin: 0; }

/* Menu */
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; list-style: none; }
#menu-primary > li { padding: 10px 0; }
.menu a { line-height: 1.2; display: block; font-weight: 600; font-size: clamp( 12pt, 1.5vw, 14pt ); letter-spacing: -1px; text-decoration: none; color: #231f20; text-transform: uppercase; transition: all .4s; }
.menu a:hover { color: #ff7b07; }
.menu-item-has-children { position: relative; }
.sub-menu { opacity: 0; transition: all .4s; width: 145px; position: absolute; top: 100%; left: 50%; transform: translateX( -50% ) translateY( 15px ); z-index: 2; }
.menu-item-has-children:hover .sub-menu { animation: slide-up .5s forwards; }
.sub-menu li { text-align: center; padding: 14px 16px 12px; background: #fff; border-radius: 10px; box-shadow: 0 0 5px #00000029; overflow: hidden; position: relative; }
.sub-menu li:first-child:before { content: ' '; display: block; height: 3px; background: linear-gradient( 90deg, #ffc401, #ff4515 ); position: absolute; top: 0; left: 0; right: 0; }
.sub-menu a { font-size: 12pt; }
.sub-menu li + li { margin: 10px 0 0; }
#menu-primary > svg { display: none; position: absolute; top: 14px; right: 17px; cursor: pointer; transition: all .4s; }
#menu-primary > svg:hover { transform: rotateZ( 90deg ); }

/* CMS */
blockquote { font-size: clamp( 14pt, 3vw, 19pt ); font-weight: 600; font-style: italic; letter-spacing: -.75px; position: relative; margin: 60px 0; padding: 0 55px; }
blockquote:before, blockquote:after { content: ' '; display: block; position: absolute; bottom: 0; right: 0; background: no-repeat url( '../images/bg/apostrophe.webp' ); width: 42px; aspect-ratio: 1.166666; }
blockquote:before { transform: rotateZ( 180deg ); top: 0; left: 0; bottom: auto; right: auto; }
article h1 { margin: 0 0 24px; font-size: clamp( 17pt, 4vw, 26pt ); letter-spacing: -2px; }
.vce-text-block-wrapper h2, .vce-text-block-wrapper h3, .vce-text-block-wrapper h4 { margin: 0 0 15px; }
.vce-text-block-wrapper p { margin: 0 0 20px; }
.vce-text-block-wrapper > :last-child { margin-bottom: 0; }
.vce-text-block-wrapper ul { margin: 0 0 20px 30px; }
.vce-text-block-wrapper li { position: relative; padding: 0 0 0 15px; }
.vce-text-block-wrapper li:before { content: '-'; position: absolute; top: 0; left: 0; }
.wp-block-gallery, .gallery { display: flex; flex-wrap: wrap; gap: 20px; margin: 30px -40px; align-items: center; }
.gallery { margin: 30px 0; }
.wp-block-image img, .gallery img { border-radius: 10px; margin: auto; }
.columns-2 .wp-block-image, .gallery-columns-2 .gallery-item { width: calc( ( 100% - 20px ) / 2 ); }
.columns-3 .wp-block-image, .gallery-columns-3 .gallery-item { width: calc( ( 100% - 40px ) / 3 ); }
.gallery-columns-4 .gallery-item { width: calc( ( 100% - 60px ) / 4 ); }
.gallery-columns-5 .gallery-item { width: calc( ( 100% - 80px ) / 5 ); }
.gallery-columns-6 .gallery-item { width: calc( ( 100% - 100px ) / 6 ); }
.gallery-columns-7 .gallery-item { width: calc( ( 100% - 120px ) / 7 ); }
.gallery-columns-8 .gallery-item { width: calc( ( 100% - 140px ) / 8 ); }
.gallery-columns-9 .gallery-item { width: calc( ( 100% - 160px ) / 9 ); }

/* Buttons */
[type="submit"], .link, #menu-primary > li:last-of-type a { font: 600 clamp( 11pt, 1.5vw, 13pt )/1.55 'Lexend Deca', 'Arial', sans-serif; cursor: pointer; border: 0; width: max-content; max-width: 100%; letter-spacing: -1px; min-height: 46px; display: flex; align-items: center; position: relative;  text-transform: uppercase; background: linear-gradient( to right, #ff7b07, #ff2e70 ); color: #fff; border-radius: 25px; padding: 3px 55px 3px 22px; box-sizing: border-box; }
[type="submit"]:before, .link:before, #menu-primary > li:last-of-type a:before { content: ' '; background: rgba( 255, 255, 255, .3 ); border-radius: 25px; width: 40px; height: 40px; display: block; position: absolute; top: 50%; right: 3px; transform: translateY( -50% ); transition: all .4s; }
[type="submit"]:hover:before, .link:hover:before, #menu-primary > li:last-of-type a:hover:before { width: calc( 100% - 7px ); }
[type="submit"]:after, .link:after, #menu-primary > li:last-of-type a:after { content: '\f105'; font: 20pt/.9 'Panamex'; position: absolute; top: 50%; transform: translateY( -50% ); right: 17px; }
.link.blue { background: linear-gradient( 90deg, #0069ff, #58d5ff ); }
.link.orange { background: linear-gradient( 90deg, #ff7c05, #fbd661 ); }
.icon-phone { padding: 0 0 0 22px; background: no-repeat url( '../images/icons/phone.webp' ) top 3px left/17px; }
.icon-email { padding: 0 0 0 29px; background: no-repeat url( '../images/icons/email.webp' ) top 6px left/23px; }

/* Forms */
form section { display: flex; flex-wrap: wrap; gap: 27px; justify-content: end; }
[type="email"], [type="text"], textarea { cursor: pointer; font: 400 clamp( 11pt, 2.5vw, 14pt )/1.55 'Lexend Deca', 'Arial', sans-serif; box-sizing: border-box; background: #f1f1f1; border: 0; border-radius: 10px; padding: 15px 25px; width: calc( ( 100% - 27px ) / 2 ); }
textarea { width: 100%; height: 170px; }
[type="submit"] { box-sizing: content-box; }
.loading [type="submit"] { cursor: auto; }
.loading [type="submit"]:after { content: ' '; border: 3px dashed #fff; animation: rotate 1s infinite; width: 20px; aspect-ratio: 1; border-radius: 50%; right: 9px; top: 25%; }
.result > div { background: #f5f5f5; padding: 10px 20px; border-radius: 10px; margin: 0 0 23px; font-size: 12pt; line-height: 1.4; position: relative; overflow: hidden; }
.result > div:before { content: ' '; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient( 180deg, #a31c49, #ff2e70 ); }
.result > .success:before { background: linear-gradient( 180deg, #2f8706, #94fa00 ); }
.result ul { margin: 0 0 0 20px; }
.result p + ul { margin-top: 7px; }

/* Footer */
#main:after { content: ' '; display: block; background: no-repeat url( '../images/bg/footer-large.webp' ) center/cover; width: 100%; aspect-ratio: 8.94854586; }
footer.container { padding: 55px 0 30px; font-size: clamp( 11pt, 2.5vw, 13pt ); display: flex; align-items: end; justify-content: space-between; gap: 20px; }
footer ul { margin: 0 0 0 auto; max-width: 100%; padding: 0; width: max-content; display: flex; flex-direction: column; text-align: left; }
footer li { font-weight: 600; }
footer li:not( .menu-item ) a { font-weight: 400; color: inherit; }
footer li a:hover { color: #ff7b07; }
footer img { width: 222px; max-width: 100%; margin: 0 0 17px; }
footer address { font-style: normal; margin: 0 0 12px; font-weight: 300; }
.contact-details { display: flex; flex-direction: column; gap: 3px; align-items: start; }
.contact-details .icon-phone { padding: 0 0 0 30px; background-position: top 2px left 5px; background-size: 18px; }
.contact-details div { margin: 17px 0 0; display: flex; align-items: center; gap: 10px; }
#right-footer { text-align: right; }
.footer-menu li { margin: 0 0 25px; }
.footer-menu a { padding: 0 0 0 19px; position: relative; font-weight: 600; color: inherit; }
.footer-menu a:before { content: '\f105'; font: clamp( 16pt, 2.5vw, 20pt ) 'Panamex'; display: block; position: absolute; top: -4px; left: 0; color: #a31c49; }
#copyright { font-weight: 300; font-size: clamp( 9.5pt, 2vw, 11pt ); letter-spacing: 0; color: #8e8e8e; margin: 10px 0 0; }
#menu-footer li a, .contact-details a span { background: linear-gradient( 90deg, #ff3d16 0%, #ffc501 50%, #000 50.1%, #000 100% ) 100% 0/200% 100%; color: transparent; -webkit-background-clip: text; background-clip: text; transition: background-position 0.4s ease; }
#menu-footer li:hover a, .contact-details a:hover span { background-position: 0; }

/* Popups */
#popup { display: none; background: rgba( 0, 0, 0, .6 ); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9000; }
#popup > aside { box-shadow: 0 0 15px #00000029; border-radius: 15px; background: #FFF; position: absolute; top: 50%; left: 50%; z-index: 9001; transform: translate( -50%, -50% ); overflow: hidden; box-sizing: border-box; width: 600px; max-width: 90%; padding: 0 0 20px; }
#popup > aside:before { content: ' '; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; z-index: 2; background: linear-gradient( 90deg, #ffc401, #ff4515 ); }
#popup > aside > svg { position: absolute; top: 10px; right: 10px; cursor: pointer; transition: all .4s; z-index: 20; }
#popup > aside > svg:hover { transform: rotate( 45deg ); }
#popup h1 { color: #FFF; background: #0198cf; padding: 12px 20px; letter-spacing: 0; font-weight: 300; font-size: 18pt; position: relative; top: -8px; text-transform: none; max-width: 90%; box-sizing: border-box; text-align: center; }
#popup h1:before, #popup h1:after { border-bottom: 8.5px solid #095395; border-left: 10px solid transparent; left: -10px; }
#popup h1:after { border-top: 0; border-left: 0; border-right: 10px solid transparent; left: auto; right: -10px; }
#popup form, #popup section { margin: auto; padding: 30px 20px 0; max-height: calc( 100vh - 160px ); overflow-y: auto; overflow-x: hidden; }
#popup section { display: flex; flex-wrap: wrap; gap: 15px; align-items: baseline; }
#popup section h4 { width: 100%; }
#popup section div { width: calc( ( 100% - 30px ) / 3 ); }
#popup section h5 { text-align: center; margin: 10px 0 0; font-size: 11.5pt; }
#popup p { margin: 0 0 12px; }

@media (max-width: 1800px) {
	#main:after { background-image: url( '../images/bg/footer.webp' ); aspect-ratio: 8.60986547; }
}

@media (max-width: 1320px) {
	header { padding: 25px 0 32px; }
}

@media (max-width: 1200px) {
	.dropped-image-holder span { border-radius: 40px; }
}

@media (max-width: 1150px) {
    .menu { gap: 20px; }
}

@media (max-width: 980px) {
	header { padding: 14px 0 32px; }
	header img { width: 173px; }
	header > span, header > span span { display: block; }
	
	.menu-primary-container.show .menu { overflow: hidden; }
	.menu-primary-container.show .menu:before { content: ' '; display: block; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ffc401, #ff4515); }
	.menu-primary-container { display: none; }
	.menu-primary-container.show { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0000001e; z-index: 9; padding: 30px; box-sizing: border-box; }
	.menu-primary-container.show > ul { background: #fff; width: 300px; max-width: 100%; margin: auto; position: relative; top: 50%; transform: translateY( -50% ); padding: 30px; border-radius: 30px;  flex-direction: column; align-items: center; box-sizing: border-box; }
	#menu-primary > svg { display: block; }
	.sub-menu { opacity: 1; position: static; transform: none; margin: 30px 0 0; width: auto; animation: none !important; }
	.sub-menu li { background: 0; border: 0; box-shadow: none; border-radius: 0; }
	.sub-menu li + li { margin: 0; padding: 10px 0 0 }
	.sub-menu li:nth-of-type( n ):before, .duplicate-menu { display: none; }
	.menu a { text-align: center; }
}

@media (max-width: 850px) {
	.gallery-columns-4 .gallery-item { width: calc( ( 100% - 20px ) / 2 ); }

	[type="email"], [type="text"], textarea { padding: 10px 15px; }
	form section { gap: 20px; }
	[type="submit"] { min-height: 35px; }
	[type="submit"]:before { width: 32px; height: 32px; }
	[type="submit"]:after { right: 14px; }
}

@media (max-width: 650px) {
	.wp-block-gallery, .gallery { justify-content: center; width: 95%; margin: 30px auto; }
	.columns-3 .wp-block-image, .gallery-columns-3 .gallery-item { width: calc( ( 100% - 20px ) / 2 ); }

	footer.container { flex-wrap: wrap; }
	footer ul { margin: auto; width: auto; }
	#right-footer { text-align: left; }
}

@media (max-width: 550px) {
 	footer img { width: 170px; }
	form section { gap: 15px; }
}

@media (max-width: 500px) {
	.columns-3 .wp-block-image, .gallery-columns-3 .gallery-item { width: calc( 90% - 30px ); }
}

@media (max-width: 480px) {
	header img { width: 148px; }

	footer.container { justify-content: center; text-align: center; }
	footer img { margin: 0 auto 17px; }
	footer address { margin: 0 auto 12px; }
	.contact-details div { width: 100%; justify-content: center; }
	.footer-menu li { text-align: center; margin: 0 0 7px; }
	footer .contact-details a { margin: auto; }
}