/*--------------
All Contents
--------------*/

/*-----------------
1. Reset.css
2. Helper Classes
3. Main and Hero Section Stylings
4. Services Styling
5. Features Split
6. Feature with BG
7. Feature Big
8. Testimonial Stling
9. Pricing Section
10. Call To Action Subscribe
11. Download Section
12. Back to top
------------------*/


/*----- 1. Reset.css -----*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* --- Common Styles ---*/

h1 {
	font-family: Poppins;
  font-size: 16px;
}

/*----- Helper Classes -----*/

html * {
	text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*
::-webkit-scrollbar {
	display: none;
}
*/

::-moz-selection {
    color: #1B476F;
    background: #FFFFFF;
}

::selection {
    color: #1B476F;
    background: #FFFFFF;
}

.nopadding {
	
}

.custom-padding {
	padding-left: 10px;
	padding-right: 10px;
}

.no-margin {
	margin-right: 0;
	margin-left: 0;
}


.sup-title {
	display: inline-block;
	font-size: 1em;
	padding: 4px;
	text-transform: uppercase;
	font-weight: bold;
	color: #FFFFFF;
	background: #000000;
	margin: 0 0 20px 0;
}

.spacer {
	width: 100%;
	height: 50px;
}

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   opacity: 1;
   background-color: #F2F2F2;
   z-index: 9999;
   text-align: center;
}

#loading-image {
	display: inline;
    top: 40%;
    position: relative;
  z-index: 9999;
}

.spacer {
	width: 100%;
	height: 50px;
}

.spacer-big {
	width: 100%;
	height: 100px;
}

.error-message {
	color: #FF3333;
	font-family: Roboto;
	margin-top: 5px;
}

.success-message {
	color:#33cc33;
	font-family: Roboto;
	margin-top: 5px;
}


.btn-fill {
	background: #FFFFFF;
	color: #1B476F;
	border: 2px solid #1B476F;
	-webkit-transition: 200ms;
	-moz-transition: 200ms;
	-o-transition: 200ms;
	transition: 200ms;
}

.btn-fill:hover, .btn-fill:focus {
	color: #1B476F;
	background: transparent;
	border: 2px solid #1B476F;
}


/* ------ Navbar Styling Starts ----- */


.navbar {
	font-size: 14px;
  font-family: Poppins;
	font-weight: 500;
	text-transform: uppercase;
	padding-top: 25px;
	letter-spacing: 1px;
	height: 80px;
}

.navbar-default {
  transition: all 0.6s ease;
	border-color: transparent;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-radius: 0px;
  border-color: transparent;
}

.navbar-default .navbar-toggle:hover {
  background-color: transparent;
}

.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #111111;
}

.navbar-default .navbar-brand .navbar-toggle .collapsed {
    padding: 4px 6px;
    font-size: 16px;
    color: #111111;
  }

.navbar-default .navbar-brand {
	padding: 0 0;
	-webkit-transition: 200ms;
	-moz-transition: 200ms;
	-o-transition: 200ms;
	transition: 200ms;
}

.navbar-default .navbar-brand:hover {
  transition: 1s;
}

.navbar-default .navbar-nav > li > a {
  color: #444444;
  -webkit-transition: all 0.5s;
	-moz-transition: all 0.5;
  transition: all 0.5s;
}

.navbar-default .navbar-nav > li > a:hover {
  color: #000000;
}

.navbar-default .navbar-nav > .active > a {
  background: transparent;
  color: #FFFFFF;
  }


.navbar-default .navbar-nav > .active > a:hover {
    background: transparent;
    color: #FFFFFF;
}

.navbar-default .navbar-nav > .active > a:focus {
	background: transparent;
  color: #FFFFFF;
}

.navbar-default .navbar-collapse {
	border-color: transparent;
  background-color: transparent;
}

.navbar-default .navbar-nav .open .dropdown-toggle {
  color: #111111;
}

.navbar-default .nav-white > li > a {
	color: #FFFFFF;
}

.navbar-default .nav-white > li > a:hover {
	color: #999999;
}

/*---------- Media Queries ---------*/

@media only screen and (max-width: 767px) {

	.navbar {
		padding-top: 5px;
		height: 60px;
	}

	.navbar-default {
		border: 0px;
		background-color: transparent;
	}

	.navbar-default .navbar-collapse {
		text-align: center;
		border-color: transparent;
		background-color: #FFFFFF;
		border: 0;
		padding: 10px 0;
		box-shadow: 0 5px 20px rgba(0,0,0,0.1);
	}

	.navbar-default .navbar-nav > li > a {
		color: #222222;
		margin-top: 5px;
		padding: 12px 15px;
		font-size: 13px;
	}

	.navbar-default .navbar-nav > li > a:hover {
		color: #1B476F;
		background-color: #f5f5f5;
	}

	.navbar-default .navbar-brand {
		color: #FFFFFF;
		padding: 5px 10px !important;
	}

	.navbar-default .navbar-brand img {
		height: 50px !important;
	}

	.navbar-default .navbar-toggle {
		margin-top: 8px;
		margin-right: 10px;
	}

	.navbar-default .navbar-toggle .icon-bar {
		background-color: #111111;
		width: 22px;
		height: 2px;
	}

	/* Language dropdown mobile */
	.navbar-nav .dropdown-menu {
		position: static;
		float: none;
		width: 100%;
		background-color: #f9f9f9;
		border: none;
		box-shadow: none;
		margin-top: 0;
	}

	.navbar-nav .dropdown-menu > li > a {
		padding: 10px 20px;
		color: #333;
	}

	.navbar-nav .dropdown-menu .flag-icon {
		width: 22px;
		height: 15px;
		margin-right: 10px;
	}

	/* Language selector in navbar mobile */
	.navbar-nav > li.dropdown > a .flag-icon {
		width: 20px;
		height: 14px;
	}

	.navbar-nav > li.dropdown > a .lang-text {
		font-size: 13px;
	}
}

@media only screen and (min-width: 240px) {

.navbar.past-main {
  transition: all 0.6s ease;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.99);
}

.navbar.effect-main:active {
  -webkit-transition: height 0.6s; /* For Safari 3.1 to 6.0 */
  transition: height 0.6s;
  height: 60px;
}

.navbar.past-main {
	font-size: 14px;
	padding-top: 5px;
	height: 60px;
	-webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
	-moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
	box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
	-webkit-transition: height 0.6s; /* For Safari 3.1 to 6.0 */
	transition: height 0.6s;
}

.navbar-default.past-main .navbar-brand {
	padding: 8px 0;
}

.navbar-default.past-main .navbar-toggle .icon-bar {
	background-color: #111111;
}

.navbar-default.past-main .navbar-nav > li > a {
  color: #606060;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
}

.navbar-default.past-main .navbar-nav > li > a:hover {
  color: #111111;
}

.navbar-default.past-main .navbar-nav > .active > a {
  background: transparent;
  color: #1B476F;
  }


.navbar-default.past-main .navbar-nav > .active > a:hover {
    background: transparent;
    color: #222222;
}

.navbar-default.past-main .navbar-nav > .active > a:focus {
	background: transparent;
  color: #222222;
}

}



/* ------ Navbar Styling Ends ----- */

#main {
  height: 100%;
}


/* ----- Hero Section Styling Starts ----- */

.hero-section {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)), url("../images/hero3.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	width: 100%;
	background-position: 50% 60%;
}

.jarallax {
    position: relative;
		background-image: url("../images/hero.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.hero-content {
	width: 100%;
	padding: 200px 0 100px 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.hero-content h1 {
	font-family: Poppins;
	font-size: 34px;
	color: #111111;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -1px;
	margin-bottom: 20px;
}

.hero-content p {
	font-family: Poppins;
	font-size: 14px;
	color: #111111;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 1px;
	margin-bottom: 30px;
}

 .btn-action {
	font-family: Roboto;
	background-color: #1B476F;
  border: 2px solid #1B476F;
	border-radius: 0;
  color: #FFFFFF;
  font-size: 12px;
	font-weight: 400;
  height: 38px;
  letter-spacing: 2px;
  line-height: 3;
  padding: 0 21px;
  text-transform: uppercase;
	outline: none;
	-webkit-transition: 200ms;
	-moz-transition: 200ms;
	-o-transition: 200ms;
	transition: 200ms;
}

.hero-content .btn-action:hover, .hero-content .btn-action:focus,
.hero-content .btn-action:active, .hero-content .btn-action:active:focus {
	background: transparent;
	outline: none;
	color: #1B476F;
	border-color: #1B476F;
}

.btn-action:hover, .btn-action:focus, .btn-action:active, .btn-action:active:focus {
	background: transparent;
	outline: none;
	color: #1B476F;
	border-color: #1B476F;
}

.txt-white h1 {
	color: #FFFFFF;
}

.txt-white p {
	color: #FFFFFF;
}

.app-hero {
	background: #F3F3F3;
}

.app-hero-content {
	overflow: hidden;
	padding: 150px 0 0 0;
}

.app-hero-content h1 {
	color: #111111;
}

.app-hero-content p {
	color: #111111;
}

.app-hero-content img {
	margin-top: 50px;
}

.app-sub {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 200, 0.1)), url(../images/feature_bg.jpg) no-repeat center center;
	background-size: cover;
}

.app-sub-inner {
	width: 100%;
	height: 100%;
	padding: 100px 0 100px 0;
	overflow: hidden;
}

.app-sub-content {
	padding: 100px 0 0 0;
}

.app-sub-content h1 {
	font-family: Poppins;
	font-size: 42px;
	font-weight: 700;
	color: #111111;
	line-height: 1.2;
	margin-bottom: 30px;
}


.app-sub-content p {
	font-family: Poppins;
	font-size: 16px;
	font-weight: 100;
	color: #111;
	line-height: 1.4;
	margin-bottom: 30px
}

.app-sub-content .subscribe-form {
	text-align: left;
}


/* ----- Hero Section Styling Ends ----- */




/* ----- About Section Styling Starts ----- */

/* ========== NEW PROBLEMS SECTION ========== */
.problems-section {
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	padding: 100px 0 120px;
	position: relative;
}

.problems-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(27, 71, 111, 0.1), transparent);
	pointer-events: none;
}

.problems-header {
	max-width: 800px;
	margin: 0 auto 80px;
	padding: 0 20px;
}

.problems-header h1 {
	font-family: Poppins;
	font-size: 48px;
	color: #111111;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.2;
	margin-bottom: 25px;
}

.problems-header p {
	font-family: Poppins;
	font-size: 20px;
	color: #555555;
	font-weight: 400;
	line-height: 1.6;
}

.problems-grid {
	display: flex;
	justify-content: center;
	gap: 60px;
	flex-wrap: wrap;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.problem-card {
	flex: 1;
	min-width: 300px;
	max-width: 420px;
	text-align: center;
}

.problem-image {
	width: 100%;
	max-width: 380px;
	height: 380px;
	margin: 0 auto 35px;
	border-radius: 40px;
	overflow: hidden;
	background: linear-gradient(145deg, #ffffff 0%, #f0f4f8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 30px 80px rgba(0,0,0,0.12);
	border: 2px solid rgba(27, 71, 111, 0.06);
	padding: 50px;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.problem-image:hover {
	transform: translateY(-15px);
	box-shadow: 0 40px 100px rgba(27, 71, 111, 0.2);
}

.problem-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.problem-image:hover img {
	transform: scale(1.08);
}

.problem-card h2 {
	font-family: Poppins;
	font-size: 28px;
	color: #1B476F;
	font-weight: 700;
	margin-bottom: 15px;
}

.problem-card p {
	font-family: Poppins;
	font-size: 17px;
	color: #666666;
	line-height: 1.6;
	max-width: 320px;
	margin: 0 auto;
}

/* Problems Section Responsive */
@media (max-width: 1200px) {
	.problems-grid {
		gap: 40px;
	}

	.problem-image {
		max-width: 340px;
		height: 340px;
		padding: 40px;
	}
}

@media (max-width: 992px) {
	.problems-header h1 {
		font-size: 38px;
	}

	.problem-image {
		max-width: 300px;
		height: 300px;
		padding: 35px;
	}

	.problem-card h2 {
		font-size: 24px;
	}
}

@media (max-width: 768px) {
	.problems-section {
		padding: 80px 0 100px;
	}

	.problems-header {
		margin-bottom: 60px;
	}

	.problems-header h1 {
		font-size: 32px;
	}

	.problems-header p {
		font-size: 17px;
	}

	.problems-grid {
		gap: 50px;
	}

	.problem-card {
		min-width: 280px;
	}

	.problem-image {
		max-width: 320px;
		height: 320px;
		padding: 40px;
		border-radius: 30px;
	}
}

@media (max-width: 480px) {
	.problems-section {
		padding: 60px 0 80px;
	}

	.problems-header h1 {
		font-size: 26px;
	}

	.problem-image {
		max-width: 280px;
		height: 280px;
		padding: 35px;
		border-radius: 25px;
	}

	.problem-card h2 {
		font-size: 22px;
	}

	.problem-card p {
		font-size: 15px;
	}
}
/* ========== END PROBLEMS SECTION ========== */

.services-section {
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	position: relative;
	padding: 80px 0 100px;
}

.services-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(27, 71, 111, 0.1), transparent);
	pointer-events: none;
}

.services-content {
	padding-top: 20px;
	padding-bottom: 60px;
}

.services-content h1 {
	font-family: Poppins;
	font-size: 42px;
	color: #111111;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.3;
	margin-bottom: 20px;
}

.services-content p {
	font-family: Poppins;
	font-size: 18px;
	color: #555555;
	font-weight: 400;
	letter-spacing: 0.5px;
	line-height: 1.6;
	margin-top: 0px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* === NEW SERVICE CARDS WITH BIG IMAGES === */
.services-row {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 30px;
}

.service-card {
	text-align: center;
	padding: 20px;
	margin-bottom: 40px;
}

.service-img-big {
	width: 100%;
	height: 350px;
	margin: 0 auto 30px;
	border-radius: 30px;
	background: linear-gradient(145deg, #ffffff 0%, #f0f4f8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20px 60px rgba(0,0,0,0.1);
	border: 2px solid rgba(27, 71, 111, 0.05);
	padding: 40px;
	transition: all 0.4s ease;
}

.service-img-big:hover {
	transform: translateY(-10px);
	box-shadow: 0 30px 80px rgba(27, 71, 111, 0.15);
}

.service-img-big img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.service-img-big:hover img {
	transform: scale(1.05);
}

.service-card h2 {
	font-family: Poppins;
	font-size: 26px;
	color: #1B476F;
	font-weight: 700;
	margin-bottom: 15px;
}

.service-card p {
	font-family: Poppins;
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	max-width: 300px;
	margin: 0 auto;
}

@media (max-width: 992px) {
	.service-img-big {
		height: 280px;
		padding: 30px;
	}

	.service-card h2 {
		font-size: 22px;
	}
}

@media (max-width: 768px) {
	.services-row {
		padding: 0 15px;
	}

	.service-img-big {
		height: 250px;
		max-width: 350px;
		
	}

	.services-content h1 {
		font-size: 30px;
	}
}

@media (max-width: 480px) {
	.service-img-big {
		height: 220px;
		padding: 20px;
		border-radius: 20px;
	}

	.service-card h2 {
		font-size: 20px;
	}

	.services-content h1 {
		font-size: 24px;
	}
}
/* === END SERVICE CARDS === */

.services {
	overflow: hidden;
	padding-top: 60px;
	padding-bottom: 80px;
}

.services .col-sm-4 {
	padding: 0 25px;
	margin-bottom: 30px;
}

.services .services-icon {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid;
	border-color: transparent;
	background: #F6F6F6;
	margin: 0 auto;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.services .services-icon img {
	position: absolute;
	top: 10%;
	left: 11%;
	font-size: 42px;
}

.services .services-description {
	margin-bottom: 50px;
	padding: 0 15px;
}

.services .services-description h1 {
	font-family: Poppins;
	font-size: 24px;
	color: #1B476F;
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.3;
	margin-top: 25px;
	margin-bottom: 15px;
}

.services .services-description p {
	font-family: Poppins;
	font-size: 15px;
	color: #666666;
	font-weight: 400;
	letter-spacing: 0.3px;
	line-height: 1.6;
	margin-top: 0;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}

.services .col-sm-4:hover .services-icon {
	border-color: #1B476F;
}

/* ----- Service Section Styling Ends ----- */


/* -----------------------------------------------
----------- Flex Features Styling Starts ---------
-------------------------------------------------*/


.flex-features {
	background: #F3F3F3;
	padding-top: 0;
	padding-bottom: 50px;
}

.flex-split {
	padding-top: 50px;
	padding-bottom: 0;
	background: #F3F3F3;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.flex-split .f-left {
	flex: 1 0 50%;
	background: #F3F3F3;
	padding: 10px;
}

.flex-split .f-left img {
	margin-top: 30px;
	margin: 0 auto;
}

.flex-split .f-right {
	flex: 1 0 50%;
	background: #F3F3F3;
}

.flex-split .f-right {
	padding: 30px 20px 20px 20px;
}

.flex-split .f-right h2 {
	font-family: Poppins;
	font-size: 28px;
	color: #111111;
	font-weight: 600;
	line-height: 1.2;
}

.flex-split .f-right p {
	font-family: Poppins;
	font-size: 14px;
	color: #111111;
	line-height: 1.4;
	margin: 20px 0 20px 0;
}

.flex-split .f-right ul {
	margin-bottom: 20px;
}

.flex-split .f-right ul i {
	margin-right: 10px;
}

.flex-split .f-right li {
	font-family: Poppins;
	font-size: 14px;
	color: #111111;
	line-height: 2;
}



/* -----------------------------------------------
----------- Flex Features Styling Ends -----------
-------------------------------------------------*/


/* ----- Features Section Styling Starts ----- */


.features-section {
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.features-section .f-left {
	flex: 1 0 50%;
	background: #F3F3F3;
}

.features-section .f-right {
	flex: 1 0 50%;
	background: url(../images/iphone_hand_1.jpg);
	background-position: 50% 50%;
	background-size: cover;
}

.features-section .f-right img {
	margin-top: 0;
}

.features-section .f-left  {
	padding: 30px;
}

.features-section .f-left  h2 {
	font-family: Poppins;
	font-size: 28px;
	color: #111111;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 40px;
}

.features-section .f-left  p {
	font-family: Poppins;
	font-size: 14px;
	color: #111111;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 1px;
	margin-top: 20px;
	margin-bottom: 30px;
}

.features-section .btn-action {
	margin-bottom: 20px;
}



/*----- Features Section Styling Ends ----- */


/* ----- Features Section 2 Styling ----- */

.features-section-2 {
	padding-top: 30px;
	padding-bottom: 30px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0)), url(../images/feature_bg.jpg) no-repeat center center;
	background-size: cover;
}

.features-section-2 .features-content {
	
}

.features-section-2 .features-content h2 {
	font-family: Poppins;
	font-size: 21px;
	color: #111111;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	margin-top: 20px;
}

.features-section-2 .features-content h4 {
	font-family: Poppins;
	font-size: 18px;
	color: #111111;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 1px;
	margin-top: 10px;
	margin-bottom: 50px;
}

.features-section-2 .features-content p {
	font-family: Roboto;
	font-size: 14px;
	color: #111111;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 1px;
	margin-top: 10px;
	margin-bottom: 20px;
}


/* ----- Features Section 2 Styling ----- */

/* ----- Features Section Styling Ends ----- */


/* ----- Counter Section Styling Starts -----*/

.counter-section {
 width: 100%;
 padding-top: 100px;
 padding-bottom: 50px;
 background: #FFFFFF;
}

.counter-section h3  {
	font-family: Poppins;
	font-size: 28px;
	font-weight: 400;
	color: #303030;
}

.counter-icon {
  padding: 15px;
}

.counter-icon i {
  font-size: 42px;
  color: #1B476F;
}

.counter-text {
	margin-top: 10px;
  margin-bottom: 20px;
}

.counter-text h4 {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  padding: 0.5em;
  color: #111111;
}

/* -------- Counter Section Styling Ends --------- */



/*------ Feature Big Section Styling Starts ------ */


.feature_huge {
	padding-top: 100px;
	padding-bottom: 100px;
	background: #F3F3F3;
}

.feature_huge img {
	margin: 0 auto;
	margin-bottom: 50px;
}

.feature_huge .feature_list {
	margin: 0 auto;
	margin-top: 30px;
}

.feature_huge .feature_list img {
	width: 60px;
	height: 60px;
	margin-bottom: 10px;
}

.feature_huge .feature_list h1 {
	font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  padding: 0.5em;
  color: #111111;
}

.feature_huge .feature_list p {
	font-family: Poppins;
  font-size: 12px;
  font-weight: 400;
  padding: 0.5em;
	color: #606060;
	letter-spacing: 1px;
	line-height: 1.3;
	margin-bottom: 20px;
}

/*------ Feature Big Section Styling Ends ------ */



/* -------- Testimonials Section Starts --------- */

.testimonial-section {
   background: #FFFFFF;
	 padding-top: 50px;
}

.testimonial-section h1 {
  font-family: Poppins;
  font-size: 34px;
  font-weight: 500;
  color: #111111;
  margin-top: 3em;
}

.testimonial-section .sub {
  font-family: Roboto;
	font-size: 16px;
	font-weight: 300;
	color: #111111;
	line-height: 1.5;
	margin-top: 30px;
	letter-spacing: 1px;
}

.testimonials {
  margin-top: 4em;
  width: 100%;
  margin-bottom: 4em;
}

.testimonials-2 {
  margin-bottom: 5em;
}

.testimonial-single img {
  width:80px;
	height:80px;
}

/* Testimonial Icon */
.testimonial-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  background: linear-gradient(135deg, #1B476F 0%, #2d6a9f 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(27, 71, 111, 0.3);
}

.testimonial-icon i {
  font-size: 36px;
  color: #ffffff;
}

.testimonial-text h3 {
	font-family: Roboto;
  font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.5;
  color: #000000;
}

.testimonial-text .ion {
	display: inline-block;
	margin-top: 20px;
  font-size: 14px;
  color: #ff8000;
}

.testimonial-text p {
  font-family: Poppins;
  font-size: 14px;
	font-weight: 300;
  padding: 20px 10px 20px 10px;
	letter-spacing: 1px;
	line-height: 1.5;
  color: #111111;
}


/* -------- Testimonials Section -------- */


/* ------ Download Section Styling------------ */

.download {
  width: 100%;
  height: 100%;
  background: #F3F3F3;
}

.app-img {
  display: inline-block;
  margin-top: 5em;
}

.app-info{
}

.app-info h3 {
  font-family: Poppins;
  font-size: 34px;
  font-weight: 500;
  color: #404040;
  margin-top: 20px;
}

.app-info h4 {
  font-family: Roboto;
  font-size: 18px;
  font-weight: 300;
  color:  #3C4B5D;
  margin-top: 20px;
}

.app-info ul {
	margin-top: 20px;
}

.app-info span {
  font-family: Poppins;
  font-size: 12px;
  font-weight: 400;
  color: #222222;
}

.app-info .ion {
  font-size: 1em;
  color: #ff8000;
}

.download-buttons {
  margin-top: 3em;
  margin-bottom: 5em;
}

.download-buttons img {
  height: 50px;
  max-width: 220px;
}


/*------ Download Section Styling Ends ------ */


/* ----- Pricing Section Styling Starts ----- */

.pricing-section {
	width: 100%;
	height: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	background: #F3F3F3;
}

.pricing-intro {
	padding-bottom: 30px;
}

.pricing-intro h1 {
	font-family: Poppins;
	font-size: 28px;
	color: #111111;
	font-weight: 600;
	line-height: 1.4;
}


.pricing-intro p {
	font-family: Roboto;
	font-size: 15px;
	color: #303030;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 1px;
	margin-top: 10px;
	margin-bottom: 50px;
}

.pricing-section .table-left, .pricing-section .table-right {
	padding: 20px 20px 50px 20px;
	margin: 0 auto;
	margin-bottom: 30px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #EFEFEF;
	max-width: 400px;
}

.table-left .icon, .table-right .icon {
	padding: 50px 50px 40px 50px;
}

.table-left .icon img, .table-right .icon img {
	width: 60px;
	height: 60px;
	margin: 0 auto;
}

.table-left .pricing-details span, .table-right .pricing-details span {
	display: inline-block;
	font-family: Poppins;
	font-size: 34px;
	font-weight: 600;
	color: #808080;
	margin-bottom: 20px;
}

.table-left .pricing-details h2, .table-right .pricing-details h2 {
	font-family: Poppins;
	font-size: 18px;
	font-weight: 600;
	color: #505050;
	margin-bottom: 20px;
}

.table-left .pricing-details p, .table-right .pricing-details p {
	font-family: Poppins;
	font-size: 14px;
	font-weight: 300;
	color: #505050;
	letter-spacing: 1px;
	line-height: 1.4;
}

.table-left .pricing-details ul, .table-right .pricing-details ul {
	margin-top: 30px;
	margin-bottom: 50px;
}


.table-left .pricing-details li, .table-right .pricing-details li {
	font-family: Poppins;
	font-size: 14px;
	font-weight: 400;
	color: #505050;
	line-height: 1.4;
	margin-bottom: 10px;
}

.pricing-section .table-left:hover, .pricing-section .table-right:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


/* ----- Pricing Section Styling Ends ----- */


/* ----- CTA Section Styling Starts ----- */



.cta-sub {
	padding-top: 100px;
	padding-bottom: 100px;
	background: #F3F3F3;
}

.cta-sub h1 {
	font-family: Poppins;
	font-size: 28px;
	color: #111111;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 10px;
	margin-bottom: 0;
}

.cta-sub p {
	font-family: Roboto;
	font-size: 16px;
	color: #303030;
	font-weight: 300;
	line-height: 1.5;
	margin-top: 20px;
	margin-bottom: 40px;
}

.subscribe-form {
	text-align: center;
}

.subscribe-form .mail {
 background-color: #F9F9F9;
 border: none;
 border-radius: 5px 0 0 5px;
 outline: none;
 height: 40px;
 padding: 0 150px 0 20px;
 box-shadow: none;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 transition: all .3s;
}


.subscribe-form input {
  color: #222222;
  font-family: Poppins;
  
  font-size: 0.9em;
}

.subscribe-form .submit-button {
  font-size: 0.9em;
  height: 40px;
  border: 2px solid;
  border-radius: 0 5px 5px 0;
  margin: 0;
  padding: 0 25px 0 25px;
	border-color: #1B476F;
  background-color: #1B476F;
  color: #FFFFFF;
	box-shadow: 0 0 1px transparent;
  outline: none;
}

.subscribe-form .submit-button:hover {
  box-shadow: 0 0 10px #FFFFFF;
  -webkit-transition: 500ms;
  transition: 500ms;
}


/* ----- CTA Section Styling Ends ----- */


/* ----- Client Sectiion Styling ----- */

.client-section {
	background-color: #F3F3F3;
}

.clients ul li {
	display: inline;
}

.clients .single img {
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}



/* ------- Footer Section Styling Starts ------- */


.footer {
  background-color: #F3F3F3;
  width: 100%;
  height: 100%;
	overflow: hidden;
	padding-top: 50px;
	padding-bottom: 50px;
}

.footer img {
	margin-bottom: 20px;
}

.footer-menu ul {
	list-style-type: none;
}

.footer-menu li {
	display: inline;
	line-height: 2;
	font-family: Roboto;
	font-size: 14px;
	padding-right: 15px;
	text-transform: uppercase;
}

.footer-menu li a {
	color: #707570;
	text-decoration: none;
}

.footer-text p {
	font-family: Roboto;
	font-size: 14px;
	color: #707570;
	font-weight: 300;
	line-height: 2;
	letter-spacing: 1px;
	margin-top: 10px;
}

/* ------- Footer Section Styling Starts ------- */

.no-color {
	background: #FFFFFF;
}


/*---------------------------------------------------
----------- Contact Page Styling Starts -------------
---------------------------------------------------*/

.contact-section {
	width: 100%;
	height: 100%;
	padding: 150px 0 50px 0;
	background: #FFF;
}

.contact-section h1 {
	font-family: Poppins;
	font-size: 28px;
	font-weight: 600;
	color: #111111;
	line-height: 1.3;
	margin-bottom: 20px;
}

.contact-section p {
	font-family: Roboto;
	font-size: 14px;
	font-weight: 300;
	color: #111111;
	line-height: 1.4;
}



/* ------------ Contact Form Styling --------*/

.contact-form {
	padding-top: 50px;
}


label {
	display: block;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
	text-align: left;
}

.form-control {
  border: 0px;
  border-radius: 0px;
  margin-top: 10px;
  background: transparent;
  margin-bottom: 40px;
  border-bottom: 1px solid #999999;
  -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0);
  box-shadow: inset 0 0px 0px rgba(0,0,0,0);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
    transition: 0.5s;
}

.form-control:focus {
  border-color: #1B476F;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.form-control::-webkit-input-placeholder {
  font-family: Roboto;
  font-size: 13px;
  color: #999999;
}
.form-control:-moz-placeholder {
  font-family: Roboto;
  font-size: 13px;
  color: #999999;
}
.form-control::-moz-placeholder {
  font-family: Roboto;
  font-size: 13px;
  color: #999999;
}
.form-control:-ms-input-placeholder {
  font-family: Quicksand;
  font-size: 13px;
  color: #999999;
}

.text-muted {
  font-family: Roboto;
  font-size: 13px;
  color: #222;
}

.text-muted strong {
  color: #FF3333;
}

.btn-send {
  font-family: Poppins;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  border-radius: 0px;
  color: #FFFFFF;
  background: #1B476F;
	border-color: #1B476F;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
    transition: 0.5s;
}

.btn-send:hover, .btn-send:focus {
  color: #FFFFFF;
  background: #000000;
	border-color: #111111;
  outline: none !important;
}

/* -------- Contact Section Styling Ends ---- */


/* -------------------------------------------------------
----------- Bact-to-Top Styling Starts Here --------------
---------------------------------------------------------*/


.back-to-top {
	background: rgba(89, 36, 236, 0.5);
	margin: 0;
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	z-index: 90;
	display: none;
	text-decoration: none;
	color: #0E1729;
}

.back-to-top i {
	position: relative;
	left: 13px;
	top: 8px;
	font-size: 24px;
	color: #FFFFFF;
	-webkit-transition: 200ms;
	-moz-transition: 200ms;
	-o-transition: 200ms;
	transition: 200ms;
}

.back-to-top:hover {
    background: rgba(89, 36, 236, 0.9);
    color: #FFFFFF;
}

.back-to-top:hover i {
	top: 6px;
}

.back-to-top:focus {
    color: #FFFFFF;
}





/*---------------------------------------------------
----------- Contact Page Styling Ends -------------
---------------------------------------------------*/


/*----------------------------------------------------
------------- All ------------------------------------
--------------------- Media --------------------------
------------------------------- Queries --------------
-----------------------------------------------------*/

 @media only screen and (min-width: 767px) {

	#left, #right {
			width: 25px;
			}
	#top {
			height: 25px;
		}
	#bottom {
			height: 25px;
		}

	.custom-padding {
		padding-left: 80px;
		padding-right: 80px;
	}

	.hero-content {
		width: 100%;
		padding: 260px 0 120px 0;
	}

	.hero-content h1 {
		font-size: 64px;
    font-weight: 600;
    line-height: 1.2;
		margin-top: 0;
		letter-spacing: -2px;
    margin-bottom: 25px;
	}

	.hero-content p {
		font-size: 14px;
	}

	.btn-action {
	  border: 2px solid #1B476F;
		font-weight: 500;
	  height: 42px;
	  padding: 0 24px;
	}

	.btn-fill {
		border: 2px solid #1B476F;
		height: 38px;
	}

	.app-hero-content {
		padding: 150px 0 0 0;
	}

	.app-hero-content h1 {
		font-size: 42px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -1px;
		margin-top: 25px;
	}

	.app-hero-content p {
		font-size: 16px
	}

	.app-sub-inner {
		padding: 180px 0 100px 0;
	}

	.app-sub-content h1 {
		font-size: 64px;
		font-weight: 700;
		margin-bottom: 30px;
	}

	.app-sub-content p {
		font-size: 16px;
		line-height: 1.4;
		margin-bottom: 30px;
	}

	.cta-small .cta-content span {
		position: absolute;
		left: -30px;
	}

	.cta-small .cta-content h2 {
		font-size: 14px;
	}

	.services-content h1 {
		font-size: 34px;
		line-height: 1.3;
	}

	.services-content p {
		font-size: 16px;
	}

	.services .services-description {
		margin-bottom: 75px;
	}

	.service-image-container {
		max-width: 400px;
		padding: 30px;
	}

	.flex-features {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.flex-split {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.flex-split .f-right {
		padding: 50px 20px 20px 20px;
	}

	.features-section {
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	.features-section .f-left h2 {
		font-size: 34px;
	}

	.features-section .f-left {
		padding: 60px;
	}

	.features-section .f-right {
			flex: 1 0 50%;
	}

	.features-section-2 {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.features-section-2 .features-content {
		padding: 50px;
	}

	.features-section-2 .features-content h2 {
		font-size: 34px;
		margin-top: 20px;
	}

	.features-section-2 .features-content h4 {
		font-size: 21px;
	}

	.features-section-2 .features-content p {
		font-size: 15px;
	}

	.counter-up {
    margin-bottom: 2em;
  }

  .counter-text {
    margin-bottom: 0;
  }

	.counter-section h3  {
		font-size: 34px;
	}

	.counter-text h4 {
	  font-size: 18px;
	}

	.feature_huge .feature_list img {
		width: 65px;
		height: 65px;
	}

	.feature_huge .feature_list h1 {
		font-family: Poppins;
	  font-size: 18px;
	  font-weight: 600;
	  padding: 0.5em;
	  color: #232323;
	}

	.feature_huge .feature_list p {
	  font-size: 14px;
	}


	.testimonial-section h1 {
	  font-size: 2em;
	}

	.pricing-section .table-left, .pricing-section .table-right {
		margin: 0 auto;
	}

	.contact-section {
		padding: 200px 0 100px 0;
	}

	.contact-section h1 {
		font-size: 42px;
	}

	.contact-section p {
		font-size: 16px;
	}

	.contact-form {
		padding-top: 100px;
	}

}

@media screen and (min-width: 400px) and (max-width: 600px) {

 .subscribe-form .mail {
   padding: 0 30px 0 20px;
   border-radius: 5px 0 0 5px;
 }

 .subscribe-form .submit-button {
   padding: 0 5px 0 5px;
   border-radius: 0 5px 5px 0;
 }
}


@media screen and (max-width: 399px) {

 .subscribe-form .mail {
	 text-align: center;
   padding: 0 0 0 0;
   border-radius: 5px 0 0 5px;
 }

 .subscribe-form .submit-button {
   padding: 0 5px 0 5px;
   border-radius: 0 5px 5px 0;
	 margin-top: 15px;
 }

 .app-info {
	 margin-bottom: 0em;
 }
 .download-buttons img {
	 height: 40px;
	 width: 120px;
 }
 .back-to-top {
	 right: 10px;
 }
}


@media only screen and (min-width: 992px) {

	.pricing-section .table-left {
		padding: 50px;
	}

	.pricing-section .table-right {
		padding: 50px;
	}
}


@media only screen and (min-width: 767px) and (max-width: 992px) {

	.app-sub-content h1 {
		font-size: 34px;
		margin-bottom: 30px;
	}

	.app-sub-content p {
		font-size: 16px;
		line-height: 1.4;
		margin-bottom: 30px;
	}

	.pricing-section .table-left {
		margin-right: 10px;
	}
	.pricing-section .table-right {
		margin-left: 10px;
	}
}


/* ------ Features Split Section Media Queries ----- */

@media only screen and (min-width: 769px) {
	.flex-split {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	.flex-split .f-right h2 {
		font-family: Poppins;
		font-size: 34px;
	}
}


@media only screen and (min-width: 769px) and (max-width: 1024px) {
	.flex-split .f-left img {
		margin-top: 30px;
	}
	.flex-split .f-right {
		padding: 10px 20px 20px 20px;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1180px) {
	.flex-split .f-left img {
		margin-top: 50px;
	}
}

@media only screen and (min-width: 1024px) {
	.flex-split .f-left {
		padding: 30px 10px 10px 10px;
	}

	.flex-split .f-right {
		padding: 40px 50px 50px 50px;
	}
}

/* ------ Features Split Section Media Queries Ends  ----- */


@media only screen and (max-width: 766px) {
	.features-section .f-right {
		flex: 1 0 50%;
		height: 360px;
	}
}

@media only screen and (max-width: 1142px) {
	.features-section-2 .features-content {
		
	}

	.features-section-2 .features-content {
		padding: 10px;
	}

	.features-section-2 .features-content h2 {
		margin-top: 10px;
	}
}


/* ==============================================
   KRATOS - INNOVATIVE EFFECTS & ANIMATIONS
   ============================================== */

/* --- Language Selector with Flags --- */
.flag-icon {
	width: 20px;
	height: 14px;
	margin-right: 8px;
	vertical-align: middle;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.dropdown-menu .flag-icon {
	width: 24px;
	height: 16px;
}

.lang-text {
	vertical-align: middle;
}

/* --- Animated Gradient Background for Hero --- */
.hero-gradient-animated {
	background: linear-gradient(-45deg, #1B476F, #2d6a9f, #1B476F, #0d2840);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* --- Floating Animation for Hero Image --- */
.float-animation {
	animation: float 6s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
}

/* --- Pulse Glow Effect for CTA Buttons --- */
.btn-glow {
	position: relative;
	overflow: hidden;
	animation: pulseGlow 2s ease-in-out infinite;
}

.btn-glow::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
	transform: rotate(45deg);
	animation: shimmer 3s infinite;
	pointer-events: none;
}

@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 0 5px rgba(27, 71, 111, 0.5), 0 0 20px rgba(27, 71, 111, 0.3); }
	50% { box-shadow: 0 0 20px rgba(27, 71, 111, 0.8), 0 0 40px rgba(27, 71, 111, 0.5); }
}

@keyframes shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

/* --- Typewriter Effect for Hero Title --- */
.typewriter {
	overflow: hidden;
	border-right: 3px solid #1B476F;
	white-space: nowrap;
	animation: typing 3.5s steps(40, end), blinkCursor 0.75s step-end infinite;
}

@keyframes typing {
	from { width: 0; }
	to { width: 100%; }
}

@keyframes blinkCursor {
	from, to { border-color: transparent; }
	50% { border-color: #1B476F; }
}

/* --- Parallax Scroll Effect --- */
.parallax-section {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* --- Card Hover 3D Effect --- */
.card-3d {
	transition: transform 0.5s ease, box-shadow 0.5s ease;
	transform-style: preserve-3d;
}

.card-3d:hover {
	transform: translateY(-10px) rotateX(5deg);
	box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* --- Animated Counter Numbers --- */
.counter-number {
	font-size: 48px;
	font-weight: 700;
	color: #1B476F;
	font-family: Poppins;
}

.counter-label {
	font-size: 14px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* --- Stats Section --- */
.stats-section {
	background: linear-gradient(135deg, #1B476F 0%, #2d6a9f 100%);
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

.stats-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 0;
}

.stats-section .stat-item {
	text-align: center;
	padding: 20px;
	position: relative;
	z-index: 1;
}

.stats-section .stat-number {
	font-size: 56px;
	font-weight: 700;
	color: #FFFFFF;
	font-family: Poppins;
	line-height: 1;
	margin-bottom: 10px;
}

.stats-section .stat-label {
	font-size: 14px;
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family: Poppins;
}

/* --- Animated Service Icons --- */
.service-icon-animated {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-icon-animated:hover {
	transform: scale(1.1) rotate(5deg);
	background: linear-gradient(135deg, #1B476F 0%, #2d6a9f 100%);
}

.service-icon-animated:hover img {
	filter: brightness(0) invert(1);
}

/* --- Scroll Reveal Animation Classes --- */
.reveal-fade {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-fade.revealed {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-left.revealed {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right {
	opacity: 0;
	transform: translateX(50px);
	transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-right.revealed {
	opacity: 1;
	transform: translateX(0);
}

.reveal-scale {
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-scale.revealed {
	opacity: 1;
	transform: scale(1);
}

/* --- Testimonial Cards Enhanced --- */
.testimonial-card {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 30px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.08);
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.testimonial-card::before {
	content: '"';
	position: absolute;
	top: 10px;
	left: 20px;
	font-size: 120px;
	color: rgba(27, 71, 111, 0.1);
	font-family: Georgia, serif;
	line-height: 1;
	pointer-events: none;
}

.testimonial-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* --- Video Container with Play Button Overlay --- */
.video-container {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.video-container video {
	width: 100%;
	display: block;
	max-height: 400px;
	object-fit: cover;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(27, 71, 111, 0.3) 0%, rgba(0,0,0,0.2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.video-container:hover .video-overlay {
	opacity: 1;
}

/* --- SOS Section Enhanced with Pulse Effect --- */
.sos-section .sos-icon-wrapper {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
	transition: all 0.3s ease;
	position: relative;
}

.sos-section .sos-icon-wrapper::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	animation: sosPulse 2s ease-out infinite;
	pointer-events: none;
}

@keyframes sosPulse {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.5); opacity: 0; }
}

.sos-section .col-sm-4:hover .sos-icon-wrapper {
	background: rgba(255,255,255,0.4);
	transform: scale(1.1);
}

.sos-icons-grid {
	margin-top: 40px;
}

@media (max-width: 768px) {
	.sos-icons-grid {
		margin-top: 25px;
	}
}

/* ==============================================
   QUICK ACCESS SECTION - Modern Redesign
   ============================================== */

.quick-access-section {
	padding: 100px 0;
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	position: relative;
	overflow: hidden;
}

.quick-access-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03) 0%, transparent 20%),
		radial-gradient(circle at 90% 80%, rgba(255,255,255,0.03) 0%, transparent 20%);
	pointer-events: none;
}

.quick-access-section .section-tag {
	display: inline-block;
	background: rgba(255,255,255,0.1);
	color: #fff;
	padding: 8px 20px;
	border-radius: 30px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	margin-bottom: 20px;
	font-family: Poppins;
	border: 1px solid rgba(255,255,255,0.2);
}

.quick-access-section .section-title {
	font-family: Poppins;
	font-size: 42px;
	font-weight: 700;
	color: #FFFFFF;
	margin-bottom: 15px;
	line-height: 1.2;
}

.quick-access-section .section-subtitle {
	font-family: Poppins;
	font-size: 16px;
	color: rgba(255,255,255,0.7);
	font-weight: 300;
	max-width: 500px;
	margin: 0 auto 60px;
	line-height: 1.6;
}

.quick-access-grid {
	position: relative;
	z-index: 1;
}

.quick-access-grid .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Access Cards */
.access-card {
	background: rgba(255,255,255,0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 20px;
	padding: 35px 25px;
	margin-bottom: 30px;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position: relative;
	overflow: hidden;
}

.access-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.access-card:hover {
	transform: translateY(-10px);
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.2);
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.access-card:hover::before {
	opacity: 1;
}

/* Card Icons with unique colors */
.card-icon {
	width: 70px;
	height: 70px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 28px;
	color: #fff;
	transition: all 0.3s ease;
}

.card-icon.emergency {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
	box-shadow: 0 10px 30px rgba(238, 90, 90, 0.3);
}

.card-icon.id {
	background: linear-gradient(135deg, #4ecdc4 0%, #44a3aa 100%);
	box-shadow: 0 10px 30px rgba(78, 205, 196, 0.3);
}

.card-icon.sos {
	background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%);
	box-shadow: 0 10px 30px rgba(255, 140, 66, 0.3);
}

.card-icon.radio {
	background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
	box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}

.card-icon.travel {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.card-icon.location {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3);
}

.access-card:hover .card-icon {
	transform: scale(1.1) rotate(5deg);
}

.access-card h3 {
	font-family: Poppins;
	font-size: 18px;
	font-weight: 600;
	color: #FFFFFF;
	margin-bottom: 10px;
}

.access-card p {
	font-family: Poppins;
	font-size: 13px;
	color: rgba(255,255,255,0.6);
	line-height: 1.5;
	margin: 0;
}

/* Quick Access Mobile Styles */
@media (max-width: 768px) {
	.quick-access-section {
		padding: 60px 0;
	}

	.quick-access-section .section-tag {
		font-size: 10px;
		padding: 6px 15px;
		letter-spacing: 2px;
	}

	.quick-access-section .section-title {
		font-size: 28px;
	}

	.quick-access-section .section-subtitle {
		font-size: 14px;
		margin-bottom: 40px;
		padding: 0 15px;
	}

	.access-card {
		padding: 25px 20px;
		margin-bottom: 20px;
	}

	.card-icon {
		width: 60px;
		height: 60px;
		font-size: 24px;
		border-radius: 16px;
	}

	.access-card h3 {
		font-size: 16px;
	}

	.access-card p {
		font-size: 12px;
	}

	.quick-access-grid .col-sm-6 {
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media (max-width: 480px) {
	.quick-access-section .section-title {
		font-size: 24px;
	}

	.access-card {
		padding: 20px 15px;
	}

	.card-icon {
		width: 50px;
		height: 50px;
		font-size: 20px;
		border-radius: 14px;
	}

	.access-card h3 {
		font-size: 14px;
	}

	.access-card p {
		font-size: 11px;
	}
}

/* --- Particle Background Effect --- */
.particles-bg {
	position: relative;
}

.particles-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at 20% 80%, rgba(27, 71, 111, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(27, 71, 111, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(27, 71, 111, 0.05) 0%, transparent 30%);
	pointer-events: none;
	z-index: 0;
}

/* --- Image/Icon Service Cards with Better Styling --- */
.service-image-container {
	width: 100%;
	max-width: 520px;
	height: auto;
	aspect-ratio: 1;
	margin: 0 auto 40px;
	border-radius: 35px;
	overflow: hidden;
	background: linear-gradient(145deg, #ffffff 0%, #f5f7fa 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 0 25px 60px rgba(0,0,0,0.12);
	border: 2px solid rgba(27, 71, 111, 0.06);
	padding: 40px;
}

.service-image-container:hover {
	transform: translateY(-15px);
	box-shadow: 0 30px 60px rgba(27, 71, 111, 0.2);
	border-color: rgba(27, 71, 111, 0.15);
}

.service-image-container img,
.service-image-container .service-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.service-image-container:hover img,
.service-image-container:hover .service-image {
	transform: scale(1.08);
}

/* --- Animated Underline for Links --- */
.animated-underline {
	position: relative;
	text-decoration: none;
}

.animated-underline::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -2px;
	left: 50%;
	background: #1B476F;
	transition: all 0.3s ease;
}

.animated-underline:hover::after {
	width: 100%;
	left: 0;
}

/* --- Badge Styling Enhanced --- */
.badge-beta {
	display: inline-block;
	background: linear-gradient(135deg, #1B476F 0%, #2d6a9f 100%);
	color: white;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: 0 4px 15px rgba(27, 71, 111, 0.3);
	animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* --- Hero Content Enhanced --- */
.hero-content-enhanced h1 {
	background: linear-gradient(135deg, #1B476F 0%, #2d6a9f 50%, #1B476F 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: textGradient 3s linear infinite;
}

@keyframes textGradient {
	0% { background-position: 0% center; }
	100% { background-position: 200% center; }
}

/* --- Smooth Scroll Behavior --- */
/* Note: Using jQuery easing for smooth scroll instead of CSS to avoid conflicts */

/* --- Loading Spinner Enhanced --- */
.loading-spinner {
	width: 50px;
	height: 50px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #1B476F;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* --- Navbar Enhanced with Blur --- */
.navbar.past-main {
	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.95) !important;
}

/* --- Feature List Icons Animated --- */
.flex-split .f-right li i {
	transition: all 0.3s ease;
}

.flex-split .f-right li:hover i {
	transform: scale(1.3);
	color: #1B476F;
}

/* --- Footer Enhanced --- */
.footer {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.footer strong {
	font-size: 24px;
	color: #FFFFFF;
	font-family: Poppins;
}

.footer .footer-text p {
	color: rgba(255,255,255,0.7);
}

/* --- Mobile Optimizations --- */
@media (max-width: 768px) {
	/* Stats Section Mobile */
	.stats-section {
		padding: 50px 0;
	}

	.stats-section .stat-number {
		font-size: 32px;
		margin-bottom: 5px;
	}

	.stats-section .stat-label {
		font-size: 11px;
		letter-spacing: 1px;
	}

	.stats-section .stat-item {
		padding: 15px 5px;
		margin-bottom: 15px;
	}

	/* Hero Mobile */
	.hero-content-enhanced h1 {
		font-size: 24px !important;
		line-height: 1.3 !important;
		letter-spacing: 0 !important;
	}

	.hero-content-enhanced p {
		font-size: 13px !important;
	}

	.hero-image.float-animation {
		animation: none;
	}

	.hero-image img {
		max-width: 90%;
		margin: 0 auto;
	}

	/* Buttons Mobile */
	.btn-action {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}

	.btn-glow {
		animation: none;
	}

	/* Service Icons Mobile */
	.service-image-container {
		max-width: 320px;
		border-radius: 28px;
		
	}

	.services .services-description h1 {
		font-size: 18px;
	}

	.services .services-description p {
		font-size: 13px;
	}

	/* Features Mobile */
	.flex-split {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.flex-split .f-right h2 {
		font-size: 22px;
	}

	.flex-split .f-right p {
		font-size: 13px;
	}

	.flex-split .f-right li {
		font-size: 13px;
	}

	/* Video Container Mobile */
	.video-container {
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	}

	.video-container video {
		max-height: 250px;
	}

	/* Testimonials Mobile */
	.testimonial-section {
		padding-top: 30px;
	}

	.testimonial-text p {
		font-size: 13px;
		padding: 15px 5px;
		line-height: 1.6;
	}

	.testimonial-text h3 {
		font-size: 14px;
	}

	.badge-beta {
		font-size: 10px;
		padding: 4px 10px;
	}

	/* SOS Section Mobile */
	.sos-section {
		padding: 60px 0;
	}

	.sos-section h1 {
		font-size: 24px;
	}

	.sos-section .sos-icon-wrapper {
		width: 60px;
		height: 60px;
		margin-bottom: 10px;
	}

	.sos-section .icon {
		font-size: 28px;
	}

	.sos-section h4 {
		font-size: 12px;
		margin-top: 8px;
	}

	.sos-section .col-sm-4 {
		margin-bottom: 25px;
	}

	/* Footer Mobile */
	.footer {
		padding: 40px 0;
	}

	.footer strong {
		font-size: 20px;
	}

	.footer .footer-text p {
		font-size: 12px;
	}

	/* Language Selector Mobile */
	.flag-icon {
		width: 18px;
		height: 12px;
	}

	.lang-text {
		font-size: 12px;
	}

	/* Navbar Mobile */
	.navbar-default .navbar-brand img {
		height: 50px !important;
	}

	/* Disable heavy animations on mobile for performance */
	.particles-bg::before {
		display: none;
	}

	.btn-glow::before {
		display: none;
	}

	.sos-section .sos-icon-wrapper::before {
		animation: none;
	}
}

/* Extra small devices */
@media (max-width: 480px) {
	.stats-section .stat-number {
		font-size: 28px;
	}

	.stats-section .stat-label {
		font-size: 10px;
	}

	.hero-content-enhanced h1 {
		font-size: 20px !important;
	}

	.flex-split .f-right h2 {
		font-size: 18px;
	}

	.service-image-container {
		max-width: 280px;
		padding: 20px;
	}

	.sos-section .sos-icon-wrapper {
		width: 50px;
		height: 50px;
	}

	.sos-section .icon {
		font-size: 22px;
	}

	.sos-section h4 {
		font-size: 11px;
	}

	.testimonial-single img {
		width: 60px;
		height: 60px;
	}

	.testimonial-icon {
		width: 60px;
		height: 60px;
	}

	.testimonial-icon i {
		font-size: 28px;
	}
}

/* Ensure images are responsive */
@media (max-width: 768px) {
	.flex-split .f-left img,
	.flex-split .left-content img {
		max-width: 100%;
		height: auto;
		margin: 20px auto;
		display: block;
	}

	/* Master 50 image specific */
	img[alt*="Master 50"],
	img[alt*="protocolos"] {
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	}

	/* Reorder flex on mobile - video/image first, text second */
	.flex-split {
		flex-direction: column;
	}

	.flex-split .f-left,
	.flex-split .f-right {
		flex: 1 0 100%;
		width: 100%;
	}

	.flex-split .f-right {
		padding: 20px 15px;
	}

	.flex-split .f-left {
		padding: 10px 15px;
	}

	/* Services section mobile spacing */
	.services-section {
		padding-bottom: 30px;
	}

	.services-content {
		padding-top: 60px;
		padding-bottom: 40px;
	}

	.services-content h1 {
		font-size: 26px;
		line-height: 1.3;
	}

	.services-content p {
		font-size: 14px;
	}

	/* Carousel improvements mobile */
	.testimonials {
		margin-top: 2em;
		margin-bottom: 2em;
	}

	.owl-carousel .owl-item {
		padding: 0 10px;
	}
}

/* ============================================
   THE PROBLEM SECTION - CLEAN DESIGN
   ============================================ */
.the-problem {
  background: #f8f9fa;
  padding: 120px 0;
  text-align: center;
}

.problem-intro {
  max-width: 800px;
  margin: 0 auto 80px;
}

.problem-intro h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 44px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  margin-bottom: 20px;
}

.problem-intro p {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  color: #555;
  line-height: 1.6;
}

.problem-cards {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.p-card {
  flex: 1;
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  border-radius: 24px;
  padding: 50px 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.p-card-img {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto 25px;
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
}

.p-card-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  border: 3px solid #1B476F;
  transition: all 0.3s ease;
}

.p-card:hover .p-card-img img {
  border-color: #2a5a85;
  transform: scale(1.02);
}
.p-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #1B476F;
  margin-bottom: 15px;
}

.p-card p {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
  .problem-intro h2 {
    font-size: 36px;
  }
  
  .p-card-img {
    max-width: 240px;
    
  }
}

@media (max-width: 768px) {
  .the-problem {
    padding: 80px 20px;
  }
  
  .problem-intro {
    margin-bottom: 50px;
  }
  
  .problem-intro h2 {
    font-size: 28px;
  }
  
  .problem-intro p {
    font-size: 17px;
  }
  
  .problem-cards {
    gap: 30px;
  }
  
  .p-card {
    padding: 40px 30px;
  }
  
  .p-card-img {
    max-width: 220px;
    
    
  }
  
  .p-card h3 {
    font-size: 22px;
  }
}


/* ===== SOS / EMERGENCY HUB SECTION ===== */

/* ===== EMERGENCY HUB / SOS SECTION - FINAL ===== */
.sos-section {
  padding: 80px 0;
  background-color: #d9534f;
  color: #ffffff;
  text-align: center;
}

.sos-section .container {
  max-width: 1200px;
}

.sos-section .section-header {
  margin-bottom: 50px;
}

.sos-section h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffffff;
}

.sos-section > .container > .col-md-8 {
  margin-bottom: 20px;
}

.sos-section p {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

.sos-section .col-md-12 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.sos-section .col-sm-4 {
  padding: 25px 15px;
  transition: transform 0.3s ease;
}

.sos-section .col-sm-4:hover {
  transform: translateY(-5px);
}

.sos-section .icon {
  font-size: 55px;
  display: block;
  margin-bottom: 15px;
  color: #ffffff;
}

.sos-section h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .sos-section {
    padding: 60px 0;
  }
  
  .sos-section h1 {
    font-size: 32px;
  }
  
  .sos-section .icon {
    font-size: 45px;
  }
  
  .sos-section h4 {
    font-size: 16px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .sos-section {
    padding: 50px 20px;
  }
  
  .sos-section h1 {
    font-size: 26px;
  }
  
  .sos-section p {
    font-size: 16px;
  }
  
  .sos-section .col-md-12 {
    margin-top: 20px !important;
  }
  
  .sos-section .col-sm-4 {
    width: 50%;
    padding: 20px 10px;
  }
  
  .sos-section .icon {
    font-size: 40px;
  }
  
  .sos-section h4 {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .sos-section .col-sm-4 {
    width: 50%;
  }
}


/* SOS Section - Uppercase */
.sos-section h1,
.sos-section p,
.sos-section h4 {
  text-transform: uppercase;
}