/* ===================================
    Crafto - Data analysis
====================================== */
/* font */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

/* variable */
:root {     
    --base-color: #1a74ff;
    --medium-gray:#797A8C;
    --dark-gray:#353642;
    --alt-font: 'Ubuntu', sans-serif;
    --primary-font: 'Ubuntu', sans-serif;
}  
body {
    font-size: 17px;
    line-height: 30px;
}
a:hover {
    color: #000;
    text-decoration: none;
}
.google-maps-link a:hover {
    color: var(--white);
}

/* header */
header .navbar-brand img {
    max-height: 46px; /* Largest size for desktop - increased 15% total */
    transition: all 0.3s ease;
}
.navbar.border-bottom {
    border-bottom: 1px solid transparent !important;
}
.navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 100;
    color: black;
}
.navbar .navbar-nav .nav-link:hover {
    color: black !important;
    font-weight: 500;
}
/* Active/Current page styling */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-item.active .nav-link {
    font-weight: 500 !important;
    color: black;
}
/* Mobile menu floating animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Mobile menu image fade out first when closing */
.navbar-collapse.collapsing .mobile-menu-image-container {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0s ease-in !important;
}



header .left-nav .navbar-nav:before {
    background-color: #000000;
    opacity: 0.95;  
}

/* Mobile menu additional styling */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--base-color);
    }
}
.btn.btn-switch-text.btn-large > span {
    padding:7px 14px;
}
/* bg color */
.bg-blue-wabi {
    background-color: #F4F6FF;
}
.bg-purpule01-wabi {
    background-color: #F2FBF9;
}
.bg-purple02-wabi {
    background: linear-gradient(to bottom, #B43CFF, #ffffff);
}
.bg-purple03-wabi {
    background: linear-gradient(to bottom, #D976FC, #ffffff);
}

.bg-cabaret-red {
    background-color: #5a4fd9;
}
.bg-ghost-white{
    background-color: #F4F6FF;
}
.bg-cosmic-latte-white{
    background-color: #F2FBF9;
}
.bg-chablis-red{
    background-color: #FEF3F5;
}
.bg-lavender-violet{
    background-color: #F5EDFC;
}
.bg-clear-green {
    background-color: #E9F6F5;
}
.bg-linen-white {
    background-color: #FBF3EE;
}
.bg-lavender-violet-light {
    background-color: #ECF7FC;
}
.bg-midnight-blue {
    background-color: #242e45;
}

.bg-gradient-flamingo-amethyst-green {
    background-image: linear-gradient(to bottom, #1a74ff, #6f8bff, #9ba3ff, #bebeff, #dcd9ff, #e8e5ff, #f4f2ff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
}
.bg-gradient-very-light-gray {
    background-image: linear-gradient(to bottom, #1a74ff, #6f8bff, #9ba3ff, #bebeff, #dcd9ff, #e8e5ff, #f4f2ff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
}
.bg-gradient-very-ghost-white {
    background-image: linear-gradient(to bottom, #1a74ff, #6f8bff, #9ba3ff, #bebeff, #dcd9ff, #e8e5ff, #f4f2ff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
}

/* heading */
h1, .h1 {
    line-height: 4.1rem;
}
h2 {
    line-height: 3.2rem;
}
/* btn */
.btn.btn-hover-animation-switch.btn-link {
    padding-top: 0;
}
.btn i {
    margin-left: 4px;
}
.btn { 
    text-transform: inherit;
    font-weight: 600;
    letter-spacing: 0;
}
.btn.btn-extra-large {
    font-size: 18px;
    padding: 16px 32px;
}
.btn.btn-large {
    font-size: 17px;
    padding: 14px 28px;
}
.btn.btn-medium {
    font-size: 16px; 
    padding: 12px 24px;
}
.btn.btn-small {
    font-size: 15px; 
    padding: 10px 18px;
}
.btn.btn-very-small {
    font-size: 14px; 
    padding: 9px 20px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
/* left right top */
.top-20 {
    top: 20%;
}
.top-30 {
    top: 30%;
}
.top-minus-180px {
    top: -180px;
}
.left-40 {
    left: 40%;
}
.right-10 {
    right: 10%;
}
/* pricing table style 04 */
.pricing-table-style-04 .accordion-item.active-accordion {
    background-color: var(--dark-gray) !important;
}
/* process-step style 05 */
.process-step-style-05 .progress-step-separator {
    bottom: inherit;
    height: 100%;
}
.team-style-01 figure figcaption .social-icon a {
    margin: 0 7px;
}
/* page title style */
.page-title-button-style h1 {
    padding: 5px 20px;
    display: inline-block;
    font-size: 12px;
}
.page-title-extra-small h2 {
    font-size: 3.438rem;
    line-height: 3.2rem;
}
/* footer */
footer {
    padding-top: 100px;
    padding-bottom: 30px;
}

/* Reduce footer padding when preceded by call to action section */
.container + footer {
    padding-top: 30px;
}
footer .footer-logo img {
    max-height: 40px;
}
footer .nav-link {
    color: var(--dark-gray);
    padding: 10px 20px;
}
footer .elements-social ul li:last-child {
    margin-right: 0;
}
@media (max-width: 1350px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 16px;
        padding-right: 16px;
    }
}
@media (max-width: 1279px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (max-width: 1199px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 8px;
        padding-right: 8px;
    }
    footer {
        padding-top: 80px;
    }
}
@media (max-width: 991px) {
    footer {
        padding-top: 65px;
    }
    .md-bottom-5 {
        bottom: 5% !important;
    }
    footer .nav-link {
        padding: 5px 15px;
    }
}
@media (max-width: 767px) {
    /* Logo smaller size for mobile and tablets */
    header .navbar-brand img {
        max-height: 41px;
    }
    
    footer {
        padding-top: 35px;
    }
}
@media (max-width: 575px) {
    .xs-mt-minus-40px {
        margin-top: -40px !important;
    }
    .accordion .accordion-item .accordion-header .accordion-title {
        line-height: 28px;
    }
}

/* Hero Section Grid Layout */
.hero-cube-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.hero-cube-main {
    width: 550px;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(26, 116, 255, 0.15));
    transition: all 0.3s ease;
    animation: gentleFloat 6s ease-in-out infinite;
}

.hero-cube-main:hover {
    transform: scale(1.05);
}

/* Floating animation for cube */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(2deg);
    }
    50% {
        transform: translateY(-10px) rotate(0deg);
    }
    75% {
        transform: translateY(-20px) rotate(-2deg);
    }
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .hero-cube-main {
        width: 500px;
    }
}

@media (max-width: 991px) {
    .hero-cube-container {
        min-height: 500px;
        margin-bottom: 30px;
    }
    
    .hero-cube-main {
        width: 450px;
    }
}

@media (max-width: 767px) {
    .hero-cube-container {
        min-height: 450px;
        margin-bottom: 20px;
    }
    
    .hero-cube-main {
        width: 450px;
    }
}

@media (max-width: 575px) {
    .hero-cube-main {
        width: 420px;
    }
}

/* Mobile-first responsive images for section positioning */
.section-mobile-img {
    width: 60px;
    height: auto;
    margin: 10px auto;
    display: block;
    animation: smoothFloat 4s ease-in-out infinite;
}

.section-left-img {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    object-fit: contain;
}

.section-right-img {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    object-fit: contain;
}

/* Section positioning container */
.section-image-container {
    position: relative;
    z-index: 2;
}

/* Make mission image 50% of its container (10% smaller from previous) */
.mission-image-container .responsive-mission-image {
    width: 50% !important;
    max-width: 50% !important;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Progressive reductions on smaller viewports */
@media (max-width: 1199px) {
    .mission-image-container .responsive-mission-image {
        width: 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 991px) {
    .mission-image-container .responsive-mission-image {
        width: 45% !important;
        max-width: 45% !important;
    }
}

@media (max-width: 767px) {
    .mission-image-container .responsive-mission-image {
        width: 40% !important;
        max-width: 40% !important;
    }
}

@media (max-width: 575px) {
    .mission-image-container .responsive-mission-image {
        width: 40% !important;
        max-width: 40% !important;
    }
}

/* Responsive image for Our Mission section */
.mission-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
}
/* responsive-mission-image defaults are controlled via container rule above */
.responsive-mission-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* removed fixed small-viewport width to allow container-based sizing */

/* Responsive adjustments for section images */
@media (max-width: 767px) {
    .mobile-images-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        margin-bottom: 20px;
    }
    
    .section-left-img,
    .section-right-img {
        position: static;
        transform: none;
        display: block;
        width: 80px !important;
        height: 80px !important;
        min-width: 80px;
        min-height: 80px;
        max-width: 80px;
        max-height: 80px;
    }
    
    .section-mobile-img {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px;
        min-height: 80px;
        max-width: 80px;
        max-height: 80px;
        object-fit: contain;
    }
}

@media (min-width: 768px) {
    .section-mobile-img {
        width: 100px;
    }
}

@media (min-width: 992px) {
    .section-left-img {
        left: -20px;
    }
    
    .section-right-img {
        right: -50px;
    }
}

@media (min-width: 1200px) {
    .section-left-img {
        left: -30px;
    }
    
    .section-right-img {
        right: -60px;
    }
}

/* Background dots color control */
.bg-dots-left {
    filter: hue-rotate(0deg) brightness(1) contrast(1);
    /* Change hue-rotate value to modify color:
       0deg = original color
       90deg = green tint
       180deg = opposite color
       270deg = purple tint */
}

.bg-dots-right {
    filter: hue-rotate(0deg) brightness(1) contrast(1);
    /* Modify these values to change the right dots color */
}

/* Alternative: Specific color overlays */
.bg-dots-blue {
    filter: hue-rotate(210deg) saturate(1.5) brightness(0.8);
}

.bg-dots-purple {
    filter: hue-rotate(270deg) saturate(1.2) brightness(0.9);
}

.bg-dots-green {
    filter: hue-rotate(90deg) saturate(1.3) brightness(0.85);
}

.bg-dots-red {
    filter: hue-rotate(0deg) saturate(1.4) brightness(0.9);
}

/* Smooth floating animation for section images */
@keyframes smoothFloat {
    0%, 100% {
        transform: translateY(-50%);
    }
    25% {
        transform: translateY(calc(-50% - 8px));
    }
    50% {
        transform: translateY(calc(-50% - 12px));
    }
    75% {
        transform: translateY(calc(-50% - 5px));
    }
}

/* Alternative smooth floating animation with different rhythm */
@keyframes smoothFloatAlt {
    0%, 100% {
        transform: translateY(-50%);
    }
    33% {
        transform: translateY(calc(-50% - 10px));
    }
    66% {
        transform: translateY(calc(-50% - 6px));
    }
}

/* Firefox specific fixes for video rendering */
@-moz-document url-prefix() {
    .hero-cube-main {
        transform: none !important;
        animation: none !important;
        filter: none !important;
        will-change: auto !important;
    }
    
    .hero-cube-main:hover {
        transform: scale(1.02) !important;
    }
}

/* Alternative CSS for Firefox */
@supports (-moz-appearance: none) {
    .hero-cube-main {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
    }
}
.contact-img-optimized {
            width: 280px; /* 180px + 10% */
            height: auto;
            max-width: 100%;
            transition: width 0.2s;
        }
        @media (max-width: 991px) {
            .contact-img-optimized {
                width: 200px; /* 120px + 10% */
            }
        }
        @media (max-width: 575px) {
            .contact-img-optimized {
                width: 300px; /* 90px + 10% */
            }
        }