/*
palet: pri: #00b45f sec: #4f5151 org: #ea5c2d
*/

body {
  background-color: #fff;
  font-family: 'Poppins', sans-serif;
  padding-top: 80px;
  font-size: 1rem;
  color: #4f5151;
  font-weight: 300;
}

/* NAV */
#mainNav {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

#mainNav .navbar-nav {
  text-transform: uppercase;
  font-size: .8rem;
}
#mainNav .navbar-nav .nav-item {
  padding-left: 1rem;
  padding-right: 1rem;
}

#mainNav .navbar-brand img {
  height: 48px;
}

#mainNav {
  background-color: rgba(255, 255, 255, 1) !important;
  -webkit-transition: padding-top 0.5s, padding-bottom 0.5s;
  transition: padding-top 0.5s, padding-bottom 0.5s;
}
#mainNav .navbar-brand img {
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
#mainNav.navbar-shrink {
  padding-top: .35rem;
  padding-bottom: .35rem;
  background-color: rgba(255, 255, 255, 1) !important;
  border-bottom: 1px solid #00b45f;
}
#mainNav.navbar-shrink .navbar-brand img {
  height: 36px !important;
}

.rez-active {
  color: #00b45f !important;
}
.rez-active:hover, .rez-active:focus {
  color: #4f5151 !important;
}


/* FOOTER */
.footer-top {
  background-color: #009598;
  color: #fefefe;
}
footer {
  font-size: .9rem;
}

footer img {
  width: 96px;
}

footer a {
  color: #4f5151;
  text-decoration: none;
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

.btn {
  transition: 0.5s;
  transition: background-color 0.5s, color 0.5s;
}

.yukari {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border: none !important;
  border-radius: 18px;
  background-color: #00b45f;
  text-align: center;
  color: #fff;
  transition: 0.5s;
}

.yukari:hover {
  transform: translate(0, -5px);
  background-color: transparent;
  color: #00b45f;
  border: 1px solid #00b45f;
}

.pia {
  float: right;
}

.pia:hover {
  text-decoration: none;
}

.pia img {
  max-height: 20px;
  padding-left: 5px;
}

/* HOME */
.carousel-caption {
  bottom: 35%;
}
.carousel-caption h5 {
  background-color: rgba(0, 0, 0, 0.25);
  margin: 0;
}
.carousel-caption h5 {
  padding: 2rem;
}
.carousel-item.active .carousel-caption {
  background: 50% 100% / 50% 100% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: reveal 2000ms ease-in-out forwards 200ms;
}
.carousel-item.active .carousel-caption h5 {
  animation: glow 3500ms linear infinite 1000ms
}
@keyframes reveal {
  80%{
  }
  100% {
    background-size: 300% 300%;
    text-shadow: 0 0 1px #fff;
  }
}
@keyframes glow {
  40% {
    color: #fff;
    text-shadow: 0 0 2px #fff;
    letter-spacing: 0px;
  }
}

.box {
  font-size: .9rem;
  /* box-shadow: 0 2px 12px 0 rgb(0 0 0 / 16%); */
  padding: 15px;
  border-top: 3px solid rgba(0, 180, 96, 0.35);
}

.box .ikon {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 72px;
  background-color: #00b45f;
  border-radius: 32px;
  color: #fff;
  margin: 10px 0;
}

.box:hover {
  border-top: 3px solid rgba(0, 180, 96, 0.85);
}

.raise, .box .ikon {
  transition: 0.5s;
}

.raise:hover {
  transform: translate(0, -10px);
  background-color: rgba(0, 180, 96, 0.15);
}

.box:hover .ikon {
  transform: translate(0, -5px);
  background-color: transparent;
  color: #00b45f;
  border: 1px solid #00b45f;
}

p.lightbox-caption {
  background-color:rgba(0, 0, 0, .75) !important;
}

.galeri a {
  text-decoration: none !important;
  font-size: .8rem;
  text-align: center;
  color: #4f5151;
}

.galeri a span {
  display: inline-block;
  margin-top: .5rem;
}

.par {
  background-position: center; 
  min-height: 20vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
  color: #fff;
}

.par h1 {
  font-weight: 300 !important;
  margin: 0;
  padding: 0;
  text-shadow: 2px 2px 6px #000;
}

.olanaklar {
  background-image: linear-gradient(
		to right bottom, 
		rgba(0, 0, 0, .5), 
		rgba(0, 0, 0, .75)), 
    url(../img/olanaklar.jpg);
}

.kesfedin {
  background-image: linear-gradient(
		to right bottom, 
		rgba(0, 0, 0, .35), 
		rgba(0, 0, 0, .55)), 
    url(../img/hd-kesfedin.jpg);
}

.polonezkoy {
  background-image: linear-gradient(
		to right bottom, 
		rgba(0, 0, 0, .35), 
		rgba(0, 0, 0, .55)), 
    url(../img/hd-polonezkoy.jpg);
}

.odalar {
  background-image: linear-gradient(
		to right bottom, 
		rgba(0, 0, 0, .25), 
		rgba(0, 0, 0, .45)), 
    url(../img/hd-odalar.jpg);
}

.iletisim {
  background-image: linear-gradient(
		to right bottom, 
		rgba(0, 0, 0, .35), 
		rgba(0, 0, 0, .55)), 
    url(../img/hd-iletisim.jpg);
}

.rezervasyon {
  background-image: linear-gradient(
		to right bottom, 
		rgba(0, 0, 0, .35), 
		rgba(0, 0, 0, .55)), 
    url(../img/hd-rezervasyon.jpg);
}

.map-container{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.map-container iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 60px; overflow: hidden;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* TYPO */
h1, h2, h3, h4, h5, h6, .navbar-nav {
  font-family: 'Playfair Display', serif;
}

.text-shadow-light {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

.text-shadow-light {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

.form-select, .form-control {
  font-weight: 300 !important;
}

label {
  font-weight: 400;
}

.vurgu {
  color: #888;
  font-weight: 300 !important;
}

.vurgu strong {
  color: #00b45f;
}

.cizittir {
  width: 5rem;
  height: .5rem;
  border-top: 5px solid #00b45f;
}

/* RENK & OVERRIDE */
.text-primary {
  color: #00b45f !important;
}
.bg-light {
  background-color: #fbfbfb !important;
}
.bg-warning {
  background-color: #ea5c2d !important;
}
.btn-outline-primary {
  --bs-btn-color: #00b45f;
  --bs-btn-border-color: #00b45f;
  --bs-btn-hover-bg: #00b45f;
  --bs-btn-hover-border-color: #00b45f;
  --bs-btn-active-bg: #00b45f;
  --bs-btn-active-border-color: #00b45f;
  --bs-btn-disabled-color: #00b45f;
  --bs-btn-disabled-border-color: #00b45f;
}
.nav-link {
  --bs-nav-link-color: #4f5151;
}
.nav-link:focus, .nav-link:hover {
  --bs-nav-link-hover-color: #777;
}
.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {
  --bs-navbar-active-color: #00b45f;
}
.nav-link:focus, .nav-link:hover {
  --bs-nav-link-hover-color: #191919;
}