/*--- # Font & Color Variables # Help: https://bootstrapmade.com/color-system/ ----*/
/* Fonts */
:root {
  --default-font: "Outfit", sans-serif;
  --heading-font: "Ubuntu", sans-serif;
  --nav-font: "Outfit", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #222222; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #0bc9c0; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #222222;  /* The default color of the main navmenu links */
  --nav-hover-color: #0bc9c0; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #222222; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #106eea; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-background { --background-color: #f5f9ff; --surface-color: #ffffff;}
.dark-background {--background-color: #060606;--default-color: #ffffff;--heading-color: #ffffff;--surface-color: #252525;--contrast-color: #ffffff;}

/* Smooth scroll */
:root {scroll-behavior: smooth;}

/*--- # General Styling & Shared Classes ---*/
body {color: var(--default-color);background-color: var(--background-color);font-family: var(--default-font);}
a {color: var(--accent-color);text-decoration: none;transition: 0.3s;}
a:hover {color: color-mix(in srgb, var(--accent-color), transparent 25%);text-decoration: none;}
h1,h2,h3,h4,h5,h6 {color: var(--heading-color);font-family: var(--heading-font);}

/*--- # Global Header ---*/
.header {color: var(--default-color);transition: all 0.5s;z-index: 997;background-color: var(--background-color);}
.header .topbar {background-color: var(--accent-color);height: 40px;padding: 0;font-size: 14px;transition: all 0.5s;}
.header .btn-getstarted,
.header .btn-getstarted:focus {color: var(--contrast-color);background: #3a4056;font-size: 14px;padding: 14px 26px;margin: 0;border-radius: 4px;transition: 0.3s;}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {color: var(--contrast-color);background: color-mix(in srgb, var(--accent-color), transparent 15%);}
.header .branding {background-color: var(--background-color);min-height: 60px;padding: 10px 0;}
.header .logo {line-height: 1;}
.header .logo img {max-height: 80px;margin-right: 8px;}
.scrolled .header {box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);}
.scrolled .header .topbar {height: 0;visibility: hidden;overflow: hidden;}

/*--- # Preloader ---*/
#preloader {position: fixed;inset: 0;z-index: 9999;overflow: hidden;background-color: var(--background-color);transition: all 0.6s ease-out;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;}
#preloader div {width: 13px;height: 13px;background-color: var(--accent-color);border-radius: 50%;animation-timing-function: cubic-bezier(0, 1, 1, 0);position: absolute;left: 50%;}
#preloader div:nth-child(1) {left: calc(50% + 8px);animation: animate-preloader-1 0.6s infinite;}
#preloader div:nth-child(2) {left: calc(50% + 8px);animation: animate-preloader-2 0.6s infinite;}
#preloader div:nth-child(3) {left: calc(50% + 32px);animation: animate-preloader-2 0.6s infinite;}
#preloader div:nth-child(4) {left: calc(50% + 56px);animation: animate-preloader-3 0.6s infinite;}

/*--- # keyframes ---*/
@keyframes animate-preloader-1 {0% {transform: scale(0);}100% {transform: scale(1);}}
@keyframes animate-preloader-3 {0% {transform: scale(1);}100% {transform: scale(0);}}
@keyframes animate-preloader-2 {0% {transform: translate(0, 0);}100% {transform: translate(24px, 0);}}
@keyframes up-down {0% {transform: translateY(10px);}100% {transform: translateY(-10px);}}

/*--- # Scroll Top Button ---*/
.scroll-top {position: fixed;visibility: hidden;opacity: 0;right: 15px;bottom: 15px;z-index: 99999;background-color: var(--accent-color);width: 40px;height: 40px;border-radius: 4px;transition: all 0.4s;}
.scroll-top i {font-size: 24px;color: var(--contrast-color);line-height: 0;}
.scroll-top:hover {background-color: color-mix(in srgb, var(--accent-color), transparent 20%);color: var(--contrast-color);}
.scroll-top.active {visibility: visible;opacity: 1;}

/*---# Global Sections ---*/
section,.section {color: var(--default-color);background-color: var(--background-color);padding: 60px 0;scroll-margin-top: 60px;overflow: clip;}
#offerring{scroll-margin-top: 160px !important;}
.section-title {padding-bottom: 60px;position: relative;text-align: center;}
.section-title-daily{padding-left: 22%;}
.section-title h2 {font-size: 20px;font-weight: 500;margin-top: 6%;color: #3a4056;font-family: var(--default-font);}
.section-title p {color: #0bc9c0;margin: 10px 0 0 0;font-size: 36px;font-weight: 600;font-family: var(--heading-font);}
.section-title p .description-title {color: var(--accent-color);}

/*---# Hero Section ---*/
.hero,.hero-mobile {width: 100%;min-height: 100vh;position: relative;padding: 60px 0;display: flex;align-items: center;background: url("../img/hero-bg.jpg") top left;background-size: contain;background-repeat: no-repeat; background-position: center center;}
.hero .container {position: relative;}
.hero h1 {margin: 310px 0px 0px 0px;font-size: 48px;font-weight: 700;line-height: 68px;text-align: left;color: #3a4056;}
.hero h1 span {color: #fff;font-weight: 400;}
.hero .btn-get-started {color: var(--contrast-color);background: var(--accent-color);font-family: var(--heading-font);font-weight: 400;font-size: 16px;letter-spacing: 1px;display: inline-block;padding: 12px 30px;border-radius: 4px;transition: 0.5s;box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);}
.hero .btn-get-started:hover {color: var(--contrast-color);background: color-mix(in srgb, var(--accent-color), transparent 15%);box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);}

/*---# About Section ---*/
.about .about-img {position: relative;margin: 60px 0 0 60px;}
.about h2{ font-family: "Outfit", sans-serif;  font-weight: 500; font-size: 30px; color: #3a4056; margin: 50px 0px 0px 0px; }
.about h3 { ffont-weight: 600; font-size: 42px; margin-bottom: 20px; padding: 10px 0px 0px 0px !important; color: #0bc9c0; }
.about p.abt-content{ color: #828282; font-size: 20px; line-height: 32px; }
.about a.btn-getstarted{  font-family: var(--nav-font); font-weight: 400; color: var(--contrast-color); background: #3a4056; font-size: 16px; padding: 20px 40px; display: inline-block; margin: 0; border-radius: 4px; transition: 0.3s; }
.about .about-img img {position: relative;z-index: 2;}

/*---# Offerring Section ---*/
.offerring {background-image: url("../img/offer-bg.png");background-position: left center;background-repeat: no-repeat;position: relative;min-height: 725px;}
.offerring-item{background-color: #fff;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.offerring-header{padding: 0px 30px; margin-top: -70px;}
.offerring-header h3{color: #3a4056; font-size: 23px; font-weight: 900;}
.offerring-header p{color: #5e6271; font-size: 16px;}
.offerring-img img {margin-top: -120px;}
.readmore-btn{margin-left: 20px;}

/*---# Advantages Section ---*/
.advantages-item{background-color: #fff; border: solid 1px #e2e2e2; border-radius: 32px;}
.advantages-header img{width: 100%}
.advantages-header{text-align: center;}
.advantages-header h3{color: #3a4056; font-size: 26px; font-weight: 900; padding: 30px 30px 10px 30px;}
.advantages-header p{color: #5e6271; font-size: 16px; padding: 0px 30px 20px 30px;}

/*---# Daily Section ---*/
.daily {background-color: #0bc9c0;background-image: url("../img/daily-bg.jpg");background-position: center center;background-repeat: no-repeat;position: relative;max-height: 320px;}
.daily h2{font-size: 30px; font-weight: 700; color: #fff;text-align: left;padding-left: 10%;}
.daily h2 span{font-weight: 900;}
.email-field{padding-top: 26px;}
.daily .email-field input{background: #07b8b0; height: 60px;max-width: 500px; width: 100%; border-radius: 60px;border: solid 1px #09a099;}
.btn-email{color: var(--contrast-color); background: #3a4056; font-size: 16px; padding: 20px 40px; display: inline-block; margin: 0; border-radius: 50px; transition: 0.3s;margin-left: 20px;}
.daily .email-field input :focus-visible{color: #3a4056}

/*---# Menu Section ---*/
#menu {padding: 24px 0px;}
.menu {text-align: center;}
.menu img{max-width: 100%; height: 80px; margin-top: 20px;}
.menu p{font-size: 18px; font-weight: 400; color: #858585; padding-top: 25px;}

/*---# Contact Section ---*/
#contact{padding: 34px 0px;}
.contact{background-color: #f8f8f8;}
.contact .info-item i {font-size: 20px;background: var(--accent-color);color: #fff;width: 56px;height: 56px;display: flex;justify-content: center;align-items: center;transition: all 0.3s ease-in-out;border-radius: 50%;border: 1px solid color-mix(in srgb, var(--accent-color), transparent 40%);margin-right: 15px;}
.bi-geo-alt::before {content: "\f3e8";}
.contact .info-item:hover i {background: #3a4056;color: var(--contrast-color);}
.contact h3{font-size: 20px; font-weight: 400; color: #3a4056;}
.contact p{font-size: 16px; font-weight: 400; color: #7f7f7f;}

 .playstore{margin-right: 20px;}
.footer-heading {text-align: center;}
.footer-heading p{ font-size: 26px; font-weight: 900; color: #3a4056; margin: 30px 0px;}
.social-links{padding: 30px 0px;}
.social-links i{font-size: 30px; padding-right: 20px;}

#menu ul{list-style-type: none; margin-top: 20px;}
#menu ul li{display: inline; position: relative; padding: 0px 30px 0px 20px;}
#menu ul li a{color: #7f7f7f;}
#menu ul li:after{content: '|';position: absolute; right: 0; color: #7f7f7f;}
#menu ul li:last-child:after{display: none;}