:root {
	--theme-color-one: #0f75cf;
	--theme-color-two: #f9a532;
}


#Container, header, nav, section, #CreativeConnect, footer, #Content-Containe, #Main-Banner, #Banner,  #Process, #Services, #Info, #C-Slider, #Main-Banner-S, #Title, #OurProcess, #Quick-Service, #Grids {
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: relative;
}

#Container {
	overflow: hidden;
}

#Header, #Main-Menu, #Mobile-Menu, #Footer, #Content-Main, #Banner-Intra, #Process-Intra, #Services-Intra, #Info-Intra, #C-Slider-Intra, #Title-Intra, #OurProcess-Intra, #Quick-Service-Intra, #Grids-Intra {
	max-width: 1366px;
	min-width: 300px;
	margin: 0px auto;
	padding: 0px;
	position: relative;
}

/* Header */

#Main-Banner {
	z-index: 9999;
	background: #fff;
}

#Main-Banner-S {
	z-index: 99999;
}

header {
	padding: 10px 0px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	background: #fff;
    z-index: 99999;
}

.header-l {
	width: 210px;
	padding: 0 0 0 5px;
	vertical-align: middle;
}

.header-r {
	vertical-align: middle;
	text-align: right;
}

/* Banner */

#Banner{
	background: url(../images/provibe-nutrition-banner.jpg) no-repeat center top #fff;
	background-size: cover;
	height: 740px;
}

#Main-Banner:after {
    content: '';
    position: absolute;
    background: #000;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
}

#Banner-Intra {
	height: 100%;
}

#Banner-Intra .table-div {
    height: 100%;
    position: relative;
    z-index: 2;
}

.banner-content{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%, -50%);
    -moz-transform: translateY(-50%, -50%);
    -ms-transform: translateY(-50%, -50%);
    -o-transform: translateY(-50%, -50%);
    transform: translateY(-50%);
    left: 2%;
	width: 100%;
	max-width: 420px;
    z-index: 2;
}

.banner-content h1 {
    font: 500 40px / 50px "IBM Plex Sans", sans-serif;
    color: #ffffff;
    letter-spacing: 1px;
    margin: 0 0 30px 0;
}

.banner-content p  {
    margin: 10px 0 0 0;
    font: 300 20px / 30px "PT Sans", sans-serif;
    color: #fff;
}

.banner-content a  {
    display: block;
    font: 400 18px / 18px "PT Sans", sans-serif;
    border: 2px solid transparent;
    padding: 13px;
    border-radius: 5px;
    background: #fc832b;
    letter-spacing: 1px;
    color: #000;
    margin: 20px 0 10px 0;
    text-align: center;
    width: 300px;
}

.banner-r {
	vertical-align: middle;
}


.banner-r .quickQuote {
	text-align: center;
	width: 480px;
	margin: auto;
	background: #ffffff;
	padding: 30px;
	border-radius: 30px;
}


.quickQuote h2 {
	font: 700 21px/40px "IBM Plex Sans", sans-serif;
	color: #141414;
	letter-spacing: 1.5px;
	margin: 0 0 20px 0;
}

.quickQuote input,
.quickQuote select,
.quickQuote textarea {
	font-family: "PT Sans", sans-serif;
	width: 100%;
	border: 2px solid transparent;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	padding: 13px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	background-color: #ffffff;
	outline: none;
	letter-spacing: 1px;
	color: #000;
	border: 1px solid #e4e4e4;
	resize: none;
}

.quickQuote select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 13px;
	background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="none" stroke="%23333" stroke-width=".5" d="M0 0l2 2 2-2"/></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px;
}

.quickQuote input::placeholder,
.quickQuote select::placeholder,
.quickQuote textarea::placeholder {
	color: #485352;
	opacity: 1;
}

.quickQuote p.info {
	color: #141414;
	font: 400 13px / 26px "PT Sans", sans-serif;
	text-align: left;
}

.quickQuote p.info a {
	color: #0e6e62;
}

.quickQuote .inputBlock {
	margin: 0 0 10px 0;
}

.quickQuote .inputBlock p {
	font: 500 13px/24px "PT Sans", sans-serif;
	color: #333;
	letter-spacing: 0.5px;
	margin: 0 0 10px 0;
}

.quickQuote .checkbox {
	border-top: 1px solid #f3f9ed;
	border-bottom: 1px solid #f3f9ed;
}


.quickQuote .checkbox input {
	width: auto;
}

.quickQuote .checkbox label {
	display: inline-block;
	font: 500 14px/26px "PT Sans", sans-serif;
	letter-spacing: 0.5px;
	vertical-align: middle;
	margin: 0 10px 5px 0px;
}

.quickQuote label.error {
	color: rgb(230, 67, 37);
	font: 500 13px / 20px "PT Sans", sans-serif;
	display: block;
	text-align: left;
}

.quickQuote .submitGet input {
	cursor: pointer;
	background: #FF994E;
	color: #fff;
}

/* Grids */


#Grids{
    padding: 30px 0;
    text-align: center;
    background: #e1e1e1;
}

#Grids .img-center{
	display: block;
    text-align: center;
    width: 100%;
    max-width: 250px;
    margin: auto;
}

#Grids .followBtn {
    display: block;
    font: 400 18px / 18px "PT Sans", sans-serif;
    border: 2px solid transparent;
    padding: 10px 13px;
    border-radius: 5px;
    background: #fc832b;
    letter-spacing: 1px;
    color: #000;
    margin: 30px auto 10px auto;
    text-align: center;
    width: 140px;
    color: #fff;
}

/* Rslides */

#Slider1 {
	position: relative;
	z-index: 1;
}

/* Quick Service */

#Quick-Service{
    padding: 30px 0;
}

.ql-list{
	vertical-align: top;
    text-align: center;
}

.ql-list li{
    display: inline-block;
    width: 31%;
    vertical-align: top;
    margin: 10px;
    text-align: left;
}

.ql-list li h3{
    font: 600 40px / 50px "IBM Plex Sans", sans-serif;
    color: #fc832b !important;
    margin: 30px 0;
}

.ql-list li p{
    font: 400 25px / 40px "PT Sans", sans-serif;
    max-width: 500px;
}

.ql-list li a.btns{
    display: inline-block;
    font: 400 18px / 18px "PT Sans", sans-serif;
    border: 2px solid transparent;
    padding: 10px 13px;
    border-radius: 5px;
    background: #fc832b;
    letter-spacing: 1px;
    color: #000;
    margin: 20px 0 10px 0;
    text-align: center;
}

.ql-list li a.simpleTxt{
    display: block;
	margin: 10px 0 0 0;
    color: #b44d03;
    font: 400 18px / 24px "PT Sans", sans-serif;
}

.ql-list li a.simpleTxt:hover{
	text-decoration: underline;
}










/* Process */

#Process {
    padding: 80px 0;
    background: #E6E6E6;
}

.process-grid{
	width: 100%;
	max-width: 690px;
	margin: auto;
}


#Process h2 {
    font: 700 46px / 64px "IBM Plex Sans", sans-serif;
    color: #141414;
    margin: 0 0 20px 0;
}

#Process .why-btn {
    display: inline-block;
    font: 700 36px / 46px "IBM Plex Sans", sans-serif;
    color: #a54702;
    margin: 0px 0 15px 0;
    text-decoration: underline;
}

#Process p {
	font: 300 18px / 30px "PT Sans", sans-serif;
	color: #141414;
	letter-spacing: 0.4px;
    margin: 0 0 15px 0;
}

#Process p strong{
	font: 700 18px / 30px "PT Sans", sans-serif;
}

#Process .smallIcon{
    display: block;
    text-align: center;
    margin: 10px 0 0 0;
    font: 300 18px / 24px "PT Sans", sans-serif;
    color: rgba(33, 37, 41, 0.7) !important;
}
 


/* Specialization */

#OurProcess {
	padding: 60px 0;
	background: #f3f9ed;
}

#OurProcess h3 {
	text-align: center;
	font: 700 24px / 36px "IBM Plex Sans", sans-serif;
	color: #141414;
	letter-spacing: 0.5px;
	margin: 0 0 40px 0;
}

#OurProcess h3 color {
	color: #0f75cf;
}

.packages-list li {
	box-shadow: 1px 1px 5px 0 rgb(1 1 1 / 5%);
}

.packages-list li h4 {
	font: 600 14px / 22px "IBM Plex Sans", sans-serif;
	margin: 20px 0 0;
	color: #000000;
	text-align: center;
	letter-spacing: 0.6px;
}

.packages-list li p {
	font: 400 16px / 24px "PT Sans", sans-serif;
	color: #141414;
	letter-spacing: 0.4px;
	margin: 10px 0 0 0;
	text-align: center;
}

/* Specialization */

#Services {
	padding: 30px 0 60px 0;
}

#Services h2 {
    font: 700 36px / 46px "IBM Plex Sans", sans-serif;
    color: #ef7834;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

#Services h2 color {
	color: #0f75cf;
}


.services-list {
	text-align: center;
	margin: auto;
}

.services-list li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 188px;
    transition: 0.8s all ease;
    overflow: hidden;
    color: #fff;
    margin: 10px 1.4%;
    border: 1px solid #dddbdb;
    border-radius: 10px;
    overflow: hidden;
}

.services-list .services-txt {
	width: 100%;
	transition: 0.7s all ease;
	color: #000;
}


.services-list li a {
    position: relative;
	display: block;
	height: 100%;
    z-index: 2;
}

.services-list li h3 {
    font: 300 24px / 32px "PT Sans", sans-serif;
    margin: 0;
    padding: 10px 0;
}

.services-list li p {
	font: 400 15px / 28px "PT Sans", sans-serif;
	padding: 10px;
	letter-spacing: 0.5px;
	opacity: 1;
	transition: 0.7s all ease;
}


/* Footer */


footer {
    background: #141414;
    padding: 50px 0 30px 0;
}


.footer-main-grid{
	text-align: center;
}

.footer-grid {
    display: inline-block;
    vertical-align: top;
    min-width: 300px;
    width: 29%;
    margin: 20px;
    background: #000000;
    text-align: center;
    min-height: 355px;
}

.footer-grid .footer-icos{
    position: relative;
    width: 60px;
    height: 60px;
    margin: 15px auto;
    display: block;
}

.footer-grid .footer-icos:before{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    font-family: 'fontello';
    color: #FF994E;
    font-size: 40px;
    top: 18px;
    text-align: center;
}

.footer-address .footer-icos:before{
	content: '\E80E';
}

.footer-menu .footer-icos:before{
	content: '\F0E5';
}

.footer-social .footer-icos:before{
	content: '\E818';
}

.footer-content{
	width: 75%;
	margin: auto;
}

.footer-grid .pHead{
    font: 300 20px / 29px "IBM Plex Sans", sans-serif;
    color: #FF994E;
    padding-bottom: 12px;
    letter-spacing: 1.4px;
}


.footer-address li{
	font: 400 14px/22px "PT Sans", sans-serif;
	text-align: left;
	margin: 5px 0 0 0;
	color: #ffffff;
	letter-spacing: 1px;
	position: relative;
}

.footer-address li a{ 
    color: #ffffff;
    display: inline-block;
    padding: 5px 10px 5px 40px;
}

.footer-address li:before{ 
    position: absolute;
    left: 12px;
    font-family: 'fontello';
    color: #ffffff;
    font-size: 18px;
    top: 5px;
}

.footer-address li.call-ico:before{ 
    content: '\E80E';
}

.footer-address li.mail-ico:before{ 
    content: '\E808';
}

.footer-address li.hours-ico:before{ 
    content: '\E801';
}

.footer-menu li{
	font: 400 14px/22px "PT Sans", sans-serif;
	text-align: left;
	margin: 5px 0 0 0;
	color: #ffffff;
	letter-spacing: 1px;
	position: relative;
}
 
.social-footer li{
	display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    margin: 0 5px 10px 0;
    position: relative;
	font: 400 17px/24px "PT Sans", sans-serif;
}

.social-footer li a {
    width: 30px;
    height: 30px;
    display: block;
}

.social-footer li a:before {
    position: absolute;
    font-family: 'fontello';
    color: #fff;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    top: 4px;
    font-size: 17px;
}

.social-footer .youtube a:before {
	content: '\F315';
}
.social-footer .instagram a:before {
	content: '\F16D';
}
.social-footer .linkedin a:before {
	content: '\E814';
}

.copyrights{
    margin: 30px 0 0 0;
    text-align: center;
    font: 300 13px/24px "PT Sans", sans-serif;
    color: #ffffff;
    letter-spacing: 1px;
	padding: 0 15px;
}
.copyrights a{
	transition:0.7s all ease;
}

.copyrights a:hover{
	color: #fff;
}

/* Social Media */

.social-media {
	margin: 10px 0 0 0;
}

.social-media li {
	display: inline-block;
	vertical-align: top;
	width: 40px;
	height: 40px;
	margin: 0 5px 10px 0;
	position: relative;
}

.social-media li a {
	width: 40px;
	height: 40px;
	display: block;
	transition: 0.8s all ease;
	opacity: 0.7;
}

.social-media li:hover a {
	opacity: 1;
}

.social-media li a:before {
	position: absolute;
	font-family: 'fontello';
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	transition: 0.7s all ease;
	font-size: 21px;
	color: #f3f9ed;
}

.social-media .linkedin a:before {
	content: '\E814';
	top: 8px;
}

.social-media .instagram a:before {
	content: '\F16D';
	top: 7px;
}


.social-media .linkedin a {
	border: 1px solid #0077B5;
	background: #0077B5;
}

.social-media .instagram a {
	border: 1px solid #E4405F;
	background: #E4405F;
}


/* Main Banner */

#Title {
    padding: 15px 0;
    text-align: center;
}

#Title-Intra h1 {
	font: 500 40px / 50px "IBM Plex Sans", sans-serif;
	color: #141414;
	letter-spacing: 1px;
	padding: 0 0 0 5px;
}

/* Contact */

.contact-info h2 {
	font: 300 45px / 70px "IBM Plex Sans", sans-serif;
	color: #141414;
	margin: 0 0 30px 0;
}

.contact-info h2 color {
	font: 600 45px / 70px "IBM Plex Sans", sans-serif;
	color: #0f75cf;
}

.contact-info p {
	font: 400 20px/40px "PT Sans", sans-serif;
	color: #094254;
	letter-spacing: 0.5px;
}

.contact-grid {
	margin: 50px 0 0 0;
	background: #fff;
}

.textMain .contact-grid li {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	padding: 20px;
	margin: 0 -2px 2px -1px;
	background: #f3f9ed;
	min-height: 390px;
	transition: 0.7s all ease;
}


.textMain .contact-grid-l h3 {
	text-align: center;
	font: 500 18px/24px "PT Sans", sans-serif;
	color: #333;
	letter-spacing: 1px;
}

.textMain .contact-grid-l p {
	font: 400 15px/30px "PT Sans", sans-serif;
	padding: 5px 0 5px 35px;
	position: relative;
}

.textMain .contact-grid-l p a {
	color: #333;
}

.textMain .contact-grid li img {
	display: block;
	margin: 0 auto 10px auto;
	filter: brightness(0%);
}

.textMain .contact-grid li p:before {
	font-family: 'fontello';
	position: absolute;
	top: 1px;
	left: 0;
	margin: auto;
	color: #0f75cf;
	width: 30px;
}

.contact-grid li p.address:before {
	content: '\E823';
	font-size: 23px;
	top: 4px;
}

.contact-grid li p.phone:before {
	content: '\E80E';
	font-size: 17px;
	top: 4px;
	left: 3px;
}

.contact-grid li p.direction:before {
	content: '\E817';
	font-size: 15px;
	top: 4px;
	left: 4px;
}


/* Calculator */


.calculator {
	text-align: center;
	padding: 50px;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
	margin: 0;
	vertical-align: middle;
}

.calculator h3 {
	font: 700 18px "IBM Plex Sans", sans-serif;
	color: #0f75cf;
	margin-bottom: 30px;
}

.calculator p.info {
	font: 500 16px / 26px "PT Sans", sans-serif;
	padding: 0 0 10px 0;
	text-align: left;
	color: #333333;
	width: 96%;
	margin: auto;
}

.calculator p {
	font: 500 12px/24px "PT Sans", sans-serif;
	padding: 0;
	text-align: left;
	color: #333333;
}

.calculator h4 {
	font: 700 18px "IBM Plex Sans", sans-serif;
	color: #0f75cf;
	margin: 30px 0 0 0;
}


/* --- Input & Select Fields --- */

.calculator .blockarea {
	max-width: 96%;
	margin: 10px auto;
	text-align: left;
}

.calculator input,
.calculator select {
	background: #ffffff;
	width: 100%;
	border: 1px solid #cccccc;
	outline: none;
	font: 400 14px/30px "PT Sans", sans-serif;
	padding: 10px;
}

.calculator select {
	padding: 14px 5px;
}


/* --- Submit Button --- */

.calculator .submitBtn input {
	display: block;
	vertical-align: top;
	width: 150px;
	margin: 20px auto 0 auto;
	border: 1px solid #0f75cf;
	color: #fff;
	cursor: pointer;
	transition: 0.7s all ease;
	background: #0f75cf;
	padding: 12px 0;
	font: 700 12px/24px "PT Sans", sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.calculator .submitBtn input:hover {
	background: none;
	color: #0f75cf;
}

/* --- Validation Errors --- */

.calculator label.error {
	display: block;
	text-align: left;
	font: 400 12px/24px "PT Sans", sans-serif;
	padding: 8px 0 0 0;
	letter-spacing: 0.5px;
	color: #fb1a0a;
}

.calculator .submitBtn input,
.calculator .submitBtn input:hover {
	background: #0f75cf;
	color: #fff;
}


.calculator-result {
	background: #0f75cf;
	vertical-align: middle;
	padding: 30px;
}


.calculator-result h2 {
	color: #0E6E62;
	font: 500 10px / 28px "IBM Plex Sans", sans-serif;
	letter-spacing: 1px;
	background: #d3ebe0;
	text-align: left;
	margin: 10px 0;
	display: inline-block;
	padding: 0 11px;
}

.calculator-result li {
	font: 400 16px / 30px "PT Sans", sans-serif;
	color: #d3ebe0;
	letter-spacing: 0.5px;
	text-align: justify;
	padding: 0 0 5px 0 ! important;
}

.calculator-result hr {
	border: none;
	height: 0.1px;
	background-color: #d3ebe0;
}

/* Contact Page */


.page-wrapper {
    box-sizing: border-box;
    font-family: "IBM Plex Sans", "PT Sans", Inter, system-ui, Arial, sans-serif;
    color: #111827;
}

/* Card */
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 980px;
  margin: 30px auto;
  border: 1px solid #333;
}

/* Header */
.form-header { text-align: center; margin-bottom: 28px; }
.form-header h1 {
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
  font: 700 40px / 50px "IBM Plex Sans", sans-serif;
  text-transform: none;
}
.form-header p {
  margin: 0;
  color: #4b5563;
  font: 300 20px / 30px "PT Sans", sans-serif;
}

/* Top-level grid for pairs (two-column form) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns */
  gap: 20px 32px; /* row-gap, column-gap */
  align-items: start;
}

/* Each labeled control pair (keeps label and input in one row) */
.field-row {
  display: grid;
  grid-template-columns: 36% 64%; /* label / control */
  gap: 8px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* For simpler top info items where you want label above input on small widths */
.info-item {
  width: 100%;
}

/* Label styling (to the left) */
.field-row label,
.info-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Inputs (common styles) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea,
.field-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;      /* outline border for all fields */
  outline: none;
  font-size: 15px;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
  transition: box-shadow .16s ease, border-color .12s ease, transform .12s ease;
}

/* Placeholder color (light grey) */
input::placeholder,
textarea::placeholder,
.field-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Textarea specific */
textarea {
  min-height: 120px;
  resize: vertical;
  padding: 12px;
  line-height: 1.4;
}

/* Underline-style single-line field (if you still want .field-input as underline) */
.field-input {
  padding: 8px 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #e5e7eb;  /* this keeps the subtle underline look */
  background: transparent;
  font-size: 16px;
  color: #111827;
}

/* For the request: "Outline border for all inputs and textboxs"
   We'll show both standard bordered inputs (above) and keep .field-input underline if used.
   If you want .field-input to have full border, remove border-bottom and add border:1px solid #d1d5db */

.field-input.full-outline {
  border-bottom: none;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

/* Focus states */
input:focus, textarea:focus, select:focus, .field-input:focus {
  box-shadow: 0 6px 18px rgba(14,165,233,0.08);
  border-color: #60a5fa;
  transform: translateY(-1px);
}

/* Preferred Date/Time block - we'll make the inputs sit side by side */
.date-time {
  display: flex;
  gap: 12px;
  align-items: center;
}
.date-time input[type="date"],
.date-time input[type="time"] {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
}

/* Divider */
.divider {
  height: 1px;
  background: #e5e7eb;
  margin: 20px 0 24px;
  border-radius: 1px;
}

/* Actions */
.actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}
.btn-primary {
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: #ff7a3c;
  color: #fff;
}
.btn-primary:hover {
  background: #f97316;
  transform: translateY(-2px);
  box-shadow: 0 18px 24px rgba(249,115,22,0.18);
}

/* Small helper / note */
.pv-note {
  color: #6b7280;
  font-size: 13px;
  margin-top: 8px;
}

/* Responsive: stack to single column on small screens */
@media (max-width: 880px) {
  .form-grid {
    grid-template-columns: 1fr; /* single column */
  }
  .field-row {
    grid-template-columns: 1fr; /* label above input on small screens */
    gap: 6px;
  }
  .date-time { flex-direction: column; }
  .actions { justify-content: stretch; }
  .btn-primary { width: 100%; }
}

/* Slightly smaller on very small phones */
@media (max-width: 420px) {
  .card { padding: 20px; }
  .form-header h1 { font-size: 22px; line-height: 28px; }
}


/* GRID ONLY — safe & non-destructive */
.pv-package-grids > ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* adjust spacing if needed */
}

/* 2 columns on medium screens */
@media (max-width: 1024px) {
    .pv-package-grids > ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 column on mobile */
@media (max-width: 600px) {
    .pv-package-grids > ul {
        grid-template-columns: 1fr;
    }
}

/* Ensure li.fl stretches full width of its grid cell */

.pv-package-grids {
	position: relative;
	background: #E6E6E6;
	padding: 50px 0;
}


.pv-right{
    position: absolute;
    left: -100%;
    top: 0;
	background: #E6E6E6;
    z-index: 9;
    width: 100%;
    height: 100%;
}
	
	
.pv-left{
    position: absolute;
    top: 0;
    right: -100%;
	background: #E6E6E6;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.pv-package-grids li.fl {
    width: 100%;
    box-sizing: border-box;
}


.pv-package-grids li.fl{
	display: inline-block;
	vertical-align: top;
	background: #ffffff;
	padding: 30px;
}

.pv-package-grids li.fl h3{
    color: #000000;
    font: 700 21px / 34px "IBM Plex Sans", sans-serif;
}

.pv-package-grids li.fl span{
    display: block;
    font: 400 18px / 30px "PT Sans", sans-serif;
    color: rgba(33, 37, 41, 0.7) !important;
}

.pv-package-grids li.fl price{
    font: 600 32px / 50px "PT Sans", sans-serif;
    letter-spacing: 0.3px;
    color: #000000;
    margin: 10px 0 0 0;
}

.pv-package-grids li li{
	font: 400 15px / 30px "PT Sans", sans-serif;
    color: #000000;
    letter-spacing: 0.4px;
    text-align: left;
    padding: 4px 0 4px 30px;
    background: url(../images/ticks.svg) no-repeat left 9px;
    background-size: 21px;
}

.pv-package-grids li a{
	display: block;
    font: 400 16px / 23px "PT Sans", sans-serif;
    padding: 10px;
    width: auto;
    text-align: center;
    letter-spacing: 0.5px;
    border: 2px solid #FF994E;
    background: #FF994E;
    color: #000000;
	transition: 0.6s all ease;
    margin: 20px 0;
    border-radius: 10px;
}

/* How */


.how-it-works {
	position: relative;
	background: #000000;
	padding: 50px 0;
}


.how-it-works .how-right{
    position: absolute;
    left: -100%;
    top: 0;
	background: #000000;
    z-index: 9;
    width: 100%;
    height: 100%;
}
	
	
.how-it-works .how-left{
    position: absolute;
    top: 0;
    right: -100%;
	background: #000000;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.textMain .how-it-works h3{
	color: #fff;
}

.textMain .how-it-works li {
    font: 400 15px / 20px "PT Sans", sans-serif;
    color: #ffffff;
    letter-spacing: 0.4px;
    text-align: left;
    padding: 4px 0 4px 30px;
    background: url(../images/ticks.svg) no-repeat left 5px;
    background-size: 18px;
}

/* About */

.about-bg{
    background: #E6E6E6;
	padding: 20px 0;
	position: relative;
}

.abt-l {
	padding: 40px;
	vertical-align: middle;
}

.abt-l h2 {
    font: 400 32px / 40px "IBM Plex Sans", sans-serif;
    color: #141414;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
}

.abt-l p {
    font: 400 15px / 28px "PT Sans", sans-serif;
    color: #141414;
    text-align: justify;
    padding: 10px 0;
}

.abt-r {
    text-align: center;
    vertical-align: middle;
    width: 40%;
}

.abt-r img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.about-left {
    position: absolute;
    left: -100%;
    top: 0;
    background: #E6E6E6;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.about-right {
    position: absolute;
    right: -100%;
    top: 0;
    background: #E6E6E6;
    z-index: 9;
    width: 100%;
    height: 100%;
}




.values{
    padding: 20px 0;
    position: relative;
}

.values-l{
    position: absolute;
    left: -100%;
    top: 0;
    background: #f5f8fa;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.values-r{
	position: absolute;
    right: -100%;
    top: 0;
    background: #f5f8fa;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.values ul{
	text-align: center;
}

.values li{
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin: 10px;
    padding: 0 ! important;
    min-width: 300px;
    background: #fff ! important;
    box-shadow: 0 0 11px #eaf0f6;
    min-height: 520px;
}

.values li img{
	border-radius: 5px;
}


.values h3 {
    font: 700 20px / 30px "IBM Plex Sans", sans-serif;
    color: #000000;
    margin: 10px 0;
    letter-spacing: 1px;
    text-align: left;
    padding: 0 20px;
}

.values li p{
    font: 400 14px / 28px "Poppins", sans-serif;
    color: #393939;
    text-align: justify;
    padding: 0 20px;
}
 
/* Plans TItle */

.plans-title{
	background: #000;
}

.plans-title #Title-Intra h1{
	color: #fff;
    font: 500 60px / 70px "IBM Plex Sans", sans-serif;
}


















.mission{
    padding: 60px 0;
    background: #fff;
    position: relative;
}


.mission h3{
    font: 400 40px/60px "Poppins", sans-serif;
    color: #393939;
    text-align: center;
    margin: 0 0 30px 0;
    padding: 0 0 30px 0;
	background: url(../images/border.png) no-repeat center bottom;
}

.textMain .mission li{
    padding: 15px;
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic!important;
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 400;
    border-left: 5px solid #fb565d;
    background-color: #f9f9f9;
    background-size: 50px;
}






























.zippi-quick {

	position: sticky;
	top: 20px;
	/* or 0 if you want it flush at top */

	width: 350px;
	margin: 50px auto 0 auto;
	box-shadow: 0 0 12px -8px rgba(0, 0, 0, .45), 0 9px 12px -8px rgba(0, 0, 0, .45);
}

.zippi-quick h3 {
	background: #0f75cf;
	font: 500 16px / 24px "IBM Plex Sans", sans-serif;
	color: #ffffff;
	letter-spacing: 1px;
	text-align: center;
	margin: 10px 0 0 0;
	padding: 20px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.zippi-quick .quickQuote {
	text-align: center;
	margin: auto;
	background: #ffffff;
	padding: 30px;
}

.zippi-quick .submitGet input {
	background: #333333;
}

/* Service */


#Shade {
	position: relative;
}

#Shade:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 750px;
	background: linear-gradient(to bottom, rgb(3 173 208 / 41%), #fff);
	z-index: -1;
}

.zippi-grid {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.zippi-l {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.zippi-r {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}


.zippi-grid {
	display: flex;
}

.zippi-l {
	flex: 0 0 66.6667%;
	max-width: 66.6667%;
	padding: 0 10px;
}

.zippi-r {
	position: relative;
}


.zippi-l h1 {
	padding: 50px 0 0 0;
	font: 500 26px / 42px "IBM Plex Sans", sans-serif;
	color: #141414;
	letter-spacing: 1px;
	text-align: left;
}

.zippi-l .intro {
	font: 400 18px / 32px gt_walsheim_proregular;
}

.zippi-l h2 {
	font: 500 20px / 30px "IBM Plex Sans", sans-serif;
	color: #141414;
	letter-spacing: 1px;
	text-align: left;
	margin: 10px 0;
}


.offered-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 4 equal columns */
	gap: 20px;
	/* spacing between items */
	list-style: none;
	padding: 0;
	margin: 20px 0 35px 0;
}

.offered-list li {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.offered-list li a {
	display: block;
	padding: 30px;
}

.offered-list li a span {
	display: block;
	position: relative;
	font: 400 18px / 24px gt_walsheim_proregular;
	text-align: center;
	letter-spacing: 0.6px;
	color: #000000;
	margin: 12px 0 0 0;
}

.offered-list li img {
	height: 3rem;
	width: 3rem;
	margin: auto;
}

.zippi-l p {
	font: 400 18px / 32px gt_walsheim_proregular;
	padding: 10px 0;
}

.zippi-l p strong {
	font: 400 18px / 32px gt_walsheim_proregular;
	padding: 10px 0;
}


.why-us-list {
	margin: 20px 0 35px 0;
}


.why-us-list li {
	background: #333333;
	width: 50%;
	text-align: left;
	display: inline-block;
	border: 1px solid #fff;
}


.why-us-list li a {
	display: block;
	padding: 10px 10px 10px 85px;
}

.why-us-list li p {
	font: 500 15px / 28px "IBM Plex Sans", sans-serif;
	color: #0f75cf;
	letter-spacing: 1px;
}

.why-us-list li p i {
	display: block;
	font: 400 13px / 20px "PT Sans", sans-serif;
	color: #c9c9c9;
}

.why-us-list .verified-ico a {
	background: url(../images/unboxing.png) no-repeat 21px center;
	background-size: 50px;
}

.why-us-list .tracking-ico a {
	background: url(../images/tracking.png) no-repeat 21px center;
	background-size: 50px;
}

.why-us-list .insurance-ico a {
	background: url(../images/warranty.png) no-repeat 21px center;
	background-size: 50px;
}

.why-us-list .pricing-ico a {
	background: url(../images/pricing.png) no-repeat 21px center;
	background-size: 50px;
}


.areas {
	margin: 20px 0;
	padding: 20px;
	border: 1px solid #f4f2f2;
	border-radius: 16px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.areas h3 {
	font: 500 20px / 30px "IBM Plex Sans", sans-serif;
	color: #141414;
	letter-spacing: 1px;
	text-align: center;
	margin: 10px 0;
}

.areas h3 span {
	font: 400 20px / 30px "IBM Plex Sans", sans-serif;
}

.areas li {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	min-width: 300px;
	font: 400 15px / 30px "PT Sans", sans-serif;
	color: #141414;
	letter-spacing: 0.4px;
	text-align: left;
	padding: 4px 0 4px 30px;
	background: url(../images/ticker.svg) no-repeat left 10px;
	background-size: 17px;
}

/* Quick Info */

.textMain p.quick-info {
	font: 400 18px / 30px "IBM Plex Sans", sans-serif;
}

.textMain p.quick-info a {
	text-decoration: underline;
	color: #fff;
}

/* Theme Grid */

.theme-grid {
	position: relative;
}

.theme-grid-l {
	position: relative;
	vertical-align: middle;
	background: #0f75cf;
	padding: 60px;
}

.theme-grid-l h2 {
	font: 600 24px / 40px "IBM Plex Sans", sans-serif;
	color: #d3ebe0;
	margin: 0 0 10px 0;
	letter-spacing: 0.5px;
}

.theme-grid-l h3 {
	font: 400 16px / 32px "PT Sans", sans-serif;
	color: #d3ebe0;
	letter-spacing: 0.5px;
	text-align: justify;
	padding: 10px 0;
}

.theme-grid-l p {
	font: 400 16px / 32px "PT Sans", sans-serif;
	color: #d3ebe0;
	letter-spacing: 0.5px;
	text-align: justify;
	padding: 10px 0;
}

.theme-grid-r {
	overflow: hidden;
	position: relative;
	background: #fff;
}

.theme-grid-r video {
	height: 520px;
}

.gif-bg img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 100%;
	object-fit: cover;
	transition: 0.7s all ease;
}

.textMain h3.ribbon {
	margin: 15px auto;
	padding: 15px;
	height: 50px;
	background: #d3ebe0;
	clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
	font: 600 10px / 36px "PT Sans", sans-serif;
	text-transform: uppercase;
	color: #333;
	letter-spacing: 1.3px;
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 600px;
	text-align: center;
	align-items: center;
}

.textMain .services-list li:nth-child(even) {
	margin: 0;
}


/* Reviews & Stars */

.testimonials-grid ul {
	columns: 3;
	column-gap: 1.5rem;
	padding: 0;
	list-style: none;
}


.testimonials-grid li {
	break-inside: avoid;
	background: #F7F7F7 ! important;
	padding: 30px ! important;
	margin-bottom: 1rem;
	border-radius: 8px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.testimonials-grid li p:first-child {
	background: url(../images/blockquote.svg) no-repeat left 5px;
	background-size: 24px;
	text-indent: 36px;
}

.auth {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-weight: bold;
	font-size: 0.9rem;
	color: #333;
}

.stars {
	font-size: 18px;
	color: #F6CC5D;
	letter-spacing: 2px;
	font-family: "PT Sans", sans-serif;
}

.auth span {
	color: #78b342;
	font: 400 13px / 22px "IBM Plex Sans", sans-serif;
	letter-spacing: 1px;
}

.auth span img {
	width: 24px;
	display: block;
	margin: 0 auto 5px auto;
}

/* Meal Plan */

.meal-plan-section {
    text-align: center;
    padding: 40px 24px;
    font-family: "Georgia", serif;
}

.meal-logo img {
    width: 150px;
    margin-bottom: 20px;
}

.meal-title {
    font-size: 32px;
    font-weight: 700;
    margin: 10px 0 0;
    font-family: "IBM Plex Sans", sans-serif;
}

.meal-tagline {
    color: #0d6d2f;
    font-size: 18px;
    margin: 6px 0 20px;
    font-weight: 600;
}

.textMain p.meal-desc {
    max-width: 850px;
    margin: 0 auto 30px;
    font: 300 18px / 30px "PT Sans", sans-serif;
    color: #141414;
    letter-spacing: 0.4px;
}

.meal-subheading {
    margin: 20px 0 15px;
    font-size: 24px;
    font-family: "Moonic", serif;
    font-weight: 700;
}

h3.meal-subheading{
	color: #333;
}

.meal-subheading span {
    color: #e3a618;
    margin-right: 6px;
}

.textMain ul.meal-process {
    max-width: 900px;
    margin: 0 auto 40px;
    font: 300 18px / 30px "PT Sans", sans-serif;
    color: #141414;
    letter-spacing: 0.4px;
}

.textMain ul.meal-process li{
	max-width: 900px;
    margin: 0 auto 5px 0;
    font: 300 18px / 30px "PT Sans", sans-serif;
    color: #141414;
    letter-spacing: 0.4px;
    padding: 2px 0 2px 55px;
    background: url(../images/ticks.svg) no-repeat 10px 7px;
    background-size: 24px;
    text-align: left;
}

.meal-features {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.textMain .meal-features p.feature-heading {
    font: 400 24px / 34px "IBM Plex Sans", sans-serif;
    color: #000000;
    margin: 10px 0;
    letter-spacing: 0.7px;
}


.textMain .meal-features p {
    margin: 8px 0;
    font: 300 18px / 30px "PT Sans", sans-serif;
}

.feature-heading {
    font-size: 20px;
    font-weight: 700;
    font-family: "Moonic", serif;
    margin-bottom: 10px;
}

ul.feature-list li{
	max-width: 900px;
    margin: 0 auto 5px 0;
    font: 300 18px / 30px "PT Sans", sans-serif;
    color: #141414;
    letter-spacing: 0.4px;
    padding: 2px 0 2px 55px;
    background: url(../images/ticks.svg) no-repeat 10px 7px;
    background-size: 24px;
    text-align: left;
}

/* Whatsapp */

.wh-api{
    position: fixed;
    bottom: 28px;
    right: 20px;
    z-index: 9999;
}

.wh-api a {
    font: 300 14px / 28px 'gt_walsheim_proregular';
    background: #FFFFFF;
    border: 1px solid #363636;
    box-shadow: 2px 3px 0px #00E785;
    border-radius: 24px;
    padding: 8px 16px;
    color: #202020;
    cursor: pointer;
    letter-spacing: 0.3px;
	transition: 0.5s all ease;
}

/* small additions to your existing styles to show required star and style selects/time */
.field-row label.required::after {
  content: " *";
  color: #e11d48; /* red star */
  margin-left: 4px;
  font-weight: 700;
}

select.country-code {
  width: 110px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.input-with-code {
  display:flex;
  gap:8px;
  align-items:center;
}

.time-select, .date-input {
  width:100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 15px;
}
label.error {
    color: #e11d48;
    font-size: 13px;
    margin-top: 6px;
    line-height: 22px;
}
/* Media Query */


@media (max-width: 992px) {
	.packages-list {
		grid-template-columns: repeat(2, 1fr);
		/* 2 columns on tablets */
	}

	.services-list {
		text-align: center;
		padding: 0 10px;
	}
}

@media (max-width: 940px) {
	.album-grid ul {
		grid-template-columns: repeat(3, 1fr);
		/* fixed 3 */
	}

	.zippi-quick {
		width: auto;
	}

	.zippi-r {
		padding: 0 10px;
	}

	.banner-r {
		display: none;
	}

	.downarrow {
		display: none;
	}
}

@media (max-width: 891px) {
	.header-l {
		width: 21%;
	}

	.menu li a {
		padding: 5px 15px;
	}

	#Services {
		padding: 50px 0;
	}

	.zippi-grid {
		display: block;
		width: auto;
	}

	.zippi-l {
		display: block;
		width: auto;
		max-width: none;
	}

	.zippi-r {
		display: block;
		width: auto;
		max-width: none;
	}

	.zippi-quick {
		margin: 20px 0;
	}


	.abt-l {
		padding: 25px;
	}

	.services-list li,
	.services-list li:nth-child(even) {
		display: block;
		width: auto;
		width: 320px;
		margin: 15px auto;
	}

	.team-nh {
		padding: 25px;
	}

	.team-nh-l {
		display: block;
		width: auto;
	}

	.team-nh-r {
		display: block;
		width: auto;
	}

	.abt-l,
	.abt-r {
		flex: 1 1 100%;
	}

	.nh-service-txt,
	.nh-service-img {
		flex: 1 1 100%;
	}

	.hide-img {
		display: none;
	}


	.contact-form-grid {
		display: flex;
		flex-flow: column;
	}

	.contact-form-content {
		display: block;
		width: auto;
		order: 1;
		padding: 25px;
	}

	.contact-form-box {
		display: block;
		width: auto;
		order: 2;
	}

	.contactBox {
		margin: 15px auto;
		padding: 0px;
		width: 90%;
	}

	.abt-r img {
		height: auto;
		/* Allow natural resizing on mobile */
		object-fit: contain;
	}


	.testimonials-grid ul {
		columns: 2;
	}

	footer {
		padding: 60px 0 90px 0;
	}

	.footer-l {
		display: block;
		width: auto;
		padding: 0 20px;
	}

	.footer-m {
		display: block;
		width: auto;
		padding: 0 20px;
		margin: 20px 0 0 0;
	}

	.footer-r {
		display: block;
		width: auto;
		padding: 0 20px;
		margin: 20px 0 0 0;
	}

	.footer-bottom {
		display: none;
	}

	.getQuoteBtn {
		padding: 5px;
	}

	.whatsappBTN {
		background: url(../images/whatsapp-ico.svg) no-repeat center center #0a554b;
		background-size: 18px;
		padding: 21px;
	}
}


@media (max-width: 768px) {
	header {
		padding: 10px 0px;
	}
	.header-l {
        width: 200px;
        padding: 0 0 0 10px;

	}
	#Banner {
		background: url(../images/provibe-nutrition-banner-m.jpg) no-repeat center top #fff;
		background-size: cover;
		height: 530px;
	}
	.banner-content {
        bottom: 0;
    }
	.banner-content h1 {
		font: 500 28px / 40px "IBM Plex Sans", sans-serif;
		color: #ffffff;
		letter-spacing: 1px;
		margin: 0 0 15px 0;
	}
	.banner-content p {
		font: 400 18px / 26px "IBM Plex Sans", sans-serif;
		margin: 90px 0 0 0;
	}
	
	
	.banner-content a {
        position: absolute;
        font: 400 20px / 18px "PT Sans", sans-serif;
        width: 320px;
        bottom: 0;
	}

	#About {
		padding: 40px 0;
	}

	.about-l {
		display: block;
		width: auto;
		vertical-align: middle;
		padding: 0 20px;
		margin: 0 0 20px 0;
	}

	.about-r {
		display: block;
		width: auto;
		text-align: center;
		background: url(../images/border-top.svg) no-repeat top center;
		background-size: contain;
		padding: 40px 20px 0 20px;
	}

	.process-l {
		display: block;
		width: auto;
		padding: 0 20px;
	}

	.process-r {
		display: block;
		width: auto;
		padding: 0 20px;
		margin: 30px 0 0 0;
	}

	.offered-list li a span {
		font: 400 14px / 20px gt_walsheim_proregular;
	}

	.comparison-table th,
	.comparison-table td {
		padding: 8px;
		font-size: 12px;
	}

	.banner-content {
        padding: 0 15px;
        -webkit-transform: unset;
        -moz-transform: unset;
        -ms-transform: unset;
        -o-transform: unset;
        transform: unset;
        top: 10px;
    }
	.abt-l, .abt-r {
		display: block;
        width: auto;
        padding: 25px;
    }
	.values li {
		width: auto;
		margin: 10px;
		padding: 10px ! important;
	}
	.how-it-works {
		padding: 30px;
	}
}

@media screen and (max-width: 640px) {
	.why-us-list li {
		display: block;
		width: auto;
	}
 
	.offered-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.pc-menu {
		display: none;
	}

	.mobile-menu {
		display: block;
	}

	#Title-Intra h1 {
		padding: 0 10px;
		text-align: center;
	}

	.quote {
		width: 85%;
	}

	.testimonials-grid ul {
		columns: 1;
	}
	.logos:before,
	.logos:after {
		width: 40px;
	}
	.banner-content p span {
		display: none;
	}
	#Services h2 {
		text-align: center;
	}
	#Process {
		padding: 40px 20px;
	}
	.ql-list li{
		display: block;
		width: auto;
		margin: 10px 0;
        padding: 20px;
	}
	.meal-features {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 30px;
		flex-wrap: wrap;
	}
	footer {
        padding: 40px 0;
    }
}

@media (max-width: 576px) {
	#OurProcess {
		padding: 60px 0 0px 0;
	}

	.packages-list li {
		margin: 0 20px;
	}

	.packages-list {
		grid-template-columns: 1fr;
		/* 1 column on mobile */
	}
}