*{
    padding: 0;
    margin: 0;
    border:none;
    text-decoration: none;
}

/* Bootstrap reconfiguration*/

html {
    scroll-behavior: smooth;
}

.container-fluid{
    font-family: 'Raleway', sans-serif;
    padding-left:12rem;
    padding-right:0;
    margin-left:0;
    margin-right:0;

    }
.row, .col-lg-12, .col-lg-6, .col-lg-4, .col-lg-3, .col-xl-6{
      padding-left:0;
      padding-right:0;
      margin-left:0;
      margin-right:0;
}

.row{
    padding:var(--padding-el);
}

h1{
    font-size: clamp(1rem,1rem + 5vw,2.5rem);
}
h2{
    font-size: clamp(0.7rem,1rem + 3vw,2rem);
}
/* Root and general elements*/

:root{
    font-family: 'Raleway', sans-serif;
    --color-1: #1d2133;
    --color-2: #21295b;
    --color-3: #7a9fd3;
    --color-4: #febc12;
    --color-5: #f2deb6;
    --padding-el: 3rem;
}

.row{
    padding:var(--padding-el);
}

.shadow-text{
    color:white;
    text-align: center;
    text-shadow: 0.75px 0.5px 0px var(--color-5), 2px 1.5px 0px rgba(0,0,0,0.15);
}

.line{
    background:var(--color-5);
    border:3px solid var(--color-5);
    width:5rem;
    border-radius:2rem;
}

.flexed{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Scrollbar*/

::-webkit-scrollbar{
    width:0.7em;
}

::-webkit-scrollbar-track{
    background:var(--color-1);
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--color-5),var(--color-4));
    height:1em;
    border-radius:100vw;
}

.welcome{
    background: linear-gradient(rgba(27, 27, 27, 0.5), rgba(36, 36, 36, 0.5)), url(../Images/cabana.webp);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(var(--padding-el)*15);
    clip-path: polygon(0 0, 50% 15%, 100% 0, 100% 85%, 50% 100%, 0 85%);

    flex-direction: column;
    padding:0 var(--padding-el);
}

.welcome p{
    margin-top: 0.6rem;
    color: white;
    text-align: center;
}

/* About us*/

.about{
    padding:var(--padding-el);
}

.about-pics{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-gap:0.4rem;
}

.about-profile:first-child{ background: url(../Images/about-us/Alex.webp); background-size: cover; background-position: center;}
.about-profile:nth-child(2){ background: url(../Images/about-us/Maria.webp); background-size: cover; background-position: center;}
.about-profile:nth-child(3){ background: url(../Images/about-us/Damian.webp); background-size: cover; background-position: center;}
.about-profile:nth-child(4){ background: url(../Images/about-us/Mica.webp); background-size: cover; background-position: center;}

.about-profile{
    position: relative;
    height:13rem;
    width:13rem;
}

.about-profile::after{
    position: absolute;
    background-color: rgba(255, 255, 255, .15);  
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    bottom: -2rem;
    right: -2rem;
    font-size:2rem;
    padding:1rem;
    text-align: center;
}

.about-profile:first-child::after{ content:"Alex";}
.about-profile:nth-child(2)::after{ content:"Maria"; }
.about-profile:nth-child(3)::after{ content:"Damian";}
.about-profile:nth-child(4)::after{ content:"Mica";}

.about-us{
    flex-direction: column;
    padding:var(--padding-el);
}

.about-us h1{ text-align: center; }
.about-us h1, .about-us p{
    color:white;
}

/* Cabana si gradina*/

.cabana{
    display: flex;
    align-items: center;
    color:white;
    background: var(--color-1);
    padding:0.25rem;
}

.cabana:nth-child(2){ margin: var(--padding-el) 0;}

.cabana img{
    flex:1;
    width:30%;
    height:auto;
}

.cabana p{
    flex:2;
    padding:1.5rem;
}

/* Prices */

.prices{
    background: var(--color-4);
}
.cards-wrapper {
    display: flex;
    justify-content: center;
}

.card{
    background:white;
    margin: 0 0.5em;
    box-shadow: 4px 8px 10px 0 rgba(22, 22, 26, 0.18);
    border: none;
    border-radius: 0;
    min-width: calc(var(--padding-el)*5);
}
.card, .card-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:0;
}

.card-body{
    justify-content: space-between;
}

.card img {
    height: auto;
    width: 50%;
    padding:1rem;
}

.carousel-inner{
    margin-bottom: calc(var(--padding-el)*2);
}

.carousel-control-prev,
.carousel-control-next {
    background-color: #e1e1e1;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.card-body p, .card-body h5:first-child{
    color:var(--color-2);
}

.card h5{
    text-align: center;
    font-weight: 600;
    margin-bottom: 0;
}
.card p{
    padding:calc(var(--padding-el)/2);
    text-align: center;
}
.pret{
    background:var(--color-3);
    color:var(--color-1);
    text-align: center;
    width: 100%;
    padding:1rem;
}
/* USP - facilities */

.usp{
    position: relative;
    background-color: var(--color-1);
    border-top:var(--padding-el) solid var(--color-2);
}

.text-row{
    color:white;
    flex-direction: column;
    text-align: center;
}

.usp-facility{
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--color-1);
    padding:0rem var(--padding-el) var(--padding-el) var(--padding-el);
}

.usp-facility img{
    height:5rem;
    margin-bottom:1rem;
}

.usp-facility h4{
    position: relative;
    max-width:12rem;
}

.usp .icon-trees{
    height:calc(var(--padding-el)*3);
    position: absolute;
}

.usp .icon-trees:nth-child(1){ right:0; top:calc(var(--padding-el)*(-4)); }
.usp .icon-trees:nth-child(2){ right:calc(var(--padding-el)*2.3); top:calc(var(--padding-el)*(-4)); }
.usp .icon-trees:nth-child(3){ right:calc(var(--padding-el)*5.3); top:calc(var(--padding-el)*(-4)); }
.usp .icon-trees:nth-child(4){ left:0; top:calc(var(--padding-el)*(-4)); }
.usp .icon-trees:nth-child(5){ left:calc(var(--padding-el)*2.3); top:calc(var(--padding-el)*(-4)); }
.usp .icon-trees:nth-child(6){ left:calc(var(--padding-el)*5.3); top:calc(var(--padding-el)*(-4)); }

/* Location */
.location{
    min-height:45rem;
}

.location-map{
    display: grid;
    place-items: center;
}

.location-map iframe{
    height:500px;
}

.location-info{
    display: flex;
    flex-direction: column;
    color:white;
    padding:var(--padding-el) var(--padding-el) 0rem var(--padding-el);
}

.location-info p{
    padding: 1rem 0rem 0rem 0rem;
}

.location-codes{
    display: flex;
    padding:1rem 0rem;
}

.qr-code{
    width:10rem;
}

.qr-code{
    height: 100%;
}

/* Foooter */
.footer-contact{
    color:white;
}
.contact-info{
    display: flex;
    padding:1rem;
}
.contact-text{
    padding:var(--padding-el);
    justify-content: unset;
}
.contact-text p{ text-align: center; max-width:15rem;}

.contact-info img{
    max-width:50%;
}

.contact--icons{
    display: flex;
}

.contact--icons img{
    height:3rem;
}

.contact--icons span{
    line-height: 3rem;
}
.footer-contact, .contact-text{
    flex-direction: column;
}


/* Copyright*/
.copyright--row{
    border-top:1px solid white;
    padding:0;
}

.copyright{
    color:white;
}
.copyright p{ text-align: center;}
.copyright p span img{
    height:2rem;
}

.copyright--logo img{
    height:6rem;
}

@media screen and (max-width: 1200px){
    .cabana p{
        flex:1;
    }
    .cabana img{
        width:40%;
    }
}

@media screen and (max-width: 992px){
    .card{
        width:clamp(30vw,50vw,60vw);
        margin-top:1rem;
    }
    .card h5{
         font-size:clamp(0.5rem,1rem,1.5rem);
    }
    .cards-wrapper{
        flex-direction: column;
        align-items: center;
    }
    .usp .icon-trees:nth-child(3), .usp .icon-trees:nth-child(6){
        display: none;
    }
    .location-map iframe{
        min-height: 15rem;
    }
    .location-info{
        text-align: center;
        justify-content: center;
    }
    .location-info p{
        max-width: unset;
        padding:0;
        padding-top:var(--padding-el);
    }
    .location-codes{
        align-items: center;
        justify-content: center;
    }
    .qr-code{
        height: 10rem;
    }
}

@media screen and (max-width:768px){
    :root{
        --padding-el:1.5rem;
    }
    ::-webkit-scrollbar{
        width:0;
        height: 0;
    }    
    .container-fluid{
        padding-left:2rem;
    }
    .welcome{
        height: calc(var(--padding-el)*20);
        clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 90%, 50% 100%, 0 90%);
    }
    .cabana{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent;
    }
    .cabana p{
        background: var(--color-1);
    }
    .cabana img, .cabana p{
        width:60%;
    }
    .usp .icon-trees:nth-child(3), .usp .icon-trees:nth-child(6){
        display: block;
    }
    .location-map iframe{
        height:300px;
    }
    .contact-info{
        flex-direction: column;
    }
    .contact-info img{
        padding:0 var(--padding-el);
    }
    .copyright--row{
        padding:var(--padding-el);
    }
}

@media screen and (max-width: 579px){
    p{
        font-size: clamp(0.5rem,0.8rem,1rem);
    }
    :root{
        --padding-el:1rem;
    }
    .welcome{
        background-size:unset;
        background-position:unset;
    }
    .cabana img{
        height:60%;
    }
    .cabana img, .cabana p{
        width:90%;
    }
    .about-profile{
        max-width: 7rem;
        max-height: 7rem;
    }
    .about-profile::after{
        padding:0.4rem;
        font-size:0.9rem;
        bottom: -0.9rem;
        right: -0.9rem;
    }
    .qr-code{
        width:5rem;
        height:5rem;
        font-size:1rem;
    }
    .contact-info img{
        max-width: 12rem;
    }
}

