/******************* MAIN COLORS *******************/

a {
    color: #ff4400;
}

h1 {
    font-size: 2rem !important;
}

h2 {
    margin-bottom: 2rem !important;
    text-align: center;
    font-size: 1.5rem !important;
}

h3 {
    font-size: 1.3rem !important;
}

/*Hamburger menu*/
.menu-button {
    background: white;
}
.menu-button span { /*button 3 bars*/
    background-color: #222;
}

/*Top menu (supertopmenu changes color when scrolling)*/
.supertop-menu, #supertop-menu2 {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.item, .item a, #supertop-menu2 .top-link {
    color: #222;
}
.item a:hover, #supertop-menu2 .top-link:hover {
    color: #ff4400;
}
.item, .item a, #supertop-menu2 .selected {
    color: #ff4400;
}
.item, .item a, #supertop-menu2 .selected:hover {
    color: #222;
}
#supertop-menu2.scrolled {
    background: #222;
}

#supertop-menu2.scrolled .top-link {
    color: white;
}
#supertop-menu2.scrolled .top-link:hover {
    color: #ff4400;
}
#supertop-menu2.scrolled .selected {
    color: #ff4400;
}
#supertop-menu2.scrolled .selected:hover {
    color: white;
}

/*To keep text menu white if topbar change*/
#supertop-menu2.scrolled .menu-button {
    background-color: #222;
}
#supertop-menu2.scrolled .menu-button span {
    background-color: #fff;
}
#supertop-menu2.scrolled .menu-top-slide.open {
    background-color: #222;
}
#supertop-menu2.scrolled .hamburger-menu li.item a {
    color: white !important;
}
#supertop-menu2.scrolled .hamburger-menu li.item a:hover {
    color: #ff4400 !important;
}


/* Sliding menu */

/* When open, expand downward */
.menu-top-slide.open {
    max-height: 430px;    /* or enough for your links */
}

.menu-right-slide, .menu-top-slide {
    background-color: #fff;
}
.menu-right-slide a, .menu-top-slide a {
    color: white;
}

/* Rounded boxes */
.color-box, .color-box-link {
    background-color: #ff6600; 
}
.color-box, .color-box h3 {
    color: #fff;
}
.color-box a {
    color: #43b7ff;
}
.color-box a:hover {
    color: #fff;
}
.gray-box, .gray-box-link, .gray-box-form {
    background-color: #eee;   
    color: #333;
}
.gray-box-link:hover {
    background-color: #153b61;      /* hover background */
    color: white;              /* hover text color */
}

.color-box h3, .gray-box h3 {
    margin: 0.5rem 0;
    text-align: center;
}

.color-box ul, .gray-box ul {
    margin: 1.3rem;
    padding: 0;
}

.color-box li, .gray-box li {
    margin: 1rem 0;
    padding: 0;
}


/******************* LANGUAGE ICONS *******************/

.language-icon {
    width: 30px;

    height: 30px;
    margin-top: 10px;
    background-image: url('../img/icons/language.svg');
    background-size: contain;
    float: left;
}

#supertop-menu2.scrolled .language-icon {
    width: 30px;
    height: 30px;
    margin-top: 10px;
    background-image: url('../img/icons/language2.svg');
    background-size: contain;
    float: left;
}


/******************* BUTTONS EFFECTS *******************/

/*Buttons*/
[role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button {
    background-color: #153b61;
    color: white;
}

.btn {
    border: none;
    cursor: pointer;
    text-decoration: none;   /* remove underline for links */
}

/* 2. Wobble Animation */
.btn-wobble:hover {
    animation: wobble 0.8s;
    background-color: #43b7ff;   
    color: #153b61;    
}

@keyframes wobble {
    0%,
    100% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
}

/* 3. Border Reveal Solid Fill Reveal left to right */
.btn-border-reveal {
    display: inline-block;       /* same as other buttons */
    vertical-align: middle;      /* keeps alignment consistent */
    background-color: white;   /* initial background */
    color: #153b61;
    border: 2px solid #153b61;
    position: relative;
    overflow: hidden;            /* clip ::after inside */
    z-index: 0;
}

.btn-border-reveal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;                    /* start hidden */
    height: 100%;
    background-color: #153b61;      /* hover background */
    transition: width 0.3s ease;
    z-index: -1;                 /* behind text */
}

.btn-border-reveal:hover::after {
    width: 100%;                 /* expand left → right */
}

.btn-border-reveal:hover {
    color: #43b7ff;               /* text color changes */
}

/* 4. Rotate 3D */
.btn-rotate-3d {
    perspective: 300px;
    transform-style: preserve-3d;
}

.btn-rotate-3d:hover {
    animation: rotate3d 0.7s;
    background-color: #43b7ff;   
    color: #153b61;    
}

@keyframes rotate3d {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(180deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}

/* 5. Color Swap */
.btn-color-swap {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-color-swap:hover {
    background-color: #43b7ff;   
    color: #153b61;          
}

/* Solid Fill Reveal left to right */
.btn-fill-reveal {
    display: inline-block;       /* same as other buttons */
    vertical-align: middle;      /* keeps alignment consistent */
    background-color: #ff6600;   /* initial background */
    color: white;
    position: relative;
    overflow: hidden;            /* clip ::after inside */
    z-index: 0;
}

.btn-fill-reveal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;                    /* start hidden */
    height: 100%;
    background-color: #333;      /* hover background */
    transition: width 0.3s ease;
    z-index: -1;                 /* behind text */
}

.btn-fill-reveal:hover::after {
    width: 100%;                 /* expand left → right */
}

.btn-fill-reveal:hover {
    color: white;               /* text color changes */
}

/* Solid Fill Reveal bottom to top */
.btn-fill-reveal-vertical {
    display: inline-block;
    vertical-align: middle;
    background-color: #153b61;
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.btn-fill-reveal-vertical::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;                  /* anchor at bottom */
    width: 100%;
    height: 0;                  /* start hidden */
    background-color: #43b7ff;
    transition: height 0.3s ease;
    z-index: -1;                /* behind text */
}

.btn-fill-reveal-vertical:hover::after {
    height: 100%;               /* expand bottom → top */
}

.btn-fill-reveal-vertical:hover {
    color: #153b61;
}

/******************* IMAGES EFFECTS *******************/

.zoom, .color-overlay, .rotate, .blur {
    transition: all 0.3s ease; /
}

/* 1. Zoom */
.zoom:hover {
    transform: scale(1.1);
}

/* 2. Grayscale */
.grayscale:hover {
    filter: grayscale(100%);
}

/* 3. Color Overlay */
.color-overlay {
    position: relative;
}
.color-overlay:hover {
    filter: brightness(0.7); /* darken image slightly */
}

/* 4. Rotate */
.rotate:hover {
    transform: rotate(5deg) scale(1.05);
}

/* 5. Blur */
.blur:hover {
    filter: blur(3px);
}

.background {
    position: fixed; /* stays in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/others/dog.webp') no-repeat center center;
    background-size: cover;
    z-index: -1; /* behind everything */
}


/******************* CARROUSSELS *******************/

/* Fade Slideshow Auto */
.fade-slideshow {
  position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.fade-slideshow img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* hide by default */
    transition: opacity 1s ease-in-out;
}
.fade-slideshow img.active {
  opacity: 1; /* show only active */
}

/* Fade Slideshow Auto Arrows */
.carousel-slideshow {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.carousel-slideshow .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    object-fit: cover;
}
.carousel-slideshow .slide.active { opacity: 1; }
.carousel-slideshow #prev,
.carousel-slideshow #next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
}
.carousel-slideshow #prev { left: 10px; }
.carousel-slideshow #next { right: 10px; }

/* Auto Sliding Slideshow */
.auto-slideshow {
  position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.auto-slideshow .track {
    display: flex;
    /* width is dynamic; JS will append a clone for seamless loop */
    will-change: transform;
    transition: transform 0.8s ease-in-out;
}

.auto-slideshow img {
    flex: 0 0 100%;     /* each slide exactly one viewport of the slideshow */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Manual Carousel Slideshow */

.manual-carousel {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.manual-carousel .track {
  display: flex;
  will-change: transform;
  transition: transform 0.8s ease-in-out;
}

.manual-carousel img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manual-carousel .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
}
.manual-carousel .prev { left: 10px; }
.manual-carousel .next { right: 10px; }

/******************* GENERAL *******************/

div#footer {
    width: 100%;
    background-color: #222;
    padding: 1rem 0;
    color: white;
    margin-top: 0;
}

.footer-menu {
    padding-bottom: 1.5rem;
}

.footer-menu h3 {
    color: #fff;
    margin-top: 0;
}

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

.footer-menu li {
    margin: 1rem 0;
}

.copyright {
    width: 100%;
    border-top: 1px solid #aaa;
    padding-top: 20px;
    text-align: center;
}

/******************* BANNERS *******************/
.bg-white.banner-bg {
    height: auto;
    background: url("https://wazoka.com/img/others/banner-bg.webp") no-repeat 50% 50%;
    background-size: cover;    
    margin: 0;
    padding: 1rem 0;
}

.grid .banner-home-picture img {
    width: 472px;
    height: auto;
}
.banner-home-picture {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-color.banner-bg h1 {
    font-size: 2rem;
    margin-top: 20px;
}

.banner-text {
    font-size: 1.2rem;
}

@media (max-width: 1023px) {
    .banner-bg .grid {
      grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .grid .banner-home-picture img {
        width: 300px;
        height: auto;
    }
}


/******************* GRIDS *******************/

.grid.three {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/******************* BOXES WITH MOVING BG IMAGE *******************/

.my-box {
  background-color: #eee;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  height: 200px;
}

/* Make sure the text stays above the image */
.my-box > div {
  position: relative;
  z-index: 2;
  transition: color 0.6s ease;
}

.my-box h3 {
  float: left;
  margin: 0.5rem;
  transition: color 0.6s ease;
}

p.text-box-home, p.fake-link {
    width: 100%;
    margin: 0;
    float: left;
    padding-top: 0.5rem;
}

.fake-link {
    color: #ff4400;
    text-decoration: underline;
  transition: color 0.6s ease;
}

.my-box:hover > div, .my-box:hover h3, .my-box:hover .fake-link {
  color: #fff;
}

/* Hidden image layer */
.my-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ff6600;
  background-image: url('../img/others/waves.svg');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center 250px;
  opacity: 0;
  z-index: 1; /* image stays behind the text */
  transition:
    opacity 0.6s ease,
    background-position 0.6s ease;
}

/* Hover: fade in + slide upward */
.my-box:hover::before {
  opacity: 1;
  background-position: center 210px;
  cursor: pointer;
}


/******************* HOME ICONS *******************/

/* Base icon style */
.custom-icon, .seo-icon, .fast-icon, .multilanguages-icon, .booking-icon, .notification-icon {
    width: 50px;
    height: 50px;
    margin-top: 0;
    float: left;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Default icon (bottom layer) */
.custom-icon {
    background-image: url('../img/icons/code.svg');
}
.seo-icon {
    background-image: url('../img/icons/seo.svg');
}
.fast-icon {
    background-image: url('../img/icons/fast.svg');
}
.multilanguages-icon {
    background-image: url('../img/icons/multilanguage.svg');
}
.booking-icon {
    background-image: url('../img/icons/booking.svg');
}
.notification-icon {
    background-image: url('../img/icons/notification.svg');
}

/* Hover icon (top layer) */
.custom-icon::after,
.seo-icon::after,
.fast-icon::after,
.multilanguages-icon::after,
.booking-icon::after,
.notification-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Assign hover images */
.custom-icon::after {
    background-image: url('../img/icons/code2.svg');
}
.seo-icon::after {
    background-image: url('../img/icons/seo2.svg');
}
.fast-icon::after {
    background-image: url('../img/icons/fast2.svg');
}
.multilanguages-icon::after {
    background-image: url('../img/icons/multilanguage2.svg');
}
.booking-icon::after {
    background-image: url('../img/icons/booking2.svg');
}
.notification-icon::after {
    background-image: url('../img/icons/notification2.svg');
}

/* Fade in on hover */
.my-box:hover .custom-icon::after,
.my-box:hover .seo-icon::after,
.my-box:hover .fast-icon::after,
.my-box:hover .multilanguages-icon::after,
.my-box:hover .booking-icon::after,
.my-box:hover .notification-icon::after {
    opacity: 1;
}

p.price {
    font-size: 1.3rem;
}

.grid img.websites {
    width: 350px;
    height: 229px;
}

.rotate {
    transition: all 0.3s ease; /
}

.rotate:hover {
    transform: rotate(5deg) scale(1.05);
}

.grid img.image_logo {
    width: 200px;
    height: 43px;
}

ul.speed {
    padding: 0;
    margin: 0;
}

.speed li {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem; /* space between icon and text */
    padding-bottom: 0.5rem;
}

.speed img {
    width: 25px;
    height: 25px;
    flex-shrink: 0; /* prevents the icon from shrinking */
    margin-top: 2px; /* optional: aligns visually with text */
}

.aboutus-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* space between image and text */
    margin-bottom: 20px;
}

.aboutus-picture img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Text block */
.aboutus-text {
    flex: 1; /* take remaining space */
    min-width: 250px;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 768px) {
    .aboutus-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .aboutus-text {
        width: 100%;
    }
}


.features-h2 {
    text-align: left;
    margin: 0 !important;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    float: left;
}

.faq-category h2.features-h2 {
    padding: 1rem 0 0;
    margin: 0 !important;
}

.allwidth {
    width: 100%;
}

.allwidth::after { 
    content: ""; 
    display: block; 
    clear: both; 
}

.faq-item ul {
    padding: 0;
    margin-left: 1.1rem; 
}

#error404 {
    text-align: center;
}