/* 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: "Nunito", sans-serif;
  --nav-font: "Inter", sans-serif;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../fonts/BrandonGrotesque-Light.woff2') format('woff2'),
        url('../fonts/BrandonGrotesque-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DIN 30640 Std';
    src: url('../fonts/DINNeuzeitGroteskStd-BdCond.woff2') format('woff2'),
        url('../fonts/DINNeuzeitGroteskStd-BdCond.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../fonts/BrandonGrotesque-Regular.woff2') format('woff2'),
        url('../fonts/BrandonGrotesque-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #3d4348;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #3e5055;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #388da8;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #313336;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #77b6ca;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #313336;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #77b6ca;
}

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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

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);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 60px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

@media (max-width: 480px) {
  .header .logo img {
    /*max-height: 24px;*/
  }

  .header .logo h1 {
    font-size: 24px;
  }
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0);
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: #ffffff;
}

/*--------------------------------------------------------------
# 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 a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 20px;
    font-family: 'DIN 30640 Std';
    font-weight: 400;
    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;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  .navmenu .megamenu {
    position: static;
  }

  .navmenu .megamenu ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .megamenu ul li {
    flex: 1;
  }

  .navmenu .megamenu ul li a,
  .navmenu .megamenu ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
  }

  .navmenu .megamenu ul li a:hover,
  .navmenu .megamenu ul li .active,
  .navmenu .megamenu ul li .active:hover {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .megamenu:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
}

/* 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;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .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);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    transition: all 0.5s ease-in-out;
    box-shadow: none;
  }

  .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 {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  display: flex;
  background-color: var(--contrast-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px 10px;
  width: 100%;
  background-color: var(--contrsast-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -9px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .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(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# 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 Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}

.page-title h1 {
  font-size: 24px;
  font-weight: 700;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 70vh;
  position: relative;
  padding: 180px 0 40px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero .hero-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .hero-bg::before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 15%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

.hero h1 span {
  color: var(--accent-color);
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

@media (min-width: 768px) {
  .hero .hero-img {
    max-width: 600px;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 50px;
  transition: 0.5s;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 55%);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 600;
}

.hero .btn-watch-video i {
  color: var(--accent-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 13px;
  }
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  padding: 40px 0;
}

.featured-services .service-item {
  position: relative;
  padding-top: 20px;
}

.featured-services .service-item .icon {
  background-color: color-mix(in srgb, var(--accent-color), transparent 80%);
  width: 72px;
  height: 72px;
  position: relative;
  margin-right: 15px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
}

.featured-services .service-item .icon i {
  color: var(--accent-color);
  font-size: 32px;
  z-index: 2;
  position: relative;
}

.featured-services .service-item .title {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
}

.featured-services .service-item .title a {
  color: var(--heading-color);
}

.featured-services .service-item .title a:hover {
  color: var(--accent-color);
}

.featured-services .service-item .description {
  font-size: 14px;
}

.featured-services .service-item:hover .icon {
  background-color: var(--accent-color);
}

.featured-services .service-item:hover .icon i {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  padding-bottom: 20px;
}

.about .content .who-we-are {
  text-transform: uppercase;
  margin-bottom: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 19px;
}

.about .content .read-more:hover i {
  margin-left: 10px;
}

.about .about-images img {
  border-radius: 10px;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
  border: 0;
}

.features .nav-item {
  width: 100%;
  margin-bottom: 15px;
}

.features .nav-item:last-child {
  margin-bottom: 0;
}

.features .nav-link {
  color: var(--heading-color);
  border: 0;
  padding: 30px;
  transition: 0.3s;
  border-radius: 10px;
  display: flex;
  cursor: pointer;
}

.features .nav-link i {
  background-color: var(--contrast-color);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  width: 48px;
  height: 48px;
  font-size: 22px;
  flex-shrink: 0;
  border-radius: 50px;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--default-color), transparent 85%);
}

.features .nav-link h4 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px 0;
  transition: 0.3s;
}

.features .nav-link p {
  font-size: 15px;
  margin: 0;
}

.features .nav-link:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.features .nav-link.active {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.features .tab-pane img {
  border-radius: 15px;
}

/*--------------------------------------------------------------
# Features Details Section
--------------------------------------------------------------*/
.features-details .features-item+.features-item {
  margin-top: 60px;
}

.features-details .features-item .content {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 30px;
  border-radius: 10px;
}

.features-details .features-item h3 {
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 15px;
}

.features-details .features-item .more-btn {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 6px 30px;
  border-radius: 6px;
}

.features-details .features-item .more-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.features-details .features-item ul {
  list-style: none;
  padding: 0;
}

.features-details .features-item ul li {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

.features-details .features-item ul li:last-child {
  padding-bottom: 0;
}

.features-details .features-item ul i {
  font-size: 20px;
  margin-right: 10px;
  color: var(--accent-color);
}

.features-details .features-item img {
  border-radius: 15px;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
}

.services .service-item {
  background-color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  height: 100%;
  padding: 30px;
  transition: 0.3s;
  border-radius: 10px;
  display: flex;
}

.services .service-item .icon {
  font-size: 32px;
  border-radius: 10px;
  position: relative;
  margin-right: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.services .service-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 25%);
  font-weight: 700;
  font-size: 22px;
  transition: 0.3s;
}

.services .service-item p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.services .service-item .read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  transition: 0.3s;
  font-size: 14px;
}

.services .service-item .read-more i {
  margin-left: 10px;
}

.services .service-item.item-cyan .icon {
  color: #0dcaf0;
  border: 1px solid #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}

.services .service-item.item-orange .icon {
  color: #fd7e14;
  border: 1px solid #fd7e14;
  background: rgba(253, 126, 20, 0.1);
}

.services .service-item.item-teal .icon {
  color: #20c997;
  border: 1px solid #20c997;
  background: rgba(32, 201, 151, 0.1);
}

.services .service-item.item-red .icon {
  color: #df1529;
  border: 1px solid #df1529;
  background: rgba(223, 21, 4, 0.1);
}

.services .service-item.item-indigo .icon {
  color: #6610f2;
  border: 1px solid #6610f2;
  background: rgba(102, 16, 242, 0.1);
}

.services .service-item.item-pink .icon {
  color: #f3268c;
  border: 1px solid #f3268c;
  background: rgba(243, 38, 140, 0.1);
}

.services .service-item:hover {
  box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 90%);
}

.services .service-item:hover h3 {
  color: var(--heading-color);
}

.services .service-item:hover p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

/*--------------------------------------------------------------
# More Features Section
--------------------------------------------------------------*/
.more-features .features-image {
  position: relative;
  min-height: 400px;
}

.more-features .features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.more-features h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.more-features .icon-box {
  margin-top: 30px;
}

.more-features .icon-box i {
  color: var(--accent-color);
  margin-right: 15px;
  font-size: 24px;
  line-height: 1.2;
}

.more-features .icon-box h4 {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 18px;
}

.more-features .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  padding: 40px 40px;
  height: 100%;
  border-radius: 15px;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  color: var(--accent-color);
  font-size: 48px;
  font-weight: 700;
  font-family: var(--heading-font);
  margin-bottom: 0;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
  font-weight: 500;
}

.pricing .description {
  font-size: 14px;
}

.pricing .cta-btn {
  background-color: var(--default-color);
  color: var(--contrast-color);
  display: block;
  text-align: center;
  padding: 10px 35px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
  margin-top: 20px;
  margin-bottom: 6px;
}

.pricing .cta-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing ul {
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul li:last-child {
  padding-bottom: 0;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .featured {
  position: relative;
}

.pricing .featured .popular {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 5px 15px;
  margin: 0;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
}

.pricing .featured .cta-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
}

@media (max-width: 992px) {
  .pricing .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 767px) {
  .pricing .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 420px) {
  .pricing .box {
    max-width: 100%;
    margin: 0 auto 30px auto;
  }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .section-title {
  padding-bottom: 20px;
}

.faq .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 5px;
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active {
  background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}
.gallery_img .item {
    text-align: center;
    margin: 10px;
}
.gallery_img span.thumbnail {
    height: 270px;
    text-align: center;
    margin: 0px auto;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery_img span.thumbnail img {
    width: 100% !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0px auto !important;
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
.gallery_img span.thumbnail:hover img{
  filter: inherit;
}
.gallery_img span.thumbnail:hover{
  opacity: 1 !important;
}
.gallery_img .owl-nav{
  display: none;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
}

.testimonials .testimonial-item {
  background-color: var(--contrast-color);
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 90%);
  box-sizing: content-box;
  padding: 30px;
  margin: 40px 30px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: 0.3s;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.testimonials .swiper-slide {
  opacity: 0.3;
}

@media (max-width: 1199px) {
  .testimonials .swiper-slide-active {
    opacity: 1;
  }

  .testimonials .swiper-pagination {
    margin-top: 0;
  }

  .testimonials .testimonial-item {
    margin: 40px 20px;
  }
}

@media (min-width: 1200px) {
  .testimonials .swiper-slide-next {
    opacity: 1;
    transform: scale(1.12);
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0 0 4px color-mix(in srgb, var(--default-color), transparent 85%);
}

.contact .info-item i {
  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%;
  box-shadow: 0 2px 3px color-mix(in srgb, var(--default-color), transparent 85%);
}

.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0 0 4px color-mix(in srgb, var(--default-color), transparent 85%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .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(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  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%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
  padding: 20px;
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 88%);
}

.service-details .service-box+.service-box {
  margin-top: 30px;
}

.service-details .service-box h4 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.service-details .services-list a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-top: 15px;
  transition: 0.3s;
}

.service-details .services-list a:first-child {
  margin-top: 0;
}

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .services-list a.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.service-details .services-list a.active i {
  color: var(--contrast-color);
}

.service-details .services-list a:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.service-details .download-catalog a {
  color: var(--default-color);
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: 0.3s;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-details .download-catalog a:last-child {
  padding-bottom: 0;
}

.service-details .download-catalog a i {
  font-size: 24px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .download-catalog a:hover {
  color: var(--accent-color);
}

.service-details .help-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  margin-top: 30px;
  padding: 30px 15px;
}

.service-details .help-box .help-icon {
  font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
  color: var(--contrast-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.downarrow {
    position: relative;
    text-align: center;
}
.downarrow a {
    position: absolute;
    top: -20px;
    text-align: center;
    background: #fff;
    border: 1px solid #888888;
    padding: 6px 14px;
    z-index: 99;
    font-size: 22px;
    color: #242424;
}
.downarrow a:hover {
    font-size: 20px;
}
.starter-section {
  /* Add your styles here */
}

/* Style the video: 100% width and height to cover the entire window */
.videocontainer {
    width: 100%;
    height: 90vh;
    overflow: hidden;
}
.videoinnercontainer{
  width: 100%;
  height: 100%;
}
#myVideo {
  width: 100%;
  /*height: 100%;*/
}
.videotext {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    color: #fff;
    font-weight: 700;
}
.videotext h2 {
    background: #00000033;
    font-size: 40px;
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    font-family: 'DIN 30640 Std';
}

.aboutus{
  background: #000000; padding: 50px 0px;
}

.sa-text span {
/*    font-size: 140px;*/
    color: #ffffff;
    font-family: 'DIN 30640 Std';
    font-weight: 400;
    position: relative;
    line-height: normal;
    display: block;
    margin-top: 40px;
    overflow: hidden;
/*    line-height: 300px;*/
}
.sa-text .bell img, .bigBlck-text .bell img {
    width: 220px;
}
/*.sa-text span:before {
    content: '';
    width: 100px;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 70px;
}*/
.abouttext p {
    color: #ffffff;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    line-height: 30px;
    font-weight: 100;
    text-align: right;
}
.experience-heading{
  text-align: right;
}
.cloud-effect{
  padding: 0px;
  position: relative;
  height: 80px;
}
.cloud-effect:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000045;
}

.section-heading h3 {
    text-align: right;
    position: relative;
    color: #fff;
    font-size: 40px;
    font-family: 'DIN 30640 Std';
    font-weight: 200;
    margin-bottom: 15px;
}
.quotetext {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    vertical-align: middle;
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quotetext strong {
    display: block;
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 10px;
    font-family: 'Brandon Grotesque';
}
.quotetext span {
    font-size: 15px;
    font-family: 'Brandon Grotesque';
}
.bigBlck-text span {
/*    font-size: 140px;*/
    color: #000000;
    font-family: 'DIN 30640 Std';
    font-weight: 400;
    position: relative;
    line-height: normal;
    display: block;
    margin-top: 40px;
    overflow: hidden;
/*    line-height: 300px;*/
}
/*.bigBlck-text span:before {
    content: '';
    width: 100px;
    height: 1px;
    background: #000000;
    position: absolute;
    bottom: 70px;
    right: 20px;
}*/
/*.bigBlck-text span:after {
    height: 120px;
    width: 1px;
    content: '';
    position: absolute;
    left: 0;
    background: #000000;
    top: 0;
}*/
.bigBlck-text2 span{
  /*line-height: normal !important;*/
}
.ourmuse p {
    color: #000000;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    line-height: 30px;
    font-weight: 100;
}

.ourmuse h3 {
    text-align: left;
    position: relative;
    color: #000000;
    font-size: 40px;
    font-family: 'DIN 30640 Std';
    font-weight: 200;
    margin-bottom: 15px;
}

.mainsectionheading{
    position: relative;
    color: #000000;
    font-size: 40px;
    font-family: 'DIN 30640 Std';
    margin-bottom: 0px;
    text-transform: uppercase; 
}

.aboutmusical-voyage h1 {
    font-size: 28px;
    color: #000000;
    margin-bottom: 0px;
    font-family: 'Brandon Grotesque';
    letter-spacing: 1px;
}
.aboutmusical-voyage p{
    color: #000000;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    line-height: 30px;
    font-weight: 100;
}
.aboutmusical-voyage a{
  background: #000000;
  color: #ffffff;
  padding: 10px 20px;
}
.content_photo .item a {
    overflow: hidden;
    display: block;
}
.content_photo .item a:hover {
    opacity: 0.4;
}
.content_photo .item a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contactform input[type="text"], .contactform input[type="email"], .contactform input[type="number"] {
    width: 100%;
    display: block;
    height: 35px;
    padding: 10px;
    margin-bottom: 5px;
    border: none;
}
.contactform textarea{
    width: 100%;
    display: block;
    height: 100px;
    padding: 10px;
    margin-bottom: 5px;
    border: none;  
}
.contactform input[type="submit"] {
    border: 1px solid #fff;
    background: none;
    color: #fff;
    display: block;
    padding: 6px 20px;
    margin: 20px auto 0px;
    font-size: 16px;
    letter-spacing: 1px;
}
.contactform input[type="submit"]:hover{
  background: #ffffff;
  color: #000000;
}

.contactdetail {
    text-align: left;
    padding: 0;
    margin: 0;
}
.contactdetail li {
    list-style: none;
    padding: 10px 0px;
}
.contactdetail li a {
    color: #fff;
    text-decoration: none;
}
.contactdetail li i {
    display: inline-block;
    text-align: center;
    color: #fff;
    margin-right: 15px;
}

.content_photo .owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    top: 80px;
    width: 100%;
}
.content_photo .owl-nav .owl-prev {
    padding: 0 !important;
    background: no-repeat !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: left;
}
.content_photo .owl-nav .owl-prev:before {
    position: absolute;
    top: 30%;
    left: -50px;
    content: '\F284';
    font-family: "bootstrap-icons";
    font-size: 50px;
    color: #222222;
}

.content_photo .owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    top: 80px;
    width: 100%;
}
.content_photo .owl-nav .owl-next {
    padding: 0 !important;
    background: no-repeat !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: right;
}
.content_photo .owl-nav .owl-next:before {
    position: absolute;
    top: 30%;
    right: -50px;
    content: '\F285';
    font-family: "bootstrap-icons";
    font-size: 50px;
    color: #222222;
}
.meetingtab {
    background-color: #e0040e;
    position: fixed;
    top: 50%;
    z-index: 99;
    display: block;
    padding: 10px 15px;
    font-size: 18px;
    font-weight: 300;
    font-family: 'Brandon Grotesque';
}
.meetingtab a{
  color: #fff;
}

.item {
    margin: 10px;
}
.testimonialBox {
    margin-top: 30px;
    background: #fff;
    box-shadow: 0px 0px 17px #0000001a;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    height: 100%;
    width: 100%;
    position: relative;
}
.testimonialBox:before {
    position: absolute;
    top: 12px;
    left: 15px;
    content: '\F6B0';
    font-family: "bootstrap-icons";
    font-size: 40px;
    color: #0dacb1;
}
.testimonialBox:after {
    position: absolute;
    bottom: 12px;
    right: 15px;
    content: '\F6B0';
    font-family: "bootstrap-icons";
    font-size: 40px;
    transform: rotate(180deg);
    color: #0dacb1;
}
.testimonialBox p {
    color: #000000;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    line-height: 28px;
    font-weight: 100;
    padding: 0px 30px;
}
.testimonialBox strong {
    display: block;
    font-family: 'DIN 30640 Std';
    font-size: 24px;
    line-height: normal;
    color: #0b99a1;
}

footer{
  font-family: 'Brandon Grotesque';
}
#fixmeeting .section-heading h3{
  font-size: 30px;
}
.footerwidget .section-heading h3{
  text-align: left;
  text-transform: uppercase;
  padding-right: 0px;
  font-size: 30px;
}
.footerwidget .section-heading h3:before{
  right: inherit;
  left: 0px;
}
.footerwidget .section-heading h3:after{
  right: inherit;
  left: 18px;
}
.footerwidget ul {
    padding: 0px;
    margin: 0px;
}
.footerwidget ul li {
    list-style: none;
}
.footerwidget ul li {
    display: block;
    padding: 0px 0 10px 0;
}
.footerwidget ul li a {
    color: #fff;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    font-weight: 300;
}
.socialmedicion {
    text-align: center;
    margin-top: 10px;
}
.socialmedicion ul {
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.socialmedicion ul li {
    list-style: none;
}
.socialmedicion ul li a {
    width: 30px;
    height: 30px;
    text-align: center;
    border: 1px solid #000000;
    display: block;
    line-height: 30px;
    color: #000;
}
.socialmedicion ul li a:hover{
  background: #000;
  color: #fff;
}
.newsletterdiv{
  position: relative;
}
.newsletterdiv:after {
    height: 120px;
    width: 1px;
    content: '';
    position: absolute;
    right: 0;
    background: #ffffff;
    top: 0;
}
.newsletter strong {
    color: #fff;
    font-family: 'DIN 30640 Std';
    font-size: 30px;
}
.newsletter p {
    color: #ffffff;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    line-height: 30px;
    font-weight: 100;
}
.newsletter form {
    position: relative;
}
.newsletter form input[type="text"] {
    width: 100%;
    height: 45px;
    border: none;
    border-radius: 2px;
    position: relative;
    padding: 10px;
}
.newsletter form input[type="submit"] {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #000;
    border: none;
    height: 40px;
    color: #fff;
    padding: 8px 15px;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 27px;
}
.newsletter form input[type="text"]:focus-visible{
  outline: none;
}

/* homepage upcoming events section */
.upcomingsection h3{
    text-align: left;
    position: relative;
    color: #000000;
    font-size: 40px;
    font-family: 'DIN 30640 Std';
    font-weight: 200;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.upcomingeventdetail{

}
.upcomingeventdetail strong {
    display: block;
    font-family: 'DIN 30640 Std';
    font-size: 50px;
    color: #000;
    line-height: 50px;
}
.upcomingeventdetail small {
    display: block;
    font-size: 25px;
    font-family: 'Brandon Grotesque';
    color: #5f5f5f;
}
.blackbutton {
    display: block;
    background: #000;
    padding: 8px 30px;
    font-family: 'DIN 30640 Std';
    font-size: 20px;
    margin-right: 15px;
    border: 1px solid #000000; 
}
.blackbutton a {
    color: #fff;
}
.blackbutton:hover{
  background: #fff;
  border-color: #cdcccc;
}
.blackbutton:hover a{
  color: #242424;
}
.whitebutton{
    display: block;
    background: #fff;
    padding: 8px 30px;
    font-family: 'DIN 30640 Std';
    font-size: 20px; 
    border: 1px solid #cdcccc; 
}
.whitebutton a {
    color: #242424;
}
.whitebutton:hover{
  background: #000;
  border-color: #000;
}
.whitebutton:hover a{
  color: #fff;
}

.upcomingeventdetail ul {
    padding: 0px;
    margin: 20px 0px 0px;
    display: flex;
    gap: 10px;
}
.upcomingeventdetail li {
    list-style: none;
    border: 1px solid #cdcccc;
    text-align: center;
    padding: 10px 30px;
    border-radius: 10px;
}
.upcomingeventdetail li span {
    display: block;
    font-size: 60px;
    color: #000;
    font-family: 'DIN 30640 Std';
    line-height: 60px;
}
.upcomingeventdetail #countdown li small{
  font-family: 'Brandon Grotesque';
  display: block;
  font-size: 20px;
}

.graysection{
  background: #f3f3f3;
}

.newstyle-upcomingevent {
    position: relative;
    border: none;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 0px 11px #0000002b;
}
.newstyle-upcomingevent #countdown {
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0px;
    margin: 0px;
    right: 0;
}
.newstyle-upcomingevent ul {
    padding: 0px;
    margin: 20px 0px 0px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.newstyle-upcomingevent li {
    list-style: none;
    text-align: center;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 12px;
    background: #000000cc;
    color: #fff;
}
.newstyle-upcomingevent li span {
    display: block;
    font-size: 40px;
    color: #ffffff;
    font-family: 'DIN 30640 Std';
    line-height: 40px;
}
.newstyle-upcomingevent #countdown li small{
  font-family: 'Brandon Grotesque';
  display: block;
  font-size: 20px;
}
.newstyle-upcomingevent strong{
  display: none;
}
.newstyle-upcomingevent:hover strong {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    font-size: 28px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 100;
}
.newstyle-upcomingevent:hover:before {
    background: #000000eb;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
}
.upcomingsoon {
    height: 100%;
    background: #fff;
    box-shadow: 0px 0px 11px #0000002b;
    padding: 10px;
    border-radius: 5px;
    position: relative;
}
.upcomingsoon video {
    height: 100%;
    width: 100%;
    background: #000;
}
.upcomingsoon h3 {
    color: #575757;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    letter-spacing: 12px;
}

/* About Us START */
.custom-breadcrumb {
    background: url(../images/breadcrumb-image.jpg);
    width: 100%;
    height: 100%;
    padding: 170px 0px 60px;
    color: #fff;
    position: relative;
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
/*.custom-breadcrumb:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000008a;
    content: '';
}*/
.custom-breadcrumb h1 {
    color: #fff;
    font-weight: 400;
    font-size: 40px;
    position: relative;
    font-family: 'Brandon Grotesque';
    letter-spacing: 2px;
    text-transform: uppercase;
}
.innerbreadcrumb_padd {
    padding: 40px 0;
    background: #fff;
}
.innerbreadcrumb_padd:before {
    display: none;
}
.aboutfirstsection{
  margin-bottom: 50px;
}

.sec-title{
  position:relative;
  z-index: 1;
  margin-bottom:60px;
}

.sec-title .title{
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 24px;
  color: #F68D33;
  font-weight: 500;
  margin-bottom: 15px;
}

.sec-title h2{
  position: relative;
  display: block;
  font-size:40px;
  line-height: 1.28em;
  color: #222222;
  font-weight: 600;
  padding-bottom:18px;
  font-family: 'DIN 30640 Std';
}

.sec-title h2:before{
  position:absolute;
  content:'';
  left:0px;
  bottom:0px;
  width:50px;
  height:3px;
  background-color:#d1d2d6;
}

.sec-title .text{
  position: relative;
  font-size: 16px;
  line-height: 26px;
  color: #848484;
  font-weight: 400;
  margin-top: 35px;
}

.sec-title.light h2{
  color: #ffffff;
}

.sec-title.text-center h2:before{
  left:50%;
  margin-left: -25px;
}
.about-section{
  position: relative;
  padding: 60px 0 60px;
}

.about-section .sec-title{
  margin-bottom: 45px;
}

.about-section .content-column{
  position: relative;
  margin-bottom: 50px;
}

.about-section .content-column .inner-column{
  position: relative;
  padding-left: 30px;
}

.about-section .text {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 28px;
  color: #000000;
  font-weight: 100;
  font-family: 'Brandon Grotesque';
}

.about-section .list-style-one{
  margin-bottom: 45px;
}

.about-section .btn-box{
  position: relative;
}

.about-section .btn-box a{
  padding: 15px 50px;
}

.about-section .image-column{
  position: relative;
  background: #fff;
}

.about-section .image-column .text-layer{
    position: absolute;
    right: -110px;
    top: 50%;
    font-size: 325px;
    line-height: 1em;
    color: #ffffff;
    margin-top: -175px;
    font-weight: 500;
}

.about-section .image-column .inner-column{
  position: relative;
  padding-left: 60px;
  padding-bottom: 0px;
}
.about-section .image-column .inner-column .author-desc{
    position: absolute;
    bottom: 16px;
    z-index: 1;
    background: orange;
    padding: 10px 15px;
    left: 96px;
    width: calc(100% - 152px);
    border-radius: 50px;
}
.about-section .image-column .inner-column .author-desc h2{
    font-size: 21px;
    letter-spacing: 1px;
    text-align: center;
    color: #fff;
  margin: 0;
}
.about-section .image-column .inner-column .author-desc span{
    font-size: 16px;
    letter-spacing: 6px;
    text-align: center;
    color: #fff;
  display: block;
  font-weight: 400;
}
.about-section .image-column .inner-column:before {
    content: '';
    position: absolute;
    width: calc(50% + 80px);
    height: calc(100% + 100px);
    top: -40px;
    left: 0px;
    background: transparent;
    z-index: 0;
    border: 15px solid #312c32;
}

.about-section .image-column .image-1{
  position: relative;
}
.about-section .image-column .image-2{
  position: absolute;
  left: 0;
  bottom: 0;
}

.about-section .image-column .image-2 img,
.about-section .image-column .image-1 img{
  box-shadow: 0 30px 50px rgba(8,13,62,.15);
      border-radius: 46px;
}

.about-section .image-column .video-link{
  position: absolute;
  left: 70px;
  top: 170px;
}

.about-section .image-column .video-link .link{
  position: relative;
  display: block;
  font-size: 22px;
  color: #191e34;
  font-weight: 400;
  text-align: center;
  height: 100px;
  width: 100px;
  line-height: 100px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 30px 50px rgba(8,13,62,.15);
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.about-section .image-column .video-link .link:hover{
  background-color: #191e34;
  color: #fff;
}

.about-section2{
    background: url(../images/aboutmusemusic2.jpg) no-repeat right;
    background-size: 55%;
    background-color: #fdfdfd;
    overflow: hidden;
    padding: 40px 0;
}

.inner-container {
    width: 55%;
    float: left;
    background-color: #f3f3f3;
    padding: 50px 100px;
}

.inner-container h2{
    margin-bottom: 30px;
    font-size: 40px;
    font-weight: 600;
    font-family: 'DIN 30640 Std';
    color: #242424;
}

.text{
  margin-bottom: 10px;
  color: #000000;
  font-size: 18px;
  font-family: 'Brandon Grotesque';
  line-height: 30px;
  font-weight: 100;
}
.creatorsmain img {
    /*padding: 10px;*/
    /*background: #f3f3f3;*/
}
.creatorsmain h2{
    margin-bottom: 10px;
    font-size: 40px;
    font-weight: 600;
    font-family: 'DIN 30640 Std';
    color: #242424;
}

@media screen and (max-width:1200px){
    .inner-container{
        padding: 80px;
    }
}

@media screen and (max-width:1000px){
    .about-section2{
        background-size: cover;
        padding: 100px 40px;
        background-position: top center;
    }
    .inner-container {
        float: none;
        width: 90%;
        margin: 0px auto;
    }
}

@media screen and (max-width:600px){
    .about-section2{
        padding: 0;
    }
    .inner-container{
        padding: 15px;
    }
}

/* About Us END **************************************************/


/* Contact Us */
.contactusbackground {
    position: relative;
}
.contactusbackground:before {
    /* background: url(../images/background.png); */
    background: url(../images/ContactUs.png);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    opacity: 0.1;
    background-position: bottom center;
    z-index: 1;
    background-repeat: no-repeat;
}
.section-header {
  margin-bottom: 50px;
  text-align: center;
}

.section-header h2 {
  color: #242424;
  font-weight: bold;
  font-size: 40px;
  margin-bottom: 20px;
  font-family: 'DIN 30640 Std';
}

.section-header p {
  color: #242424;
  font-family: 'Brandon Grotesque';
  font-size: 18px;
}

.contact-info {
  width: 50%;
}

.contact-info-item {
  display: flex;
  margin-bottom: 30px;
}

.contact-info-icon {
  height: 70px;
  width: 70px;
  background-color: #242424;
  text-align: center;
  border-radius: 50%;
}

.contact-info-icon i {
  font-size: 30px;
  line-height: 70px;
  color: #ffffff;
}

.contact-info-content {
  margin-left: 20px;
}

.contact-info-content h4 {
  color: #000000;
  font-size: 1.4em;
  margin-bottom: 5px;
  font-family: 'DIN 30640 Std';
}

.contact-info-content p {
  color: #242424;
  font-size: 18px;
  font-family: 'Brandon Grotesque';
}

.contact-form {
  background-color: #f3f3f3;
  padding: 40px;
  width: 45%;
  position: relative;
  z-index: 9;
}

.contact-form h2 {
  font-weight: bold;
  font-size: 40px;
  margin-bottom: 10px;
  color: #333;
  font-family: 'DIN 30640 Std';
}

.contact-form .input-box {
  position: relative;
  width: 100%;
  margin-top: 10px;
}

.contact-form .input-box input,
.contact-form .input-box textarea {
  width: 100%;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  border: none;
  border-bottom: 2px solid #333;
  outline: none;
  resize: none;
  background: #f3f3f3;
}

.contact-form .input-box span {
  position: absolute;
  left: 0;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  pointer-events: none;
  transition: 0.5s;
  color: #666;
}

.contact-form .input-box input:focus ~ span,
.contact-form .input-box textarea:focus ~ span {
  color: #e91e63;
  font-size: 12px;
  transform: translateY(-20px);
}

.contact-form .input-box input[type="submit"] {
  width: 100%;
  background: #242424;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 18px;
  border: 1px solid #242424;
  transition: 0.5s;
}

.contact-form .input-box input[type="submit"]:hover {
  background: #fff;
  color: #242424;
}

@media (max-width: 991px) {
  section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .contact-info {
    margin-bottom: 40px;
    width: 100%;
  }

  .contact-form {
    width: 100%;
  }
}
/* Contact us END ************************************************/

/* Faqs CSS START */
.faqcontainer h2 button{
  font-size: 28px;
  font-family: 'DIN 30640 Std';
}
.faqcontainer h2 button:focus{
  box-shadow: none;
  outline: none;
}
.accordion-body{
  color: #242424;
  font-size: 18px;
  font-family: 'Brandon Grotesque';  
}
/* Faqs CSS END ************************************************/


/* Past Event CSS START */
.pasteventlist {
    padding: 15px;
    position: relative;
    height: 100%;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 4px #00000017;
}
/*.pasteventlist:before {
    position: absolute;
    top: -200px;
    right: 0;
    width: 80%;
    height: 100%;
    content: '';
    background: url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    opacity: 0.1;
}*/
.pasteventlist img {
    border-radius: 10px 10px 0px 0px;
}
.upcomingtag{
  position: absolute;
  top: 40px;
  left: 40px;
  background: #045061;
  padding: 8px 15px;
  border-radius: 50px;
  color: #fff;
  z-index: 9;
}
.upcomingtopbanner {
    text-align: center;
}
.upcomingtopbanner img {
    width: 100%;
}
/*.pasteventlist figure{
  overflow: hidden;
}
.pasteventlist figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .9s ease-in-out;
  transition: .9s ease-in-out;
}
.pasteventlist:hover figure img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}*/
.pasteventlist strong {
    color: #000000;
    font-family: 'DIN 30640 Std';
    font-size: 20px;
}
.pasteventlist h2 {
    color: #000000;
    font-size: 40px;
    font-family: 'DIN 30640 Std';
    text-transform: uppercase;
    font-weight: 200;
}
.pasteventlist p {
    color: #000000;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    line-height: 30px;
    font-weight: 100;
}
.pasteventlist button {
    background: #000;
    color: #fff;
    padding: 8px 15px 9px;
    text-transform: uppercase;
    font-size: 15px;
    border: none;
    font-family: 'Brandon Grotesque';
}
.pasteventlist:hover {
    box-shadow: 0px 0px 20px 5px #0000002b;
}
/*.pasteventlist:hover {
    background: #000;
    border-color: #000;
}
.pasteventlist:hover strong {
    color: #fff;
}
.pasteventlist:hover h2 {
    color: #fff;
}
.pasteventlist:hover p {
    color: #fff;
}
.pasteventlist:hover a {
    background: #fff;
    color: #242424;
}*/
/* Past Event CSS END *******************************************/


/* Past Event Detail CSS STRAT */
/*.pasteventDetail {
    height: 100%;
    border: 1px solid #cdcccc;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Brandon Grotesque';
}*/
.pasteventmaine-conatiner {
    background: #f3f3f3;
    position: relative;
}
.pasteventmaine-conatiner:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url(../images/eventdetailbg.png);
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
.pasteventDetail {
    position: relative;
}
.pasteventDetail h2 {
    font-size: 50px;
    font-family: 'DIN 30640 Std';
    color: #000;
    line-height: 40px;
}
.pasteventDetail strong{
    font-size: 20px;
    font-family: 'DIN 30640 Std';
    color: #000; 
}
.pasteventDetail ul.eventsdates {
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pasteventDetail ul.eventsdates li {
    font-family: 'Brandon Grotesque';
    font-weight: 400;
    list-style: none;
    font-size: 12px;
    border: 1px solid #0eb5b9;
    padding: 6px 10px;
    border-radius: 50px;
    background: #0eb5b9;
    color: #fff;
}
ul.pastevetBulletpoint {
    padding: 0;
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 20px;
}
ul.pastevetBulletpoint li {
    font-family: 'Brandon Grotesque';
    list-style: none;
    font-size: 16px;
    padding: 8px 0px;
}
ul.pastevetBulletpoint li i {
    padding-right: 5px;
}
.pasteventDetail p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 28px;
    color: #000000;
    font-weight: 100;
    font-family: 'Brandon Grotesque';
}
.carousel {
    position: relative;
    background: #fff;
    padding: 10px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    background-color: #000;
    padding: 5px;
    border: 5px solid #000;
    border-radius: 50%;
}
.pasteventDetail a {
    background: #000;
    color: #fff;
    padding: 8px 15px 9px;
    text-transform: uppercase;
    font-size: 15px;
    font-family: 'Brandon Grotesque';
    border: 1px solid #000000;
}
.pasteventDetail a:hover{
  background: #fff;
  color: #000000;
  border-color: #000000;
}
.pagecommendheading {
    text-align: left;
    position: relative;
    color: #000000;
    font-size: 40px;
    font-family: 'DIN 30640 Std';
    font-weight: 200;
    margin-bottom: 15px;
}

.card {
  position: relative;
  padding: 2rem 1rem;
  transition: 0.5s ease-in-out;
  /*height: 100%;*/
}

.card:hover {
  transform: translateY(20px);
}

.card::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(14, 181, 185, 0.5), rgba(4, 82, 98, 1));
  z-index: 2;
  transition: 0.5s all;
  opacity: 0;
}

.card:hover::before {
  opacity: 1;
}

.card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .overlay {
  position: relative;
  z-index: 3;
  color: #fff;
  opacity: 0;
  transform: translateY(30px);
  transition: 0.5s all;
  padding: 30px 0px;
}
.card:hover .overlay {
  opacity: 1;
  transform: translateY(30px);
}
.card .overlay strong {
    display: block;
    font-family: 'Brandon Grotesque';
    font-weight: 400;
}


.overlay {}

.text-p {
    font-family: 'Brandon Grotesque';
    line-height: normal;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 150px;
    overflow-y: scroll;
}
.artistname {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    width: 95%;
    background: #000000b3;
    padding: 10px;
    margin: 0px auto;
    color: #fff;
}
.text-h2{
  color: #fff;
  font-family: 'DIN 30640 Std';
  font-size: 30px;
  margin: 0px;
}
.artistname strong{
    font-family: 'Brandon Grotesque';
    font-weight: 400;
    font-size: 18px;
}
.card:hover .artistname{
  display: none;
}

.cruiseexperience .col-lg-4{
  margin-top: 20px;
}
.excursionsDetail strong{
  display: block;
}
.cruiseexperience{
  position: relative;
}
.cruiseexperience:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(../images/eventdetailbg.png);
    content: '';
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.experience-whitebox {
    text-align: center;
    padding: 30px 20px;
    height: 100%;
    box-shadow: 0px 0px 17px #84848440;
    border-radius: 20px;
    position: relative;
}
.experience-whitebox {
    text-align: center;
    background: #fff;
    padding: 30px 20px;
    height: 100%;
    box-shadow: 0px 0px 17px #0000001a;
    border-radius: 20px;
}
.experience-whitebox h3{
    color: #000000;
    font-size: 25px;
    font-family: 'DIN 30640 Std';
    font-weight: 200;
    margin-bottom: 15px; ; 
}
.experience-whitebox p{
    color: #888888;
    font-size: 18px;
    line-height: 30px;
    font-family: 'Brandon Grotesque';  
}
.partner-logo {
    background: #fff;
    box-shadow: 0px 0px 17px #0000001a;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}
.partner-logo  img{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
.pasteventvideos strong {
    display: block;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    border-bottom: 1px dashed #cdcccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.artistmainbox {
    padding: 20px;
    margin-bottom: 20px;
    background: #f3f3f3;
}
.newartists-detail h2{
    color: #181818;
    font-size: 30px;
    font-family: 'DIN 30640 Std';
    font-weight: 200;
    margin-bottom: 0px; 
}
.newartists-detail p{
    color: #000000;
    font-size: 18px;
    line-height: 30px;
    font-weight: 100;
    font-family: 'Brandon Grotesque';  
}
.newartists-detail strong {
    display: block;
    font-family: 'Brandon Grotesque';
    font-weight: 400;
    margin-bottom: 10px;
}
.artistimage {
  position: relative;
}
/*.artistimage img{
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}*/
.artistimage:before,
.artistimage:after {
  content: "";
  display: block;
  position: absolute;
  height: 75px;
  width: 75px;
  border-color: #040607;
  border-style: solid;
}
.artistimage:before {
  border-width: 1px 0 0 1px;
  top: -8px;
  left: -8px;
}
.artistimage:after {
  border-width: 0 1px 1px 0;
  bottom: -8px;
  right: -8px;
}

.excursionsImg {
    height: 250px;
    overflow: hidden;
    border-radius: 5px;
}
.excursionsImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.excursionsDetail {
    background: #fff;
    padding: 0;
    box-shadow: 0px 0px 17px #00000036;
    margin: -20px 10px 0px;
    position: relative;
    border-radius: 0px 0px 10px 10px;
    overflow-y: scroll;
    height: 300px;
    /* min-height: 300px; */
    border: 20px solid #fff;
}
.excursionsDetail h2 {
    text-align: left;
    position: relative;
    color: #000000;
    font-size: 25px;
    font-family: 'DIN 30640 Std';
    font-weight: 200;
    margin-bottom: 10px;
}
.excursionsDetail strong{
    font-size: 18px;
    display: block;
    font-family: 'DIN 30640 Std';
    font-weight: 200;
}
.excursionsDetail p {
    color: #000000;
    font-size: 16px;
    line-height: 27px;
    font-weight: 300;
    font-family: 'Brandon Grotesque';
    margin-bottom: 5px;
}


#style-4::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
  background-color: #ffffff;
}

#style-4::-webkit-scrollbar {
  width: 5px;

  background-color: #ffffff;
}

#style-4::-webkit-scrollbar-thumb {
  background-color: #666666;
  border: 1px solid #666666;
  border-radius: 50px;
}

.day-to-day ul {
    margin-bottom: 30px;
    border-bottom: none;
    margin-top: 30px;
}
.day-to-day button {
    border: none !important;
    font-size: 22px;
    font-family: 'DIN 30640 Std';
    background: #f3f3f3;
    margin-right: 10px;
    display: block;
    color: #565656 !important;
    padding: 5px 20px;
    border-radius: 10px !important;
}
.day-to-day button.active {
    background: #000000 !important;
    color: #fff !important;
}
.day-to-day button:hover{
  background: #454545 !important;
  color: #fff !important;
}
.day-to-day h3 {
    font-size: 15px;
    text-align: right;
    font-family: 'Brandon Grotesque';
    background: #000;
    display: inline-block;
    float: right;
    padding: 10px 15px;
    color: #fff;
    border-radius: 1px;
}
.day-to-day table.table {
    /*border: 1px solid #e5e5e5;*/
}
.day-to-day table.table td, .day-to-day table.table th {
    padding: 15px;
    font-family: 'Brandon Grotesque';
    font-size: 18px;
    font-weight: 100; 
}
/* Past Event Detail CSS END ************************************/


/* Upcoming Event CSS */
.upcomingevent-counter {
    text-align: center;
    background: #ffffff;
    position: relative;
    padding-bottom: 50px;
}
/*.upcomingevent-counter:before {
    background: url(../images/Dots_About_us.png);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: 100%;
    content: '';
    background-repeat: no-repeat;
    opacity: 0.3;
}*/
.upcoming-eventname {
    color: #242424;
    font-size: 50px;
    font-family: 'Brandon Grotesque';
    padding: 30px 0px 50px;
    position: relative;
}
.upcomingevent-counter #countdown {
    position: relative;
}
.upcomingevent-counter #countdown ul {
    padding: 0px;
    margin: 0px;
}
.upcomingevent-counter #countdown ul li {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-family: 'Brandon Grotesque';
    font-size: 20px;
    color: #242424;
}
.upcomingevent-counter #countdown ul li span {
    display: block;
    font-size: 80px;
    font-family: 'DIN 30640 Std';
    line-height: 70px;
    color: #242424;
}

/* Upcoming Event CSS END **************************************/


/* Advisory board */
.team {
  padding-bottom: 70px;
  font-family: "Poppins", sans-serif;
}
.team .section-title {
  text-align: left;
  margin-bottom: 50px;
}
.team__item {
    height: 280px;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    overflow: hidden;
    background-position: top center;
    background-size: cover;
    border-radius: 8px;
    box-shadow: rgb(0 0 0 / 77%) 0px -50px 36px 0px inset;
}
.team__item:after {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(0 0 0 / 80%);
  content: "";
  z-index: -1;
  opacity: 0;
  -webkit-transition: all, 0.5s, ease-out, 0.5s;
  -o-transition: all, 0.5s, ease-out, 0.5s;
  transition: all, 0.5s, ease-out, 0.5s;
}
.team__item:hover:after {
  opacity: 1;
}
.team__item:hover .team__text {
  top: 0;
}
.team__item:hover .team__text .team__title {
  border-bottom: 1px solid rgba(183, 183, 183, 0.2);
  padding: 0 0 26px;
  margin-bottom: 26px;
  opacity: 0;
  visibility: hidden;
  position: relative;
  bottom: initial;
  opacity: 1;
  visibility: visible;
}
.team__item:hover .team__text p {
  top: 0;
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.5s ease 0.3s;
  -o-transition: all 0.5s ease 0.3s;
  transition: all 0.5s ease 0.3s;
}
.team__item:hover .team__text .team__social {
  opacity: 1;
  visibility: visible;
  bottom: 34px;
  -webkit-transition: all 0.5s ease 0.5s;
  -o-transition: all 0.5s ease 0.5s;
  transition: all 0.5s ease 0.5s;
}
.team__text {
  height: 100%;
  top: 200px;
  position: relative;
  padding: 35px 30px 30px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.team__text .team__title {
  padding: 0 0 26px;
  margin-bottom: 26px;
  position: relative;
}
.team__text .team__title h4 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 28px;
  font-family: 'DIN 30640 Std';
}
.team__text .team__title span {
    font-size: 16px;
    color: #f3f3f3;
    font-family: 'Brandon Grotesque';
    letter-spacing: 1px;
}

@media (max-width: 768px) {
  .team__item {
    height: 350px;
  }
  .team__text {
    padding: 25px 20px 20px;
  }
}

.savethedate .modal-body {
    position: relative;
    padding: 5px;
}
.savethedate .modal-body img{
  border-radius: 10px;
}
.savethedate .modal-body button {
    position: absolute;
    top: -10px;
    right: -10px;
    opacity: 1;
    width: 25px;
    height: 25px;
    background: #fff;
    z-index: 9;
    color: #000000;
    border-radius: 50px;
    font-weight: 800;
    font-size: 16px;
    line-height: normal;
}
.savethedate .modal-body button:focus{
  outline: none;
  box-shadow: none;
}

section#fixmeeting {
    background: #000;
}
.aboutus .container, .whitesection .container, .graysection .container {
    position: relative;
}
.aboutus .container:before, .whitesection .container:before, .graysection .container:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 200px;
    background: #0eb5b9;
    content: '';
}
.aboutus .container:after, .whitesection .container:after, .graysection .container:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.5px;
    height: 200px;
    background: #0eb5b9;
}

/* Responsive CSS */

@media only screen and (max-width:767px){
  .sa-text span {
      font-size: 150px;
      /*margin-top: -100px;*/
  }
  .videocontainer  #myVideo{
    width: 100% !important;
  }

  #myVideo{
    width: auto !important;
  }
  .bigBlck-text span{
    font-size: 150px;
  }
  .quotetext{
    padding: 20px;
  }
  .quotetext strong{
    font-size: 25px;
  }
  .aboutmusical-voyage{
    background: #f3f3f3;
  }
  .content_photo .item a{
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }
  .content_photo .owl-nav .owl-prev:before{
    left: 0px;
  }
  .content_photo .owl-nav .owl-next:before{
    right: 0px;
  }
.contactdetail {
    display: flex;
    align-items: center;
    gap: 20px;
}
.footerwidget {
    margin-top: 30px;
}
.abouttext p{
  text-align: left;
}

/* about us page */
.aboutfirstsection{
  margin-bottom: 0px;
}
.about-section .content-column .inner-column {
    padding: 0px;
    margin-top: 80px;
}
.about-section .content-column{
  margin-bottom: 0px;
}

/* Contact Us Page */
.newsletter {
    margin: 30px 0;
    background: #121212;
    padding: 10px;
}
.contactform {
    background: #121212;
    padding: 15px;
    margin: 20px 0px;
}
.col-reverse {
    flex-direction: column-reverse;
}

.innerbreadcrumb_padd {
    padding: 25px 0px;
}
ul.pastevetBulletpoint{
  display: block;
}
.day-to-day ul{
  display: block;
}
.day-to-day button {
    width: 100%;
    margin: 10px 0;
}
.artistimage {
    margin-bottom: 20px;
}
.excursionsmainbox {
    margin-bottom: 30px;
}
.videocontainer {
  height: 100%;
  padding-top: 70px;
}
footer img {
    width: 100%;
}
.upcomingtopbanner {
    padding-top: 30px;
}
.upcoming-eventname {
    font-size: 35px;
    padding: 30px 0px;
    line-height: 36px;
}
.upcomingeventdetail ul{
  gap: 6px;
}
.upcomingeventdetail li{
  padding: 10px 15px;
}
.upcomingevent-counter #countdown ul li span {
    font-size: 60px;
    line-height: 60px;
}
}

@media (max-width: 991px) {
  .newsletter{
    margin-top: 30px;
  }
  .artistimage{
    text-align: center;
  }
.col-reverse {
    flex-direction: column-reverse;
}
.day-to-day ul {
    margin-bottom: 20px;
}
.day-to-day button {
    font-size: 16px;
    margin-right: 5px;
    padding: 5px 15px;
}
.upcoming-eventname {
    font-size: 40px;
    padding: 30px 0px;
}
}

.bell{-webkit-animation: mover 1s infinite  alternate;animation: mover 1s infinite  alternate;}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50px); }
}

.imga.right {
    right: 0;
}

/* Blog Page */
section.blogsection {
    background: #f5f5f5;
    padding-top: 30px;
}
.blogcontainer {
    border: 1px solid #cdcccc;
    border-radius: 25px;
    height: 100%;
}
.blogImg {
    margin-bottom: 10px;
}
.blogImg img {
    border-radius: 25px 25px 0px 0px;
}
.blogcontent {
    padding: 0px 20px 10px;
}
.blogcontent small {
    font-size: 12px;
    color: #7e7e7e;
}
.blogcontent h2 {
    font-size: 28px;
    color: #000000;
    font-family: 'DIN 30640 Std';
}
.blogcontent p {
    color: #000000;
    font-size: 18px;
    font-family: 'Brandon Grotesque';
    line-height: 28px;
    font-weight: 100;
}
.blogcontent a {
    display: block;
    color: #242424;
    font-size: 20px;
    text-align: right;
    font-family: 'DIN 30640 Std';
}
.viewallblog {
    text-align: center;
    margin-top: 50px;
}
.viewallblog a {
    background: #000000;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 18px;
    line-height: 45px;
}
.whatappIcon {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: #25D366;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    border-radius: 50px;
    -webkit-animation: mover 1s infinite  alternate;animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
.whatappIcon a {
    color: #fff;
    display: block;
}

@media (-webkit-device-pixel-ratio: 1) {
.custom-breadcrumb{
  padding: 200px 0px 100px;
}
}