@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

* {
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
a{
    text-decoration: none;
}
.navbar {
    -webkit-box-shadow: 0 0.5rem 0.375rem -0.375rem rgb(0 0 0 / 40%);
    box-shadow: 0 0.5rem 0.375rem -0.375rem rgb(0 0 0 / 40%);
    -webkit-transition: background 0s ease-in-out 0s, margin-top 0s ease-in-out 0s, opacity 0s ease-in-out 0s;
    transition: background 0s ease-in-out 0s, margin-top 0s ease-in-out 0s, opacity 0s ease-in-out 0s;
    overflow-x: hidden;
    background-color: white;
    /* background-image: linear-gradient(45deg, black 30%, blue 70%); */
}
.navbar-nav a {
    margin-left: 10px;
    font-weight: 500;
    /* color: rgb(117, 113, 113); */
}
.nav-link img {
    width: 25px;
    height: 15px;
}
.navbar-nav a {
    text-decoration: none;
    padding: 10px;
    font-size: 18px;
    font-family: 'Poppins',sans-serif;
    color: rgba(51, 49, 49, 0.884);
}

.navbar-nav a:hover {
    color: #D6961A;
}

:root {
    /* Background Color */
    --primary-color: #212122b9;
    --secondary-color: #a3a190;
    --bg-color: #f4f4f4;
    --bg-white: #fff;
    --bg-black: #000;

    /* Text Style */
    --primary-font: 'Poppins', sans-serif;
    --secondary-font: 'Oswald', sans-serif;
    --tertiary-font: 'Cinzel', serif;
    --primary-text: #212122b9;
    --secondary-text: #D6961A;
    --text-white: #fff;
    --text-black: rgb(79, 79, 79);
    --text-gray: #e4e4e4;
}

.btn2 a {
    color: white !important;
    text-decoration: none;
}
.btn2 {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background-color: #D6961A;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
  }
  
  .btn2:hover {
    background-color: #D6961A;
    color: #D6961A;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }
  h1 {
    font-size: 3.75rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--tertiary-font);
}
h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var( --primary-text);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    font-family: var(--tertiary-font);
}
h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text);
    font-family: var(--secondary-font);
}

h3 span {
    color: var(--secondary-text);
}

h5 {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--secondary-text);
    margin-bottom: .9375rem;
    margin-top: .9375rem;
    font-weight: 600;
    font-family: var(--secondary-font);

}

h6 {
    font-size: .9rem;
    color: var(--text-white);
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--secondary-font);
}

  section {
    padding: 2.111rem 0;
    position: relative;
}
  .footer_wrapper {
    background: url('../img/bg-footer.jpg') rgba(0, 0, 0, 0.671);
    background-position: center 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
}

.footer_wrapper h5 {
    color:white;
    margin-bottom: 1.25rem;
}

.footer_wrapper ul li {
    margin-bottom: .5rem;
    list-style: none;
}

.footer_wrapper .contact-info li a{
    color:white
}

.footer_wrapper .link-widget li a,
.footer_wrapper p {
    color: white;
    font-size: 14px;
    padding-left:1.5rem;
    position: relative;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.footer_wrapper .link-widget li a::before {
    content: '\f105';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0.3rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    
}

.footer_wrapper .link-widget li a:hover {
    margin-left: .625rem;
    color:#D6961A;
}

.footer_wrapper .social-network a {
    width: 2.1rem;
    height: 2.1rem;
    margin: .6rem;
    line-height:2rem;
    font-size: .875rem;
    display: inline-block;
    border: .125rem solid var(--text-gray);
    color: var(--text-gray);
    text-align: center;
    border-radius: 100%;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.footer_wrapper .social-network a:hover {
    background-color: var(--secondary-text);
    border-color: var(--secondary-text);
    color: var(--text-white);
    box-shadow: 0 .625rem .9375rem 0 rgb(0 0 0 / 10%);
    transform: translateY(-0.1875rem);
}

.footer_wrapper .form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--secondary-color);
}

.footer_wrapper .copyright-section {
    background-color:  #dddddd;
    padding: 1.25rem 0 .3125rem;
    text-align: center;
}


.footer_wrapper .copyright-section a {
    color: var(--secondary-text);
}
.head-home {
    position: relative;
    padding: 0 !important;
}
.HeadText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 1000px;
}
.carousel1 {
    width: 100% !important;
    background: url('../img/img1.jpg') rgba(0, 0, 0, 0.541);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 700px;
}

.carousel2 {
    width: 100% !important;
    background: url('../img/img4.jpg')rgba(0, 0, 0, 0.541);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 700px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    margin: 0px;
}

.Seaction-About-1{
    position: relative;
    /* background: linear-gradient(90deg, white 50%, rgba(48, 49, 49, 0.151) 50%); */
}
.Seaction-About-bg{
    position: absolute;
    clip-path: inset(0 57% 0 22%);
    width: 100%;
    height: 120%;
    top: -10px;
    bottom: -10px;
    right: 0;
    background-color: #62666bd2;
    z-index: -1;
}
.About-Section-col{
    position: relative;
}
.About-Section-col img{
    height: 400px;
    margin-left: 20px;
}
.ABOUT-text{
    background-color: #ffffff;
    padding: 20px 30px 20px 30px;
}
.tiles-img{
    overflow: hidden;
}

.tiles-img .col-lg-6 img {
    width: 100%;
    transition: transform 0.4s ease;
    transform-origin: 50% 50%;
}

.tiles-img .col-lg-6 img:hover {
    transform: scale(1.03);
    width: 100%;
}
.menu-column-1{
    background: url('../img/img16.jpg')rgba(0, 0, 0, 0.205);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 100px 100px;
}
.menu-column-2{
    background: url('../img/img20.jpg')rgba(0, 0, 0, 0.205);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 100px 100px; 
}
.menu-column-3{
    background: url('../img/img19.jpg')rgba(0, 0, 0, 0.205);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 100px 100px; 
}
.menu h1{
    font-size: 25px !important;
    line-height: 1.8 !important;
    color: var(--text-white);
}
.menu .col-lg-4{
    position: relative;
}
.menu-text{
position: absolute;
width: 80% !important;
left: 0;
bottom: -5px;
padding: 0;
background-color: #292727;
}
.facilities{
    background: url('../img/bg-facilities.jpg')rgba(0, 0, 0, 0.205);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 50px 50px;
}
.facilities-tab {
  background-color: var(--bg-white);
 padding: 10px 20px;
 margin-bottom: 20px;
}
.facilities-tab h2{
margin-bottom: 0 !important;
font-size: 25px !important;
color: #9c6e12;
}
.facilities-tab p{
    margin-bottom: 0 !important;

    }

    @mixin white-gradient {
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    }
    /*  Animation */
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-250px * 7))}
    }
    .slider {
        background: white;
        height:300px;
        margin: auto;
        overflow:hidden;
        position: relative;
        width: 100%;
        &::before,
        &::after {
            @include white-gradient;
            content: "";
            height: 100px;
            position: absolute;
            width: 200px;
            z-index: 2;
        }
        &::after {
            right: 0;
            top: 0;
            transform: rotateZ(180deg);
        }
        &::before {
            left: 0;
            top: 0;
        }
        .slide-track {
            animation: scroll  linear infinite;
            animation-duration: 35s;
            display: flex;
            width: calc(250px * 14);
        }
    }
    .slide {
      margin-right: 15px !important;
    }
    .title-head{
        font-size: 40px;
        text-align: center;
        padding: 150px 150px;
        color: var(--text-white);
    }
    .head-menu{
      background: url('../img/img7.jpg') rgba(0, 0, 0, 0.541);
        background-position: center 120%;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
        background-attachment: fixed; 
    }
    .Menu button {
        background-color: transparent !important;
    }
    
    .Menu-Icon-2 {
        display: none;
    }
    
    .Menu-Icon-1 {
        margin: 0;
        width: 50px;
    }
    
    .Menu-Button {
        background-color: transparent !important;
    
    }
    
    .Menu-Button:hover {
        color: #D6961A;
    }
    
    .Menu-Button:hover .Menu-Icon-1 {
        display: none;
    }
    
@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}
    .Menu-Button:hover .Menu-Icon-2 {
        border-radius: 30px;
        padding: 3px;
        background-color: #D6961A;
        display: block;
        margin: auto !important;
        width: 50px;
        animation: shake 0.5s;
    }
    
    .Menu-Icon {
        display: inline;
        background-color: transparent;
    }
    
    .Menu-element p {
        text-align: left;
    }
    
    .Menu-element {
        position: relative;
    }
    
    .Menu-element h1 {
        position: relative;
        background-color: white !important;
        z-index: 1000 !important;
    }
    
    .Menu-element-border {
        border-bottom: #16171ba1 2px dotted;
    }
    #butoni1{
       border: none;
    }
    #butoni2{
        border: none;
     }
     #butoni3{
        border: none;
     }
     #butoni4{
        border: none;
     }
     .Menu h1{
        font-size: 25px !important;
        font-family: Arial, normal !important;
        color: #292727e8 !important;
     }
     .Menu-element-border h1{
        font-family: Arial, normal;
        font-size: 17px !important;
        font-weight: 300px !important;
        color: #313131f3;
     }
     .Gallery-head{
        background: url('../img/img10.jpg') rgba(0, 0, 0, 0.541);
          background-position: center 120%;
          background-repeat: no-repeat;
          background-size: cover;
          background-blend-mode: multiply;
          background-attachment: fixed; 
      }
      .transition {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        transition: all 0.5s;
    }
    
    .thumb {
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    
    .read-btn {
        background: none;
        border: 0;
        font-family: 'Poppins', sans-serif;
        color: white;
        letter-spacing: 2px;
        font-weight: bold;
    }
    .head-About{
        background: url('../img/img8.jpg') rgba(0, 0, 0, 0.541);
        background-position: center 120%;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
        background-attachment: fixed; 
    }
    .head-Contact{
        background: url('../img/img6.jpg') rgba(0, 0, 0, 0.541);
        background-position: center 120%;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
        background-attachment: fixed; 
    }
    .Constacts-Section{
        position: relative;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .contact-line{
    position: absolute;
    clip-path: inset(32% 0 26% 0);
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
    right: 0;
    background: url('../img/aUsIbWZ3ycI.jpg') rgba(0, 0, 0, 0.541);
    background-position: center 120%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    z-index: -1;  
    }
    .Contact-Section-text{
        background-color: #ffffff;
        padding: 10px 30px 10px 30px;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
        
    }
    .Maps-Contacts iframe{
        position: relative;
        left: -5% !important;
       top: -10% !important;
       z-index: 100;
       box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }
    .Contact-Section-location i{
        color: rgba(39, 37, 37, 0.788);
    }
    .Contact-Section-icons h5{
        color: rgba(39, 37, 37, 0.788);
    }

    /* animation */
.fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
  }
  .fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
  }
  .fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
  }
  .fadeinup{
    opacity: 0;
    transform: translateY(100px);
    transition: all 1.2s ease-out;
  }
  .fade-in{
    opacity:0;
    transition: all 1.3s ease-in;
  }
  .active-left,.active,.active-right,.active-down,.active-up{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
  }
  .fadein{
  opacity: 0;
  }


    @media only screen and (max-width: 1199px){
        .About-Section-col img{
            height: 320px;
            margin-left: 20px;
        }
    }
    @media only screen and (max-width: 991px){
        .tiles-img img{
            margin-bottom: 10px;
        }
        .About-Section-col {
            margin: auto !important;
            justify-content: center !important;
        }
        h1 {
            font-size: 3.1rem !important;
            font-weight: 600;
            text-transform: uppercase;
            font-family: var(--tertiary-font);
        }
        .HeadText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 800px;
        }
        .menu .col-lg-4{
            margin-bottom: 15px !important;
        }
        .gallery h1{
            font-size: 25px !important;
        }
        .Maps-Contacts iframe{
            position: relative;
            left: 0% !important;
           top: 5% !important;
           z-index: 100;
           box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
        }
        .Contact-Section-text h1{
          font-size: 25px !important;
        }
    }
    @media only screen and (max-width: 767px){
        .HeadText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 600px;
        }
        .title-head{
            font-size: 25px !important;
            text-align: center;
            padding: 150px 0px;
            color: var(--text-white);
        }
    }
    @media only screen and (max-width: 575px){
        .HeadText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 450px;
        }
        .Menu-Button p {
            color: #292a2b;
        }
    
        .Menu-Button:hover {
            color: #D6961A;
        }
    
        .Menu-Button:hover p {
            color: #D6961A;
        }
    
        .Menu-Button:active {
            border-bottom: #D6961A 2px solid;
        }
    
        .Menu-Row .col-lg-3 {
            display: inline-block;
            width: 120px;
        }
    }
    @media only screen and (max-width: 430px){
        .Menu-Row .col-lg-3 {
            display: inline-block;
            width: 100px;
        }
        .HeadText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 350px;
        }
        .head-home h2{
          font-size: 22px !important;
        }
        .slide img{
            width: 250px;
        }
        @mixin white-gradient {
            background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        }
        /*  Animation */
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-250px * 7))}
        }
        .slider {
            background: white;
            height:250px;
            margin: auto;
            overflow:hidden;
            position: relative;
            width: 100%;
            &::before,
            &::after {
                @include white-gradient;
                content: "";
                height: 100px;
                position: absolute;
                width: 200px;
                z-index: 2;
            }
            &::after {
                right: 0;
                top: 0;
                transform: rotateZ(180deg);
            }
            &::before {
                left: 0;
                top: 0;
            }
            .slide-track {
                animation: scroll  linear infinite;
                animation-duration: 35s;
                display: flex;
                width: calc(250px * 14);
            }
    }
    .head-menu{
        background: url('../img/img7.jpg') rgba(0, 0, 0, 0.541);
          background-position: center 120%;
          background-repeat: no-repeat;
          background-size: cover;
          background-blend-mode: multiply;
          background-attachment: none; 
      }
      .Gallery-head{
        background: url('../img/img10.jpg') rgba(0, 0, 0, 0.541);
          background-position: center 120%;
          background-repeat: no-repeat;
          background-size: cover;
          background-blend-mode: multiply;
          background-attachment: none; 
      }
    .head-About{
        background: url('../img/img8.jpg') rgba(0, 0, 0, 0.541);
        background-position: center 120%;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
        background-attachment: none; 
    }
    .head-Contact{
        background: url('../img/img6.jpg') rgba(0, 0, 0, 0.541);
        background-position: center 120%;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
        background-attachment: none; 
    }
    .title-head h1{
        font-size: 35px !important;
        text-align: center;
        color: var(--text-white);
    }
}