/*
Theme Name: OceanWP Child
Theme URI:  https://example.com/
Description: Child theme for OceanWP
Author:      Your Name
Author URI:  https://example.com/
Template:    oceanwp
Version:     1.0.0
Text Domain: oceanwp-child
*/


/* Global Desing */
:root {
/*   --primary-color: #97DD00; */
  --primary-color: #00D550;
  --primary-color-dark: #2c323c;
  --text-dark: #2c323c;
  --bg-color:#f8f8fa;
  --primary-font: 'Poppins', sans-serif;
  --secondary-font:'Montserrat', sans-serif;
}

/*----------------------- Contact form Design ---------------------- */
.cf7-clean-form {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif !important;
  color: var(--text-dark);
  border: 1px solid rgb(193, 193, 193);
  border-radius: 12px;
  padding: 20px 25px;
  background-color: var(--bg-color);
}

.custom{
	height:50px;
	color:#fff;
}

/* Headings */
.cf7-hero-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cf7-hero-sub {
  font-size: 16px;
  color: #404040;
  margin-bottom: 20px;
  font-family: var(--secondary-font);
}

/* Inputs, textarea, select, file */
.form-control.custom,
.form-select.custom {
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 12px 14px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Placeholder */
.form-control.custom::placeholder {
  color: #999;
}

/* Focus */
.form-control.custom:focus,
.form-select.custom:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(187, 237, 80, 0.25);
  outline: none;
}

/* Textarea compact */
textarea.form-control.custom {
  resize: none;
  height: calc(1.4em + 28px);
  line-height: 1.4;
}

/* File input */
input[type="file"].form-control.custom {
  padding: 10px;
}

/* Submit button */
.btn.cf7-submit {
  width: 100%;
  background-color: var(--primary-color);
  border: none;
  color: #111;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 10px;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.btn.cf7-submit:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.col-md-6 > p {
  margin-bottom: 10px;
}

.wpcf7-form {
  position: relative;
}

/* contact form 7 response */
.wpcf7-response-output {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--secondary-font) !important;
  border: none !important;
  text-align: center;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(0,0,0,0.05);
  width: max-content;
  max-width: 90%; 
}

.custom{
	background-color:#fff !important;
}

/* ---------- Sticky button cta ------------------  */
.vertical-cta-tab {
  position: fixed;
  top: 36%;
  z-index: 1090;
  background: var(--primary-color-dark);
  color: #ffffff;
  border-radius: 0 6px 6px 0 !important;
  padding: 20px 12px;
  box-shadow: 0 10px 26px rgba(44,50,60,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  transform-origin: left center;
  transition: transform .18s ease, box-shadow .18s ease;
  font-family: var(--primary-font);
  -webkit-tap-highlight-color: transparent;
}

.vertical-cta-text {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  display: inline-block;
  white-space: nowrap;
  font-family:var(--secondary-font);
  /* vertical writing & rotate so letters remain upright and read bottom→top */
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  word-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-color);
}

/* hover/focus lift */
.vertical-cta-tab:hover,
.vertical-cta-tab:focus {
  transform: translateX(6px);
  box-shadow: 0 18px 40px rgba(44,50,60,0.16);
}

/* default: left side placement (adjust via data-side if needed) */
.vertical-cta-tab[data-side="left"] { left: 0; right: auto; border-radius: 0 12px 12px 0; }
.vertical-cta-tab[data-side="right"] { right: 0; left: auto; border-radius: 12px 0 0 12px; }

/* Offcanvas width and small style tuning */
#verticalCtaCanvas {
  max-width: 420px;
  background: transparent;
  color: var(--text-dark);
  font-family: var(--secondary-font);
  border:none;
}

/* Offcanvas header styling to match brand */
.offcanvas-header .offcanvas-title {
  font-weight: 700;
  color: var(--text-dark);
}

/* CF7 basic spacing (CF7 outputs its own classes, this helps align) */
.offcanvas-body .wpcf7 {
  margin-top: 6px;
}
.offcanvas-body .wpcf7 p {
  margin-bottom: 10px;
}

/* Mobile behavior: convert the tab to a bottom pill for easier tap */
@media (max-width: 767px) {
  .vertical-cta-tab {
    top: auto;
    bottom: 18px;
    left: auto;
    right: 18px;
    border-radius: 12px;
    padding: 8px 14px;
  }
  .vertical-cta-text { writing-mode: horizontal-tb; transform: none; font-size: 14px; }
  #verticalCtaCanvas { max-width: 100%; }
}

/* Small accessibility focus ring */
.vertical-cta-tab:focus { outline: 3px solid rgba(151,221,0,0.16); outline-offset: 2px; }


/* Media query 480px for contact form*/

@media only screen and (max-width: 480px){
	.container{
		width:100% !important;
		max-width:100% !important;
	}
}



/* call sticky button */
/* css/sticky-call.css */
.bc-sticky-call{
  position: fixed;
  right: 10px;
  bottom: 40px;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg,#00D550,#00D550);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
  font-weight: 700;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* icon inside */
.bc-sticky-call .bc-call-icon{
  font-size: 22px;
  line-height: 1;
  display: block;
}

/* small label for wider screens (optional) */
.bc-sticky-call .bc-call-text{
  display: none; /* hidden by default to keep it circular */
  margin-left: 8px;
  font-size: 14px;
}

/* pulse effect */
.bc-sticky-call::after{
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: -1;
  box-shadow: 0 0 0 rgba(143, 212, 0, 0.6);
  animation: bc-pulse 2.2s infinite;
  opacity: 0.75;
}

@keyframes bc-pulse{
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(143,212,0,0.6); opacity: 0.7; }
  70% { transform: scale(1.8); box-shadow: 0 0 0 18px rgba(143,212,0,0.0); opacity: 0.0; }
  100% { transform: scale(1.8); box-shadow: 0 0 0 18px rgba(143,212,0,0.0); opacity: 0; }
}

/* press/tap effect */
.bc-sticky-call:active{ transform: translateY(2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }

/* show text label on larger screens when hovered */
@media(min-width:900px){
  .bc-sticky-call{ width: auto; padding: 0 14px; border-radius: 36px; height: 56px; }
  .bc-sticky-call .bc-call-text{ display: inline-block; color:#fff; margin-left:10px; font-size:15px; }
  .bc-sticky-call .bc-call-icon{ font-size:20px; }
  .bc-sticky-call::after{ width: 56px; height: 56px; left: 4px; top: 4px; }
}

/* optional: hide when user scrolls down (JS toggles this class) */
.bc-sticky-call.bc-hidden{ opacity: 0; pointer-events: none; transform: translateY(30px) scale(.98); }