.togo-faq-card{
    border: 1px dashed var(--togo-theme-primary);
}

.togo-industries-serve{
    overflow: hidden;
}

/* image zoom */
.togo-industries-serve img{
    transition: transform 0.3s ease, filter 0.3s ease;
}

.togo-industries-serve:hover img{
    transform: scale(1.2);
}

/* icon box normal state */
.togo-industries-serve .icon-box{
    background: transparent;
    padding: 20px;
    border-radius: 10px;
    transition: background 0.3s ease;
}

/* hover background */
.togo-industries-serve:hover .icon-box{
    /*background: var(--togo-theme-primary);*/
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* make icon white only on hover */
.togo-industries-serve:hover .icon-box img{
    /*filter: brightness(0) invert(1);*/
}


.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.goog-te-banner-frame,
.goog-te-balloon-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

.goog-te-banner-frame.skiptranslate{
    display:none !important;
}

.goog-te-gadget img{
    display:none !important;
}

body > .skiptranslate{
    display:none;
}

body{
    top:0px !important;
}


.language-modern{
    border-radius:16px;
    padding:5px;
}

.language-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.language-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:16px 10px;
    border-radius:10px;
    background:#f8f9fa;
    cursor:pointer;
    transition:all .25s ease;
    font-weight:500;
}

.language-card:hover{
    background:#ffffff;
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.flag{
    font-size:22px;
    margin-bottom:6px;
}

.reset-language{
    font-size:14px;
    color:#6c757d;
    text-decoration:none;
}

.reset-language:hover{
    color:#000;
    text-decoration:underline;
}



/* Overlay background */
/* remove default google container styling */
.gsc-control-cse {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100%;
}

/* input wrapper */
.gsc-input-box {
    width: 100%;
    height: 56px !important;
    border-radius: 28px !important;
    border: 1px solid var(--togo-theme-primary) !important;
    background: var(--togo-common-white) !important;
    padding-left: 2px !important;
    padding-right: 5px !important;
}



/* remove google table spacing */
.gsc-input-box table {
    margin: 0 !important;
}

/* search button */
.gsc-search-button-v2 {
    height: 56px !important;
    border-radius: 28px !important;
    background: transparent !important;
    border: none !important;
}

/* search icon */
.gsc-search-button-v2 svg {
    fill: var(--togo-common-black) !important;
}

/* remove google branding */
.gsc-branding {
    display: none !important;
}



.product_background{
    background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
}



:root {
    --primary-orange: var(--togo-common-red);
    --line-color: var(--togo-gray-1);
    --text-main: var(--togo-taxt-body);
}

.process-wrapper {
    padding: 50px 0;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    counter-reset: step-counter; /* Initializes the numbering */
}

.process-column {
    position: relative;
}

.column-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--togo-common-black);
    letter-spacing: 2px;
    margin-bottom: 25px;
    padding-left: 55px;
}

/* The Vertical Line */
.step-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-list::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line-color);
    z-index: 0;
}

/* The Step Item */
.process-item {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 55px;
    z-index: 1;
    counter-increment: step-counter; /* Increases number automatically */
}

/* The Number Bubble */
.process-item::before {
    content: counter(step-counter);
    position: absolute;
    left: 10px;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 2px solid var(--primary-orange);
    color: var(--primary-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    z-index: 2;
    transition: 0.3s;
}

.process-card {
    background: #fff;
    padding: 14px 20px;
    border-radius: 8px;
    border: 1px solid #ebebeb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    width: 100%;
    transition: 0.3s ease;
}

/* Hover Effects */
.process-item:hover::before {
    background: var(--primary-orange);
    color: #fff;
    transform: scale(1.1);
}

.process-item:hover .process-card {
    border-color: var(--primary-orange);
    box-shadow: 0px 2px 19px 0px var(--primary-orange);
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 992px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}


/* Ensure the container of the select has a high z-index */
.togo-shop-select {
    position: relative;
    z-index: 999; /* Higher than the product grid */
}

/* If the overlap is happening because a parent has overflow hidden */
.col-lg-12 {
    overflow: visible !important;
}

/* Specific fix for custom select libraries (like NiceSelect or Select2) */
.togo-tour-grid-select .nice-select .list {
    z-index: 9999 !important;
    position: absolute;
}


    /* Smooth hover effect for cards */
.togo-carrer-feature-sec .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.togo-carrer-feature-sec .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

/* Icon color branding */
.togo-carrer-feature-item-icon i {
    color: var(--togo-theme-primary);
}

/* Ensure the grid is centered when there are only 2 items on the bottom row */
.justify-content-center {
    display: flex;
    justify-content: center;
}



/* Container Spacing */
.togo-step-sec {
    background-color: #fcfcfc; 
}

/* The Card */
.industry-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 10px 10px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Icon Container - ENLARGED & FULL */
.icon-wrapper {
    width: 90px;          
    height: 90px;         
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.4s ease;
    overflow: hidden; /* This keeps the image inside the circle */
    padding: 0;        /* Removed padding so image touches edges */
}

/* Image - FULL SIZE & NO GRAYSCALE */
.icon-wrapper img {
    width: 100%;           /* Fills the width of the circle */
    height: 100%;          /* Fills the height of the circle */
    object-fit: cover;     /* Ensures the image fills the circle without stretching */
    filter: none !important; /* Removes grayscale permanently */
    opacity: 1;            /* Full visibility */
    transition: all 0.4s ease;
}

/* Card Title */
.industry-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0;
    line-height: 1.3;
    transition: color 0.3s ease;
}

/* Hover States */
.industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--togo-theme-primary);
}

.industry-card:hover .icon-wrapper {
    background: #ebf5ff; 
}



.industry-card:hover .industry-title {
    color: var(--togo-theme-primary);
}

/* Mobile responsive fix */
@media (max-width: 576px) {
    .icon-wrapper {
        width: 100px;
        height: 100px;
    }
}