@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");


:root {
    --moonstone: #47aec5ff;
    --blue-ncs: #3286b2ff;
    --lapis-lazuli: #155488ff;
    --myrtle-green: #38837aff;
    --mantis: #69bd4bff;
    --bright-white: #ffffffff;
    --icy-white: #f0f8ffff;
    --hw-green: #7db02a;
    --hw-blue: #282357;
    --hw-light-gray: #E9EAEF;
    --hw-gray: #B4B8BF;
    --hw-dark-gray: #4F5656;
    --he-blue: #095ca6;
    --he-green: #75BB53;
    --he-mint: #5eb38e;
    --he-mint-light: #a4e0c7;
}


body {
    background-color: var(--bright-white);
    font-family: 'Open Sans', sans-serif;
}

H1, H2 {
    font-weight: 800;
    color: transparent;
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(to right, #1072ba, #75bb53);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

H3, H4, H5, H6 {
    font-weight: 700;
}



H3, H4 {
    color: var(--myrtle-green);
    color: var(--mantis);
}

P,
li {
    line-height: 2rem;
    color: #1e5767;
}

a {
    color:var(--he-blue);
    text-decoration: none;
}

a:hover {
    color: var(--he-green);
}


.cover-front {
    background: linear-gradient(to right, transparent, #7dd3ae);
    background: radial-gradient(#D4F0E4 50%, #7DC8D4);
    background: linear-gradient(to bottom right, #7DC8D4 -80%, #eff8fa 60%, #7DD3AE 120%);
    background: linear-gradient(to bottom right, #7DC8D4 -20%, #eff8fa 60%, #CBD47D 120%);
    min-height: 100vh;
}

.cover {
    background-image: url("/sites/default/files/hera-hero-bg4.svg");
    background-size: 100% auto;
    background-position: center;
    min-height: 100vh;
    /*background: linear-gradient(to right, transparent, #7dd3ae);*/
}


.sticky-lg-top {
    z-index: 100;
}


/* HEADER ------------------------------------------------------ */
.header {
    /*background: linear-gradient(to right, #fff6, #fff);*/
    z-index: 100;
}


.internal-parent {
    background: linear-gradient(to bottom left, #7DC8D4 -140%, #eff8fa 40%,#eff8fa 70%, #CBD47D 130%);

}

.internal-child {
    background-image: url("/sites/default/files/hera-internal-bg.svg");
    background-size: 100% ;
    background-position: bottom right; 
    background-attachment: fixed;
       
}


.internal-parent .header {
    background: #fff9;
}

.header-on-scroll {
    background: #ffffffdd !important;
    box-shadow: 0px 1px 8px #00000044;
}

.navbar-brand .site-logo img {
    height: 40px;
}

nav .site-logo-full img {
    height: 120px;
}

header #block-sociallinks img {
    fill: var(--moonstone);
    width: 18px;
    height: auto;
    margin-left: 10px;
}

.header .navbar {
    font-family: 'Nanum Gothic', sans-serif;
}

.header .navbar .nav-link,
.header .navbar .dropdown-item {
    color: #1e5767;
}

.header .navbar .nav-link:hover,
.header .navbar .dropdown-item:hover {
    color: var(--he-blue);
}



.navbar-nav .active {
    color: var(--he-green) !important;
    background-color: unset !important;
}
/* --------------------------------------------------------------*/


/* HERO   ------------------------------------------------------ */

.hero-child {
    padding: 0px;
}

.hero-left .front-logo {
    width: 600px;
    max-width: 100%;
}

.hero-right .front-moto {
    width: 600px;
    max-width: 100%;
}



.hero H1 {
    color: var(--lapis-lazuli);
    text-shadow: 1px 1px 1px var(--bright-white);
}

.hero .hero-left p {
    color: var(--bright-white);
    text-shadow: 0px 0px 3px var(--lapis-lazuli);
    font-weight: 300;
}

.hero .hero-left P > strong {
    font-weight: 500;
    color: white;
}

/* --------------------------------------------------------------*/



/* CONTENT   --------------------------------------------------- */

.front .block H2 {
    display: none;
}

.front,
.content3-fluid {
    /*background: radial-gradient(white, #b4b8bf);*/
    background-color: white;
}


.internal-parent .front,
.internal-parent .content3-fluid {
    background-color: transparent;
}



.breadcrumb-parent {
    font-size: 0.8rem;
    background: #7DC8D41f;
}

#block-b5customtheme-breadcrumbs {
    margin-left: 20px;
}

#block-b5customtheme-breadcrumbs ol {
    margin-bottom: 0px;
    color: #fffb;
}


#block-b5customtheme-breadcrumbs ol a {
    color: #1C87B9;
}


#block-b5customtheme-breadcrumbs ol a:hover {
    color: var(--mantis);
}

#block-b5customtheme-breadcrumbs .breadcrumb-item::before {
    color: #fff6;
}

main {

}

.my-quote-container {
    background: #fff6;
    border-radius: 1rem;
    padding: 1.5rem;
}

#accordionFlushTechObj button {
    background-color: var(--hw-green);
}


.techObj-button-icon {
    background-color: var(--hw-green);
}

.techObj-button-text {
    background-color: var(--hw-blue);
    color: white;
}

.herwingt-deliver-group .card {
    background-color: var(--hw-blue);
    color: white;
}

.herwingt-deliver-group .card-img-top {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}


#block-b5customtheme-page-title {
    /*margin-top: 3rem;*/
    margin-bottom: 2rem;
}

#block-b5customtheme-content {
    padding-bottom: 3rem !important;
}

.path-frontpage H4 {
    line-height: 2.0rem;
    font-weight: 400;
    color: var(--moonstone);
    text-shadow: 0px 0px 4px #0008;
}

.path-frontpage .front strong {
    color: var(--bright-white);
    font-weight: 600;
}

.partner-node img {
    max-width: 100%;
    border-radius: 0px !important;
}

.partner-logo img {
    width: 90%;
    height: auto;
    border-radius: 0px !important;
}

.ket-parent {
    /*background-color: var(--hw-dark-gray);*/
    /*padding: 0px;*/
    background-color: var(--hw-light-gray);
}

.ket-header {
    background: var(--hw-blue);
    padding: 0px;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}

.ket-body {
    /*background-color: var(--hw-light-gray);*/
    padding: 1rem;
}

.ket-list-item {
    background: var(--hw-light-gray);
}

.ket-list-item h5 {
    font-weight: lighter;
    text-align: justify;
}

.ket-list-item h5 strong,
.ket-list-item h5 b {
    font-weight: bold;
}

.ket-list-item img {
    width: 400px !important;
    max-width: 100%;
}

.heriwingt-value-left,
.heriwingt-value-right {
    border: 1px solid #7db02a;
    padding: 1rem;
      padding-top: 1rem;
    background: var(--hw-light-gray);
    border-radius: 1rem;
    padding-top: 2rem;
}

.heriwingt-value h2,
.heriwingt-value h4 {
    text-align: center;
}

.heriwingt-value h4 {
    margin-top: 1rem;
}

.heriwingt-value li {
    text-align: justify;
}

.value-icon img {
    width: 120px;
    max-width: 100%;
}

#block-b5customtheme-content .ecare-objectives li {
    list-style: none;
    margin-bottom: 1.5rem;
    background-image: url("/sites/default/files/svg/target.svg");
    background-repeat: no-repeat;
    padding-left: 40px;
    background-size: 30px;
} 

#impactsAccordion .accordion-item {
    background: none;
    border: none;
    font-weight: 300;
}

#impactsAccordion .accordion-button {
    background: var(--moonstone);
    background: none;
    background: #47aec577;
    border: none;
    color: var(--bright-white);
    font-size: 1.1rem;
    font-weight: 300;
}

#impactsAccordion .accordion-body {
    background: #47aec544;
    color: var(--bright-white);
}

.article-logo img {
    border-radius: 50%;
    max-width: 90%;
}  

.timeline li {
    list-style: none;
}

.timeline-entry {
    background: linear-gradient(130deg, white,#F8FFF3);
    border-radius: 1rem;
}

.tl-timeline p a {
    color: var(--he-blue) !important;
}

.tl-timeline p a:hover {
    color: var(--he-green) !important;
}



.deliverables .card {
    background: #47aec577;
    border: none;
    color: var(--bright-white);
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

.media-card {
    background-color: var(--he-mint);
}

.content2-fluid {
    background: linear-gradient(to right, #7d7f81, #313942);
    background: #e6efda;
    background: linear-gradient(to bottom left, #d7e0a866, #d4f0e466);
}

.content2-fluid H2,
.subcontent-fluid H2 {
    color: transparent;
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(to right, #1072ba, #75bb53);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.content3-fluid .region-content3 {
    width: 100%;
    text-align: center;
}

#subcontent .block-news-entry {
    flex: 1;
    background: linear-gradient(130deg, white,#F8FFF3);
    line-height: 1.1rem;
}

#subcontent .block-news-entry p {
    line-height: 1.5rem;
    color: #1e5767;
}



.subcontent-fluid {
    background: linear-gradient(to bottom right, #d4f0e466, #D6E7EA);
    background-repeat: no-repeat;
    background-size: 150% auto;
    background-position: top right;
}



.footer-top-fluid {
    background: radial-gradient(white, #b4b8bf);
    background: linear-gradient(to bottom right, white, #D4F0E4);
}

.footer-bottom-fluid {
    background: linear-gradient(to bottom right, #7DC8D4,#D4F0E4);
    background: #7DC8D499;
}

.view-consortium h3 {
    padding-left: 2rem;
    color: var(--he-blue);
}

/* --------------------------------------------------------------*/

#footer-bottom #block-sociallinks-2 H2 {
    font-size: 1.5rem;
}

#footer-bottom #block-sociallinks-2 img {
    width: 30px;
    height: auto;
    margin: 10px;
}

.footer-bottom-left a.nav-link {
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 500;
    color: var(--he-blue);
}

.footer-bottom-left a.nav-link:hover {
    color: var(--he-green);
}

.footer-bottom-center img {
    width: 450px;
    max-width: 100%;
}

.copyright-fluid {
    background: #fffa;
}


/* EFFECTS  ---------------------------------------------------- */
@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-20px);
    }
    100% {
        transform: translatey(0px);
    }
}

.puzzled-front {
    transform: translatey(0px);
    animation: float 4s ease-in-out infinite;
    img { width: 100%; height: auto; }
}
/* --------------------------------------------------------------*/