/*
Theme Name: ALCAN Indigenous
Theme URI: https://alcanindigenous.com.au
Author: MOMO Media
Author URI: https://momomedia.com.au
Description: Lightweight custom theme for ALCAN Indigenous in Perth.
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alcan-indigenous
*/

/* 
IMPORTANT:
This file should stay minimal.
All critical CSS goes into critical.cssAll non-critical CSS should be enqueued separately.
*/

/*Do not chnage*/
html {box-sizing: border-box;}
*, *::before, *::after {box-sizing: inherit;}
body {margin: 0;font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;line-height: 1.5; color: #222;}


.e-con > .e-con-inner {width:90%;padding-inline:0;margin-inline: auto;}
@media (min-width: 1200px) {.e-con > .e-con-inner {max-width: 90%;}}
section {padding:60px 5%}
@media screen and (min-width: 670px) {section {padding:60px 0;}}
@media screen and (min-width: 1200px) {section {padding:70px 0 !important}}
@media screen and (min-width: 1400px) {section {padding:100px 0 !important}}



/* =========================
   Fonts
   ========================= */
@font-face {
    font-family: 'Poppins Black';
    src: url('assets/fonts/poppins-black.woff2') format('woff2'),
         url('assets/fonts/poppins-black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins Bold';
    src: url('assets/fonts/poppins-bold.woff2') format('woff2'),
         url('assets/fonts/poppins-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins Medium';
    src: url('assets/fonts/poppins-medium.woff2') format('woff2'),
         url('assets/fonts/poppins-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins Regular';
    src: url('assets/fonts/poppins-regular.woff2') format('woff2'),
         url('assets/fonts/poppins-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Poppins400';
    src: url('assets/fonts/Poppins-Regular-ALCAN.woff2') format('woff2');
	font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto-Bold';
    src: url('assets/fonts/noto-bold.woff2') format('woff2');
	font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto-Regular';
    src: url('assets/fonts/noto-regular.woff2') format('woff2');
	font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* =========================
   Headings
========================= */
h1 {font-family: "Noto-Bold", sans-serif !important;font-style: normal;}
h2 {font-family: "Noto-Regular", sans-serif !important;font-style: normal;}
h3 {font-family: "Poppins Medium", sans-serif !important;font-style: normal;}
p, a, li, button, quote {font-family: "Poppins400", sans-serif !important;font-style: normal;}
.elementor-button-text  {font-family: "Poppins Medium", sans-serif !important;font-style: normal;font-weight:400;font-size: 16px;}
h2 {font-weight:600; margin-top:0!important; margin-bottom:10px!important; letter-spacing:0px}
h3 {letter-spacing:0px;font-family: "Poppins400", sans-serif !important; font-weight:400;}
h2 strong,h2 b {color: var(--e-global-color-primary) !important;}

main a {color:black!important}
#img-bg p a {color:white!important}
em {font-size:15px}


/*Navigation*/
nav ul li > a i {transition: transform 0.3s ease;}
nav .hfe-menu-item:hover .sub-arrow i::before {transform: rotate(180deg);}
.hfe-menu-item i::before {display: inline-block; /* required for transform */transition: transform 0.3s ease;}
nav ul li div > a:hover i::before {transform: rotate(180deg) !important;}

#mobile-menu .hfe-flyout-wrapper .hfe-side {width:100%!important}

/* =========================
   Forms (Mobile First)
   ========================= */
form label {font-size: 14px;display: block;width: 100%;margin-bottom: 5px;}
form input,form select,form textarea {display: block !important;width: 100% !important;border-radius: 6px !important;margin-bottom: 15px;}
form select {height: 42px;}
form textarea {max-height: 130px;}
.form-row {display: flex;flex-wrap: wrap;gap: 0;margin-bottom: 0;}
.form-col {flex: 1;min-width: 250px;}
.form-row .form-col:last-child {margin-right: 0;}
form h4 {font-size: 17px;margin-bottom: 10px;}
form h4 strong {display: flex;align-items: center;gap: 10px;}
form h4 strong::after {content: "";flex: 1;border-bottom: 1px solid orange;}
textarea {background:transparent!important;}
form input {padding:10px!important}
form label {display:none!important}

button.forminator-button {background: var(--e-global-color-primary) !important;border-radius: 40px!important;padding: 15px 20px!important;}
form br {display:none!important}
h3:has(+ form) {margin:0!important}
form .forminator-button {color:black!important; font-weight:500; font-size:17px!important}



/* =========================
   Lists & Custom Bullets
   ========================= */
main ul, main ol {padding-bottom:00px !important;padding-left: 0;margin: 0;list-style: none;}
main li {display: flex;align-items: baseline;margin-bottom: 5px;}
main ul {list-style-position: outside;padding-left:0; margin-left:20px;}
main li {display: list-item;padding-left: .3em;list-style: outside;}


/* =========================
   Carousel
========================= */
.carousel-wrapper {overflow: hidden;width: 100%;}
.elementor-element.elementor-pagination-position-outside .swiper {padding-bottom: 50px !important;}

/* =========================
   Miscellaneous
========================= */
#copyright * {color: white !important;}
#orange-icons * {stroke:#f58220!important}


/* =========================
   Responsive (Mobile First)
   ========================= */
@media screen and (min-width: 670px) {
    .form-row {gap: 20px;}
}


.slide {border-radius:10px;}
.slide p:first-of-type {display: block;align-items: center;gap: 16px;}


@media screen and (min-width: 1800px) {
 h2 {font-size:38px!important;}
 h3 {font-size:27px!important;}
 main p, main li span, main li, main a {font-size:24px !important}	
}


.card h3 {transition: transform 0.3s ease;will-change: transform;}
.card:hover h3 {transform: translateY(-20px);}

.rank-math-breadcrumb * {margin:5px 0!important;font-size:15px; color:grey!important}

main .elementor-button-text {
    position: relative;
}

/* Base dot (center highlight) */
main .elementor-button-text::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 20px;
    border-radius: 50%;
    background: #FFFFFF; /* center white dot */
    vertical-align: middle;
    transition: all .35s ease;
    box-shadow: none;
}

/* Rotation */
@keyframes dotSpin {
    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(405deg);
    }
}

/* Hover orbit (all browns around white center) */
main .elementor-button:hover .elementor-button-text::after {
    animation: dotSpin 3s linear infinite;

    box-shadow:

    /* Top */
    0 -12px 0 1px #2B1600,

    /* Top Right */
    8.5px -8.5px 0 0 #4B2A00,

    /* Right */
    12px 0 0 1px #1F1200,

    /* Bottom Right */
    8.5px 8.5px 0 0 #5C3500,

    /* Bottom */
    0 12px 0 1px #3A1F00,

    /* Bottom Left */
    -8.5px 8.5px 0 0 #6B3F00,

    /* Left */
    -12px 0 0 1px #2F1800,

    /* Top Left */
    -8.5px -8.5px 0 0 #4A2900;
}


/* Make icon box wrapper relative for line positioning */
#timeline .elementor-icon-box-wrapper {
    position: relative;
}

/* Line drawn after the icon, before the text */
#timeline .elementor-widget-icon-box:not(:last-child) .elementor-icon-box-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    width: 60px; /* adjust to gap between icons */
    height: 2px;
    background: #f68a1f;
    transition: transform 0.5s ease;
}

#timeline .elementor-icon-box-icon {
    position: relative;
}
#timeline .elementor-icon-box-title {margin-top:10px!important}
/* Triggered by JS */
#timeline.is-visible .elementor-widget-icon-box:not(:last-child) .elementor-icon-box-icon::after {
    transform: translateY(-50%) scaleX(1);
}

/* Stagger each line */
#timeline.is-visible .elementor-widget-icon-box:nth-child(2) .elementor-icon-box-icon::after { transition-delay: 0.3s; }
#timeline.is-visible .elementor-widget-icon-box:nth-child(3) .elementor-icon-box-icon::after { transition-delay: 0.6s; }
#timeline.is-visible .elementor-widget-icon-box:nth-child(4) .elementor-icon-box-icon::after { transition-delay: 0.9s; }

@media screen and (min-width:768px){
	
	#timeline .elementor-icon-box-title {margin-top:20px!important}

}




@media (min-width: 1025px) {
    #trust-bar > .e-child {position: relative;}
    #trust-bar > .e-child:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 20%;
        right: 0;
        width: 1px;
        height: 60%;
        background: #FF8200;
    }

}