@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
body{
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    color:black;
}
.header-top{
    background-color: #D2E8DF;
    padding:5px 0px;
}
.header-contact{
    display:flex;
    align-items: center;
}
.header-contact>ul{
    padding:0px;
    margin:0px;
    list-style: none;
    display:flex;
    align-items: center;
}
.header-contact>ul>li{
    display:flex;
    margin-right:10px;
}
.header-contact>ul>li:last-child{
    margin-right:0px;
}
.header-contact>ul>li>a{
    display:flex;
    color:black;
    font-size:13px;
    text-decoration: none;
    align-items: center;
    font-weight: 300;
}
.header-contact>ul>li>a>i{
    margin-right:7px;
    font-size:15px;
}
.header-social{
    display:flex;
    justify-content: flex-end;
}
.header-social>ul{
    display: flex;
    justify-content: flex-end;
    list-style: none;
    margin: 0px;
    padding:0px;
}
.header-social>ul>li{
    display:flex;
}
.header-social>ul>li>a{
    display: flex;
    width:30px;
    height:30px;
    border:2px solid white;
    background-color: black;
    align-items: center;
    justify-content: center;
    font-size:12px;
    color:white;
    border-radius: 50%;
    text-decoration: none;
    transition: all .3s;
}
.header-social>ul>li>a:hover, .header-social>ul>li>a:focus{
    background-color:white;
    color:black;
    transition: all .3s;
}
.header-bottom{
    background-color:white;
}
a.navbar-brand>img{
    height:70px;
}
.bg-light{
    background-color:white!important;
}
ul.navbar-nav>li>a.nav-link{
    padding-left:.75rem;
    padding-right:.75rem;
}
ul.navbar-nav>li:last-child>a.nav-link{
    padding-right:0px;
}
.dropdown-toggle::after{
    display:none;
}
.slider{
    padding:0px;
}
.carousel-item>img{
    width:100%;
}
.home-about{
    margin-top:80px;
    margin-bottom:80px;
}
.about-video>a{
    display: flex;
    position:relative;
}
.about-video>a>img{
    width:100%;
}
.home-about-area{
    background-color:white;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.16);
    margin-right:-15vh;
    padding:40px;
    position: relative;
    z-index: 5;
    height:35vh
}
.home-about>.row{
    align-items: center;
}
.home-about-area>h1{
    font-size:30px;
    color:black;
    font-weight: 800;
    margin-bottom:25px;
}
.content-img.column-4-2{
    padding:5px 5px 5px 0px;
}
.content-img.column-4-2>.img{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width:100%;
    height:100%;
}
.content-img>.img>img{
    width:100%;
}
.content-text-area.column-4-2{
    padding:5px 0px 5px 5px;
}
.content-text{
    display: flex;
    width:100%;
    height:100%;
}
.green{
    background-color:#B9C428;
}
.blue{
    background-color:#51B7C7;
}
.white{
    background-color:white;
}
.content-img.column-4-1{
    padding:5px 5px 5px 0px;
}
.content-img.column-4-1>.img{
    overflow: hidden;
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}
.content-text-area.column-4-1{
    padding:5px;
}
.content-second-img.column-4-1{
    padding:5px 0px 5px 5px;
}
.content-second-img.column-4-1>.img{
    overflow: hidden;
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}
.content-second-img>.img>img{
    height:100%;
}
.content-second-text-area{
    padding:5px 0px 5px 10px;
}
.video-area>a{
    display:flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height:100%;
}
.video-area>a>img.video{
    width:100%;
}
.video-area>a>span.play{
    position: absolute;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.6);
    outline:10px solid rgba(222,33,23,0.6);
    color:#DE2117;
    width:75px;
    height:75px;
    top:40%;
    left:40%;
    border-radius: 50%;
    font-size:22px;
    transition: all .3s;
}
.video-area>a:hover>span.play, .video-area>a:focus>span.play{
    background-color: rgba(255,255,255,1);
    outline:10px solid rgba(222,33,23,1);
    transition: all .3s;
}
.column-4-2.video-area{
    padding:5px 5px 5px 0px;
}
.column-4-2.right-img{
    padding:5px 0px 5px 5px;
    position:relative;
}
.column-4-2.right-img>img{
    width:100%;
}
.content-text.green{
    padding:55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content-text.green{
    display:flex;
   align-items: center;
   flex-direction: column;

}
.content-text.green>h1{
    width:100%;
    margin-top:0px;
    margin-bottom:20px;
    padding:0px 10px;
    color:white;
    font-size:48px;
    font-weight: 200;
    text-align: center;
}
span.line{
    height:2px;
    background-color: white;
    width:56px;
    display: flex;
    margin-bottom:30px;
}
.content-text.green>p{
    color:White;
    font-size:16px;
    font-weight: 300;
    text-align: center;
    line-height: 25px;
}
.content-text.green>a.button{
    background-color: transparent;
    border:1px solid white;
    padding:10px 40px;
    color:white;
    font-size:14px;
    font-weight: 300;
    border-radius: 15px;
    text-decoration: none;
    line-height:21px;
    margin-top:20px;
    transition: all .3s;
}
.content-text.green>a.button:hover, .content-text.green>a.button:focus{
    background-color:white;
    color:#B9C428;
    transition: all .3s;
}


.content-text.blue{
    padding:25px
}
.content-text.blue{
    display:flex;
   align-items: center;
   flex-direction: column;

}

.content-text.blue>span.line{
    height:2px;
    background-color: white;
    width:56px;
    display: flex;
    margin-bottom:15px;
}
.content-text.blue>h2{
    width:100%;
    margin-top:0px;
    margin-bottom:15px;
    padding:0px 10px;
    color:white;
    font-size:38px;
    font-weight: 200;
    text-align: center;
}
.content-text.blue>p{
    color:White;
    font-size:16px;
    font-weight: 300;
    text-align: center;
    line-height: 25px;
}
.content-text.blue>a.button{
    background-color: transparent;
    border:1px solid white;
    padding:10px 50px;
    color:white;
    font-size:14px;
    font-weight: 300;
    border-radius: 15px;
    text-decoration: none;
    line-height:21px;
    margin-top:10px;
    transition: all .3s;
}
.content-text.blue>a.button:hover, .content-text.blue>a.button:focus{
    background-color:white;
    color:#51B7C7;
    transition: all .3s;
}





.content-text.white{
    padding: 25px;
}
.content-text.white{
    display:flex;
   align-items: center;
   flex-direction: column;

}

.content-text.white>span.line{
    height:2px;
    background-color: black;
    width:56px;
    display: flex;
    margin-bottom:15px;
}
.content-text.white>h3{
    width:100%;
    margin-top:0px;
    margin-bottom:15px;
    padding:0px 10px;
    color:black;
    font-size:38px;
    font-weight: 200;
    text-align: center;
}
.content-text.white>p{
    color:black;
    font-size:16px;
    font-weight: 300;
    text-align: center;
    line-height: 25px;
}
.content-text.white>a.button{
    background-color: transparent;
    border:1px solid black;
    padding:10px 50px;
    color:black;
    font-size:14px;
    font-weight: 300;
    border-radius: 15px;
    text-decoration: none;
    line-height:21px;
    margin-top:10px;
    transition: all .3s;
}
.content-text.white>a.button:hover, .content-text.white>a.button:focus{
    background-color:black;
    color:white;
    transition: all .3s;
}





.video-gal>.white{
    padding:25px 15px;
}
.video-gal>.white{
    display:flex;
   align-items: flex-start;
   flex-direction: column;

}
.video-gal>.white>span.line{
    height:2px;
    background-color: black;
    width:56px;
    display: flex;
    margin-bottom:15px;
}
.video-gal>.white>h4{
    width:100%;
    margin-top:0px;
    margin-bottom:15px;
    color:black;
    font-size:26px;
    font-weight: 800;
    text-align: left;
}
.video-gal>.white>p{
    color:black;
    font-size:16px;
    font-weight: 300;
    text-align: left;
    line-height: 25px;
}
.video-gal>.white>a{
    color:black;
    font-size:14px;
    font-weight: 300;
    text-decoration: none;
    line-height:21px;
    margin-top:10px;
    transition: all .3s;
}
.video-gal>.white>a:hover, .video-gal>.white>a:focus{
    color:red;
    transition: all .3s;
}
.right-img>.img{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;
}
.right-img>.img>img{
    height:100%;
}
.video-gal-area{
    display: flex;
    height:100%;
}
.event-area{
    background-color: #F2F2F2;
    padding:70px 15px;
}
.event-area .row{
    display: flex;
    align-items: center;
}
.event-img>img{
    width:100%;
}
.event-contents>span{
    color:#F32B56;
    font-size:16px;
    font-weight: 600;
    display: flex;
    width: 100%;
    margin-bottom:5px;
}
.event-contents>h5{
    font-size:30px;
    font-weight: 700;
    color:black;
    margin-top:0px;
    margin-bottom:15px;
}
.event-contents>p{
    font-size:14px;
    line-height: 21px;
    color:black;
    margin-top:0px;
    margin-bottom:30px;
}
.event-contents>ul{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    list-style: none;
    margin-left:0px;
    padding-left:0px;
}
.event-contents>ul>li.event{
    background-color:white;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.16);
    padding:20px;
    display: flex;
    margin-bottom:30px;
}
.event-date{
    width:107px;
    height:107px;
    border:1px solid #636363;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:54px;
    font-weight: 800;
    color:black;
    flex-direction: column;
    line-height: 36px;
    padding-top:10px;
}
.event-date>span{
    font-size:27px;
}
.event-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0px 15px;
}
.event-text>a{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0px 15px;
    color:black;
}
.event-text>a>h6{
    font-size:24px;
    font-weight: 700;
    color:black;
}
.event-info{
    display:flex;
    width:100%;
    align-items: center;
    justify-content: flex-start;
}
.event-text>a .event-info-date{
    display:flex;
    font-size:14px;
    font-weight: 400;
    align-items: center;
}
.event-info-date>i{
    width:16px;
    font-size:16px;
    color:#F32B56;
    margin-right:5px;
}
.event-text>a .event-location{
    display:flex;
    font-size:14px;
    font-weight: 400;
    padding-left:15px;
    align-items: center;
}
.event-location>i{
    width:16px;
    font-size:16px;
    color:#F32B56;
    margin-right:5px;
}
.event-text>a>span{
    display:flex;
    align-items: center;
    width: 100%;
    color:#F32B56;
    font-size:12px;
    text-decoration: none;
    margin-top:7px;
    transition: all .3s;
}
.event-text>a>span>i{
    font-size:12px;
    margin-left:10px;
}
.event-text>a:hover>span, .event-text>a:focus>span{
    color:black;
    transition: all .3s;
}
.event-contents>ul>li.event-button{
    display: flex;
    width:100%;
    justify-content: center;
    margin-top:15px;
}
.event-contents>ul>li.event-button>a{
    background-color: transparent;
    padding:15px 70px;
    border:1px solid black;
    border-radius: 20px;
    color:black;
    text-decoration: none;
    transition: all .3s;
}
.event-contents>ul>li.event-button>a:hover, .event-contents>ul>li.event-button>a:focus{
    background-color: black;
    color:#F2F2F2;
    transition: all .3s;
}
.blog-area{
    padding:80px 15px;
}
.blog>a{
    display: flex;
    flex-direction: column;
    width:100%;
    color:black;
    text-decoration: none;
    transition: all .3s;
}
.blog>a:hover, .blog>a:focus{
    display: flex;
    flex-direction: column;
    width:100%;
    color:#F32B56;
    text-decoration: none;
    transition: all .3s;
}
.blog>a>.blog-img{
    width:100%;
}
.blog>a>.blog-img>img{
    width:100%;
}
.blog>a>.blog-text{
    display: flex;
    flex-direction: column;
}
.blog>a>.blog-text>h6{
    font-size:16px;
    font-weight: 600;
    margin-top:15px;
}
.blog>a>.blog-text>span.line{
    height:1px;
    background: black;
    width:64px;
    margin-bottom:10px
}

.blog>a:hover>.blog-text>span.line, .blog>a:focus>.blog-text>span.line{
    height:1px;
    background: #F32B56;
    width:64px;
    margin-bottom:10px
}
.blog>a>.blog-text>p{
    font-size:14px;
    font-weight: 400;
}
.footer{
    border-top:1px solid #F32B56;
    background-color:#F2F2F2;
    padding:25px 15px;
}
.foot-logo{
    display: flex;
    width: 70%;
}
.foot-logo>a{
    display: flex;
    width: 100%;
}
.foot-logo>a>img{
    width:100%;
}
.foot-about{
    display: flex;
    width:100%;
    font-size:13px;
    color:black;
    margin-top:15px;
}
ul.foot-social{
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin: 20px 0px;
    padding:0px;
}
ul.foot-social>li{
    display:flex;
}
ul.foot-social>li>a{
    display: flex;
    width:30px;
    height:30px;
    border:2px solid white;
    background-color: black;
    align-items: center;
    justify-content: center;
    font-size:12px;
    color:white;
    border-radius: 50%;
    text-decoration: none;
    transition: all .3s;
}
ul.foot-social>li>a:hover, ul.foot-social>li>a:focus{
    background-color:white;
    color:black;
    transition: all .3s;
}
.foot-menu>span.foot-title{
    font-size:14px;
    font-weight: 600;
    color:black;
    border-bottom:1px solid black;
    padding-bottom:3px;
    width:100%;
    display:flex;
    margin-bottom:15px;
}
.foot-menu{
    padding:0px 10px;
}
.foot-menu>ul{
    margin:0px;
    padding:0px;
    list-style: none;
}
.foot-menu>ul>li{
    display: flex;
    width:100%;
    margin-bottom:5px;
}
.foot-menu>ul>li>a{
    display: flex;
    color:black;
    font-size:13px;
    font-weight: 400;
    text-decoration: none;
    align-items: flex-start;
    transition: all .3s;
}
.foot-menu>ul>li>a::before{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f101";
    color:black;
    font-size:8px;
    margin-right:10px;
    transition: all .3s;
    margin-top:4px;
}
.foot-menu>ul>li:hover>a, .foot-menu>ul>li:focus>a, .foot-menu>ul>li:hover>a::before, .foot-menu>ul>li:focus>a::before{
    color:#F32B56;
    transition: all .3s;
}
.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
ul.foot-contact{
    margin:15px 0px 30px;
    padding:0px;
    display: flex;
    width:100%;
    flex-direction: column;
}
ul.foot-contact>li{
    display: flex;
    color:black;
    font-size:13px;
    font-weight: 400;
    margin-bottom:7px;
    align-items: flex-start;
}
ul.foot-contact>li>i{
    color:#F32B56;
    font-size:14px;
    width:40px;
    margin-top:3px;
    display: flex;
}
ul.foot-contact>li>a{
    display: flex;
    color:black;
    font-size:10px;
    font-weight: 400;
    text-decoration: none;
    transition: color .3s;
}
ul.foot-contact>li>a:hover, ul.foot-contact>li>a:focus{
    color:#F32B56;
    transition: color .3s;
}
ul.foot-contact>li>a>i{
    color:#F32B56;
    font-size:14px;
    width:25px;
    margin-top:3px;
    display: flex;
    transition: color .3s;
}
ul.foot-contact>li>a:hover>i, ul.foot-contact>li>a:focus>i{
    color:black;
    transition: color .3s;
}
.copyright-area{
    background-color:#D2E8DF;
    padding:10px 0px;
}
.copyright{
    font-size:12px;
    color:black;
}
.design{
    justify-content: flex-end;
    color:black;
    font-size:12px;
    text-align: right;
}
.design>a{
    color:black;
    text-decoration: none;
    transition: color .3s;
}
.design>a:hover, .design>a:focus{
    color:#F32B56;
    transition: color .3s;
}
.pageheader{
    padding:0px;
}
.pageheader>img{
    width:100%;
}
.breadcrumb-area{
    background-color:#f2f2f2;
    padding:20px 15px;
}
.dropdown-item {
    font-size:14px;
    color:rgba(0,0,0,.55);
    transition: all .3s;
}
.dropdown-item:hover, .dropdown-item:focus{
    background:none;
    color:rgba(0,0,0,1);
    transition: all .3s;
}
.breadcrumb{
    margin-bottom:0px;
}
a.breadcrumb-item{
    font-size: 13px;
    text-decoration: none;
    color: #333;
}
.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    color: #6c757d;
    content: var(--bs-breadcrumb-divider, ">");
}
.breadcrumb-item.active{
    font-size:13px;
    color:#F32B56;
}
.pagecontent{
    margin-top:30px;
    margin-bottom:80px;
}
.content>h1{
    font-size:28px;
    font-weight: 200;
    color:#333;
    text-align: center;
    margin-bottom:20px;
}
.atolye-img{
    display:inline-block;
    width:100%;
}
.atolye-img>img{
    width:100%;
}
.spot{
    display:inline-block;
    width:100%;
    text-align: center;
    margin-bottom:15px;
    font-weight: 300;
}
.cont-text{
    display:inline-block;
    width:100%;
    margin-top:20px;
    margin-bottom:30px;
    color:#333;
}
.right-side>h3{
    font-size:18px;
    color:#F32B56;
    border-bottom:1px solid #F32B56;
    padding-bottom:3px;
}
.right-side>ul{
    list-style:none;
    margin:15px 0px 10px;
    padding:0px;
}
.right-side>ul>li>a{
    padding:2px 0px;
    display:flex;
    color:#333;
    text-decoration: none;
    transition:all .3s;
}
.right-side>ul>li>a:hover, .right-side>ul>li>a:focus{
    color:#F32B56;
    transition:all .3s;
}
.right-side>ul>li>a::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f101";
    color: #333;
    font-size: 8px;
    margin-right: 10px;
    transition: all .3s;
    margin-top: 4px;
    transition:all .3s;
}
.right-side>ul>li:hover>a::before, .right-side>ul>li:focus>a::before{
    color:#F32B56;
    transition:all .3s;
}
.koc-box{
    padding:7px;
}
.koc-box>a>.koc-bilgi{
    background-color:#ddd;
    padding:15px;
    display: inline-block;
    width:100%;
    transition: all .3s;
}
.koc-box>a:hover>.koc-bilgi, .koc-box>a:focus>.koc-bilgi{
    background-color:#F32B56;
    padding:15px;
    display: inline-block;
    width:100%;
    transition: all .3s;
}
.koc-bilgi>span.isim{
    font-size:15px;
    font-weight: 400;
    color:#333;
    transition: all .3s;
}
.koc-box>a:hover>.koc-bilgi>span.isim,.koc-box>a:focus>.koc-bilgi>span.isim{
    color:white;
    transition: all .3s;
}
.koc-bilgi>span.unvan{
    font-size:13px;
    font-weight: 300;
    color:#F32B56;
    transition: all .3s;
}
.koc-box>a:hover>.koc-bilgi>span.unvan, .koc-box>a:focus>.koc-bilgi>span.unvan{
    color:white;
    transition: all .3s;
}
.koc-img{
    display:inline-block;
    width:100%;
}
.koc-img>img{
    width:100%;
}
.etk-img>img{
    width:100%;
}
.etkinlik-str{
    padding:0px;
    border-bottom:1px solid #e5e5e5;
}
.etk-info{
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.etk-date{
    background-color:rgb(243, 43, 86);
    padding:5px;
    color:white;
    font-size:14px;
    display: inline-block;
    width:auto;
    margin-bottom:10px;
}
.etk-info{
    margin-left:30px;
}
.etk-info>p{
    color:#7f7f7f;
    font-weight: 300;
}
.etk-info>h3{
    font-size:24px;
    font-weight: 300;
    margin-top:5px;
}
.galbox{
    padding:7px;
}
.galbox>a{
    display: flex;
}
.galbox>a>img{
    width:100%;
}
.blog{
    padding:15px;
}
.galbox>a{
    position: relative;
}
.galbox>a>.img-overlay{
    background-color:rgba(243, 43, 86, 0);
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
}
.galbox>a:hover>.img-overlay,.galbox>a:focus>.img-overlay{
    background-color:rgba(243, 43, 86, .6);
    transition: all .3s;
}
.img-overlay>span.play {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0);
    outline: 5px solid rgba(255,255,255,1);
    color: white;
    width: 50px;
    height: 50px;
    top: 40%;
    left: 40%;
    border-radius: 50%;
    font-size: 22px;
    transition: all .3s;
}
.header-map{
    padding:0px;
}
.google-mapss {
    position: relative;
    padding-bottom: 27%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-mapss iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
.iletisim-formu h3{
    font-size:18px;
    font-weight: 400;
    color:#f32b56;
    border-bottom:1px solid #f32b56;
    padding-bottom:3px;
}
.form-str{padding:5px;}
.form-str>button.btn.btn-success{
    background-color: transparent;
    padding: 10px 60px;
    border: 1px solid #f32b56;
    border-radius: 18px;
    color: #f32b56;
    text-decoration: none;
    transition: all .3s;
    float:right;
    font-weight: 300;
}
.form-str>button.btn.btn-success:hover, .form-str>button.btn.btn-success:focus{
    outline:none;
    box-shadow: none;
    background-color:#f32b56;
    color:white;
    transition: all .3s;
}
.form-str>input.form-control{
    height:40px;
    border-color:#f32b56;
    font-size:14px;
}
.form-str>input.form-control:focus, .form-str>input.form-control:hover, .form-str>input.form-control:active{
    outline:none;
    box-shadow: none;
}
.form-str>textarea.form-control{
    height:100px;
    resize:none;
    border-color:#f32b56;
    font-size:14px;
    font-weight: 300;
}
.form-str>textarea.form-control:focus, .form-str>textarea.form-control:hover, .form-str>textarea.form-control:active{
    outline:none;
    box-shadow: none;
}
.form-str>input.form-control::placeholder, .form-str>textarea.form-control::placeholder{
    font-size:14px;
    font-weight: 300;
}
.about-video>a>span.play {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.6);
    outline: 10px solid rgba(222,33,23,0.6);
    color: #DE2117;
    width: 75px;
    height: 75px;
    top: 40%;
    left: 55%;
    border-radius: 50%;
    font-size: 22px;
    transition: all .3s;
}