@font-face {
    font-family: icomoon;
    src: url('icomoon/fonts/icomoon.eot?tpwr6c');
    src: url('icomoon/fonts/icomoon.eot?tpwr6c#iefix') format('embedded-opentype'),
         url('icomoon/fonts/icomoon.ttf?tpwr6c') format('truetype'),
         url('icomoon/fonts/icomoon.woff?tpwr6c') format('woff'),
         url('icomoon/fonts/icomoon.svg?tpwr6c#icomoon') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
[class*=" icon-"],
[class^=icon-] {
    font-family: icomoon !important;
    speak: never;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-style: normal;
}
.icon-tiktok:before {
    content: "\e900";
}
.icon-discord:before {
  content: "\e901";
}
/* -----
SVG Icons - svgicons.sparkk.fr
----- */
.svg-payment {
  width: auto;
  height: 1.2em;
}
.svg-instapay {
  width: auto;
  height: 1.2em;
}
.svg-icon {
  width: 2em;
  height: 2em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: var(--text);
}

.svg-icon circle {
  stroke: var(--accent);/*#4691f6*/
  stroke-width: 1;
}

.img-clients {
  width: 9em;
  height: auto;
}

.img-clients fill,
.img-clients path,
.img-clients polygon,
.img-clients rect {
  fill: var(--text)!important;
}

.img-clients circle {
  stroke: var(--accent);/*#4691f6*/
  stroke-width: 1;
}


html {
    /*scroll-behavior: smooth;  Enables smooth scrolling */
}

body {
    font-optical-sizing: auto;
    font-family: 'Montserrat' , sans-serif;
    color: var(--text); /* Updated */
    background-color: var(--background);
    /*background-image: url("../imgs/bg1.png");*/
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto;
    font-weight: 400;
    font-style: normal;
}
hr {
      border: 0.1px solid var(--background-alt); /* Updated */
}
table, th, td {
    border-bottom: 1px solid var(--background-alt); /* Updated */
}
table, th,td {
  border-top:0px !important;
}
article{
  padding:0px !important;
  margin:0px !important;
}
a,
a:focus,
a:hover {
    color: var(--link); /* Updated */
    font-weight: 700;
    text-decoration: none; /* Remove underline from all links */
    transition: background-color .5s ease-out .1s;
}
a .btn,
a .btn:hover {
    font-weight: 700;
    border:0px !important;
    color: var(--black) !important;
}

.bebas,
.anton,
.h1,
.h2,
.navbar-brand,
h1,
h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400 !important;
    font-style: normal;
    font-stretch: expanded;
    text-transform: uppercase;
    transition: background-color 1s ease-out .1s;
}

h1,h2,h1 a,h2 a,h3 a,h4 a,h5 a,
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,
.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,
.h1 a:hover,.h2 a:hover,.h3 a:hover,.h4 a:hover,.h5 a:hover {
    font-weight: 400 !important;
}
h3 {
    font-size: 1.2rem; /* Adjust this value as needed */
}

h4 {
    font-size: 1rem; /* Adjust this value as needed */
}

h5 {
    font-size: 0.9rem; /* Adjust this value as needed */
}

h6 {
    font-size: 0.8rem; /* Adjust this value as needed */
}
h1.page-heading-blogs {
  text-decoration: underline;
  text-decoration-color: var(--accent)!important; /* Underline color */
}
h1.page-heading-custom_pages {
  text-decoration: underline;
  text-decoration-color: var(--primary)!important; /* Underline color */
}
h1.page-heading-proposals,h1.page-heading-portfolio {
  text-decoration: underline;
  text-decoration-color: var(--info)!important; /* Underline color */
}
h1.page-heading-services {

  text-decoration: underline;
  text-decoration-color: var(--background-alt)!important; /* Underline color */
}
/*custom 0.0.1 */
.main-section {
    min-height: 70vh;
}

.header,.title {
    border-bottom: 1px solid var(--background-alt); /* Updated */

}
.jumbotron {
    text-align: center;
    margin:0px;
    border-bottom: 0px !important;
}
.jumbotron > p {
    font-weight: 500;
}
 .input-group-text, .form-control, .input-group-prepend {
    border-radius: 50px;

}
 .formControler .btn, .formControler .input-group-text, .formControler .form-control {
    padding: 10px 20px!important;
    font-size: 18px;
}

.formControler .input-group-text, .formControler .form-control {
      height:46px;
}
/*ipad + */
@media (max-width: 768px), (max-width: 932px) {

   .formControler .input-group, .formControler .btn {
    width:100% !important;
  }
}


footer.footer {
    margin: 0px;
    padding:0px;
  /*  padding-top: 19px;*/
    border-top: 0px!important;  /*solid var(--background-alt); Updated */
    background-color: var(--dark); /* Updated */
    color: var(--primary); /* Updated */
}
footer {color:  var(--text) !important;}
footer.footer a{color: var(--text);}
.box,
.jumbotron {
    background-color: var(--primary); /* Updated */
    background-image: linear-gradient(to right, var(--primary), var(--primary-hover));
    /* background-image: linear-gradient(to right, var(--primary-100), var(--primary)); */
}
.btnCir {
  background-color: rgba(255, 255, 255, 0.1);
  padding:15px 20px;
  border-radius: 100px;
}
/*images */
img.review-thumbs {
  width:80px !important;
  height:80px !important;
}
.img-1x1 {  aspect-ratio: 1 / 1;}
.img-4x5 {  aspect-ratio: 4 / 5;}
.img-16x9 {aspect-ratio: 16 / 9;}
.img-9x16 {aspect-ratio: 9 / 16;}
.img-4x3 {aspect-ratio: 4 / 3;}
.img-2x1 {aspect-ratio: 2 / 1;}
.img-4x1 {aspect-ratio: 4 / 1;}
.img-26x9 {aspect-ratio: 26 /9;}
.img-overlay {max-height:476px!important;}
.img-listing {max-height:300px!important;}
.img-post {
  width:100%;
  max-height:20hv;
}
.vh10 {
  min-height: 10vh !important;
}
.vh20 {
  min-height: 20vh !important;
}
.vh40 {
  min-height: 40vh !important;
}
.vh50 {
  min-height: 50vh !important;
}
.vh60 {
  min-height: 60vh !important;
}
.vh70 {
  min-height: 70vh !important;
}
.vh80 {
  min-height: 80vh !important;
}
.vh90 {
  min-height: 90vh !important;
}
.vh100 {
  min-height: 100vh !important;
}
.hw100{
  min-width:100hw;
}
.object-fit-cover {
   object-fit: cover;
  /*  height:20%;*/
}
.object-fit-fill {
   object-fit: fill;
  /*  height:20%;*/
}
.object-fit-contain {
   object-fit: contain;
  /*  height:20%;*/
}

/* Calendar */
#info-div {
  position: fixed;
  top: 0;
  right: -100%; /* Initially hide the div off-screen */
  width: 100%;  /* Set the width of the info-div */
  height: auto;  /* Full height of the viewport */
  background: transparent;
  transition: right 0.5s ease-in-out;  /* Animate the sliding effect */
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);  /* Add a shadow for visual effect */
  overflow-y: auto;
  z-index: 9999;  /* Ensure it appears on top */
}

#info-div.show {
  right: 0;  /* Slide the div in to the screen */
}
.pointer{
    cursor: pointer;
}

.calendar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calendar-week {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

.calendar-month-name {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.calendar-day {
    width: calc(100% / 7);
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    cursor: pointer;
}

.calendar-day.available {
    background-color: #28a745; /* Green for available days */
    color: white;
}

.calendar-day.no-availability {
    background-color: #ccc; /* Grey for unavailable days */
    cursor: not-allowed;
}

.calendar-day span {
    display: block;
}

.availability-section {
    display: none;
    margin-top: 30px;
}

.availability-section p {
    margin: 5px 0;
}
.calendar-day.clickable {
    background-color: #4CAF50; /* Green for available days */
    cursor: pointer;
}
/* Sliders */


.downloads-wrapper {
  width:89%;
}
.didscarousel-cell {
  width: 100%;
  height: auto;
  /* margin-right: 10px; */
  counter-increment: didscarousel-cell;
}
.blogs-wrapper {
  width:100%;
 }

 .blog-listing {
   /* width: 40.2%; */
   border-bottom: 1px solid var(--background)!important;
   height:124px;
 }
 .blog-listing img {width:124px; height:124px;}

@media screen and ( min-width: 768px ) {
  /* half-width cells for larger devices */
  .didscarousel-cell {
    width: 40.2%;
  }
  .downloads-wrapper, .blogs-wrapper {
    width:75%;
  }

}
/*.footer,
.header {
    padding-bottom: 10px;
}
.footer,
.header,
.marketing {
    padding-right: 15px;
    padding-left: 15px;
}

.header {
    padding-top: 10px;
}*/

.monFont {
   font-family: 'Montserrat' , sans-serif;
   background-position: top;
   background-repeat: no-repeat;
   background-size: auto;
   font-weight: 400;
   font-style: normal;
}
.share-button {
 background: var(--light)!important;
 display: inline-flex!important;
 align-items: center!important;
 padding: 10px 15px!important;
 margin:4px;
 border-radius: 5px!important;
 color:  var(--link);
 text-decoration: none!important;
 transition: background-color 0.3s, transform 0.2s;
 font-size: 16px!important;
 font-family: 'Arial', sans-serif;
}
.random-shape  svg{
    width: 50px;  /* Set the width you desire */
    height: 50px; /* Set the height you desire */
    /* You can also add other styles if needed */
    display: block; /* Ensures proper spacing */
    margin: 10px auto; /* Center the shapes */
}
.logo-box {
   background-image: url('../logo-trans.svg');
   width: 50px;  /* Set the width you desire */
   height: 50px; /* Set the height you desire */
   /* You can also add other styles if needed */
   display: block; /* Ensures proper spacing */
   margin: 10px auto; /* Center the shapes */
}
.x100 {
    font-weight: 100 !important;
}

.x300 {
    font-weight: 300 !important;
}
.x400 {
    font-weight: 400 !important;
}

.x700,.btn {
    font-weight: 700 !important;
}

.x900 {
    font-weight: 900 !important;
}


/* Initially hide the sticky div */
.hidden {
    display: none;
}

/* Make it visible when the sticky class is applied */
.visible {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    background-color: var(--background-alt);
    color: var(--text);
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Define the shake animation */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* Add the shake class */
.shake {
  animation: shake 0.9s;
  animation-iteration-count: infinite; /* Optional: Can loop indefinitely */
}
/* Custom positioning for the reCAPTCHA badge */
.grecaptcha-badge {
    position: fixed;
    bottom: 170px!important;  /* Distance from the bottom */
    right: 20px;    /* Distance from the left side */
    z-index: 1000; /* Ensure it stays above other elements */
    opacity: 0.4!important;  /* Optional: make it slightly transparent */
    transition: opacity 0.3s ease;
}

/* Optional: make it fully visible on hover */
.grecaptcha-badge:hover {
    opacity: 1;
}
#themeToggle {
    position: fixed; /* Fixes the button to the screen */
    bottom: 20px;    /* Distance from the bottom of the screen */
    right: 20px;     /* Distance from the right edge of the screen */
    background-color: var(--primary);
    color: var(--text);
    padding: 10px 15px;
    border: none;
    font-weight:bold;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1000; /* Keeps it on top of other elements */
    opacity:0.4;
}

#themeToggle:hover {
    background-color: var(--primary-hover);
    opacity:1;
}

#lang-toggle {
    position: fixed; /* Fixes the button to the screen */
    bottom: 66px;    /* Distance from the bottom of the screen */
    right: 20px;     /* Distance from the right edge of the screen */
    background-color: var(--primary);
    color: var(--text-alt);
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1000; /* Keeps it on top of other elements */
    opacity:0.4;
}
#lang-toggle:hover {
    background-color: var(--primary-hover);
    opacity:1;
}

.lang-toggle {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;

}

.lang-toggle img {
    margin-right: 4px; /* Adjust spacing as needed */
    transition: transform 0.3s; /* Optional: Add transition for effects */
}

.lang-toggle:hover img {
    transform: scale(1.1); /* Optional: Slightly enlarge the icon on hover */
}
#scrollToTop {
    position: fixed;
    bottom: 110px;
    right: 20px;
    background-color: var(--primary);
    color: var(--text);
    border: none;
    border-radius: 5px;
    padding: 10px 16px;
    cursor: pointer;
    display: none; /* Hidden by default */
    transition: background-color 0.3s ease;
    z-index: 1000; /* Keeps it on top of other elements */
    opacity:0.4;
}

#scrollToTop:hover {
    background-color: var(--primary-hover);
    opacity:1;
}

.parallax {
   background-attachment: fixed;
   background-size: cover;
   background-position: center;
   /* height: 80vh; Adjust height as needed */
}
.overlay {
   position: relative;
   height: 100%;
   background-color: rgba(0,0,0, 0.8)!important; /* Optional: Add overlay color */
   color: var(--text-alt) !important; /* Text color */
   display: flex;
   align-items: center; /* Center content vertically */
   justify-content: center; /* Center content horizontally */
   text-align: center;
}
.responsive-iframe-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio; adjust as needed */
    overflow: hidden;
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.thumbnail {
    margin: 20px 0 0;
    padding: 0;
}
/*bootstrap 4.x*/
.modal-content {
  background-color: var(--background-alt);
}
.navbar-light,
.navbar-light .navbar-collapse,
.navbar-light .navbar-form,
.navbar-light .navbar-toggle {
    border-color: transparent;
}

.navbar-light {
    background-color: var(--background); /* Updated */
}

.navbar-light .navbar-brand,
.navbar-light .navbar-text {
    color: var(--text); /* Updated */
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
    color: var(--text); /* Updated */
    background-color: transparent;
}

.navbar-light .navbar-nav > li > a,
.navbar-light .navbar-nav > li > button,
.navbar-light .navbar-nav > li > ul > li > a {
    border-radius: 4px;
}

.navbar-light .navbar-nav > li > a.nav-link,.nav-item,
.navbar-light .navbar-nav > li > ul > li > a.nav-link {
    color: var(--link); /* Updated */
}

.navbar-light .navbar-nav > .open > a,
.navbar-light .navbar-nav > .open > a:focus,
.navbar-light .navbar-nav > .open > a:hover,
.navbar-light .navbar-nav > li > a.nav-link:focus,
.navbar-light .navbar-nav > li > a.nav-link:hover,
.navbar-light .navbar-nav > li > ul > li > a.nav-link:focus,
.navbar-light .navbar-nav > li > ul > li > a.nav-link:hover {
    color: var(--text); /* Updated */
    background-color: var(--background-alt); /* Updated */
}

.navbar-light .navbar-nav > .active > a.nav-link,
.navbar-light .navbar-nav > .active > a.nav-link:focus,
.navbar-light .navbar-nav > .active > a.nav-link:hover {
    /*color: var(--link) !important; */
    background-color: var(--primary);
    /* font-weight: 900;
    margin-right: 8px;
    margin-left: 8px; */
}

.form-control {
    background-color: var(--light); /* Use the secondary theme color */
    color: #fff; /* Optional: change text color for better contrast */
    border:0px;
}

/* Optional: Change the input background color on focus */
.form-control:focus {
    background-color: var(--background-alt); /* Keep the same background on focus */
    border-color: #ccc; /* Optional: change border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(171, 205, 211, 0.25); /* Optional: add a focus shadow */
}
/* Change color of the carousel control icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: transparent; /* Ensure background is transparent */
  width: 30px; /* Set width to ensure proper sizing */
  height: 30px; /* Set height to ensure proper sizing */
  background-image: none; /* Remove the default background image */
  color: var(--text); /* Set the color to your desired variable */
  font-size: 2rem; /* Adjust size if using font-based icons */
}

/* Optional: Change color on hover for better visibility */
.carousel-control-prev:hover .carousel-control-prev-icon::before,
.carousel-control-next:hover .carousel-control-next-icon::before {
  color: rgba(var(--text-alt), 0.7); /* Adjust opacity if needed */
}
/* Change color of carousel indicators */
.carousel-indicators li {
  background-color: var(--text);
}

.slide-height-container{
   min-height: 300px;
}
.left-side {
    max-height: 300px; /* Set max height for the image container */
}

.right-side {
    padding-left: 10px; /* Adjust padding for spacing */
}



@media screen and (min-width: 768px) {
    .footer,
    .header,
    .marketing {
        padding-right: 0;
        padding-left: 0;
    }

    .header {
        margin-bottom: 30px;
         /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); */
    }

    .jumbotron {
        border-bottom: 0;
    }
}
@media (max-width: 576px) {
  .slide-height-container{
     min-height: 100%;
  }
  .carousel-indicators{

    display:none;
  }
    .left-side {
        min-width: 300px; /* Remove padding on small screens for better spacing */
    }
    .right-side {
        padding-left: 0; /* Remove padding on small screens for better spacing */
        margin-top:30px;
    }
}
@media (max-width: 768px) {

  .nodisplay { display:none;}
  .formControler > .w-50 {
    width:100% !IMPORTANT;
    }
.parallax {height: 50vh !important;}
footer, .ulExtra{text-align: center!IMPORTANT;}
.ulExtra {display:inline;}

.navbar-light .navbar-nav .open .dropdown-menu > li > a {
    color: #666;
}

.navbar-light .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-light .navbar-nav .open .dropdown-menu > li > a:hover {
    color: var(--background-100); /* Updated */
    background-color: transparent;
}

.navbar-light .navbar-nav .open .dropdown-menu > .active > a {
    color: var(--primary); /* Updated */
    background-color: var(--background); /* Updated */
}


.navbar-light .navbar-nav > .active > a.nav-link,
.navbar-light .navbar-nav > .active > a.nav-link:focus,
.navbar-light .navbar-nav > .active > a.nav-link:hover {padding-left: 4px;margin-left:0}

}
@media (max-width: 600px) {
    #themeToggle {
        font-size: 14px; /* Slightly reduce font size for smaller screens */
        padding: 8px 12px;
    }
}

/*flickity*/

.slides_minimal_-cell {
  width: 100%;
  height: auto;
  /* margin-right: 10px; */
  counter-increment: slides_minimal_-cell;
}
.xcarousel {
    background: transparent;
    height: 150px;
    margin: 20px auto;
}

.xcarousel-cell {
    width: 20%;
    height: auto;
    margin-right: 10px;
    counter-increment: carousel-cell;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.xcarousel-cell img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.xcarousel-cell.is-selected img {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: none;
    filter: none;
}

.flickity-prev-next-button {
    width: 60px;
    height: 60px;
    background: 0 0;
    opacity: .6;
}

.flickity-prev-next-button:hover {
    background: 0 0;
    opacity: 1;
}

.flickity-prev-next-button .arrow {
    fill: white;
}

.flickity-prev-next-button.no-svg {
    color: #fff;
}

.flickity-prev-next-button.previous {
    left: 0;
}

.flickity-prev-next-button.next {
    right: 0;
}

.flickity-prev-next-button:disabled {
    display: none;
}