/*
Theme Name:	Smarties
Description:	Custom theme for smarties 
Author:	smarties
Author URI:	https://smarties-lerninstitut.de
Template:	twentytwenty
Version:	1.0
*/
@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/smarties/assets/fonts/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

:root {
    --theme-color: rgb(92, 181, 219);
    --accent-color: rgb(116, 134, 172);
    --theme-btn-hover: rgb(75, 142, 170);
    --accent-btn-hover: rgb(84, 97, 124);;
    --smartis-font: 'Poppins', Arial, sans-serif; 
    --rem-unit: 16px;
}

body, .entry-content {
    font-family: var(--smartis-font);
}
body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a:where(:not(.wp-block-button__link)), #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote:before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
    color: var(--theme-color);
}
body.template-full-width .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide), body.template-full-width [class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 120rem;
}
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 140rem;
}

.entry-header {
    display: none;
}
.hero {
    height: 70vh;
    background: url('/wp-content/uploads/2024/12/SMARTis-lerninstitut-koeln.webp');
    background-position: center; 
    background-size: cover;
    position: relative;
}
.hero__content {
    position: absolute;
    max-width: 90rem;
    background: #ffffffa9;
    right: 8rem;
    transform: translateY(30%);
    border-radius: 5px;
}
.hero__content--cta {
    font-size: 18px;   
    padding: .875rem 1.5rem;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 4px;
}
.mobile-hero {
    margin-top: -30%;
    position: relative;
    background: #ffffff;
    padding: 1rem 0;
}
.about-hero {
    height: 40vh;
    background: url('/wp-content/uploads/2024/12/study-7217599_1920.jpg');
    background-position: bottom center; 
    background-size: cover;
    position: relative;
}
.theme--btn1 {
    background: var(--theme-color);
    color: #fff;
    border: 2px solid #fff;
}
.theme--btn1:hover {
    background: var(--theme-btn-hover);
    color: #fff;
}
.theme--btn2 {
    background: var(--accent-color);
    color: #fff;
    border: 2px solid #fff;
}
.theme--btn2:hover {
    background: var(--accent-btn-hover);
    color: #fff;
}
.cards-section {
    padding-top: 0;
    margin-top: -6rem;
    display: flex;
    flex-wrap: wrap;
}
.cards-section a {
    text-decoration: none;
}
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}
.card-body {
    flex-grow: 1;
}
.row > .col-sm-3 {
    display: flex;
    flex-direction: column;
}
.cards-section .col-md-6, .col-lg-3 {
    margin-bottom: 20px;
  }
.theme--bg {
    background: var(--theme-btn-hover);
    color: #fff;
}
.accent--bg {
    background: var(--accent-btn-hover);
    color: #fff;
}
.header-inner {
    padding: .8rem 0;
}
.post-inner {
    padding-top: 0;
}
.modal {
    right: 0;
}
.modal-dialog {
    top: 5%;
}
.mid-banner {
    width: 100%;
    height: fit-content; 
}
.mid-banner--content-wrapper {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sl--hidden {
    opacity: 0;
    transition: ease .6s;
    filter: blur(5px);
    transform: scale(0);
}
.sl--show {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}
.section-inner {
    max-width: 140rem;
}
.map-container {
    padding-right: 1rem;
}
ul.footer-nav-links {
    display: flex;
    margin-left: 0;
}
.service-btn {
    height: 300px;
    width: 320px;
    font-size: 3rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-decoration: none;
    font-weight: 600;
}
.service-btn span {
    height: 100px;
    display:inline-block;
    width: 100%;
    padding: .5rem;
}
.s1 {
    background: url('/wp-content/uploads/2024/12/schreibtisch.jpg');
    background-position: center;
    background-size: cover;
}
.s2 {
    background: url('/wp-content/uploads/2024/12/family-7157276_640.jpg');
    background-position: center;
    background-size: cover;
}
@media (width < 576px) {
    .section-inner.bottom-line {
        margin: 0;
        width: 100vw;
    }
    .footer-nav {
        width: 100%;
    }
    .footer-nav-links {
        flex-direction: column;
        align-items: center;
    }
}
@media (width < 768px) {
    .profile-text {
        padding-top: 2rem;
    }
    .map-container {
        padding: 0;
    }
    .bottom-line {
        flex-direction: column-reverse;
    }
    #site-footer .section-inner {
        align-items: center;
    }
}

@media (max-width: 992px) {
    .card {
        margin: 0 8px;
    }
    .cards-section.row {
        --bs-gutter-x: 0.4rem;
        margin-top: 2rem;
    } 
}
@media (max-width: 1280px) {
    .hero {
        display: flex;
        flex-direction: column;
    }
    .hero__content {
        max-width: 100%;
        position: unset;
        margin: 0 3.6rem;
        transform: translateY(8vh);
    }
}
@media (min-width: 1281px) and (max-width: 1440px) {
    .hero__content {
        right: 3.6rem;
    }
}
@media (min-width: 1220px) {
    h1, .heading-size-1 {
        font-size: 6.4rem;
    }
}
@media (min-width: 700px) {
    .post-inner {
        padding-top: 0;
    }
    .header-inner {
        padding: .8rem 0;
    }
    .entry-content h4, .entry-content h5, .entry-content h6 {
        margin: 1.5rem auto 2.5rem;
    }
}
/**** Typography ****/
.text-small { font-size: calc(var(--rem-unit) * 0.75); }