@charset "UTF-8";
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #000000;
  /* Background color for the entire website, including individual sections */
  --default-color: #fafafa;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #ffffff;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #f0b260;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #1a1a1a;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #000000;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #fafafa;
  /* The default color of the main navmenu links */
  --nav-hover-color: #f0b260;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #1a1a1a;
  /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #1a1a1a;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #fafafa;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #f0b260;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-background {
  --background-color: #1a1a1a;
  --surface-color: #343434;
}

.dark-background {
  --background-color: rgba(15, 15, 15, 0.975);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #292929f9;
  --contrast-color: #000000;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}
body .superuser {
  background: red;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}
.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0.6);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 5px 0;
  transition: all 0.5s;
  z-index: 997;
}
.header .logo {
  line-height: 1;
}
.header .logo img {
  max-height: 55px;
  margin-right: 8px;
}
.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}
.scrolled .header {
  box-shadow: 0px 0 18px rgba(109, 109, 109, 0.199);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(0, 0, 0, 0.8);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }
  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }
  .navmenu li {
    position: relative;
  }
  .navmenu > ul > li {
    white-space: nowrap;
    padding: 15px 14px;
  }
  .navmenu > ul > li:last-child {
    padding-right: 0;
  }
  .navmenu a,
.navmenu a:focus {
    color: var(--nav-color);
    font-size: 25px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }
  .navmenu a i,
.navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }
  .navmenu > ul > li > a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }
  .navmenu a:hover:before,
.navmenu li:hover > a:before,
.navmenu .active:before {
    visibility: visible;
    width: 25px;
  }
  .navmenu li:hover > a,
.navmenu .active,
.navmenu .active:focus {
    color: var(--nav-hover-color);
  }
}
/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }
  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }
  .navmenu a,
.navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }
  .navmenu a i,
.navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }
  .navmenu a i:hover,
.navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }
  .navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }
  .navmenu .active i,
.navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }
  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }
  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }
  .navmenu .dropdown > .dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }
  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }
  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }
  .mobile-nav-active .navmenu > ul {
    display: block;
  }
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
  position: relative;
}
.footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}
.footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
}
.footer .social-links {
  margin: 0 0 30px 0;
}
.footer .social-links a {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--contrast-color);
  line-height: 1;
  margin: 0 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}
.footer .social-links a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  text-decoration: none;
}
.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.footer .credits {
  font-size: 13px;
  padding-top: 5px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}
#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}
.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}
.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}
.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
  z-index: 1;
}
section .background-img,
.section .background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.5;
}

@media (max-width: 1199px) {
  section,
.section {
    scroll-margin-top: 66px;
  }
}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Global Section Titles (Or plus clair)
--------------------------------------------------------------*/
@keyframes shine {
  0% {
    background-position: -50rem 0;
  }
  100% {
    background-position: 30rem 0;
  }
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.section-title {
  text-align: center;
  padding-bottom: 30px;
  padding-top: 20px;
  position: relative;
  margin-top: 60px;
}
.section-title p {
  font-size: 18px;
  width: 60%;
  margin-left: 20%;
}
.section-title .gold-text {
  font-family: "Alegreya", serif;
  font-style: italic;
  word-spacing: 0.2em;
  display: inline-block;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  background-color: #fac86c;
  background-image: radial-gradient(ellipse farthest-corner at right bottom, white 0%, #f5dd8f 20%, #fac86c 60%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, white 0%, #f5dd8f 50%, #E5A85C 75%, #fac86c 100%);
  background-size: 100% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  margin: 0 0 0.5rem 0;
  font-size: 4em;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}
.section-title .gold-text:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #fac86c;
  z-index: 0;
  text-shadow: 0 -1px 0 #f7e2a0, 0 1px 0 #a07640, 0 2px 0 #896537, 0 3px 0 #73542e, 0 4px 0 #5c4325, 0 4px 2px #45321c, 0 0.075em 0.1em rgba(26, 35, 39, 0.3), 0 0.15em 0.3em rgba(229, 168, 92, 0.2);
}
.section-title .gold-text__highlight {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.section-title .gold-text__highlight:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-image: linear-gradient(100deg, transparent 0%, transparent 6rem, white 10rem, transparent 10.5rem, transparent 15rem, rgba(255, 255, 255, 0.4) 18rem, transparent 22rem, transparent 26rem, rgba(255, 255, 255, 0.7) 30rem, white 32rem, rgba(255, 255, 255, 0.4) 32.5rem, transparent 37rem, transparent 40rem, rgba(255, 255, 255, 0.4) 45rem, transparent 50rem, transparent 100%);
  background-clip: text;
  background-size: 60rem 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  animation: shine 4s linear infinite alternate;
}
.section-title .gold-text__highlight:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  color: transparent;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, transparent 30%, transparent 70%, #E5A85C 100%);
  background-clip: text;
  -webkit-background-clip: text;
  animation: flash 4s linear infinite alternate;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hero video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero .container {
  position: absolute;
  z-index: 3;
  text-align: center;
}
.hero .container img {
  max-height: 130px;
}
.hero .container .text-bg {
  display: inline-block;
  background: rgba(30, 30, 30, 0.31);
  border-radius: 5px;
  padding: 15px 10px 15px 10px;
  margin-top: 10%;
}
.hero .container .text-bg p {
  font-size: 40px;
}
.hero h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
}
.hero p {
  margin: 5px 0 0 0;
  font-size: 30px;
}
.hero p span {
  letter-spacing: 1px;
  border-bottom: 2px solid var(--accent-color);
}
.hero .social-links {
  margin-top: 25px;
}
.hero .social-links a {
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  font-size: 25px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  transition: 0.3s;
  line-height: 1;
}
.hero .social-links a:hover {
  background-color: var(--accent-color);
}
.hero .gold-button {
  color: #000;
  background-image: linear-gradient(180deg, #f6e27a 20%, #cb9b51 80%);
  font-weight: bold;
  font-size: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  width: 200px;
  box-shadow: 0 4px 12px 0 #ffcd57;
  transition: all 0.5s ease;
}
.hero .gold-button.shine-button {
  position: relative;
  overflow: hidden;
}
.hero .gold-button.shine-button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
  z-index: 1;
  transform: translateX(100%);
  animation: slide 2s infinite;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
}
@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }
  .hero p {
    font-size: 20px;
  }
}
@media (max-width: 572px) {
  .hero .container {
    width: 95%;
  }
  .hero .container img {
    max-height: 90px;
  }
  .hero .container .text-bg {
    font-size: 14px;
    padding: 10px 8px;
  }
  .hero .container .text-bg p {
    font-size: 27px;
  }
  .hero .social-links {
    gap: 10px;
  }
  .hero .social-links a {
    font-size: 24px;
    width: 35px;
    height: 35px;
  }
  .hero .gold-button {
    font-size: 18px;
    padding: 8px 14px;
    width: 160px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  position: relative;
  overflow: hidden;
  padding: 50px 0;
  /*--------------------------------------------------------------
  # Slider Styles (Intégré dans la section .about)
  --------------------------------------------------------------*/
}
.about .bg-gold {
  background: radial-gradient(ellipse farthest-corner at right bottom, #d1b464 0%, #d1b464 8%, #9f79280d 30%, #8a6e2fa6 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #f2d8a1 0%, #d1b464 8%, #d1b464 25%, #d1b464 62.5%, #d1b464 100%);
  border-radius: 2px;
}
.about .bg-gold img {
  width: 90%;
}
.about .row {
  margin: 10px;
}
.about .content .date {
  font-family: var(--default-font);
  font-weight: 700px;
  margin-bottom: 15px;
}
.about .content .date span {
  border-bottom: 2px solid var(--accent-color);
}
.about .content h2 {
  font-weight: 600;
  font-size: 30px;
  padding-top: 15px;
  padding-bottom: 10px;
  padding-left: 30px;
  color: #efb160;
  margin-bottom: 25px;
  text-shadow: 1px 1px 2px #2b2b2b;
}
.about .content .h2-gold {
  color: white;
}
.about .content p {
  font-weight: 500;
  text-shadow: 1px 1px 2px #2b2b2b;
  font-size: 18px;
}
.about .content .row .small-img {
  max-width: 45%;
  margin-top: 40px;
  box-shadow: 6px -2px 10px 0px #000000;
  border-radius: 3px;
}
.about .content .row h2 {
  font-weight: 700;
  font-size: 25px;
  color: var(--accent-color);
  padding-top: 5px;
  padding-bottom: 0;
}
.about .content .row h2 span {
  border-bottom: 2px solid white;
}
.about .content .row p i {
  font-size: 15px;
  margin-right: 5px;
  color: var(--accent-color);
  line-height: 0;
}
.about .content .row ul {
  list-style: none;
  padding: 0;
}
.about .content .row ul h3 {
  font-weight: 700;
  font-size: 20px;
}
.about .content .row ul li {
  margin-bottom: 17px;
  display: flex;
  align-items: center;
}
.about .content .row ul strong {
  margin-right: 10px;
}
.about .content .row ul i {
  font-size: 20px;
  margin-right: 5px;
  color: var(--accent-color);
  line-height: 0;
}
.about .swiper-wrapper {
  height: auto;
  /* Assure que la hauteur du wrapper est ajustée selon le contenu */
}
.about .swiper-pagination {
  margin-top: 30px;
  position: relative;
  text-align: center;
  /* Centrer les bullets de pagination */
}
.about .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 70%);
  opacity: 1;
  transition: background-color 0.3s ease;
  /* Transition pour le hover */
}
.about .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}
.about .swiper-pagination-bullet:hover {
  background-color: var(--accent-color);
  /* Changer la couleur lors du survol */
}
.about .gold-button {
  color: #000;
  background-image: linear-gradient(180deg, #f6e27a 20%, #cb9b51 80%);
  font-weight: bold;
  font-size: 18px;
  padding: 12px 20px;
  border-radius: 8px;
  margin-top: 15px;
  margin-left: 15px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  width: 200px;
  box-shadow: 0 4px 12px 0 #ffcd57;
  transition: all 0.5s ease;
}
.about .gold-button.shine-button {
  position: relative;
  overflow: hidden;
}
.about .gold-button.shine-button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
  z-index: 1;
  transform: translateX(100%);
  animation: slide 2s infinite;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
}
@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media (max-width: 572px) {
  .about .content .row .small-img {
    max-width: 100%;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.gallery .gallery-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}
.gallery .gallery-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}
.gallery .gallery-filters li:hover, .gallery .gallery-filters li.filter-active {
  color: var(--accent-color);
}
.gallery .gallery-filters li:first-child {
  margin-left: 0;
}
.gallery .gallery-filters li:last-child {
  margin-right: 0;
}
@media (max-width: 575px) {
  .gallery .gallery-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}
.gallery .gallery-content {
  position: relative;
  overflow: hidden;
}
.gallery .gallery-content img {
  transition: 0.3s;
}
.gallery .gallery-content .gallery-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}
.gallery .gallery-content .gallery-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}
.gallery .gallery-content .gallery-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.gallery .gallery-content .gallery-info .preview-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}
.gallery .gallery-content .gallery-info .preview-link:hover {
  color: var(--accent-color);
}
.gallery .gallery-content:hover .gallery-info {
  opacity: 1;
}
.gallery .gallery-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 20px 30px;
}
.contact .info-item .icon {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  margin-right: 25px;
}
.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px 0;
}
.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}
.contact .info-item .social-links a {
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  margin: 4px 6px 0 0;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.contact .info-item .social-links a:hover {
  color: var(--accent-color);
}
.contact .form {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-top: 30px;
}
@media (max-width: 575px) {
  .contact .form {
    padding: 20px;
  }
}
.contact .form input[type=text],
.contact .form input[type=email],
.contact .form textarea {
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
}
.contact .form input[type=text]:focus,
.contact .form input[type=email]:focus,
.contact .form textarea:focus {
  border-color: var(--accent-color);
}
.contact .form input[type=text]::placeholder,
.contact .form input[type=email]::placeholder,
.contact .form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.contact .form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}
.contact .form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.events {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  padding: 80px 0;
  position: relative;
  /*.event-item {
    h3 {
      font-weight: 700;
      font-size: 30px;
    }

    .price {
      font-size: 26px;
      font-family: var(--default-font);
      font-weight: 700;
      margin-bottom: 15px;

      span {
        border-bottom: 2px solid var(--accent-color);
      }
    }

    ul {
      list-style: none;
      padding: 0;

      li {
        padding-bottom: 10px;
      }

      i {
        font-size: 20px;
        padding-right: 4px;
        color: var(--accent-color);
      }
    }

    p:last-child {
      margin-bottom: 0;
    }
  }*/
}
.events .slider-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.events:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 70%);
  position: absolute;
  inset: 0;
  z-index: 2;
}
.events .section-title h2 {
  color: #ffffff;
}
.events .container {
  position: relative;
  z-index: 3;
}
.events .swiper-wrapper {
  height: auto;
  padding-top: 50px;
  padding-bottom: 20px;
  width: 50%;
}
.events .swiper-wrapper .swiper-slide hgroup {
  text-align: center;
}
.events .swiper-wrapper .swiper-slide hgroup h3 {
  font-weight: 700;
  font-size: 30px;
  text-shadow: 1px 1px 5px black;
}
.events .swiper-wrapper .swiper-slide hgroup h4 {
  font-weight: 600;
  font-size: 25px;
}
.events .swiper-wrapper .swiper-slide hgroup .price {
  font-size: 26px;
  font-family: var(--default-font);
  font-weight: 700;
  margin-bottom: 15px;
}
.events .swiper-wrapper .swiper-slide hgroup .price span {
  border-bottom: 2px solid var(--accent-color);
}
.events .swiper-pagination {
  margin-top: 30px;
  position: relative;
}
.events .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 70%);
  opacity: 1;
}
.events .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}
.events table {
  border: 4px solid var(--accent-color);
  margin-top: 25px;
}
.events table tr {
  border: 1px solid var(--accent-color);
}
.events table tr th {
  border: 4px solid var(--accent-color);
  padding: 5px;
  font-size: 25px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.363);
}
.events table tr td {
  font-size: 20px;
  font-weight: 500;
  border-right: 2px solid var(--accent-color);
  border-bottom: 3px solid var(--accent-color);
  padding: 10px;
}
.events table tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}
.events table tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.1);
}
@media (max-width: 993px) {
  .events .swiper-wrapper {
    width: 100%;
  }
  .events table {
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.portfolio .portfolio-item + .portfolio-item {
  margin-top: 100px;
}
@media (max-width: 768px) {
  .portfolio .portfolio-item + .portfolio-item {
    margin-top: 40px;
  }
}
.portfolio .portfolio-item h3 {
  font-weight: 600;
  font-size: 30px;
  color: #efb160;
  margin-bottom: 25px;
}
.portfolio .portfolio-item p {
  font-weight: 500;
  padding: 5px;
}
.portfolio .portfolio-item .btn-get-started {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 5px 20px;
  border-radius: 4px;
}
.portfolio .portfolio-item .btn-get-started:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
}
.portfolio .portfolio-item ul {
  list-style: none;
  padding: 0;
}
.portfolio .portfolio-item ul li {
  padding-bottom: 10px;
  display: flex;
  align-items: flex-start;
}
.portfolio .portfolio-item ul li:last-child {
  padding-bottom: 0;
}
.portfolio .portfolio-item ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}
.portfolio .portfolio-item img {
  border: 6px solid var(--surface-color);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}
.portfolio .portfolio-item .portfolio-img-bg {
  position: relative;
  min-height: 500px;
}
@media (max-width: 640px) {
  .portfolio .portfolio-item .portfolio-img-bg {
    min-height: 300px;
  }
}
.portfolio .portfolio-item .portfolio-img-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio .portfolio-item .image-stack {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}
.portfolio .portfolio-item .image-stack .stack-back {
  grid-column: 4/-1;
  grid-row: 1;
  width: 100%;
  z-index: 1;
}
.portfolio .portfolio-item .image-stack .stack-front {
  grid-row: 1;
  grid-column: 1/span 8;
  margin-top: 35%;
  width: 110%;
  z-index: 2;
}

/*# sourceMappingURL=main.css.map */