/*
    ============== (C) Copyright Relate.IT - All rights reserved ===============

    The copyright to the contents herein is the property of Relate.IT. The
    contents may be used and/or copied only with the written permission of
    Relate.IT, or in accordance with the terms and conditions stipulated in
    the agreement/contract under which the contents have been supplied.

    Website:  https://relate.it
    ============================================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Chau+Philomene+One:ital@0;1&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=RocknRoll+One&display=swap');

:root {
    --very-light-brown:     #F6F5F4;
    --almost-white:         #F8F4F2;
    --dark-red:             #810819;
    --dark-brown:           #553f2f;
    --very-dark-brown:      #4e3826;
    --dark-yellow:          #C07621;
    --pale-blue:            #04618d;
    --dark-blue:            #053161; 
    --dark-blue-light:      #063B74;
    --almost-black:         #1E2749;
    
    --dark-brown-0:         rgba(85, 63, 47, 0);
    --dark-brown-80:        rgba(85, 63, 47, .8);
    --dark-brown-95:        rgba(85, 63, 47, .95);
    --dark-brown-100:       rgba(85, 63, 47, 1);
    --blue-95:              rgba(7, 69, 136, 0.95);
}

html { 
    scroll-behavior: smooth; }
html, body {
    font-family: "Noto Sans", sans-serif; font-weight: 300; background-color: var(--very-light-brown);
    text-underline-offset: 0.3rem; max-width: 100%;
    overflow-x: hidden; }
h1, h2, h3 {
    font-family: "Chau Philomene One", sans-serif; font-weight: 400; 
    font-style: normal; color: var(--dark-red); }
a {
    color: var(--dark-red); text-decoration: underline; }
a:hover {
    color: black; text-decoration: none; }
p, .main-content li {
    font-size: 1.2rem; line-height: 1.6; word-wrap: break-word; }
.logo {
    height: 8rem; transition: 500ms; }
.fixed-top {
  background-image: linear-gradient(to right, var(--dark-brown-0), var(--dark-brown-100)); }
.fixed-top.scrolled {
  background-image: linear-gradient(to right, var(--dark-brown-80), var(--dark-brown-100)); }
.fixed-top.scrolled .logo {
    height: 3.7rem; }
.top-nav {
    font-size: 1rem; color: var(--almost-white); font-weight: 400; font-style: normal;
    font-family: "RocknRoll One", sans-serif; }
.navbar-toggler {
    border: none; }
.nav-link, .nav-link:focus, .dropdown-item {
    color: var(--almost-white); }
.navbar-collapse {
    flex-grow: 0; }
.top-nav .nav-item {                
    background-color: transparent; transition: 0.7s; }
.top-nav .nav-item:hover {
    background-color: var(--dark-brown); }
.top-nav .nav-item:hover .nav-link, .top-nav .nav-item:focus .nav-link {
    color: white !important; }
.nav-link.active {
    color: white !important; text-decoration: underline;
    text-underline-offset: 0.5rem; text-decoration-thickness: 3px;
    text-decoration-color: var(--dark-yellow); }            
.nav-link span.badge {
    background-color: var(--dark-yellow); }
.dropdown-item:hover {
    color: white; border-right: 10px solid var(--dark-blue); margin-right: 0px;
    font-weight: 500; background: transparent; }
.dropdown-item.active, .dropdown-item:focus {
    color: white; text-decoration: none; background: transparent; margin-right: 0px;
    border-right: 10px solid var(--dark-blue-light); font-weight: bolder; }
.dropdown-toggle:focus, .navbar-toggler:focus, .navbar-toggler:active, .animated-icon:focus  {
    outline: none; box-shadow: none; }
.dropdown-toggle::after {
    margin-left: .35em; }
.dropdown-menu {
    background-color: var(--blue-95); border: none; border-radius: 0px; z-index: 20; }
.dropdown-item {
    color: white; font-weight: 500; margin-right: 10px; }
.dropdown-toggle:hover {
    cursor: default; }
.dropdown:hover .dropdown-menu {
    display: block; top:70%; left: 20px; }
.fixed-top.scrolled .dropdown:hover .dropdown-menu {
    top: 85%; }

.animated-icon {
    width: 30px; height: 20px; position: relative; margin: 0px;
    -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg); transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out; transition: .5s ease-in-out;
    cursor: pointer; }
.animated-icon span {
    display: block; position: absolute; height: 3px; width: 100%;
    border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg); -o-transform: rotate(0deg);
    transform: rotate(0deg); -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out; }
.animated-icon span {
    background: var(--almost-white); }
.animated-icon span:nth-child(1) {
    top: 0px; }
.animated-icon span:nth-child(2) {
    top: 10px; }
.animated-icon span:nth-child(3) {
    top: 20px; }
.animated-icon.open span:nth-child(1) {
    top: 11px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg); transform: rotate(135deg); }
.animated-icon.open span:nth-child(2) {
    opacity: 0; left: -60px; }
.animated-icon.open span:nth-child(3) {
    top: 11px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg); transform: rotate(-135deg); }

.container-page {
    margin-top: 10rem; }
.spacer {
    height: 9rem; }
.carousel-item {
    height: 600px; }
.carousel-overlay {
    position: absolute; width: 100%; height: 100%; z-index: 200;
    background: bottom / contain no-repeat url("../images/carousel-bg3.webp"); }

/*
Source - https://stackoverflow.com/a
Posted by Bucur Ion
Retrieved 2025-11-11, License - CC BY-SA 4.0
*/
.carousel-inner .carousel-item > img {
    -webkit-animation: thing 5s ease-in-out forwards;
    -o-animation: thing 5s ease-in-out forwards;
    animation: thing 5s ease-in-out forwards; position: absolute; left: 0;
    min-height: 350px; object-fit: cover; top: 50%; }
@keyframes thing {
  from {
    transform: translateY(-50%) scale(1, 1);
  }
  to {
    transform: translateY(-50%) scale(1.3, 1.3);
  }
}

.side-container {
    background-color: white; }
.btn-primary {
    background-color: var(--very-dark-brown); border-color: var(--very-dark-brown); }
.btn-primary:hover {
    background-color: black; border-color: black; }

section.footer {
    background-color: white; }
.footer-bar {
    font-family: 'Noto Sans'; font-weight: 500; font-size: 1.2rem;
    color: var(--almost-black); height: 100%; z-index: 0; }
.footer-bar a {
    color: var(--almost-black); text-decoration: none; }
.footer-bar a:hover {
    text-decoration: underline;
}
.footer-bar img {
    height: 100px !important; }
.logo-footer {
    height: 3rem; margin-bottom: 10px; }

address {
    margin-bottom: 0px; }
.red {
    color: var(--dark-red); }
.footer-main-menu {
    font-weight: 400; }
.footer-main-menu .nav-link:hover, .footer-main-menu .item-sub:hover {
    color: var(--almost-black);
}
.footer-main-menu .list-group-item {
    background-color: transparent; border: 0; text-align: left !important; }
.footer-main-menu .item-main {
    padding: 0; margin-bottom: 0.7rem; font-weight: 500; padding-top: 0.7rem;
    display: block; border-top: 5px solid transparent; }
.footer-main-menu .item-main.active {
    border-top: 5px solid var(--almost-black);
}
.footer-main-menu .item-sub {
    font-size: 1rem; border-bottom: 3px solid transparent; }
.footer-main-menu .item-sub.active {
    border-bottom: 3px solid var(--almost-black); }
.footer-bar svg {
    fill: var(--pale-blue); }
.footer-bar svg:hover {
    fill: var(--almost-black); }

footer {
    font-family: 'Noto Sans'; font-size: 0.85rem; }
footer .nav-link:hover {
    color: var(--almost-black) !important;                
}
footer .nav-link:hover, footer .nav-link.active {
    text-decoration: underline;
}

.myrelate-signature img {
    height: 1.15rem; opacity: 0.6; 
    filter: alpha(opacity=40); /* For IE8 and earlier */ }
.myrelate-signature:hover img {
    opacity: 1; filter: alpha(opacity=100); }

@media (max-width:1200px) {
    .logo {
        height: 4.5rem; }
    .carousel-item {
        height: 250px; }
    .carousel-item img {
        min-height: 250px; }
    .container-page {
       margin-top: 5.5rem; }    
}
@media (max-width:992px) {
    .lead.fs-4 {
        font-size: calc(1.275rem + .3vw) !important; }
}
@media (min-width:992px) {
    .top-nav {
        font-size: 1.1rem; }
}
@media (max-width:767px) {
    .fixed-top {
        background-color: var(--dark-brown-95); }
}
@media (min-width:576px) {
    .top-35 {
        top: 35% !important;
    }
    .fixed-top.scrolled .nav-link {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .fixed-top.scrolled .top-35 {
        top: 25% !important;
    }
}
@media (max-width:576px) {
    .logo {
        height: 3.5rem; }
    .fixed-top {
        background-color: var(--dark-brown-95); }
    .fixed-top.scrolled .logo {
        height: 2.5rem; }    
    .carousel-item {
        height: 300px; }
    .carousel-item img {
        min-height: 300px; }
    .container-page {
        margin-top: 4rem; }
    .footer-bar p {
        font-size: 1.15rem !important; }
}