@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
body, html {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100% !important;}
body{ font-family: 'Montserrat', sans-serif; font-size: 14px; margin: 0;}
a{-webkit-transition:.3s all ease;-o-transition:.3s all ease;transition:.3s all ease;text-decoration:none}
a:hover{text-decoration:none}
::placeholder {color: #999;}
:root {--cyan:#3dd6f5;--darkBlue:#002555; --blue: #43a4e6;--yellow: #ffff00;}
.btn,.form-control{outline:0;-webkit-box-shadow:none!important;box-shadow:none!important}
section{position: relative}
section div { position: relative; z-index: 1;}
.element-animate{opacity:0;visibility:hidden}

/*--------------------------------------------------------------
## Overwrite BS button
--------------------------------------------------------------*/
.btn,.btn-cyan, .pill-btn, .pill-btn-cyan, .pill-btn-blue,.pill-btn-red {font-weight: 600;font-size: 14px; padding: .375rem .75rem}
.pill-btn {background: #e6e6e6; border-color: transparent;color: #333;}
.pill-btn-outline { border: 1px solid #7f7f7f; background: #fff;}
.pill-btn-blue {background: #43a4e6; border-color: transparent; color: #fff;}
.pill-btn-red {background:#ff0000 ; border-color: transparent; color: #fff;}
.btn-danger {color: #fff;background-color: #ff0000;border-color: #ff0000;}
a[class*="cyan"],button[class*="cyan"]{color: #333;background-color: var(--cyan);border-color: transparent;}
a[class*="yellow"], button[class*="yellow"] { background: var(--yellow); border-color: transparent;}
a[class*="darkblue"],button[class*="darkblue"]{color:#fff;background: var(--darkBlue); border-color: transparent;}
a[class*="pill-btn"],button[class*="pill-btn"] {padding-right: .6em;padding-left: .6em;border-radius: 10rem;display: inline-flex;align-items: center;justify-content: center;height: 48px;position: relative;}
a[class*="pill-btn"] span, button[class*="pill-btn"] span {margin: auto 1rem;line-height: 1.2;}
a[class*="pill-btn"] .ico-circle, button[class*="pill-btn"] .ico-circle { color: #fff; margin: 0}
[class*="pill-btn"].btn-block .ico-circle, [class*="pill-btn"].d-block .ico-circle { position: absolute; right: .6rem;}
.pill-btn, .pill-btn-cyan, .pill-btn-yellow, .pill-btn-darkblue, .pill-btn-outline{padding-right: .6em;padding-left: .6em;border-radius: 10rem;display: flex;align-items: center;justify-content: center;height: 48px;position: relative;}

/*--------------------------------------------------------------
## Typography & Background
--------------------------------------------------------------*/
.title, .banner-title {font-size: 45px;line-height: 1.1;}
.text-cyan { color: var(--cyan);}
.bg-cyan { background: var(--cyan);}
.bg-darkBlue { background: var(--darkBlue);}
.text-blue {color: var(--blue);}
@media (max-width: 768px) {
    h1.title, h1.banner-title {font-size: 1.5rem;}
    h2.title, h2.banner-title {font-size: 1.2rem;}
}

/*--------------------------------------------------------------
## Design element
--------------------------------------------------------------*/
.width-100 {width: 100%;}
.height-100 {height: 100%;}
.section { padding: 80px 0;}
.ico-circle {border-radius: 50%;padding: 10px;display: inline-flex;align-items: center;justify-content: center; background: #111;}
.border-bottom-cyan {border-bottom: 8px solid var(--cyan);}
.border-bottom-darkblue {border-bottom: 8px solid var(--darkBlue);}
.border-bottom-light {border-bottom: 5px solid #fff;}
.icon-white {filter: brightness(10);}
.icon-20 { width: 20px;}
.icon-30 { width: 30px;}
.icon-60 { width: 60px;}
.icon-80 { width: 80px;}
.icon-100 { width: 100px;}
.icon-20, .icon-30, .icon-60, .icon-80, .icon-100 {object-fit: contain;display: flex; align-items: center;justify-content: center;}
.toggle-active {transition:all 0.3s ease;;}
.toggle-active.active {transition:all 0.3s ease;;}
.banner-600 { height: 600px; display: flex; align-items: center;background-position: center;background-size: cover;background-repeat: no-repeat;}
.gmap iframe {min-height: 400px}
.bold-500 {font-weight: 500;}
.bold-600 {font-weight: 600;}
.bold-700 {font-weight: 700;}
hr.dashline { border-style: dashed;border-color: #ddd;}
.thankyou-check {max-width: 100px;filter: grayscale(1) brightness(0);margin-bottom: 2em;}
@media (min-width: 768px) {
    .py-100 {padding-bottom: 100px; padding-top: 100px;}
    .py-150 {padding-bottom: 150px; padding-top: 150px;}
    .py-200 {padding-bottom: 200px; padding-top: 200px;}
    .mb-100 {margin-bottom: 100px;}
}
@media (max-width: 768px) {
    .icon-30 { width: 20px}
    .icon-60 { width: 30px;}
    .icon-80, .icon-100 { width: 60px;}
    .section, .py-100, .py-150, .py-200 {padding-bottom: 30px; padding-top: 30px;}
    .banner-600 {height: 300px;}
}

/*--------------------------------------------------------------
## Background style
--------------------------------------------------------------*/
.blue-shade:after {content:""; display: block; width: 100%; height: 100%; top: 0;left: 0;position: absolute; background: #002554; opacity: .7;}
.black-shade:after {content:""; display: block; width: 100%; height: 100%; top: 0;left: 0;position: absolute; background: #000; opacity: .7;}
.bg-center {background-position: center;background-size: cover;}
.bg-repeat {background-size: 70%;background-position-x: 160%;}
.bg-right60 , .bg-right70 {background-repeat: no-repeat;background-position: right center;}
.bg-left60, .bg-left70 {background-repeat: no-repeat;background-position: left center;}
.bg-left60, .bg-right60 {background-size: 60%;}
.bg-left70, .bg-right70 {background-size: 70%;}
@media (max-width: 768px) {
    .bg-right60, .bg-left60, .bg-right70, .bg-left70 {background-position: center top;background-size: contain; padding-top: 150px;}
}
/* contact page */
.black-shade h6 { color: #fff;}
.black-shade .title { color: var(--cyan);}



/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
.top-bar {background: var(--darkBlue);}
.top-bar a {color: #fff;padding: 10px;font-size: 13px;display: inline-block;}
.top-bar i {font-size: 1.2rem;}
.top-bar .social {margin-bottom: 0;display: flex;align-items: center;height: 100%;}
.top-bar .social li {display: block; margin-right: 30px}
.top-bar .social li a {color: #fff; display: flex;align-items: center;}
.top-bar .social li a i {color: var(--cyan); margin-right: 5px;}
header{position:relative;top: 0;left: 0;width: 100%;z-index: 5}
header .navbar-brand { padding: 15px 0;}
header .navbar-brand img {max-height: 70px;}
@media (max-width: 991px) {
    .top-bar .social li a {padding-left: 10px;padding-right: 10px;width: inherit}
}
header .top-bar .social li a:hover {}
header .navbar {padding-top: 0;padding-bottom: 0;background: white !important}
@media (max-width: 1199px) {
    header .navbar {background: white !important;padding-top: .5rem;padding-bottom: .5rem}
}
header .navbar .nav-link {padding: 1.7rem 1rem;outline: none !important}
@media (max-width: 1199px) {
    header .navbar .nav-link {padding: .5rem 0rem}
}
header .navbar .nav-link.active {color: #007bff !important}
header .navbar .dropdown-menu {font-size: 14px;border-radius: 4px;border: 0;-webkit-box-shadow: 0 2px 20px -5px rgba(0, 0, 0, 0.1);box-shadow: 0 2px 20px -5px rgba(0, 0, 0, 0.1)}
header .navbar .dropdown-menu .dropdown-item.active {background: #f8f9fa;color: #007bff !important}
header .navbar .dropdown-menu a {padding-top: 7px;padding-bottom: 7px}
@media (max-width: 768px) {
    .top-bar .social li{ margin-right: 0px;}
    header .navbar-brand { padding: 0;}
    header .navbar-brand img {max-height: 40px;}
    .navbar-collapse{position: absolute;top: 56px;left: 0;background: #fff;width: 100%;}
    header .navbar .nav-link {padding: 15px; border-bottom: 1px solid;}
}


/*--------------------------------------------------------------
## Manage Meeting
--------------------------------------------------------------*/
.manage-meeting {height: auto;display: flex;flex-flow: column;padding: 30px;margin-bottom: 30px;background-size: cover;background-position: center;background-repeat: no-repeat;position: relative}
.manage-meeting:before {content: '';width: 100%; height: 100%; background: rgba(255,255,255,1); position: absolute; top: 0; left: 0;}
.manage-meeting .iconwrapper,.manage-meeting .block-header,.manage-meeting .block-body {position: relative; z-index: 1;}
.manage-meeting .iconwrapper { width: 60px; margin-bottom: 15px; transition: .3s ;}
.manage-meeting .iconwrapper img {width: 100%; filter: grayscale(1) brightness(0);}
.manage-meeting .block-header {border-top: 5px solid #111;padding-top: 20px; margin-top: 10px; min-height: 90px;transition: .3s ;}
.manage-meeting .block-body {height: 0;overflow: hidden; transition: .3s ;}
/* Active */
.manage-meeting.active {}
.manage-meeting.active .iconwrapper { width: 30px; transition: .3s ;}
.manage-meeting.active .block-header { min-height: auto;transition: .3s ;}
.manage-meeting.active .block-body {height: 100%; transition: .3s ;}


/*--------------------------------------------------------------
## Manage Meeting with background
--------------------------------------------------------------*/
.manage-meeting.bg-attached {color: #fff;height: 380px;}
.manage-meeting.bg-attached:before {content: '';width: 100%; height: 100%; background: rgba(0,0,0,0.65); position: absolute; top: 0; left: 0;}
.manage-meeting.bg-attached .block-header {border-top: 5px solid #fff;}
.manage-meeting.bg-attached .iconwrapper img {filter: unset;}
.manage-meeting.bg-attached .block-header {margin-top: auto;}


/*--------------------------------------------------------------
## Ribbon Design
--------------------------------------------------------------*/
.ribbon{width:150px;height:150px;overflow:hidden;position:absolute}
.ribbon::before,.ribbon::after{position:absolute;z-index:-1;content:'';display:block;border: 5px solid #c1272d;}
.ribbon span{position:absolute;display:block;width:225px;padding:15px 0;background-color: #f0090b;box-shadow: 0 5px 10px rgba(0,0,0,.1);color:#fff;font:700 18px/1 'Lato',sans-serif;text-transform:uppercase;text-align:center;font-weight: 600;}
.ribbon-top-right{top:-10px;right:-10px}
.ribbon-top-right::before,.ribbon-top-right::after{border-top-color:transparent;border-right-color:transparent}
.ribbon-top-right::before{top:0;left:0}
.ribbon-top-right::after{bottom:0;right:0}
.ribbon-top-right span{left:-25px;top:30px;transform:rotate(45deg)}


/*--------------------------------------------------------------
## Our Packages
--------------------------------------------------------------*/
.packages-block {padding: 50px;background: #fff;}
.packages .price-tag {color: #43a4e6;font-size: 50px;font-weight: 600;margin-right: 20px;}
.packages sup {font-size: 24px;top: -20px;margin-right: 5px;}
.packages .check-list {list-style: none;padding-left: 1.5em;margin-bottom: 30px;}
.packages .check-list li::before {content: "\f00c";font-family: 'Line Awesome Free';font-weight: 900;color: #43a4e6;display: inline-block;width: 1.5em;margin-left: -1.5em;}
@media (max-width: 768px) {
    .packages-block {padding: 30px;}
    .packages .price-tag {font-size: 30px;margin-right: 10px;}
    .packages sup { font-size: 12px; top: -15px}
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
footer, footer .container{ position: relative; background-repeat: repeat; background-size: cover; background-position: center}
footer:after { position: absolute;content: '';width: 100%; height: 100%; background: rgba(0,0,0,0.85);top: 0; left: 0; pointer-events: none;}
footer .container {z-index: 1;}
footer, footer a, footer a:hover {color: #fff;}
footer .icon-30 {margin-bottom: auto;margin-right: 20px;}
footer .info h6{ margin-bottom: 0}
footer .info p{ line-height: 1.3; font-weight: 600;}
footer .brand { filter: grayscale(1) brightness(10); margin-bottom: 40px}
footer .brand img { max-height: 70px;}
footer .social { display: flex; align-items: center; margin-bottom: 30px}
footer .social a { width: 50px}
.colophon { background: #111; text-align: center; padding: 20px 0;}


/*--------------------------------------------------------------
## Registration
--------------------------------------------------------------*/
.timeline {counter-reset: test 0;position: relative;display: inline-block;width: 100%;padding: 10px 0 35px;}
.timeline li {list-style: none;float: left;width: 25%;position: relative;display: flex;justify-content: center;}
.timeline li [class^="icon"] { position: relative; z-index: 1}
.timeline li span {font-size: 12px;position: absolute;bottom: -35px;}
.timeline li:before {content: "";width: 50px;height: 50px;border-radius: 50%;background: #fff;z-index: 1;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border: 1px dashed #cccccc;}
.timeline li:after {content: "";position: absolute;width: 80%;height: 1px;left: -40%;top: 15px;z-index: 0;border-bottom: 1px dashed #ccc;}
.timeline li:first-child:after {content: none}
.timeline li.active:before {background: #002555;border: transparent;}
@media (max-width: 768px) {
    .timeline li:after{top: 10px}
}

/*--------------------------------------------------------------
## Plus Minus Button
--------------------------------------------------------------*/
/* Chrome, Safari, Edge, Opera */
input.qty::-webkit-outer-spin-button, input.qty::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
/* Firefox */
input.qty[type=number] {-moz-appearance: textfield; text-align: center;}
.plusminus-btn { position: relative;max-width: 100px;}
.qty-plus, .qty-minus {position: absolute;padding: 5px;top: 50%;transform: translateY(-50%);cursor: pointer;width: 30px;text-align: center;}
.qty-plus {right: 0}
.qty-minus { left: 0}


/*--------------------------------------------------------------
## Registration - Account
--------------------------------------------------------------*/
.reg-log-btn, .login-usr { display: flex; flex-grow: 1; max-width: 300px; align-items: center;justify-content: end;}
.registration-page.guest .login-usr, .topbar-logout-btn {display: none !important;}
.registration-page.login .reg-log-btn {display: none;}
.registration-page.login .topbar-logout-btn {display: block !important;}
.login-usr a { display: flex; align-items: center; padding: 0 10px;}
.login-usr .usr-name {border-right: 1px solid #ccc;}
.registration-page {background: #f3f8fb;}
.registration-page .topbar-register-btn { display: none}
.registration-page h2{ font-size: 1.8em;}
.registration-page h4{ font-size: 1.6em;}
.registration-page .modal-dialog {max-width: 960px;}
.registration-page .modal-body { padding: 3rem;}
.registration-page .modal-dialog button.close {position: absolute;top: 20px; right: 20px;}
.form-control {height: auto;padding: .575rem 1rem;}
.form-control.darkrounded {border: 1px solid #888;border-radius: .7rem;}
.registration-page label {color: #666;}
/*.tab-cyan { border-bottom: 1px solid #dee2e6}*/
.tab-cyan .nav-link {border-bottom: 5px solid transparent;margin-bottom: 0;font-size: 1rem;color: #bbb; font-weight: 600;}
.tab-cyan .nav-link.active {border-bottom: 5px solid var(--cyan);color: #000;}
.stripe-wrap { border-radius: 30px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #fff;}
.stripe-wrap input[type="checkbox"]{ position: relative; margin: 0 30px 0 0;}
.stripe-wrap img { max-height: 60px;}
.dashboard-block {padding: 3rem; height: 100%;background-repeat: no-repeat;background-position: right;background-size: contain; display: flex;flex-flow: column;}
.three-column .column:nth-child(1),.three-column .column:nth-child(3) { margin:0 }
.three-column .column:nth-child(2) { margin-right: auto;margin-left: auto;}
.three-column .column { text-align: left}
@media (max-width: 768px) {
    .registration-page .reg-log-btn {display: none}
    /* .login-usr a.usr-logout-btn {display: none} */
    /* .login-usr .usr-name {border-right: none; padding: 0} */
    .three-column .column { width: 100%}
    .registration-page label {margin-bottom: 0; font-size: 12px;}
    .registration-page .modal-body { padding: 1rem;}
    .registration-page .modal-body p {font-size: 13px;}
    .registration-page .modal-body h5 { font-size: 16px;}
    .registration-page .modal-body .packages .price-tag {font-size: 25px; margin-right: 0;}
    #toggleSidemenu {position: absolute; left: -100%; top:70px; z-index: 2; transition: .3s;}
    #toggleSidemenu.show { left: 0;transition: .3s;}
    .dashboard-block { padding: 1rem;}
    .tab-cyan .nav-item { width: 50%;}
    button.w-sm-100 {width: 100%;}
    button.w-sm-100 .ico-circle {position: absolute; right: .6rem;}
    .referral .date {color: #aaa;font-size: 13px;}
    .referral .ref-email {}
    .referral .amount {width: 30px;margin-left: auto !important;margin-top: -25px !important;}
}


/*--------------------------------------------------------------
## User Account menu
--------------------------------------------------------------*/
#toggleSidemenu {}
#toggleSidemenu .nav-link {color: #000;font-size: 16px;font-weight: 600;border-bottom: 1px solid #ddd;padding: 15px;}
#toggleSidemenu .nav-link.active { color: var(--cyan); border-bottom: 3px solid var(--cyan);}