/* ============================================================
   AXCEL COMPANY - Static HTML Theme CSS
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Rubik:wght@400;700;800&family=Nunito:wght@400;700&family=Poppins:wght@400;500;600&family=Lora:ital,wght@0,400;1,700&display=swap');

/* ---- Base ---- */
body, .logo-text {
    font-family: 'Manrope', sans-serif !important;
}
h1, h2 {
    font-family: 'Rubik', sans-serif !important;
}
h3 {
    font-family: 'Nunito', sans-serif !important;
}
.logo-text { line-height: 1; }
.axel-text { font-size: 14px; }
.text-20 { font-size: 16px; }
p, .p, .nav, .dropdown-item, li {
    font-family: 'Poppins', sans-serif !important;
    margin: 0;
}

/* ---- Brand Colors ---- */
.axel-bg-orange  { background-color: #ff6341; color: #fff !important; }
.axel-btn-orange { background-color: #ff6341 !important; color: #fff !important; }
.axel-bg-blue    { background-color: #152039; }
.axel-text-orange { color: #ff6341; }
.axel-text-blue   { color: #152039; }
.axel-text-blue-2 { color: #a7d2dd; }
.axel-bg-blue-2   { background-color: #a7d2dd; border-color: #a7d2dd; }

/* ---- Icon sizes ---- */
.axel-nav-icon   { width: 18px; }
.axel-top-icon,
.axel-bottom-icon { width: 20px; }
.icon-env  { width: 22px !important; }
.icon-map  { width: 40px !important; }
.axel-social-icon {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #152039;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s;
}
.axel-social-icon:hover { background-color: #ff6341; color: #fff; }

/* ---- Dropdown on hover (desktop) ---- */
@media (min-width: 950px) {
    .dropdown:hover > .dropdown-menu { display: block !important; }
    .dropdown > .dropdown-toggle:active { pointer-events: none !important; }
}

/* ---- Hero / Card ---- */
.axel-hero-slider { height: 700px !important; }
.axel-box:hover { box-shadow: 0 0 15px 0 rgba(0,0,0,0.09) !important; }
.axel-box:hover .axel-box-icon { color: #ff6341 !important; }
.imgAnim { -webkit-transition: all 400ms; transition: all 400ms; }
.imgAnim:hover { transform: scale(1.02); transition: transform 0.5s ease-in-out; }

/* ---- Block decoration ---- */
.axel-block1:hover .axel-block2 { top: -90px; background: #0dcaf0; }
.blockEffect {
    background: #fc653f;
    height: 100px;
    border-radius: 50px;
    width: 100px !important;
    position: relative;
    top: -100px;
    right: -100px;
    z-index: 1;
}

/* ---- Footer ---- */
.axel-footer-bg {
    background: linear-gradient(120deg, #3c62e9 7%, #3c62e9 74%, #3c62e9 100%);
    padding: 50px 0 20px;
}
.nav-link, footer p { font-size: 17px !important; }
.unstyled li { list-style-type: none; }

@media (max-width: 950px) {
    footer p { text-align: center; }
    #navScroll { display: none !important; }
    .navbar-nav #dropLink {
        position: relative;
        left: -47% !important;
        min-width: 100%;
        margin-bottom: 40px;
    }
}

/* ---- Scroll navbar ---- */
#navScroll { display: none; }

/* ---- Footer SVG shapes ---- */
.axel-row, .axel-inner_row, .axel-row-holder, .axel-col, .axel-col-holder {
    box-sizing: border-box;
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    align-content: stretch;
    position: relative;
}
.axel-row-shape {
    width: 100%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    line-height: 0;
    overflow: hidden;
}
.axel-row-svg { position: relative; height: 100%; }
.axel-row-svg svg { width: 100%; position: absolute; }
.axel-row-svg svg.axel-svg-top { top: -1px; }
.axel-row-svg svg.axel-svg-bottom { bottom: -1px; }
.axel1 .axel-row-svg .axel-svg-top { width: 100%; height: 328px; }
.axel1 .axel-row-svg .axel-svg-bottom { width: 100%; height: 448px; transform: rotateY(180deg); }
.axel1 .axel-svg-top .axel-shape-fill { fill: rgba(71,16,145,0.16); }
.axel1 .axel-svg-bottom .axel-shape-fill { fill: rgba(71,16,145,0.14); }
.axel1 {
    background: linear-gradient(120deg, #3c62e9 7%, #3c62e9 74%, #3c62e9 100%);
    padding: 50px 0 150px;
}
@media (max-width: 768px) and (min-width: 501px) {
    .axel1 { padding: 60px 40px 120px; }
}
@media (max-width: 500px) {
    .axel1 { padding: 50px 30px 100px; }
}

/* ---- Footer content ---- */
#footer-content { z-index: 9999 !important; }

/* ---- Brevo iframe ---- */
.brevoIfram {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* ---- Button focus ---- */
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
    outline: 0 !important;
    box-shadow: none !important;
}

/* ---- Card styles ---- */
.card-title {
    font-family: 'Lora', serif !important;
    font-size: 20px;
}
.card {
    opacity: 0;
    transform: translateY(-50px);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.card.animate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--animation-delay, 0.1s);
}
.card:hover {
    transition: transform 0.3s ease-out !important;
    transform: scale(1.05);
}
.card:hover .icon3 { color: #0dcaf0; }

/* ---- Page Hero ---- */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.477), rgba(0,0,0,0.563)), url('../assets/images/axcel-hero-bg-interne.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.hero-image {
    border-radius: 300px 150px 200px 200px;
    -webkit-border-radius: 300px 150px 200px 200px;
}

/* ---- Performance section image ---- */
.perf-img {
    border-radius: 200px 200px 150px 300px !important;
    -webkit-border-radius: 200px 200px 150px 300px;
    will-change: transform;
}
.perf-w75 { width: 75% !important; }
@media (max-width: 992px) {
    .perf-w75 { width: 100% !important; }
}

/* ---- Properties section ---- */
.prop-img {
    border-radius: 150px 200px 300px 200px;
    -webkit-border-radius: 150px 200px 300px 200px;
}
.prop-icon { width: 75%; }
.prop-box:hover .prop-icon { color: #ff6341 !important; }
@media (max-width: 950px) {
    .prop-icon { width: 20%; }
}
.prop-border { border-color: #0000002d !important; }

/* ---- About section ---- */
.about-icon-box { color: #152039; width: 10%; }
@media (max-width: 950px) {
    .about-icon-box { width: 50%; }
}
.about-box:hover .about-icon-box { color: #ff6341; }

/* ---- Icon2 (service cards) ---- */
.icon2 { width: 50px; height: 50px; }

/* ---- Vision bg ---- */
.vision-bg {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M790.5%2C93.1c-59.3-5.3-116.8-18-192.6-50c-29.6-12.7-76.9-31-100.5-35.9c-23.6-4.9-52.6-7.8-75.5-5.3c-10.2%2C1.1-22.6%2C1.4-50.1%2C7.4c-27.2%2C6.3-58.2%2C16.6-79.4%2C24.7c-41.3%2C15.9-94.9%2C21.9-134%2C22.6C72%2C58.2%2C0%2C25.8%2C0%2C25.8V100h1000V65.3c0%2C0-51.5%2C19.4-106.2%2C25.7C839.5%2C97%2C814.1%2C95.2%2C790.5%2C93.1z%22%20fill%3D%22rgba(31%2C18%2C188%2C0.26)%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
}

/* ---- Box count circles ---- */
.box-count {
    width: 138px;
    height: 138px;
}

/* ---- Preloader ---- */
#preloader {
    position: fixed;
    inset: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.4s ease;
}
#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ---- Counter numbers ---- */
.counter-number { font-size: 2.5rem; font-weight: 800; }