@charset "utf-8";

/* Default Reset Css Starts Here
===============================================================*/
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video,details,summary{margin:0;padding:0;border:0;font-size:100%;font-weight:normal;vertical-align:baseline;background:transparent;box-sizing: border-box;}
article,aside,figure,footer,header,nav,section,details,summary{display:block;}
img,object,embed{max-width:100%;}
html{overflow-y:scroll;}
ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
th{font-weight:bold;vertical-align:bottom;}
td{font-weight:normal;vertical-align:top;}
hr{display:block;height:1px;border:0;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
pre{white-space:pre; /* CSS2 */white-space:pre-wrap; /* CSS 2.1 */white-space:pre-line; /* CSS 3 (and 2.1 as well, actually) */word-wrap:break-word; /* IE */}
input[type="radio"]{vertical-align:text-bottom;}
input[type="checkbox"]{vertical-align:bottom;}
select,input,textarea{font:99% sans-serif;}
table{font-size:inherit;}
small{font-size:85%;}
strong{font-weight:bold;}
td,td img{vertical-align:top;}
sub,sup{font-size:75%;line-height:0;position:relative;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
pre,code,kbd,samp{font-family:monospace,sans-serif;}
.clickable,label,input[type=button],input[type=submit],input[type=file],button{cursor:pointer;}
button,input,select,textarea{margin:0;}

/* make buttons play nice in IE */
button,input[type=button]{width:auto;overflow:visible;}

/* Let's Clear Some Floats
===================================================*/
.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;overflow:hidden;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}

/* Default Css Start Here
===================================================*/
@font-face {
    font-family: 'Readex Pro';
    src: url('../fonts/ReadexPro-Bold.eot');
    src: url('../fonts/ReadexPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ReadexPro-Bold.woff2') format('woff2'),
        url('../fonts/ReadexPro-Bold.woff') format('woff'),
        url('../fonts/ReadexPro-Bold.ttf') format('truetype'),
        url('../fonts/ReadexPro-Bold.svg#ReadexPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Readex Pro';
    src: url('../fonts/ReadexPro-Light.eot');
    src: url('../fonts/ReadexPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ReadexPro-Light.woff2') format('woff2'),
        url('../fonts/ReadexPro-Light.woff') format('woff'),
        url('../fonts/ReadexPro-Light.ttf') format('truetype'),
        url('../fonts/ReadexPro-Light.svg#ReadexPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Readex Pro';
    src: url('../fonts/ReadexPro-SemiBold.eot');
    src: url('../fonts/ReadexPro-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ReadexPro-SemiBold.woff2') format('woff2'),
        url('../fonts/ReadexPro-SemiBold.woff') format('woff'),
        url('../fonts/ReadexPro-SemiBold.ttf') format('truetype'),
        url('../fonts/ReadexPro-SemiBold.svg#ReadexPro-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Readex Pro';
    src: url('../fonts/ReadexPro-ExtraLight.eot');
    src: url('../fonts/ReadexPro-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ReadexPro-ExtraLight.woff2') format('woff2'),
        url('../fonts/ReadexPro-ExtraLight.woff') format('woff'),
        url('../fonts/ReadexPro-ExtraLight.ttf') format('truetype'),
        url('../fonts/ReadexPro-ExtraLight.svg#ReadexPro-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Readex Pro';
    src: url('../fonts/ReadexPro-Medium.eot');
    src: url('../fonts/ReadexPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ReadexPro-Medium.woff2') format('woff2'),
        url('../fonts/ReadexPro-Medium.woff') format('woff'),
        url('../fonts/ReadexPro-Medium.ttf') format('truetype'),
        url('../fonts/ReadexPro-Medium.svg#ReadexPro-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Readex Pro';
    src: url('../fonts/ReadexPro-Regular.eot');
    src: url('../fonts/ReadexPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ReadexPro-Regular.woff2') format('woff2'),
        url('../fonts/ReadexPro-Regular.woff') format('woff'),
        url('../fonts/ReadexPro-Regular.ttf') format('truetype'),
        url('../fonts/ReadexPro-Regular.svg#ReadexPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




.wrapper {
    overflow: hidden;
}
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 30px;
    width: 100%;
}
body {    
    font-family: 'Readex Pro', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.388888888888889;
    color: #959595;
    background: #003531;
}


/* Theme Default Css Start Here
===================================================*/
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: 'Readex Pro', sans-serif;
}
h1 {
    font-size: 120px;
    line-height: 1.25;
    text-align: center;
    color: #FFFFFF;
    font-weight: 700;
}
h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.25;
    color: #202020;
    margin-bottom: 25px;
}
ul li {
    padding-left: 30px;
    position: relative;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.388888888888889;
    color: #585A6A;
    margin-bottom: 16px;
}
ul li::before {
    content: "";
    background: url(../images/tick-icon.svg) no-repeat center center;
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 4px;
    left: 2px;
}
.button {
    padding: 11px 18px 10px 18px;
    background: #0CA296;
    border-radius: 8px;
    display: inline-block;
    text-decoration: none;
    outline: none;
    box-shadow: none;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.222222222222222;
    color: #FFFFFF;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
}
.button:hover, .button:focus {
    background: #003531;
    color: #FFFFFF;
}




/* Header Css Start Here
===================================================*/
#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 34px 0;
}
.bar-left-logo {
    float: left;
    display: block;
    width: 109px;
}
.bar-left-logo img {
    display: block;
    width: 100%;
}
nav {
    float: right;
    padding-top: 4px;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav ul li {
    list-style: none;
    padding: 0;
    margin: 0 0 0 28px;
    display: inline-block;
}
nav ul li::before {
    display: none;
}
nav ul li a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    position: relative;
}
nav ul li a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -9px;
    left: 0;
    background-color: #FFFFFF;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
    -ms-transition: transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
}
  
nav ul li a:hover:after, nav ul li.active a:after{
    transform: scaleX(1);
    transform-origin: bottom left;
}
.dark_light_trigger {
    float: right;
    width: 84px;
    height: 32px;
    background: #DEE4EA;
    border-radius: 4px;    
    cursor: pointer;
    text-align: center;
    padding: 2px;
    margin-left: 41px;
    position: relative;
}
.dark_light_trigger span {
    display: inline-block;
    text-align: center;
    line-height: 28px;
    width: calc(40px - 3px);
    height: 28px;
    vertical-align: middle;
    position: relative;
    z-index: 9;
}
.dark_light_trigger span img {
    display: inline-block;
    line-height: 28px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
.dark_light_trigger::before {
    content: "";
    width: calc(40px - 3px);
    height: 28px;
    background: #FFFFFF;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
}
.dark_light_trigger.active::before {
    left: 45px;
}



/* Banner Section Css Start Here
===================================================*/
.banner_sec {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 600px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 120px;
}
.banner_content {    
    text-align: center;
}
.banner_content h2 {
    color: #FFFFFF;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 400;
    margin-bottom: -10px;
}
.inner_banner_sec {
    height: 432px;
    padding-bottom: 70px;
}



/* About Section Css Start Here
===================================================*/
.about_us_sec {
    padding: 100px 0;
    background: #FFFFFF;
}
.about_us_sec figure {
    width: 40.8%;
    display: inline-block;
    vertical-align: middle;
}
.about_us_sec figure img {
    display: block;
    width: 100%;
    border-radius: 10px;
}
.about_us_content {
    display: inline-block;
    vertical-align: middle;
    width: calc(59.2% - 6px);
    padding: 0 120px 20px 114px;
}
.about_us_content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.27;
    color: #959595;
    margin-bottom: 13px;
}
.about_us_reverse_sec {
    padding: 100px 0 65px;
}
.about_us_reverse_sec .about_us_content_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 0 auto;
}
.about_us_reverse_sec .about_us_content_wrap .about_us_content {
    order: 1;
    padding: 0 30px 20px 0;
    width: calc(51.8% - 6px);
}
.about_us_reverse_sec .about_us_content_wrap figure {
    order: 2;
    padding-top: 10px;
    width: 48.8%;
}




/* Mid Gallery Image Section Css Start Here
===================================================*/
.mid_img_gallery_sec {
    background: #FFFFFF;
    position: relative;
    z-index: 9;
}
.mid_img_gallery_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 -10px;
}
.mid_img_gallery_list {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 10px;
}
.mid_img_gallery_list figure {
    padding-bottom: 79%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}



/* Footer Section Css Start Here
===================================================*/
#footer {
    text-align: center;
    padding: 32px 0;
}
#footer p {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    color: #FFFFFF;
    margin: 0;
}



/* Our Portfolio Section Css Start Here
===================================================*/
.our_portfolio_sec {
    background: #D3F1F9;
    padding: 100px 0;
    text-align: center;
}
.our_portfolio_sec h2 {
    margin-bottom: 60px;
}
.our_portfolio_gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto 56px;
    max-width: 960px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.our_portfolio_gallery_list {
    padding: 0 16px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
    max-width: 32%;
}
.our_portfolio_gallery_list:nth-child(2) {
    -ms-flex: 0 0 36%;
    flex: 0 0 36%;
    max-width: 36%;    
}
.our_portfolio_gallery_list a {
    height: 346px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.our_portfolio_gallery_list:nth-child(2) a {
    height: 400px;
}



/* Beach Tour Section Css Start Here
===================================================*/
.beach_tour_sec {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #2C355E;
    padding: 228px 0 78px;
    position: relative;
    margin-top: 310px;
}
.beach_tour_sec::after {
    content: "";
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(125,185,232,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(125,185,232,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(125,185,232,0) 100%);
    position: absolute;
    height: 250px;
    position: absolute;
    top: -310px;
    display: block;
    left: 0;
    right: 0;
}
.beach_tour_sec::before {
    content: "";
    background: url(../images/beach_bg_img.png) no-repeat bottom center;
    background-size: cover;
    height: 520px;
    position: absolute;
    top: -310px;
    display: block;
    left: 0;
    right: 0;
}
.beach_tour_sec figure {
    width: 38.7%;
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    overflow: hidden;
    border: solid 20px rgba(255,255,255,0.1);
}
.beach_tour_sec figure img {
    display: block;
    width: 100%;
}
.beach_tour_content {
    width: calc(59% - 1px);
    display: inline-block;
    vertical-align: middle;
    padding-left: 59px;
    padding-top: 16px;
}
.beach_tour_content ul li {
    color: #FFFFFF;
}
#fancybox-content {
    background: #C4C4C4;
    border: 10px solid #FFFFFF;
    box-shadow: 0px 27px 22px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}
#fancybox-close {
    width: 50px;
    height: 50px;
    background: #FFFFFF;
    box-shadow: 0px 27px 22px rgb(0 0 0 / 15%);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    display: block;
    top: -15px;
    right: -32px;
}
#fancybox-content img {
    display: block;
    width: 100%;
}
.fancybox-bg {
    display: none;
}
#fancybox-overlay {
    background: #0F1414 !important;
    opacity: 0.6 !important;
}
#fancybox-outer {
    background: transparent !important;
}
#fancybox-close::before {
    content: "";
    background: url(../images/close-icon.svg) no-repeat center center;
    width: 18px;
    height: 18px;
    background-size: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
#fancybox-title {
    left: 0;
    right: 0;
    width: 100% !important;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    color: #FFFFFF;
    display: none !important;
}
#fancybox-title-over {
    padding: 21px 7px 19px;
}

.portfolio_page_sec {
    background: #ffffff;
    padding: 21px 0 100px;
}
.grid {
    padding-bottom: 55px;
}
.grid:after {
    content: "";
    display: block;
    clear: both;
}
.grid-item {
    float: left;
    width: 33.3333%;
    padding: 5px;
}
.grid-item a {
    display: block;
}
.grid-item img {
    display: block;
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.btn_center {
    text-align: center;
}
.grid-small-item {
    width: 23.88%;
}
.grid-mid-item {
    width: 29.60%;
}
.grid-big-item {
    width: 46.2%;
}
.grid-to-small-item {
    width: 17%;
}
.grid-item:nth-child(3n+1) {
    clear: both;
}
.grid-mid-big-item {
    width: 41.2%;
}



/* Dark Theme CSS Section Starts Here
===============================================================*/
body.dark_theme {
    background: #141719;
}
body.dark_theme .about_us_sec {
    background: #141719;
}
body.dark_theme h2 {
    color: #FFFFFF;
}
body.dark_theme .mid_img_gallery_sec {
    background: #141719;
}
body.dark_theme .beach_tour_sec::after {
    background: linear-gradient(#141719 0%, #141719 47.71%, rgba(20, 23, 25, 0) 100%);
    background: -moz-linear-gradient(#141719 0%, #141719 47.71%, rgba(20, 23, 25, 0) 100%);
    background: -webkit-linear-gradient(#141719 0%, #141719 47.71%, rgba(20, 23, 25, 0) 100%);    
}
body.dark_theme .about_us_reverse_sec .about_us_content_wrap .about_us_content ul li {
    color: #ffffff;
}
body.dark_theme .our_portfolio_sec {
    background: rgba(211, 241, 249, 0.1);
}
body.dark_theme #footer {
    background: #003531;
}
.wrapper {
    filter: blur(0);
    -webkit-filter: blur(0);
}
.blur_body .wrapper {
    filter: blur(7px);
    -webkit-filter: blur(7px);
}
body.dark_theme .portfolio_page_sec {
    background: #141719;
}
#fancybox-left, #fancybox-right {
    background: url(../images/right-arrow.png) no-repeat center center;
    width: 30px;
    height: 30px;
    display: block;
    background-size: cover;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    box-shadow: 0 0 10px rgb(0 0 0 / 80%);
    border-radius: 100%;
}
#fancybox-left {
    transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    left: 20px;
}