/* 
    Template Name: Saaga Bootstrap One page HTML Template
    Author: ServingCloud 
    Version: 1.0.0
    Created: August 2023
    File Description: Main Custom Style file of the template
*/

/*  ------CONTENT --------------------------*/
/*  01. GOOGLE FONT IMPORT */
/*  02. COMMON CONTENT STYLES */
/*  03. HEADER STYLES */
/*  04. SLIDER SECTION */
/*  05. ABOUT SECTION */
/*  06. SERVICES SECTION */
/*  07. PACKAGES SECTION */
/*  08. OUR TEAM SECTION */
/*  09. BLOG SECTION */
/*  10. CONTACT US SECTION */
/*  11. CLIENTS SECTION */
/*  12. FOOTER SECTION */
/*  13. PRE LOADER */
/*  14. GO TO TOP BUTTON */
/*  15. MOBILE VIEW OPTIMIZATION */
/*------------------------------------------*/

/*  01. GOOGLE FONT IMPORT */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Onest:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes:ital,wght@0,400;0,600;1,500&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/**********************  02. COMMON CONTENT STYLES **********************/
html, body{
    font-family:'Onest','OpenSans-Light-webfont';
    font-size: 20px;
    color: #fff;
    background:#131e49;
}
h1{
    font-size:40px;
    font-weight:700;
    padding: 10px 0;
}
h2{
    font-size:28px;
    font-weight:700;
    padding: 10px 0;
}
h3{
    font-size:22px;
    font-weight:700;
    padding: 10px 0;
}
p, .details {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: justify;
}
a {
    color: #ffffff;
    -webkit-transition: color 0.5s;
    -moz-transition:    color 0.5s;
    -ms-transition:     color 0.5s;
    -o-transition:      color 0.5s;
    transition:         color 0.5s;
}
a:hover{
    color: #e1bd00;
}
a, a:hover{
    text-decoration:none;
}
ul {
    list-style:none;
    padding:0;
}
ul li{
    padding:5px 0;
}
section, footer{
    padding-top: 50px;
    padding-bottom: 50px;
    z-index: 2;
    overflow: hidden;
}
.container{
    position: relative;
}
.column{
    float: left;
}
.content-holder{
    overflow:hidden;
}
.wow:first-child {
    visibility: hidden;
}
.mb-5 {
    margin-bottom: 0rem!important;
}
.main-title{
    color:#ffffff;
    text-align:center;
}
.icon {
    color:#FFFFFF;
    font-size: 32px;
    transition: transform 1s ease; /* 1-second animation on transform property */
}
.social-icon .icon {
    font-size: 20px;
    transition: transform 1s ease; /* 1-second animation on transform property */
}
.menu-collapser {
    background-color: #8b368c;
    height: 80px;
}
.btn, input{
    margin: 5px 0;
}
/**********************  03. HEADER STYLES **********************/
.fixed-top{
    position:fixed;
    background:#8b368c;
}
.logo{
    position: absolute;
    width: 201px;
    height: 76px;
    z-index: 50;
    left: 15px;
    top: 5px;
}
.logo-holder{
    width:201px;
    height:	76px;
}
/* MENU CUSTOMISATION */
ul.slimmenu{
    text-align:right;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 20px 0;
}

.slimmenu li a i {
    font-size: 18px; /* Größe der Icons */
    color: #fff;
    transition: color 0.3s;
    padding: 0 8px; /* Abstand zwischen den Icons */
}

.slimmenu li a i:hover {
    color: #8b368c; /* Farbe bei Hover */
}

ul.slimmenu li, ul.slimmenu li ul li, ul.slimmenu li, ul.slimmenu li ul li:hover, ul.slimmenu li:hover, ul.slimmenu li a:hover {
    border:none;
    background:none;
}
ul.slimmenu li {
    position: relative;
    display: inline-block;
    float: none;
}
ul.slimmenu li a{
    color:#fff;
    padding: 12px 12px 12px 12px;
    border-bottom: 1px solid rgba(0,0,0,0);
    transition: border-bottom 0.5s ease-out;
    -o-transition: border-bottom 0.5s ease-out;
    -moz-transition: border-bottom 0.5s ease-out;
    -webkit-transition: border-bottom 0.5s ease-out;
}
ul.slimmenu li:first-child {
    background: none !important;
}
ul.slimmenu li, ul.slimmenu li:hover{
    background-size: 15px 10px;
    padding: 0 15px 0 15px;
}
ul.slimmenu li a:hover {
    border-bottom: 1px solid #F4EEE0;
}
/**********************  04. SLIDER SECTION **********************/
#home{
    position: relative;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    padding-bottom: 0px;
}
#slider, #slider ul, #slider ul li{
    width: 100% !important;
    height: 100%;
    overflow: hidden;
}
#prevBtn, #nextBtn{
    display:none;
}
.carousel-item img{
    position: relative;
    z-index:-5;
}
.carousel-indicators, .carousel-caption {
    bottom:240px;
    z-index: 6;
}
.carousel-caption{
    padding:30px;
    text-transform: uppercase;
}
#slider p{
    text-align:center;
}
.slider-background{
    position: absolute;
    margin:0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.area-overlay{
    background:url('../images/video-bg.png') repeat;
    position: absolute;
    margin:0;
    width: 100%;
    height: 100%;
    top: 0;
}
#banner2{
    opacity:0;
}
.slider-title{
    position: absolute;
    bottom: 150px;
    left: 0;
    padding: 10px;
}
.content{
    height: 100%;
}
/* Video Background */
.video-background{
    position: absolute;
    margin:0;
    width: 100%;
    height: 100%;
}
.video-background iframe{
    min-height: 100vh;
    min-width: 178vh;
    width: 99vw;
    height: 57.25vw;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 40%;
    left: 50%;
}
/*-----------------------------------*/
/* SNOW EFFECTS */
/*-----------------------------------*/
.snow-background{
    height: 100%;
    min-height: 100% !important;
    overflow: visible;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.snowflake {
    position: absolute;
    width: 5px;
    height: 5px;
    background: linear-gradient(white, white);
    /* Workaround for Chromium's selective color inversion */
    border-radius: 50%;
    filter: drop-shadow(0 0 5px white);
}
/**********************  05. ABOUT SECTION **********************/
#about{
    background:#131e49;
}
.about-box{
    position:relative;
    padding:20px;
    background: #131e49;
    margin: 10px 10px 10px 30px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}
.about-box::before {
    content: "";
    position: absolute;
    background: #cbe0fb;
    right: 0;
    left: 0;
    border-radius: 6px;
    bottom: 0;
    top: 100%;
    transition: all 0.3s;
    z-index: -1;
}
.about-box:hover::before{
    background: #131e49;
    top:0;
}
.about-box:hover .fa{
    color: #e1bd00;
}
/**********************  06. SERVICES SECTION **********************/
.service-box{
    position:relative;
    padding:20px;
    background: #8b368c;
    border: 1px solid #4F4557;
    margin: 30px 10px 10px 10px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    text-align:center;
}
.service-box:hover .icon, .icon:hover {
    color: #e1bd00;
    transform: scale(1.2) rotateY(360deg); /* Enlarge the icon by 20% and rotate it 45 degrees on hover */
}
.service-box:hover{
    border: 1px solid #e1bd00;
}

/*********************** 07. PACKAGES SECTION ***********************/
#packages{
    background:#4F4557;
}
#package{
    position: relative;
    margin: 0 auto;
    width: 100%;
    overflow:hidden;
    padding-top:60px;
    padding-bottom:60px;
    z-index:2;
}
.package-offer{
    position: relative;
    background:#292929;
    overflow:hidden;
    margin: 0 auto;
    padding-top:10px;
    padding-bottom:10px;
    margin:10px;
    border-radius:6px;
    text-align:center;
    color: #b3b1b1;
}
.package-offer h3{
    padding-top:15px;
    padding-bottom:5px;
    text-align:center;
    font-size: 32px;
    line-height: 32px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0;
}
.package-offer h3 span{
    font-weight:300;
    font-size: 12px;
    line-height:22px;
}
.package-offer p{
    font-weight:300;
    text-align:center;
    text-transform:uppercase;
    font-size: 12px;
    line-height:22px;
    padding-bottom:10px;
}
.package-offer h6{
    text-align:center;
    padding-bottom:35px;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px solid #7a7979;
    margin-top: 0;
}
.package-offer-gold{
    position: relative;
    background:#292929;
    overflow:hidden;
    margin: 0 auto;
    padding-top:10px;
    padding-bottom:10px;
    margin:10px;
    border-radius:6px;
    text-align:center;
    color: #b3b1b1;
}
.package-offer-gold h3{
    padding-top:15px;
    padding-bottom:5px;
    text-align:center;
    font-size: 32px;
    line-height: 32px;
    text-transform: uppercase;
    color: #e1bd00;
    margin-bottom: 0;
}
.package-offer-gold h3 span{
    font-weight:300;
    font-size: 12px;
    line-height:22px;
}
.package-offer-gold p{
    font-weight:300;
    text-align:center;
    text-transform:uppercase;
    font-size: 12px;
    line-height:22px;
    padding-bottom:10px;
}
.package-offer-gold h6{
    text-align:center;
    padding-bottom:35px;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: #e1bd00;
    border-bottom: 1px solid #7a7979;
    margin-top: 0;
}
.package-offer-gold a,
.package-offer a {
    font-family: 'Great Vibes';
    position: relative;
    display: inline-block;
    outline: none;
    text-align:center;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 24px;
    margin-top:5px;
    color: #e1bd00;
}
.package-offer-gold a:hover,
.package-offer-gold a:focus,
.package-offer a:hover,
.package-offer a:focus {
    outline: none;
}
.package-offer-gold .cl-effect-5 a,
.package-offer .cl-effect-5 a {
    overflow: hidden;
    text-align:center;
    padding-left:5px;
    padding-right:5px;
}
.package-offer-gold .cl-effect-5 a span,
.package-offer .cl-effect-5 a span {
    position: relative;
    display: inline-block;
    text-align:center;
    padding-top:10px;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}
.package-offer-gold .cl-effect-5 a span::before,
.package-offer .cl-effect-5 a span::before {
    position: absolute;
    top: 100%;
    padding-top:10px;
    color:#fff;
    content: attr(data-hover);
    text-align:center;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.package-offer-gold .cl-effect-5 a:hover span,
.package-offer-gold .cl-effect-5 a:focus span,
.package-offer .cl-effect-5 a:hover span,
.package-offer .cl-effect-5 a:focus span {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}
/***********************  08. OUR TEAM SECTION ***********************/
#team{
    background:#393646;
}
.full-image-card {
    margin: 30px 10px 10px 10px;
}
.info-text-block{
    padding: 10px 0;
}
.info-text-block, .info-text-block p{
    text-align:center;
}
.info-text-block .social-icon a {
    display: inline-block;
    margin: 6px;
    font-size: 16px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    border-radius: 3px;
}
.info-text-block .social-icon .icon {
    font-size: 14px;
}
.image-div {
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.4px 2.7px -30px rgba(0, 0, 0, 0.059), 0 8.2px 8.9px -30px rgba(0, 0, 0, 0.071), 0 25px 40px -30px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    border-radius: 6px;
    overflow: hidden;
}
.hover-scale img {
    transform: scale(1.0);
    transition: transform 0.3s;
}
.hover-scale img:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
}
/*********************** 09. BLOG SECTION ***********************/
#blog{
    background:#4F4557;
}
.blog-holder{
    overflow: hidden;
    flex-wrap: wrap;
    display: flex;
}
.blog-post{
    background: #393646;
    border-radius: 6px;
}
.blog-post .image-div{
    border-radius: 6px 6px 0 0;
    text-align: center;
}
.blog-post .info-text-block{
    padding:20px;
}
span.post-date{
    font-size:10px;
}
/*********************** 10. CONTACT US SECTION ***********************/
#contact{
    background:#4F4557;
}
#contact-form{
    padding: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.clear-fix{
    clear: both;
}
.form-group{
    padding-right: 10px;
}
.form-control {
    background-color: #393646;
    border: 1px solid #6d5d6e;
}
.visit-card{
    padding: 20px;
}
.visit-card-icon{
    transition: all 0.3s ease-in-out;
}
.visit-card:hover .visit-card-icon{
    color: #632985;
    transform: scale(1.2) rotateY(360deg); /* Enlarge the icon by 20% and rotate it 45 degrees on hover */
}
#map{
    width: 98%;
    height: 300px;
    margin: 0 auto;
    text-align: center;
}
/*-- Error Messages --*/
.error{
    font-size:12px;
    color: #c1a7a7;
    display: inline;
}
#contact-result{
    color: #e1bd00;
    text-align:center;
}
/*********************** 11. CLIENTS SECTION ***********************/
#clients{
    background:#393646;
    padding-top: 10px;
    padding-bottom: 10px;
}
.owl-carousel .owl-item img {
    max-width: 200px;
}


/*********************** 12. FOOTER SECTION ***********************/
footer{
    padding-bottom:0px !important;
}
.footer-box{
    padding:20px;
    width: 100%;
}
.footer-logo{
    width: 146px;
    height: 80px;
    position: relative;
}
.social-icon a {
    display: inline-block;
    margin: 15px 6px 0;
    font-size: 16px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    position: relative;
    z-index: 1;
    border-radius: 3px;
}
.social-icon a span{
    color:#ffffff;
    position: relative;
    z-index: 1;
    border-radius: 3px;
}
.social-icon a:hover span{
    color: #e1bd00;
}
.footer-title{
    padding:25px 0 20px;
}
#subscriber{
    padding:20px 0;
}
.copyright-holder{
    background: #0e0e0e;
}
.copyright{
    padding: 20px 0;
    text-align:center;
    overflow: hidden;
}
.link-developer{
    color: #e1bd00;
}
/*********************** 13. PRE LOADER ***********************/
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/loading-gif-wl.gif') 50% 50% no-repeat rgb(0,0,0);
    background-size: 3%;
}
/*********************** 14. GO TO TOP BUTTON ***********************/
#button {
    display: inline-block;
    background-color: #e1bd00;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s,
        opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}
#button:hover {
    cursor: pointer;
    background-color: #333;
}
#button:active {
    background-color: #555;
}
#button.show {
    opacity: 1;
    visibility: visible;
}
/****************************************************************************/
/*********************** 15. MOBILE VIEW OPTIMIZATION ***********************/
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    ul.slimmenu li {
        text-align: left;
    }
    ul.slimmenu li:first-child {
        background-size: 15px 10px !important;
        padding: 0 15px 0 15px;
    }
    .full-image-card{
        text-align: center;
    }
    .fixed-top {
        position: fixed;
        background: #8b368c;
    }
    #home {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        z-index: 2;
        min-height: auto;
        min-width: auto;
        width: 100%;
        height: auto;
    }
    .video-background iframe {
        min-height: 80vh;
        min-width: 84vh;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }
    .carousel-indicators, .carousel-caption {
        bottom:20px;
    }
    .owl-carousel .owl-item img, .footer-logo {
        margin: 0 auto;
    }
    p, .visit-card, .about-box, .footer-box, .footer-title, .footer-box p, .footer-box .details{
        text-align:center;
    }
}


#media {
    padding: 20px 0;
    background-color: #131e49;
    display: flex;
    justify-content: center;
}

.media-container {
    max-width: 1200px;
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr; /* Einspaltiges Layout */
    gap: 20px;
}

.video-container video {
    width: 100%;
    border-radius: 8px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Vier Bilder nebeneinander */
    gap: 40px;
}

.gallery img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

/* Hover-Effekt für die Bilder */
.hover-zoom:hover {
    transform: scale(1.2); /* Vergrößert das Bild beim Hover */
}

/* Responsive Layout */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: 1fr; /* Bilder untereinander auf mobilen Geräten */
        gap: 15px;
    }
}

/* Cookie Banner Styles */
.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #131e49;
    color: #ffffff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
}

.cookie-banner p {
    margin: 0;
    font-size: 14px;
}

.cookie-banner a {
    color: #8b368c;
    text-decoration: underline;
}

.cookie-banner button {
    background-color: #8b368c;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.cookie-banner button:hover {
    background-color: #6f2d6a;
}