/*importing Avenir & Opensans*/
@import url("https://use.typekit.net/cfy7hyu.css");

:root {
    --c-primary: #4b4a4a;
    --c-secondary: #004437;
    --c-navlink: #4b4a4a;
    --c-white: #ffffff;
    --c-black: #000000;
    --c-header: #7b4325;
    --c-textcolor: #424242;
    --f-opensans: "open-sans", sans-serif;
    --f-avenir: "avenir-lt-pro", sans-serif;
}

html {overflow-x: hidden;}
body {font-weight: normal;margin: 0;padding: 0;position: relative;font-family: var(--f-avenir);font-size: 15px}
a {text-decoration: none;transition: all 0.3s ease;}
* {box-sizing: border-box;scroll-margin-top: 130px;}
#about {box-sizing: border-box;scroll-margin-top: 280px;}
img:not(header), .nav-link {transition: all 0.3s ease;}
h1,h2,h3,h4,h5,h6{font-family:var(--f-avenir);}
p{margin:0}
button, a {cursor: pointer}
.text__primary {color: var(--c-textcolor)!important;}
.bg__primary {background: var(--c-primary)!important;}
.bg__secondary {background: var(--c-secondary)!important;}
.bg__black {background: var(--c-black)!important;}
.text__primary2 {color: var(--c-primary2);}
.text__secondary {color: var(--c-secondary);}
.btn__primary {border: 1px solid var(--c-white);color: var(--c-white);transition: 0.7s ease-in-out;border-radius:0;font-size:20px;background:var(--c-black);padding:5px 30px}
.btn__booknow {border: 1px solid var(--c-white);color: var(--c-white);transition: 0.7s ease-in-out;border-radius:0;font-size:16px;color: var(--c-secondary);background:var(--c-white);padding:5px 30px}
.btn__booknow:hover {border: 1px solid var(--c-white)}
.btn__primary:hover, .btn__primary:focus, .btn__primary:active {color: var(--c-secondary);background:var(--c-white);}
.btn__secondary {background:var(--c-primary);border: 1px solid var(--c-primary);color: var(--c-white);transition: 0.7s ease-in-out;border-radius:0;font-size:14px}
.btn__secondary:hover, .btn__secondary:focus, .btn__secondary:active {border: 1px solid var(--c-primary);color: var(--c-primary);}
.text__italic{font-style:italic}
.fw_500{font-weight:500}
.fs_14{font-size:14px}
.fw-bold{font-weight:800 !important}

@media (min-width: 1400px) {
    .row-cols-xxl-4 > *{width:20% !important}
}

@media (max-width: 767px) {
    .fade-in-section{opacity:1;animation-timeline: initial !important;}
}
@keyframes fadeUp {
    to {opacity: 1;transform: translateY(0);}
}

@keyframes fadeInScroll {
    from {opacity: 0;transform: translateY(20px);}
    to {opacity: 1;transform: translateY(0);}
}

@keyframes borderAnim {
  0% {transform: scaleX(0);transform-origin: left;opacity: 0;}
  50% {transform: scaleX(1);opacity: 1;}
  100% {transform: scaleY(1);transform-origin: top;opacity: 1;}
}

.fade-in-section {animation: fadeInScroll linear forwards;animation-timeline: view();animation-range: entry 0% cover 30%;opacity: 0;}