:root {
   --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --heading-font: "Poppins", sans-serif;
   --nav-font: "Raleway", 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: #2c4964;
   /* Color for headings, subheadings and title throughout the website */
   --accent-color: #FAA919;
   /* 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. */
   --radius-pill: 999px;
   --color-orange: #f4900c;
   --color-orange-dark: #d97a06;
   --color-gold: #ffb547;
   --shadow-sm: 0 2px 10px rgba(20, 18, 12, 0.06);
   --shadow-md: 0 12px 30px rgba(20, 18, 12, 0.10);
   --shadow-lg: 0 20px 50px rgba(20, 18, 12, 0.18);
   --shadow-orange: 0 10px 40px rgba(244, 144, 12, 0.35);
   --color-black: #15130f;
   --font-display: 'Poppins', sans-serif;
   --font-body: 'Inter', sans-serif;
   --radius-sm: 10px;
   --radius-md: 16px;
   --radius-lg: 24px;
   --radius-pill: 999px;
   --shadow-sm: 0 2px 10px rgba(20, 18, 12, 0.06);
   --shadow-md: 0 12px 30px rgba(20, 18, 12, 0.10);
   --shadow-lg: 0 20px 50px rgba(20, 18, 12, 0.18);
   --shadow-orange: 0 10px 40px rgba(244, 144, 12, 0.35);
   --color-cream: #f7f4ee;
   --color-green: #2e9e5b;
   --color-white: #ffffff;
   --color-border: #e7e2d6;
   --navy-2: #142a3d;
   --black: #0d0d0d;
   --orange: #f5901e;
   --orange-2: #f6a93a;
   --peach-bg: #fdeadb;
   --peach-text: #e8610f;
   --red: #e2364a;
   --red-bg: #fde6e9;
   --green: #28b463;
   --cream: #f7f4ee;
   --lightgray: #f1f1f3;
   --ink: #1a2330;
   --gray: #6b7280;
   --line: #e8e8ea;
   --white: #ffffff;
   --radius: 16px;
 }

 /* 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: #2c4964;
   /* The default color of the main navmenu links */
   --nav-hover-color: #FAA919;
   /* 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: #2c4964;
   /* Used for navigation links of the dropdown items in the navigation menu. */
   --nav-dropdown-hover-color: #FAA919;
   /* 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: #f1f7fc;
   --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 {
   font-family: var(--heading-font);
 }

 /* Pulsating Play Button
------------------------------*/
 .pulsating-play-btn {
   width: 94px;
   height: 94px;
   background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
   border-radius: 50%;
   display: block;
   position: relative;
   overflow: hidden;
 }

 .pulsating-play-btn:before {
   content: "";
   position: absolute;
   width: 120px;
   height: 120px;
   animation-delay: 0s;
   animation: pulsate-play-btn 2s;
   animation-direction: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: steps;
   opacity: 1;
   border-radius: 50%;
   border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
   top: -15%;
   left: -15%;
   background: rgba(198, 16, 0, 0);
 }

 .pulsating-play-btn:after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-40%) translateY(-50%);
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 15px solid #fff;
   z-index: 100;
   transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }

 .pulsating-play-btn:hover:before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-40%) translateY(-50%);
   width: 0;
   height: 0;
   border: none;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 15px solid #fff;
   z-index: 200;
   animation: none;
   border-radius: 0;
 }

 .pulsating-play-btn:hover:after {
   border-left: 15px solid var(--accent-color);
   transform: scale(20);
 }

 @keyframes pulsate-play-btn {
   0% {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }

   100% {
     transform: scale(1, 1);
     opacity: 0;
   }
 }

 /* PHP Email Form Messages
------------------------------*/
 .php-email-form .error-message {
   display: none;
   background: #df1529;
   color: #ffffff;
   text-align: left;
   padding: 15px;
   margin-bottom: 24px;
   font-weight: 600;
 }

 .php-email-form .sent-message {
   display: none;
   color: #ffffff;
   background: #059652;
   text-align: center;
   padding: 15px;
   margin-bottom: 24px;
   font-weight: 600;
 }

 .php-email-form .loading {
   display: none;
   background: var(--surface-color);
   text-align: center;
   padding: 15px;
   margin-bottom: 24px;
 }

 .php-email-form .loading:before {
   content: "";
   display: inline-block;
   border-radius: 50%;
   width: 24px;
   height: 24px;
   margin: 0 10px -6px 0;
   border: 3px solid var(--accent-color);
   border-top-color: var(--surface-color);
   animation: php-email-form-loading 1s linear infinite;
 }

 @keyframes php-email-form-loading {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

 /*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
 .header {
   color: var(--default-color);
   transition: all 0.5s;
   z-index: 997;
   background-color: var(--background-color);
 }

 .header .topbar {
   background-color: #060606;
   height: 40px;
   padding: 0;
   font-size: 14px;
   transition: all 0.5s;
 }

 .header .topbar .contact-info i {
   font-style: normal;
   color: var(--contrast-color);
 }

 .header .topbar .contact-info i a,
 .header .topbar .contact-info i span {
   padding-left: 5px;
   color: var(--contrast-color);
 }

 @media (max-width: 575px) {

   .header .topbar .contact-info i a,
   .header .topbar .contact-info i span {
     font-size: 13px;
   }
 }

 .header .topbar .contact-info i a {
   line-height: 0;
   transition: 0.3s;
 }

 .header .topbar .contact-info i a:hover {
   color: var(--contrast-color);
   text-decoration: underline;
 }

 .header .topbar .social-links a {
   color: color-mix(in srgb, var(--contrast-color), transparent 40%);
   line-height: 0;
   transition: 0.3s;
   margin-left: 20px;
 }

 .header .topbar .social-links a:hover {
   color: var(--contrast-color);
 }

 .header .branding {
   min-height: 60px;
   padding: 10px 0;
 }

 .header .logo {
   line-height: 1;
 }

 .header .logo img {
   max-height: 36px;
   margin-right: 8px;
 }

 .header .logo h1 {
   font-size: 30px;
   margin: 0;
   font-weight: 700;
   color: var(--heading-color);
 }

 .header .cta-btn,
 .header .cta-btn:focus {
   color: var(--contrast-color);
   background: var(--accent-color);
   font-size: 14px;
   padding: 8px 25px;
   margin: 0 0 0 30px;
   border-radius: 50px;
   transition: 0.3s;
 }

 .header .cta-btn:hover,
 .header .cta-btn:focus:hover {
   color: var(--contrast-color);
   background: color-mix(in srgb, var(--accent-color), transparent 15%);
 }

 @media (max-width: 1200px) {
   .header .logo {
     order: 1;
   }

   .header .cta-btn {
     order: 2;
     margin: 0 15px 0 0;
     padding: 6px 15px;
   }

   .header .navmenu {
     order: 3;
   }
 }

 .scrolled .header {
   box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
 }

 .scrolled .header .topbar {
   height: 0;
   visibility: hidden;
   overflow: hidden;
 }

 .lead-card {
   background: var(--color-black);
   border: 1px solid rgba(244, 144, 12, 0.4);
   border-radius: var(--radius-lg);
   padding: 36px 32px;
   box-shadow: var(--shadow-orange), var(--shadow-lg);
 }

 .hero-feature {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 0.92rem;
   color: #e6e2d6;
 }

 .hero-feature .icon-dot {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: rgba(244, 144, 12, 0.18);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 1px;
 }

 .hero-feature .icon-dot svg {
   width: 12px;
   height: 12px;
   color: var(--color-orange);
 }

 .hero-badges {
   display: flex;
   gap: 14px;
   margin-top: 40px;
   flex-wrap: wrap;
 }

 .hero-badge {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.16);
   padding: 9px 18px;
   border-radius: var(--radius-pill);
   font-size: 0.82rem;
   font-weight: 500;
   backdrop-filter: blur(4px);
   color: var(--color-white);
 }

 .hero-badge svg {
   width: 14px;
   height: 14px;
   color: var(--color-orange);
 }

 .hero-features {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px 28px;
   margin-bottom: 36px;
 }

 .hero {
   position: relative;
   background: linear-gradient(115deg, rgba(15, 13, 10, 0.92) 0%, rgba(15, 13, 10, 0.78) 45%, rgba(15, 13, 10, 0.55) 100%),
     url('../img/hero-bg.jpeg') center / cover no-repeat;
   color: var(--color-white);
   padding: 80px 0 60px;
 }

 .hero1 {
   position: relative;
   background: linear-gradient(115deg, rgba(15, 13, 10, 0.92) 0%, rgba(15, 13, 10, 0.78) 45%, rgba(15, 13, 10, 0.55) 100%),
     url('../img/innerbanner1.png') center / cover no-repeat;
   color: var(--color-white);
   padding: 80px 0 60px;
 }

 .hero h1 {
   color: var(--color-white);
   font-size: clamp(2rem, 3.6vw, 3.1rem);
   margin-bottom: 24px;
 }

 .hero h1 .highlight {
   color: var(--color-orange);
 }

 .form-group-custom {
   margin-bottom: 16px;
 }

 .lead-input-row {
   display: flex;
   border-radius: 20px;
   background: #262420;
   border: 1px solid #3a372f;
   overflow: hidden;
 }

 .lead-input-row input,
 .lead-input-row textarea {
   width: 100%;
   background: transparent;
   border: none;
   color: #fff;
   padding: 12px 18px;
   outline: none;
 }

 /* .lead-input-row {
   display: flex;
   gap: 0;
   margin-bottom: 16px;
   border-radius: var(--radius-pill);
   overflow: hidden;
   background: #262420;
   border: 1px solid #3a372f;
 }

 .lead-input-row input {
   flex: 1;
   background: transparent;
   border: none;
   color: var(--color-white);
   padding: 14px 20px;
 font-size: 0.92rem;
 outline: none;
 }
 */

 .lead-card .btn-primary {
   margin-top: 4px;
 }

 .btn-block {
   width: 100%;
   border-radius: 100px;
   background-color: #faa919;
 }

 .btn-primary {
   background: var(--color-orange);
   color: var(--color-black);
   box-shadow: var(--shadow-orange);
 }

 .lead-card h3 {
   color: var(--color-white);
   font-size: 1.35rem;
   margin-bottom: 10px;
 }

 .lead-card p {
   color: #b8b4a6;
   font-size: 0.92rem;
   margin-bottom: 22px;
 }

 .work-steps-list {
   counter-reset: css-counter 0;
 }

 .work-steps-list .col-12,
 .work-steps-list .col-md-6 {
   counter-increment: css-counter 1;
 }

 .work-steps-list .single-work-steps {
   text-align: center;
   padding: 0px 20px;
   margin-top: 30px;
 }

 .work-steps-list .single-work-steps .icon {
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background-color: #fff;
   position: relative;
   margin: 0 auto;
   display: inline-block;
   -webkit-box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.06);
   box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.06);
   margin-bottom: 30px;
   text-align: center;
   line-height: 175px;
   font-size: 70px;
   border: 2px dashed #faa919;
 }

 .work-steps-list .single-work-steps .icon::before {
   content: counter(css-counter);
   position: absolute;
   width: 50px;
   height: 50px;
   background: #fff;
   border: 1px solid #faab04;
   border-radius: 50px;
   color: #faab04;
   font-weight: 700;
   font-size: 18px;
   line-height: 50px;
   text-align: center;
   font-family: "Lexend", sans-serif;
   right: 0;
 }

 .work-steps-list .single-work-steps .content h4 {
   text-transform: capitalize;
 }

 .work-steps-list .single-work-steps .content p {
   font-size: 14px;
 }

 .service-item {
   position: relative;
   padding: 15px;
   background: var(--color-white);
   border-radius: 30px;
   transition: var(--transition);
 }

 .service-item:hover {
   transform: translateY(-5px);
 }

 .service-item .count {
   position: absolute;
   right: 20px;
   bottom: 15px;
   font-weight: 800;
   font-size: 40px;
   line-height: 10px;
   color: transparent;
   -webkit-text-stroke: 1px var(--accent-color);
 }

 .service-img img {
   border-radius: 20px;
   max-width: 100%;
 }

 .service-icon {
   position: absolute;
   width: 88px;
   height: 88px;
   line-height: 60px;
   text-align: center;
   background: var(--accent-color);
   border-radius: 50px 50px 50px 10px;
   border: 8px solid var(--color-white);
   margin-top: -70px;
   margin-left: -10px;
   transition: var(--transition);
 }

 .service-item:hover .service-icon {
   box-shadow: 0px 0px 0 var(--theme-color-light);
 }

 .service-icon img {
   width: 45px;
   filter: brightness(0) invert(1);
 }

 .service-content {
   margin-top: 15px;
 }

 .service-content h4 a {
   color: var(--color-dark);
   font-size: 18px;
 }

 .service-content h4 a:hover {
   color: var(--theme-color);
 }

 .service-content p {
   color: var(--body-text-color);
   margin-top: 8px;
   margin-bottom: 20px;
 }

 /* service-area 2 */
 .service-area2 .service-item {
   background: var(--color-white);
 }

 /* ============ WHY CHOOSE US ============ */
 .why-section {
   padding: 10px 0;
   background: var(--color-white);
 }

 .why-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px;
 }

 .why-card {
   border-radius: var(--radius-lg);
   padding: 25px;
 }

 .why-card.left {
   background: var(--color-cream);
 }

 .why-card.right {
   background: var(--color-black);
   color: var(--color-white);
 }

 .why-card h3 {
   font-size: 1.55rem;
   margin-bottom: 30px;
   line-height: 1.3;
 }

 .why-card.right h3 {
   color: var(--color-white);
 }

 .feature-row {
   display: flex;
   gap: 18px;
   padding: 10px 0;
   border-bottom: 1px solid var(--color-border);
 }

 .feature-row:last-child {
   border-bottom: none;
 }

 .feature-row .num-badge {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--color-orange);
   color: var(--color-black);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 0.9rem;
   flex-shrink: 0;
 }

 .feature-row h4 {
   font-size: 1.02rem;
   margin-bottom: 4px;
 }

 .feature-row p {
   font-size: 0.88rem;
   color: var(--color-text-soft);
 }

 .cost-cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 .cost-card {
   background: #262420;
   border-radius: var(--radius-md);
   padding: 12px 10px;
   border: 1px solid #34312a;
   transition: border-color .25s ease, transform .25s ease;
 }

 .cost-card:hover {
   border-color: var(--color-orange);
   transform: translateY(-3px);
 }

 .cost-card svg {
   color: var(--color-orange);
   width: 22px;
   height: 22px;
   margin-bottom: 14px;
 }

 .cost-card p {
   font-size: 0.88rem;
   color: #d6d2c4;
   line-height: 1.5;
 }

 /*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
 /* Desktop Navigation */
 @media (min-width: 1200px) {
   .navmenu {
     padding: 0;
   }

   .navmenu ul {
     margin: 0;
     padding: 0;
     display: flex;
     list-style: none;
     align-items: center;
   }

   .navmenu li {
     position: relative;
   }

   .navmenu>ul>li {
     white-space: nowrap;
     padding: 15px 14px;
   }

   .navmenu>ul>li:last-child {
     padding-right: 0;
   }

   .navmenu a,
   .navmenu a:focus {
     color: var(--nav-color);
     font-size: 15px;
     padding: 0 2px;
     font-family: var(--nav-font);
     font-weight: 400;
     display: flex;
     align-items: center;
     justify-content: space-between;
     white-space: nowrap;
     transition: 0.3s;
     position: relative;
   }

   .navmenu a i,
   .navmenu a:focus i {
     font-size: 12px;
     line-height: 0;
     margin-left: 5px;
     transition: 0.3s;
   }

   .navmenu>ul>li>a:before {
     content: "";
     position: absolute;
     width: 100%;
     height: 2px;
     bottom: -6px;
     left: 0;
     background-color: var(--nav-hover-color);
     visibility: hidden;
     width: 0px;
     transition: all 0.3s ease-in-out 0s;
   }

   .navmenu a:hover:before,
   .navmenu li:hover>a:before,
   .navmenu .active:before {
     visibility: visible;
     width: 100%;
   }

   .navmenu li:hover>a,
   .navmenu .active,
   .navmenu .active:focus {
     color: var(--nav-hover-color);
   }

   .navmenu .dropdown ul {
     margin: 0;
     padding: 10px 0;
     background: var(--nav-dropdown-background-color);
     display: block;
     position: absolute;
     visibility: hidden;
     left: 14px;
     top: 130%;
     opacity: 0;
     transition: 0.3s;
     border-radius: 4px;
     z-index: 99;
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
   }

   .navmenu .dropdown ul li {
     min-width: 200px;
   }

   .navmenu .dropdown ul a {
     padding: 10px 20px;
     font-size: 15px;
     text-transform: none;
     color: var(--nav-dropdown-color);
   }

   .navmenu .dropdown ul a i {
     font-size: 12px;
   }

   .navmenu .dropdown ul a:hover,
   .navmenu .dropdown ul .active:hover,
   .navmenu .dropdown ul li:hover>a {
     color: var(--nav-dropdown-hover-color);
   }

   .navmenu .dropdown:hover>ul {
     opacity: 1;
     top: 100%;
     visibility: visible;
   }

   .navmenu .dropdown .dropdown ul {
     top: 0;
     left: -90%;
     visibility: hidden;
   }

   .navmenu .dropdown .dropdown:hover>ul {
     opacity: 1;
     top: 0;
     left: -100%;
     visibility: visible;
   }
 }

 /* Mobile Navigation */
 @media (max-width: 1199px) {
   .mobile-nav-toggle {
     color: var(--nav-color);
     font-size: 28px;
     line-height: 0;
     margin-right: 10px;
     cursor: pointer;
     transition: color 0.3s;
   }

   .navmenu {
     padding: 0;
     z-index: 9997;
   }

   .navmenu ul {
     display: none;
     list-style: none;
     position: absolute;
     inset: 60px 20px 20px 20px;
     padding: 10px 0;
     margin: 0;
     border-radius: 6px;
     background-color: var(--nav-mobile-background-color);
     border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
     box-shadow: none;
     overflow-y: auto;
     transition: 0.3s;
     z-index: 9998;
   }

   .navmenu a,
   .navmenu a:focus {
     color: var(--nav-dropdown-color);
     padding: 10px 20px;
     font-family: var(--nav-font);
     font-size: 17px;
     font-weight: 500;
     display: flex;
     align-items: center;
     justify-content: space-between;
     white-space: nowrap;
     transition: 0.3s;
   }

   .navmenu a i,
   .navmenu a:focus i {
     font-size: 12px;
     line-height: 0;
     margin-left: 5px;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: 0.3s;
     background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
   }

   .navmenu a i:hover,
   .navmenu a:focus i:hover {
     background-color: var(--accent-color);
     color: var(--contrast-color);
   }

   .navmenu a:hover,
   .navmenu .active,
   .navmenu .active:focus {
     color: var(--nav-dropdown-hover-color);
   }

   .navmenu .active i,
   .navmenu .active:focus i {
     background-color: var(--accent-color);
     color: var(--contrast-color);
     transform: rotate(180deg);
   }

   .navmenu .dropdown ul {
     position: static;
     display: none;
     z-index: 99;
     padding: 10px 0;
     margin: 10px 20px;
     background-color: var(--nav-dropdown-background-color);
     transition: all 0.5s ease-in-out;
   }

   .navmenu .dropdown ul ul {
     background-color: rgba(33, 37, 41, 0.1);
   }

   .navmenu .dropdown>.dropdown-active {
     display: block;
     background-color: rgba(33, 37, 41, 0.03);
   }

   .mobile-nav-active {
     overflow: hidden;
   }

   .mobile-nav-active .mobile-nav-toggle {
     color: #fff;
     position: absolute;
     font-size: 32px;
     top: 15px;
     right: 15px;
     margin-right: 0;
     z-index: 9999;
   }

   .mobile-nav-active .navmenu {
     position: fixed;
     overflow: hidden;
     inset: 0;
     background: rgba(33, 37, 41, 0.8);
     transition: 0.3s;
   }

   .mobile-nav-active .navmenu>ul {
     display: block;
   }
 }

 /*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
 .footer {
   color: var(--default-color);
   background-color: var(--background-color);
   border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
   font-size: 14px;
   position: relative;
 }

 .footer .footer-top {
   padding-top: 50px;
 }

 .footer .footer-about .logo {
   line-height: 1;
   margin-bottom: 25px;
 }

 .footer .footer-about .logo img {
   max-height: 40px;
   margin-right: 6px;
 }

 .footer .footer-about .logo span {
   color: var(--heading-color);
   font-family: var(--heading-font);
   font-size: 26px;
   font-weight: 700;
   letter-spacing: 1px;
 }

 .footer .footer-about p {
   font-size: 14px;
   font-family: var(--heading-font);
 }

 .footer .social-links a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
   font-size: 16px;
   color: color-mix(in srgb, var(--default-color), transparent 20%);
   margin-right: 10px;
   transition: 0.3s;
 }

 .footer .social-links a:hover {
   color: var(--accent-color);
   border-color: var(--accent-color);
 }

 .footer h4 {
   font-size: 16px;
   font-weight: bold;
   position: relative;
   padding-bottom: 12px;
 }

 .footer .footer-links {
   margin-bottom: 30px;
 }

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

 .footer .footer-links ul i {
   padding-right: 2px;
   font-size: 12px;
   line-height: 0;
 }

 .footer .footer-links ul li {
   padding: 10px 0;
   display: flex;
   align-items: center;
 }

 .footer .footer-links ul li:first-child {
   padding-top: 0;
 }

 .footer .footer-links ul a {
   color: color-mix(in srgb, var(--default-color), transparent 30%);
   display: inline-block;
   line-height: 1;
 }

 .footer .footer-links ul a:hover {
   color: var(--accent-color);
 }

 .footer .footer-contact p {
   margin-bottom: 5px;
 }

 .footer .copyright {
   padding-top: 25px;
   padding-bottom: 25px;
   border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
 }

 .footer .copyright p {
   margin-bottom: 0;
 }

 .footer .credits {
   margin-top: 8px;
   font-size: 13px;
 }

 /*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
 #preloader {
   position: fixed;
   inset: 0;
   z-index: 999999;
   overflow: hidden;
   background: var(--background-color);
   transition: all 0.6s ease-out;
 }

 #preloader:before {
   content: "";
   position: fixed;
   top: calc(50% - 30px);
   left: calc(50% - 30px);
   border: 6px solid #ffffff;
   border-color: var(--accent-color) transparent var(--accent-color) transparent;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   animation: animate-preloader 1.5s linear infinite;
 }

 @keyframes animate-preloader {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

 /*--------------------------------------------------------------
# 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;
 }

 /*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
 @media screen and (max-width: 768px) {
   [data-aos-delay] {
     transition-delay: 0 !important;
   }

   .hero-features {
     display: grid;
     grid-template-columns: auto;
     gap: 16px 28px;
     /* margin-bottom: 36px; */
   }

   .cost-cards {
     display: grid;
     grid-template-columns: auto;
     gap: 16px;
   }
 }

 /*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
 .page-title {
   color: var(--default-color);
   position: relative;
 }

 .page-title .heading {
   padding: 80px 0;
   border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
 }

 .page-title .heading h1 {
   font-size: 38px;
   font-weight: 700;
 }

 .page-title nav {
   background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
   padding: 20px 0;
 }

 .page-title nav ol {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: 0;
   font-size: 16px;
   font-weight: 600;
 }

 .page-title nav ol li+li {
   padding-left: 10px;
   color: var(--color-cream);
 }

 .page-title nav ol li+li::before {
   content: "/";
   display: inline-block;
   padding-right: 10px;
   color: color-mix(in srgb, var(--default-color), transparent 70%);
 }

 /*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
 section,
 .section {
   color: var(--default-color);
   background-color: var(--background-color);
   padding: 60px 0;
   scroll-margin-top: 72px;
   overflow: clip;
 }

 @media (max-width: 1199px) {

   section,
   .section {
     scroll-margin-top: 60px;
   }
 }

 /*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
 .section-title {
   text-align: center;
   padding-bottom: 10px;
   position: relative;
 }

 .section-title h2 {
   font-size: 32px;
   font-weight: 500;
   margin-bottom: 20px;
   padding-bottom: 20px;
   position: relative;
 }

 .section-title h2:before {
   content: "";
   position: absolute;
   display: block;
   width: 160px;
   height: 1px;
   background: color-mix(in srgb, var(--default-color), transparent 60%);
   left: 0;
   right: 0;
   bottom: 1px;
   margin: auto;
 }

 .section-title h2::after {
   content: "";
   position: absolute;
   display: block;
   width: 60px;
   height: 3px;
   background: var(--accent-color);
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
 }

 .section-title p {
   margin-bottom: 0;
 }

 /*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
 .hero {
   width: 100%;
   min-height: calc(100vh - 112px);
   padding: 0px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .hero img {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
 }

 .hero .container {
   z-index: 3;
 }

 .hero .welcome h2 {
   margin: 0;
   font-size: 48px;
   font-weight: 700;
 }

 .hero .welcome p {
   font-size: 24px;
   margin: 0;
 }

 .hero .content {
   margin-top: 4px;
 }

 .hero .content .why-box {
   color: var(--contrast-color);
   background: var(--accent-color);
   padding: 30px;
   border-radius: 4px;
 }

 .hero .content .why-box h3 {
   color: var(--contrast-color);
   font-weight: 700;
   font-size: 34px;
   margin-bottom: 30px;
 }

 .hero .content .why-box p {
   margin-bottom: 30px;
 }

 .hero .content .why-box .more-btn {
   color: var(--contrast-color);
   background: color-mix(in srgb, var(--contrast-color), transparent 80%);
   display: inline-block;
   padding: 6px 30px 8px 30px;
   border-radius: 50px;
   transition: all ease-in-out 0.4s;
 }

 .hero .content .why-box .more-btn i {
   font-size: 14px;
 }

 .hero .content .why-box .more-btn:hover {
   background: var(--surface-color);
   color: var(--accent-color);
 }

 .hero .content .icon-box {
   text-align: center;
   border-radius: 10px;
   background: color-mix(in srgb, var(--surface-color), transparent 20%);
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
   padding: 40px 30px;
   width: 100%;
 }

 .hero .content .icon-box i {
   font-size: 40px;
   color: var(--accent-color);
 }

 .hero .content .icon-box h4 {
   font-size: 20px;
   font-weight: 700;
   margin: 10px 0 20px 0;
 }

 .hero .content .icon-box p {
   font-size: 15px;
   color: color-mix(in srgb, var(--default-color), transparent 30%);
 }

 .hero1 {
   width: 100%;
   min-height: calc(60vh - 112px);
   padding: 0px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }


 .hero1 img {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
 }

 .hero1 .container {
   z-index: 3;
 }

 .hero1 .welcome h2 {
   margin: 0;
   font-size: 48px;
   font-weight: 700;
 }

 .hero1 .welcome p {
   font-size: 24px;
   margin: 0;
 }

 .hero1 .content {
   margin-top: 4px;
 }

 /*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
 .about .content h3 {
   font-size: 2rem;
   font-weight: 700;
 }

 .about .content ul {
   list-style: none;
   padding: 0;
 }

 .about .content ul li {
   display: flex;
   align-items: flex-start;
   margin-top: 40px;
 }

 .about .content ul i {
   flex-shrink: 0;
   font-size: 48px;
   color: var(--accent-color);
   margin-right: 20px;
 }

 .about .content ul h5 {
   font-size: 18px;
   font-weight: 700;
 }

 .about .content ul p {
   font-size: 15px;
 }

 .about .content p:last-child {
   margin-bottom: 0;
 }

 .about .pulsating-play-btn {
   position: absolute;
   left: calc(50% - 47px);
   top: calc(50% - 47px);
 }

 /*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
 .stats i {
   color: var(--contrast-color);
   background-color: var(--accent-color);
   box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
   width: 54px;
   height: 54px;
   font-size: 24px;
   border-radius: 50px;
   border: 2px solid var(--background-color);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 1;
 }

 .stats .stats-item {
   background-color: var(--surface-color);
   margin-top: -27px;
   padding: 30px 30px 25px 30px;
   width: 100%;
   position: relative;
   text-align: center;
   box-shadow: 0px 2px 35px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   z-index: 0;
 }

 .stats .stats-item span {
   font-size: 32px;
   display: block;
   margin: 10px 0;
   font-weight: 700;
   color: var(--heading-color);
 }

 .stats .stats-item p {
   padding: 0;
   margin: 0;
   font-family: var(--heading-font);
   font-size: 16px;
 }

 /*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
 .services {
   background-color: #F6F6F6;
 }

 /*--------------------------------------------------------------
# Appointment Section
--------------------------------------------------------------*/
 .appointment .php-email-form {
   width: 100%;
 }

 .appointment .php-email-form .form-group {
   padding-bottom: 8px;
 }

 .appointment .php-email-form input,
 .appointment .php-email-form textarea,
 .appointment .php-email-form select {
   color: var(--default-color);
   background-color: transparent;
   border-color: color-mix(in srgb, var(--default-color), transparent 80%);
   border-radius: 0;
   box-shadow: none;
   font-size: 14px;
   padding: 10px !important;
 }

 .appointment .php-email-form input:focus,
 .appointment .php-email-form textarea:focus,
 .appointment .php-email-form select:focus {
   border-color: var(--accent-color);
 }

 .appointment .php-email-form input::placeholder,
 .appointment .php-email-form textarea::placeholder,
 .appointment .php-email-form select::placeholder {
   color: color-mix(in srgb, var(--default-color), transparent 70%);
 }

 .appointment .php-email-form input,
 .appointment .php-email-form select {
   height: 44px;
 }

 .appointment .php-email-form textarea {
   padding: 10px 12px;
 }

 .appointment .php-email-form button[type=submit] {
   background: var(--accent-color);
   border: 0;
   padding: 10px 35px;
   color: #fff;
   transition: 0.4s;
   border-radius: 50px;
 }

 .appointment .php-email-form button[type=submit]:hover {
   background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
 }

 /*--------------------------------------------------------------
# Departments Section
--------------------------------------------------------------*/
 .departments {
   overflow: hidden;
 }

 .departments .nav-tabs {
   border: 0;
 }

 .departments .nav-link {
   border: 0;
   padding: 12px 15px 12px 0;
   transition: 0.3s;
   color: var(--default-color);
   border-radius: 0;
   border-right: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
   font-weight: 600;
   font-size: 15px;
 }

 .departments .nav-link:hover {
   color: var(--accent-color);
 }

 .departments .nav-link.active {
   color: var(--accent-color);
   border-color: var(--accent-color);
   background-color: var(--background-color);
 }

 .departments .tab-pane.active {
   animation: fadeIn 0.5s ease-out;
 }

 .departments .details h3 {
   font-size: 26px;
   font-weight: 600;
   margin-bottom: 20px;
 }

 .departments .details p {
   color: color-mix(in srgb, var(--default-color), transparent 20%);
 }

 .departments .details p:last-child {
   margin-bottom: 0;
 }

 @media (max-width: 992px) {
   .departments .nav-link {
     border: 0;
     padding: 15px;
   }

   .departments .nav-link.active {
     color: var(--accent-color);
     background: var(--accent-color);
   }
 }

 /*--------------------------------------------------------------
# Doctors Section
--------------------------------------------------------------*/
 .doctors .team-member {
   background-color: var(--surface-color);
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
   position: relative;
   border-radius: 5px;
   transition: 0.5s;
   padding: 30px;
   height: 100%;
 }

 @media (max-width: 468px) {
   .doctors .team-member {
     flex-direction: column;
     justify-content: center !important;
     align-items: center !important;
   }
 }

 .doctors .team-member .pic {
   overflow: hidden;
   width: 150px;
   border-radius: 50%;
   flex-shrink: 0;
 }

 .doctors .team-member .pic img {
   transition: ease-in-out 0.3s;
 }

 .doctors .team-member:hover {
   transform: translateY(-10px);
 }

 .doctors .team-member .member-info {
   padding-left: 30px;
 }

 @media (max-width: 468px) {
   .doctors .team-member .member-info {
     padding: 30px 0 0 0;
     text-align: center;
   }
 }

 .doctors .team-member h4 {
   font-weight: 700;
   margin-bottom: 5px;
   font-size: 20px;
 }

 .doctors .team-member span {
   display: block;
   font-size: 15px;
   padding-bottom: 10px;
   position: relative;
   font-weight: 500;
 }

 .doctors .team-member span::after {
   content: "";
   position: absolute;
   display: block;
   width: 50px;
   height: 1px;
   background: color-mix(in srgb, var(--default-color), transparent 85%);
   bottom: 0;
   left: 0;
 }

 @media (max-width: 468px) {
   .doctors .team-member span::after {
     left: calc(50% - 25px);
   }
 }

 .doctors .team-member p {
   margin: 10px 0 0 0;
   font-size: 14px;
 }

 .doctors .team-member .social {
   margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: start;
   width: 100%;
 }

 @media (max-width: 468px) {
   .doctors .team-member .social {
     justify-content: center;
   }
 }

 .doctors .team-member .social a {
   background: color-mix(in srgb, var(--default-color), transparent 94%);
   transition: ease-in-out 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50px;
   width: 36px;
   height: 36px;
 }

 .doctors .team-member .social a i {
   color: color-mix(in srgb, var(--default-color), transparent 20%);
   font-size: 16px;
   margin: 0 2px;
 }

 .doctors .team-member .social a:hover {
   background: var(--accent-color);
 }

 .doctors .team-member .social a:hover i {
   color: var(--contrast-color);
 }

 .doctors .team-member .social a+a {
   margin-left: 8px;
 }

 /*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
 .faq .faq-container .faq-item {
   background-color: var(--surface-color);
   position: relative;
   padding: 20px;
   margin-bottom: 15px;
   border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
   border-radius: 5px;
   overflow: hidden;
 }

 .faq .faq-container .faq-item:last-child {
   margin-bottom: 0;
 }

 .faq .faq-container .faq-item h3 {
   font-weight: 500;
   font-size: 18px;
   line-height: 24px;
   margin: 0 30px 0 0;
   transition: 0.3s;
   cursor: pointer;
   display: flex;
   align-items: center;
 }

 .faq .faq-container .faq-item h3 .num {
   color: var(--accent-color);
   padding-right: 5px;
 }

 .faq .faq-container .faq-item h3:hover {
   color: var(--accent-color);
 }

 .faq .faq-container .faq-item .faq-content {
   display: grid;
   grid-template-rows: 0fr;
   transition: 0.3s ease-in-out;
   visibility: hidden;
   opacity: 0;
 }

 .faq .faq-container .faq-item .faq-content p {
   margin-bottom: 0;
   overflow: hidden;
 }

 .faq .faq-container .faq-item .faq-toggle {
   position: absolute;
   top: 20px;
   right: 20px;
   font-size: 16px;
   line-height: 0;
   transition: 0.3s;
   cursor: pointer;
 }

 .faq .faq-container .faq-item .faq-toggle:hover {
   color: var(--accent-color);
 }

 .faq .faq-container .faq-active {
   background-color: var(--accent-color);
   border-color: var(--accent-color);
   color: var(--contrast-color);
 }

 .faq .faq-container .faq-active h3,
 .faq .faq-container .faq-active h3:hover {
   color: var(--contrast-color);
 }

 .faq .faq-container .faq-active .faq-content {
   grid-template-rows: 1fr;
   visibility: visible;
   opacity: 1;
   padding-top: 10px;
 }

 .faq .faq-container .faq-active .faq-toggle {
   transform: rotate(90deg);
   color: var(--accent-color);
 }

 /*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
 #testimonials {
   background-color: var(--color-cream);
 }

 .testimonials .info h3 {
   font-weight: 700;
   font-size: 32px;
 }

 .testimonials .swiper {
   box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.05);
   background-color: var(--surface-color);
 }

 .testimonials .testimonials-carousel,
 .testimonials .testimonials-slider {
   overflow: hidden;
 }

 .testimonials .testimonial-item {
   box-sizing: content-box;
   min-height: 200px;
   position: relative;
   margin: 30px;
 }

 .testimonials .testimonial-item .testimonial-img {
   width: 90px;
   height: 90px;
   border-radius: 50px;
   border: 6px solid var(--background-color);
   margin-right: 10px;
 }

 .testimonials .testimonial-item h3 {
   font-size: 18px;
   font-weight: bold;
   margin: 10px 0 5px 0;
 }

 .testimonials .testimonial-item h4 {
   color: color-mix(in srgb, var(--default-color), transparent 50%);
   font-size: 14px;
   margin: 0;
 }

 .testimonials .testimonial-item .stars {
   margin: 10px 0;
 }

 .testimonials .testimonial-item .stars i {
   color: #ffc107;
   margin: 0 1px;
 }

 .testimonials .testimonial-item .quote-icon-left,
 .testimonials .testimonial-item .quote-icon-right {
   color: color-mix(in srgb, var(--accent-color), transparent 60%);
   font-size: 26px;
   line-height: 0;
 }

 .testimonials .testimonial-item .quote-icon-left {
   display: inline-block;
   left: -5px;
   position: relative;
 }

 .testimonials .testimonial-item .quote-icon-right {
   display: inline-block;
   right: -5px;
   position: relative;
   top: 10px;
   transform: scale(-1, -1);
 }

 .testimonials .testimonial-item p {
   font-style: italic;
   margin: 15px auto 15px auto;
 }

 .testimonials .swiper-wrapper {
   height: auto;
 }

 .testimonials .swiper-pagination {
   margin-top: 20px;
   margin-bottom: 20px;
   position: relative;
 }

 .testimonials .swiper-pagination .swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   background-color: color-mix(in srgb, var(--default-color), transparent 85%);
   opacity: 1;
   border: none;
 }

 .testimonials .swiper-pagination .swiper-pagination-bullet-active {
   background-color: var(--accent-color);
 }

 @media (max-width: 767px) {

   .testimonials .testimonials-carousel,
   .testimonials .testimonials-slider {
     overflow: hidden;
   }

   .testimonials .testimonial-item {
     margin: 15px;
   }
 }

 /*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
 .gallery .gallery-item {
   position: relative;
   overflow: hidden;
   margin: 3px;
   border-radius: 10px;
   height: 250px;
   /* Change as needed */
 }

 .gallery .gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: all .4s ease-in-out;
 }

 .gallery .gallery-item:hover img {
   transform: scale(1.1);
 }

 @media (max-width: 991px) {
   .gallery .gallery-item {
     height: 220px;
   }
 }

 @media (max-width: 767px) {
   .gallery .gallery-item {
     height: 180px;
   }
 }

 /*.gallery .gallery-item {
  overflow: hidden;
      margin: 3px;
    border-radius: 10px; color: #fff;
}
.gallery .gallery-item img {
  transition: all ease-in-out 0.4s;
}

.gallery .gallery-item:hover img {
  transform: scale(1.1);
}*/

 .imgsize {
   height: 177px !important;
   width: 100%;
 }

 #gallery {
   background-color: #000;
 }

 #gallery h2 {
   color: #fff;
 }

 /*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
 .contact .info-item+.info-item {
   margin-top: 40px;
 }

 .contact .info-item i {
   color: var(--contrast-color);
   background: var(--accent-color);
   font-size: 20px;
   width: 44px;
   height: 44px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50px;
   transition: all 0.3s ease-in-out;
   margin-right: 15px;
 }

 .contact .info-item h3 {
   padding: 0;
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 5px;
 }

 .contact .info-item p {
   padding: 0;
   margin-bottom: 0;
   font-size: 14px;
 }

 .contact .php-email-form {
   height: 100%;
 }

 .contact .php-email-form input[type=text],
 .contact .php-email-form input[type=email],
 .contact .php-email-form textarea {
   font-size: 14px;
   padding: 10px 15px;
   box-shadow: none;
   border-radius: 0;
   color: var(--default-color);
   background-color: color-mix(in srgb, var(--background-color), transparent 50%);
   border-color: color-mix(in srgb, var(--default-color), transparent 80%);
 }

 .contact .php-email-form input[type=text]:focus,
 .contact .php-email-form input[type=email]:focus,
 .contact .php-email-form textarea:focus {
   border-color: var(--accent-color);
 }

 .contact .php-email-form input[type=text]::placeholder,
 .contact .php-email-form input[type=email]::placeholder,
 .contact .php-email-form textarea::placeholder {
   color: color-mix(in srgb, var(--default-color), transparent 70%);
 }

 .contact .php-email-form button[type=submit] {
   color: var(--contrast-color);
   background: var(--accent-color);
   border: 0;
   padding: 10px 36px;
   transition: 0.4s;
   border-radius: 50px;
 }

 .contact .php-email-form button[type=submit]:hover {
   background: color-mix(in srgb, var(--accent-color), transparent 20%);
 }

 .img-responsive {
   width: 100%;
   height: auto;
 }

 /*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
 .starter-section {
   /* Add your styles here */
 }

 .contact-icon,
 .foot-title-icon {
   width: 54px;
   height: 54px;
   border: 1px solid #1f1f1f;
   border-radius: 12px;
   display: grid;
   place-items: center;
   color: var(--orange);
   font-size: 1.8rem;
   background: #090909
 }

 .footer-heading {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin: 0 0 1.4rem;
   font-size: 1.65rem
 }

 .foot-services {
   display: grid;
   grid-template-columns: 1fr 1.25fr;
   gap: 0 1.6rem;
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .foot-services li {
   display: flex;
   align-items: flex-start;
   border-bottom: 1px solid #151515;
   padding: .72rem 0;
   color: #ddd;
   transition: .3s ease;
 }

 .foot-services li::before {
   content: '✓';
   color: var(--orange);
   border: 1px solid var(--orange);
   border-radius: 50%;
   display: grid;
   place-items: center;
   width: 22px;
   min-width: 22px;
   height: 22px;
   margin-right: .7rem;
   font-size: .8rem;
   flex-shrink: 0;
   transition: .3s ease;
 }

 .foot-services li a {
   display: block;
   color: #ddd;
   text-decoration: none;
   transition: .3s ease;
 }

 /* Hover */
 .foot-services li:hover a {
   color: var(--orange);
 }

 .foot-services li:hover::before {
   background: var(--orange);
   color: #fff;
   border-color: var(--orange);
 }

 /*.foot-services{display:grid;
  grid-template-columns:1fr 1.25fr;gap:0 1.6rem;list-style:none;
  margin:0;padding:0}.foot-services li
  {border-bottom:1px solid #151515;padding:.72rem 0;color:#ddd; 
  }
.foot-services li:before{content:'✓';color:var(--orange);border:1px solid var(--orange);border-radius:50%;display:inline-grid;place-items:center;width:22px;height:22px;margin-right:.7rem;font-size:.8rem}*/

 .contact-row {
   display: grid;
   grid-template-columns: 64px 1fr;
   gap: 1rem;
   align-items: center;
   margin: 1.4rem 0;
   color: #e5e5e5
 }

 .footer-bottom {
   border: 1px solid #242424;
   border-radius: 14px;
   margin-top: 1.4rem;
   padding: 1.2rem 1.8rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   color: #ddd
 }

 .footer-links {
   display: flex;
   gap: 2rem;
   align-items: center
 }

 .footer-links span:before {
   content: '›';
   color: var(--orange);
   font-size: 1.5rem;
   margin-right: .75rem
 }

 .developer b {
   color: var(--orange);
   font-weight: 900
 }

 @media (max-width:900px) {
   .feature-strip .container {
     grid-template-columns: 1fr 1fr
   }

   .footer-card {
     grid-template-columns: 1fr
   }

   .footer-card>div+div {
     border-left: 0;
     border-top: 1px solid #242424;
     padding-left: 0;
     padding-top: 2rem
   }

   .footer-bottom {
     flex-direction: column;
     align-items: flex-start
   }

   .footer-links {
     flex-direction: column;
     align-items: flex-start;
     gap: .5rem
   }

   .foot-services {
     grid-template-columns: 1fr
   }

   .topbar {
     display: none
   }

   .menu {
     display: none
   }

   .hamb {
     display: block
   }

   .hero {
     padding: 4rem 0 6rem
   }

   .hero-grid,
   .split,
   .service-wrap,
   .solution {
     grid-template-columns: 1fr
   }

   .trust {
     position: static;
     transform: none;
     margin-top: -3rem
   }

   .trust .container,
   .pricing,
   .system-row {
     grid-template-columns: 1fr
   }

   .service-grid,
   .gallery {
     grid-template-columns: repeat(2, 1fr)
   }

   .steps-grid {
     grid-template-columns: 1fr
   }

   .plan.featured {
     transform: none
   }

   .foot {
     grid-template-columns: 1fr
   }

   .copyright {
     flex-direction: column;
     gap: .7rem
   }
 }

 @media (max-width:560px) {
   .feature-strip .container {
     grid-template-columns: 1fr
   }

   .footer-card {
     padding: 1.2rem
   }

   .footer-logo {
     font-size: 1.15rem
   }

   .footer-heading {
     font-size: 1.25rem
   }

   .contact-row {
     grid-template-columns: 50px 1fr
   }

   .contact-icon,
   .foot-title-icon,
   .socials a {
     width: 46px;
     height: 46px
   }

   .footer-bottom {
     padding: 1rem
   }

   section {
     padding: 3.5rem 0
   }

   .hero h1 {
     font-size: 2.25rem
   }

   .lead-card {
     padding: 1.25rem
   }

   .service-grid,
   .gallery,
   .problem-grid {
     grid-template-columns: 1fr
   }

   .photo,
   .shot {
     height: 185px
   }

   .card {
     padding: 1.25rem
   }

   .pricing {
     gap: 1rem
   }

   .foot ul {
     columns: 1
   }
 }

 footer {
   background: #030303;
   color: #fff;
   font-size: 12px;
   padding: 3.5rem 0 1.4rem;
 }

 .footer-card {
   border: 1px solid #242424;
   border-radius: 22px;
   padding: 2.2rem;
   display: grid;
   grid-template-columns: 1.25fr 1.55fr 1fr;
   gap: 2.2rem;
 }

 .footer-logo {
   display: flex;
   align-items: center;
   gap: .75rem;
   margin-bottom: 1.5rem;
   font-weight: 950;
   text-transform: uppercase;
   font-size: 1.65rem;
   letter-spacing: .03em;
 }

 .footer-card p {
   color: #ddd;
   margin: 0 0 1.4rem;
   line-height: 1.75;
 }

 .socials {
   display: flex;
   gap: 1rem
 }

 .socials a,
 .contact-icon,
 .foot-title-icon {
   width: 54px;
   height: 54px;
   border: 1px solid #1f1f1f;
   border-radius: 12px;
   display: grid;
   place-items: center;
   color: var(--orange);
   font-size: 1.8rem;
   background: #090909
 }

 .footer-heading {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin: 0 0 1.4rem;
   font-size: 1.65rem
 }

 .foot-services {
   display: grid;
   grid-template-columns: 1fr 1.25fr;
   gap: 0 1.6rem;
   list-style: none;
   margin: 0;
   padding: 0
 }

 .foot-services li {
   border-bottom: 1px solid #151515;
   padding: .72rem 0;
   color: #ddd
 }

 .foot-services li:before {
   content: '✓';
   color: var(--orange);
   border: 1px solid var(--orange);
   border-radius: 50%;
   display: inline-grid;
   place-items: center;
   width: 22px;
   height: 22px;
   margin-right: .7rem;
   font-size: .8rem
 }

 .contact-row {
   display: grid;
   grid-template-columns: 64px 1fr;
   gap: 1rem;
   align-items: center;
   margin: 1.4rem 0;
   color: #e5e5e5
 }

 .footer-bottom {
   border: 1px solid #242424;
   border-radius: 14px;
   margin-top: 1.4rem;
   padding: 1.2rem 1.8rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   color: #ddd
 }

 .footer-links {
   display: flex;
   gap: 2rem;
   align-items: center
 }

 .footer-links span:before {
   content: '›';
   color: var(--orange);
   font-size: 1.5rem;
   margin-right: .75rem
 }

 .developer b {
   color: var(--orange);
   font-weight: 900
 }

 @media (max-width: 900px) {
   .feature-strip .container {
     grid-template-columns: 1fr 1fr
   }

   .footer-card {
     grid-template-columns: 1fr
   }

   .footer-card>div+div {
     border-left: 0;
     border-top: 1px solid #242424;
     padding-left: 0;
     padding-top: 2rem
   }

   .footer-bottom {
     flex-direction: column;
     align-items: flex-start
   }

   .footer-links {
     flex-direction: column;
     align-items: flex-start;
     gap: .5rem
   }

   .foot-services {
     grid-template-columns: 1fr
   }

   .topbar {
     display: none
   }

   .menu {
     display: none
   }

   .hamb {
     display: block
   }


   .hero {
     padding: 4rem 0 6rem
   }

   .hero-grid,
   .split,
   .service-wrap,
   .solution {
     grid-template-columns: 1fr
   }

   .trust {
     position: static;
     transform: none;
     margin-top: -3rem
   }

   .trust .container,
   .pricing,
   .system-row {
     grid-template-columns: 1fr
   }

   .service-grid,
   .gallery {
     grid-template-columns: repeat(2, 1fr)
   }

   .steps-grid {
     grid-template-columns: 1fr
   }

   .plan.featured {
     transform: none
   }

   .foot {
     grid-template-columns: 1fr
   }

   .copyright {
     flex-direction: column;
     gap: .7rem
   }
 }

 @media (max-width: 560px) {
   .feature-strip .container {
     grid-template-columns: 1fr
   }

   .footer-card {
     padding: 1.2rem
   }

   .footer-logo {
     font-size: 1.15rem
   }

   .footer-heading {
     font-size: 1.25rem
   }

   .contact-row {
     grid-template-columns: 50px 1fr
   }

   .contact-icon,
   .foot-title-icon,
   .socials a {
     width: 46px;
     height: 46px
   }

   .footer-bottom {
     padding: 1rem
   }

   section {
     padding: 3.5rem 0
   }

   .hero h1 {
     font-size: 2.25rem
   }

   .lead-card {
     padding: 1.25rem
   }

   .service-grid,
   .gallery,
   .problem-grid {
     grid-template-columns: 1fr
   }

   .photo,
   .shot {
     height: 185px
   }

   .card {
     padding: 1.25rem
   }

   .pricing {
     gap: 1rem
   }

   .foot ul {
     columns: 1
   }
 }

 .foot-services li::before {
   content: "✓";
   color: var(--accent-color);
   display: inline-grid;
   width: 22px;
   height: 22px;
   margin-right: 0.7rem;
   font-size: 0.8rem;
   border: 1px solid var(--accent-color);
   border-radius: 50%;
   place-items: center;
 }

 .footer-links span::before {
   content: "›";
   color: var(--accent-color);
   font-size: 1.5rem;
   margin-right: 0.75rem;
 }

 /* ===== Pricing ===== */
 section.pricing {
   padding: 80px 0;
   background: var(--color-cream);
   text-align: center;
 }

 .pricing h2 {
   font-size: 2.1rem;
   color: var(--accent-color);
   margin-bottom: 10px;
 }

 .pricing .sub {
   color: var(--gray);
   margin-bottom: 50px;
   font-size: 0.95rem;
 }

 .price-grid {
   text-align: left;
   margin-bottom: 50px;
 }

 .price-card {
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 30px 28px;
   position: relative;
   background: #fff;
 }

 .price-card.featured {
   border: 2px solid var(--orange);
   box-shadow: 0 30px 50px -25px rgba(245, 144, 30, .35);
 }

 .price-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 18px;
 }

 .price-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--peach-bg);
   color: var(--peach-text);
   font-weight: 700;
   font-size: 0.72rem;
   padding: 6px 14px;
   border-radius: 999px;
   text-transform: uppercase;
   letter-spacing: .03em;
 }

 .price-badge-ic {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   border: 1.5px solid var(--orange-2);
   color: var(--orange-2);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.95rem;
 }

 .price-card h3 {
   font-size: 1.3rem;
   color: var(--ink);
   margin-bottom: 4px;
 }

 .price-card .tagline {
   font-size: 0.85rem;
   color: var(--gray);
   margin-bottom: 22px;
 }

 .price-card ul {
   display: grid;
   gap: 13px;
   margin-bottom: 26px;
 }

 .price-card ul li {
   display: flex;
   gap: 10px;
   font-size: 0.87rem;
   color: var(--ink);
   align-items: flex-start;
 }

 .price-card ul li .ck {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: var(--green);
   color: #fff;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.6rem;
   margin-top: 2px;
   font-weight: 800;
 }

 .price-amount {
   font-size: 2.3rem;
   font-weight: 800;
   color: var(--orange);
   margin-bottom: 2px;
 }

 .price-amount span {
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--gray);
 }

 .price-freq {
   font-size: 0.8rem;
   color: var(--gray);
   margin-bottom: 22px;
   text-align: center;
 }

 .price-card .btn-outline-red,
 .price-card .btn-red {
   width: 100%;
   text-align: center;
   border-radius: 999px;
   padding: 13px;
 }

 .guarantee-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
   padding-top: 10px;
 }

 .guarantee-row .g {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   font-size: 0.8rem;
   color: var(--ink);
   font-weight: 700;
 }

 .guarantee-row .g .ic {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--red-bg);
   color: var(--red);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
 }

 .guarantee-row .g small {
   color: var(--gray);
   font-weight: 400;
   font-size: 0.76rem;
 }


 /* ===== CTA / energy solution ===== */
 section.cta-solution {
   padding: 80px 0;
   background: var(--peach-bg);
 }

 .cta-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
 }

 .cta-grid h2 {
   font-size: 2.2rem;
   color: var(--ink);
   margin-bottom: 14px;
   line-height: 1.25;
 }

 .cta-grid h2 .accent {
   color: var(--orange);
 }

 .cta-rule {
   width: 50px;
   height: 3px;
   background: var(--orange);
   margin-top: 14px;
 }

 .cta-grid>div:first-child>p.lead {
   color: var(--gray);
   margin-bottom: 24px;
   max-width: 460px;
   font-size: 0.95rem;
 }

 .challenge-box {
   background: #fff;
   border-radius: var(--radius);
   padding: 24px 26px;
   border: 1px solid var(--line);
   margin-bottom: 18px;
   box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .25);
 }

 .challenge-box h4 {
   font-size: .95rem;
   color: var(--ink);
   margin-bottom: 16px;
 }

 .challenge-box .item {
   display: flex;
   align-items: flex-start;
   /* instead of center */
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid var(--line);
 }

 .challenge-box .item:last-child {
   border-bottom: none;
 }

 .challenge-box .item .ic {
   flex: 0 0 22px;
   font-size: 1.05rem;
   line-height: 1.5;
 }

 .challenge-box .item .text {
   flex: 1;
   font-size: .88rem;
   line-height: 1.6;
   color: var(--ink);
 }

 .challenge-box .item .text b {
   color: var(--red);
   font-weight: 700;
   margin-right: 4px;
 }

 /*.challenge-box{
    background:#fff; border-radius:var(--radius); padding:24px 26px; border:1px solid var(--line); margin-bottom:18px;
    box-shadow:0 18px 40px -28px rgba(0,0,0,.25);
  }
  .challenge-box h4{font-size:0.95rem; color:var(--ink); margin-bottom:16px;}
  .challenge-box .item{display:flex; gap:12px; align-items:center; padding:10px 0; font-size:0.88rem; color:var(--ink); border-bottom:1px solid var(--line);}
  .challenge-box .item:last-child{border-bottom:none;}
  .challenge-box .item .ic{color:var(--red); flex-shrink:0; font-size:1.05rem;}
  .challenge-box .item b{color:var(--red); font-weight:700;}
*/
 .solve-note {
   background: var(--peach-bg);
   padding: 16px 20px;
   border-radius: 10px;
   display: flex;
   gap: 12px;
   align-items: flex-start;
   font-size: 0.88rem;
   color: var(--ink);
   margin-bottom: 24px;
 }

 .solve-note .ic {
   color: var(--orange);
   flex-shrink: 0;
   margin-top: 2px;
 }

 .solve-note b {
   color: var(--orange);
 }

 .cta-btn-row {
   margin-bottom: 30px;
 }

 .cta-btn-row .btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
 }

 .perks-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   margin-top: 6px;
 }

 .perk {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
   font-size: 0.78rem;
   color: var(--ink);
 }

 .perk .ic {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--red-bg);
   color: var(--red);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
 }

 .perk b {
   display: block;
   font-weight: 700;
   margin-bottom: 2px;
   font-size: 0.82rem;
 }

 .perk span.desc {
   color: var(--gray);
   font-size: 0.75rem;
 }

 .house-illustration-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .rating-row {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 22px;
   font-size: 0.85rem;
   color: var(--gray);
 }

 .rating-row .stars {
   color: var(--orange);
   letter-spacing: 1px;
 }


 steps {
   background: #fff
 }

 .steps-grid {
   display: grid;
   grid-template-columns: .85fr repeat(2, 1fr);
   gap: 1rem
 }

 .steps-grid .ico img {
   width: 50%;
   height: auto;
 }

 .step-title {
   font-size: 2.4rem;
   font-weight: 950;
   line-height: 1.1;
   padding: 1.4rem
 }

 .step {
   background: var(--cream);
   padding: 1.6rem;
   border-radius: 4px;
   min-height: 150px
 }

 .step b {
   display: block;
   margin: .8rem 0 .35rem
 }

 .system {
   text-align: center
 }

 .system-row {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 1.3rem;
   margin-top: 2rem
 }

 .circle {
   width: 88px;
   height: 88px;
   border-radius: 50%;
   background: #fff;
   box-shadow: var(--shadow);
   display: grid;
   place-items: center;
   margin: 0 auto 1rem;
   font-size: 2rem;
   position: relative
 }

 .circle small {
   position: absolute;
   top: -6px;
   right: 3px;
   background: #fff;
   border: 1px solid #f5d69d;
   color: var(--orange);
   width: 26px;
   height: 26px;
   border-radius: 50%;
   font-size: .85rem;
   display: grid;
   place-items: center
 }

 .work-steps-list .row {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }

 /*
.work-steps-list .row > div{
    width: 20%;   
    max-width: 20%;
    padding: 15px;
}
*/
 .single-work-steps {
   height: 100%;
 }

 .icon img {
   max-width: 100%;
   height: auto;
 }


 .accent {
   color: var(--accent-color);
 }


 /***

====================================================================
    Work Section
====================================================================

***/
 .working-section {
   position: relative;
   padding-bottom: 80px;
 }

 @media (max-width: 991.98px) {
   .working-section {
     padding-bottom: 40px;
   }
 }

 .working-section .bg-image {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
   opacity: 0.03;
   pointer-events: none;
 }

 .working-section .bg-image img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
 }

 .working-section .shape-1 {
   position: absolute;
   bottom: 20px;
   right: -700px;
   pointer-events: none;
 }

 .working-section .shape-2 {
   position: absolute;
   top: -30px;
   right: 100px;
 }

 @media (max-width: 1199.98px) {
   .working-section .shape-2 {
     display: none;
   }
 }

 .working-section .shape-3 {
   position: absolute;
   bottom: 0;
   right: 20px;
 }

 @media (max-width: 1199.98px) {
   .working-section .shape-3 {
     display: none;
   }
 }

 .working-section .working-outer {
   position: relative;
 }

 .working-section .working-outer .shape-line {
   position: absolute;
   top: 70px;
   left: 130px;
   z-index: 0;
 }

 @media (max-width: 1199.98px) {
   .working-section .working-outer .shape-line {
     display: none;
   }
 }

 .working-block .work-item {
   margin-bottom: 40px;
   text-align: center;
 }

 .working-block .work-item .image {
   border-radius: 50%;
   padding: 9px;
   width: 150px;
   height: 150px;
   text-align: center;
   margin: 0 auto;
   position: relative;
   z-index: 0;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
   position: relative;
   z-index: 1;
 }

 .working-block .work-item .image:before {
   position: absolute;
   left: 0;
   top: 0;
   height: 150px;
   width: 150px;
   border-radius: 200px 200px;
   z-index: -1;
   border: 10px solid var(--accent-color);
   border-right-color: #eeeeee;
   border-bottom-color: #eeeeee;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
   content: "";
 }

 .working-block .work-item .image img {
   border-radius: 100%;
   width: 100%;
 }

 .working-block .work-item .image .working-count {
   border: 2px solid #fff;
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 50px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   border-radius: 50%;
   font-size: 20px;
   color: var(--background-color);
   background-color: var(--color-gold);
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
 }

 .working-block .work-item .content .working-title {
   margin-top: 30px;
   margin-bottom: 10px;
 }

 .working-block .work-item .content .working-details {
   margin: 0;
   padding: 0px 10px;
   font-size: 14px;
 }

 .working-block .work-item:hover .image:before {
   border-color: var(--accent-color);
   border-right-color: #eeeeee;
   border-bottom-color: #eeeeee;
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }

 .working-block .work-item:hover .image .working-count {
   -webkit-transform: rotateY(360deg);
   transform: rotateY(360deg);
   color: var(--black);
   background-color: var(--accent-color);
 }

 .working-block:nth-child(even) .work-item {
   padding-top: 40px;
 }

 @media (max-width: 1199.98px) {
   .working-block .work-item {
     width: 100%;
   }

   .working-block .work-item .content .working-details {
     padding: 0px 0px;
   }

   .working-block:nth-child(even) .work-item {
     padding-top: 0px;
   }
 }

 @media (max-width: 575.98px) {
   .working-block .work-item {
     width: 100%;
   }
 }

 .features-section-six {
   position: relative;
   padding: 120px 0 90px;
   z-index: 1;
 }

 .feature-block-nine {
   position: relative;
   margin-bottom: 30px;
   z-index: 1;
 }

 .feature-block-nine .inner-box {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   border: 1px solid var(--theme-color1);
   border-radius: 10px;
   overflow: hidden;
   height: 100%;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
   -webkit-box-shadow: 0 10px 60px rgba(0, 0, 0, 0.07);
   box-shadow: 0 10px 60px rgba(0, 0, 0, 0.07);
 }

 .feature-block-nine .inner-box:hover {
   -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
   -webkit-transform: translateY(-10px);
   transform: translateY(-10px);
 }

 .feature-block-nine .inner-box:hover .image img {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }

 .feature-block-nine .icon-box {
   position: relative;
   background-color: var(--accent-color);
   min-width: 110px;
   text-align: center;
   padding: 25px 15px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
 }

 .feature-block-nine .icon-box .icon {
   display: block;
   color: #ffffff;
   font-size: 64px;
   margin-top: 30px;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
 }

 .feature-block-nine .icon-box .count {
   font-size: 40px;
   line-height: 1em;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
   color: transparent;
   -webkit-text-stroke-width: 0.5px;
   -webkit-text-stroke-color: #fff;
 }

 .feature-block-nine .content-box {
   position: relative;
   padding: 20px 20px;
 }

 .feature-block-nine .content-box .title {
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 15px;
 }

 .feature-block-nine .content-box .title a {
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
 }

 .feature-block-nine .content-box .title a:hover {
   color: var(--theme-color1);
 }

 .feature-block-nine .content-box .text {
   font-size: 14px;
   color: #000;
 }

 .feature-block-nine:hover .icon-box .count {
   color: #fff;
 }


 .demo-wrap {
   display: flex;
   align-items: center;
   flex-flow: column;
   justify-content: center;
   padding-top: 2em;
   width: 100%;
 }

 .demo-header {
   padding-right: 1em;
   padding-left: 1em;
   text-align: center;

   h1,
   p {
     margin-bottom: 0;
   }

   p {
     font-size: 1.5rem;
   }
 }

 @media (min-width: 62em) {
   .demo-wrap {
     padding-top: 0;
     height: 100vh;
   }
 }

 /* --- Pricing Plans --- */

 .pricing-plans {
   padding: 10px;
   width: 100%;
 }

 .pricing-tables {
   display: flex;
   flex-flow: column;
   padding-top: 1em;
 }

 .pricing-plan {
   background-color: #f6f6f6;
   border: 2px solid #ffeed0;
   border-bottom: 2px solid #ffeed0;
   display: block;
   padding: 1em 0;
   text-align: center;
   width: 100%;
 }

 .pricing-plan:first-child,
 .pricing-plan:last-child {
   background-color: #ffeed0;
 }

 .pricing-plan:first-child {
   border-bottom: 0;
 }

 .pricing-plan:last-child {
   border-top: 0;
 }

 .pricing-plan:nth-child(2) {
   border-bottom: 0;
 }

 .no-flexbox .pricing-plan {
   float: left;
 }

 .plan-title {
   font-size: 1em;
   letter-spacing: -0.05em;
   margin: 0;
   padding: 4px;
   text-transform: uppercase;
 }

 .plan-cost {
   background-color: white;
   color: #77b9dd;
   font-size: 1.25em;
   font-weight: 700;
   padding: 1.25em 1em;
   text-transform: uppercase;
 }

 .plan-cost span {
   display: none;
 }

 .pricing-plan p {
   color: #030303;
 }

 .plan-price {
   font-size: 3em;
   letter-spacing: -0.05em;
   color: #faa919 !important;
   line-height: 1;
   margin-bottom: 0;
 }

 .plan-type {
   border: 0.313em solid #faa919;
   color: #000;
   display: inline-block;
   font-size: 0.75em;
   margin: 0.75em 0 0 0.75em;
   padding: 0.3em 0.4em 0.25em;
   width: auto;
 }

 .plan-features {
   margin: 0;
   text-align: left;
   padding: 2em 1em 1em;
 }

 .plan-features li {
   list-style-type: none;
   border-bottom: 1px solid #ddd;
   margin-bottom: 0.5em;
   padding-bottom: 0.75em;
   color: #555;
   display: block;
   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.8em;
   font-weight: normal;
   line-height: 1.3;

 }

 .plan-features li::before {
   content: "✓";
   color: var(--accent-color);
   display: inline-grid;
   width: 22px;
   height: 22px;
   margin-right: 0.7rem;
   font-size: 0.8rem;
   border: 1px solid var(--accent-color);
   border-radius: 50%;
   font-weight: bold;
   place-items: center;
 }

 .plan-features span::before {
   content: "›";
   color: var(--accent-color);
   font-size: 1.5rem;
   margin-right: 0.75rem;
 }

 .plan-features li:last-child {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
 }

 .featured-plan .plan-features li {
   color: #000;
 }

 .featured-plan .plan-features li::before {
   content: "✓";
   color: var(--black);
   display: inline-grid;
   width: 22px;
   height: 22px;
   margin-right: 0.7rem;
   font-size: 0.8rem;
   border: 1px solid var(--black);
   border-radius: 50%;
   font-weight: bold;
   place-items: center;
 }

 .featured-plan .plan-features span::before {
   content: "›";
   color: var(--black);
   font-size: 1.5rem;
   margin-right: 0.75rem;
 }

 .plan-features h3 {}

 .plan-features i {
   font-size: 1.5em;
 }

 .plan-features i.icon-ok-squared {
   color: #3aa14d;
 }

 .plan-features i.icon-cancel-circled {
   color: darkRed;
 }

 .btn-plan {
   background-color: #1b8dc8;
   color: white;
   max-width: 12em;
 }

 .cta {
   background-color: #6cb507;
 }

 .featured-plan {
   background-color: var(--accent-color);
   border-top: 5px solid var(--color-orange-dark);
   border-right: 0 solid transparent;
   border-bottom: 5px solid var(--color-orange-dark);
   border-left: 0 solid transparent;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   order: -1;
   position: relative;
   transition: transform 400ms ease;
 }

 .featured-plan {
   .plan-title {
     color: #000;
   }
 }

 .featured-ribbon {
   width: 200px;
   background: #9b0000;
   position: absolute;
   top: 15px;
   left: -60px;
   text-align: center;
   line-height: 35px;
   letter-spacing: 0.01em;
   font-size: 0.65em;
   font-weight: 700;
   color: white;
   text-transform: uppercase;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   /* Custom styles */
   /* Different positions */
 }

 .featured-ribbon.sticky {
   position: fixed;
 }

 .featured-ribbon.shadow {
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 }

 .featured-ribbon.top-left {
   top: 25px;
   left: -50px;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
 }

 .featured-ribbon.top-right {
   top: 25px;
   right: -50px;
   left: auto;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
 }

 .featured-ribbon.bottom-left {
   top: auto;
   bottom: 25px;
   left: -50px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
 }

 .featured-ribbon.bottom-right {
   top: auto;
   right: -50px;
   bottom: 25px;
   left: auto;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
 }

 @media (min-width: 400px) {
   .pricing-plans {
     padding-right: 2em;
     padding-left: 2em;
     width: 100%;
   }

   .featured-plan {
     transform: scale(1.05);
   }
 }

 @media (min-width: 33.75em) {
   .pricing-plans .module-title {
     margin-bottom: 1em;
   }

   .pricing-tables {
     flex-flow: row wrap;
   }

   .pricing-plan {
     flex-grow: 1;
     width: 50%;
   }

   .pricing-plan:first-child {
     border-right: 0;
     border-top: 2px solid var(--accent-color);
     border-bottom: 0;
   }

   .featured-plan {
     margin-top: 0.6em;
     order: 0;
   }

   .pricing-plan:nth-child(3) {}

   .pricing-plan:last-child {
     border-top: 2px solid var(--accent-color);
     border-left: 0;
   }

   .no-flexbox .pricing-plan {
     width: 48%;
   }

   .plan-title {
     font-size: 0.875em;
   }
 }

 @media (min-width: 48em) {
   .no-flexbox .pricing-plan {
     width: 24%;
   }

   .plan-type {
     font-size: 0.7em;
     margin: 0.5em 0 0 1em;
     padding-bottom: 0.2em;
   }

   .featured-ribbon {
     font-size: 0.65em;
   }
 }

 @media (min-width: 62em) {
   .pricing-tables {
     padding-top: 1em;
   }

   .pricing-plan {
     flex-grow: 1;
     width: 25%;
   }

   .featured-plan {
     margin-top: 0;
     order: 0;
   }

   .pricing-plan:first-child,
   .pricing-plan:last-child,
   .pricing-plan:nth-child(2n) {
     border-bottom: 2px solid var(--accent-color);
   }

   .pricing-plan .plan-features span {
     display: block !important;
   }

   .plan-cost {
     display: flex;
     flex-flow: row wrap;
     align-items: center;
     justify-content: center;
     font-size: 1em;
   }

   .plan-cost span {
     color: #bbb;
     font-size: 1.5em;
     font-weight: 400;
     padding-right: 0.15em;
     padding-left: 0.15em;
   }

   .plan-price {
     font-size: 3.25em;
   }

   .btn-plan {
     font-size: 0.875em;
   }

   .featured-ribbon {
     font-size: 0.45em;
     left: -68px;
     line-height: 25px;
   }
 }

 @media (min-width: 75em) {
   .plan-cost {
     font-size: 1em;
   }
 }

 @media (min-width: 100em) {
   .pricing-tables {
     margin: 0 auto;
     max-width: 75em;
   }
 }

 #ctasolution {
   position: relative;
   background: url('../img/ctabg1.png') no-repeat center center;
   background-size: cover;
   min-height: 100vh;
   padding: 80px 0;
   overflow: hidden;
 }

 .inner-header {
   background-image: url(../img/about-bg.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
   padding: 60px 0px 60px 0px;
 }

 .heading-title {
   color: #FFFFFF;
   font-size: 50px;
   font-weight: bold;
 }

 .pv-glass {
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(10px);
   border-radius: 24px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
 }

 .career-title span {
   color: #f97316;
 }

 .career-card {
   background: #ffffff;
   border-radius: 22px;
   padding: 34px;
   box-shadow: 0 25px 55px rgba(0, 0, 0, 0.08);
 }

 .career-card {
   background: #ffffff;
   border-radius: 22px;
   padding: 34px;
   box-shadow: 0 25px 55px rgba(0, 0, 0, 0.08);
 }

 .career-icon {
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, #d6d6d6, #efead6);
   color: #fff;
   border-radius: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   margin-bottom: 12px;
 }

 .pv-icon {
   width: 56px;
   height: 56px;
   border-radius: 16px;
   background: linear-gradient(135deg, #FAA919, #ff8f00);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #111;
   font-size: 26px;
   box-shadow: 0 12px 30px rgba(250, 169, 25, 0.45);
   margin-bottom: 18px;
 }

 /* ==========================
   Solar Service Section
========================== */

 .service-section {
   background: #f8fafc;
   font-family: 'Segoe UI', sans-serif;
 }

 .service-section h1 {
   font-size: 3rem;
   font-weight: 700;
   color: #0f172a;
   margin-bottom: 20px;
 }

 .service-section h2 {
   font-size: 2rem;
   font-weight: 700;
   color: #0f172a;
   margin-bottom: 20px;
 }

 .service-section h3 {
   font-size: 1.3rem;
   font-weight: 600;
   color: #1e293b;
   margin-bottom: 15px;
 }

 .service-section p {
   color: #555;
   line-height: 1.8;
   font-size: 16px;
 }

 .service-section strong {
   color: var(--black);
 }

 /* ==========================
   Info Box
========================== */

 .info-box {
   background: #fff;
   border-radius: 15px;
   padding: 35px 25px;
   height: 100%;
   text-align: center;
   border: 1px solid #e5e7eb;
   transition: all .35s ease;
   box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
 }

 .info-box:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
 }

 /* ==========================
   Icon Badge
========================== */

 .icon-badge {
   width: 75px;
   height: 75px;
   background: linear-gradient(135deg, #ff9800, #ffb300);
   color: #fff;
   font-size: 32px;
   border-radius: 50%;
   margin: 0 auto 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 25px rgba(255, 152, 0, .35);
 }

 /* ==========================
   CTA Button
========================== */

 .btn-danger {
   background: linear-gradient(135deg, #ff5722, #ff9800);
   border: none;
   padding: 14px 38px;
   font-size: 18px;
   font-weight: 600;
   transition: .3s;
 }

 .btn-danger:hover {
   transform: translateY(-3px);
   background: linear-gradient(135deg, #ff9800, #ff5722);
   box-shadow: 0 15px 35px rgba(255, 87, 34, .35);
 }

 /* ==========================
   Hero Section
========================== */

 .service-section .text-center:first-child {
   max-width: 900px;
   margin: auto;
 }

 .service-section .text-center:first-child p {
   font-size: 19px;
 }

 /* ==========================
   Section Spacing
========================== */

 .service-section .row {
   align-items: center;
 }

 /* ==========================
   Responsive
========================== */

 @media (max-width:992px) {

   .service-section h1 {
     font-size: 2.4rem;
   }

   .service-section h2 {
     font-size: 1.7rem;
   }

 }

 @media (max-width:768px) {

   .service-section {
     padding: 60px 0;
   }

   .service-section h1 {
     font-size: 2rem;
   }

   .service-section h2 {
     font-size: 1.5rem;
   }

   .service-section h3 {
     font-size: 1.2rem;
   }

   .service-section p {
     font-size: 15px;
   }

   .info-box {
     padding: 25px 20px;
   }

   .icon-badge {
     width: 65px;
     height: 65px;
     font-size: 28px;
   }

   .btn-danger {
     width: 100%;
     font-size: 17px;
   }

 }

 @media (max-width:576px) {

   .service-section h1 {
     font-size: 1.7rem;
   }

   .service-section h2 {
     font-size: 1.3rem;
   }

   .service-section p {
     font-size: 14px;
   }

   .icon-badge {
     width: 60px;
     height: 60px;
     font-size: 25px;
   }

 }

 /* ===========================
   Heading
=========================== */

 .pv-title {
   font-size: 3rem;
   font-weight: 700;
   color: #000000;
   line-height: 1.3;
 }

 .pv-divider {
   width: 100px;
   height: 4px;
   background: linear-gradient(90deg, var(--accent-color), #eb5b01);
   margin: 25px auto;
   border-radius: 20px;
 }

 /* ===========================
   Glass Card
=========================== */

 .pv-glass {
   background: #ffffff;
   border-radius: 20px;
   padding: 40px;
   border: 1px solid #e5e7eb;
   box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
   transition: .35s ease;
 }

 .pv-glass:hover {
   transform: translateY(-8px);
   box-shadow: 0 25px 50px rgba(0, 0, 0, .12);
 }

 /* ===========================
   Soft Card
=========================== */

 .pv-soft-card {
   background: #f8fbff;
   border-radius: 20px;
   padding: 40px;
   border-left: 5px solid var(--accent-color);
   box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
   transition: .35s;
 }

 .pv-soft-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 25px 50px rgba(0, 0, 0, .12);
 }

 /* ===========================
   Headings
=========================== */

 .pv-glass h3,
 .pv-soft-card h3 {
   color: #17324d;
   font-size: 28px;
   margin-bottom: 20px;
 }

 .pv-glass h3::after,
 .pv-soft-card h3::after {
   content: "";
   display: block;
   width: 70px;
   height: 4px;
   background: var(--accent-color);
   margin-top: 10px;
   border-radius: 20px;
 }

 /* ===========================
   List
=========================== */

 .pv-list {
   margin: 0;
   padding: 0;
 }

 .pv-list li {
   list-style: none;
   position: relative;
   padding-left: 38px;
   margin-bottom: 15px;
   color: #555;
   font-size: 16px;
 }

 .pv-list li::before {
   content: "✔";
   position: absolute;
   left: 0;
   top: 0;
   width: 24px;
   height: 24px;
   background: var(--accent-color);
   color: #fff;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 13px;
 }

 /* ===========================
   Hover Effect
=========================== */

 .pv-glass:hover h3,
 .pv-soft-card:hover h3 {
   color: var(--accent-color);
 }

 .pv-list li:hover {
   color: var(--accent-color);
   padding-left: 45px;
   transition: .3s;
 }

 /* ===========================
   Responsive
=========================== */

 @media(max-width:768px) {

   .pv-title {
     font-size: 2rem;
   }

   .pv-glass,
   .pv-soft-card {
     padding: 25px;
   }

   .pv-glass h3,
   .pv-soft-card h3 {
     font-size: 22px;
   }

   .pv-list li {
     font-size: 15px;
   }

 }

 /* ===========================
   Career Section
=========================== */

 .career-section {
   background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
 }

 /* Badge */

 .career-badge {
   display: inline-block;
   background: var(--accent-color);
   color: #fff;
   padding: 8px 22px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
 }

 /* Title */

 .career-title h2 {
   font-size: 48px;
   font-weight: 700;
   color: #183153;
   line-height: 1.3;
 }

 .career-title span {
   color: var(--accent-color);
   position: relative;
 }



 /* Card */

 .career-card {
   background: #fff;
   padding: 35px;
   border-radius: 20px;
   border: 1px solid #edf2f7;
   box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
   transition: .35s ease;
   height: 100%;
 }

 .career-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 22px 50px rgba(0, 0, 0, .12);
 }

 /* Paragraph */

 .career-card p {
   color: #5f6d7a;
   line-height: 1.8;
   margin-bottom: 18px;
 }

 /* List */

 .career-list {
   padding: 0;
 }

 .career-list li {
   position: relative;
   padding-left: 35px;
   margin-bottom: 14px;
   color: #444;
 }

 .career-list li::before {
   content: "✔";
   position: absolute;
   left: 0;
   top: 2px;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--accent-color);
   color: #fff;
   text-align: center;
   line-height: 24px;
   font-size: 12px;
 }

 /* Icon */

 .career-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 20px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--accent-color), #c06a02);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
   color: #fff;
   box-shadow: 0 10px 25px rgba(197, 124, 34, 0.35);
   transition: .3s;
 }

 .career-card:hover .career-icon {
   transform: rotate(10deg) scale(1.08);
 }

 /* CTA Button */

 .career-cta {
   display: inline-block;
   padding: 14px 34px;
   background: linear-gradient(135deg, var(--accent-color), #c06a02);
   color: #fff;
   text-decoration: none;
   border-radius: 50px;
   font-weight: 600;
   transition: .3s;
 }

 .career-cta:hover {
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 15px 35px rgba(34, 197, 94, .35);
 }

 /* Responsive */

 @media(max-width:992px) {

   .career-title h2 {
     font-size: 38px;
   }

 }

 @media(max-width:768px) {

   .career-title h2 {
     font-size: 30px;
   }

   .career-card {
     padding: 25px;
   }

   .career-icon {
     width: 70px;
     height: 70px;
     font-size: 28px;
   }

   .career-cta {
     width: 100%;
     text-align: center;
   }

 }

 @media(max-width:576px) {

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

   .career-badge {
     font-size: 12px;
     padding: 6px 18px;
   }

   .career-card {
     padding: 20px;
   }

   .career-icon {
     width: 60px;
     height: 60px;
     font-size: 24px;
   }

 }

 /*=================================
        Contact Section
=================================*/

 .contact-title small {
   display: inline-block;
   color: var(--accent-color);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
 }

 .contact-title h2 {
   font-size: 46px;
   font-weight: 700;
   color: #183153;
   line-height: 1.3;
 }

 /*=================================
      Contact Info Card
=================================*/

 .contact-info-card {
   background: #ffffff;
   padding: 30px;
   border-radius: 18px;
   border: 1px solid #e8edf3;
   box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
   transition: .35s;
   height: 100%;
 }

 .contact-info-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
 }

 .contact-info-card strong {
   display: block;
   font-size: 20px;
   color: #183153;
   margin-bottom: 10px;
 }

 .contact-info-card p {
   color: #6b7280;
   line-height: 1.8;
   margin-bottom: 0;
 }

 .contact-info-card a {
   color: var(--accent-color);
   font-weight: 600;
 }

 .contact-info-card a:hover {
   color: #0f7c3b;
 }

 /*=================================
          Icon
=================================*/

 .orange-icon {
   width: 65px;
   height: 65px;
   background: linear-gradient(135deg, #ff8c00, #ffb347);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 28px;
   flex-shrink: 0;
   box-shadow: 0 12px 25px rgba(255, 140, 0, .30);
 }

 /*=================================
         Contact Form
=================================*/

 .contact-card {
   background: #fff;
   padding: 40px;
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
 }

 .contact-card .form-control {
   border: 1px solid #dbe4ec;
   border-radius: 12px;
   padding: 14px 18px;
   box-shadow: none;
   transition: .3s;
 }

 .contact-card .form-control:focus {
   border-color: var(--accent-color);
   box-shadow: 0 0 0 4px rgba(22, 163, 74, .15);
 }

 .contact-card textarea {
   resize: none;
 }

 /*=================================
        Send Button
=================================*/

 .send-btn {
   background: linear-gradient(135deg, var(--accent-color), #b56d07);
   border: none;
   color: #fff;
   padding: 15px;
   border-radius: 50px;
   font-size: 17px;
   font-weight: 600;
   transition: .3s;
 }

 .send-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 35px rgba(22, 163, 74, .35);
 }

 /*=================================
           Map
=================================*/

 .map-box {
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
   min-height: 100%;
 }

 .map-box iframe {
   width: 100%;
   height: 100%;
   min-height: 520px;
   border: 0;
 }

 /*=================================
        Responsive
=================================*/

 @media (max-width:992px) {

   .contact-title h2 {
     font-size: 38px;
   }

 }

 @media (max-width:768px) {

   .contact-title h2 {
     font-size: 30px;
   }

   .contact-card {
     padding: 25px;
   }

   .contact-info-card {
     padding: 25px;
   }

   .orange-icon {
     width: 55px;
     height: 55px;
     font-size: 22px;
   }

   .map-box iframe {
     min-height: 350px;
   }

 }

 @media (max-width:576px) {

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

   .contact-card {
     padding: 20px;
   }

   .contact-info-card {
     padding: 20px;
   }

   .send-btn {
     font-size: 16px;
   }

   .orange-icon {
     width: 50px;
     height: 50px;
     font-size: 20px;
   }

 }

 /* ==========================
   Datenschutz Section
========================== */



 /* Main Heading */

 .legal-section h1 {
   font-size: 42px;
   font-weight: 700;
   color: #0f172a;
   position: relative;
   margin-bottom: 40px;
 }

 .legal-section h1::after {
   content: "";
   width: 80px;
   height: 4px;
   background: var(--accent-color);
   position: absolute;
   left: 0;
   bottom: -12px;
   border-radius: 50px;
 }

 /* Section Headings */

 .legal-section h3 {
   color: #0f172a;
   font-size: 24px;
   font-weight: 600;
   margin-top: 35px;
   margin-bottom: 18px;
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .legal-section h3::before {
   content: "";
   width: 10px;
   height: 10px;
   background: var(--accent-color);
   border-radius: 50%;
   box-shadow: 0 0 0 6px rgba(221, 104, 2, 0.15);
 }

 /* Paragraph */

 .legal-section p {
   color: #555;
   line-height: 1.9;
   font-size: 17px;
   margin-bottom: 20px;
 }

 /* Strong */

 .legal-section strong {
   color: var(--accent-color);
 }

 /* List */

 .legal-section ul {
   list-style: none;
   padding-left: 0;
   margin-top: 15px;
 }

 .legal-section ul li {
   background: #f7fafc;
   border-left: 4px solid var(--accent-color);
   padding: 14px 18px;
   margin-bottom: 12px;
   border-radius: 8px;
   transition: .3s;
   position: relative;
   padding-left: 55px;
 }

 .legal-section ul li::before {
   content: "✓";
   position: absolute;
   left: 20px;
   top: 50%;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--accent-color);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: bold;
 }

 .legal-section ul li:hover {
   background: var(--accent-color);
   color: #fff;
   transform: translateX(8px);
 }

 .legal-section ul li:hover::before {
   background: #fff;
   color: var(--accent-color);
 }

 /* Email Link */

 .legal-section a {
   color: var(--accent-color);
   text-decoration: none;
   font-weight: 600;
 }

 .legal-section a:hover {
   text-decoration: underline;
 }

 /* Responsive */

 @media(max-width:768px) {

   .legal-section {
     padding: 60px 15px;
   }

   .legal-section .container {
     padding: 30px;
   }

   .legal-section h1 {
     font-size: 32px;
   }

   .legal-section h3 {
     font-size: 20px;
   }

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

 /* Product Card */
 .pv-product-img {
   background: linear-gradient(145deg, #ffffff, #f4f7fb);
   border-radius: 20px;
   padding: 35px 20px;
   overflow: hidden;
   position: relative;
   transition: .45s ease;
   border: 1px solid rgba(0, 0, 0, .06);
   box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
   cursor: pointer;
 }

 /* Decorative Circle */
 .pv-product-img::before {
   content: "";
   position: absolute;
   width: 180px;
   height: 180px;
   background: rgba(255, 193, 7, .15);
   border-radius: 50%;
   top: -70px;
   right: -70px;
   transition: .5s;
 }

 /* Decorative Gradient */
 .pv-product-img::after {
   content: "";
   position: absolute;
   width: 120px;
   height: 120px;
   background: rgba(25, 135, 84, .12);
   border-radius: 50%;
   bottom: -50px;
   left: -50px;
   transition: .5s;
 }

 .pv-product-img img {
   max-width: 100%;
   height: 240px;
   object-fit: contain;
   transition: .45s ease;
   position: relative;
   z-index: 2;
 }

 /* Hover Effect */
 .pv-product-img:hover {
   transform: translateY(-12px);
   box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
 }

 .pv-product-img:hover img {
   transform: scale(1.08) rotate(-2deg);
 }

 .pv-product-img:hover::before {
   transform: scale(1.3);
 }

 .pv-product-img:hover::after {
   transform: scale(1.4);
 }

 /* Responsive */
 @media(max-width:768px) {

   .pv-product-img {
     padding: 20px 10px;
     border-radius: 15px;
   }

   .pv-product-img img {
     height: 140px;
   }

 }

 .All-loader {
   position: fixed;
   width: 100%;
   height: 100%;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1055;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .modal-content {
   border-radius: 18px;
 }

 .modal-header {
   border-radius: 18px 18px 0 0;
 }

 .form-control {
   border-radius: 10px;
   padding: 12px 15px;
 }

 .form-control:focus {
   border-color: #f4900c;
   box-shadow: 0 0 0 .2rem rgba(244, 144, 12, .15);
 }

 .link-cursor {
   cursor: pointer;
 }