@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --color-text: #3C3C3C;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #007AB6;
  --color-primary-dark: #064070;
  --color-primary-light: #6FCFFF;
  --color-btn-primary: #ffffff;
  --color-btn-secondary: #ffffff;
  --font-family: 'Poppins', sans-serif;
  --logo-path: url('../pic/logo-blue.png');
  --banner-path: url('../pic/banner_blue.jpg');
}
.themeYellow {
  --color-primary: #FFD401;
  --color-primary-dark: #CCAA00;
  --color-primary-light: #FFE97B;
  --color-btn-primary: #434343;
  --color-btn-secondary: #434343;
  --logo-path: url('../pic/logo-yellow.png');
  --banner-path: url('../pic/banner_yellow.jpg');
}
.themeGreen {
  --color-primary: #A9E305;
  --color-primary-dark: #487E02;
  --color-primary-light: #DDFF7D;
  --color-btn-primary: #434343;
  --color-btn-secondary: #ffffff;
  --logo-path: url('../pic/logo-green.png');
  --banner-path: url('../pic/banner_green.jpg');
}
.themeRed {
  --color-primary: #D0142C;
  --color-primary-dark: #860820;
  --color-primary-light: #FF8A99;
  --logo-path: url('../pic/logo-red.png');
  --banner-path: url('../pic/banner_red.jpg');
}



/* --- Reset CSS --- */
body {
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--color-text);
  line-height: 1.5;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

ol {
  list-style-position: inside;
}

ol:after,
ul:after {
  content: "";
  display: block;
  line-height: 0;
  clear: both;
  overflow: hidden;
  height: 0;
}

pre {
  border-left: 10px solid #ccc;
  max-width: 500px;
}

img {
  max-width: 100%;
}

/* <<< Headings >>> */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #000;
  line-height: normal;
}

/* --- anchor --- */
a {
  color: var(--color-primary);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* --- btn override --- */
.btn { padding: 7px 15px; border-radius: 30px; white-space: nowrap; cursor: pointer; -webkit-transition: 0.5s; transition: 0.5s; font-size: 16px; font-family: var(--font-family); font-weight: 600; }

/* --- btn-primary --- */
.btn-primary { color: var(--color-btn-primary); background-color: var(--color-primary); border-color: transparent; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25); }
.btn-primary.active,
.btn-primary:active,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:hover { color: var(--color-white); background-color: var(--color-primary-dark); border-color: transparent; -webkit-box-shadow: none; box-shadow: none; }
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active { border-color: transparent; -webkit-box-shadow: none; box-shadow: none; }
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus { -webkit-box-shadow: none; box-shadow: none; }

/* --- btn-outline-primary --- */
.btn-outline-primary { color: var(--color-primary); background-color: var(--color-white); border-color: var(--color-primary); box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25); }
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary.active.focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.active:hover,
.btn-outline-primary:active.focus,
.btn-outline-primary:active:focus,
.btn-outline-primary:active:hover,
.btn-outline-primary:hover { color: var(--color-white); background-color: var(--color-primary); border-color: var(--color-primary); -webkit-box-shadow: none; box-shadow: none; }
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active { border-color: transparent; -webkit-box-shadow: none; box-shadow: none; }
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus { -webkit-box-shadow: none; box-shadow: none; }

/* --- btn-secondary --- */
.btn-secondary { color: var(--color-btn-secondary); background-color: var(--color-primary-dark); border-color: transparent; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
}
.btn-secondary.active,
.btn-secondary:active,
.btn-secondary.focus,
.btn-secondary:focus,
.btn-secondary.active.focus,
.btn-secondary.active:focus,
.btn-secondary.active:hover,
.btn-secondary:active.focus,
.btn-secondary:active:focus,
.btn-secondary:active:hover,
.btn-secondary:hover { color: var(--color-white); background-color: var(--color-primary); border-color: transparent; -webkit-box-shadow: none; box-shadow: none; }
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active { border-color: transparent; -webkit-box-shadow: none; box-shadow: none; }
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus { -webkit-box-shadow: none; box-shadow: none; }


/* --- blockquote --- */
blockquote { margin: 12px 0 12px 20px; border-left: 10px solid #000; position: relative; padding: 30px 70px; text-align: center; }
blockquote:before { top: 0; left: 0; content: '\201C'; }
blockquote:after { bottom: 0; right: 0; content: '\201D'; }
blockquote:before,
blockquote:after { position: absolute; width: 60px; height: 60px; font-size: 80px; font-family: "fontAwesome"; line-height: 1; }

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.5); }
input:-moz-placeholder,
textarea:-moz-placeholder { color: rgba(0, 0, 0, 0.5); }
input::-moz-placeholder,
textarea::-moz-placeholder { color: rgba(0, 0, 0, 0.5); }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: rgba(0, 0, 0, 0.5); }

.form-control { padding-left: 15px; padding-right: 15px; font-size: 16px; color: var(--color-text); width: 100%; height: 42px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 5px; -webkit-background-clip: padding-box; -webkit-transition: 0.5s; transition: 0.5s; border: 0; background-color: var(--color-white); }
.form-control:focus { -webkit-box-shadow: none; box-shadow: none; }

.form-control.search { padding-left: 32px; background-image: url(../pic/search-icon.png); background-position: 10px center; background-repeat: no-repeat; background-size: 15px; }

.custom-select { background-image: url(../pic/select-arrow.png); background-position: calc(100% - 15px) center; background-repeat: no-repeat; background-size: 15px; }


/* #label */
label { cursor: pointer; }

textarea { min-height: 285px; padding: 0 23px; }
textarea.form-control { padding-top: 12px; resize: none; }

/* --- Global Container --- */
.container { max-width: 1200px; }

.container:after,
.row:after,
.clear { content: ''; display: block; line-height: 0; clear: both; overflow: hidden; height: 0; }

/* --- Outer --- */
#Outer {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}


/* Header */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; padding: 18px 0; background-color: var(--color-white); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25); transition: 0.5s ease; }
.header .info { padding: 6px 0 6px 70px; position: absolute; top: -18px; right: 0; transition: 0.5s ease  }
.header .info::before { position: absolute; top: 0; left: -21px; content: ''; width: 42px; height: 42px; background-color: var(--color-white); z-index: 1; display: block; transform: rotate(45deg); }
.header .info:after { position: absolute; top: 0; left: 0; height: 100%; width: 100vw; background-color: var(--color-primary-dark); content: ''; }
.header .info ul { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; }
.header .info ul li:not(:last-child) { border-right: 1px solid var(--color-white); padding-right: 20px; margin-right: 20px; }
.header .info ul li { display: flex; flex-wrap: wrap; font-size: 14px; font-family: var(--font-family); font-weight: 400; color: var(--color-white); align-items: center; }
.header .info ul li .input-group { margin-bottom: 0 !important; }
.header .info ul li .input-group button {padding: 0 !important;max-width: 30px !important;}
.header .info ul li .form-control { font-size: 14px !important; height: 30px; max-width: 200px; min-width: 0px !important; background-image: url(../images/search-icon.png); background-position: 10px center; background-repeat: no-repeat; background-size: 15px; border:none !important }
.header .info ul li img { width: 20px; }
.header .info ul li span { padding-left: 10px; }
.header .info ul li span a { color: var(--color-white); text-decoration: none; }

.header.fixed-header { padding: 10px 0; }
.header.fixed-header .info { display: none; }
.header.fixed-header .navbar { align-items: center !important; }

.sitelogo a { font-size: 25px; font-weight: 700; display: flex; align-items: center; text-decoration: none; line-height: 30px; color: var(--color-primary); }
.sitelogo a span { display: block; }
.sitelogo a span b { display: block; color: var(--color-primary-dark); }

.sitelogo .logoImg { margin-right: 10px; width: 100px; height: 74px; background-image: var(--logo-path); background-position: center center; background-repeat: no-repeat; background-size: 100px 74px; display: block; }

/* Navigation */
.navbar { padding-top: 10px; margin-bottom: 0; }
.navbar .navbar-toggler { padding: 0; margin: 0; outline: 0; border: 0; z-index: 9; -webkit-box-shadow: none; box-shadow: none; }
.navbar .navbar-toggler:after { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; content: ''; display: none; transition: .3s; }
.navbar .navbar-toggler.active:after { display: block; }
.navbar .navbar-toggler .btn_txt { color: #000; margin-left: 10px; }
.navbar .navbar-toggler .menu_icon { margin: 0; padding-top: 1px; float: left; width: 30px; height: 22px; position: relative; cursor: pointer; }
.navbar .navbar-toggler .menu_icon .icon-bar { display: block; position: absolute; opacity: 1; width: 30px; height: 3px; background-color: var(--color-primary-dark); margin: 0 auto; left: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.navbar .navbar-toggler .menu_icon .icon-bar:nth-child(1) { top: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.navbar .navbar-toggler .menu_icon .icon-bar:nth-child(2) { top: 9px; left: 0; opacity: 1; }
.navbar .navbar-toggler .menu_icon .icon-bar:nth-child(3) { top: 18px; -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.navbar .navbar-toggler.active .icon-bar:nth-child(1) { top: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.navbar .navbar-toggler.active .icon-bar:nth-child(2) { top: 8px; left: -10px; opacity: 0; }
.navbar .navbar-toggler.active .icon-bar:nth-child(3) { top: 8px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.navbar .navbar-nav > .nav-item { margin-right: 30px; font-family: var(--font-family); font-weight: 500; font-size: 16px; }
.navbar .navbar-nav > .nav-item:last-child { margin-right: 0; }
.navbar .navbar-nav > .nav-item:hover > a.nav-link,
.navbar .navbar-nav > .nav-item.active > a.nav-link,
.navbar .navbar-nav > .nav-item.current-menu-ancestor > a.dropdown-toggle { background-color: transparent; outline: 0; color: var(--color-primary-dark); border-bottom-color: var(--color-primary-dark); }
.navbar .navbar-nav > .nav-item > a.nav-link { color: #434343; padding: 0; border-bottom: 2px solid transparent; }
.navbar .navbar-nav > .nav-item > a.nav-link.dropdown-toggle::after { content: ''; vertical-align: middle; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu { padding: 0; width: auto; border-radius: 0; border: 0; margin: 0; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item { font-size: 16px; font-family: var(--font-family); padding-left: 30px; position: relative; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a { border-bottom: 0; color: var(--color-primary-dark); font-weight: 500; padding: 10px 15px; color: white; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item { border-bottom: 0; color: var(--color-primary-dark); font-weight: 500; padding: 10px 15px; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item.dropdown-toggle { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item.dropdown-toggle::after { height: 2px !important; background-color: var(--color-primary-dark); opacity: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: 0; margin-left: 10px; display: block; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item:hover > a,
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item.active > a,
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item.current-menu-ancestor > a.dropdown-toggle {color: var(--color-primary-light); background-color: var(--color-primary-dark); }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item:hover > a.dropdown-toggle::after { opacity: 1; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item ul.dropdown-menu { padding: 0; background-color: var(--color-primary-dark); }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item { position: relative; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item ul { list-style: none; margin: 0; padding: 0; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item ul li { font-size: 16px; font-family: var(--font-family); padding: 0; display: block; }
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item ul li a { border-bottom: 0; color: var(--color-white); font-weight: 500; padding: 10px 15px; text-decoration: none; display: block; }
/* #menu-primary-menu .dropdown-menu {
  max-height: 400px;
  overflow-x: auto;
} */

/* banner */
.banner {
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: var(--banner-path);
    margin-top: -50px;

    width: 100vw; /* Breite auf 100% des Viewports */
    height: 93vh; /* Hoehe auf 100% des Viewports */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


.banner h1 { font-size: 48px; font-family: var(--font-family); font-weight: 800; color: #fff; margin-bottom: 5%; }
.banner p { font-size: 18px; font-family: var(--font-family); font-weight: 500; color: var(--color-text); margin-bottom: 40px; }
.banner ul { list-style: none; margin: 0 -10px; padding: 0; display: flex; flex-wrap: wrap; width: 100%; max-width: 570px; }
.banner ul li { padding: 10px; width: 100%; max-width: 50%; flex: 0 0 50%; }

.banner.inner { padding-bottom: 0; position: relative; min-height: 373px; background-position: center center; } 
.banner.inner:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: rgba(0, 0, 0, 0.5);}
.banner.inner .container { position: relative; }
.banner.inner h2 { font-size: 32px; font-family: var(--font-family); font-weight: 700; color: var(--color-white); margin-bottom: 0; }

/* about */
.about { padding: 50px 0; }
.about img { width: 100%; object-fit: cover; border-radius: 10px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); }
.about h2 { font-size: 26px; font-family: var(--font-family); font-weight: 700; color: var(--color-primary); margin-bottom: 20px; display: flex; align-items: center; }
.about h2:after { content: ''; flex: 1; width: 100%; max-width: 120px; height: 3px; margin-left: 10px; }

/* lupe */
.lupe img { width: 100%; border: 0px; border-radius: 0px; box-shadow: 0px; }

/* cover */
.cover img { object-fit: cover; }


/* gallery */
.gallery { padding: 0px 0; }
.gallery h3 { font-size: 22px; font-family: var(--font-family); font-weight: 700; color: var(--color-primary); margin-bottom: 5px; align-items: center; }
.gallery .box { margin: 15px 0; }
.gallery .box .cover { position: relative; border-radius: 5px; overflow: hidden; }
.gallery .box .cover:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(180deg, rgba(41, 41, 41, 0.13) 52.6%, #000 100%); }
.gallery .box .cover img { width: 100%; }
.gallery .box .cover .title { display: flex; align-items: center; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; justify-content: space-between; padding: 20px 15px; }
.gallery .box .cover .title h5 { font-size: 16px; font-family: var(--font-family); font-weight: 600; color: var(--color-white); margin-bottom: 0; }
.gallery .box .cover .title img { width: 20px; }
.gallery .btn {  margin-top: 15px; }

/* News */
/* .news { padding: 50px 0; } */
.news h2 { font-size: 26px; font-family: var(--font-family); font-weight: 700; color: var(--color-primary); margin-bottom: 25px; display: flex; justify-content: center; align-items: center; }
.news h2:before,
.news h2:after { content: ''; flex: 1; width: 100%; max-width: 120px; height: 3px; margin: 0 10px; }
.news .box { text-align: left; margin-bottom: 30px; }
.news .box .cover { border-radius: 10px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); overflow: hidden; min-height: 100%; }
.news .box .cover img { width: 100%; height: 250px;   }
.news .box .cover .text { padding: 10px; }
.news .box .cover .text h4 { font-size: 20px; font-family: var(--font-family); font-weight: 600; margin-bottom: 5px; }
.news .box .cover .text h4 a { color: var(--color-text); text-decoration: none; }
.news .box .cover .text ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.news .box .cover .text ul li:not(:last-child) { margin-right: 14px; }
.news .box .cover .text .date { display: flex; align-items: center; font-size: 16px; font-family: var(--font-family); font-weight: 400; color: var(--color-text); margin-bottom: 10px; }
.news .box .cover .text .date .fa { margin-right: 10px; }
.news .box .cover .text .date a { color: var(--color-primary); }
.news .box .cover .text p { font-size: 16px; font-family: var(--font-family); font-weight: 400; color: var(--color-text); margin-bottom: 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
.news .box .cover .text > a { font-size: 14px; font-family: var(--font-family); font-weight: 700; color: var(--color-primary); display: inline-block; text-decoration: none; }
.news .box .cover .text > a:hover { color: var(--color-primary-dark); }

.news.list .box .cover .img { position: relative; padding-top: 50%; overflow: hidden; }
.news.list .box .cover img {width: 100%;display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.news.list .box .cover img[src=""]{ display: none; }
.news.list .box .cover .text {padding: 25px;width: 100%;overflow: hidden;}
.news.list .box .cover .text h4 { font-size: 24px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; }
.news.list .box .cover .text h4:after { content: ''; width: 100%; flex: 1; max-width: 120px; margin-left: 10px; height: 3px; }
.news.list .box .cover .text h4 a { color: var(--color-primary); text-decoration: none; }


/* for all Titles */
.container > h2 { font-size: 26px; font-family: var(--font-family); font-weight: 700; color: var(--color-primary); margin-bottom: 25px; display: flex; justify-content: center; align-items: center; }
.container > h2:before,
.container > h2:after { content: ''; flex: 1; width: 100%; max-width: 120px; height: 3px; background-color: var(--color-primary); margin: 0 10px; }

/* Main Title */
.Seitentitel, h1 { font-size: 36px; font-family: var(--font-family); font-weight: 700; color: var(--color-primary); margin-top: 30px; margin-bottom: 10px; display: flex; justify-content: flex-start; align-items: center; }
.Seitentitel:after, h1:after { content: ''; flex: 1; width: 100%; max-width: 120px; height: 3px; margin: 0 10px; }.news.list .box .cover {border: 0; }

.newspage .newssearch { padding: 20px; width: 100%; border-radius: 5px; background-color: var(--color-primary); margin-bottom: 30px; display: flex; flex-wrap: wrap; }

/* Filter */
.filter {padding: 20px 20px 40px;width: 100%;border-radius: 5px;background-color: var(--color-primary);margin-bottom: 30px;display: flex;flex-wrap: wrap;position: relative;}
.filter.withoutcheck { padding-bottom: 20px; }
.filter .form-group { flex: 1; }
.filter .form-group:not(:last-child) { padding-right: 20px; }
.filter .form-group:nth-child(3) {flex: 0 0 250px;max-width: 250px;width: 100%;padding-right: 0;display: flex;}
.filter .form-group:nth-child(3) .btn { width: 100%; }
.filter .form-group:nth-child(3) .btn-outline-primary { color: var(--color-btn-primary); background-color: var(--color-primary); border-color: var(--color-btn-primary); box-shadow: none; }
.filter .form-group:nth-child(3) .btn-outline-primary:hover { color: var(--color-primary); background-color: var(--color-btn-primary); border-color: var(--color-btn-primary); }
.filter .checkbox { position: absolute; bottom: 10px; left: 20px; font-size: 14px; color: #ffffff; display: flex; flex-wrap: wrap; }
.filter .checkbox input[type="checkbox"] { display: flex; justify-content: center; width: 20px; height: 20px; appearance: none; border: 1px solid #ffffff; border-radius: 5px; flex: 0 0 20px; }
.filter .checkbox input[type="checkbox"]:before { content: '\f00c'; color: var(--color-primary); opacity: 0; font-family: 'fontAwesome'; }
.filter .checkbox input[type="checkbox"]:checked { background-color: #ffffff; }
.filter .checkbox input[type="checkbox"]:checked:before { opacity: 1; }
.filter .checkbox span { flex: 1; padding-left: 10px; }
.filter .form-group.multipleBtn { display: flex; }
.filter .form-group.multipleBtn .btn:not(:last-child) { margin-right: 15px; }

/* Appointment */
.appointment { overflow: hidden; width: 100%; }
.appointment .navCal { width: 100%}
.appointment .navCal ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; justify-content: space-between; }
.appointment .navCal ul:after { display: none; }
.appointment .navCal ul li { font-size: 16px; font-family: var(--font-family); font-weight: 400; text-transform: capitalize; }
.appointment .navCal ul li a { text-decoration: none; color: var(--color-text); }
.appointment .navCal ul li a:hover { color: var(--color-primary); }
.appointment .calendarRow { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.appointment .calendarRow .box {flex: 0 0 33.33%;max-width: 33.33%;width: 100%;padding-left: 10px;padding-right: 10px; margin-bottom: 30px; }
.appointment .calendarRow .box .cover {width: 100%;border: 1px solid var(--color-primary);border-radius: 10px; overflow: hidden;}
.appointment .calendarRow .box .cover table { width: 100%; border: 0; border-spacing: 0; margin: 0; }
.appointment .calendarRow .box .cover table tr td { padding: 5px; background-color: transparent; font-size: 14px; font-family: var(--font-family); font-weight: 400; color: var(--color-text); text-align: center; }
.appointment .calendarRow .box .cover table tr td.greyborder { background-color: var(--color-primary); font-size: 16px; color: var(--color-white); }
.appointment .calendarRow .box .cover table tr td.greyborder b { font-weight: 600; }
.appointment .calendarRow .box .cover table tr td.DRKday_header { padding-top: 15px; font-weight: 500; }

/* Classroom */
.classroom .item:not(:last-child) { border-bottom: 1px solid var(--color-primary); padding-bottom: 33px; margin-bottom: 32px; }
.classroom .item:last-child { margin-bottom: 30px; }
.classroom .item .row { margin-bottom: 0; }
.classroom .item .img img { width: 100%; border-radius: 10px; border: 1px solid var(--color-primary); }
.classroom .item .text h4 { font-size: 24px; font-weight: 700; color: var(--color-primary); margin-bottom: 10px; }
.classroom .item .text ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; }
.classroom .item .text ul li { font-size: 16px; font-weight: 500; color: var(--color-text); position: relative; padding-left: 20px; }
.classroom .item .text ul li:not(:last-child) { margin-right: 20px; }
.classroom .item .text ul li:before { position: absolute; top: 7px; left: 0; width: 10px; height: 10px; border: 2px solid var(--color-text); content: ''; border-radius: 50%; }
.classroom .item .text a { }
.classroom .item .text .row div:last-child { text-align: right; }

/* classroom Detail */
.classroomDetail { text-align: center; width: 100%; max-width: 897px; margin: 0 auto 30px; }
.classroomDetail h3 { font-size: 26px; font-family: var(--font-family); font-weight: 600; color: var(--color-text); margin-bottom: 20px; }
.classroomDetail .table-responsive { width: 100%; margin-bottom: 20px; border-radius: 10px; border: 1px solid var(--color-primary); background-color: #ffffff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); }
.classroomDetail table { border: 0; margin: 0; width: 100%; border-spacing: 0; }
.classroomDetail table tr th,
.classroomDetail table tr td { padding: 10px; font-size: 16px; font-family: var(--font-family); font-weight: 400; color: var(--color-text); }
.classroomDetail table tr th { font-size: 18px; font-weight: 500; color: var(--color-white); background-color: var(--color-primary); }

/* Sitemap */
.sitemap { padding-top: 20px; width: 100%; }
.sitemap .box { margin-bottom: 20px; }
.sitemap .box > ul { list-style: none; margin: 0; padding: 0; }
.sitemap .box > ul > li { position: relative; padding-left: 25px; font-size: 16px; font-family: var(--font-family); font-weight: 500; }
.sitemap .box > ul > li:not(:last-child) { margin-bottom: 10px; }
.sitemap .box > ul > li:before { position: absolute; top: -1px; left: 0; content: '\f178'; font-family: 'fontAwesome'; }
.sitemap .box > ul > li a { color: var(--color-text); text-decoration: none; }
.sitemap .box > ul > li a:hover { color: var(--color-primary); }
.sitemap .box > .main_menu > li:nth-child(5):before { display: none; }
.sitemap .box > ul > li > ul { list-style: none; margin: 0; padding: 0; }
.sitemap .box > ul > li > ul > li { position: relative; font-size: 16px; font-weight: 400; padding-left: 20px; }
.sitemap .box > ul > li > ul > li:before { position: absolute; top: 8px; left: 0; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--color-text); content: ''; }
.sitemap .box > ul > li > ul > li:not(:last-child) { margin-bottom: 10px; }

/* News Details */
/* .newsDetails { padding: 50px 0; } */
.newsDetails h2 { font-size: 26px; font-family: var(--font-family); font-weight: 700; color: var(--color-primary); margin-bottom: 10px; display: flex; justify-content: flex-start; align-items: center; }
.newsDetails h2:after { content: ''; flex: 1; width: 100%; max-width: 120px; height: 3px; margin: 0 10px; }
.newsDetails ul.info { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; }
.newsDetails ul.info li:not(:last-child) { margin-right: 14px; }
.newsDetails ul.info li .date { display: flex; align-items: center; font-size: 16px; font-family: var(--font-family); font-weight: 400; color: var(--color-text); margin-bottom: 10px; }
.newsDetails ul.info li .date .fa { margin-right: 10px; }
.newsDetails ul.info li .date a { color: var(--color-primary); }
.newsDetails .img { width: 100%; max-width: 700px; margin: 20px 0px; }
.newsDetails .img img { padding: 0; width: 100%; margin-bottom: 10px; border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);  }
.newsDetails .img img[src=""] { display: none; }
.newsDetails h4 {font-size: 18px;font-family: var(--font-family);font-weight: 500;color: var(--color-text);margin-bottom: 20px;}
.newsDetails p { font-size: 16px; font-family: var(--font-family); font-weight: 400; color: var(--color-text); margin-bottom: 10px; }
.newsDetails .btn .fa { margin-right: 10px; }

/* teacher-card */
.teacher-card .card { position: relative; border-radius: 5px; overflow: hidden; border: 1px solid var(--color-primary); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25)); }
.teacher-card .card img { width: 100%; }
.teacher-card .card .card-body {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;background: linear-gradient(0deg, rgba(0, 0, 0, 0.76) 14.58%, rgba(0, 0, 0, 0.00) 29.17%);justify-content: flex-end;}
.teacher-card .card .card-body p { margin: 0; font-size: 16px; font-family: var(--font-family); font-weight: 400; color: var(--color-white); }
.teacher-card .card .card-body p.teacher-title {font-size: 18px;font-weight: 700;margin-bottom: 5px;}

/* faq */
.faq { padding-bottom: 40px; }
.faq .left .accordion-item { border: 0; }
.faq .left .accordion-item:not(:last-child) { margin-bottom: 30px; }
.faq .left .accordion-item .accordion-header .accordion-button { background-color: transparent !important; outline: 0; box-shadow: none; border: 1px solid var(--color-text); border-radius: 10px; font-size: 16px; font-family: var(--font-family); font-weight: 400; color: var(--color-text); }
.faq .left .accordion-item .accordion-header .accordion-button:after {background-image: none;content: '\f068';font-family: 'fontAwesome';transform: none;display: flex;align-items: center;justify-content: center;}
.faq .left .accordion-item .accordion-header .accordion-button.collapsed:after { content: '\f067' }
.faq .right .emailForm { border-radius: 5px; border: 1px solid var(--color-text); box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.25); padding: 20px 16px; }
.faq .right .emailForm h4 { font-size: 16px; font-family: var(--font-family); font-weight: 400; color: var(--color-text); margin-bottom: 20px; }
.faq .right .emailForm .form-group:not(:last-child) { margin-bottom: 30px; }
.faq .right .emailForm .form-group .form-control { border: 1px solid var(--color-text); }
.faq .right .emailForm .form-group textarea.form-control { min-height: 128px; }
.faq .right .emailForm .form-group.ctaBtn { display: flex; flex-wrap: wrap; justify-content: space-between; }
.faq .right .emailForm .form-group.ctaBtn .btn { width: 100%; max-width: calc(50% - 5px); }

/* footer */
.footer { padding: 30px 0; background-color: var(--color-primary-light); }
.footer .box h4 { font-size: 20px; font-weight: 700; font-family: var(--font-family); color: var(--color-primary-dark); margin-bottom: 15px; }
.footer .box ul { list-style: none; margin: 0; padding: 0; }
.footer .box ul li { font-size: 16px; font-family: var(--font-family); font-weight: 500; color: var(--color-primary-dark); }
.footer .box ul li:not(:last-child) { margin-bottom: 10px; }
.footer .box ul li a { text-decoration: none; color: var(--color-primary-dark); }
.footer .box ul li a:hover { color: var(--color-primary); }
.footer .box:nth-child(2) ul li { position: relative; padding-left: 30px; }
.footer .box:nth-child(2) ul li .fa { position: absolute; top: 0; left: 0; width: 20px; font-size: 20px; margin-right: 10px; text-align: center; }
.footer .box:nth-child(2) ul li:not(:last-child) { margin-bottom: 10px; }
.footer .box .form-group:not(:last-child) { margin-bottom: 16px; }
.footer .box .form-group .form-control { font-size: 14px; }
.footer .box .form-group .btn { border-radius: 5px; }
.copyright { background-color: var(--color-primary-dark); }
.copyright ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.copyright ul li { font-size: 16px; font-family: var(--font-family); font-weight: 500; line-height: 20px; }
.copyright ul li:not(:last-child) { padding-right: 10px; margin-right: 10px; border-right: 1px solid var(--color-white); }
.copyright ul li a { color: var(--color-white); text-decoration: none; }

/* Media CSS */
@media only screen and (min-width: 991px) {
  /**:: First Dropdown ::**/
  .navbar .navbar-collapse ul li { position: relative; }
  .navbar .navbar-collapse ul li:hover > ul { display: block; }
  .navbar .navbar-collapse ul ul { position: absolute; top: 100%; left: 0; min-width: 250px; display: none; background-color: var(--color-primary-dark); }
  /**:: Second Dropdown ::**/
  .navbar .navbar-collapse ul ul li { position: relative; }
  .navbar .navbar-collapse ul ul ul { position: absolute; top: 0; left: 100%; min-width: 250px; display: none; background-color: var(--color-primary-dark); }
  .navbar .navbar-collapse ul ul li:hover > ul { display: block; }
  /**:: Third Dropdown ::**/
  .navbar .navbar-collapse ul ul ul li { position: relative; }
  .navbar .navbar-collapse ul ul ul li:hover ul { display: block; }
  .navbar .navbar-collapse ul ul ul ul { position: absolute; top: 0; left: -100%; min-width: 250px; display: none; z-index: 1; background-color: bisque; }
  /**:: Fourth Dropdown ::**/
  .navbar .navbar-collapse ul ul ul ul li { position: relative; }
  .navbar .navbar-collapse ul ul ul ul li:hover ul { display: block; }
  .navbar .navbar-collapse ul ul ul ul ul { position: absolute; top: 0; left: -100%; min-width: 250px; display: none; z-index: 1; background-color: fuchsia; }
}
@media (max-width: 1140px) {
  .header .info ul li:not(:last-child) { padding-right: 10px; margin-right: 10px; }
  .navbar .navbar-nav > .nav-item { margin-right: 10px; }
}
@media (max-width: 991px) {
  .header { padding: 50px 0 10px; z-index: 9; }
  .header .info { padding: 10px 0; top: -50px; width: 100%; }
  .header .info::after { left: -12px; }
  .header .info:before { display: none; }
  .header .info ul li:last-child { display: none; }
  .header .info ul li:first-child { display: block !important; width: 100% !important; }
  .header .info ul li:not(:last-child) { display: none; border-right: 0; padding-right: 0; margin-right: 0; }
  .sitelogo a { font-size: 20px; }
  .sitelogo .logoImg { width: 55px; height: 40px; background-size: cover; }

  .navbar .navbar-collapse { position: fixed; top: 0; left: -100%; bottom: 0; background-color: var(--color-primary-dark); height: 100% !important; width: 300px; z-index: 99999; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: block; overflow: auto; }
  .navbar .navbar-collapse.open,
  .navbar .navbar-collapse.show { left: 0; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
  .navbar .navbar-nav > .nav-item { margin-right: 0; margin-bottom: 0; }
  .navbar .navbar-nav > .nav-item:hover > a.nav-link,
  .navbar .navbar-nav > .nav-item.active > a.nav-link,
  .navbar .navbar-nav > .nav-item.current-menu-ancestor > a.dropdown-toggle { color: var(--color-primary-light); }
  .navbar .navbar-nav > .nav-item > a.nav-link,
  .navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a { padding: 10px 15px; color: var(--color-white); position: relative; }
  .navbar .navbar-nav > .nav-item > a.nav-link .caret,
  .navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a .caret { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; }
  .navbar .navbar-nav > .nav-item > a.nav-link.dropdown-toggle::after,
  .navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a:after { display: none; }
  .navbar .navbar-nav > .nav-item ul.dropdown-menu,
  .navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item ul.dropdown-menu { background-color: transparent; }
  .navbar .navbar-nav > .nav-item ul.dropdown-menu.show { display: block !important; }
  .navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item { padding-left: 25px; padding-right: 25px; color: var(--color-white); }
  .navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item.dropdown-toggle::after { display: none; }
  .navbar .navbar-nav .caret::before { margin-left: 10px; font-size: 26px; content: '\f107'; font-family: 'FontAwesome'; vertical-align: middle; }
  .navbar .navbar-nav .caret.caret-open::before { content: '\f106'; }

  .banner {min-height: 400px;height: auto;padding-top: 50px;}
  .banner h1 { font-size: 28px; }
  .banner p { margin-bottom: 20px; }

  .banner.inner { min-height: 250px; }

  .about,
  .gallery,
  /* .news, */
  .newsDetails,
  .term,
  .footer { padding: 30px 0; }

  .news.list h2,
  .newsDetails h2,
  .term h2,
  .container > h2,
  .Seitentitel, h1 { font-size: 26px; }

  .classroomDetail h3 { font-size: 20px; }

  
  .filter .form-group:nth-child(3) { max-width: 120px; flex: 0 0 120px; }
  .filter .form-group.multipleBtn {  max-width: 250px; flex: 0 0 250px; }

  .news.list .box .cover .text h4 { font-size: 20px; }

  .newsDetails ul.info { margin-bottom: 15px; }
  .newsDetails .img { margin-bottom: 30px; }

  .classroom .item .text .row div:last-child { text-align: left; }
  .classroom .item .text h4 {font-size: 20px;margin-top: 20px;}

  .faq .right .emailForm .form-group:not(:last-child) { margin-bottom: 20px; }
  .faq .right .emailForm .form-group.ctaBtn .btn { max-width: 100%;}
  .faq .right .emailForm .form-group.ctaBtn .btn:not(:last-child) { margin-bottom: 15px; }

}
@media (max-width: 767px) {
  .header .info ul li { font-size: 12px; }
  .header .info ul li { position: relative; padding-left: 10px; }
  .header .info ul li img { width: 15px; position: absolute; top: 0; left: 0; }

  .banner { padding: 60px 0 15px; padding-bottom: 0; min-height: 350px; }
  .banner h1 { line-height: 36px; }
  .banner p { font-size: 16px; margin-bottom: 20px; text-shadow: 0 0 10px var(--color-white); }
  
  .about img { margin-top: 20px; }

  .filter .form-group:not(:last-child) { padding-right: 10px; }

  .appointment .calendarRow .box {flex: 0 0 100%; max-width: 100%; margin-top: 0; }

  .faq .right { margin-top: 20px; }
  .faq .right .emailForm .form-group.ctaBtn .btn { max-width: calc(50% - 5px); }
  .faq .right .emailForm .form-group.ctaBtn .btn:not(:last-child) { margin-bottom: 0; }

  .news.list .box .cover .img { padding-top: 0; }
  .news.list .box .cover img { position: relative; }
  
  .footer .box:not(:last-child) { margin-bottom: 30px; }
  .footer .box ul li:not(:last-child) { margin-bottom: 5px; }
  .footer .box:nth-child(2) ul li:not(:last-child) { margin-bottom: 10px; }

  
}
@media (max-width: 575px) {
  .banner .row > div { max-width: 100%; flex: 0 0 100% }

  .filter { padding-bottom: 20px; }
  .filter .form-group { flex: 0 0 100%; max-width: 100%; }
  .filter .form-group:not(:last-child) { padding-right: 0; padding-bottom: 10px; }
  .filter .form-group:nth-child(3) { margin-top: 40px; max-width: 100%; flex: 0 0 100%; padding-bottom: 0; }
  .filter.withoutcheck .form-group:nth-child(3) { margin-top: 5px; }
  .filter .checkbox { bottom: 75px}

}



/* added */

.image-section img {
    max-width: 100%;
    height: auto;
    display: block;
}

.title {
    font-size: 18px;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
}

.content-section p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.row {
    margin-bottom: 15px;
}

.search-form .form-control {
  border: 2px solid #ddd;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.search-form .form-control:focus {
  border-color: #84ceeb;
  box-shadow: 0 0 0 3px rgba(132, 204, 235, 0.3);
}

.search-form .btn {
  background-color: #0056b3;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  transition: background-color 0.3s ease;
}

.search-form .btn:hover, .search-form .btn:focus {
  background-color: #004494;
}

/* Checkbox Styling */
.search-form .form-check {
  padding-top: 0.5rem;
}

.search-form .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
}

.search-form .form-check-label {
  margin-left: 0.5rem;
  font-weight: 400;
}

/* Responsive Design */
@media (max-width: 768px) {
  .search-form .btn {
    width: 100%;
    margin-top: 1rem;
  }
}

/* News Item Styling */
.news-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.news-item h2 {
  font-size: 1.5rem;
  color: #333;
}

.news-item p {
  font-size: 1rem;
  color: #666;
}

.news-item .news-date {
  color: #888;
  font-size: 0.9rem;
}

.news-item .btn-more {
  background-color: #28a745;
  color: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.news-item .btn-more:hover, .news-item .btn-more:focus {
  background-color: #218838;
}

.teacher-card {
margin-bottom: 15px;
}
.teacher-img {
max-width: 100%;
height: auto;
}
.teacher-title {
font-weight: bold;
}

.card {
border:0px
}