/* ----------------------------------

Template Name: Seorun - SEO & Digital Marketing Agency Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Poppins
Main Color   : #0d3b66

-------------------------------------

Table of contents
        
    01. Template default css
    02. Navbar
        - Navbar Sticky
        - Navbar Transparent
    03. Banner
    04. About Area
    05. Our Features
    06. SEO Form
    07. Our Services
    08. Working Process
    09. technology-section
    10. Pricing Area
    11. Testimonials
    12. Blog Area
    13. Clients Area
    14. Timeline
    15. Concat Area
    16. Subscribe Form
    17. Error 404
    18. Footer
    19. PHP Contact Form
    20. Others

*/


/*
** General Styles for HTML tags
*/

* {
  padding: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  overflow-x: hidden;
  background-color: #ffffff;
  color: #666666;
}

html, body, .wrapper {
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: #232323;
  font-weight: normal;
  line-height: 1.2;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0;
  margin: 0;
}

h4 {
  font-size: 20px;
}

h1,h2,h3,h4 {
  margin-bottom: 15px;
}

h5,h5 {
  margin-bottom: 10px;
}

img {
  border: none;
  outline: none;
  max-width: 100%;
}

label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 5px;
  max-width: 100%;
}

a, .btn, button {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  outline: medium none;
}

a img, iframe {
  border: none;
}

p {
  color: #666666;
  line-height: 26px;
  margin: 0 0 15px;
  text-transform: none;
  font-weight: 400;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid #eee;
}

pre {
  display: block;
  margin: 0 0 30px;
  padding: 9.5px;
  word-wrap: break-word;
  word-break: break-all;
  color: #333;
  border: 1px solid #ededed;
  border-radius: inherit;
  background-color: #f9f9f9;
  font-size: 13px;
  line-height: 1.42857143;
}

input:focus, textarea:focus, 
 select:focus {
  outline: none;
  box-shadow: inherit;
}

ul {
  margin: 0;
  list-style-type: none;
}

a, a:active, a:focus, a:hover {
  outline: none;
  text-decoration: none;
  color: #232323;
}

a:hover {
  color: #232323;
}

a {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

b, strong {
  font-weight: 900;
}

.btn.active, .btn:active {
  background-image: inherit !important;
}

.btn.focus, 
 .btn:active:focus, 
 .btn:active:hover, 
 .btn:focus, 
 .btn:hover {
  outline: 0;
}

.btn.circle {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.btn.active, .btn:active {
  outline: 0;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}

input {
  border: 1px solid #e7e7e7;
  border-radius: inherit;
  box-shadow: inherit;
  min-height: 50px;
}
/* Default CSS */
.container-half {
  margin: 0 auto;
  width: 60%;
  padding: 0 15px;
}

.bg-cover {
  background-position: center center;
  background-size: cover;
}

.bg-fixed {
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
}

.bg-gray {
  background-color: #f9f9f9;
}

.bg-theme-small {
  background-color: #edf5ff;
}

.bg-light {
  background-color: #ffffff;
}

.bg-theme {
  background-color: #0d3b66;
}

.text-light h1, 
 .text-light h2, 
 .text-light h3, 
 .text-light h4, 
 .text-light h5, 
 .text-light h6, 
 .text-light p, 
 .text-light a {
  color: #ffffff;
}

.shadow {
  position: relative;
  z-index: 1;
}

.shadow.dark::after {
  background: #000000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.dark-hard::after {
  background: #232323 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.75;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.light::after {
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.theme::after {
  background: #0d3b66 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.theme-hard::after {
  background: #0d3b66 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.default-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

.default-padding-top {
  padding-top: 40px;
}

.default-padding-bottom {
  padding-bottom: 80px;
}

.default-padding.bottom-less {
  padding-top: 80px;
  padding-bottom: 50px;
}

.default-padding.bottom-30 {
  padding-top: 80px;
  padding-bottom: 30px;
}

.default-padding.bottom-20 {
  padding-top: 80px;
  padding-bottom: 20px;
}

.padding-xl {
  padding-top: 180px;
  padding-bottom: 180px;
}

.carousel-shadow {
  padding-bottom: 65px;
}

.btn {
  display: inline-block;
  font-family: "Poppins",sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 25px;
  text-transform: uppercase;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  font-weight: 700;
  letter-spacing: 1px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
}

.btn-md {
  padding: 10px 40px 10px;
}

.btn-sm {
  padding: 8px 35px;
  font-size: 12px;
}

.btn.btn-sm-pro {
  font-size: 10px;
  font-weight: 600;
  margin-top: 5px;
  padding: 4px 35px;
  display: inline-block;
}

.btn-border-light {
  border: 2px solid #ffffff;
}

.btn.btn-sm-pro.btn-border-light:hover, 
 .btn.btn-sm-pro.btn-border-light:focus {
  background-color: #ffffff;
  color: #232323;
  border: 2px solid #ffffff;
}

.btn-dark {
  background-color: #232323;
  color: #ffffff;
  border: 2px solid #232323;
}

.btn-dark.border {
  background-color: transparent;
  color: #232323;
  border: 2px solid #232323;
}

.btn-dark.border:hover {
  background-color: #232323;
  color: #ffffff !important;
  border: 2px solid #232323;
}

.btn.btn-light {
  background: #ffffff none repeat scroll 0 0;
  border: 2px solid #ffffff;
  color: #232323;
}

.btn.btn-light:hover, 
 .btn.btn-light:focus {
  background: transparent none repeat scroll 0 0;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.btn.btn-light.effect:hover, 
 .btn.btn-light.effect:focus {
  background-color: #0d3b66;
  color: #ffffff !important;
  border: 2px solid #0d3b66;
}

.btn.btn-light.border {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.btn.btn-light.border:hover {
  background: #ffffff none repeat scroll 0 0 !important;
  border: 2px solid #ffffff !important;
  color: #232323 !important;
}

.btn-dark:hover, 
 .btn-dark:focus {
  color: #232323 !important;
  background: transparent;
}

.bg-dark {
  background: #1d2024 none repeat scroll 0 0;
}

.btn-theme {
  background-color: #0d3b66;
  color: #ffffff !important;
  border: 2px solid #0d3b66;
}

.btn-theme.border {
  background-color: transparent;
  color: #0d3b66 !important;
  border: 2px solid #0d3b66;
}

.btn-theme.border:hover {
  background-color: #0d3b66;
  color: #ffffff !important;
  border: 2px solid #0d3b66;
}

.btn-theme.effect:hover, 
 .btn-theme.effect:focus {
  background: #0d3b66 none repeat scroll 0 0;
  border: 2px solid #0d3b66;
  color: #ffffff;
}

.btn.btn-sm-lm {
  font-size: 12px;
  padding: 4px 35px;
}

.btn.border.btn-light.standard {
  padding-left: 20px;
  padding-right: 50px;
  position: relative;
  z-index: 1;
}

.btn.border.btn-light.standard::after {
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 53px;
  position: absolute;
  right: -18px;
  top: -10px;
  transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  width: 50px;
  z-index: -1;
}

.btn.border.btn-light.standard::before {
  color: #0d3b66;
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  height: 100%;
  position: absolute;
  right: 0;
  width: 25px;
}

.bg-theme a.btn-theme.btn:hover,
.bg-theme a.btn-theme.btn:focus {
  border: 2px solid #ffffff;
  color: #ffffff;
}

.bg-fixed {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

.bg-cover {
  background-position: center center;
  background-size: cover;
}

.container-full {
  padding: 0 15px;
  width: 100%;
}

.oh {
  overflow: hidden;
}

.less-margin {
  margin: 0;
}

header {
  position: relative;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a {
  position: relative;
  z-index: 1;
  margin-left: 3px;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a {
  border: medium none;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a::after {
  background: #ffffff none repeat scroll 0 0;
  bottom: -2px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a:hover::after {
  width: 100%;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a:hover::after {
  width: 0;
}

.attr-nav .social.right li {
  margin-left: 20px;
}

.attr-nav .social li a {
  font-size: 16px;
}

/* Navbar */
nav.bootsnav.navbar-default.info-topbar .navbar-header {
  display: none;
}

nav.bootsnav.navbar-default.info-topbar ul li a {
  margin-right: 30px;
  padding: 35px 0;
}

nav.bootsnav.navbar-default.info-topbar.active-full ul li a {
  margin-right: 0;
  padding: 35px 20px;
}

.attr-nav > a.btn-theme.effect:hover, 
.attr-nav > a.btn-theme.effect, 
.attr-nav > a.btn-theme.effect:focus {
  background: #0d3b66 none repeat scroll 0 0;
  border: 2px solid #0d3b66;
  color: #ffffff !important;
}

nav.bootsnav.navbar-default.info-topbar.sticked ul li a {
  margin-right: 30px;
  padding: 35px 0;
}

.attr-nav.social li {
  display: inline-block;
  padding: 25px 0 !important;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.attr-nav.social li a {
  border: 1px solid #f4f4f4;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #0d3b66;
  display: inline-block;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
  padding: 0 !important;
  text-align: center;
  width: 40px;
}

nav.navbar.bootsnav.sticked .attr-nav.social li {
  display: inline-block;
  padding: 20px 0 !important;
}

.site-heading h2 {
  display: inline-block;
  font-weight: 600;
  padding-bottom: 20px;
  position: relative;
  text-transform: capitalize;
}

.site-heading h4 {
  text-transform: uppercase;
}

.site-heading.clean h2 {
  padding-bottom: 0;
}

.site-heading.clean h2 span {
  color: #0d3b66;
}

.site-heading h2 span {
  color: #0d3b66;
}

.site-heading.barber h2 span {
  color: #bc9355;
}

.site-heading p {
  margin: 0;
}

.site-heading.clean h2::after,
.site-heading.clean h2::before {
  display: none;
}

.site-heading h2::before {
  background: #0d3b66 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 40px;
}

.shadow .site-heading h2::before,
.shadow .site-heading h2::after {
  background: #ffffff none repeat scroll 0 0;
}

.bg-theme .site-heading h2::before,
.bg-theme-hard .site-heading h2::before {
  background: #ffffff none repeat scroll 0 0;
}

.site-heading h2::after {
  background: #232323 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -50px;
  position: absolute;
  width: 40px;
}

.bg-theme .site-heading h2::after,
.bg-theme-hard .site-heading h2::after {
  background: #ffffff none repeat scroll 0 0;
}

.site-heading h2 span {
  color: #0d3b66;
}

.site-heading {
  margin-bottom: 60px;
  overflow: hidden;
  margin-top: -5px;
}

.site-heading.single {
  margin-bottom: 35px;
}

.carousel-shadow .site-heading {
  margin-bottom: 45px;
}

.carousel-shadow .owl-stage-outer {
  margin: 0 -15px;
  padding: 15px;
}

/* ============================================================== 
     # Bradcrumb 
=================================================================== */
.breadcrumb-area {
  padding: 150px 0;
}

.breadcrumb-area .breadcrumb {
  background: transparent none repeat scroll 0 0;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.breadcrumb-area h1 {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 40px;
  margin-top: -10px;
}

.breadcrumb > li + li::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  padding: 0 5px;
  color: #ffffff;
  display: none;
}

.breadcrumb-area .breadcrumb li i {
  margin-right: 5px;
}

.breadcrumb-area .breadcrumb li {
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

.breadcrumb-area .breadcrumb li::after {
  border: 2px solid #ffffff;
  content: "";
  height: 10px;
  left: -7px;
  margin-top: -5px;
  position: absolute;
  top: 50%;
  width: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.breadcrumb-area .breadcrumb li:first-child::after {
  display: none;
}

.breadcrumb-area .breadcrumb a, 
.breadcrumb-area .breadcrumb li {
  font-family: "Poppins",sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff;
}

.breadcrumb-area .breadcrumb li.active {
  color: #dcdcdc;
}


/* Topbar CSS */

.top-bar-area.bg-light-gray {
  /* border-bottom: 1px solid #e7e7e7; */
  background-color: #062c4f;
}

.top-bar-area .info li {
  border-right: 1px solid #e7e7e7;
  display: inline-block;
  margin-right: 15px;
  padding-right: 15px;
}

.top-bar-area.bg-theme-small .info li {
  border-color: #cdcdcd;
}

.top-bar-area {
  padding: 10px 0;
}

.top-bar-area .address-info .info {
  margin-top: 7px;
}

.top-bar-area .info li i {
  color: white;
  margin-right: 5px;
}

.top-bar-area .info li:last-child {
  border: medium none;
  margin: 0;
  padding: 0;
}

.top-bar-area .social li {
  display: inline-block;
}

.top-bar-area .social li a {
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #0d3b66;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-left: 5px;
  text-align: center;
  width: 40px;
}

.top-bar-area .button a {
  background: #0d3b66 none repeat scroll 0 0;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  color: #ffffff;
  display: inline-block;
  font-weight: 600;
  padding: 8px 30px;
  text-transform: capitalize;
}

.top-bar-area .button.border a {
  background: #ffffff none repeat scroll 0 0;
  border: 2px solid #0d3b66;
  color: #0d3b66;
}

.top-bar-area .button.border a:hover {
  background: #0d3b66 none repeat scroll 0 0;
  border: 2px solid transparent;
  color: #ffffff;
}

/* ============================================================== 
     # Banner 
=================================================================== */
body, 
.banner-area, 
.banner-area div {
  height: 100%;
}

.banner-area.auto-height, 
.banner-area.auto-height div {
  height: auto;
  min-height: 100%;
}

.banner-area .box-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.banner-area .box-table {
  display: table;
  width: 100%;
}

.banner-area .box-cell, 
 .banner-area .box-cell div {
  height: auto;
}

.banner-area {
  position: relative;
  overflow: hidden;
}

.banner-area .wavesshape {
  bottom: -2px;
  left: 0;
  position: absolute;
  right: 0;
  top: auto;
  width: 100%;
}

.banner-area .wavesshape.shape {
  bottom: -50px;
  height: auto;
}

.banner-area .content {
  position: relative;
  z-index: 9;
}

.banner-area.wavesshape {
  position: relative;
  z-index: 1;
}

.banner-area.triangle-shadow {
  position: relative;
  z-index: 1;
}

.banner-area.triangle-shadow::before {
  border-bottom: 0 solid transparent;
  border-right: 100vw solid #fff;
  border-top: 80px solid transparent;
  bottom: 0;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 101;
}

.banner-area.shadow-inner .content {
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.banner-area.content-double .double-items {
  align-items: center;
  align-self: center;
  display: flex;
  justify-content: center;
  vertical-align: middle;
}

.banner-area .banner-carousel .owl-item.center img {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}

.banner-area .banner-carousel .owl-item img {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
}


/* Conent */

.banner-area .text-medium h1 {
  font-size: 45px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 30px;
  text-transform: capitalize;
  margin-top: -5px;
}

.banner-area .text-medium a {
  margin-top: 15px;
}

.banner-area .text-medium.conetnt-lead p {
  font-size: 18px;
  line-height: 30px;
}

.banner-area .double-items h1 {
  margin-top: -10px;
}

.banner-area .content-carousel .owl-dots,
.banner-area .content-bollet-carousel .owl-dots {
  margin-top: 25px !important;
  text-align: left;
}

.banner-area .content-carousel .owl-dots .owl-dot span,
.banner-area .content-bollet-carousel .owl-dots .owl-dot span {
  background: #ffffff none repeat scroll 0 0;
  border: 3px solid #0d3b66;
  border-radius: 0;
  height: 15px;
  width: 15px;
}

.banner-area .content-carousel .owl-dots .owl-dot.active span,
.banner-area .content-bollet-carousel .owl-dots .owl-dot.active span {
  background: #0d3b66 none repeat scroll 0 0;
}

.banner-area .content-carousel .item:hover,
.banner-area .content-bollet-carousel .item:hover {
  cursor: ew-resize;
}

.banner-area.content-double .content-carousel .owl-nav,
.banner-area.content-bollet-double .content-carousel .owl-nav {
  margin: 0;
}

.banner-area.content-double .content-carousel .owl-nav .owl-prev, 
.banner-area.content-double .content-carousel .owl-nav .owl-next,
.banner-area.content-double .content-bollet-carousel .owl-nav .owl-prev, 
.banner-area.content-double .content-bollet-carousel .owl-nav .owl-next {
  background: transparent none repeat scroll 0 0;
  color: #0d3b66;
  font-size: 30px;
  height: 30px;
  left: -60px;
  line-height: 30px;
  margin-top: -15px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 30px;
  z-index: 9999;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.banner-area.content-double .content-carousel .owl-nav .owl-prev.disabled, 
.banner-area.content-double .content-carousel .owl-nav .owl-next.disabled,
.banner-area.content-double .content-bollet-carousel .owl-nav .owl-prev.disabled, 
.banner-area.content-double .content-bollet-carousel .owl-nav .owl-next.disabled {
  opacity: .3;
}

.banner-area.content-double .content-carousel .owl-nav .owl-next,
.banner-area.content-bollet-double .content-carousel .owl-nav .owl-next {
  left: auto;
  right: -30px;
}

.banner-area ul li {
  color: #ffffff;
  display: block;
  font-size: 16px;
  margin: 15px 0;
  padding-left: 25px;
  position: relative;
  z-index: 1;
}

.banner-area ul li::before {
  content: "\f560";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 2px;
}

.banner-area .double-items .content-full-carousel .item .col-md-6 {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

/* Side BG */

.side-bg img {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.side-bg {
  height: 100%;
  position: absolute;
  right: -30px;
  top: 0;
  width: 50%;
}

.side-bg.left {
  left: -30px;
  right: auto;
}

/* Animation delays */
.banner-area .item h1:first-child, 
 .banner-area .item h2:first-child, 
 .banner-area .item h3:first-child, 
 .banner-area .item h4:first-child, 
 .banner-area .item h5:first-child, 
 .banner-area .item h6:first-child {
  animation-delay: .5s;
}

.banner-area .item h1:nth-child(2), 
 .banner-area .item h2:nth-child(2), 
 .banner-area .item h3:nth-child(2), 
 .banner-area .item h4:nth-child(2), 
 .banner-area .item h5:nth-child(2), 
 .banner-area .item h6:nth-child(2) {
  animation-delay: .7s;
}

.carousel-caption h1:nth-child(3), 
 .carousel-caption h2:nth-child(3), 
 .carousel-caption h3:nth-child(3), 
 .carousel-caption h4:nth-child(3), 
 .carousel-caption h5:nth-child(3), 
 .carousel-caption h6:nth-child(3) {
  animation-delay: .9s;
}

.banner-area .item p {
  animation-delay: .5s;
}

.banner-area .item ul {
  animation-delay: .6s;
}

.banner-area .item a, 
 .banner-area .item button {
  animation-delay: .7s;
}
/* Carousel Fade Effect */
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .item, 
 .carousel-fade .carousel-inner .active.left, 
 .carousel-fade .carousel-inner .active.right {
  opacity: 0;
}

.carousel-fade .carousel-inner .active, 
 .carousel-fade .carousel-inner .next.left, 
 .carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-inner .next, 
 .carousel-fade .carousel-inner .prev, 
 .carousel-fade .carousel-inner .active.left, 
 .carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
  z-index: 2;
}
/* Slider Zoom Effect */
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }

  to {
    -webkit-transform: scale(1.2, 1.2);
  }
}

@-moz-keyframes zoom {
  from {
    -moz-transform: scale(1, 1);
  }

  to {
    -moz-transform: scale(1.2, 1.2);
  }
}

@-o-keyframes zoom {
  from {
    -o-transform: scale(1, 1);
  }

  to {
    -o-transform: scale(1.2, 1.2);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(1.2, 1.2);
  }
}

.carousel-inner .item > .slider-thumb {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

.banner-area .carousel-zoom .slider-thumb {
  height: 100%;
  position: absolute;
  width: 100%;
}

#particles-js,
#ripple {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.banner-area .carousel-control {
  background: transparent none repeat scroll 0 0;
  font-size: 40px;
  height: 50px;
  line-height: 50px;
  margin-top: -25px;
  opacity: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
  z-index: 1;
}

.banner-area .carousel-control.left {
  left: -50px;
}

.banner-area:hover .carousel-control.left {
  left: 0;
}

.banner-area:hover .carousel-control.shadow.left {
  left: 20px;
}

.banner-area .carousel-control.right {
  right: -50px;
}

.banner-area:hover .carousel-control.right {
  right: 0;
}

.banner-area:hover .carousel-control.shadow.right {
  right: 20px;
}


/* Banner Owl Carousel */

.banner-area .double-items .content-full-carousel .owl-dots {
  margin: -70px 0 0;
  position: absolute;
  right: -30px;
  top: 50%;
}

.banner-area .double-items .content-full-carousel .owl-dots .owl-dot {
  display: block;
}

.banner-area .double-items .content-full-carousel .owl-dots .owl-dot span {
  background: transparent none repeat scroll 0 0;
  border: 3px solid #ffffff;
  height: 20px;
  margin: 20px 0;
  position: relative;
  width: 20px;
  z-index: 1;
}

.banner-area .double-items .content-full-carousel .owl-dots .owl-dot.active span {
  background: #ffffff none repeat scroll 0 0;
}

.banner-area .double-items .content-full-carousel .owl-dots .owl-dot span::after {
  background: #ffffff none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 30px;
  left: -8px;
  opacity: 0.4;
  position: absolute;
  top: -8px;
  width: 30px;
  z-index: -1;
}


/* HERO BACKGROUND */
.hero-area {
    background: linear-gradient(135deg, #062c4f, #0d3b66);
    padding: 100px 0;
    color: #fff;
}

/* TEXT */
.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
}

.hero-content h1 span {
    color: #00e0ff;
}

.hero-content p {
    margin: 20px 0;
    font-size: 16px;
    color: #cbd5e1;
}

/* BUTTONS */
.hero-btns a {
    display: inline-block;
    padding: 12px 25px;
    margin-right: 10px;
    border-radius: 30px;
    text-decoration: none;
}

.btn-primary {
    background: #00e0ff;
    color: #062c4f;
    font-weight: 600;
}

.btn-outline {
    border: 1px solid #00e0ff;
    color: #00e0ff;
}

/* CODE BOX */
.code-box {
    background: #0b1f33;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    font-size: 14px;
    color: #00ffcc;
    overflow-x: auto;
}

/* RESPONSIVE */
@media(max-width:768px){
    .hero-area {
        padding: 60px 20px;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .code-box {
        margin-top: 30px;
    }
}


/* BACKGROUND IMAGE */
.hero-area {
    background: url("assets/img/banner1.png") no-repeat center center/cover;
    padding: 70px 0;
    color: #fff;
}

/* LEFT TEXT */
.hero-content h1 {
    font-size: 50px;
    font-weight: 700;
    color: white;
}

.hero-content h1 span {
    color: #00e0ff;
}

.hero-content p {
    margin: 20px 0;
    color: #d1d5db;
}

/* BUTTONS */
.hero-btns a {
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    margin-right: 10px;
}
.hero-btns a:hover{
  color: white;
}

.btn-primary {
    background: #00e0ff;
    color: #062c4f;
}

.btn-outline {
    border: 1px solid #00e0ff;
    color: #00e0ff;
}

/* CODE EDITOR */
.code-editor {
    background: #0b1220;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* HEADER */
.code-header {
    background: #111827;
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

.file-name {
    margin-left: 15px;
    color: #9ca3af;
    font-size: 13px;
}

/* CODE BODY */
.code-editor pre {
    margin: 0;
    padding: 20px;
    color: #babdc4;
    font-size: 14px;
    line-height: 1.6;
    background-color: #062c4f;
}

/* COLORS */
.highlight { color: #22c55e; }
.highlight2 { color: #38bdf8; }
.highlight3 { color: #facc15; }

/* RESPONSIVE */
@media(max-width:768px){
    .hero-area {
        padding: 60px 20px;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .code-editor {
        margin-top: 30px;
    }
}


/* ============================================================== 
     # Video Button Play
=================================================================== */

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ffffff repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ffffff repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  transition: all 200ms;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -ms-transition: all 200ms;
  -o-transition: all 200ms;
}

@-webkit-keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

.video-play-button i {
  display: block;
  position: relative;
  z-index: 3;
}


/* ============================================================== 
     # About
=================================================================== */
.about-area {
  border-top: 1px dashed #e7e7e7;
  margin-top: 50px;
  padding-top: 50px;
}

.about-area.default-padding {
  border: none;
  padding-top: 42px;
  margin: 0;
}

.about-area .info h2 {
  font-weight: 600;
  margin-bottom: 25px;
  text-transform: capitalize;
  margin-top: -5px;
}

.about-area .info a {
  margin-top: 30px;
}

.about-area .info.less-list a {
  margin-top: 10px;
}

.about-area .info h4 {
  color: #0d3b66;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.about-area .info ul li i, 
.about-area .info ul li p {
  display: table-cell;
  vertical-align: top;
}

.about-area .info ul li i {
  color: #0d3b66;
  font-size: 20px;
  padding-top: 4px;
  width: 20px;
}

.about-area .info ul li p {
  font-family: "Poppins",sans-serif;
  font-size: 16px;
  line-height: 28px;
  margin: 0;
  padding-left: 10px;
}

.about-area .info ul li {
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.about-area .info ul {
  margin-top: 25px;
}

.about-area .info ul li:last-child {
  border: medium none;
  margin-bottom: 0;
  padding: 0;
}

.about-area .info-ietms .item {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.about-area .info-ietms .item::after {
  background: rgba(0, 0, 0, 0) url("assets/img/shape.svg") repeat scroll center center / cover;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.03;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.about-area .info-ietms.less-bg .item::after {
  display: none;
}

.about-area .info-ietms .item {
  background: #ffffff none repeat scroll 0 0;
  -moz-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  -webkit-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  -o-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  padding: 30px;
}

.about-area .info-ietms .equal-height {
  margin-top: 30px;
}

.about-area .info-ietms .equal-height:nth-child(1), 
.about-area .info-ietms .equal-height:nth-child(2) {
  margin-top: 0;
}

.about-area .info-ietms .item i {
  background: #0d3b66 none repeat scroll 0 0;
  -webkit-border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
  -moz-border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
  border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 40px;
  height: 80px;
  line-height: 80px;
  margin-bottom: 20px;
  text-align: center;
  width: 80px;
}

.about-area .info-ietms .item h4 {
  font-weight: 600;
  text-transform: capitalize;
}

.about-area .info-ietms .item p {
  margin: 0;
}

.about-area .info-ietms {
  padding-right: 35px;
}

.about-area.item-reverse .info-ietms {
  padding-right: 15px;
}


/* Achivement */

.achivement-items .timer {
  color: #232323;
  display: inline-block;
  font-family: "Poppins",sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.achivement-items .item {
  margin-top: 30px;
}

.about-area .achivement-items {
  border-top: 1px solid #e7e7e7;
  margin-top: 30px;
}

.achivement-items .item i {
  color: #0d3b66;
  display: block;
  font-size: 50px;
  margin-bottom: 20px;
}

.achivement-items .medium {
  display: block;
  font-family: "Poppins",sans-serif;
  font-size: 18px;
}

.achivement-items .timer::after {
  color: #0d3b66;
  content: "+";
  font-size: 30px;
  position: absolute;
  right: -20px;
  top: -1px;
}


/* ============================================================== 
     # Our Features
=================================================================== */

.features-modern{
  padding: 40px 0;
  background: linear-gradient(to right, #f8fbff, #eef5ff);
}

/* heading */
.section-title h4{
  color: #0d3b66;
  font-weight: 600;
}

.section-title h2{
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 50px;
}

/* feature item */
.feature-item{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 25px;
  border-radius: 12px;
  background: #fff;
  transition: 0.3s;
  margin-bottom: 25px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

/* icon */
.feature-item .icon{
  min-width: 60px;
  height: 60px;
  background: #0d3b66;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* content */
.feature-item h4{
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
}

.feature-item p{
  font-size: 14px;
  color: #666;
}

/* hover */
.feature-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(13,59,102,0.15);
}

/* responsive */
@media(max-width:768px){
  .feature-item{
    flex-direction: column;
    text-align: center;
  }

  .feature-item .icon{
    margin: auto;
  }
}

/* ============================================================== 
     # Our Vision --- mission 
=================================================================== */
.vision-mission {
  padding: 40px 0;
  background: linear-gradient(135deg, #f8fbff, #0d3b66);
  position: relative;
  overflow: hidden;
}

/* HEADING */
.section-title h4 {
  color: #0d3b66;
  font-weight: 600;
  margin-bottom: 10px;
}

.section-title h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
}

/* ROW */
.vm-row {
  display: flex;
  flex-wrap: wrap;
}

/* CARD */
.vm-card {
  background: #fff;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  transition: 0.4s;
  box-shadow: 0 10px 30px rgba(13, 59, 102, 0.1);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ICON */
.vm-card .icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  margin: auto;
  border-radius: 50%;
  font-size: 28px;
  margin-bottom: 20px;
  color: #fff;
}

/* COLORS */
.vm-card.vision .icon {
  background: #0d3b66;
}

.vm-card.mission .icon {
  background: #0d3b66;
}

/* TEXT */
.vm-card h3 {
  margin-bottom: 15px;
  font-weight: 700;
}

.vm-card p {
  color: #666;
  font-size: 15px;
}

/* HOVER EFFECT */
.vm-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(13, 59, 102, 0.2);
}

/* BACKGROUND SHAPES */
.vision-mission::before,
.vision-mission::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #0d3b66;
}

.vision-mission::before {
  width: 200px;
  height: 200px;
  top: -50px;
  left: -50px;
}

.vision-mission::after {
  width: 200px;
  height: 200px;
  bottom: -50px;
  right: -50px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .vm-card {
    margin-bottom: 30px;
  }
}

/* ============================================================== 
     # Our Story
=================================================================== */

.story-area.default-padding {
  padding-bottom: 70px;
}

.story-box {
  margin-bottom: -15px;
  margin-top: -10px;
  position: relative;
}

.story-box li {
  position: relative;
  padding: 7px 0 24px 32px;
  transition: all 100ms;
  -webkit-transition: all 100ms;
  -moz-transition: all 100ms;
  -ms-transition: all 100ms;
  -o-transition: all 100ms;
  min-height: 44px;
}

.story-box li::before, .story-box li::after {
  transition: all 100ms;
  -webkit-transition: all 100ms;
  -moz-transition: all 100ms;
  -ms-transition: all 100ms;
  -o-transition: all 100ms;
}

.story-box li::before {
  background-color: #0d3b66;
  border: 3px solid #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 10px;
  width: 20px;
  z-index: 2;
}

.story-box li::after {
  content: '';
  display: block;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 10px;
  height: 100%;
  z-index: 1;
}

.story-box li:first-child::after {
  top: 10px;
}

.story-box li:last-child::after {
  height: 10px;
}

.story-box li:last-child {
  padding-bottom: 0;
}

.story-box h4 {
  text-transform: uppercase;
}

.story-box h3 {
  text-transform: capitalize;
  font-weight: 500;
}

@media (min-width: 800px) {
  .story-box li:nth-child(odd) {
    text-align: right;
    padding-left: 0;
    padding-right: calc(50% + 22px);
  }

  .story-box li:nth-child(even) {
    padding-left: calc(50% + 20px);
  }

  .story-box li::before {
    left: calc(50% - 10px);
  }

  .story-box li::after {
    left: 50%;
  }
}


.counter-section{
  padding: 70px 0;
  background: linear-gradient(135deg, #0d3b66, #0a2e52);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* LIGHT OVERLAY DESIGN */
.counter-section::before{
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  top: -100px;
  left: -100px;
}

.counter-section::after{
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
  bottom: -150px;
  right: -150px;
}

/* BOX */
.counter-box{
  padding: 30px 20px;
  transition: 0.3s;
}

/* NUMBER */
.counter-box h2{
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
  color: white;
}

/* TEXT */
.counter-box p{
  font-size: 16px;
  opacity: 0.9;
  color: rgb(209, 208, 208);
}

/* HOVER */
.counter-box:hover{
  transform: translateY(-8px);
}

/* RESPONSIVE */
@media(max-width:768px){
  .counter-box{
    margin-bottom: 30px;
  }
}

/* ============================================================== 
     # Test SEO Score
=================================================================== */

.seo-form-area {
  position: relative;
  overflow: hidden;
}

.seo-form-area button {
  background: #0d3b66 none repeat scroll 0 0;
  border: medium none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #ffffff;
  font-family: "Poppins",sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 15px;
  text-transform: uppercase;
  width: 100%;
}

.seo-form-area.bg-theme button {
  background: #ffffff none repeat scroll 0 0;
  color: #0d3b66;
}

.seo-form-area input {
  border: medium none;
  -moz-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  -webkit-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  -o-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  min-height: 60px;
  padding: 20px;
}

.seo-form-area .site-heading {
  margin-bottom: 30px;
}

.seo-form-area .col-md-6:first-child {
  padding-right: 5px;
}

.seo-form-area .col-md-6:last-child {
  padding-left: 5px;
}

.seo-form-area .side-bg {
  left: -20%;
}

/* ============================================================== 
     # Industries
=================================================================== */

.industries-section {
  padding: 40px 0;
  background: #f4f8fc;
}

/* HEADING */
.section-title h4 {
  color: #0d3b66;
  font-weight: 600;
  letter-spacing: 1px;
}

.section-title h2 {
  font-size: 36px;
  color: #0d3b66;
  font-weight: 700;
  margin-bottom: 40px;
}

/* IMPORTANT FIX */
.industries-row {
  margin-left: -10px;
  margin-right: -10px;
}

/* REMOVE FLEX ISSUE */
.industries-row > div {
  padding: 10px;
}

/* BOX */
.industry-box {
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 10px;
  text-align: center;
  border: 1px solid #e6edf5;
  transition: 0.3s;
  height: 100%;
}

/* IMAGE */
.industry-box img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 10px;
}

/* TEXT */
.industry-box p {
  margin: 0;
  font-size: 13px;
  color: #0d3b66;
  font-weight: 600;
}

/* HOVER */
.industry-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(13, 59, 102, 0.15);
}

/* ========================= */
/* ✅ MOBILE RESPONSIVE FIX */
/* ========================= */

@media (max-width: 767px) {

  /* 2 items per row */
  .col-6 {
    width: 50%;
    float: left;
  }

  .section-title h2 {
    font-size: 24px;
  }

  .industry-box {
    padding: 15px 8px;
  }

  .industry-box img {
    width: 35px;
    height: 35px;
  }

  .industry-box p {
    font-size: 12px;
  }
}

/* EXTRA SMALL (very small phones) */
@media (max-width: 480px) {

  .col-6 {
    width: 50%;
  }

  .industry-box p {
    font-size: 11px;
  }
}

/* ============================================================== 
     # Services
=================================================================== */
.services-section {
  padding: 40px 0;
  background: linear-gradient(180deg, #f5f9ff, #ffffff);
}

/* HEADING */
.section-title h4 {
  color: #0d3b66;
  font-weight: 600;
  letter-spacing: 1px;
}

.section-title h2 {
  font-size: 40px;
  font-weight: 700;
  color: #0d3b66;
  margin-bottom: 60px;
}

/* FLEX FIX */
.service-row {
  display: flex;
  flex-wrap: wrap;
}

.service-row > div {
  display: flex;
}

/* CARD */
.service-box {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 35px 25px;
  text-align: center;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  border: 1px solid #e5ecf5;
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 270px;
}

/* ICON */
.icon-box {
  width: 75px;
  height: 75px;
  background: #edf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  transition: 0.4s;
}

.icon-box img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: 0.4s;
}

/* TEXT */
.service-box h4 {
  color: #0d3b66;
  margin-bottom: 10px;
  transition: 0.3s;
}

.service-box p {
  color: #666;
  font-size: 14px;
  transition: 0.3s;
}

/* BUTTON */
.service-box a {
  display: inline-block;
  margin-top: 15px;
  font-size: 14px;
  color: #0d3b66;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}

/* UNDERLINE ANIMATION */
.service-box a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0;
  bottom: -3px;
  background: #0d3b66;
  transition: 0.3s;
}

.service-box a:hover::after {
  width: 100%;
}

/* GRADIENT HOVER EFFECT */
.service-box::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0%;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #0d3b66, #1e5fa3);
  transition: 0.4s;
  z-index: 0;
}

/* HOVER */
.service-box:hover::before {
  height: 100%;
}

.service-box:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 50px rgba(13, 59, 102, 0.25);
}

/* CONTENT ABOVE */
.service-box * {
  position: relative;
  z-index: 2;
}

/* HOVER COLOR CHANGE */
.service-box:hover h4,
.service-box:hover p,
.service-box:hover a {
  color: #fff;
}

.service-box:hover .icon-box {
  background: rgba(255,255,255,0.2);
}

.service-box:hover .icon-box img {
  transform: scale(1.1) rotate(5deg);
}

/* SCROLL ANIMATION */
.service-box {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.8s ease forwards;
}

.service-box:nth-child(1) { animation-delay: 0.1s; }
.service-box:nth-child(2) { animation-delay: 0.2s; }
.service-box:nth-child(3) { animation-delay: 0.3s; }
.service-box:nth-child(4) { animation-delay: 0.4s; }
.service-box:nth-child(5) { animation-delay: 0.5s; }
.service-box:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RESPONSIVE */
@media(max-width:768px){
  .section-title h2 {
    font-size: 28px;
  }
}

/* ============================================================== 
     # Work Process
=================================================================== */

.work-process {
  padding: 40px 0;
  background: #0d3b66;
  color: #fff;
}

/* HEADING */
.section-title h4 {
  color: #00f5d4;
}

.section-title h2 {
  font-size: 38px;
  margin-bottom: 50px;
  color: white;
}

/* GRID */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* CARD */
.process-card {
  background: rgba(255,255,255,0.05);
  padding: 25px;
  border-radius: 15px;
  position: relative;
  transition: 0.3s;
  border: 1px solid rgba(255,255,255,0.1);
}

/* NUMBER */
.process-card .number {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 14px;
  color: #00f5d4;
}

/* ICON */
.process-card .icon {
  font-size: 28px;
  margin-bottom: 10px;
}

/* TEXT */
.process-card h4 {
  margin-bottom: 8px;
  color: white;
}

.process-card p {
  color: #a8b2d1;
  font-size: 14px;
}

/* HOVER */
.process-card:hover {
  transform: translateY(-8px);
  border-color: white;
  box-shadow: 0 10px 30px rgba(0,255,200,0.2);
}

/* RIGHT CARD */
.analytics-card {
  background: rgba(255,255,255,0.05);
  padding: 25px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.analytics-card h4 {
  margin-bottom: 10px;
  color: white;
}

.analytics-card p {
  color: #8892b0;
  margin-bottom: 20px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================== 
     #Accordion
=================================================================== */

.work-process .acd-items {
  margin-bottom: -35px;
}

.faq-area {
  overflow: hidden;
}

.faq-area .faq-items {
  margin-top: -15px;
}

.acd-items .panel-heading .panel-title a span {
  background: #0d3b66 none repeat scroll 0 0;
  -webkit-border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
  -moz-border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
  border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
  color: #ffffff;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  margin-right: 10px;
  text-align: center;
  width: 35px;
}

.acd-items .panel-heading .panel-title a {
  background: transparent none repeat scroll 0 0;
  display: block;
  font-weight: 600;
  padding: 15px 0;
  position: relative;
}

.acd-items .panel-heading {
  background: transparent none repeat scroll 0 0;
  padding: 0;
}

.acd-items .panel.panel-default {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color -moz-use-text-color #e7e7e7;
  border-image: none;
  border-radius: inherit;
  border-style: none none solid;
  border-width: medium medium 1px;
  box-shadow: inherit;
  margin: 0;
  background: transparent;
}

.acd-items .panel.panel-default:last-child {
  border: medium none;
  margin: 0;
}

.faq-area .panel-body p:last-child {
  margin: 0;
}

.faq-area .panel-body {
  padding: 20px 0;
}

.faq-area .faq-items .acd-items .panel .panel-body {
  border-color: #e7e7e7;
}

.acd-arrow .panel-group.symb .panel-heading a::after {
  content: "\f107";
  font-size: 20px;
  position: absolute;
  right: 10px;
  top: 20px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #0d3b66;
}

.acd-arrow.left .panel-group.symb .panel-heading a::after {
  content: "\f01b" !important;
  font-size: 20px;
  position: absolute;
  right: auto;
  left: 10px;
  top: 12px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.acd-arrow.left .panel-group.symb .panel-heading a.collapsed:after {
  content: "\f01a" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.faq-area .faq-items .panel-group {
  margin: 0;
}

.acd-arrow .panel-group.symb .panel-heading a.collapsed:after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.work-process .acd-items .panel-body {
    padding: 15px 0;
}

.work-process .acd-items .panel-body p:last-child {
    margin-bottom: 0;
}


/* ============================================================== 
     # technology-section
=================================================================== */

.technology-section {
  padding: 40px 0;
  background: #0d3b66;
}

/* HEADING */
.section-title h4 {
  color: #0d3b66;
}

.section-title h2 {
  color: black;
  margin-bottom: 60px;
}

/* GRID FIX */
.tech-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tech-row > div {
  display: flex;
}

/* BOX */
.tech-box {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  margin: 10px;
  border: 1px solid #e6edf5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

/* IMAGE */
.tech-box img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  transition: 0.3s;
}

/* HOVER */
.tech-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(13, 59, 102, 0.15);
}

.tech-box:hover img {
  transform: scale(1.15);
}


/* ============================================================== 
     # Team
=================================================================== */

.team-area .team-items .single-item {
  margin-bottom: 30px;
}

.team-area .team-items .item .thumb {
  position: relative;
  z-index: 1;
}

.team-area .team-items .item .thumb img {
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.team-area .team-items .item .info {
  background: #ffffff none repeat scroll 0 0;
  -moz-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  -webkit-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  -o-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.09);
  left: 0;
  padding: 30px;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.team-area .team-items .item .info h4 {
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.team-area .team-items .item .info span {
  color: #0d3b66;
  margin: 0;
  display: block;
}

.team-area .team-items .item .thumb .fixed-item {
  bottom: -23px;
  left: 30px;
  position: absolute;
}

.team-area .team-items .item .thumb .fixed-item a {
  background: #0d3b66 none repeat scroll 0 0;
  border: 2px solid #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 16px;
  height: 46px;
  line-height: 42px;
  text-align: center;
  width: 46px;
}

.team-area .team-items .item ul li.twitter a {
  background-color: #00b6f1;
}

.team-area .team-items .item ul li.pinterest a {
  background-color: #bd081c;
}

.team-area .team-items .item ul li.facebook a {
  background-color: #3b5998;
}

.team-area .team-items .item ul li.google-plus a {
  background-color: #df4a32;
}

.team-area .team-items .item ul li.vimeo a {
  background-color: #1ab7ea;
}

.team-area .team-items .item ul li.instagram a {
  background-color: #cd486b;
}

.team-area .item .info li {
    display: inline-block;
}

.team-area .item .info li a {
    background: #0d3b66 none repeat scroll 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    margin: 0 2px;
    text-align: center;
    width: 35px;
}

.team-area .item ul {
    border-top: 1px solid #e7e7e7;
    margin-top: 15px;
    padding-top: 20px;
}

/* Team Single */
.team-area .team-items.single .item .info {
  padding-top: 30px;
}

.team-area .team-items.single li {
  display: inline-block;
  margin-right: 5px;
}

.team-area .team-items.single li a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
}

.team-area .team-items.single ul {
  border-bottom: 1px solid #e7e7e7;
  border-top: medium none;
  margin-bottom: 20px;
  margin-top: 15px;
  padding-bottom: 25px;
  padding-top: 0;
}

.team-area .team-items.single ul li a {
  margin: 0;
}

.team-items.single .progress-box .progress {
  height: 10px;
  margin-bottom: 0;
}

.team-items.single .progress-bar {
  background: #0d3b66 none repeat scroll 0 0;
}

.team-items.single .progress-box {
  margin-top: 20px;
}

.team-items.single .progress-box h5 {
  text-transform: uppercase;
}

.team-items.single .progress-box h5 span {
  color: #232323 !important;
}

/* ============================================================== 
     # Pricing Table
=================================================================== */

/* PRICING SECTION */
.pricing-section {
    padding: 60px 0;
    background: #f4f8fc;
}

/* ROW FIX */
.pricing-row {
    display: flex;
    flex-wrap: wrap;
}

/* COLUMN FIX */
.pricing-row > div {
    display: flex;
}

/* CARD */
.pricing-card {
    width: 100%;
    background: #fff;
    padding: 40px 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #e6edf5;
    transition: 0.4s;
    margin-bottom: 30px;
}

/* ACTIVE CARD */
.pricing-card.active {
    background: #0d3b66;
    color: #fff;
    transform: scale(1.05);
}

/* PRICE */
.pricing-card h2 {
    font-size: 32px;
    color: #0d3b66;
}

.pricing-card.active h2 {
    color: #fff;
}

/* BUTTON */
.btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 30px;
}

/* ================= MOBILE FIX ================= */
@media (max-width: 768px) {

    .section-title h2 {
        font-size: 26px;
    }

    .pricing-card {
        padding: 30px 20px;
    }

    /* REMOVE SCALE ON MOBILE */
    .pricing-card.active {
        transform: scale(1);
    }

}

/* ================= EXTRA SMALL ================= */
@media (max-width: 576px) {

    .pricing-row {
        display: block;
    }

    .col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

}

/* ============================================================== 
     # Testimonials
=================================================================== */
.testimonial-section {
  padding: 40px 0;
  background: linear-gradient(135deg, #0d3b66, #1e5a99);
  position: relative;
  color: #fff;
  overflow: hidden;
}

/* LIGHT PATTERN OVERLAY */
.testimonial-section::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('https://www.transparenttextures.com/patterns/cubes.png');
  opacity: 0.08;
  top: 0;
  left: 0;
}

/* LEFT SIDE */
.testimonial-left h2 {
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 20px;
}

.testimonial-left p {
  color: #dbe6f2;
  margin-bottom: 20px;
}

.btn-theme {
  background: #2280fc;
  color: #0d3b66;
  padding: 10px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
}

/* CARD */
.testimonial-card {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.testimonial-card p {
  font-size: 15px;
  color: #444;
  margin-bottom: 20px;
}

/* CLIENT */
.client-info {
  display: flex;
  align-items: center;
}

.client-info img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-right: 15px;
}

.client-info h4 {
  margin: 0;
  color: #0d3b66;
}

.client-info span {
  font-size: 13px;
  color: #888;
}

/* CAROUSEL DOTS */
.carousel-indicators {
  bottom: -40px;
}

.carousel-indicators li {
  background: rgba(255,255,255,0.4);
}

.carousel-indicators .active {
  background: #fff;
}

/* HOVER */
.testimonial-card:hover {
  transform: translateY(-6px);
}

/* RESPONSIVE */
@media(max-width:768px){
  .testimonial-left {
    margin-bottom: 30px;
    text-align: center;
  }
}


/* ============================================================== 
     # Portfolio
=================================================================== */

.portfolio-area .portfolio-items .pf-item {
  float: left;
  width: 33.3333%;
  padding: 0 15px;
  margin-bottom: 30px;
}

.portfolio-area .portfolio-items.col-2 .pf-item {
  width: 50%;
}

.portfolio-area .portfolio-items.col-4 .pf-item {
  width: 25%;
}

.portfolio-area .portfolio-items .pf-item .item-inner {
  position: relative;
  z-index: 1;
  background: #232323;
  overflow: hidden;
}

.portfolio-area .mix-item-menu {
  margin-bottom: 50px;
  overflow: hidden;
  margin-top: -13px;
}

.portfolio-area .mix-item-menu button {
  background: transparent none repeat scroll 0 0;
  border: 1px solid transparent;
  color: #232323;
  display: inline-block;
  font-family: "Poppins",sans-serif;
  font-weight: 600;
  margin: 0 10px;
  position: relative;
  text-transform: uppercase;
  padding: 5px;
}

.portfolio-area .mix-item-menu button.active {
  color: #0d3b66;
}

.pf-item img {
  max-width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  max-width: none;
  width: -webkit-calc(100% + 50px) !important;
  width: calc(100% + 50px) !important;
  opacity: 1;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

.pf-item:hover img {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.pf-item .info {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  position: absolute;
}

.pf-item .info a {
  color: #ffffff;
}

.pf-item .info a i {
  background: #0d3b66 none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  margin: 0;
  opacity: 0;
  position: relative;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  width: 45px;
}

.pf-item .info::before {
  position: absolute;
  top: 30px;
  right: 50%;
  bottom: 30px;
  left: 50%;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  content: '';
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.pf-item:hover img {
  opacity: 0.35;
}

.pf-item:hover .info i {
  opacity: 0.9;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.pf-item:hover .info a:first-child i {
  -webkit-transform: translate3d(-5px, -50%, 0);
  transform: translate3d(-5px, -50%, 0);
}

.pf-item:hover .info a:last-child i {
  -webkit-transform: translate3d(5px, -50%, 0);
  transform: translate3d(5px, -50%, 0);
}

.pf-item:hover .info::before {
  left: 30px;
  right: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  background: rgba(255, 255, 255, 0);
}

/* ============================================================== 
     # Blog
=================================================================== */

.blog-section {
  padding: 30px 0;
  background: #f4f8fc;
}

/* HEADING */
.section-title h4 {
  color: #0d3b66;
  font-weight: 600;
}

.section-title h2 {
  font-size: 38px;
  color: black;
  margin-bottom: 60px;
  font-weight: 700;
}

/* CARD */
.blog-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 30px;
  transition: 0.3s;
  border: 1px solid #e6edf5;
}

/* IMAGE */
.blog-img {
  position: relative;
}

.blog-img img {
  width: 100%;
}

/* DATE */
.blog-img span {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #0d3b66;
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
}

/* CONTENT */
.blog-content {
  padding: 20px;
}

.blog-content h4 {
  color: #0d3b66;
  margin-bottom: 10px;
}

.blog-content p {
  font-size: 14px;
  color: #666;
}

/* META */
.blog-meta {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  font-size: 13px;
  color: #888;
}

/* BUTTON */
.read-btn {
  color: #0d3b66;
  font-weight: 600;
  text-decoration: none;
}

/* HOVER */
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(13, 59, 102, 0.15);
}

/* RESPONSIVE */
@media(max-width:768px){
  .section-title h2 {
    font-size: 28px;
  }
}


/* ============================================================== 
     # Clients
=================================================================== */

.clients-area.pos-top .clients-items {
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 80px;
}

.clients-area .clients-items .single-item img {
  width: auto;
  margin: auto;
}

.clients-area .clients-items a {
  display: block;
}

.clients-area .clients-items .owl-nav {
  margin: 0;
}

.clients-area .clients-items .owl-nav .owl-prev, 
.clients-area .clients-items .owl-nav .owl-next {
  background: transparent none repeat scroll 0 0;
  color: #ffffff;
  font-size: 25px;
  height: 30px;
  left: -35px;
  line-height: 30px;
  margin-top: -15px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  width: 30px;
  z-index: 9999;
}

.clients-area .clients-items .owl-nav .owl-next {
  left: auto;
  right: -35px;
}


/* ============================================================== 
     # Subscribe
=================================================================== */
.subscribe-area {
  padding: 30px 0;
  background: #0d3b66;
  color: #fff;
}

/* IMAGE */
.sub-img img {
  width: 100%;
}

/* CONTENT */
.sub-content h4 {
  font-weight: 500;
  margin-bottom: 10px;
  color: white;
}

.sub-content h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 25px;
  color: white;
}

/* FEATURES */
.sub-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}

.feature {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.feature i {
  color: #00e676;
  margin-right: 10px;
}

/* BUTTON */
.sub-btn {
  display: inline-block;
  background: #fff;
  color: #0d3b66;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.sub-btn:hover {
  background: #f4f8fc;
}

/* RESPONSIVE */
@media(max-width:768px){
  .sub-content {
    margin-top: 30px;
    text-align: center;
  }

  .sub-features {
    grid-template-columns: 1fr;
  }
}


/* ============================================================== 
     # Contact
=================================================================== */
.contact-us-area .address-items .info li {
  display: block;
  margin-bottom: 30px;
  overflow: hidden;
}

.contact-us-area .address-items .info li .left, 
.contact-us-area .address-items .info li .right {
  display: inline-block;
}

.contact-us-area .address-items .info li .left {
  border-right: 1px solid #e7e7e7;
  float: left;
  margin-right: 20px;
  min-width: 170px;
}

.contact-us-area .address-items .info li:last-child {
  border: medium none;
  margin: 0;
  padding: 0;
}

.contact-us-area .address-items .info li i {
  color: #0d3b66;
  display: inline-block;
  font-size: 20px;
  min-width: 30px;
}

.contact-us-area .address-items .info li h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-transform: capitalize;
}

.contact-us-area .address-items .info li i, 
.contact-us-area .address-items .info li h4 {
  display: inline-block;
}

.contact-us-area .address-items .info .title {
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.contact-us-area .address-items {
  padding-right: 35px;
}

.contact-us-area .form-box input {
  border: 1px solid #e7e7e7;
  border-radius: inherit;
  box-shadow: inherit;
}

.contact-us-area .form-box textarea {
  border: 1px solid #e7e7e7;
  border-radius: inherit;
  box-shadow: inherit;
  min-height: 180px;
  padding-top: 20px;
}

.contact-us-area .form-box button {
  background: #0d3b66 none repeat scroll 0 0;
  border: medium none;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  box-shadow: inherit;
  color: #ffffff;
  font-family: "Poppins",sans-serif;
  font-weight: 600;
  padding: 10px 30px;
  text-transform: uppercase;
}

.contact-us-area .form-box button i {
  margin-left: 5px;
}

.contact-us-area .form-box img.loader {
  margin-left: 5px;
}

.contact-us-area .form-box h2 {
  font-weight: 600;
  margin-bottom: 25px;
  text-transform: capitalize;
  margin-top: -5px;
}

.contact-form-area .alert-notification {
  margin-top: 15px;
  padding: 0;
}

.contact-form-area .alert-notification .alert-error {
  background: #e7e7e7 none repeat scroll 0 0;
  color: red;
  margin-top: 0;
  text-align: left;
}

.contact-form-area.bg-fixed .alert-notification .alert-error {
  background: #ffffff none repeat scroll 0 0;
  color: red;
  margin-top: 0;
  text-align: left;
}

.contact-form .alert-notification {
  padding: 0;
}

.contact-form .alert-notification .alert-msg {
  background: #f4f4f4 none repeat scroll 0 0;
  color: red;
}

.alert.alert-success h3 {
  color: green;
  margin-bottom: 10px;
}

.contact-form .alert {
  margin-bottom: 0;
}

.google-maps iframe {
  margin-bottom: -10px;
  min-height: 500px;
  width: 100%;
}

.google-maps {
  overflow: hidden;
}


/* ============================================================== 
     # 404 
=================================================================== */

.error-page-area h1 {
  font-size: 150px;
  font-weight: 900;
  line-height: 120px;
  margin-bottom: 30px;
  margin-top: -5px;
}

.error-page-area h2 {
  font-weight: 600;
  text-transform: uppercase;
}

.error-page-area a {
  margin-top: 15px;
}

.error-box .search {
  margin-bottom: 15px;
  margin-top: 30px;
  text-align: center;
}

.error-box .search form {
  margin: auto;
  position: relative;
  width: 400px;
}

.error-box .search .input-group {
  width: 100%;
}

.error-box .search form input {
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
  box-shadow: inherit;
}

.error-box .search form button {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  line-height: 50px;
  padding: 0 15px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
}

/* ============================================================== 
     # Footer
=================================================================== */

.footer-top .content li {
  display: inline-block;
  margin-left: 100px;
  text-align: left;
}

.footer-top .content li .icon, .footer-top .content li .info {
  display: table-cell;
  vertical-align: middle;
}

.footer-top .content li i {
  color: #0d3b66;
  display: inline-block;
  font-size: 50px;
}

.footer-top .content li .info {
  padding-left: 15px;
}

.footer-top .content li .info h4 {
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.footer-top .content li:first-child {
  border: medium none;
  margin-left: 0;
  padding-left: 0;
}

.footer-top {
  border-bottom: 1px solid #e7e7e7;
  display: block;
  margin-bottom: 0px;
  overflow: hidden;
  padding-bottom: 30px;
}

.footer-top .content li .info span {
  font-size: 16px;
}

.footer-top .logo a {
  display: inline-block;
  margin-top: 10px;
}

footer .footer-top img {
  height: 50px;
}

footer .f-item h4 {
  font-weight: 500;
  margin-bottom: 30px;
  text-transform: uppercase;
}

footer .f-item.link li {
  display: block;
  margin-bottom: 15px;
}

footer .f-item.link li a {
  display: inline-block;
  font-size: 14px;
  padding-left: 20px;
  position: relative;
}

footer .f-item.link li a:hover {
  color: white;
}

footer .f-item.link li a::before {
  border: 2px solid #0d3b66;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 8px;
  width: 10px;
}

footer .f-item.link li:last-child {
  margin: 0;
}

footer .f-item .address h5 {
  text-transform: uppercase;
}

footer .f-item .address li {
  margin-bottom: 15px;
}

footer .f-item .address li:last-child {
  margin: 0;
}

footer .f-item .address h5 i {
  color: white;
  margin-right: 5px;
}

footer .f-item.newsletter .input-group.stylish-input-group {
  border: medium none;
  -moz-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  -o-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
}

footer .f-item.newsletter input {
  border: medium none;
  border-radius: inherit;
  box-shadow: inherit;
  min-height: 55px;
}

footer .f-item.newsletter .input-group-addon {
  border: medium none;
  border-radius: inherit;
  padding: 0;
}

footer .f-item.newsletter .input-group-addon button {
  background: #0d3b66 none repeat scroll 0 0;
  border: medium none;
  color: #ffffff;
  display: block;
  min-height: 55px;
  padding: 0 20px;
}

footer .f-item .social li {
  display: inline-block;
  margin-right: 10px;
}

footer .f-item .social li a {
  border: 1px solid #e7e7e7;
  color: #0d3b66;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
}

footer .f-item .social {
  border-top: 1px solid #e7e7e7;
  margin-top: 20px;
  padding-top: 20px;
}

/* Footer Bottom */

.footer-bottom {
  border-top: 1px solid #e7e7e7;
  margin-top: 75px;
  padding: 20px 0;
}

.footer-bottom.bg-theme-small {
  border-top: medium none;
}

.footer-bottom li {
  display: inline-block;
}

.footer-bottom li a {
  display: inline-block;
  margin-left: 15px;
}

.footer-bottom li a:hover {
  color: #0d3b66;
}

.footer-bottom p {
  margin: 0;
}
/* FOOTER BOTTOM DESIGN */
.fancy-footer {
  position: relative;
  background: linear-gradient(135deg, #0d3b66, #062c4f);
  padding: 20px 0;
  color: #fff;
  overflow: hidden;
}

/* TEXT */
.fancy-footer p {
  margin: 0;
  color: #ddd;
}

.fancy-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fancy-footer ul li {
  display: inline-block;
  margin-left: 20px;
}

.fancy-footer ul li a {
  color: #ddd;
  text-decoration: none;
  transition: 0.3s;
}

.fancy-footer ul li a:hover {
  color: #00d4ff;
}

/* CIRCLES BACKGROUND */
.fancy-footer::before,
.fancy-footer::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
}

/* BIG CIRCLE */
.fancy-footer::before {
  width: 200px;
  height: 200px;
  background: #00d4ff;
  top: -60px;
  left: -60px;
}

/* SMALL CIRCLE */
.fancy-footer::after {
  width: 150px;
  height: 150px;
  background: #ffffff;
  bottom: -50px;
  right: -50px;
}

/* EXTRA FLOATING CIRCLES */
.fancy-footer .container::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: #00d4ff;
  border-radius: 50%;
  bottom: 10px;
  left: 40%;
  opacity: 0.2;
}

.fancy-footer .container::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  top: 10px;
  right: 30%;
  opacity: 0.2;
}

/* RESPONSIVE */
@media(max-width:768px){
  .fancy-footer .text-right {
    text-align: center !important;
    margin-top: 10px;
  }

  .fancy-footer ul li {
    margin: 0 10px;
  }
}

.footer-style {
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.footer-style {
    position: relative;
    background: #062c4f;
    padding: 60px 30px;
    overflow: hidden;
    z-index: 1;
}

/* 🔵 BACKGROUND CIRCLES */
.footer-style::before,
.footer-style::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}

/* BIG CIRCLE */
.footer-style::before {
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.05);
    top: -120px;
    left: -120px;
}

/* SMALL CIRCLE */
.footer-style::after {
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.04);
    bottom: -100px;
    right: -100px;
}

/* OPTIONAL EXTRA CIRCLES */
.footer-style .f-items::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
    top: 40%;
    left: 30%;
    z-index: -1;
}

/* TEXT COLOR */
.footer-style h4,
.footer-style p,
.footer-style a,
.footer-style span {
    color: #fff;
}

/* LINKS */
.footer-style a {
    transition: 0.3s;
}

.footer-style a:hover {
    color: #00c6ff;
}

/* ICON COLOR */
.footer-style i {
    color: #00c6ff;
}

/* BOX SPACING */
.footer-style .f-item {
    margin-bottom: 30px;
}

/* NEWSLETTER INPUT */
.footer-style .form-control {
    border-radius: 30px;
    padding: 10px 15px;
}

.footer-style button {
    background: #00c6ff;
    border: none;
    color: #fff;
    border-radius: 50%;
    padding: 8px 12px;
}


/* FULL WIDTH FIX */
.footer-style {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* REMOVE BOOTSTRAP CONTAINER LIMIT */
.footer-style .f-items {
    width: 100%;
    max-width: 1200px;  /* content center me rahe */
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

/* GRID FIX */
.footer-style .f-items > div {
    flex: 0 0 25%;
    max-width: 25%;
}

/* MOBILE RESPONSIVE */
@media (max-width: 992px) {
    .footer-style .f-items > div {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .footer-style .f-items > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* REMOVE GAP BETWEEN FOOTER & COPYRIGHT */
.footer-style {
    margin-bottom: 0 !important;
    padding-bottom: 40px; /* thoda adjust */
}

.footer-bottom,
.copyright-area {
    margin-top: 0 !important;
    padding-top: 15px;
}

/* EXTRA FIX (agar gap still aaye) */
footer,
.footer-area {
    margin: 0;
    padding: 0;
}

/* ============================================================== 
     # Preloader 
=================================================================== */
.no-js #loader {
  display: none;
}

.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
}

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: url(assets/img/preloader.gif) center no-repeat #fff;
  text-align: center;
}


/* ============================================================== 
     # Demo 
=================================================================== */
.demo-area .single-item {
  box-shadow: 0 0 10px #cccccc;
  position: relative;
  z-index: 1;
  padding: 15px;
}

.demo-area .item {
    margin-bottom: 50px
}

.demo-area .single-item .info {
  background: #f3f6f8 none repeat scroll 0 0;
  color: #333;
  padding: 15px 10px;
  text-align: center;
  margin-top: 15px;
}
.demo-area .single-item .info h4 {
  color: #232323;
  font-size: 16px;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0;
}
.banner-area .demo-banner h1 {
  font-weight: 700;
  margin-bottom: 30px;
}
.banner-area .demo-banner img {
  height: auto;
  margin-bottom: 20px;
  max-height: 150px;
}
.demo-area .def-heading h2 {
  font-weight: 900;
  margin: 30px 0;
  text-transform: uppercase;
  color: #333333;
}
.demo-footer {
  padding-bottom: 80px;
}

.introduction-area h2 span {
  color: #fd0060;
}

.introduction-area h4 {
  font-weight: 300;
  line-height: 30px;
}

.introduction-area h2 {
  color: #ffffff;
  display: inline-block;
  font-weight: 700;
  padding-bottom: 20px;
  position: relative;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.introduction-area h2::before {
  background: #fd0060 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 50px;
}

.introduction-area h2::after {
  background: #ffffff none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -40px;
  position: absolute;
  width: 25px;
}

footer.demo .copyright {
  margin-top: 15px;
}
.demo-area .comming-soon.item img {
    opacity: 0.3;
}
.banner-area.demo-banner {
  padding: 50px 0;
}


.demo-area .tab-navigation .nav-pills li {
    display: inline-block;
    float: none;
}
.demo-area .tab-navigation .nav-pills li a {
    background: #232323 none repeat scroll 0 0;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 15px 40px;
    text-transform: uppercase;
}
.demo-area .tab-navigation .nav-pills li.active a {
  background: #307ad5 none repeat scroll 0 0;
  color: #ffffff;
  position: relative;
  z-index: 1;
}
.demo-area .tab-navigation .nav-pills li.active a::after {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #307ad5;
  bottom: -14px;
  content: "";
  left: 50%;
  margin-left: -15px;
  position: absolute;
  transition: all 0.35s ease-in-out 0s;
}
.demo-area .tab-navigation .nav-pills {
    display: block;
    margin-bottom: 50px;
}


.crm-pro{
  background: #f6f9ff;
  padding: 50px 0;
}

/* HEADING */
.crm-pro .sub{
  color: #0d3b66;
  font-weight: 600;
  margin-bottom: 10px;
}

.crm-pro .title{
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 50px;
}

/* ITEM */
.crm-item{
  display: flex;
  align-items: flex-start;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 25px;
  transition: 0.4s;
  border-left: 4px solid transparent;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* ICON */
.crm-item .icon{
  min-width: 60px;
  height: 60px;
  background: #0d3b66;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-right: 15px;
  transition: 0.3s;
}

/* TEXT */
.crm-item h4{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #0d3b66;
}

.crm-item p{
  font-size: 14px;
  color: #666;
}

/* 🔥 HOVER EFFECT */
.crm-item:hover{
  transform: translateY(-8px);
  border-left: 4px solid #0d3b66;
  box-shadow: 0 15px 35px rgba(13,59,102,0.2);
}

/* ICON ANIMATION */
.crm-item:hover .icon{
  background: #00c6ff;
  transform: rotate(10deg) scale(1.1);
}

/* TEXT HOVER */
.crm-item:hover h4{
  color: #00c6ff;
}

/* RESPONSIVE */
@media(max-width:768px){
  .crm-pro{
    padding: 50px 0;
  }
}


.crm-section{
    background: #ccdff1;
    position: relative;
}

/* IMAGE */
.crm-image img{
    width: 100%;
}

/* CONTENT */
.crm-content h2{
    font-size: 32px;
    font-weight: 700;
    color: #0d3b66;
    margin-bottom: 15px;
}

.crm-content p{
    color: #555;
    margin-bottom: 25px;
    line-height: 1.7;
}

/* FEATURES GRID */
.crm-features{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* BOX STYLE */
.feature-box{
    width: 48%;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 20px rgba(13,59,102,0.08);
    transition: 0.3s;
}

/* ICON */
.feature-box i{
    font-size: 18px;
    color: #0d3b66;
    margin-right: 10px;
}

/* TEXT */
.feature-box span{
    font-size: 14px;
    font-weight: 500;
}

/* HOVER EFFECT */
.feature-box:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(13,59,102,0.15);
}

/* BUTTON */
.btn-crm{
    display: inline-block;
    margin-top: 25px;
    background: #0d3b66;
    color: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-crm:hover{
    background: #062c4f;
}

/* RESPONSIVE */
@media(max-width:768px){
    .feature-box{
        width: 100%;
    }

    .crm-content{
        margin-top: 30px;
    }
}


/* ============================================================== 
     # Terms and Conditions
=================================================================== */

.terms-area {
    background: #f4f8fc;
    padding: 60px 30px;
}

/* FULL WIDTH BOX */
.terms-box {
    width: 100%;
    background: #fff;
    padding: 50px 80px; /* left-right spacing increase */
    border-radius: 10px;
}

/* TITLE */
.terms-box .main-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0d3b66;
}

/* TEXT */
.terms-box p {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

/* HEADINGS */
.terms-box h4 {
    margin-top: 25px;
    font-weight: 600;
    color: #0d3b66;
}

/* LIST */
.terms-box ul {
    padding-left: 20px;
}

.terms-box ul li {
    margin-bottom: 8px;
}

/* MOBILE FIX */
@media(max-width:768px){
    .terms-box {
        padding: 20px;
    }

    .terms-box .main-title {
        font-size: 24px;
    }
}


.pricing-row {
    display: flex;
    flex-wrap: wrap;
}

.pricing-card {
    background: #fff;
    padding: 40px 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #e6edf5;
    transition: 0.4s;
    margin-bottom: 30px;
}

.pricing-card h3 {
    font-weight: 700;
    margin-bottom: 10px;
}

.pricing-card h2 {
    color: #0d3b66;
    margin-bottom: 20px;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
}

.pricing-card ul li {
    padding: 6px 0;
    font-size: 14px;
}

/* STANDARD ACTIVE */
.pricing-card.active {
    background: #0d3b66;
    color: #fff;
    transform: scale(1.05);
}

.pricing-card.active h2 {
    color: #fff;
}

/* BUTTONS */
.btn {
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

.btn-outline {
    border: 1px solid #0d3b66;
    color: #0d3b66;
}

.btn-primary {
    background: #fff;
    color: #0d3b66;
}

/* 🔥 PREMIUM BUTTON (Special Design) */
.premium-btn {
    background: linear-gradient(45deg, #ff512f, #dd2476);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(221, 36, 118, 0.4);
    transition: 0.3s;
}

.premium-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(221, 36, 118, 0.6);
}

/* HOVER CARD */
.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* RESPONSIVE */
@media(max-width:768px){
    .pricing-card {
        margin-bottom: 20px;
    }
}