/*
Theme Name: Via Rail Engineering
Description: Via Rail Engineering
Author: Ocreative
Author URI: https://www.ocreative.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* Text Styling */

.white-text h1, .white-text h2, .white-text h3, .white-text h4, .white-text h5, .white-text h6, .white-text p, .white-text li, .white-text .vfb-control-label, .white-text {
	color:#FFF !important;
}

.white-links a {color:#FFF !important;}
.white-links a:hover {color:#5899d7 !important;}

.large-bold strong {font-size:21px !important; line-height:27px !important; text-transform:uppercase !important; font-weight:900 !important;}

.white-outline-button {
    background:transparent !important;
    border:2px solid #FFF !important;
    color:#FFF !important;
    padding:8px 5px !important;
    display:inline-block !important;
	margin-top:15px !important;
	font-weight:500 !important;
	text-transform:uppercase !important;
	width:260px !important;
	text-align:center !important;
}

.white-outline-button:hover {
    color:#000 !important;
    border:2px solid #000 !important;
	background-color:#FFF !important;
}

.blue-button {
    background:#475da8 !important;
    border:2px solid #475da8 !important;
    color:#FFF !important;
    padding:8px 5px !important;
    display:inline-block !important;
	margin-top:15px !important;
	font-weight:500 !important;
	text-transform:uppercase !important;
	width:260px !important;
	text-align:center !important;
}

.blue-button:hover {
    color:#475da8 !important;
    border:2px solid #475da8 !important;
	background-color:#FFF !important;
}

.double-button a {margin-right:15px !important;}

/* Custom Bullet List */

.check-list li {
    background: url(/wp-content/uploads/2026/09/vre_icon_checkmark_38x38@2x.png) no-repeat 0px 0px transparent;
	background-size:38px !important;
    list-style-type: none;
    margin: 0;
    padding: 2px 0px 12px 49px;
    vertical-align: middle;
}

/* Homepage */

#fusion-scroll-section-nav-1 {display:none !important;}

.section-marker p {
	font-size:21px !important; 
	line-height:27px !important; 
	text-transform:uppercase !important;
	font-weight:900 !important;
	margin-bottom:0px !important;
}

.footer-block .section-marker p {margin-top:0px !important;}

.benefits-text p {
	color:#294e78 !important;
	font-size:19px !important; 
	line-height:25px !important; 
	text-transform:uppercase !important;
	font-weight:800 !important;
}

.larger-h2 h2 {font-size:58px !important; line-height:64px !important;}
.practical-project-delivery h4 {margin-bottom:5px !important;}

div.wpforms-container-full button[type=submit] {color:#294e78 !important; padding:5px 34px !important; text-transform:uppercase !important; border-radius:0px !important; font-weight:600 !important;}
div.wpforms-container-full button[type=submit]:hover {background-color:#639bd6 !important; color:#FFF !important;}
div.wpforms-container-full .wpforms-field-label {color:#FFF !important; font-weight:300 !important;}
div.wpforms-container-full textarea, div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=text] {
	background:transparent !important;
	color:#FFF !important;
	border:2px solid #FFF !important;
}

/* =========================================================
   RAIL SERVICES ACCORDION
   ========================================================= */

.rail-services-accordion {
    --rail-bg: #394985;
    --rail-divider: #495ca8;
    --rail-text: #ffffff;
    --rail-blue: #294e78;

    width: 100%;
    background: var(--rail-bg);
}


/* =========================================================
   EACH ACCORDION ITEM
   ========================================================= */

.rail-service-item {
    position: relative;
    background: var(--rail-bg);
    border-bottom: 12px solid var(--rail-divider);
}

.rail-service-item:last-child {
    border-bottom: 0;
}


/* =========================================================
   CLICKABLE CLOSED HEADER
   ========================================================= */

.rail-service-toggle {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    width: calc(100% - 80px);
    max-width: 1420px;
    min-height: 138px;

    margin: 0 auto;
    padding: 30px 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--rail-text);
    text-align: center;

    cursor: pointer;
}


/* =========================================================
   NUMBER ICON
   ========================================================= */

.rail-service-number {
    display: block;
    flex: 0 0 auto;

    width: 48px;
    height: auto;

    object-fit: contain;

    transition:
        width 0.35s ease,
        left 0.35s ease,
        top 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   CLOSED HEADING
   ========================================================= */

.rail-service-heading {
    display: block;

    color: var(--rail-text);

    font-size: 29px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;

    transition:
        font-size 0.35s ease,
        transform 0.35s ease,
        opacity 0.2s ease;
}


/* Hover */

.rail-service-toggle:hover .rail-service-heading {
    color:#5899d7 !important
}


/* Keyboard focus */

.rail-service-toggle:focus-visible {
    outline: 2px solid #59ace3;
    outline-offset: -4px;
}


/* =========================================================
   OPEN HEADER
   ========================================================= */

.rail-service-item.is-open .rail-service-toggle {
    min-height: 145px;

    padding-top: 42px;
    padding-bottom: 25px;
}


/*
Move number graphic toward the far left while allowing
the heading to remain independently centered.
*/

.rail-service-item.is-open .rail-service-number {
    position: absolute;

    left: 0;
    top: 42px;

    width: 48px;
}


/* Enlarged open heading */

.rail-service-item.is-open .rail-service-heading {
    font-size: clamp(42px, 4vw, 58px);
}


/* =========================================================
   ACCORDION OPEN / CLOSE ANIMATION
   ========================================================= */

.rail-service-collapse {
    display: grid;
    grid-template-rows: 0fr;

    visibility: hidden;

    transition:
        grid-template-rows 0.5s ease,
        visibility 0.5s;
}

.rail-service-collapse-inner {
    overflow: hidden;
}

.rail-service-item.is-open .rail-service-collapse {
    grid-template-rows: 1fr;

    visibility: visible;
}


/* =========================================================
   EXPANDED CONTENT
   ========================================================= */

.rail-service-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 1fr);

    align-items: center;

    gap: clamp(60px, 7vw, 115px);

    width: calc(100% - 80px);
    max-width: 1420px;

    margin: 0 auto;

    padding: 15px 0 65px;
}


/* =========================================================
   IMAGE
   ========================================================= */

.rail-service-image {
    width: 100%;
}

.rail-service-image img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    object-fit: cover;
}


/* =========================================================
   TEXT COLUMN
   ========================================================= */

.rail-service-copy {
    width: 100%;
    max-width: 560px;
}

.rail-service-copy p {
    margin: 0 0 36px;

    color: var(--rail-text);

    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================================
   BUTTON
   ========================================================= */

.rail-service-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    background: transparent;
	border:2px solid #FFF;
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.rail-service-button:hover {
    color:#495ca8 !important;
	border:2px solid #495ca8 !important;
	background-color:#FFF !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .rail-service-toggle,
    .rail-service-content {
        width: calc(100% - 60px);
    }

    .rail-service-content {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .rail-service-item.is-open .rail-service-heading {
        font-size: clamp(36px, 4.5vw, 48px);
    }

}


/* =========================================================
   SMALL TABLET / MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .rail-service-item {
        border-bottom-width: 8px;
    }


    /* Closed accordion heading */

    .rail-service-toggle {
        justify-content: flex-start;

        width: 100%;
        min-height: 95px;

        padding: 22px 25px;

        gap: 18px;

        text-align: left;
    }

    .rail-service-number {
        width: 38px;
    }

    .rail-service-heading {
        font-size: 21px;
    }


    /* Open accordion heading */

    .rail-service-item.is-open .rail-service-toggle {
        min-height: 105px;

        padding: 25px;
    }


    /*
    Keep the number inline on mobile instead of
    sending it to the far-left edge.
    */

    .rail-service-item.is-open .rail-service-number {
        position: static;

        width: 42px;
    }

    .rail-service-item.is-open .rail-service-heading {
        font-size: 26px;
    }


    /* Stack content */

    .rail-service-content {
        grid-template-columns: 1fr;

        width: 100%;

        gap: 28px;

        padding:
            0
            25px
            40px;
    }

    .rail-service-copy {
        max-width: none;
    }

    .rail-service-copy p {
        margin-bottom: 25px;

        font-size: 16px;
        line-height: 1.5;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .rail-service-toggle {
        padding-left: 20px;
        padding-right: 20px;
    }

    .rail-service-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .rail-service-heading {
        font-size: 18px;
    }

    .rail-service-item.is-open .rail-service-heading {
        font-size: 23px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .rail-service-collapse,
    .rail-service-number,
    .rail-service-heading,
    .rail-service-button {
        transition: none;
    }

}


/********************    INDUSTRIES SERVED - EXPANDING COLUMNS ***************/


/* =========================================================
   DESKTOP
   ========================================================= */

@media only screen and (min-width: 1025px) {

    /*
     * Make each group of four Avada columns behave
     * as one flex row.
     */
    .industries-served-row > .fusion-builder-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }


    /*
     * OUTER AVADA COLUMN
     *
     * Controls the expanding / shrinking width.
     */
    .industries-served-row .industries-served-block {
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0;

        transition:
            flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
            flex-basis 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }


    /*
     * ACTIVE COLUMN
     *
     * Active = approximately 40%
     * Others = approximately 20%
     */
    .industries-served-row .industries-served-block.is-active {
        flex-grow: 2 !important;
    }


    /* =====================================================
       INNER AVADA COLUMN WRAPPER
       ===================================================== */

    /*
     * Avada applies the padding to .fusion-column-wrapper.
     *
     * Fixed desktop height prevents the subtle vertical
     * shake when a block closes.
     */
    .industries-served-row
    .industries-served-block > .fusion-column-wrapper {

        box-sizing: border-box;

        height: 405px !important;
        min-height: 405px;

        padding-top: 300px !important;
        padding-bottom: 20px !important;

        /*
         * Keep heading/content anchored from the top.
         * This prevents the heading from moving during
         * the animation.
         */
        justify-content: flex-start !important;

        /*
         * Prevent animated content from affecting
         * the outer card height.
         */
        overflow: hidden;

        /*
         * Don't animate the padding.
         * The horizontal expansion is the main animation.
         */
        transition: none;
    }


    /*
     * ACTIVE WRAPPER
     *
     * Keep the top padding identical so the heading
     * stays planted.
     *
     * Reduce bottom padding to make room for the text.
     */
    .industries-served-row
    .industries-served-block.is-active > .fusion-column-wrapper {

        padding-top: 300px !important;
        padding-bottom: 20px !important;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    /*
     * Prevent the heading itself from stretching
     * or participating in any flex sizing.
     */
    .industries-served-row .industries-served-header {
        flex: 0 0 auto;
    }


    /* =====================================================
       CONTENT - CLOSED STATE
       ===================================================== */

    /*
     * Close the description fairly quickly.
     *
     * This gets the text out of the way before the
     * column becomes narrow enough for it to re-wrap.
     */
    .industries-served-row .industries-served-content {

        opacity: 0;
        visibility: hidden;

        max-height: 0;
        overflow: hidden;

        transform: translateY(8px);

        pointer-events: none;

        transition:
            opacity 0.12s ease,
            transform 0.18s ease,
            max-height 0.2s ease,
            visibility 0s linear 0.2s;
    }


    /* =====================================================
       CONTENT - OPEN STATE
       ===================================================== */

    /*
     * Delay the description slightly so the column
     * has already started widening before the text
     * becomes visible.
     */
    .industries-served-row
    .industries-served-block.is-active
    .industries-served-content {

        opacity: 1;
        visibility: visible;

        max-height: 160px;

        transform: translateY(0);

        pointer-events: auto;

        transition:
            max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
            opacity 0.3s ease 0.35s,
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.30s,
            visibility 0s;
    }

}



/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media only screen and (max-width: 1024px) {

    /*
     * Let Avada control responsive widths normally.
     */
    .industries-served-row .industries-served-block {
        min-height: 0;
    }


    /*
     * Remove the fixed desktop height.
     */
    .industries-served-row
    .industries-served-block > .fusion-column-wrapper {

        height: auto !important;
        min-height: 0;

        overflow: visible;
    }


    /* =====================================================
       MOBILE CONTENT - CLOSED
       ===================================================== */

    .industries-served-row .industries-served-content {

        opacity: 0;
        visibility: hidden;

        max-height: 0;
        overflow: hidden;

        transform: translateY(8px);

        pointer-events: none;

        transition:
            opacity 0.2s ease,
            transform 0.25s ease,
            max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0.4s;
    }


    /* =====================================================
       MOBILE CONTENT - OPEN
       ===================================================== */

    .industries-served-row
    .industries-served-block.is-active
    .industries-served-content {

        opacity: 1;
        visibility: visible;

        max-height: 500px;

        transform: translateY(0);

        pointer-events: auto;

        transition:
            max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.3s ease 0.08s,
            transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
            visibility 0s;
    }

}

/*********** REGULAR RESPONSIVE STYLING *****************/

@media screen and (max-width:1024px) {
	
	.double-button a {margin-right:0px !important;}
	
	h1 {font-size:40px !important; line-height:46px !important;}
	h2, .larger-h2 h2 {font-size:36px !important; line-height:42px !important;}
	h3 {font-size:30px !important; line-height:36px !important;}
	
	.fusion-footer, .fusion-footer h3 {text-align:center !important;}
	
	.lets-talk {text-align:left !important;}
	
	.top-header {text-align:center !important;}
	
	.top-header .mobile-text {display:block !important; padding-bottom:5px !important;}
	
	.top-header img {width:25% !important; text-align:center !important; padding-bottom:5px !important;}
	
}