/*=============================================
[  Table of contents  ]
===============================================

1. Variables 
2. Typography
3. General CSS
4. Site Header
5. Page Header
6. Site Footer
7. Site Widget
  - Links
  - Contact Info
  - Social Info
  - Newsletter

8. All Elements
  - Section Title
  - Button
  - Services
  - Services Fancy
  - List
  - Gallery
  - Infobox
  - Social Icon
  - Form
  - Map Hotspot

9. Page Section
  - Main Banner Section
  - Privacy Priority Section
  - About Section
  - About Ovrlay Section

==============================================
[ End table content ]
=============================================*/


/*===========================================*/
/* Variable */
/*===========================================*/

:root {
  --body-font: 'Nunito', sans-serif;
  --title-font: 'Nunito', sans-serif;
  --primary-color: #0D6EFD;
  --title-color: #1D2C44;
  --body-color: #1D2C44;
  --white-color: #ffffff;
  --dark-color: #1F3953;
  --footer-bg: #001739;
  --sectio-bg-light: #F3F8FF;
  --section-padding: 100px;
  --section-padding-md: 80px;
  --section-padding-sm: 60px;
  --section-title-margin: 30px;
  --border-radius: 5px;
  --border-radius-10: 10px;
  --border-radius-15: 15px;
  --border-radius-full: 50px;
  --transition: all 0.25s ease-in-out;
}

/*===========================================*/
/* Typography */
/*===========================================*/
body {padding: 0; margin: 0; font-family: var(--body-font); color: var(--body-color); font-size: 16px; line-height: 26px; overflow-x: hidden;}

h1,
h2,
h3,
h4,
h5,
h6 {font-family: var(--title-font); color: var(--secondary-color); font-weight: 700; margin: 0;}

h1 {font-size: 48px; line-height: 58px;}
h2 {font-size: 42px; line-height: 50px;}
h3 {font-size: 34px; line-height: 42px;}
h4 {font-size: 24px; line-height: 30px;}
h5 {font-size: 20px; line-height: 28px;}
h6 {font-size: 18px; line-height: 26px;}

a {color: var(--primary-color);}

/*===========================================*/
/* General CSS */
/*===========================================*/
.section-bg-theme {background-color: var(--primary-color);}
.section-bg-light {background-color: var(--sectio-bg-light);}
.section-bg-dark {background-color: var(--dark-color);}

/*-----------------------*/
/* Section Padding */
/*-----------------------*/
.section-ptb {padding-top: var(--section-padding); padding-bottom: var(--section-padding);}
.section-pt {padding-top: var(--section-padding);}
.section-pb {padding-bottom: var(--section-padding);}

/*===========================================*/
/* Site Header */
/*===========================================*/
.site-header .site-logo {min-width: 300px;}
.site-header .navbar {display: flex; justify-content: space-between; padding: 15px 100px; background: #ffffff;}
.site-header .navbar-nav {display: flex; gap: 15px 50px;}
.site-header .navbar-nav .nav-link {font-size: 18px; color: var(--title-color); padding: 0; transition: var(--transition);}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link.active {color: var(--primary-color);}

/* Header Sticky */
.site-header.header-sticky {position: fixed; left: 0; right: 0; top: 0; z-index: 9;}
.site-header.header-sticky .site-logo img {height: 60px;}
.site-header.header-sticky .navbar {padding-top: 5px; padding-bottom: 5px; box-shadow: 0 5px 40px rgba(0,0,0,0.05); animation: slideDown 0.6s;}

@-webkit-keyframes slideDown {
  from {top: -100px;} to {top: 0;}
}

@-moz-keyframes slideDown {
  from {top: -100px;} to {top: 0;}
}

@keyframes slideDown {
  from {top: -100px;} to {top: 0;}
}

/*===========================================*/
/* Page Header */
/*===========================================*/
.page-header {padding: 215px 0; position: relative;}
.page-header:before {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000000; opacity: 0.3;}
.page-header .page-header-inner {position: relative; z-index: 2;}
.page-header .page-header-title {font-size: 60px; line-height: 72px; color: #ffffff;}

/*===========================================*/
/* Site Footer */
/*===========================================*/
.site-footer {background: var(--footer-bg);}
.site-footer .footer-top {background: var(--primary-color); padding: 35px 0;}
.site-footer .footer-main {padding-top: 50px; padding-bottom: var(--section-padding);}

.site-footer .copyright-text {margin-top: 20px;}
.footer-widget-light .copyright-text {color: #ffffff;}

/*===========================================*/
/* Site Widget */
/*===========================================*/
.widget {margin-top: 50px;}
.widget + .widget {margin-top: 20px;}

/*---------------------------------*/
/* Widget Title */
/*---------------------------------*/
.widget .widget-title {margin-bottom: 30px;}
.widget .widget-title:after {content: ""; width: 100px; height: 3px; background: var(--primary-color); display: flex; margin-top: 15px;}

/* Widget Light */
.footer-widget-light .widget-title {color: #ffffff;}
.footer-widget-light .widget-title:after {background: #ffffff;}

/*---------------------------------*/
/* Widget Links */
/*---------------------------------*/
.widget-links .links-list {display: flex; flex-direction: column; gap: 15px; padding: 0; margin: 0; list-style-type: none;}
.widget-links .links-list li a {display: inline-block; color: var(--title-color); line-height: 26px; text-decoration: none; transition: var(--transition);}
.widget-links .links-list li a:hover {color: var(--primary-color);}

/* Widget Light */
.footer-widget-light .widget-links .links-list li a {color: #ffffff;}
.footer-widget-light .widget-links .links-list li a:hover {color: var(--primary-color);}

/*---------------------------------*/
/* Widget Contact Info */
/*---------------------------------*/
.widget-contact-info .links-list {display: flex; flex-direction: column; gap: 15px; padding: 0; margin: 0; list-style-type: none;}
.widget-contact-info .links-list li a {display: inline-block; color: var(--title-color); line-height: 26px; text-decoration: none; transition: var(--transition);}
.widget-contact-info .links-list li a:hover {color: var(--primary-color);}

/* Widget Light */
.footer-widget-light .widget-contact-info .links-list li,
.footer-widget-light .widget-contact-info .links-list li a {color: #ffffff;}
.footer-widget-light .widget-contact-info .links-list li a:hover {color: var(--primary-color);}

/*---------------------------------*/
/* Widget Social Info */
/*---------------------------------*/
.widget-social-info .social-list {display: flex; gap: 15px; padding: 0; margin: 0; list-style-type: none;}
.widget-social-info .social-list li a {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid var(--primary-color); color: var(--primary-color); text-decoration: none; border-radius: var(--border-radius-full); transition: var(--transition);}
.widget-social-info .social-list li a:hover {background: var(--primary-color); color: #ffffff;}

/* Social Light */
.widget-social-info .social-light li a {border-color: #ffffff; color: #ffffff;}
.widget-social-info .social-light li a:hover {border-color: var(--primary-color);}

/*---------------------------------*/
/* Widget Newsletter */
/*---------------------------------*/
.widget-newsletter form .input-fields {display: flex; background: #ffffff; padding: 5px; border-radius: var(--border-radius);}
.widget-newsletter form .input-fields input,
.widget-newsletter form .input-fields input:focus {border: none; outline: none; width: 100%; height: 50px; padding: 0 15px;}
.widget-newsletter form .input-fields .subscribe-btn {background: var(--primary-color); color: #ffffff; width: 50px; height: 50px; border-radius: var(--border-radius); border: none; flex: none; font-size: 18px;}
.widget-newsletter form .checkbox-fields {display: flex; color: #ffffff; gap: 15px; margin-top: 25px;}

/*===========================================*/
/* All Elements */
/*===========================================*/

/*---------------------------------*/
/* Section Title */
/*---------------------------------*/
.section-title {margin-bottom: var(--section-title-margin);}
.section-title .main-title {font-weight: 700;}
.section-title .main-title span {color: var(--primary-color);}
.section-title .main-title + .section-description {margin-top: 20px;}
.section-title h3.main-title + .section-description {margin-top: 15px;}
.section-title .section-description a {color: var(--primary-color); text-decoration: underline;}

/* Section Title - Light */
.section-bg-theme .section-title-light .sub-title {color: var(--white-color);}
.section-bg-theme .section-title-light .section-description a {color: var(--white-color);}

.section-title-light .main-title {color: var(--white-color);}
.section-title-light .section-description {color: var(--white-color);}

/*---------------------------------*/
/* Buttons */
/*---------------------------------*/
.btn {padding: 11px 45px; font-size: 18px; line-height: 26px; color: var(--primary-color); border: none; transition: var(--transition);}

.btn.btn-primary {background: var(--primary-color); color: #ffffff;}
.btn.btn-primary:hover {background: var(--dark-color);}
.btn.btn-secondary {background: var(--dark-color); color: #ffffff;}
.btn.btn-secondary:hover {background: var(--primary-color);}
.btn.btn-light {background: #ffffff; color: var(--primary-color);}
.btn.btn-light:hover {background: var(--dark-color); color: #ffffff;}

.btn.btn-lg {padding: 20px 60px; font-size: 20px; line-height: 30px;}
.btn.btn-md {padding: 8px 30px; font-size: 16px; line-height: 22px;}
.btn.btn-sm {padding: 6px 25px; font-size: 14px; line-height: 22px;}
.btn > i {padding-left: 5px; font-size: 13px;}

.button-group {display: flex; gap: 15px; flex-wrap: wrap;}

/*---------------------------------*/
/* Services */
/*---------------------------------*/
.services-style-1 {padding: 20px; border-radius: var(--border-radius);}
.services-style-1 .services-inner {background: #ffffff; padding: 50px 30px; border-radius: var(--border-radius);}

.services-main .services-icon {margin-bottom: 20px;}
.services-main .services-title {margin-bottom: 15px;}
.services-main .services-description {margin-bottom: 20px;}

/* Services Style 2 */
.services-style-2 .services-inner {background: #ffffff; padding: 50px 30px; border-radius: var(--border-radius-10); box-shadow: 0 5px 15px rgba(0,0,0,0.1);}


/*---------------------------------*/
/* Services Fancy */
/*---------------------------------*/
.services-fancy-main {display: flex; gap: 60px; margin-top: 50px;}
.services-fancy-main .services-fancy-content {width: 100%;}
.services-fancy-main .services-fancy-image {width: 270px; flex: none; position: relative;}

.services-fancy-main .services-fancy-item {display: flex; align-items: center; padding: 27px 0; border-bottom: 1px solid #e0e0e0; cursor: pointer;}
.services-fancy-main .services-fancy-item:first-child {border-top: 1px solid #e0e0e0;}
.services-fancy-main .services-fancy-item .services-details {display: flex; align-items: center;}

.services-fancy-main .services-fancy-item .services-info {display: flex; align-items: center;}
.services-fancy-main .services-fancy-item .services-number {width: 110px; font-size: 42px; font-weight: 700; transition: var(--transition);}
.services-fancy-main .services-fancy-item .services-title {width: 330px; padding-right: 30px; transition: var(--transition);}
.services-fancy-main .services-fancy-item .services-content {line-height: 24px;}
.services-fancy-main .services-fancy-item .services-link {width: 125px; padding-left: 30px; flex: none; order: 3; display: flex; justify-content: flex-end;}

.services-fancy-main .services-fancy-item:hover .services-number,
.services-fancy-main .services-fancy-item:hover .services-title,
.services-fancy-main .services-fancy-item.item-active .services-number,
.services-fancy-main .services-fancy-item.item-active .services-title {color: var(--primary-color);}

.svg-arrow-icon {display: inline-block; width: 37px; height: 27px; background: url("../images/right-arrow.svg"); background-repeat: no-repeat; background-position: center; transition: var(--transition);}
.services-fancy-main .services-fancy-item:hover .svg-arrow-icon,
.services-fancy-main .services-fancy-item.item-active .svg-arrow-icon,
.svg-arrow-icon:hover {background: url("../images/right-arrow-hover.svg");}

/* Hover Image */
.services-fancy-main .services-fancy-image .services-image {position: absolute; left: -30px; opacity: 0; top: 0; right: 0; transition: all 0.5s ease-in-out;}
.services-fancy-main .services-fancy-image .services-image.image-active {opacity: 1; left: 0;}

/*---------------------------------*/
/* List */
/*---------------------------------*/
.list-main ul {padding: 0; margin: 0; list-style-type: none; display: flex; flex-wrap: wrap; gap: 18px;}
.list-main ul li {display: flex; align-items: baseline; gap: 15px; font-size: 20px;}
.list-main ul li i {font-size: 22px; color: var(--primary-color);}

/*---------------------------------*/
/* Gallery */
/*---------------------------------*/
.gallery-grid {display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr);}
.gallery-grid.grid-4 {grid-template-columns: repeat(4, 1fr);}

/*---------------------------------*/
/* Infobox */
/*---------------------------------*/
.infobox-main {display: flex; gap: 35px;}
.infobox-main.icon-border .infobox-icon {flex: none; width: 70px; height: 70px; padding: 5px; border: 1px solid rgba(13,110,253,0.2); border-radius: var(--border-radius-full);}
.infobox-main.icon-border .infobox-icon .info-step {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 1px solid var(--primary-color); color: var(--primary-color); border-radius: var(--border-radius-full);}
.infobox-main .infobox-info .title {color: var(--primary-color); margin-bottom: 10px;}

/* Infobox Light */
.infobox-light .infobox-icon img {filter: brightness(0) invert(1);}
.infobox-light .infobox-info .title {color: #ffffff;}
.infobox-light .infobox-info .description {color: #ffffff;}

/*---------------------------------*/
/* Social Icon */
/*---------------------------------*/
.social-icon-main .social-list {display: flex; gap: 15px; padding: 0; margin: 0; list-style-type: none;}
.social-icon-main .social-list li a {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid var(--primary-color); color: var(--primary-color); text-decoration: none; border-radius: var(--border-radius-full); transition: var(--transition);}
.social-icon-main .social-list li a:hover {background: var(--primary-color); color: #ffffff;}

/*---------------------------------*/
/* Form */
/*---------------------------------*/
.form-style-flat .form-control {background: #f3f8ff; border-color: #f3f8ff; min-height: 60px; padding: 0 20px; transition: var(--transition);}
.form-style-flat .textarea-fields {padding: 20px;}
.form-style-flat .form-control:focus {border-color: var(--primary-color); box-shadow: none; outline: none;}

/*---------------------------------*/
/* Map Hotspot */
/*---------------------------------*/
.map-hotspot {position: relative;}
.map-hotspot .map-location {position: absolute;}

.map-hotspot .map-location.location-1 {left: 19%; top: 25%;}
.map-hotspot .map-location.location-2 {left: 69%; top: 43%;}
.map-hotspot .map-location.location-3 {left: 32%; top: 69%;}

.map-hotspot .map-location .map-img {background: #ffffff; width: 150px; padding: 5px; position: absolute; bottom: 50px; left: 12px; transform: translateX(-50%); border-radius: var(--border-radius-10); opacity: 0; visibility: hidden; transition: var(--transition);}
.map-hotspot .map-location .map-triger {cursor: pointer; transition: var(--transition); width: 25px; height: 25px; display: inline-flex; justify-content: center; align-items: center;}
.map-hotspot .map-location .map-triger:hover {color: var(--primary-color);}
.map-hotspot .map-location .location-info {padding: 5px 0;}
.map-hotspot .map-location .location-info .title-info {display: flex; justify-content: space-between; align-items: center;}
.map-hotspot .map-location .location-info .title-info .title {font-size: 16px; line-height: 22px; color: var(--title-color);}
.map-hotspot .map-location .location-info .location-rating {display: flex; color: #ffcc03; font-size: 9px; gap: 1px;}
.map-hotspot .map-location .location-info p {line-height: 18px; padding-top: 5px;}

.map-hotspot .map-location:hover .map-img {opacity: 1; visibility: visible; bottom: 30px;}

/*===========================================*/
/* Main Banner Section */
/*===========================================*/
.main-banner {padding-left: 100px; padding-right: 100px;}
.main-banner .container-fluid {padding: 0;}
.main-banner .banner-info {padding: 55px 45px; margin-left: -310px; margin-right: 230px; margin-top: 70px; background-color: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--border-radius-10);}
.main-banner .banner-info .main-title {font-size: 60px; line-height: 72px; font-weight: 800;}
.main-banner .banner-info .section-description {font-size: 20px; line-height: 30px;}

/* List */
.main-banner .banner-list {margin-top: 50px; padding-left: 25px;}
.main-banner .list-main ul {display: flex; flex-wrap: wrap; gap: 18px 15px;}
.main-banner .list-main li {min-width: calc(50% - 8px); flex: 2;}

/*===========================================*/
/* Privacy Priority Section */
/*===========================================*/
.double-image {position: relative; display: inline-block; padding-bottom: 50px;}
.double-image .small-image {width: 260px; position: absolute; right: -100px; bottom: 0px;}
.privacy-priority-section .list-main {padding-top: 10px;}
.privacy-priority-section .list-main ul {gap: 30px;}

/*===========================================*/
/* About Section */
/*===========================================*/
.about-info {display: flex; gap: 30px;}
.about-info .about-text {writing-mode: vertical-lr; transform: rotate(-180deg); display: inline-block; flex: none; align-self: center;}
.about-info .about-text .large-text {font-size: 95px; line-height: 100px; color: var(--primary-color); font-weight: 800; text-transform: uppercase; opacity: 0.1;}

.about-info .about-image {position: relative; display: inline-block;}
.about-info .about-image .about-shape {position: absolute; top: 50px; right: -65px; animation: animName 5s linear infinite;}

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

/*===========================================*/
/* About Ovrlay Section */
/*===========================================*/
.about-ovrlay-section {overflow: hidden;}
.ovrlay-bg-image {margin-left: -390px; height: 100%; object-fit: cover; margin-right: -100px;}
.ovrlay-bg-image img {width: 100%;}

.ovrlay-section {padding: 100px; padding-right: 0; margin-top: 100px; position: relative;}
.ovrlay-section:before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1000px; background-color: var(--primary-color); z-index: -1;}


/*===========================================*/
/* Form Pages */
/*===========================================*/
.website-form-pages {display: flex; min-height: 100vh;}
.website-form-pages .website-info {display: flex; justify-content: center; align-items: center; width: 50%; background-color: var(--primary-color); background: url("../images/form-left-bg.jpg"); background-repeat: no-repeat; background-position: center left; background-size: cover;}
.website-form-pages .site-logo {margin-bottom: 30px;}
.website-form-pages .main-title + .section-description {font-size: 18px; margin-top: 10px;}

.website-form-pages .website-form {display: flex; align-items: center; width: 50%; background-color: #f5f5f5; background: url("../images/form-right-bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;}
.website-form-pages .website-form .form-wrapper {background: #ffffff; padding: 55px; width: 650px; margin-left: -70px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border-radius: var(--border-radius-10);}
.website-form-pages .website-form .input-fields {position: relative; padding: 20px; padding-left: 60px; background: #ffffff; box-shadow: 0 0px 15px rgba(0,0,0,0.1); border-left: 3px solid var(--primary-color); border-radius: var(--border-radius);}
.website-form-pages .website-form .input-fields > i {position: absolute; left: 23px; top: 25px; font-size: 20px; color: #969696;}
.website-form-pages .website-form .input-fields .form-control {background: none; min-height: 30px; border: none; border-left: 2px solid #e8e8e8; border-radius: 0;}
.website-form-pages .website-form .form-check {margin: 30px 0 !important; display: flex; justify-content: space-between; align-items: center;}

.website-form-pages .website-info .btn-light:hover {background: var(--primary-color); color: #ffffff;}

/*---------------------*/
/* Form Steps */
/*---------------------*/
.form-steps {margin-bottom: 30px;}
.form-steps .steps-inner {display: flex; width: 100%;}
.form-steps .step-title {font-size: 28px; line-height: 36px; color: #828282; font-weight: 700; margin-top: 30px;}
.form-steps .step-item {width: 100%;}
.form-steps .step-item .step-label {display: block; margin-bottom: 15px; color: var(--title-color);}
.form-steps .step-item .step-info {position: relative;}
.form-steps .step-item .step-info:before {content: ""; position: absolute; width: 100%; height: 2px; background: var(--title-color); top: 12px; left: 0; z-index: 0;}
.form-steps .step-item .step-number {width: 26px; height: 26px; color: #323232; font-size: 14px; font-weight: 600; background: #ffffff; position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; border: 2px solid var(--title-color); border-radius: var(--border-radius-full);}

.form-steps .step-item.active .step-info:before {background: var(--primary-color);}
.form-steps .step-item.active .step-number {background: var(--primary-color); border-color: var(--primary-color); color: #ffffff;}