/* Tüm elementlerde caret gizle */
* {
    caret-color: transparent;
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --tw-ring-offset-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #fff;
}

/* ================================
   GRADIENT SYSTEM
================================ */
@property --tw-gradient-position {
    syntax: "*";
    inherits: false;
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
}


@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false;
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false;
}



/* ================================
   TRANSLATE (ENTER / EXIT)
================================ */
@property --tw-enter-translate-x {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --tw-enter-translate-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --tw-exit-translate-x {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --tw-exit-translate-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* ================================
   OPACITY / BLUR
================================ */
@property --tw-enter-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --tw-exit-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --tw-enter-blur {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --tw-exit-blur {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* ================================
   ANIMATION CONTROL
================================ */
@property --tw-animation-delay {
    syntax: "<time>";
    inherits: false;
    initial-value: 0s;
}

@property --tw-animation-direction {
    syntax: "*";
    inherits: false;
    initial-value: normal;
}

@property --tw-animation-fill-mode {
    syntax: "*";
    inherits: false;
    initial-value: none;
}

@property --tw-animation-iteration-count {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

/* ================================
   LAYOUT / MISC
================================ */
@property --tw-space-x-reverse {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@property --tw-space-y-reverse {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@property --tw-scroll-snap-strictness {
    syntax: "*";
    inherits: false;
    initial-value: proximity;
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: "";
}

html {
    scroll-behavior: smooth;
}

/* Sadece input ve textarea caret göstersin */
input,
textarea {
    caret-color: auto !important;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #d4d4d4;
    background-color: #d4d4d4;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #747474;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8b8b8b;
}

.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.blur-\[100px\] {
    --tw-blur: blur(100px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.group:hover .icon-circle {
    background-color: #c4a35a;
    border-color: #c4a35a;
    color: #000;
}

.group:hover .group-hover\:text-white {
    color: #fff;
}

.group:hover .group-hover\:bg-white\/10 {
    background-color:
        color-mix(in oklab, #fff 10%, transparent);
}

.group:hover .group-hover\:border-white\/10 {
    border-color:
        color-mix(in oklab, #fff 10%, transparent);
}

.group:hover .group-hover\:text-black {
    color: #000;
}

.group:hover .group-hover\:opacity-20 {
    opacity: 20%;
}

.group:hover .group-hover\:opacity-5 {
    opacity: 5%;
}

.group:hover .group-hover\:grayscale-0 {
    --tw-grayscale: grayscale(0%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.group:hover .group-hover\:scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
}

.group:hover .group-hover\:scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
}

.transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.border-l {
    border-left-style: solid;
    border-left-width: 1px;
}

.border-neutral-800 {
    border-color: rgb(38 38 38);
}

.p-6 {
    padding: calc(0.25rem * 6);
}

.pl-6 {
    padding-left: calc(0.25rem * 6);
}

.to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

.from-neutral-950\/80 {
    --tw-gradient-from: color-mix(in oklab, #0a0a0a 80%, transparent);
}

.from-neutral-950 {
    --tw-gradient-from: #0a0a0a;
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

.via-neutral-950\/50 {
    --tw-gradient-via: color-mix(in oklab, #0a0a0a 50%, transparent);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

.mix-blend-overlay {
    mix-blend-mode: overlay;
}

.bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
}

.bg-white\/5 {
    background-color:
        color-mix(in oklab, #fff 5%, transparent);
}

.w-6 {
    width: calc(0.25rem * 6);
}

.h-6 {
    height: calc(0.25rem * 6);
}

.text-neutral-500 {
    color: #737373;
}

.hover\:border-\[\#c4a35a\]\/50:hover {
    border-color: rgba(196, 163, 90, 0.5);
}

.hover\:border-white\/30:hover {
    border-color: rgb(255, 255, 255, 0.3);
}

.hover\:border-white\/20:hover {
    border-color: color-mix(in oklab, #fff 20%, transparent);
}

.hover\:bg-white\/10:hover {
    background-color: color-mix(in oklab, #fff 10%, transparent);
}

.bg-neutral-900 {
    background-color: rgb(23, 23, 23);
}

.bg-neutral-800 {
    background-color: rgb(38 38 38);
}

.bg-neutral-950 {
    background-color: #0a0a0a;
}

.hover\:bg-neutral-800:hover {
    background-color: rgb(38, 38, 38);

}

.border-\[\#c4a35a\] {
    border-color: #c4a35a;
}

.border-\[\#c4a35a\]\/50 {
    border-color: rgb(196, 163, 90, 0.5);
}

.text-\[\#c4a35a\] {
    color: #c4a35a;
}

.text-\[\#6b2d3c\] {
    color: #6b2d3c;
}

.mix-blend-screen {
    mix-blend-mode: screen;
}

.bg-center {
    background-position: center;
}

.bg-cover {
    background-size: cover;
}

.z-0 {
    z-index: 0;
}

.inset-0 {
    inset: calc(0.25rem * 0);
}

.from-background\/90,
.via-background\/80,
.to-background {
    --tw-gradient-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.from-background\/90 {
    --tw-gradient-from:
        color-mix(in oklab, hsl(0 0% 4%) 90%, transparent);
}

.bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
}

.via-background\/80 {
    --tw-gradient-via:
        color-mix(in oklab, hsl(0 0% 4%) 80%, transparent);
}

.to-background {
    --tw-gradient-to: hsl(0 0% 4%);
}

.font-italic {
    font-style: italic;
}

.bg-dark-gradient {
    background: linear-gradient(to top,
            oklch(14.5% 0 0) 0%,
            color-mix(in oklab, oklch(14.5% 0 0) 50%, transparent) 50%,
            transparent 100%);
}

/* Modern tarayıcılar için */
@supports (color: oklch(50% 0 0)) {
    .bg-dark-gradient {
        background: linear-gradient(to top,
                oklch(14.5% 0 0) 0%,
                color-mix(in oklab, oklch(14.5% 0 0) 50%, transparent) 50%,
                transparent 100%);
    }
}

.group:hover .group-hover\:translate-x-2 {
    --tw-translate-x: calc(0.25rem * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
}

.bg-\[\#c4a35a\] {
    background-color: #c4a35a;
}

.bg-\[\#c4a35a\]\/20 {
    background-color: rgb(196, 163, 90, 0.2);
}

.bg-\[\#c4a35a\]\/50 {
    background-color: rgb(196, 163, 90, 0.5);
}

.bg-\[\#272112\] {
    background-color: #272112;
}

.border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05);
}

.border-white\/50 {
    border-color: #ffffff80
}

.p-32 {
    padding: calc(0.25rem * 32);
}

.p-8 {
    padding: calc(0.25rem * 8);
}

.h-12 {
    height: calc(0.25rem * 12);
}

.w-12 {
    width: calc(0.25rem * 12);
}

.header-contact-icon {
    position: relative;
}

.header-contact-icon .header-contact-desc {
    position: absolute;
    left: 50%;
    top: 40px;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    background-color: #000000;
    color: #fff;
    border: 1px solid #171717;
    padding: 5px 10px;
    border-radius: 25px;
    transform: translateX(-50%);
    font-size: 13px;
    transition: all .5s ease;
}

.header-contact-icon:hover .header-contact-desc {
    opacity: 1;
    visibility: visible;
}

.text-justify {
    text-align: justify;
}

.text-main-500 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.w-\[200px\] {
    width: 200px
}

.shadow-\[\#000000\] {
    box-shadow: 0 0 20px #000000
}

.border-\[1px\]-\[\#2b2b2b\] {
    border: 1px solid #2b2b2b;
}

.text-6 {
    font-size: 1.5rem;
}

.border-gray {
    border-color: #606365;
}

.text-tobot {
    color: #998061 !important
}

.text-blue-100 {
    color: #dbeafe
}

.text-orange-100 {
    color: #ffe9ce;
}

.text-rose-100 {
    color: #ffe4e6;
}

.text-blue-200 {
    color: #effffb;
}

.text-blue-200\/60 {
    color: color-mix(in oklab, #effffb 60%, transparent)
}

.hover\:bg-blue-400\/10:hover {
    background-color: color-mix(in oklab, #9d8b61 10%, transparent);
}

.border-blue-400\/30 {
    border-color: color-mix(in oklab, #9d8b61 30%, transparent);
}

.border-white\/10 {
    border-color: color-mix(in oklab, #fff 10%, transparent)
}

.hover\:bg-white\/5:hover {
    background-color: color-mix(in oklab, #fff 5%, transparent);
}

.bg-black\/20 {
    background-color: color-mix(in oklab, #000 20%, transparent);
}

.text-blue-300\/50 {
    color: color-mix(in oklab, #effffb 50%, transparent)
}

.w-2 {
    width: calc(0.25rem * 2);
}

.h-2 {
    height: calc(0.25rem * 2);
}

.bg-blue-500 {
    background-color: #6c5b31;
}

.shadow-\[0_0_10px_rgba\(157\,139\,97\,0\.502\)\] {
    --tw-shadow: 0 0 10px rgba(157, 139, 97, 0.502);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(59\,130\,246\,0\.5\)\] {
    --tw-shadow: 0 0 10px rgb(59 130 246 / 50%);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--tw-shadow);
}

.bg-\[\#1c2d26\] {
    background-color: #1c2d26;
}

.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.group:hover .group-hover\:scale-150 {
    --tw-scale-x: 150%;
    --tw-scale-y: 150%;
    --tw-scale-z: 150%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
}

.group:hover .group-hover\:\!block {
    display: block !important;
}

.group:hover .group-hover\:hidden {
    display: none;
}

.tracking-widest {
    --tw-tracking: 0.1em;
    letter-spacing: 0.1em;
}

.tracking-tighter {
    --tw-tracking: -0.05em;
    letter-spacing: -0.05em;
}

.leading-relaxed {
    --tw-leading: 1.625;
    line-height: 1.625;
}

.text-blue-200\/80 {
    color: color-mix(in oklab, #effffb 80%, transparent)
}

.self-start {
    align-self: flex-start;
}

.px-8 {
    padding-inline: calc(0.25rem * 8);
}

.bg-background\/90 {
    background-color:
        color-mix(in oklab, hsl(0 0% 4%) 90%, transparent);
}

.text-muted-foreground {
    color: hsl(0 0% 60%);
}

.max-w-md {
    max-width: 28rem;
}

.max-w-4xl {
    max-width: 896px;
}

.max-w-3xl {
    max-width: 768px;
}

.map-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../img/world-map.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.mb-8 {
    margin-bottom: calc(0.25rem * 8);
}

.color-whatsapp {
    color: #1daa61;
}

.color-phone {
    color: #82e5f8;
}

.color-envelope {
    color: #fbde86;
}


.text-collective {
    color: #e24a3e !important
}

.text-collective\/50 {
    color: #e24a3e80 !important
}

.hover\:text-collective:hover {
    color: #e24a3e !important
}

.text-consulting {
    color: #c49663 !important
}

.text-consulting\/50 {
    color: #c4966380 !important
}

.hover\:text-consulting:hover {
    color: #c49663 !important
}

.text-os {
    color: #24d4da !important
}

.text-os\/50 {
    color: #24d4da80 !important
}

.hover\:text-os:hover {
    color: #24d4da !important
}

.box-shadow-envelope {
    box-shadow: 0 0 3px #ccb56f;
}

.box-shadow-whatsapp {
    box-shadow: 0 0 3px #1daa61;
}

.box-shadow-phone {
    box-shadow: 0 0 3px #82e5f8;
}

.hover\:border-color-collective:hover {
    border-color: color-mix(in oklab, oklch(41% 0.159 10.272) 50%, transparent);
}

.hover\:border-color-os:hover {
    border-color: color-mix(in oklab, oklch(41.4% 0.112 45.904) 50%, transparent);
}

.hover\:border-color-consulting:hover {
    border-color: color-mix(in oklab, #1c398e 50%, transparent);
}

.hover\:bg-\[\#343434\]:hover {
    background-color: #343434;
}

/* .border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity))
} */
.bg-primary-gradient {
    background: linear-gradient(200deg, #074ea0 42.93%, #052e5e 77.7%);
}

.bg-main-color {
    background-color: #393939;
}

.w-1\/4 {
    width: 25%;
}

.btn-small {
    padding: 10px 15px;
    font-size: 15px;
}

.text-\[\#a4c0ff\] {
    --tw-text-opacity: 1;
    color: #a4c0ff;
}

.text-\[\#ffdbf1\] {
    --tw-text-opacity: 1;
    color: #ffdbf1;
}

.text-\[\#ffedb6\] {
    --tw-text-opacity: 1;
    color: #ffedb6;
}

.text-\[\#a4c0ff\] {
    --tw-text-opacity: 1;
    color: #a4c0ff;
}

.text-\[\#ffdbf1\] {
    --tw-text-opacity: 1;
    color: #ffdbf1;
}

.text-\[\#ffedb6\] {
    --tw-text-opacity: 1;
    color: #ffedb6;
}

.text-\[\#86888A\] {
    --tw-text-opacity: 1;
    color: rgb(134 136 138 / var(--tw-text-opacity));
}

.group\/button.has-child.active .group-hover\/button\:active {
    color: #c49663 !important;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.group\/button:hover .group-hover\/button\:text-consulting {
    color: #c49663;
}

.group\/link:hover .group-hover\/link\:text-main-600,
.group\/link:hover .group-hover\/link\:text-main-500 {
    color: #074d9d;
}

.group\/link:hover .group-hover\/link\:translate-x-1 {
    --tw-translate-x: 0.25rem;
}

.group\/link:hover .group-hover\/link\:translate-x-1,
.group\/marker:hover .group-hover\/marker\:-translate-y-1 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-consulting\/90:hover {
    background-color: color-mix(in oklab, hsl(32, 45%, 58%) 90%, transparent);
}

.consulting-button {
    background-color: #c49663;
    color: #fff;
    border-radius: 50px;
    padding: 5px 10px;
    transition: all .5s ease;
}

.consulting-button:hover {
    box-shadow: 0 0 10px #c49663;
}

.grid-cols-\[minmax\(0\2c 3fr\)_minmax\(0\2c 6fr\)_minmax\(0\2c 3fr\)\] {
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
}

.bg-left-triangle {
    clip-path: polygon(15% 50%, 100% 100%, 100% 0);
}

.bg-right-triangle {
    clip-path: polygon(85% 50%, 0 100%, 0 0);
}

.mt-10 {
    margin-top: 2.5rem;
}

.border-b {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.border-t-0 {
    border-top-width: 0;
}

.border-x-0 {
    border-right-width: 0;
    border-left-width: 0;
}

.border-slate-200 {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

.breadcrumb-gradient {
    background: linear-gradient(-45deg, #000000, #6e6e6e, #565656, #222222);
    background-size: 400% 400%;
    animation: gradient 7s ease-out infinite;
    z-index: 1;
    position: relative;
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.gap-y-7\.5 {
    row-gap: 1.875rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-x-6 {
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
}

.text-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.text-limit-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.text-limit-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.text-limit-8 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
}

.rotate-90 {
    --tw-rotate: 90deg
}

.text-5 {
    font-size: 1.25rem;
}

.text-6\.5 {
    font-size: 1.625rem;
}

.text-8 {
    font-size: 2rem;
}

.h-6\.5 {
    height: 1.625rem;
}

.bg-bottom-triangle {
    clip-path: polygon(50% 85%, 0 0, 100% 0);
}

.max-w-100 {
    max-width: 100% !important;
}

.text-gradient-number .joint,
.text-gradient-number .digit {
    background-size: 400% 400%;
    background-image: linear-gradient(90deg,
            #363636 0%,
            #5f5f5f 12.5%,
            #a3a3a3 25%,
            #ffffff 37.5%,
            #a3a3a3 50%,
            #5f5f5f 62.5%,
            #363636 75%,
            #5f5f5f 87.5%,
            #a3a3a3 100%);
    ;
    -webkit-background-clip: text;
    animation: text-color-gradient 4s linear infinite;
    color: transparent !important;
}

.align-content-center {
    align-content: center;
}

.align-content-end {
    align-content: end;
}

.about-brand.active {
    transform: scale(1.1);
}

.about-brand.active .about-bg {
    /* background: linear-gradient(-45deg, #074d9d, #14a5db, #074d9d, #0a5ebe);
    background-size: 400% 400%;
    animation: gradient 7s ease-out infinite; */
    box-shadow: inset 0px 0px 40px 7px #4bb9e2;
}

.about-active-brand img {
    transition: opacity 0.45s ease, transform 0.45s ease;
    opacity: 1;
    transform: translateY(0);
}

.about-active-brand img.slide-out {
    opacity: 0;
    transform: translateY(-20px);
    /* yukarı çıkarak kaybolur */
}

.about-active-brand img.slide-in {
    opacity: 1;
    transform: translateY(0);
    /* yukarıdan inerek görünür */
}

.about-active-brand .about-desc {
    font-size: 22px;
    transition: opacity 0.45s ease, transform 0.45s ease;
    opacity: 1;
    transform: translateY(0);
}

.about-active-brand .about-desc.slide-out {
    opacity: 0;
    transform: translateY(-20px);
}

.about-active-brand .about-desc.slide-in {
    opacity: 1;
    transform: translateY(0);
}

.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: 0.375rem;
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(0.375rem - 1px);
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius)
}

.card>hr {
    margin-right: 0;
    margin-left: 0
}

.card>.list-group {
    border-top: inherit;
    border-bottom: inherit
}

.card>.list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius)
}

.card>.list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius)
}

.card>.card-header+.list-group,
.card>.list-group+.card-footer {
    border-top: 0
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color)
}

.card-title {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 16px;
}

.card-text {
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 12px;
}

.card-subtitle {
    margin-top: calc(-.5 * var(--bs-card-title-spacer-y));
    margin-bottom: 0
}

.card-text:last-child {
    margin-bottom: 0
}

.card-link+.card-link {
    margin-left: var(--bs-card-spacer-x)
}

.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color)
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0
}

.card-footer {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color)
}

.card-footer:last-child {
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)
}

.card-header-tabs {
    margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
    margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
    margin-left: calc(-.5 * var(--bs-card-cap-padding-x));
    border-bottom: 0
}

.card-header-tabs .nav-link.active {
    background-color: var(--bs-card-bg);
    border-bottom-color: var(--bs-card-bg)
}

.card-header-pills {
    margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
    margin-left: calc(-.5 * var(--bs-card-cap-padding-x))
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius)
}

.card-img,
.card-img-bottom,
.card-img-top {
    width: 100%
}

.card-img,
.card-img-top {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius)
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius)
}

.card-group>.card {
    margin-bottom: var(--bs-card-group-margin)
}

.mt-7\.5 {
    margin-top: 1.875rem;
}

.bg-\[\#DDDDDD\] {
    --tw-bg-opacity: 1;
    background-color: rgb(221 221 221 / var(--tw-bg-opacity));
}

.bg-\[\#171717\] {
    --tw-bg-opacity: 1;
    background-color: #181818
}

.cookie-alert {
    left: 30px;
    bottom: 15px;
    max-width: 610px;
    width: 100%;
    /* min-height: 195px; */
    background-color: #191919;
    border: 1px solid #171717;
    box-shadow: inset 0 0 65px #000000;
    border-radius: 15px;
}

/* 
.cookie-alert.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
} */

.editor {
    color: #374151;
}

.editor h1 {
    --tw-text-opacity: 1;
    color: #1c396a;
    font-size: 64px;
    margin-bottom: 50px;
    line-height: 1.1;
    font-weight: 400;
}

.editor h3 {
    --tw-text-opacity: 1;
    color: #c1c1c1;
    font-size: 30px;
    margin-bottom: 10px;
    line-height: 1.5;
    font-weight: 400;
}

.editor p {
    color: #c1c1c1bf;
    font-size: 23px;
    font-weight: 300;
    line-height: 1.5 !important;
    --tw-space-y-reverse: 0;
    margin-bottom: -webkit-calc(60px* var(--tw-space-y-reverse));
    margin-bottom: -moz-calc(60px* var(--tw-space-y-reverse));
    margin-bottom: calc(60px* var(--tw-space-y-reverse));
    margin-top: -webkit-calc(60px*(1 - var(--tw-space-y-reverse)));
    margin-top: -moz-calc(60px*(1 - var(--tw-space-y-reverse)));
    margin-top: calc(60px*(1 - var(--tw-space-y-reverse)));
}


.form-el input,
.form-el select,
.form-el textarea {
    border-radius: 15px;
}

.gap-y-\[20px\] {
    row-gap: 20px;
}

.gap-y-\[30px\] {
    row-gap: 30px;
}

.gradient-color-text {
    background-size: 200% 100%;
    background-image: linear-gradient(90deg, #363636 0%, #5f5f5f 12.5%, #d1463c 25%, #d1463c 37.5%, #d1463c 50%, #5f5f5f 62.5%, #363636 75%, #5f5f5f 87.5%, #d1463c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-color-gradient 3s linear infinite;
    color: transparent !important;
}

@keyframes text-color-gradient {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: -200% center;
    }
}

.gradient-color-border {
    animation: border-color-gradient 5s linear infinite;
    border: 3px solid transparent;
}

@keyframes border-color-gradient {
    0% {
        border-color: #000000;
    }

    25% {
        border-color: #5f5f5f;
    }

    50% {
        border-color: #4f92eb;
    }

    75% {
        border-color: #2f80ec;
    }

    100% {
        border-color: #000000;
    }
}

.height140 {
    height: 140px;
}

.height160 {
    height: 160px;
}


.hover-block-text-type .hover-block-text {
    opacity: 0;
    visibility: hidden;
    height: 0;
    transform: translateY(150%);
    transition: all .5s ease;
}

.hover-block-text-type:hover .hover-block-text {
    opacity: 1;
    visibility: visible;
    height: 100%;
    transform: translateY(0);
}

.hover-image-opacity\/50:hover .hover-image {
    opacity: .5;
}

.hover-image-opacity\/80:hover .hover-image {
    opacity: .8;
}

.hover-bg-image .hover-image {
    transform: scale(1);
    transition: transform 1s ease;
}

.hover-bg-image:hover .hover-image {
    transform: scale(1.05);
}

.hover-logo {
    position: absolute;

    /* BAŞLANGIÇ KONUMU (Sol Alt) */
    left: 20px;

    /* Bottom yerine Top referansı kullanıyoruz ki animasyon bozulmasın */
    bottom: 20px;

    /* top: 100% elementi kartın en altına iter.
       Y ekseninde (-100% - 20px) diyerek kendi boyu kadar yukarı + 20px boşluk bırakıyoruz.
       Böylece tam olarak bottom: 20px gibi görünür ama top referanslıdır.
    */
    transform: translate(0, 0);

    /* Sadece transform değil, left ve top da değişeceği için 'all' diyoruz */
    transition: all 0.9s cubic-bezier(.22, .61, .36, 1);
}

/* HOVER DURUMU (Üst Orta) */
.hover-logo-type:hover .hover-logo {
    /* Yatayda ortaya */
    left: 50%;

    /* Dikeyde en tepeye */
    bottom: 100%;

    /* Yatayda %50 geri çekerek tam ortala (-50%).
       Dikeyde yukarıdan 15px boşluk bırak (15px).
       Kendi boyunu hesaplamaya gerek yok çünkü top:0 yaptık.
    */
    transform: translate(-50%, calc(135%));
}

.hover-active text {
    fill: #fff;
}

.hover-active .group-\[\.active\]\/dot\:opacity-100 {
    opacity: 1;
}

.hover-active .group-\[\.active\]\/dot\:fill-\[\#e20514\] {
    fill: #e20514;
}

.transform-none {
    transform: none !important;
}

.z-\[-1\] {
    z-index: -1;
}

.index-about-desc {
    height: calc(100% - 220px);
    overflow: hidden;
    align-content: center;
}

.index-about-desc .enter-text {
    max-height: calc(100% - 130px);
    overflow: hidden;
}

.slow-grow {
    transform: scale(0.2);
    transform-origin: right bottom;
    animation: slowGrowIn 1s ease-out forwards;
}

.slow-grow .index-about-desc {
    opacity: 1;
    animation: eyeText 4s ease;
}

@keyframes eyeText {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slowGrowIn {
    from {
        transform: scale(0.2);
    }

    to {
        transform: scale(1);
    }
}

.position-sticky {
    position: sticky;
}

.outline-primary {
    /* border: 1px solid #000000; */
    color: #dbdbdb !important;
    background-color: #565656;
}

.primary-btn {
    /* background: linear-gradient(270deg, #000000 0.64%, #3a3a3a 100%); */
    background-color: #000;
    position: relative;
    z-index: 1;
}

.template-btn {
    display: inline-block;
    font-family: inherit;
    font-weight: 600;
    font-size: 12px;
    border-radius: 5px;
    padding: 16px 32px;
    color: #dbdbdb;
    vertical-align: middle;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.template-btn:hover {
    transform: scale(1.05);
}

.text-gray {
    color: #707070;
}

.text-gray-500 {
    color: #6a7282;
}

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.m-5 {
    margin: 3rem !important
}

.m-auto {
    margin: auto !important
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important
}

.mx-1 {
    margin-right: .25rem !important;
    margin-left: .25rem !important
}

.mx-2 {
    margin-right: .5rem !important;
    margin-left: .5rem !important
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.mt-auto {
    margin-top: auto !important
}

.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.me-4 {
    margin-right: 1.5rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.me-auto {
    margin-right: auto !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.mb-auto {
    margin-bottom: auto !important
}

.ms-0 {
    margin-left: 0 !important
}

.ms-1 {
    margin-left: .25rem !important
}

.ms-2 {
    margin-left: .5rem !important
}

.ms-3 {
    margin-left: 1rem !important
}

.ms-4 {
    margin-left: 1.5rem !important
}

.ms-5 {
    margin-left: 3rem !important
}

.ms-auto {
    margin-left: auto !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important
}

.px-1 {
    padding-right: .25rem !important;
    padding-left: .25rem !important
}

.px-2 {
    padding-right: .5rem !important;
    padding-left: .5rem !important
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .25rem !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pt-3 {
    padding-top: 1rem !important
}

.pt-4 {
    padding-top: 1.5rem
}

.pt-5 {
    padding-top: 3rem
}

.pe-0 {
    padding-right: 0
}

.pe-1 {
    padding-right: .25rem
}

.pe-2 {
    padding-right: .5rem
}

.pe-3 {
    padding-right: 1rem
}

.pe-4 {
    padding-right: 1.5rem
}

.pe-5 {
    padding-right: 3rem !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

.pb-4 {
    padding-bottom: 1.5rem !important
}

.pb-5 {
    padding-bottom: 3rem !important
}

.ps-0 {
    padding-left: 0 !important
}

.ps-1 {
    padding-left: .25rem !important
}

.ps-2 {
    padding-left: .5rem !important
}

.ps-3 {
    padding-left: 1rem !important
}

.ps-4 {
    padding-left: 1.5rem !important
}

.ps-5 {
    padding-left: 3rem !important
}

.font-monospace {
    font-family: var(--bs-font-monospace) !important
}

.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important
}

.fs-2 {
    font-size: calc(1.325rem + .9vw) !important
}

.fs-3 {
    font-size: calc(1.3rem + .6vw) !important
}

.fs-4 {
    font-size: calc(1.275rem + .3vw) !important
}

.fs-5 {
    font-size: 1.25rem !important
}

.fs-6 {
    font-size: 1rem !important
}


.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: calc(-1*var(--bs-gutter-y));
}

.row>* {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: var(--bs-gutter-y)
}

.gradient-bg {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.8) 40%,
            rgba(0, 0, 0, 0) 100%);
}

.\[border-left\:1px_solid_rgb\(var\(--color-concrete-200\)\)\] {
    border-left: 1px solid rgb(var(--color-concrete-200))
}

.\[mask-image\:linear-gradient\(180deg\2c black_calc\(100\%-150px\)\2c transparent\)\] {
    -webkit-mask-image: -webkit-linear-gradient(top, #000 -webkit-calc(100% - 150px), transparent);
    mask-image: linear-gradient(180deg, #000 -moz-calc(100% - 150px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 150px), transparent)
}

.group\/menuli.is-active .group-\[\&\.is-active\]\/menuli\:opacity-100 {
    opacity: 1;
}

.group\/menuli.is-active .group-\[\&\.is-active\]\/menuli\:text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.group\/menuli.is-active .group-\[\&\.is-active\]\/menuli\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.logo-button {
    border-radius: 10px;
    padding: 20px;
    background-color: #101010;
    box-shadow: inset 0px 0px 11px 8px #252525;
    width: 145px;
    object-fit: contain;
    transition: all .5s ease;
}

.logo-button:hover {
    transform: scale(1.05);
    box-shadow: inset 0px 0px 13px 15px #1b1b1b;
}


.vps-scripts-wrapper {
    border-radius: 10px;
    padding-left: 40px;
    padding-right: 40px
}

.vps-script-item {
    /* border: 1px solid rgba(220, 220, 220, .5); */
    padding: 25px;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 0 20px #000000
}

.vps_scripts_slider_wrapper {
    overflow: hidden;
    padding: 0 20px
}

.vps_scripts_slider_wrapper .vps-scripts-slider .swiper-control-btn {
    position: absolute;
    left: -15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    background: #001042;
    color: #fff;
    z-index: 10;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in
}

.vps_scripts_slider_wrapper .vps-scripts-slider .swiper-control-btn.swiper-next {
    right: -15px;
    left: auto
}

.vps_scripts_slider_wrapper .vps-scripts-slider .swiper-control-btn:hover {
    background: #074d9d
}

.vh-100 {
    height: 100vh !important;
}

.articleSwiper .swiper-slide {
    opacity: 0.4;
}

.articleSwiper .swiper-slide.swiper-slide-active {
    opacity: 1;
}

/* Swiper Navigation */
.swiper-button-next.article-button-next,
.swiper-button-prev.article-button-prev {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.swiper-button-prev.article-button-prev {
    left: 10px;
    right: auto
}

.swiper-button-next.article-button-next {
    right: 10px;
    left: auto
}

.swiper-button-next.article-button-next:after,
.swiper-button-prev.article-button-prev:after {
    font-size: 20px;
    color: white;
    font-weight: 900;
}

.swiper-button-next.article-button-next:hover,
.swiper-button-prev.article-button-prev:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Pagination */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: linear-gradient(135deg, #ff4444, #ff8844);
    width: 30px;
    border-radius: 6px;
}

.creative-cards {
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.creative-cards .row {
    display: flex;
    flex-wrap: wrap;
}

.creative-cards .row .card-column {
    flex: 0 0 auto;
    text-align: center;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.creative-cards .card-details {
    width: 100%;
    margin: auto;
    position: relative;
    align-content: center;
    z-index: 0;
    padding: 10px;
    transition: .3s ease-in-out;
}

.creative-cards .card-details:before {
    content: "";
    /* width: 170px;
    height: calc(100% - 20px); */
    /* background: #000; */
    /* border: 1px solid #2b2b2b; */
    border-radius: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: .3s ease-in-out;
    width: 100%;
    height: 100%;
    background: url('../img/logo/collective-icon-color.png') center/contain no-repeat;
    background-size: auto 70%;
    opacity: 0.2;
    border-radius: 15px;
}

.creative-cards .card-details:hover:before {
    box-shadow: 0 0 40px #eb4c41b2;
}

.creative-cards .card-details h3 {
    margin-bottom: 15px;
    margin-top: 30px;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: rgb(255, 255, 255, 0.8);
}

.creative-cards .card-details h3 a {
    color: #000;
    text-decoration: none;
}

.creative-cards .card-details p {
    font-size: 15px;
    line-height: 30px;
    color: #444;
    font-weight: 400;
    margin-bottom: 30px;
    color: rgb(255, 255, 255, 0.5);
}

.creative-cards .read-more-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-radius: 100%;
    /* margin: auto; */
    background: #171717;
    transform: translateX(-10px);
    opacity: 0;
    visibility: hidden;
    border-color: #c3c3c3;
    transition: .3s ease-in-out;
    text-decoration: none;
    position: absolute;
    bottom: -25px;
    left: 50%;
}

.creative-cards .read-more-btn i {
    color: #ffffff;
    font-size: 12px;
}

.creative-cards .card-details:hover .read-more-btn {
    /* transform: translateX(0); */
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
}


/* List */
.our-service-list ul {
    counter-reset: index;
    padding: 0;
    /* max-width: 300px; */
    list-style: none;
}

/* List element */
.our-service-list ul li {
    counter-increment: index;
    display: flex;
    align-items: center;
    padding: 12px 0;
    box-sizing: border-box;
    color: rgb(255, 255, 255, 0.8);
}

/* Element counter */
.our-service-list ul li::before {
    content: counters(index, ".", decimal-leading-zero);
    font-size: 1.5rem;
    text-align: right;
    font-weight: bold;
    min-width: 50px;
    padding-right: 12px;
    font-variant-numeric: tabular-nums;
    background-image: linear-gradient(to bottom, orangered, rgb(255, 255, 255));
    background-attachment: fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Element separation */
.our-service-list ul li+li {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.tab-active {
    border-bottom: 3px solid #393939;
    z-index: 1;
}

.title-field {
    padding-bottom: 15px;
    color: #393939
}

.tab-active.title-field {
    color: #fff;
}

.tab-content {
    display: none;
    animation: fadeIn .3s;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.contact-circle {
    position: relative;
    z-index: 1;
}

.contact-circle:after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    background-color: #181818;
    border-radius: 15px;
    z-index: -1;
    box-shadow: inset 0px 0px 35px 11px #252525;
}

@media (max-width:1400px) {
    /* .cookie-alert {
        left: 30% !important;
    } */

    .xl\:text-5\.5 {
        font-size: 1.375rem;
    }

    .xl\:text-7 {
        font-size: 1.75rem;
    }

}

@media (max-width: 1280px) {
    .lg\:text-5 {
        font-size: 1.25rem;
    }

    .lg\:text-6 {
        font-size: 1.5rem;
    }

    .lg\:gap-5 {
        gap: 1.25rem;
    }
}

@media (max-width: 1024px) {
    .md\:mt-5 {
        margin-top: 1.25rem;
    }

    .md\:text-5 {
        font-size: 1.25rem;
    }

    .md\:gap-4 {
        gap: 1rem;
    }
}

@media (max-width:900px) {
    /* .cookie-alert {
        left: 25% !important;
    } */

    .editor h1 {
        font-size: 50px;
    }

    .editor h5 {
        font-size: 25px;
    }

    .editor p {
        font-size: 20px;
        margin-top: 30px !important;
    }
}

@media (max-width:850px) {
    /* .cookie-alert {
        left: 20% !important;
    } */
}

@media (max-width:767px) {
    .cookie-alert {
        left: 10px !important;
        width: calc(100% - 20px);
    }

    .sm\:text-4 {
        font-size: 1rem;
    }
}

@media (max-width:680px) {
    .cookie-alert {
        left: 10px !important;
        width: calc(100% - 20px);
    }
}

@media (max-width: 575.98px) {
    .vps-scripts-wrapper {
        padding-left: 15px;
        padding-right: 15px
    }
}

@media (max-width: 480px) {
    .creative-cards .row .card-column {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 20px;
    }

    .creative-cards .card-details {
        width: 100%;
    }

    .creative-cards .read-more-btn {
        transform: translateX(0px);
        opacity: 1;
        visibility: visible;
    }
}


@media (min-width: 576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap
    }

    .card-group>.card {
        flex: 1 0 0%;
        margin-bottom: 0
    }

    .card-group>.card+.card {
        margin-left: 0;
        border-left: 0
    }

    .card-group>.card:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .card-group>.card:not(:last-child) .card-header,
    .card-group>.card:not(:last-child) .card-img-top {
        border-top-right-radius: 0
    }

    .card-group>.card:not(:last-child) .card-footer,
    .card-group>.card:not(:last-child) .card-img-bottom {
        border-bottom-right-radius: 0
    }

    .card-group>.card:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .card-group>.card:not(:first-child) .card-header,
    .card-group>.card:not(:first-child) .card-img-top {
        border-top-left-radius: 0
    }

    .card-group>.card:not(:first-child) .card-footer,
    .card-group>.card:not(:first-child) .card-img-bottom {
        border-bottom-left-radius: 0
    }
}

@media (min-width: 768px) {
    .col-md {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%
    }


    .col-md-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-md-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-md-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-md-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .col-md-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-md-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-md-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width: 992px) {
    .creative-cards .row .card-column {
        flex: 0 0 auto;
        /* margin-bottom: 40px; */
    }

    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: 100%
    }

    .col-lg-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        width: none
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        width: 8.333333%
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        width: 16.666667%
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        width: 25%
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        width: 33.333333%
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        width: 41.666667%
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        width: 50%
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        width: 58.333333%
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        width: 66.666667%
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        width: 75%
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        width: 83.333333%
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        width: 91.666667%
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        width: 100%
    }
}

@media (min-width:1400px) {
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }

}