/*
 Theme Name:   Petal Child Theme
 Theme URI:    http://petal.aislinthemes.com/
 Description:  Petal Child Theme
 Author:       Aislin
 Author URI:   http://aislinthemes.com
 Template:     petal
 Version:      1.0.0
 Tags:
 Text Domain:
*/
/* =Theme customization starts here
-------------------------------------------------------------- */ 
:root {
  --wrapper: 1400px;
  --blue: #0056a2;
  --black: #000;
  --gray: #222;
  --white: #ffffff;
  --red: #a03123;
  --teal: #124559;
  --green: #124559;
  --mint: #95a496;
  --brown: #60504d;
  --yellow: #f7f052;
  --accent-hover: #004548;
  --padding-theme: 100px;
  --padding-sm: 50px;
  --padding-medium: 100px;
  --padding-large: 150px;
  --fontfamily: Poppins, sans-serif;
  --logo-height: 60px;
  --mobile-logo-height: 50px;
  --sticky-logo-height: 60px;
  --header-desktop-bg: black;
  --mobile-header-bg: #fff;
  --mobile-menu-icon-color: #000;

  /* This is the button primary color */ 
  --primary-button-color: #124559;
  --primary-button-text-color: #fff;
  --primary-button-color-hover: #000;
  --primary-button-text-color-hover: #fff;

  
  /* This is the button secondary color */ 
  --secondary-button-color: #124559;
  --secondary-button-text-color: #fff;  
  --secondary-color-hover: #fff;
  --secondary-button-text-color-hover:#000;

  
  /* This is Main Primary Color used for the site */
  --main-color: #124559;
  --main-color-text: #fff;

  /* This is Secondary Color used for the site */
  --secondary-color: #211d1e;
  
  --top-header-bg: #000;
  --stickyheader-color:#fff;
  --sub-menu-color: #EBEBEB;
  --sub-menu-color-hover: #E3E3E3;
  --sub-menu-text-color: #000;
  
  /* This is the section directly below the homepage banner */
  --main-row-background-color: #F4F5F7;
  
  /* This is the section directly below the homepage banner */
  --main-row-bacground-mobile: #F4F5F7;
  
  /* These are the backgrounds for the 3 steps for Desktop, Tablet, and Mobile */
  --three-steps-background-desktop: linear-gradient(0deg, #fff 50%, #000 50%);
  --three-steps-background-tablet: linear-gradient(0deg, #fff 50%, #000 50%);
  --three-steps-background-mobile: linear-gradient(0deg, #fff 70%, #000 70%);
 
  /* This section is the 3 or 6 service boxes hover color on the Homepage */
  --homepage-service-box-hover: #000;
  
  
 /* ↓↓↓ INNER PAGE STYLES ↓↓↓*/
  /* This section is on the Overview and Industry pages, the services and products that are staggered */
  --inner-page-staggered-product-section: #f5f8fd;
 
  /* This section is on all Industry and Service Pages the rotating carousel column background color */
  --hardware-inner-page-carousel-background: #f5f8fd;
  
  /* This section is on all Industry and Service Pages the rotating carousel column background color */
  --service-slider-column-background:#000;
  
  /* This section is on all Tech Partner Pages for the 2nd section background color */
  --tech-partner-section-2-bg-color:#f8f8f8;
  
  /* This section is on Bottom Form BG */ 
  --bottom-form-section-bg: #124559;  
  
  /* ↓↓↓CONTACT US STYLES COLOR CHANGE ↓↓↓*/
  /* This section is the two toned background color for the contact us page for desktop*/
  --contact-us-background-color: linear-gradient(90deg, #f5f8fd 62%, #124559 45%);
  
  /* This section is background color for the contact us page form for desktop*/
  --contact-us-form-background-color: #fff;
  
  /* This section is the background color for the contact us page for tablet and mobile*/
  --contact-us-background-color-mobile: #fff;
  
  /* This section is the form title color on the contact us page*/
  --contact-us--form-title-color:#124559;
  
  /* This section is the form label color on the contact us page*/
  --contact-us-label-color:#222;
  
  /* This section is the Phone Number a-tag  color on the contact us page for tablet and mobile views*/
  --contact-us-a-tag-mobile:#124559;
  
  /* This is the bgcolor of banner form */
  --form-banner-color: #124559;

  /* This is the gradient bg color */
  --gradient-bg: linear-gradient(90deg, #124559 0%, #598392 100%);
  --gradient-text: #fff !important;


  /* ↓↓↓ALL BUTTON COLOR STYLES↓↓↓*/  
  /* This Changes the color for all main buttons*/
  --main-button-color:#124559;
  --main-button-text-color:#fff;
  --main-button-color-hover:#000;
  
  /* This Changes the color for all secondary buttons*/
  --secondary-button-color:#211d1e;
  --secondary-button-color-hover:#444;

  /* This Changes the color for all 2nd footer button*/
  --footer-button-2:#fff;
  --footer-button-2-text:#000;
  --footer-button-2-hover:#124559;
  --footer-button-2-hover-text:#fff;
  --footer-newsletter-button-bg: #fff;  
  --footer-newsletter-button-text: #000;  
  
  /* This Changes the color for social media icons backgroudn button color on the footer*/
  --footer-social-media-icons-button-color:#fed605;
  --footer-social-media-icons-color:#fff;
  --footer-social-media-icons-button-color-hover:#8B7944; 
  --footer-social-media-icons-hover-color: #fff;  

  /* This Changes the color mobile phone icon */
  --mobile-phone-icon-bg: #124559;
  
  /* This is were to change the footer bg and text colors */  
  --footer-bg: #2D2D2D;
  --footer-text-color: #fff;  
  --footer-bottom-bar-bg: #6a0d15;
}


/* Theme Override Styles ------------------------------------- */
body {
  margin: 0;
  font-family: var(--fontfamily);
  overflow-x: hidden;
}
h1, h2, h3, h4{
  font-family: var(--fontfamily) !important;
}
h3{
  margin-bottom:5px !important;
}

a, p, span, label, div, li, button {
  font-family: var(--fontfamily);
  letter-spacing: 0;
}
p {
  font-size: 16px;
  line-height: 30px;
}
.cbp-container, #tribe-events-pg-template {
  max-width: 1440px;
}
.wh-header {
  position: relative;
  background-color: transparent !important;
  border-bottom: none !important;
}
.wh-content {
  padding-top: 0 !important;
}
.wpb_content_element{
  margin-bottom: 0 !important;
}
.wh-padding, #tribe-events-pg-template {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.vc_row p {
  margin: 0 0 20px;
}
.vc_column-inner {
  padding-top: 0 !important;
}
.vc_btn3.vc_btn3-style-modern {
  background-image: none !important;
}
.vc_info_list .info-list-img{
  padding-right: 10px !important;
}
.vc_info_list h2{
  font-weight: 700 !important;
}
.mega-info-list {
  height: auto !important;
  padding-left: 0 !important;
}

/* Body Styles ------------------------------------- */
body::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  background: url(/wp-content/uploads/2026/01/Ellipse-top-body.png);
  background-repeat: no-repeat;
  background-position: left 0;
}
@media (max-width: 560px) {
  body::before{
    display: none;
  }
}


/* Theme Header Styles ------------------------------------- */
.wh-header{
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
#theme-header {
  max-width: 100% !important;
  width: var(--wrapper) !important;
  float: none;
  margin: 0 auto;
  left: 0 !important;
  padding: 0 !important;
}
.wh-header.is_stuck{
  background-color: var(--stickyheader-color) !important;  
  box-shadow: 0 0 15px #e5e5e5;
  padding-top: 20px !important;
  padding-bottom:20px !important;
}
.wh-logo img{
  max-height: var(--logo-height);
}
.is_stuck .wh-logo img {
  max-height: var(--sticky-logo-height);
}
.wh-header .vc_col-sm-8 {
  width: 70% !important;
}
.wh-header .vc_col-sm-4 {
  width: 30% !important;
}
.sf-menu.wh-menu-main > li > a {
    color: #222;
    text-transform: inherit;
    letter-spacing: 0;
    font-size: 16px !important;
    font-weight: 500 !important;
  margin: 0 10px;
}

#menu-contact-menu li{
  margin: 0 5px;
}
#menu-contact-menu li a{
  padding: 8px 20px;
  color: #fff;
  background: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 20px;
  font-size: 14px !important;
  font-weight: 500 !important;
}
#menu-contact-menu li.portal a{
  padding: 8px 40px 8px 20px;
  background: #fff !important;
  color: var(--main-color) !important;
  border: 2px solid #222222 !important;
  position: relative;
}
#menu-contact-menu li.portal a:after{
  content: url(/wp-content/uploads/2026/01/arrow-right.png);
  position: absolute;

}

/* Menu Styles 1200px ------------------------------------- */
@media (max-width: 1200px) {
  .sf-menu.wh-menu-main > li > a {
      font-size: 14px !important;
  }
  #menu-contact-menu li a {
      font-size: 11px !important;
  }
}

/* Theme Footer Styles ------------------------------------- */
#footer{
  padding-top: 20px;
  padding-bottom: 20px;
}
#footer .vc_column-inner {
  margin-bottom: 0 !important;
}
@media (max-width: 560px) {
  #footer .wh-logo img{
    max-height: var(--mobile-logo-height);
    margin-bottom: 20px;
  }
  #footer p{
    text-align: center !important;
    font-size: 14px;
    line-height: 20px;
  }
}


/* Mobile Navigation Styles ------------------------------------- */
.header-mobile {
  background-color: var(--mobile-header-bg) !important;
  position: fixed;
  width: 100%;
  z-index: 999999;
  top: 0;
}
.header-mobile .wh-logo img{
  max-height: var(--mobile-logo-height);
}
#mobile-navigation {
/*  display: none;*/
  position: fixed;
  top: 0;
  z-index: 9;
  max-width: 90%;
  width: 380px;
  height: 100vh;
  float: left;
  left: -100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  transition-property: left;
  transition-duration: .8s;
  transition-delay: .2s;
  background: #fff;
}
#mobile-navigation.openMenu {
  left: 0;
}
#mobile-navigation #menu-main-navigation li {
  display: block;
  width: 100%;
}
#mobile-navigation #menu-main-navigation a, #menu-main-navigation.sf-menu.wh-menu-main a {
  font-family: var(--fontfamily);
  letter-spacing: 1px;
  font-size: 14px;
  overflow:auto;
}
#mobile-header .wpb_wrapper .vc_column_container:first-child, #mobile-header .wpb_wrapper .vc_column_container:nth-child(3) {
  width: 25%;
}
#mobile-header .wpb_wrapper .vc_column_container:nth-child(2) {
  width: 50%;
}
#mobile-header .vc_column_container {
  float: left;
}
.mobile-navigation-section {
  height: calc(100vh - 50px);
}
.mobile-navigation-section .vc_row .vc_col-sm-4 {
  width: 40%;
  float: left;
}
.mobile-navigation-section .vc_row .vc_col-sm-8 {
  width: 60%;
  float: left;
}
.mobile-navigation-section #menu-main-navigation {
  padding: 0 10px;
  max-height: calc(100vh - 320px);
  overflow-y: scroll;
  margin: 0;
}
.mobile-navigation-section #menu-main-navigation a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px dotted #ccc;
  margin: 0;
  letter-spacing: 0 !important;
  color: #000;
}
.mobile-navigation-section #menu-main-navigation .sub-menu a {
  color: #000;
  border-bottom: 1px solid #ffffff45 !important;
  font-weight: 500;
}
.mobile-navigation-section .vc_column-inner {
  padding-top: 10px !important;
  margin-bottom: 0;
}
.mobile-navigation-section .vc_column-inner:first-child {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.mobile-nav img {
  max-width: 200px;
}
#menu-open {
  cursor: pointer;
  margin: 0 !important;
}
#menu-open span{
  color: var(--mobile-menu-icon-color) !important;
}
#call-container {
  text-align: center;
  position: absolute;
  bottom: 40px;
  width: calc(100% - 15px);
  z-index: 1;
}
#call-container {
  font-weight: 500;
  font-size: 16px;
}
#call-container a {
  margin-top: 10px;
  border-radius: 30px;
  background-color: var(--main-color);
  color: #fff;
}
#call-container p {
  text-align: center !important;
}
#mobile-header{
  padding-top: 20px;
  padding-bottom: 20px;
}
#mobile-header .vc_column-inner{
  margin-bottom: 0;
}
#mobile-header .vc_icon_element {
  margin-bottom: 0;
}
#call-button div{
  background: var(--main-color) !important;
}
#call-button div span{
  color: #fff !important;
}
#menu-bar .vc_col-sm-9{
  width: calc(100% - 80px) !important;
}
#menu-bar .vc_col-sm-3{
  width: 80px !important;
}
.header-mobile .vc_column-inner {
  margin-bottom: 0 !important;
}
#mobile-top-bar .portal button, #mobile-top-bar .portal a{
  padding: 8px 40px 8px 20px;
  background: #fff !important;
  color: #222222 !important;
  border: 2px solid #222222 !important;
  position: relative;
  border-radius: 20px;
}
#mobile-top-bar .vc_btn3-container{
  margin-bottom: 0 !important;
}
.header-mobile.scrolled #mobile-top-bar{
  display: none;
}

/* Theme Button Styles ------------------------------------- */
.theme-button {
  margin-bottom: 0 !important;
}
.theme-button a, .wh-button.theme-button {
  margin-top: 15px;
  padding: 15px 40px !important;
  font-weight: 600;
  font-size: 16px !important;
  background: var(--primary-button-color) !important;
  color: var(--primary-button-text-color) !important;
  border: none !important;
  border-radius: 34px !important;
}
.theme-button a:hover, .wh-button.theme-button:hover{
  color: var(--primary-button-text-color-hover) !important;
}
#call-container{
  bottom: 70px;
  position: absolute;
}

/* Theme Section Styles ------------------------------------- */
.theme-section{
  padding-top: 70px;
  padding-bottom: 80px;
}
.section-wrapper{
  width: 1300px;
  max-width: 100%;
  margin: 0 auto;
  float: none;
}
.two-columns-section .vc_col-sm-6>.vc_column-inner{
  padding-left: 5vw;
}
@media only screen and (max-width: 768px){
  .theme-section .vc_col-sm-6 {
    width: 100%;
  }
  .theme-section h2.vc_custom_heading{
    margin-top: 30px;
  }
}


.theme-list ul{
  padding: 0;
  margin: 0;
  height: auto !important;
}
.theme-list li{
  list-style: none;
}

/* Theme Styles 991px ------------------------------------- */
@media (max-width: 991px) {
  .theme-section {
      padding-top: 50px;
      padding-bottom: 50px;
  } 
}

/* Theme Banner Styles ------------------------------------- */
#banner{
  padding-top: 200px;
  padding-bottom: 200px;
}
#banner::after {
  content: '';
  position: absolute;
  width: 92%;
  height: 92%;
  display: block;
  bottom: 0;
  right: 0;
  background: url(/wp-content/uploads/2026/01/Ellipse-Banner.png);
  background-repeat: no-repeat;
  background-position: right 0;
  background-size: contain;
}
@media (max-width: 1024px) {
  #banner {
      padding-bottom: 100px;
  }
  #banner::after {
    width: 85%;
    height: 85%;
    bottom: -8vw;
    right: 0;
  }
  #banner h1 {
    font-size: 40px !important;
  }
}
@media only screen and (max-width: 768px){
  #banner .vc_col-sm-6 {
    width: 100%;
  }
  #banner::after {
    width: 65vw;
    height: 65vw;
    bottom: -10%;
    right: -10%;
  }
  #banner, #banner h1{
    text-align: center !important;
  }
  #banner h1, #banner p{
    max-width: 100%;
    width: 500px;
    margin: 0 auto;
  }
  #banner img{
    margin-top: 50px;
  }
}
@media only screen and (max-width: 560px) {
  #banner{
    padding-top: 150px;
    padding-bottom: 0;
  }
  #banner::after {
      width: 45vh;
      height: 45vh;
      bottom: -10%;
      right: -30%;
  }
}

/* Banner Bar Styles ------------------------------------- */
#banner-bar{
  background: var(--gradient-bg);
  padding-top: 60px;
  padding-bottom: 60px;
}
#banner-bar p, #banner-bar h4{
  color: var(--gradient-text);
}
#banner h1{
  font-size: 55px;
    line-height: 1.2;
}
#banner-bar h4{
  font-size: 35px !important;
}
#banner-bar p {
    max-width: 270px;
    margin: 0 auto;
    line-height: 1.3;
}

/* Banner Bar Styles 991px ------------------------------------- */
@media (max-width: 991px) {
  #banner-bar {
      padding-top: 80px;
  }
}

/* Theme Accent BG Styles ------------------------------------- */
.accent-bg-left{
  position: relative;
}
.accent-bg-left::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto 0;
    left: 0;
    background: url(/wp-content/uploads/2026/01/Ellipse-8.png);
    height: 70%;
    width: 70%;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: contain;
}

/* Banner Bar Styles 991px ------------------------------------- */
@media (max-width: 1024px) {
  .accent-bg-left::after {
    left: 0;
    top: 50%;
    height: 40%;
    bottom: 60%;
  }
}
@media (max-width: 768px) {
  .accent-bg-left::after {
    top: 0;
  }
}
@media (max-width: 560px) {
  .accent-bg-left::after {
    height: 350px;
    top: -180px;
    left: -20%;
  }
}

/* Manufacturer Styles ------------------------------------- */
#manufacturer{
  border-radius: 73px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.20) 0%, rgba(18, 69, 89, 0.20) 100%);
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 0;
  margin-right: 0;
}
.manufacturer-wrapper{
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  float: none;
}
#manufacturer .info-list-img img{
    width: 80px;
    height: auto !important;
    margin-top: 10px;
}
#manufacturer .vc_info_list .info-list-img {
    padding-right: 20px !important;
}
@media (max-width: 560px) {
  #manufacturer .vc_info_list{
    text-align: center;
    margin-left: 0 !important;
    padding: 0 !important;
  }
  #manufacturer .info-list-img{
    width: 100%;
    text-align: center;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
  }
  #manufacturer .mega-info-list{
    margin: 0 !important;
  }
}

/* Deployment Styles ------------------------------------- */
#deployment{

}
#deployment::after, #deployment::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  margin: auto 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
#deployment::after{
  background: url(/wp-content/uploads/2026/01/Ellipse-6-1.png);
  background-position: top right;
  height: 100%;
  width: inherit;
}
#deployment::before{
  background: url(/wp-content/uploads/2026/01/Ellipse-7-1.png);
  background-position: bottom left;
  height: 80%;
  width: inherit;
}
#deployment .mega-line-container{
  border-radius: 16px;
  border: 2px solid #124559;
  background: #FFF;
  margin: 45px auto;
  padding: 30px;
}
#deployment .mega-line-container h2{
    color: #01161E !important;
    text-align: center;
    font-size: 19px !important;
    font-style: normal;
    font-weight: 700;
}
#deployment .mega-line-container .mega-line-top span{
  display: none;
}

#deployment::before {
    background: url(/wp-content/uploads/2026/01/Ellipse-7-1.png);
    background-position: bottom left;
    height: 80%;
    width: inherit;
    margin-bottom: 20px;
}

/* Deployment Styles 991px ------------------------------------- */
@media (max-width: 1024px) {
  #deployment::after {
    height: 70%;
    bottom: -20%;
  }
  #deployment::before {
    height: 50%;
    bottom: 28%;
  }
}
@media (max-width: 991px) {
  #deployment::before {
      background: url(/wp-content/uploads/2026/01/Ellipse-7-1.png);
      background-position: bottom left;
      height: 80%;
      width: inherit;
      margin-bottom: 20px;
  }
}
@media (max-width: 768px){

  #deployment::after {
    height: 50%;
    top: 50%;
    bottom: 0;
  }
  #deployment::before{
    height: 40%;
    bottom: 55%;
  }

  .md-column-centered {
    max-width: 100%;
    width: 450px !important;
    text-align: center;
    margin: 0 auto;
  }
  .md-column-centered .vc_custom_heading{
    text-align: center !important;
  }
}
@media (max-width: 560px){
  #deployment::after {
    height: 35%;
    left: 20%;
  }
  #deployment::before {
    height: 30%;
    bottom: 65%;
  }

}


/* Security Styles ------------------------------------- */
#security p{
  max-width: 1000px;
  margin: 0 auto;
  display: block;
}
#security p {
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    margin-top: 5px;
}
#security .tm-slider h2{
  color: #01161E !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-top: 40px !important;
}



/* Testimonial Styles ------------------------------------- */
#testimonials{
  margin-bottom: 150px;
  padding-top: 120px;
  padding-bottom: 0;
  padding-right: 10vw;
  padding-left: 10vw;
  border-radius: 47px;
  background: #F2F2F2;
  margin-left: 0;
  margin-right: 0;
}
#testimonials .slick-prev,  #testimonials .slick-next{
  top: 40% !important;
}
#testimonials .slick-prev {
  left: -60px !important;
}
#testimonials .slick-next{
  right: -53px !important;
}
.tm-slider h2 {
    margin: 0;
    font-weight: bold !important;
}
@media only screen and (max-width: 1024px) {
  #testimonials{
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 768px) {
  #testimonials{
    margin-top: 50px;
  }
}
@media only screen and (max-width: 560px) {
  #testimonials {
    margin-top: 0;
  }
  #testimonials p{
    text-align: center !important;
  }
}

/* CTA Styles ------------------------------------- */
#cta{
  background: var(--main-color);
}
#cta h2{
  font-size: 2.3em;
  line-height: 1.2em;
}
#cta p{
  color: #fff;
}
#cta .wpforms-container{
  border-radius: 22px;
  background: #FFF;
  box-shadow: 0 3.519px 10.468px 5.278px rgba(0, 0, 0, 0.06);
  padding: 50px 30px 60px;
  margin: 0 !important;
}

/* WPForms Styles */
.wpforms-container .wpforms-field-row.wpforms-field-medium, .wpforms-container input.wpforms-field-medium{
  width: 100% !important;
  max-width: 100% !important;
}
div.wpforms-container-full button[type=submit]{
  border-radius: 40px !important;
  background: var(--main-color) !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}
.wpforms-container .wpforms-form .wpforms-field-label{
  font-size: 14px !important;
  margin-bottom: 5px !important;
}
.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field{
  padding: 10px 0 !important;
}
div.wpforms-container-full .wpforms-form .wpforms-head-container {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}


/* Why Section Styles --------------------------- */
@media only screen and (max-width: 768px) {
  #why-field-resolve{
    padding-top: 100px;
  }
}








@media only screen and (max-width: 880px) {
  .reverse-row .vc_row{
    flex-direction: column-reverse;
    display: flex;
  }
}