@charset "UTF-8";
/* CSS Document */
 
  @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');
 

body{  font-family: 'Quicksand', sans-serif; font-size: 14px;  color: #000; background: url("../images/background_bg.svg") no-repeat top right; background-size: 60%; }

h1{ font-size: 32px; font-weight: 700;}
h2{ font-size: 26px; font-weight: 700;}
a{ text-decoration: none;}
a:hover{ text-decoration: none;}

header{ margin-top: 10px; margin-bottom: 10px;}
.compass_logobox{ width: 180px; }
.compass_logobox img{ width: 100%;}
ul.menu_list{ list-style: none; text-align: right;}
ul.menu_list li{ display: inline-block; margin-left: 32px;}
ul.menu_list li a{ color: #fff; text-decoration: none; font-size: 14px;}
.request_demo a{ background: #FFEB00; color: #000 !important; font-size: 18px !important; padding: 10px 20px; border-radius: 50px; font-weight: 600;}
h1 span{ color: #D00778; }

.banner_textbox{ padding-left: 200px; padding-right: 90px; }
.banner_text{ font-size: 22px;}
.banner_bgbox img{ width: 100%;}

.request_demobtn { background-image: linear-gradient(to right, #A11696 , #4C0B77); color: #fff; font-size: 18px; font-weight: 600; padding: 10px 20px; display: inline-block; margin-top: 15px; border-radius: 10px;}



.features_section{ margin-top: 50px; text-align: center;}
.features_box{ margin-top: 50px;}

.features_imgbox{ width: 70px; margin: auto; margin-top: 20px; margin-bottom: 20px; }
.features_imgbox img{ width: 100%;}
.features_h3{ font-size: 18px; font-weight: 700;}


.howto_work{ margin-top: 100px; text-align: left;}
.media_playerbox img{ width: 100%}

.packages_section{ background: #EFF1F4; padding-top: 70px; padding-bottom: 70px; margin-top: 70px; }
.packages_h2{ text-align: center; color: #D00778; }
.packages_h3{ text-align: center; font-weight: 700; font-size: 22px; margin-top: 20px; }

.packages_h3::after { content: ""; display: block; background: url(../images/border_bg.svg) no-repeat; width: 120px; height: 3px; margin: auto; margin-top: 20px;}


.packages_row{ margin-top: 50px;}
.packages_box{ background: #fff; border-radius: 20px; padding: 15px; padding-bottom: 5px; position: relative;}
.packages_box:hover{box-shadow: 0px 0px 35px rgba(20, 91, 255, 0.22);}
 
.packages_name{ border-radius: 15px; display: inline-block; padding: 3px 15px; font-size: 12px; font-weight: 600;}
.packages_flock{ font-size: 18px; font-weight: 700; color: #636363; margin-top: 10px; }
.packages_price{ font-size: 38px; font-weight: 700;}
.packages_btnbox{ text-align: center; margin-top: 10px; margin-bottom: 10px;}
.packages_btn{ border-radius: 33px; border: 2px solid #e7e7e7; font-size: 22px; text-transform: uppercase; font-weight: 700; padding: 10px 30px; color: #000;
display: inline-block; margin: auto;}


.packages_box:hover .packages_btn{ background-image: linear-gradient(to right, #A11696 , #4C0B77); color: #fff; border: 2px solid #fff; }




.p_starter{ background: #f3f3f3;}
.p_medium{ background: #FFDBA8;}
.p_mega{ background: #FFBDBF;}
.p_extra{ background: #BDFFBD;}



.packages_keyfeatures{ font-size: 18px; font-weight: 700;}
ul.packages_list{ list-style: none; padding: 0px; margin-top: 10px; margin-bottom: 0px;}
ul.packages_list li{display: block; font-size: 13px; padding-left: 10px; padding-bottom: 10px; }
ul.packages_list li::before { content: "";  background: url("../images/packages_tick.svg") no-repeat; width: 10px; height: 7px; display: inline-block;
position: relative; left: -10px;}


.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 140px;
    height: 110px;
    text-align: right;
}

.ribbon span {
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 140px;
    display: block;
    
    background: linear-gradient(#F46000 0%, #F46000 100%);
    position: absolute;
    top: 32px;
    right: -28px;
    letter-spacing: 1px;
    line-height: 22px;
}
.ribbon span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #9b511b;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #9b511b;
}

.ribbon span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #9b511b;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #9b511b;
}


.review_section{ padding-top: 70px; padding-bottom: 70px;}
.review_box{ text-align: center; max-width: 900px; margin: auto; margin-top: 20px;}
.review_starsbox{ width: 175px; margin: auto;}
.review_starsbox img{ width: 100%;}

.review_textbox{ margin-top: 15px;}

.review_arrowbox{ margin-top: 30px; margin-bottom: 30px;}
.review_arrowbox img{ width: 100%;}


.review_imgbox{ width: 100px; height: 100px; background: #fff; filter: drop-shadow(0px 0px 15px rgba(89, 102, 122, 0.1)); border-radius: 50px; margin: auto;  background-size: cover !important;  border: 12px #fff solid;  }

.review_name{ font-weight: 700; font-size: 16px; margin-top: 5px; margin-bottom: 5px;}



.overview_section {background: #EFF1F4; padding-top: 70px; padding-bottom: 70px;}
.overview_row{ margin-top: 50px;}
.overview_leftbox{ background: #d00778; border-radius: 16px; padding-top: 100px; padding-bottom: 100px; color: #fff; padding-left: 50px; padding-right: 200px; margin-left: 150px; }


.overview_imgbox{ position: relative; left: -150px; top: 15px;}
.overview_imgbox img{ width: 100%;}

.overview_heading{ font-size: 22px; font-weight: 700;}

.readmore_btn{ margin-top: 30px;}
.readmore_btn a{ background: #fff; display: inline-block; padding: 10px 25px; border-radius: 50px; color: #000; font-weight: 700;} 

 


.latestnews_section{ padding-top: 70px; padding-bottom: 70px;}
.latestnews_row{ margin-top: 50px;}
.newsbox{ padding: 20px; min-height: 590px; position: relative;}

.news_footerbox{ position: absolute; bottom: 20px; color: #fff;}

.newsbox_overlay { background: #000000b5; position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; padding: 15px;}

.newsbox_date{ background: #d00778; border-radius: 12px; padding: 5px 15px; color: #fff; font-size: 12px; display: inline-block;}

.newsbox_title{ font-weight: 600; font-size: 18px;} 

.news_authorimgbox{ width: 30px; height: 30px; border-radius: 50px; background-size: cover !important; border: solid 1px #fff; position: relative; top: 10px;}

ul.newsbox_list{ list-style: none; padding: 0px; margin: 0px; margin-top: 15px;}
ul.newsbox_list li{ display: inline-block; padding-right: 10px; font-size: 13px;}

 
.noimage{ border: 3px solid #e7e7e7;}
.noimage_title{ margin-top: 15px; color: #D00778; margin-bottom: 15px;}
.noimage_footer{ color: #000;}


footer {
    background: url(../images/footer_bg.svg) no-repeat bottom left;
    background-position: -500px -150px;
	position: relative;
}

.footer_rightbg{ background: url(../images/footer_bg2.svg) no-repeat bottom right;
  position: absolute; width: 100%; height: 100%; bottom: 0px; right: 0px;
}


.footer_box{ max-width: 800px; margin: auto; text-align: center;}

.request_formbox{ position: relative; max-width: 600px; margin: auto; margin-top: 30px;}

.email_inputbox{ border: solid 1px #B2B7C6; height: 50px; width: 100%; border-radius: 4px; padding: 5px; }
.email_inputbox:focus{outline: none;}
 

.request_submitbtn {
    height: 50px;
    background: #000;
    color: #fff;
    border: 0px;
    font-weight: 700;
    position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

ul.socialmedia_list{ list-style: none; padding: 0px; margin: 0px; margin-top: 50px;}
ul.socialmedia_list li{ display: inline-block; margin-left:5px; margin-right: 5px; }


.facebook_icon{ background: url("../images/facebook.svg") no-repeat; width: 40px; height: 40px; display: inline-block; background-size: 100%; }
.linkden_icon{ background: url("../images/linkden.svg") no-repeat; width: 40px; height: 40px; display: inline-block; background-size: 100%; }
.twitter_icon{ background: url("../images/twitter.svg") no-repeat; width: 40px; height: 40px; display: inline-block; background-size: 100%; }
.facebook_icon:hover{ background: url("../images/facebook_hover.svg") no-repeat; background-size: 100%; }
.linkden_icon:hover{ background: url("../images/linkden_hover.svg") no-repeat; background-size: 100%; }
.twitter_icon:hover{ background: url("../images/twitter_hover.svg") no-repeat;  background-size: 100%; }

.copywrite_text{ margin-top: 30px; margin-bottom: 50px;}










.hamburger_btn {
    display: none;
    cursor: pointer;
	float: right;
	position: relative;
	z-index: 99;
}

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 40px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #FFEB00;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

 
 
/* Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 12px;
}

#nav-icon3 span:nth-child(4) {
  top: 24px;
}

#nav-icon3.open span:nth-child(1) {
  top: 15px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 15px;
  width: 0%;
  left: 50%;
}


/*NAV*/
nav {
	background-color: #fff;
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	height: 100%;
	max-width: 100%;
	width: 100%;
	overflow-y: auto;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
nav.show {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	padding: 35px 0px;
	padding-top: 10px;
	padding-bottom: 0px;
}


/*OVERLAY*/
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-color: #39393a;
	opacity: 0;
	visibility: hidden;
}
.overlay.show {
	opacity: 0.8;
	visibility: visible;
}

 


 

.mobile_logo{ width: 200px; padding-left: 25px;}
.mobile_logo img{ width: 100%;}


ul.mobile_menu{ list-style: none; padding: 0px; margin: 0px;}

ul.mobile_menu li{ display: block;}
ul.mobile_menu li a{ background: #fff; text-decoration: none; font-size: 16px; color: #000; padding: 20px; display: block}
ul.mobile_menu li a:hover{ background: #D00778; color: #fff; }

nav .request_demobtn{ margin-left: 20px;}