@font-face {
    font-family: 'Cocoa';
    src: url('../fonts/Cocoa.eot');
    src: url('../fonts/Cocoa.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cocoa.woff') format('woff'),
         url('../fonts/Cocoa.ttf') format('truetype'),
         url('../fonts/Cocoa.svg#Cocoa') format('svg');
    font-weight: normal; 
    font-style: normal;
}
[class*='icon-']:before{
    display: inline-block;
   font-family: 'Cocoa';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}



.h-fx{ min-height:400px }



        .gkgeicon {

            height: 195px;
            overflow: hidden;
            position: relative;
        }

        .gkgeicon div {
            display: flex;
            flex-direction: column;
            transition: transform 0.5s ease-in-out;
        }

        .gkgeicon span {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 195px;
            font-size: 8em;
            opacity: 1;
            transition: opacity 0.8s ease-in-out;
        }


.gkgecirc-circle {
            position: absolute;
            border-radius: 50%;
        }

        .gkgecirc-left-circle {
            width: 200px;
            height: 200px;
            background-color: blue;
            left: calc(65% - 300px);
            top: calc(50% - 100px);
        }

        .gkgecirc-right-circle {
            width: 200px;
            height: 200px;
            border: 3px solid #841219;
            background-position: 68% 12% !important;!i;!;
            background-size: cover !important;!i;!;
            background: url('https://res.cloudinary.com/dih0krdcj/image/upload/v1739801638/Cocoa%20House/vwgvciey9nepc17j2gaw.webp');
            left: calc(34% + 100px);
            top: calc(50% - 100px);
        }
.gkgecirc-center-circle {
    width: 80px;
    height: 80px;
    line-height: 2.1;
    color: #841219 !important;
    background-color: #ffffff;
    border: 3px solid #841219;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
    position: absolute;
    text-align: center;
    border-radius: 50%;
    z-index: 2;
}

/* Expanding Pulse Rings */
.gkgepulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(132, 18, 25, 0.3);
    transform: translate(-50%, -50%);
    animation: gkgepulse-animation 1s linear infinite;
    z-index: 1;
}

.gkgepulse:nth-child(1) {
    animation-delay: 0s;
}

.gkgepulse:nth-child(2) {
    animation-delay: 1s;
}

.gkgepulse:nth-child(3) {
    animation-delay: 2s;
}

@keyframes gkgepulse-animation {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}


        .gkgecirc-container {
            position: relative;
            width: 100%;
            height: 100%;
        }





/* Container for the slideshow */
.ae-slide-show-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

/* Wrapper for slides */
.ae-slide-show-wrapper {
    display: flex;
    gap: 16px; /* Space between slides */
    padding-left: 16px; /* Add padding for the first slide */
}

/* Individual slide items */
.ae-slide-show-item {
    flex: 0 0 calc(43% - 10px); /* Two full slides in view with some margin */
    height: 600px; /* Fixed height for each slide */
    background-color: #1a1a1a; /* Dark background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1rem;

    

    color: #fff;
    text-align: center;
    padding: 16px;
}

/* Headings inside slide items */
.ae-slide-show-item h2 {
    margin: 0;
    font-size: 2.2rem; font-family: 'cera-bold';

}

/* Paragraph inside slide items */
.ae-slide-show-item p {
    margin: 8px 0 16px;
    font-size: 1.2rem;

}

/* Buttons container */
.ae-slide-show-buttons {
    display: flex;
    gap: 8px;
}

/* Buttons */
.ae-slide-show-btn {
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.ae-slide-show-btn:hover {
    background-color: #005bb5;
}





.ae-slide-show-btn-alt {
    
    color: #fff;
    border: 1px solid;
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.ae-slide-show-btn-alt:hover {
    background-color: #fff; color: #000; border: 1px solid #fff;
}

.ae-slide-show-btn-alt-black {
    
    color: #000;
    border: 1px solid;
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.ae-slide-show-btn-alt-black:hover {
    background-color: #888; color: #fff; border: 1px solid #888;
}




/* Custom scrollbar styling for Chrome, Edge, and Safari */
.ae-slide-show-container::-webkit-scrollbar {
    height: 8px; display: none;
}

.ae-slide-show-container::-webkit-scrollbar-thumb {
    background: #007aff;
    border-radius: 4px;display: none;
}

.ae-slide-show-container::-webkit-scrollbar-track {
    background: transparent;display: none;
}


.ae-up-text{justify-content: normal;     padding-top: 5em;}


.ae-down-text{justify-content: end ;padding-bottom: 5em;}

/* Responsive design */
@media (max-width: 768px) {
    .ae-slide-show-item {
        flex: 0 0 80%; /* Smaller width on mobile */
        height: 450px;
    }
}





.pnerc{
    margin-top: -6px;
    margin-left: -6px;
    font-size: 22px;
    display: block;
    }

/* Hidden class */
.hidden {
  display: none;
}



.pneric{    width: -webkit-fill-available;
    text-align: left; 
}



.aepine-loading-container {
  position: relative;
}

.pine-ai-kolor {
  opacity: 0; /* Initially hidden */
      transform: translateY(-20px); /* Start slightly above */
    transition: opacity 1s ease, transform 1s ease; /* Smooth transition for fade and slide */
  background: linear-gradient(to right, #007AFF, #6B4EFF, #FF5E9F, #FF6200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



.aepine-hidden-text {
  display: inline;
}

.aepine-loading-dots {
  display: flex;
  justify-content: flex-start; /* Align dots to the left */
  align-items: center;
  margin-top: 10px;
}

.aepine-dot {
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background-color: #fff; /* Keep the dot color the same (white) */
  border-radius: 50%;
  animation: aepine-traffic-light 1.8s infinite ease-in-out;
  opacity: 0; /* Start with dots invisible */
}

.aepine-dot:nth-child(1) {
  animation-delay: 0s;
}

.aepine-dot:nth-child(2) {
  animation-delay: 0.6s; /* Delay to create the sequential effect */
}

.aepine-dot:nth-child(3) {
  animation-delay: 1.2s; /* Delay to create the sequential effect */
}

@keyframes aepine-traffic-light {
  0%, 100% {
    opacity: 1; /* Make the dot visible */
  }
  50% {
    opacity: 0; /* Hide the dot at the midpoint */
  }
}












 .gkgecsta-container {
            display: flex;
            align-items: center;
            font-size: 24px; 
  
        }



        .gkgecsta-icon {
            font-size: 45px;
            margin-right: 25px;
            color: gray;
        }
        .gkgecsta-content {
            display: flex;
            flex-direction: column;
        }
        .gkgecsta-number-container {
            display: flex;
            align-items: center;
        }
        .gkgecsta-number {
            font-size: 40px;

            color: #841219;
        }
        .gkgecsta-plus {
            color:#841219;
            font-size: 36px;
            margin-left: 5px;
        }
        .gkgecsta-text {
            font-size: 16px;
            color: gray; width: 55%;
        }



.gkgeshowroom-name {
    font-family: 'cera-bold', sans-serif;
    -webkit-font-smoothing: antialiased;
    display: block;  /* Background covers only text */
margin-left: .5em;
    color: white;

}

.gkgeshowroom-country {
    font-family: 'cera-regular', sans-serif;
    -webkit-font-smoothing: antialiased;
    display: block;  /* Background covers only text */
   margin-left: .5em;
    color: white;
   
    border-radius: 5px;
}

.gkgeshowroom-container {   -webkit-font-smoothing: antialiased;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
}

.gkgeshowroom-scroll-container {
    display: flex;
    width: max-content;
    animation: gkgeshowroom-scroll 35s linear infinite;
}

.gkgeshowroom-image-container {
    position: relative; width: 350px; margin-right: 3px;
}

.gkgeshowroom-container img {
  width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the space without distortion */
}

.gkgeshowroom-info {
    position: absolute;
    bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0 0 0)); 


    color: white;
    font-size: 16px; width: 100%; height: 80px; 

    padding: 10px;

}

.gkgeshowroom-play-button {
    position: absolute;
    bottom: 21px; text-align:  center ;margin: 0 auto;
    right: 15px; width: 50px; height: 50px;
    background: #fff;
    color: brown;
    padding: 12px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
}

.gkgeshowroom-image-container:hover .gkgeshowroom-play-button {
    opacity: 1;
    transform: translateY(0);
}

@keyframes gkgeshowroom-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-52.8%); }
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    .gkgeshowroom-scroll-container {
        animation: none;
  
        -webkit-overflow-scrolling: touch;
    }

    .gkgeshowroom-image-container {

        margin-right: 5px;
    }

    .gkgeshowroom-container {
        overflow-x: auto;
    }

    .gkgeshowroom-container img {
        object-fit: cover;
    }

    /* Always show the play button on mobile */
    .gkgeshowroom-play-button {
        opacity: 1;
        transform: translateY(0); /* Ensure it's visible without needing hover */
    }
}




.gkge-spt:hover{ opacity:.7;   transition: opacity 0.5s ease, transform 0.5s ease;
 }

.gkgeyt-video-section {
    width: 100%;
    position: relative;
    background-color: #000;
    overflow: hidden;
}

.gkgeyt-video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 45%; /* Aspect ratio 16:9 */
    background-color: #000;
}

.gkgeyt-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.gkgeyt-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    background-image: url('play-icon.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.gkgeyt-text-overlay {
        position: absolute;
    bottom: 30px;
    height: 45px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 18px;
    border-radius: 32px;
    font-size: 16px;
    text-align: center;
}

.gkgeyt-video-container {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 100%;
}

.gkgeyt-video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}



.gkgeyt-title-container {
    position: absolute;
    top: 75px; /* Adjust the position */
    width: 100%;
    text-align: center;
    z-index: 2;
    color: #fff;
}

.gkgeyt-title {

padding: 0px;
    margin: 0;
}

.gkgeyt-subtitle {

    margin: 5px 0 0 0;
    font-weight: 400;
}







.blur-transition {
 filter: blur(5px); /* Initial blur state */
    transition: filter 0.8s ease-in-out;
    backface-visibility: hidden;
}


.jogo{     background: #fff;
    border: 1px solid #031b14;
    padding: 1px;
    font-size: 17px; float: right;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: inline-block;
     }

.gkgemmag {
    margin-top: -3em;
    margin-bottom: -2em;
}

     .kp-gkge {
    font-family: ibm plex sans!important;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px!important;
}

.jogo:hover{     background: #000; color: #fff;}
     



.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in.delayed {
  transition-delay: .4s;
}

.fade-in.delayeder {
  transition-delay: .9s;
}

.fade-in.delayedest {
  transition-delay: .12s;
}

.fade-in.delayedest-m {
  transition-delay: 5.1s;
}

.fade-in.delayedest-q {
  transition-delay: 6s;
}



#gkge-btc {




  transition: filter 1s ease-in-out; /* Smooth transition for the filter property */
}

.blur-clear {
  filter: blur(0); /* Clear state */
}

.blur-blurry {
  filter: blur(.7px); /* Blurry state */
}


.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in.delayed {
  transition-delay: .4s;
}

.fade-in.delayeder {
  transition-delay: .9s;
}

.fade-in.delayedest {
  transition-delay: .12s;
}

.fade-in.delayedest-m {
  transition-delay: 5.1s;
}

.fade-in.delayedest-q {
  transition-delay: 6s;
}


.gk-on{color: #00ff00}

.gkh:hover{ background: #f9f9f9 }

.ibm-plex sans-thin {
  font-family: "IBM Plex Sans" !important;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex sans-thin-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.ibm-plex sans-extralight {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex sans-extralight-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.ibm-plex sans-light {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex sans-light-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ibm-plex sans-regular {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex sans-regular-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ibm-plex sans-medium {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex sans-medium-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ibm-plex sans-semibold {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex sans-semibold-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.ibm-plex sans-bold {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ibm-plex sans-bold-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}




.gkge-tag {
letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 5.5px 9px 5.5px 9px;
    font-size: 0.45em;
    border-radius: 15px;    font-family: "IBM Plex Sans" !important;
    max-width: max-content;
    background-color: #a7f0ba;
    color
}

.counter {
  font-size: 2em;
  color: #333;
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity 1s ease;
}

.plus-sign {
  color: #00ff00;

  margin-left: 1px; /* Add some spacing between the number and the plus sign */
}


.animate__animated.animate__flash {
    animation-iteration-count: infinite;   


}

 @keyframes flash {
            0%, 50%, 100% {
                opacity: 1;
            }
            25%, 75% {
                opacity: 0;
            }
        }

        .animate__animated.animate__flash {
            animation-name: flash;
            animation-iteration-count: infinite;
            animation-duration: 2s; /* Set the original animation duration */
            animation-delay: 2s; /* Add a 5-second delay between iterations */
        }



.gkge-right-border{border-right: 1px solid #faf1f1;}

 .img-container {
            display: flex;
            align-items: center; /* Center vertically */
            justify-content: space-between; /* Place items at each end */
            padding: 15px; height: 200px;
        }

        .text-container {
            max-width: 100%;  /* Adjust the width of the text container */
        }

          .text-container h1{ font-size:22px }

        img {
            max-width: 100%; /* Make sure the image doesn't exceed its container */
            height: auto; /* Maintain aspect ratio */
        }



.icon-ggg:before{content:'\0043';}

.gkge-form-head{border-radius: 15px 15px 0px 0px;
    background-color: #fff;
    padding: 1.5em; border-bottom: 1px solid #faf1f1;     padding-top: 4em !important;

    background-image: url(https://res.cloudinary.com/dih0krdcj/image/upload/v1702195998/Cocoa%20House/hrxazacwvo5ryrhngv9w.svg);
    background-repeat: no-repeat;
    background-position: 90%; background-size: 256px;}

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    width: 100%;
}

.rating input {
    position: absolute;
    left: -999999px;
}

.rating label {
    display: inline-block;
    font-size: 0;
}

.rating > label:before {
    position: relative;
    font: 37px/1 FontAwesome;
    display: block;
    content: "\f005";
    color: #ccc;
    background: -webkit-linear-gradient(-45deg, #d9d9d9 0%, #b3b3b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating > label.selected:before,
.rating > label.selected ~ label:before {
    color: #f0ad4e;
    background: -webkit-linear-gradient(-45deg, #2090ff 0%, #2090ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.gkge-pro-tip{    background: #FFF500;
    padding: 8px;
    padding-top: 4px;
    border-radius: 5px;
    padding-bottom: 4px;}

.can-toggle {
  position: relative;
}
.can-toggle *, .can-toggle *:before, .can-toggle *:after {
  box-sizing: border-box;
}
.can-toggle input[type=checkbox] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.can-toggle input[type=checkbox][disabled] ~ label {
  pointer-events: none;
}
.can-toggle input[type=checkbox][disabled] ~ label .can-toggle__switch {
  opacity: 0.4;
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:before {
  content: attr(data-unchecked);
  left: 0;
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  content: attr(data-checked);
}
.can-toggle label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  display: flex;
  align-items: center;
}
.can-toggle label .can-toggle__label-text {
  flex: 1;
  padding-left: 32px;
}
.can-toggle label .can-toggle__switch {
  position: relative;
}
.can-toggle label .can-toggle__switch:before {
  content: attr(data-checked);
  position: absolute;
  top: 0;
  text-transform: uppercase;
  text-align: center;
}
.can-toggle label .can-toggle__switch:after {
  content: attr(data-unchecked);
  position: absolute;
  z-index: 1;
  text-transform: uppercase;
  text-align: center;
  background: white;
  transform: translate3d(0, 0, 0);
}
.can-toggle input[type=checkbox][disabled] ~ label {
  color: rgba(119, 119, 119, 0.5);
}
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch {
  background-color: #777;
}
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  color: #5e5e5e;
}
.can-toggle input[type=checkbox]:hover ~ label {
  color: #6a6a6a;
}
.can-toggle input[type=checkbox]:checked ~ label:hover {
  color: #55bc49;
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch {
  background-color: #70c767;
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  color: #4fb743;
}
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch {
  background-color: #5fc054;
}
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  color: #47a43d;
}
.can-toggle label .can-toggle__label-text {
  flex: 1;
}
.can-toggle label .can-toggle__switch {
  transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
  background: #848484;
}
.can-toggle label .can-toggle__switch:before {
  color: rgba(255, 255, 255, 0.5);
}
.can-toggle label .can-toggle__switch:after {
  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  color: #777;
}
.can-toggle input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  transform: translate3d(65px, 0, 0);
}
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle label {
  font-size: 14px;
}
.can-toggle label .can-toggle__switch {
  height: 36px;
  flex: 0 0 138px;
  border-radius: 4px;
}
.can-toggle label .can-toggle__switch:before {
  left: 67px;
  font-size: 12px;
  line-height: 36px;
  width: 67px;
  padding: 0 12px;
}
.can-toggle label .can-toggle__switch:after {
  top: 2px;
  left: 2px;
  border-radius: 2px;
  width: 69px;
  line-height: 32px;
  font-size: 12px;
}
.can-toggle label .can-toggle__switch:hover:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  transform: translate3d(44px, 0, 0);
}
.can-toggle.can-toggle--size-small input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-small label {
  font-size: 13px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch {
  height: 28px;
  flex: 0 0 90px;
  border-radius: 2px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:before {
  left: 45px;
  font-size: 10px;
  line-height: 28px;
  width: 45px;
  padding: 0 12px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:after {
  top: 1px;
  left: 1px;
  border-radius: 1px;
  width: 44px;
  line-height: 26px;
  font-size: 10px;
}
.can-toggle.can-toggle--size-small label .can-toggle__switch:hover:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-large input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-large input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-large input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  transform: translate3d(78px, 0, 0);
}
.can-toggle.can-toggle--size-large input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-large input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.can-toggle--size-large label {
  font-size: 14px;
}
.can-toggle.can-toggle--size-large label .can-toggle__switch {
  height: 50px;
  flex: 0 0 160px;
  border-radius: 4px;
}
.can-toggle.can-toggle--size-large label .can-toggle__switch:before {
  left: 80px;
  font-size: 14px;
  line-height: 50px;
  width: 80px;
  padding: 0 12px;
}
.can-toggle.can-toggle--size-large label .can-toggle__switch:after {
  top: 2px;
  left: 2px;
  border-radius: 2px;
  width: 78px;
  line-height: 46px;
  font-size: 14px;
}
.can-toggle.can-toggle--size-large label .can-toggle__switch:hover:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.demo-rebrand-1 input[type=checkbox][disabled] ~ label {
  color: orangered;
}
.can-toggle.demo-rebrand-1 input[type=checkbox]:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-1 input[type=checkbox]:hover ~ label .can-toggle__switch {
  background-color:orangered;
}
.can-toggle.demo-rebrand-1 input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-1 input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  color: orangered;
}
.can-toggle.demo-rebrand-1 input[type=checkbox]:hover ~ label {
  color: orangered;
}
.can-toggle.demo-rebrand-1 input[type=checkbox]:checked ~ label:hover {
  color: #39916a;
}
.can-toggle.demo-rebrand-1 input[type=checkbox]:checked ~ label .can-toggle__switch {
  background-color: #44ae7f;
}
.can-toggle.demo-rebrand-1 input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  color: #368a65;
}
.can-toggle.demo-rebrand-1 input[type=checkbox]:checked:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-1 input[type=checkbox]:checked:hover ~ label .can-toggle__switch {
  background-color: #3d9c72;
}
.can-toggle.demo-rebrand-1 input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-1 input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  color: #2f7757;
}
.can-toggle.demo-rebrand-1 label .can-toggle__label-text {
  flex: 1;
}
.can-toggle.demo-rebrand-1 label .can-toggle__switch {
  transition: background-color 0.3s ease-in-out;
  background: orangered;
}
.can-toggle.demo-rebrand-1 label .can-toggle__switch:before {
  color: rgba(255, 255, 255, 0.6);
}
.can-toggle.demo-rebrand-1 label .can-toggle__switch:after {
  transition: transform 0.3s ease-in-out;
  color: orangered;
}
.can-toggle.demo-rebrand-2 input[type=checkbox][disabled] ~ label {
  color:orangered;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type=checkbox]:hover ~ label .can-toggle__switch {
  background-color: #444;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  color: #2b2b2b;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:hover ~ label {
  color: #2474d8;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked ~ label:hover {
  color:#2474d8;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked ~ label .can-toggle__switch {
  background-color:#2474d8;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  color: #2474d8;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type=checkbox]:checked:hover ~ label .can-toggle__switch {
  background-color: #2474d8;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  color: #2474d8;
}
.can-toggle.demo-rebrand-2 label .can-toggle__label-text {
  flex: 1;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch {
  transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  background:rgb(68 68 68);
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:before {
  color: rgba(255, 255, 255, 0.7);
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:after {
  transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  color: #444;
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type=checkbox]:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked ~ label .can-toggle__switch:after {
  transform: translate3d(58px, 0, 0);
}
.can-toggle.demo-rebrand-2 input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.can-toggle.demo-rebrand-2 label {
  font-size: 13px;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch {
  height: 60px;
  flex: 0 0 120px;
  border-radius: 60px;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:before {
  left: 60px;
  font-size: 13px;
  line-height: 60px;
  width: 60px;
  padding: 0 12px;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:after {
  top: 2px;
  left: 2px;
  border-radius: 30px;
  width: 58px;
  line-height: 56px;
  font-size: 13px;
}
.can-toggle.demo-rebrand-2 label .can-toggle__switch:hover:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

/************** Tool Tip Styles ********************************/
.tool-tip {
  display: inline-block;
  position: relative;
  margin-left: 0.5em;
}
.tool-tip .tool-tip__icon {
  background: #ddd;
  border-radius: 10px;
  cursor: pointer;
  display: inline-block;
  font-style: italic;
  font-family: times new roman;
  height: 20px;
  line-height: 1.3em;
  text-align: center;
  width: 20px;
}
.tool-tip .tool-tip__info {
  display: none; color: #fff;
  background: #000;
  font-family: "IBM Plex Sans" !important;
  border-radius: 3px;
  font-size: 0.875em;
  padding: 1em;
  position: absolute;
  left: 30px;
  top: -20px;
  width: 200px;
  z-index: 2;
}
.tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after {
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent ;
}
.tool-tip .tool-tip__info:after {
  left: -8px;
  border-right-color: #000;
}
.tool-tip .tool-tip__info .info {
  display: block;
}
.tool-tip .tool-tip__info .info__title {
  color: #fff;
}
.tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info {
  display: inline-block;
}

a:focus + .tool-tip .tool-tip__info {
  display: inline-block;
}


 .gkge-select select{ width:100% ; padding: 15px; border-radius : 5px ;    margin: 0 0 25px; height: 55px; border: 1px solid #ccc}





select {

  /* styling */

  display: inline-block;
  font: inherit;
outline: none;


  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */

select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, gray, gray);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}




select.round {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    radial-gradient(#ddd 70%, transparent 72%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
}

select.round:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    radial-gradient(gray 70%, transparent 72%);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}





select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #fff, #fff);
  background-position:
    calc(100% - 20px) calc(1.4em + 3.4px),
    calc(100% - 15px) calc(1.4em + 3.4px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, #7F0808 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #7F0808 50%),
    linear-gradient(to right, #fff, #fff);
  background-position:
    calc(100% - 15px) 1.4em,
    calc(100% - 20px) 1.4em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: #7F0808;
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.hero-top {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.vivo-button{width: 200px;
    border-radius: 100px;
    padding: 10px !important;
    border: 1px solid #fff;
    color: #fff !important;
    background: #e0dddd57;}


a {
    -webkit-font-smoothing: antialiased; }

    li a:hover{text-decoration: none !important;}

.cera-bold{font-family: 'cera-bold' !important; -webkit-font-smoothing: antialiased;}

.cera-regular{font-family: 'Cera-Regular'; -webkit-font-smoothing: antialiased;}
    .vivo-button-alt{width: 200px;
    border-radius: 100px;
    padding: 10px !important;
    border: 1px solid #fff;
    color: #000 !important;
    background: #fff;}

a.item-footer{ border:none;    -webkit-font-smoothing: antialiased; }
     .vivo-button-alt-2{width: 200px;

    padding: 10px !important;

    color: #000 !important; border-bottom: 1px dashed #fff;
    background: none;}

    
.rante {transform: rotate(
-90deg
) translateX(-65%);    font-family: 'Cera-Regular'; opacity: .9;
    transform-origin: 0 0;}


.rante:before {
    content: "------------------------------";
    vertical-align: baseline; color: #F5EB17;
    margin-right: 1em;letter-spacing: -2px;
}

.projects-container-filter>article>footer>h3{ font-family: 'vivo-tall-book'; }

.hero-nav {
    width: 90%;
    margin: auto;
    margin-top: 3vh;
    display: flex;
    /* grid-template-columns: 1fr 1fr; */
    justify-content: space-between; padding-bottom: 1em;
    align-items: center;
}

.sm-hero-words {
    display: inline-block;
    font-size: 7.5vh;
    line-height: 1.1;
    color: #F5EB17;
    letter-spacing: -1px;
}

.hero-nav-list {
    justify-self: end;
       font-family: 'Cera-Bold';
    font-weight: 100;
    position: relative; z-index: 100;
}

.hero-nav-listItem {
        background: rgb(255 255 255 / 100%);
    width: 165px;
    height: 5.5vh;
    font-family: 'Cera-Bold';z-index: 1000;
    border-radius: 31px; color: #000 !important ;
    padding-left: 20px;
    -webkit-font-smoothing: antialiased;
    font-size: .93em;
    color: #ffffff;
    z-index: 1000;
    cursor: pointer;
    display: flex;
    align-items: center;
}



#button {
  display: inline-block;
  background-color:#841219;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
content: "\F005D";
    font-family: 'material design icons';
      font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #ffe104;
    color: #000 !important;
}
#button:active {
  background-color: #ffe104;
    color: #000 !important;
}
#button.show {
  opacity: 1;
  visibility: visible;
}





    .d-blessed-b{  
    padding-left: 2em !important;
    padding-right: 2em !important;
    -webkit-font-smoothing: antialiased;
    padding: 0.9em;
    display: inline-block;
    border-radius: 34px; 
    background: #ffffff;
 color: #000 !important;border:1px solid #fff;
 
    width: 260px;
    font-size: 18px;}

    .d-blessed-b:hover {    color: #fff !important;
    background:none ; border:1px solid #fff; }


   .d-blessed-b-y {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    border-radius: 50%;
    background: #bea3a32e;
    color: #f8f8f8 !important;
    border: 1px solid #ffffff6b;
    width: 80px;
    height: 80px;
    position: relative; /* or static */
    z-index: 0; /* or adjust according to your needs */
}

.d-blessed-b-y:hover {
    color: #000 !important;
    background: #ffffff;
    border: 1px solid #ffffff;
}




.m-f{
  
  animation: rodar 80s infinite linear;
  transform: rotate(30deg);

}

@keyframes rodar {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
    left: 30px;
  }
}


.cocoa-heavy{ font-weight:900 }

.hero-nav-listItem span {
    position: relative;
    left: 74px; top: 1px;
    transition: all 0.6s ease;
}

.hero-nav-listItem span.active {
    transform: rotate(180deg); top: 1px;
}

.hero-nav-listItem2 {
    position: absolute; z-index: 1000;
    font-family: 'Cera-Regular';
	top: 26px;
    /* transform: scaleX(0); */
	opacity:0;
    transition: all 0.3s ease-in;
	pointer-events:none;padding-left: 0px;
}

.hero-nav-listItem2.show {
    /* transform: scaleX(1); */
opacity: 1;
    top: 60px;
    pointer-events: auto;padding-left: 0px;
}

.hero-nav-listItem2 li {
        background: rgb(255 255 255);
    font-family:'cera-bold';
    width: 165px;
    min-height: 4.5vh;
    padding: 1.5vh 0 1.6vh 20px;
    font-size: .93em;
    line-height: 4.1vh;
    color: #000;
    cursor: pointer;
    border-bottom: 1px solid #9e9e9e40;
    transition: color 0.4s ease;
  
}



.hero-nav-listItem2 li:hover {
   background: #fbfbfb  ;
}

.hero-nav-list li,
.hero-nav-list ul li {
    list-style: none;    
}



.hero-image {
    position: absolute;
    top: 15vh;
    left: 14vw;    -webkit-font-smoothing: antialiased;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: scale(1.3);
    z-index: -1;
}

.hero-words-box {
    margin-top: 12vh;
    margin-left: 10vw;
    height: 40vh;
    width: 80vw;
    /* border: 1px solid red; */
}

.hero-word-top {
    /* overflow:hidden; */
    height: 50%;
    width: 100%;
    /* border: 1px solid red; */
}

.hero-words {
    display: inline-block;

    font-size: 21.5vh; line-height: 1.1; 

    color: #F5EB17;
    letter-spacing: -6px;
}

.inner-span {
    position: relative;
    top: 1.2vh;
    border-bottom: 1px solid #fff;
    overflow: hidden;
    /* transition: all 0.8s ease-out; */
}

@media (max-width: 500px) {
	
    .hero-nav-listItem {
          width: 145px;height: 5.5vh;
    }
    .hero-nav-listItem span {
        left: 74px;
    }
    .hero-words {
        font-size: 10vh;
    }
	
	
	
    .hero-words-box {
        margin-top: 10vh;
        margin-left: 5vw;
    }
}

@media (max-width: 400px) {
    .hero-words {
        font-size: 9vh;
    }
    .hero-nav-listItem span {
        left: 56px;
    }
    .hero-nav-listItem2 li {
        width: 150px;
    }
    .inner-span {
        top: 2.5vh;
    }
}

.inner-span span {
    position: relative;
    /* transition: all 0.8s ease; */
}

.inner-span span.animate {
    animation: animateDown 7s ease infinite;
}

@keyframes animateDown {
    0% {
        top: 16vh;
    }
    20% {
        top: 0vh;
    }
    70% {
        top: 0vh;
    }
    80% {
        top: 0vh;
    }
    100% {
        top: 16vh;
    }
}

.services-container {
    position: relative;
    width: 99%;
   height: 90vh;
    overflow: hidden;
    margin: 0 auto;
	transition: all 0.8s linear;
}



.services-filter {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 100%;
    transition: all 0.8s linear;
}

.services-container:hover .services-filter{
	right:0%;
}

.services-item {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 3fr 1fr;
    /* background: yellow; */
}

.item-header {
    /* background:pink; */
    font-family: 'vivo-medium';
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-rendering: optimizelegibility;
}

.item-div {
    width: 100%;
    height: 90%;
    /* background:skyblue; */
    overflow: hidden;
}

.skroll{ border: 1px solid #FFF;
    width: 41px;
    margin: 0 auto;
    border-radius: 26px; opacity: .6;
    height: 60px;
    padding-top: 10px; }



.iitem-footer button {
    width: 550px;
    padding: 1.5vh 0;
    color: #fff;
    background: black;
    border-radius: 48px;
    text-transform: uppercase;
    font-size: 31px;
}

.item-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background:grey; */
}


.d-but-or {
  
    padding-left: 2em !important;
    padding-right: 2em !important;
    -webkit-font-smoothing: antialiased;
    padding: 0.9em;
    display: inline-block;
    border-radius: 34px;
    background: #841219;
    color: #fff !important;
    width: 275px;
    font-size: 18px;
}


  .d-but-or:hover {    color: #fff;
    background:#000; }


    .d-but-or-pink {
  
    padding-left: 2em !important;
    padding-right: 2em !important;
    -webkit-font-smoothing: antialiased;
    padding: 0.9em;
    display: inline-block;
    border-radius: 34px;
    background: #F9055A;
    color: #fff !important;
    width: 275px;
    font-size: 18px;
}


  .d-but-or-pink:hover {    color: #fff;
    background:#000; }



    .d-but-or-green {
  
    padding-left: 2em !important;
    padding-right: 2em !important;
    -webkit-font-smoothing: antialiased;
    padding: 0.9em;
    display: inline-block;
    border-radius: 34px;
    background: #007D6E;
    color: #fff !important;
    width: 275px;
    font-size: 18px;
}


  .d-but-or-green:hover {    color: #fff;
    background:#000; }




    .d-but-or-blue {
  
    padding-left: 2em !important;
    padding-right: 2em !important;
    -webkit-font-smoothing: antialiased;
    padding: 0.9em;
    display: inline-block;
    border-radius: 34px;
    background: #2190FF;
    color: #fff !important;
    width: 275px;
    font-size: 18px;
}


  .d-but-or-blue:hover {    color: #fff;
    background:#000; }




    .d-but-or-purp {
  
    padding-left: 2em !important;
    padding-right: 2em !important;
    -webkit-font-smoothing: antialiased;
    padding: 0.9em;
    display: inline-block;
    border-radius: 34px;
    background: #9c27b0;
    color: #fff !important;
    width: 275px;
    font-size: 18px;
}


  .d-but-or-purp:hover {    color: #fff;
    background:#000; }



 .d-but-or-orange {
  
    padding-left: 2em !important;
    padding-right: 2em !important;
    -webkit-font-smoothing: antialiased;
    padding: 0.9em;
    display: inline-block;
    border-radius: 34px;
    background: #e67e23;
    color: #fff !important;
    width: 275px;
    font-size: 18px;
}


  .d-but-or-orange:hover {    color: #fff;
    background:#000; }



.mobilegkp{ top: .32px ; position: relative; }


.item-footer  {
    background: none;
    width: 40%; line-height: 1.2;
    padding: 1.5vh 0;
    border: 1px solid black;
    border-radius: 48px; margin-top: 3em !important;
    transition: all 0.8s ease;
    font-family: 'cera-bold' !important; font-weight: 100 !important;    -webkit-font-smoothing: antialiased;
    font-size: 33px !important;
}

.item-footer button:hover {
    background: black;
    color: white;
}

.gkge-hvr {
  /* Set initial opacity */
  opacity: 1;
  /* Add a smooth transition for the opacity change */
  transition: opacity 0.3s ease-in;
}


.gkge-hvr:hover {
  /* Change opacity on hover */
  opacity: 0.7;
}

.item-footer-alt {
    width: 100%;
    display: flex;
    align-items: center; color: 
    justify-content: center;
    /* background:grey; */
}

.gkge-hide { display: none ; }

.cocoa-hide { display:none !important; }

@media only screen and (max-width: 35em) {


.mobilegkp{ top: 1px !important; position: relative; }

 span.aepine-hidden-text {
    font-size: 33.5px; line-height: 1;
}

.pne-wdth-fix{ width:70px !important }

.pne-bg-fix-1{
    background-size: contain !important;
    background-repeat: no-repeat !important;

    background-position: 50% 220% !important;}


    .pne-bg-fix-2{
  
    background-repeat: no-repeat !important;
    background-color:#79a0b1 !important;
          background-position: 50% -81% !important;}


             .pne-bg-fix-3{
          background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: 50% 275% !important;}


.ae-slide-show-item p{ font-size:1.1rem }
.ae-slide-show-item h2 {

    font-size: 1.8rem;}



.text-xxl-fix{ font-size: 1.25rem; }



  .gkgecirc-container {

    margin-bottom: 6em;
    margin-top: 1em;

  }

    .gkgeicon span {
        top: -21px !important;
        position: relative;
    }

 .gkgecirc-left-circle {
            width: 150px;
            height: 150px;
            background-color: blue;
                 left: calc(89% - 300px);
        top: calc(50% - 78px);
        }

 .gkgecirc-right-circle {
            width: 150px;
            height: 150px;
            
          
            left: calc(22% + 100px);
            top: calc(50% - 81px);
            font-size: .5em;
        }


        .gkgeicon span{top: 0px}


     .newsfntfix {
        font-size: 40px !important;
        padding-left:6px;
        line-height: 1.2 !important; font-family: 'six caps';
        text-transform: uppercase;
    }


    .gheit{ height:420px !important }

.hero-nav-listItem2 li{line-height: 1.6;}

.gkgerm{font-size: 1.6rem !important}
  .px-blk{         display: block !important;
        margin-left: 23px !important;}

        .px-fnt{font-size: 22px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;}

  .pne-wdth-fix{ width:70px !important }


  .gkmr{ margin-top:-7em }

  .width-90{ width:90% !important }

    .width-80{ width:80% !important }

    .width-125{ width:135% !important }

.gkge-off{padding-bottom: 1em;
    padding-top: 1em !important; height: auto !important;}

    .pne-camp-text{ font-size:26px }

.pne-ae-txt-fix {
    font-size: 33.5px !important;line-height: 40px !important;
}

.bord-pne{ border: none !important }



   .pne-recipe-scrollable {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer */
  }

  .pne-recipe-scrollable::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Webkit-based browsers */
  }

  .pne-recipe-scrollable > * {
    flex: 0 0 auto; /* Prevent items from shrinking */
    margin-right: 8px; /* Optional: Add spacing between items */
    width: calc(77% - 1px) !important; /* Each item takes almost full width with some space */
  }

  .pne-recipe-scrollable > *:nth-child(n) {
    margin-right: 0px; /* Ensure there's space between items */
  }

  /* This will make the last item slightly cut off to show part of the next one */
  .pne-recipe-scrollable::after {
    content: '';
    display: block;
    width: 8px; /* Adding space to show part of the next item */
  }

.pne-bt{width: 315px !important}

.pne-flx{display: flex
;
    align-items: center !important;
    gap: 32px !important;
    flex-direction: column !important;}




.gkge-lh{    line-height: 45px !important;}
.gkge-off{ height:550px !important; }

.gkge-margin-fx {
    margin-left: 0em !important;
}

.gkge-no-pad {
    padding-right: 0px !important;
}

.gkge-nwb{ border-radius:0px !important }

.gkge-border-r{    border-radius: 0px 0px 10px 10px !important;
}

.gkge-border-l{    border-radius: 10px 10px 0px 0px !important;
}


.fiix{font-size: 2rem !important; }
  .d-gkge{background: #841219;color: #fff !important;} .gkge-hide { display: block !important; } .gkge-hide-m { display: none !important; }  .d-but-or-blue{ width:280px;  } .img-gk { width:98px !important; } .u-gk{ text-transform:uppercase; } .fnt{    font-size: 2.5em !important;} .g-ma{margin-left:  0px !important} .b-bt{border-bottom: none !important} .no-brd{border : none!important;}.gkge-right-border{ border-right:none; }.img-container{ height:100% ; border-bottom: 1px solid #faf1f1;} .gkge-form-head{ background-image:none; } .tool-tip__info {display: none !important;} .gkge-sm{ font-size:1.14em !important } .hero-top {
    position: relative;
    height: 100%;} .leta{ letter-spacing: 0px !important; } .h-fx { height:100% !important } .services-container{height: 75vh} .rante {transform: rotate(
360deg
) translateX(0%);    font-family: 'Cera-Regular'; opacity: .9;
    transform-origin: 0 0;}

.centa-centa{ text-align: center !important;} .auto-m{ margin: 0 auto;} .futa { height: 300px !important ;}
    .iitem-footer button { width: 100%;} .am{font-size: 4rem !important; } .full-fix{ width:100% !important } .m-f {
    margin-top: 3em !important;
}
}
}
}
}
.hyde{ display: none !important; 
  } 
  html{ overflow: none; } 
  body{ overflow: none } 
  .no-disp { visibility: hidden; }

}

@media only screen and (max-width: 64em) {
.hyde{ display: none !important; 
  } 
  html{ overflow: none; } 
  body{ overflow: none } 
  .no-disp { visibility: hidden; }
 .magin-mob { margin: 0 auto;  
 padding-bottom: 1em }  .magin-mob-alt { margin: 0 auto;  margin-bottom: 1.5em} .floot-none{ float: none !important; text-align: center;  margin: 0 auto; padding-top: 1em}
}


.item-footer-alt button {
    background: #fff;
    width: 300px;
    padding: 1.5vh 0; color: #000;
    border: 1px solid #fff;
    border-radius: 48px;
    transition: all 0.8s ease;
    font-family: 'vivo-light-body';
    font-size: 17px;
}

.item-footer-alt button:hover {
    background: rgba(255, 255, 255, .4);
    color: #fff;
}

.services-btns-box{
	position: absolute;
	width: 100%;
	top:50%;
	left: 0;
	transform: translateY(-50%);
	display:flex;
	justify-content:space-between;
}

.services-btns, 
.services-btns2 {
    border-radius: 50%;
    background:rgb(0, 0, 0, .9); color: #fff;
    height: 6.5vh;
    width: 6.5vh;
    font-size: 3vh;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}




.services-right {
    left: 96%;
}


.item-header {


    width: 100%;
    padding: 2em;
    display: flex;
    margin-top: 31.3em;
    align-items: center;
    justify-content: center;
    text-rendering: optimizelegibility;
}


.text-scr{ font-size: 6em !important; }

.item-div {
    width: 100%;
    height: 90%;
    /* background:skyblue; */
    overflow: hidden;
}



.item-footer-alt {
    width: 100%;
    display: flex;
    align-items: center; color: 
    justify-content: center;
    /* background:grey; */
}


.item-footer-alt-new button {
   width: 220px;
    padding: .8vh 0;
    color: #fff;
    border-radius: 5px;
    transition: all 0.8s ease;
    font-family: 'Cera-Medium';
    font-size: 18px;
}
.item-footer-alt-new {
    width: 100%; border-radius: 5px;
    display: block;
    align-items: center; color: 
    justify-content: center;
    /* background:grey; */
}

.iitem-footer button {
    width: 550px;
    padding: 1.5vh 0;
    color: #fff;
    background: black;
    border-radius: 48px;
    text-transform: uppercase;
    font-size: 21px;
}

.item-footer {
    width: 100%;
    display: flex;
    align-items: center;
   
    /* background:grey; */
}



.item-header {


    width: 100%;
    padding: 2em;
    display: flex;
    margin-top: 31.3em;
    align-items: center;
    justify-content: center;
    text-rendering: optimizelegibility;
}


.text-scr{ font-size: 6em !important; }

.item-div {
    width: 100%;
    height: 90%;
    /* background:skyblue; */
    overflow: hidden;
}

.item-div img {
    height: 70%;
    width: 70%;
   
}

.item-footer-alt {
    width: 100%;
    display: flex;
    align-items: center; color: 
    justify-content: center;
    /* background:grey; */
}


.item-footer-alt-new button {
   width: 220px;
    padding: .8vh 0;
    color: #fff;
    border-radius: 5px;
    transition: all 0.8s ease;
    font-family: 'Cera-Medium';
    font-size: 18px;
}
.item-footer-alt-new {
    width: 100%; border-radius: 5px;
    display: block;
    align-items: center; color: 
    justify-content: center;
    /* background:grey; */
}




@media (max-width: 500px) {
	
    .services-right {
        left: 88%;
    }


}

@media (max-width: 400px) {
    .services-right {
        left: 80%;
    }
	
	.brands-outer-box{
		position:relative;
		overflow-x:auto;
		
	}
	
	
	.brands-box{
		display:flex;
		flex-wrap:nowrap;
		align-items:center;
		width: 750%;
		right:30%;
	}
	
	.single-brand-box{
		width:80%;
		/* border-right: 1px solid white; */
	}
	
	.services-btns2 {
		 visibility: visible;
	}
	
}