/*
 Theme Name:   Prime ICT
 Description:  The custom theme of the Prime ICT website.
 Author:       Connor Biddle
 Author URI:   https://connorbiddle.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/*
    VARIABLES
    Primary blue:       --bricks-color-krlzeg
    Secondary green:    --bricks-color-elassi
*/


@media screen and (min-width: 1101px) {
    .mobile-only {
        display: none;
    }
}

/* Custom animations */
@keyframes fadeInLeftCustom {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInRightCustom {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.brx-animate-fadeInLeftCustom {
    animation: fadeInLeftCustom ease;
}
.brx-animate-fadeInRightCustom {
    animation: fadeInRightCustom ease;
}

/* Global */
:where(p) {
    margin: 0 0 0.8em;
}

.brxe-text a {
    text-decoration: underline;
}

.page-numbers {
	transition: background 150ms ease;
}

.page-numbers.dots:hover {
	background: transparent;
}

/* WordPress blocks */
.wp-block-image {
	margin: 2em 0 !important;
}

.wp-block-image img {
	border-radius: 5px;
}

/* WP Forms */
.wpforms-form .wpforms-field-label {
    color: #000 !important;
    margin: 0 0 8px !important;
}

div.wpforms-container-full:not(:empty) {
    padding: 0 !important;
    margin: -15px 0 -10px !important;
}

div.wpforms-container-full select,
div.wpforms-container-full select>option {
    color: #000 !important;
}

div.wpforms-container-full button[type=submit] {
    background-color: var(--bricks-color-krlzeg) !important;
    padding: .65em 1.35em !important;
    line-height: 1.7 !important;
    font-weight: 700 !important;
    border-radius: 100px !important;
    height: unset !important;
}

div.wpforms-container-full button[type=submit]:hover {
    background: #3060c0 !important;
    transition: background 250ms ease, color 250ms ease, border-color 250ms ease !important;
}

div.wpforms-container-full .wpforms-form label.wpforms-error,
div.wpforms-container-full .wpforms-form em.wpforms-error {
    margin-top: 10px;
}

/* Hero particles */
#particles-js .particles-js-canvas-el {
    position: absolute;
    top: 0;
    bottom: 0;
}

#particles-js .brxe-container {
    position: relative;
    z-index: 1;
}

div.wpforms-container-full .wpforms-confirmation-container-full {
	margin: 25px 10px 10px !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full {
	background: transparent !important;
	border: none !important;
	text-align: center;
}


/* Button */
.bricks-button,
.bricks-button.sm {
    padding: .7em 1.35em;
}


/* Image */
.brxe-image {
    border-radius: 4px;
}


/* Menu */
.bricks-nav-menu .sub-menu {
	padding: 8px;
}

.bricks-nav-menu .sub-menu > li > a {
    border-radius: 5px;
    transition: background 100ms ease-out, color 100ms ease-out;
}

.bricks-nav-menu .sub-menu > li > a:hover {
    background: var(--bricks-color-krlzeg);
    color: #fff !important;
}

.brx-submenu-toggle.icon-right {
	display: flex;
	justify-content: space-between;
}

.brx-submenu-toggle button {
    transition: transform 350ms ease;
}

.bricks-mobile-menu {
  padding-top: 20px;
}

.sub-menu .sub-menu {
	box-shadow: none !important;
}

#brxe-iodhzg .bricks-mobile-menu .sub-menu .sub-menu > .menu-item > a {
	padding-left: 60px;
}


/* Headings */
.brxe-heading {
    position: relative;
}

.brxe-heading.heading-underline::before,
.brxe-heading.heading-underline::after {
    content: "";
    position: absolute;
    top: 120%;
    left: 50%;
    height: 6px;
    transform-origin: left;
    transform: translateX(-50%) scaleX(0);
    transition: transform 500ms ease;
}

.brxe-heading.heading-underline.heading-scrolled::before,
.brxe-heading.heading-underline.heading-scrolled::after {
    transform: translateX(-50%) scaleX(1);
}

.brxe-heading.heading-underline::before {
    background: var(--bricks-color-krlzeg);
    left: calc(50% - 15px);
    width: 40px;
    transform: translateX(-50%) scaleX(0);
    border-radius: 10px 0 0 10px;
    transform-origin: left;
}

.brxe-heading.heading-underline::after {
    background: var(--bricks-color-elassi);
    left: calc(50% + 15px);
    width: 20px;
    transform: translateX(-50%) scaleX(0);
    border-radius: 0 10px 10px 0;
    transform-origin: right;
    transition: transform 500ms ease 250ms;
}