@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* font-family: "Montserrat", sans-serif;
font-family:"FontAwesome"; */

/* animation starts here */
.shake-vertical { -webkit-animation: shake-vertical 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 1s infinite alternate-reverse both; animation: shake-vertical 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 1s infinite alternate-reverse both; }
@-webkit-keyframes shake-vertical {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  10%, 30%, 50%, 70% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  20%, 40%, 60% { -webkit-transform: translateY(8px); transform: translateY(8px); }
  80% { -webkit-transform: translateY(6.4px); transform: translateY(6.4px); }
  90% { -webkit-transform: translateY(-6.4px); transform: translateY(-6.4px); }
}
@keyframes shake-vertical {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  10%, 30%, 50%, 70% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  20%, 40%, 60% { -webkit-transform: translateY(8px); transform: translateY(8px); }
  80% { -webkit-transform: translateY(6.4px); transform: translateY(6.4px); }
  90% { -webkit-transform: translateY(-6.4px); transform: translateY(-6.4px); }
}
/* animation ends here */

:root{
	--montserrat: "Montserrat", sans-serif;
	--fontAwesome: 'FontAwesome';
	--white: #ffffff;
	--black: #120624;
	--light_violet: #e3d2ff;
	--pp_gradient: linear-gradient(145deg, rgba(243,19,166,1) 0%, rgba(101,22,234,1) 100%);
	--hero_bg_gradient: linear-gradient(124deg, rgba(18,6,37,0.80) 0%, rgba(18,6,37,1) 100%);
	--radial_gradient: radial-gradient(circle, rgba(166,21,203,1) 0%, rgba(139,22,216,1) 33%, rgba(48,129,239,1) 58%, rgba(0,0,0,1) 100%);
	--purple_bg: linear-gradient(48deg, rgba(56,12,129,1) 0%, rgba(21,4,47,1) 27%, rgba(0,0,0,1) 100%);
	--footer_bg: linear-gradient(45deg, rgba(100,33,212,1) 0%, rgba(74,24,157,1) 40%, rgba(0,0,0,1) 100%);
	--effect: all ease-in-out 350ms;
}

html, body{ padding: 0; margin: 0; border:0; /*scroll-behavior: smooth;*/ overflow-x: hidden; }
*, p{ font-family: var(--montserrat); font-size: 14px; font-weight: 400; line-height: 24px; transition: var(--effect); color: var(--black); }
ul{ padding: 0; margin: 0; border: 0; }
ul li{ list-style-type: none; }
a{ text-decoration: none; color: inherit; }
h1,h2,h3,h4,h5,h6{ text-transform: capitalize; font-family: var(--montserrat); font-weight: 500; }
h1{ font-size: 64px!important; line-height: 80px!important; }
h3{ font-size: 48px!important; line-height: 60px!important; margin-top: -7px;}

.text_gradient{ -webkit-background-clip: text!important;  -webkit-text-fill-color: transparent; background: var(--pp_gradient); }
.border_gradient{ border-image: var(--pp_gradient) 1; border-width: 4px; border-style: solid; }
.bttn{ padding: 12px 24px; border-radius: 99px; display: inline-block; text-transform: capitalize; font-weight: 500; position: relative; overflow: hidden; }
.bttn.gradient:before{ position: absolute; content:''; background: var(--pp_gradient); top: 0; bottom: 0; left: 0; right: 0; transform: rotate(0deg); z-index: -1; transition: var(--effect); }
.bttn.gradient:hover:before{ transform: rotate(180deg); }
a.bttn{ font-size: 16px; }
.bttn.transparent{ background-color: transparent; border: 1px solid var(--white); }

section{ margin-bottom: 100px; position: relative; overflow: hidden; }

.image_wrapper{width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; border-radius: 6px;}
.image_wrapper:before{content: ""; display: block; padding-top: 100%;}
.image_wrapper img{width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

header{ position: fixed; width: 100%; z-index: 10; margin-top: 30px; }
header .navbar-brand img{ max-width: 120px; width: 100%; }
header .bttn{ padding: 16px 26px; text-transform: capitalize; color: var(--white); border-radius: 99px; }
header .navbar-collapse ul li:focus-visible, header .navbar-collapse ul li a:focus-visible{ border: 0; outline: 0px; box-shadow: 0px; }
header .navbar-collapse ul li a{ text-transform: capitalize; font-weight: 400!important; position: relative; }
header .navbar-collapse ul li:not(:last-child){ margin-right: 20px; }
header .navbar-collapse ul li a:before, header .navbar-collapse ul li .actactive_menu a{ position: absolute;	content:''; left: 0; bottom: -4px; width: 0%; opacity: 0; background: var(--pp_gradient); /* background-color: var(--white); */ height: 2px; border-radius: 4px; transition: var(--effect); }
header .navbar-collapse ul li:hover a:before{ width: 100%; opacity: 1; }
header .navbar-collapse ul li:hover a{ color: var(--white)!important; }
header .navbar-light .navbar-nav .nav-link:focus, header .navbar-light .navbar-nav .nav-link:hover{ color: var(--white) !important; }
/*header .navbar-collapse ul li:hover a{ -webkit-background-clip: text!important;  -webkit-text-fill-color: transparent; background: var(--pp_gradient); }*/
header .navbar-light .navbar-nav .nav-link{ color: var(--white); }
header .navbar-light .navbar-nav .nav-link.active, header .navbar-light .navbar-nav .show>.nav-link{ color: var(--white); font-weight: 400; }

header.nav_hover_bg{ margin-top: 0px; }
header.nav_hover_bg .navbar > div.container{ backdrop-filter: blur(10px); padding: 10px; box-sizing: border-box; background-color: #00000085; border-radius: 4px; }

.banner{ background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 0px 0px 120px 120px; overflow: hidden; }
.banner > div.container{ margin-top: 20px; position: relative; }
.banner > div.container > div.row .image_wrapper{ bottom: -70px; right: -35px;}
.banner > div.container:before{ content: ''; position: absolute; height: 100%; width: 63%; right: -110px; bottom: -27%; background-image: url('../images/banner_ellipse.svg'); background-size: contain; background-repeat: no-repeat; background-position: bottom right; z-index: 1; }
.banner.inner > div.container:before{ display: none; }
.banner:after, .banner:before{ position: absolute; content:''; }
.banner:before{ background: var(--hero_bg_gradient); z-index: 0; top: 0; bottom: 0; left: 0; right: 0; opacity: 90%; }
.banner:after{ background-image: url(../images/hero_radial_color.png); top: 0; left: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-size: contain; }
.banner .banner_left{ padding-top: 300px; padding-bottom: 100px; position: relative; z-index: 2; }
.banner.inner .banner_left{ padding-top: 200px; }
.banner .banner_content h1 span{ background: var(--pp_gradient); padding: 0px 10px; border-radius: 6px; font-size: inherit; font-weight: inherit; }
.banner .banner_content p{ margin: 20px 0px 48px 0px; }
.banner .banner_content h1{ margin-bottom: 0; }
.banner .banner_content, .banner .reviewers, .banner .image_wrapper{ position: relative; z-index: 1; }
.banner *{ color: var(--white); }
.banner .row > div:nth-child(1) .image_wrapper img{ filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.50)); }
.bttn_arrw{ display: inline-flex; align-items: center; }
.bttn_arrw span{ height: 48px; width: 48px; border-radius: 50%; background-color: var(--white); border: 2px solid var(--white); position: relative; display: inline-block; }
.bttn_arrw span i{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 22px; color: var(--black); }
.bttn_arrw a.bttn{ background-color: transparent;!important; color: var(--white); border: 2px solid var(--white); }
.bttn_arrw:hover a.bttn{ background-color: var(--white)!important; color: var(--black); border: 2px solid var(--black); }
.bttn_arrw:hover span{ background-color: transparent; border: 2px solid transparent; }
.bttn_arrw:hover span i{ color: var(--white); }

.banner .reviewers{ display: flex; justify-content: flex-start; align-items: center; margin-top: 100px; }
.banner .reviewers .reviewers_headshot span{ width: 40px; height: 40px; display: inline-block; border-radius: 50%; overflow: hidden; filter: drop-shadow(0px -5px 10px rgba(0, 0, 0, .20)); }
.banner .reviewers .reviewers_headshot span:not(:first-child){ margin-left: -12px; }
.banner .reviewers .reviewers_headshot img{ max-width: 40px; width: 100%; height: auto; }
.banner .rh_count{ text-align: center; margin-left: 12px; }
.banner .rh_count .rhc_total{ font-weight: 600; font-size: 16px; text-decoration: underline; }
.banner .rh_count h6{ font-size: 12px; font-weight: 400; }
.banner .bottom_sign{ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index:999; }
.banner .bottom_sign img{ width: 100%; max-width: 48px; height: auto; display: inline-block; }
.banner .image_wrapper:before{ padding-top: 117%; }
.banner .image_wrapper:after{  }

.masonry .image_wrapper:not(.image3){ margin-bottom: 30px; }
.masonry .image_wrapper.image1:before{ padding-top: 45%; }
.masonry .image_wrapper.image2:before{ padding-top: 94%; }
.masonry .image_wrapper.image3:before{ padding-top: 101%; }

.counter_box{ background-color: var(--black); height: -webkit-fill-available; display: flex; justify-content: center; flex-direction: column; border-radius: 8px; padding-left: 30px; }
.counter_box:nth-child(odd){ margin-bottom: 30px; }
.counter_box *{ color: var(--white); }
.counter_box .cb_head{ display: flex; justify-content: flex-start; }
.counter_box p{ font-size: 16px; text-transform: capitalize; }

.why_choose{ background-color: var(--black); padding-top: 180px; padding-bottom: 120px; background-image: url('../images/background.png'); background-size: cover; background-repeat: no-repeat; background-position: top center; }
.why_choose .icon_box{ padding: 20px; box-sizing: border-box; border-radius: 12px; background-color: var(--white); margin-bottom: 20px; }
.why_choose .icon_box p{ font-size: 12px; line-height: 16px; }
.why_choose .icon_box .icon_head{ display: flex; justify-content: flex-start; margin-bottom: 12px; }
.why_choose .icon_box .icon_head h4{ font-size: 18px; line-height: 24px; font-weight: 500; }
.why_choose .icon_box .icon_head img{ max-width: 26px; width: 100%; height: 100%; margin-right: 10px; }
.why_choose > .container > .row .image_wrapper:before{ padding-top: 124%; }
.why_choose:before{ content: ''; position: absolute; width: 100%; background-repeat: no-repeat; background-position: top center; background-image: url('../images/company.svg'); background-size: contain; height: 100%; top: 0px; }
.why_choose .content_head{ margin-bottom: 30px; }
.why_choose .content_head h3, .why_choose .content_head p{ color: var(--white); }
.why_choose .image_wrapper{ overflow: visible; }
.why_choose .image_wrapper img{ z-index: 1; top: 46%; filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, .40)); }
.why_choose .image_wrapper:after{ content: ''; position: absolute; bottom: -1px; width: 100%; height: 81%; z-index: 0; background-repeat: no-repeat; background-position: top center; background-image: url(../images/gradient_border_box.svg); background-size: cover; }

#services{ scroll-margin-top: 100px; }
.both_slider .ss_pic_detail{ border-radius: 12px; background-color: var(--black); overflow: hidden; margin-bottom: 30px; direction: ltr; position: relative; padding-left: 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;padding-top: 10px; }
.both_slider .ss_pic_detail:before{ content:''; position: absolute; border-radius: 8px; z-index: -1; background: linear-gradient(white, white) padding-box, linear-gradient(145deg, rgba(243,19,166,1) 0%, rgba(101,22,234,1) 100%) border-box; border: 1px solid transparent; top: 0; bottom: 0; right: 0; left: 0; }
/*.both_slider .ss_pic_detail .ss_details{ padding: 50px 20px; }*/
.both_slider .ss_pic_detail .ss_details *{ color: var(--white); }
.both_slider .ss_pic_detail .ss_details p{ font-size: 12px; line-height: 18px; }
.both_slider .ss_pic_detail .ss_details h4{ font-size: 28px; line-height: 36px; margin-bottom: 20px; }
.both_slider .ss_pic_detail .ss_details a{ padding: 4px 8px; border-radius: 99px; background: var(--pp_gradient); color: var(--white); font-size: 12px; }
.both_slider .owl-carousel .owl-stage-outer{ overflow: visible; }
.both_slider .ss_pic_detail .ss_pic{ position: relative; display: flex; max-height: 280px; width: -webkit-fill-available; align-items: center; justify-content: flex-end; }
.both_slider .ss_pic_detail .ss_pic img{ max-height: 280px; width: auto; }
/*.both_slider .ss_pic_detail .ss_pic img{ position: absolute; top: 50%; transform: translateY(-50%); right: 0px; width: 100%; }*/

.testimonials{ margin-bottom: 80px; }
.testimonials .owl-carousel .owl-stage-outer{ padding: 0px 0px 40px 0px; }
.testimonials .testimonial_box{ box-sizing: border-box; padding: 30px; filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.25)); }
.testimonials .testimonial_box .tb_content p{ font-size: 16px; line-height: 24px; }
.testimonials .testimonial_box .tb_content span{ max-width: 35px; width: 100%; display: inline-block; height: auto; overflow: hidden; margin-bottom: 30px; }
.testimonials .testimonial_box .tb_author{ display: flex; margin-top: 40px; }
.testimonials .testimonial_box .tb_author .tda_image{ height: 40px; width: 40px; border-radius: 50%; display: inline-block; margin-right: 10px; }
.testimonials .testimonial_box .tb_author .tda_image img{ max-width: 40px; width: 100%; height: auto; }
.testimonials .testimonial_box:before{ content:''; position: absolute; border-radius: 8px; z-index: -1; background: linear-gradient(white, white) padding-box, linear-gradient(145deg, rgba(243,19,166,1) 0%, rgba(101,22,234,1) 100%) border-box; border: 1px solid transparent; top: 0; bottom: 0; right: 0; left: 0; }
.testimonials .testimonial_box .tb_author .tba_name{ font-size: 14px; font-weight: 600; }
.testimonials .testimonial_box .tb_author .tba_bar{ font-size: 12px; line-height: 18px; }
.testimonials div.container{ position: relative; padding-bottom: 60px; margin-bottom: 20px; }
.testimonials div.container:before{ position: absolute; content: ''; height: 1px; width: 100%; background-color: #e5e5e5; bottom: 0px; }
.testimonials .testimonial_slider .num{ margin-bottom: 20px; }

.contact .contact_detail_form{ margin-top: 80px; position: relative; box-sizing: border-box; padding: 20px 40px 20px 20px; }
.contact .contact_detail_form:before{ content:''; position: absolute; border-radius: 8px; z-index: -1; background: linear-gradient(white, white) padding-box, linear-gradient(145deg, rgba(243,19,166,1) 0%, rgba(101,22,234,1) 100%) border-box; border: 1px solid transparent; top: 0; bottom: 0; right: 0; left: 0; }
.contact .cd_form{ padding-left: 60px; }
.contact .cd_form form input:not([type="submit"]), .contact .cd_form form textarea{ border: 0px; outline: 0px; border-bottom: 1px solid #e5e5e5; font-size: 16px; line-height: 20px; color: var(--black); }
.contact .cd_form form .form-floating{ margin-bottom: 36px; }
.contact .cd_form form input::placeholder, .contact .cd_form form .form-floating label{ font-size: 16px !important; line-height: 20px !important; }
.contact .cd_form .form-control:focus{ box-shadow: 0px 0px 0px transparent; }
.contact .cd_form form button[type="submit"]{ font-size: 14px; text-transform: capitalize; display: inline-block; background: var(--pp_gradient); color: var(--white); outline: 0px; border: 0px; }
.contact .cd_form form textarea{ overflow: visible; height: 100px; }
.contact .cd_form .success, .contact .cd_form .error{ width: 100%; position: relative; padding: 10px 20px; display: block; color: var(--black); margin-top: 30px; font-weight: 600; border: 4px solid transparent; }
.contact .cd_form .success{ border-color: green!important; }
.contact .cd_form .error{ border-color: red!important; }
#subscriptionfrm .success{float: left;color: green!important;position: relative;}
#subscriptionfrm .error{float: left;color: red !important;position: relative;}
.contact .contact_detail_form .cd_box{ background: var(--purple_bg); border-radius: 12px; padding: 50px 30px; box-sizing: border-box; position: relative; }
.contact .contact_detail_form .cd_box:before{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-image: url('../images/logo_bg.png'); background-size: contain; background-repeat: no-repeat; background-position: bottom center; width: 100%; height: 100%; z-index: 0; }
.contact .contact_detail_form .cd_box *{ color: var(--white); position: relative; z-index:1; }
.contact .contact_detail_form .cd_box .cdb_single *{ margin-bottom: 0; }
.contact .contact_detail_form .cd_box .cdb_single:nth-child(2){ margin: 36px 0px; }
.contact .contact_detail_form .cd_box .cdb_single h5{ font-size: 24px; font-weight: 500; margin-bottom: 12px; text-decoration: underline; }
.contact .contact_detail_form .cd_box .cdb_single p{ font-size: 16px; line-height: 24px; }
.contact .cd_form .form-floating>.form-control:focus, .contact .cd_form .form-floating>.form-control:not(:placeholder-shown){ padding-top: 3rem; }

footer{ background: var(--black); border-radius: 120px 120px 0px 0px; position: relative; }
footer:before{ content: ''; position: absolute; background-image: url(../images/hero_radial_color.png); bottom: 0%; right: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-size: contain; z-index: 0; transform: scaleY(-1); }
footer > .container > div{ position: relative; z-index: 1; }
footer *{ color: var(--white); font-size: 16px; }
footer .heading_form{ padding-top: 120px; padding-bottom: 60px; margin-bottom: 60px; position: relative; }
footer .foot_large_logo:before, footer .heading_form:before{ content: ''; position: absolute; bottom: 0; height: 1px; background-color: var(--white); opacity:20%; width: 100%; }
footer .heading_form form{ position: relative; outline: 0px; border: 0px; }
footer .heading_form form input{ font-size: 14px; border-radius: 99px; outline: 0px; border: 0px; }
footer .heading_form form input[type="email"]{ width: 100%; color: var(--black); padding: 15px; padding-right: 150px;}
footer .heading_form form button[type="submit"]{ border: 0; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: var(--pp_gradient); color: var(--white); text-transform: capitalize; }
footer .heading_form form input::placeholder{ font-size: 14px; line-height: 20px; color: #676984; opacity: 80%; }
footer .social_logo .foot_logo img{ max-width: 144px; width: 100%; height: auto; }
footer h4{ line-height: 24px; font-weight: 500; text-transform: uppercase; margin-bottom: 30px; }
footer ul li{ margin-bottom: 14px; padding-left: 0; }
footer ul li a{ text-transform: capitalize; font-weight: 400; }
footer ul li:hover{ padding-left: 5px;	 }
footer ul li:hover a{ color: var(--white); }
footer .copyright{ display: flex; justify-content: space-between; align-items: center; padding: 40px 0px; }
footer .copyright .toc ul{ display: flex; align-items: center; justify-content: flex-start; }
footer .copyright .toc ul li{ margin-left: 20px; }
footer .copyright .copy{ text-transform: capitalize; }
footer .copyright .toc ul li a{ font-size: 14px; }
footer .foot_large_logo{ position: relative; padding-top: 40px; padding-bottom: 48px; }
footer .foot_large_logo img{ width: 100%; max-width: 100%; height: auto; }
footer .foot_social{ margin-top: 30px; }
footer .social_logo span{ height: 32px; width: 32px; background: var(--white); border-radius: 50%; display: inline-block; position: relative; }
footer .social_logo span:not(:last-child){ margin-right: 10px; }
footer .social_logo span i{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; color: var(--black); }
footer .social_logo span:hover{ background: var(--pp_gradient); }
footer .social_logo span:hover i{ color: var(--white); }

.content_details .single_cd h3{ font-size: 30px!important; font-weight: 600; }
footer.inner{ /*border-radius: 40px 40px 0px 0px;*/ background: var(--white)!important; }
footer.inner:before{ display: none; }
footer.inner *{ color: var(--black)!important; }
.content_details .single_cd{ margin-bottom: 30px; }

/* HTML: <div class="loader"></div> */
.loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 4px solid transparent; border-top-color: #000000; border-radius: 50%; animation: button-loading-spinner 1s ease infinite; }
@keyframes button-loading-spinner { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
.active_menu a:before{ width: 100% !important; opacity: 1 !important; }
.navbar{padding-top: 0px;}
.req{color: red;}

.inner_header{ position: relative !important; margin-bottom: 50px; }
.inner_header ul li:hover a, .inner_header ul li:focus a, .inner_header ul li a{ color: var(--black)!important; }
header.inner_header .navbar-collapse ul li:hover a{ color: var(--black)!important; }