@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
 */
body,html{
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    overflow-x: hidden;
}

body{
    font-family: "Instrument Sans", sans-serif;
    background: #fbfbfb;
    overflow-x: hidden;
    
}

:root{
    --primary:#007FFE;
    --secondary:#E8FBFF;
    --black:#171717;
}
.font-alt{
   /*  font-family: "Oswald", sans-serif; */
}

.hero:before{
    content: "";
    aspect-ratio: 1;
    width: 100%;
    position: absolute;
    border-radius: 100%;
    top: 30%;
    left: 50%;
    z-index: -1;
    translate: -50% 0%;
    background: var(--primary);
    filter: blur(45px);
    opacity: 0.07;
    pointer-events: none;
}
.hover-cta{
    position: relative;
    z-index: 1;
}
.hover-cta:before{
    content: "";
    width: 0;
    top: 0;
    height: 100%;
    background: var(--hover-color);
    transition: all 0.3s ease-out;
    position: absolute;
    right: 0;
    z-index: -1;
}
.hover-cta:hover:before{
    width: 100%;
    left: 0;
}

.inner-page{
    .main-nav-menu{
        > li{
            > a{
                color: white;
            }

            &:hover{
            > a{
                background:hsla(0, 0%, 100%);
                }
            }
        }

        > li.menu-item-has-children > a:after{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
        }
    }
}

.sticky-header{
    .inner-page{
        .main-nav-menu{
            > li {
                > a{
                    color: black;
                }

                &:hover{
                    > a{
                        background: rgb(0 127 254 / 13%);
                        color: var(--primary);
                        }
                    }
            }

            > li.menu-item-has-children:hover > a:after{
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23007FFE' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
       
    }

            > li.menu-item-has-children > a:after{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
        }
        }
    }
}

.main-nav-menu{
    > li{
        position: relative;

        &:hover > ul{
            opacity: 1;
            pointer-events: all;
            transform: translateX(-50%) translateY(0);
        }

        &:hover > a{  
            background: rgb(0 127 254 / 13%);
            color: var(--primary);
        }
    }
    > li.menu-item-has-children:hover > a:after{
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23007FFE' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
        rotate:180deg
    }
    > li.menu-item-has-children > a:after{
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
        display: block;
        transition: all 0.3s ease-out;
        line-height: 0;
        width: 15px;
    }
    > li> a{
        padding:0.6rem;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        border-radius: 0.2rem;
        transition: all 0.3s ease-out;
        
    }
    > li > ul{
        position: absolute;
        top: 100%;
        left: 50%;
        padding-top: 20px;
        transform: translateX(-50%) translateY(20px);
        max-width: max-content;
        width: 280px;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s ease-out;
        font-size: 1rem;
        line-height: 1.3;

        >li:hover > a{
            color: var(--primary);
        }

        > li.menu-item-has-children > a:after{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
            rotate: -90deg;
            display: block;
            transition: all 0.3s ease-out;
            line-height: 0;
            width: 15px;
        }

        > li.menu-item-has-children:hover > ul{
            opacity: 1;
            pointer-events: all;
            transform: translateX(100%);
        }
        > li > ul{
            position: absolute;
            top: 20px;
            right: 0;
            transform: translateX(90%);
            padding-left: 10px;
            width: max-content;
            line-height: 1;
            opacity: 0;
            transition: all 0.3s ease-out;
            pointer-events: none;

            >li:last-of-type > a{
                border: none;
            }

            a{
                color: rgba(0 0 0 /80%);
                display: block;
                padding:13px;
                transition: all 0.3s ease-out;
                border-bottom: 1px solid rgba(0 0 0 /5%);

                &:hover{
                    color: var(--primary);
                }

            }

            &:before{
                content: "";
                position: absolute;
                inset-block: 0;
                right: 0;
                left: 10px;
                background: white;
                border-radius: 0.3rem;
                box-shadow: 0 0 10px 0 rgba(0 0 0 /10%);
                z-index: -1;
            }
        }

        > li > a{
            color: rgba(0 0 0 /80%);
            transition: all 0.3s ease-out;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding:10px;
            border-bottom: 1px solid rgba(0 0 0 /5%);

            &:hover{
                color: var(--primary);
            }
        }

        > li:last-of-type > a{
            border:none;
        }

        &:before{
            content: "";
            position: absolute;
            top: 20px;
            inset-inline: 0;
            bottom: 0;
            background: white;
            border-radius: 0.3rem;
            box-shadow: 0 0 10px 0 rgba(0 0 0 /10%);
            z-index: -1;
        }

    }
}
#hero-slider .splide__list{
    padding-left: 50px !important;
}

.hero-text{
    opacity: 0;
    transition: all 0.3s ease-out;
    transform: translateY(20px);
}
#hero-slider .splide__slide.is-active .hero-text{
    opacity: 1;
    transform: translateY(0);
}
.image-filter-white img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(73%) saturate(2%) hue-rotate(79deg) brightness(108%) contrast(101%);
}
.image-filter-secondary{
    filter: brightness(0) saturate(100%) invert(32%) sepia(93%) saturate(7481%) hue-rotate(301deg) brightness(108%) contrast(117%);
}
.mailwow-image{
    filter: brightness(0) saturate(100%) invert(100%) sepia(73%) saturate(2%) hue-rotate(79deg) brightness(108%) contrast(101%);
}

#pillars-slider.number ul{
    counter-reset: pillars;
}
#pillars-slider.number ul li{
    counter-increment: pillars;
}
#pillars-slider.number ul li .hero-slide{
    position: relative;
    z-index: 1;
}
#pillars-slider.number ul li .hero-slide:before{
    content: counter(pillars);
    position: absolute;
    top: 20px;
    z-index: -1;
    pointer-events: none;
    right: 30px;
    opacity: 1;
    color: transparent;
    -webkit-text-stroke: 1px white;
    font-weight: 900;
    font-size: 5rem;
    line-height: 1;
}

.clients-scroller .splide__slide {
    height: auto !important;
  }
  .clients-scroller img{
    display: inline-block;
  }

  .footer-menu ul a{
    display: block;
    transition: all 0.3s ease-out;
  }
  .footer-menu ul a:hover{
    color: var(--primary);
  }

  .letters{
    clip-path: inset(100% 0 0 0);
  }

  .preloader-image{
    transition: all 0.3s ease-out;
  }
  .preloader-image.white-image{
    filter: brightness(0) saturate(100%) invert(100%) sepia(73%) saturate(2%) hue-rotate(79deg) brightness(108%) contrast(101%);
  }

  .small-cta{
    display: inline-block;
    position: relative;

    &:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background: var(--primary);
        transition: all 0.3s ease-out;
        width: 0;
    }

    &:hover{
        &:before{
            width: 100%;
        }
    }
}

#breadcrumbs{
    a{
        &:hover{
            text-decoration: underline;
        }
    }
}

.blue-images{
    img{

        filter: brightness(0) saturate(100%) invert(37%) sepia(97%) saturate(2645%) hue-rotate(193deg) brightness(96%) contrast(108%);
    }
}

.white-images{
    img{
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7457%) hue-rotate(98deg) brightness(93%) contrast(102%);
    }
}

.heading-title{
    span{
        color: var(--primary);
       /*  font-family: "Oswald", sans-serif; */
    }
}

.section-title{
    h2 span{
        color: var(--primary);
      /*   font-family: "Oswald", sans-serif; */
    }
}

.blocks-container{
    strong{
        font-weight: 600;
        color: black;
    }

    .grid-blue{
        strong{
            color: white;
        }
    }
}

#pillars-slider{
    .splide__pagination{
        position: static;
        margin-top: 1rem;
    }
    .splide__pagination__page.is-active{
        background: var(--primary);
    }
}

.mobile-nav{
    > ul{
        >li{
            padding-block: 0.1rem;
        }
    }
    li.active:has(ul){
        > a:after{
            transform: rotate(-90deg);
        }
    }
    li:has(ul){
        > a{
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:after{
                content: "";
                width: 20px;
                height: 20px;
                background-image: url('https://www.comsyscx.com/wp-content/uploads/2026/01/chevron-forward-outline.svg');
                transform: rotate(90deg);
                display: block;
                background-size: 100%;
            }
        }

        ul{
            margin-block: 1rem;
            opacity: 0.5;
            display: none;
        }
    }
}

.grid-slider{
    .splide__pagination{
        position: static;
        margin-top: 1rem;
    }
    .splide__pagination__page.is-active{
        background: var(--primary);
    }
}