/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/

/* ==========================================================================
   Global
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
	--color-link: #1F4E79;
	--color-link-hover: #000;
	--color-text: #000;
	--custom-header-background: linear-gradient(
        180deg,
        #275E90 0%,
        #1F4E79 35%,
        #183B5C 100%
	);
	--custom-header-text: #fff;
	--custom-header-link: #bcbcbc;
	--custom-header-link-hover: #fff;
	--custom-header-max-width: 1400px;
	--custom-header-height: 100px;
	--custom-header-side-padding: 20px;
	--transition-speed: 0.3s ease;
}

body {
    margin: 0;
    background: white;
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--color-link);
    text-decoration: none;
    transition:
        color var(--transition-speed) ease,
        opacity var(--transition-speed) ease;
}

a:hover,
a:focus {
    color: var(--color-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--color-link-hover);
    outline-offset: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.custom-site-header {
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--custom-header-background);
	color: var(--custom-header-text);
}

.custom-site-header__inner {
	width: 100%;
	max-width: var(--custom-header-max-width);
	min-height: var(--custom-header-height);
	margin: 0 auto;
	padding: 0 var(--custom-header-side-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	box-sizing: border-box;
}

.site-navigation__menu a {
    color: var(--custom-header-link);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: color var(--custom-transition);
}

.site-navigation__menu a:hover,
.site-navigation__menu a:focus {
    color: var(--custom-header-link-hover);
}

.site-header__contact a {
    width: 40px;
    height: 40px;
    max-height: 40px;
	color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .75;
    transition: opacity .3s ease;
	overflow:hidden;
}
.site-header__contact a svg {
	width: 32px;
    height: 32px;
}

.site-header__contact a:hover,
.site-header__contact a:focus {
    opacity: 1;
}

.site-branding__name {
    color: #fff;
}

/* ==========================================================================
   Branding
   ========================================================================== */

.site-branding {
    flex: 1;
}

.site-branding__link {
    display: flex;
    flex-direction: column;
}

.site-branding__name {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.site-branding__title {
    margin-top: 4px;
    font-size: .95rem;
    color: #bcbcbc;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-navigation {
    flex: 1;
	display: flex;
	justify-content: flex-end;
}

.site-navigation__menu {
    display: flex;
    justify-content: center;

    list-style: none;
    margin: 0;
    padding: 0;
    gap: 28px;
}

.site-navigation__menu li {
    margin: 0;
    padding: 0;
}

.site-navigation__menu a {
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ==========================================================================
   Contact Area
   ========================================================================== */

.site-header__contact {
/*     flex: 1;
 */
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 22px;
	margin-bottom: 10px;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {

    .custom-site-header__inner {
        flex-direction: column;
        text-align: center;
		gap: 6px;
    }

    .site-navigation__menu {
        flex-wrap: wrap;
        justify-content: center;
    }

    .site-header__contact {
        justify-content: center;
        flex-wrap: wrap;
    }
	.custom-site-header {
		padding-top: 20px;
	}
}