/*
Theme Name:     Twenty Twenty-one Child
Description:    Child theme for Twenty Twenty-one
Template:       twentytwentyone
*/

/* --primary-color: #2173ba ; */
:root {--primary-color: #52a6c9;--black: black;--bg-light: #f9f9f9; --white: #ffffff;--gray: #666666;}
/* .case-study-detail .container{min-height: 400px;} */
h1, h2, h3, h4, h5, h6, body, p, a ,ul li{font-family: 'Poppins', sans-serif !important;}
body {background-color: var(--white);}
.sticky-wrapper {transition: all 0.3s ease;}
.sticky-wrapper.is-sticky { position: fixed;top: 0;width: 100%;z-index: 9999;background: var(--white);box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
.top_header {transition: all 0.3s ease;height: 40px; opacity: 1;overflow: hidden;}
.sticky-wrapper.is-sticky .top_header {height: 0; opacity: 0;padding: 0;margin: 0;}
.site-header {background-color: var(--primary-color);max-width: 100% !important;}
.site-logo img {max-height: 80px !important;}
#menu-main_menu {margin: 0;padding: 0;list-style: none;display: flex;flex-direction: row;gap: 20px;}
#menu-main_menu li a {text-decoration: none;color: var(--white);font-size: 17px;line-height: 22px;font-weight: 600;}
#menu-main_menu li {border-bottom:1px solid transparent;transition: border-color 0.3s ease;}
#menu-main_menu li:hover {border-color: var(--white);}
#menu-main_menu li a:hover ,#menu-main_menu li.current-menu-item.current_page_item{border-color: var(--white);}
.top_header {background-color: var(--white);padding: 10px 0; text-align: end;}
.top_header p { margin: 0;font-size: 16px;line-height: 20px;color: var(--primary-color);font-weight: 600;}
.top_header p a {color: var(--primary-color);}
.footer_section {background-color: var(--primary-color);}
.copyright {color: var(--white);text-align: center;font-size: 16px;}
.footer-menu-wrapper { list-style: none !important; padding: 0 !important; margin: 0 !important;}
.footer-menu-wrapper  li  a, .footer_section p{text-decoration: none;color: var(--white);font-size: 18px;line-height: 24px;font-weight: 400;}
.hero_section {position: relative;width: 100%;height: 800px;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.hero_section::after {position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: -1;}
.bg-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;}
.hero_content {z-index: 1;color: var(--white);text-align: center;padding: 20px;background: rgba(0, 0, 0, 0.5);border-radius: 10px;}
.hero_section h1 {font-size: 48px;line-height: 60px;font-weight: 700;margin-bottom: 20px;}
.whychoose_content {background-color: var(--primary-color) !important;}.whychoose_section h2,.whychoose_section h5,.hbot_chambers_section h2,.testimonial-section h2,.hbot_chambers_section h5 {color: var(--primary-color);}
.whychoose_section .container {max-width: 1200px;margin: 0 auto;}
.whychoose_section,.contact-section ,.benifit_section,.hbot_chambers_section,.testimonial-section{padding: 100px 0;}
.whychoose_section p,.benifit_section p,.hbot_chambers_section p ,.testimonial_content p{font-size: 16px;line-height: 24px;font-weight: 400;}
.benifit_section {background-color: var(--primary-color);}
.primary_btn {background-color: var(--primary-color);padding: 10px 20px;color: var(--white);font-size: 16px;line-height: 20px;font-weight: 600;text-decoration: none;border-radius: 50px;transition: background-color 0.3s ease;border: 1px solid var(--white);}
.primary_btn:hover {background-color: var(--white);color: var(--primary-color);border-color: var(--primary-color);}
.secondary_btn {background-color: var(--white);padding: 10px 20px;color: var(--primary-color);font-size: 16px;line-height: 20px;font-weight: 600;text-decoration: none;border-radius: 50px;transition: background-color 0.3s ease;border: 1px solid var(--primary-color);}
.secondary_btn:hover {background-color: var(--primary-color);color: var(--white);border-color: var(--white);}
.testimonial-section .slick-dots li { margin: 0;}
.testimonial-section .slick-dots li button {background-color: transparent !important;}
.testimonial-section .slick-dots li button:before {color: var(--primary-color) !important;font-size: 12px;width: 20px;height: 20px;border-radius: 50%;}
.testimonial_content {padding: 20px;}
.form_wrapper_main { max-width: 900px;margin: 0 auto;padding: 20px;box-sizing: border-box;border-radius: 10px;font-family: sans-serif;}
.form_wrapper_row {display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 20px;}
.form_col {flex: 1 1 45%;min-width: 250px;}
.form_wrapper_row_select .form_col {flex: 1 1 100%;}
.form_wrapper_main input[type="text"],
.form_wrapper_main input[type="tel"],
.form_wrapper_main input[type="email"],
.form_wrapper_main select,
.form_wrapper_main textarea { width: 100%;padding: 10px 12px;font-size: 1rem;border: 1px solid #ccc;border-radius: 8px;box-sizing: border-box;color: var(--black);font-size: 16px;line-height: 20px;}
.form_wrapper_main input[type="text"]::placeholder,.form_wrapper_main input[type="tel"]::placeholder,.form_wrapper_main input[type="email"]::placeholder,.form_wrapper_main select::placeholder,.form_wrapper_main textarea::placeholder {color: var(--black);}
.form_wrapper_main textarea {min-height: 120px;resize: vertical;}
.form_wrapper_button {text-align: left;}
.form_wrapper_button input[type="submit"] {background-color: var(--primary-color) !important;color: var(--white) !important;padding: 8px 30px;font-size: 16px;line-height: 20px;border: none;border-radius: 50px;cursor: pointer;transition: background-color 0.3s ease;border: 1px solid var(--primary-color);}
.form_wrapper_button input[type="submit"]:hover {background-color: var(--white) !important;color: var(--primary-color) !important;}
.content-section-left {background-color: #f8f9fa;height: max-content;border-radius: 10px;}
.contact-section .text-primary ,.contact-section .icon,.contact-section h1,.contact-section h6,.chamber_model-section h1  {color: var(--primary-color) !important;}
.contact-section h1,.chamber_model-section h1{font-size: 48px;font-weight: 600;line-height: 60px;}
.contact-section a {color: var(--primary-color);}
.contact-section a:hover {text-decoration: underline;}
.contact-section input:focus,
.contact-section textarea:focus,.contact-section select:focus {text-decoration: none; outline: none !important; }
.contact-section input{ margin: 0 !important;}
.contact-section  .wpcf7-not-valid-tip{font-size: 14px;}
.science-section {background-color: var(--white);}
.science-content{padding-top: 100px;}
.science-header{background-image: url("https://hypervets.com/wp-content/uploads/2025/06/Oxygen-BG-scaled-1.webp");background-size: cover;background-position: center;padding-top: 100px;padding-bottom: 100px;position: relative;height: 400px;display: flex;}
.science-header .container {display: flex;flex-direction: column;justify-content: center;    }
.science-header::after {position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;background: #000000a1; z-index: 1;}
.science-header h1{font-size: 48px;font-weight: 600;line-height: 60px;margin-bottom: 10px;color: var(--white);z-index: 2;position: relative;}
.science-header p{font-size: 18px;line-height: 24px;font-weight: 400;color: var(--white);z-index: 2;position: relative;}
.contact-section p,.info-card  p{font-size: 16px;line-height: 20px;font-weight: 400;}
.info-card-header {background: linear-gradient(135deg, #52a6c9, #2d90b1);font-size: 1.1rem;}
.info-card {transition: transform 0.3s ease, box-shadow 0.3s ease; background: var(--white);}
.info-card:hover {transform: translateY(-6px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);}
.learn-btn {color: var(--primary-color);font-weight: 600;text-decoration: none;transition: color 0.3s ease;text-decoration: none;background-color: var(--white);padding: 10px; border-radius: 50px; border: 1px solid var(--primary-color);width: fit-content;font-size: 16px;line-height: 20px;}
.learn-btn:hover {color: var(--primary-color);}
.about-section {background-color: var(--white);padding: 100px 0;}
.about-section h2,.about-section h1 {color: var(--primary-color);}
.about-section ul {list-style-type: disc;}
.about-section h1 { font-size: 48px;font-weight: 600; line-height: 60px; margin-bottom: 20px;}
.about-section h2 {font-size: 24px;font-weight: 600;line-height: 30px;margin-bottom: 20px;padding-top: 30px;}
.about-section ul li span { font-weight: 500;}
.about-section ul li,.about-section p {margin-bottom: 10px;font-size: 16px;line-height: 28px;font-weight: 400;color: var(--black);}
.faq-section{background-color: var(--white);padding: 100px 0;}
.faq-section h1 { color: var(--primary-color);font-size: 48px;font-weight: 600;line-height: 60px;margin-bottom: 30px;}
.faq-section .accordion-button{background-color: var(--primary-color) !important;font-size: 18px !important;line-height: 25px !important;}
.faq-section .accordion-body { font-size: 16px !important;line-height: 24px !important;color: var(--black) !important;}
.faq-section .accordion-button:not(.collapsed) {background-color: var(--primary-color) !important;color: var(--white) !important;}
.faq-section  .accordion-button:focus {box-shadow: none;}
.faq-section  .accordion-button:hover{ background-color: var(--white) !important;color: var(--primary-color) !important;}

/* faq new css */
.accordion-item { border-bottom: 1px  #fff; margin-bottom: 1px;}
.accordion-button.collapsed { border-radius: 0;}
.accordion-button::after { filter: brightness(0) invert(1); }
.accordion-button:hover::after { filter: none;}


.locate_a_chamber_section{padding-top: 100px; background-color: var(--white);}
.flag_button_wrapper button{background: var(--white) !important;border: 1px solid var(--primary-color);color: var(--primary-color) !important;}
.locate_a_chamber_section h1{color: var(--primary-color);font-size: 48px;font-weight: 600;line-height: 60px; margin-bottom: 30px;}
.locate_a_chamber_section p{font-size: 16px;line-height: 22px; color:var(--black)}

.flag_button_wrapper button:hover{background-color: var(--primary-color) !important;color: var(--white) !important;}
.btn-outline-primary-custom {color: var(--primary-color);border: 1px solid var(--primary-color);border-radius: 30px;transition: all 0.3s ease-in-out;}
.btn-outline-primary-custom:hover {background-color: var(--primary-color);color: var(--white);box-shadow: 0 4px 10px rgba(82, 166, 201, 0.3);}
.blog_section .card-img-top{height: 500px !important;object-fit: cover;max-width: 100% !important;}
.blog_section{padding: 100px 0;background-color: var(--white);}
.blog_section h1,.single_post_title_h1{color: var(--primary-color);font-size: 48px;font-weight: 600;line-height: 60px;margin-bottom: 30px;}
.single_post_title_h1{font-size: 36px;line-height: 45px;}
.single_post_title_h1{margin-bottom: 0px;}
.blog_section .card-body{background-color: var(--primary-color);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.blog_section .card-body p{color: var(--white) !important;font-size: 16px;line-height: 24px;font-weight: 400;}
.blog_section .card-body h5{font-size: 20px;line-height: 28px;font-weight: 600;color: var(--white);}
.hbot_chambers_section h5{ font-size: 20px;line-height: 28px;font-weight: 600;margin-bottom: 10px;}
.blog_section .card-body h5 a{ color: var(--white);}
.card-body .btn{color: var(--primary-color);font-weight: 600;text-decoration: none;transition: color 0.3s ease;text-decoration: none;background-color: var(--white); padding: 10px;border-radius: 50px;border: 1px solid var(--primary-color);width: fit-content;font-size: 18px;line-height: 24px;margin-top: 20px;}
.card-body .btn:hover{color: var(--white);border-color: var(--white);}
.blog_section .post-card:hover {box-shadow: 0 8px 24px rgba(82, 166, 201, 0.15);}
.blog_section .blog_section{padding: 100px 0;background-color: var(--white);}
.latest-posts-section h2{color: var(--primary-color);font-size: 36px;font-weight: 600 ;line-height: 45px;}
.single_post_section{ padding:100px 0;}
.latest-posts-section{padding-top: 50px;padding-bottom: 100px;}
.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6,.latest-posts-section h5 a{font-size: 18px;line-height: 28px; font-weight: 500;color: var(--black);}
.post-content p,.post-content ul li{font-size: 16px !important;line-height: 28px !important;font-weight: 400 !important;color: var(--black);}
.post-content p a,.post-content a{color: var(--primary-color);}
.post-content a{text-decoration: none;font-weight: 500;font-size: 16px;line-height: 24px;}
.blog_section .navigation.pagination{border:none !important;}
.latest-posts-section h5 a,.hbot_card_wrapper i{ color: var(--primary-color);}
.hbot_item {padding: 10px 5px;transition: all 0.3s ease;}
.hbot_icon {font-size: 2.5rem;color: var(--primary-color);margin-bottom: 10px;transition: transform 0.3s ease;}
.how-hbot-work-img{margin: 0 auto;max-width: 900px;}
.hbot_item h5 {margin-bottom: 10px;color: var(--black);transition: color 0.3s ease;}
.hbot_item ul {padding-left: 0px;color: var(--black);list-style:none ;font-size: 0.95rem;}
.case-study-list .card-text { display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;}
.blog_section .page-numbers.current,.blog_section .page-numbers{font-size: 16px !important;text-decoration: none !important;line-height: 20px !important;color: var(--primary-color) !important;margin: 0 !important;}
.card_content_p{font-size: 16px !important;line-height: 28px !important;color: var(--black);}
.single_post_img_latest{height: 250px !important;object-fit: cover; max-width: 100%;}
.tab-icon {width: 80px;height: 80px;border-radius: 50%;background-color: var(--primary-color);display: flex;align-items: center;justify-content: center;color: var(--white);margin: auto;transition: 0.3s ease;cursor: pointer;}
.tab-icon:hover, .tab-icon.active {background-color: var(--primary-color);}
.tab-title {margin-top: 10px; font-weight: bold;}
.tab-content-area {display: none;animation: fadeIn 0.6s ease-in-out; }
.tab-content-area.active {display: block;}
.testimonial-box {position: relative;border: 1px solid #8080802b !important;border-left: 8px solid var(--primary-color) !important;border-radius: 20px;min-height: 200px;}
.testimonial-box .quote-icon {font-size: 3rem;position: absolute; bottom: 15px;right: 20px;opacity:1;transform: rotate(180deg);color: var(--primary-color);}
.testimonial-box p {font-size: 0.95rem; color: #555;} 
.benefit-card-modern {transition: all 0.3s ease-in-out;border: 1px solid #eee;position: relative;overflow: hidden;}
.benefit-card-modern:hover {transform: translateY(-6px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);}
.benefit-card-modern ul {padding-left: 1.25rem;list-style: decimal;}
.benefit-card-modern li {font-size: 16px;color: #333;line-height: 20px;margin-bottom: 0.4rem;}
.benefit-card-top h5{color: var(--primary-color);}
.icon-badge {width: 48px;height: 48px;background: #52a6c9; color: #fff;font-size: 20px;border-radius: 50%;display: flex;align-items: center;justify-content: center;} 
.wpcf7 form.sent .wpcf7-response-output{border: none !important;color: #3aa560  !important;font-size: 14px !important;line-height: 20px !important;font-weight: 500 !important;text-align: center !important;margin:16px 0}
.dog_img img{max-height:500px;}
.grid-wrapper {display: grid;grid-template-columns: repeat(4, 1fr);grid-auto-rows: 150px;gap: 10px;}
.grid-item {overflow: hidden;cursor: pointer;position: relative;border-radius: 8px;}
.grid-item img {width: 100%;height: 100%;object-fit: cover;transition: 0.3s ease;border-radius: 8px;}
.grid-item:hover img {transform: scale(1.05);}
.large { grid-column: span 2; grid-row: span 2; }
.vertical { grid-column: span 2; grid-row: span 2; }
.rect { grid-column: span 2; grid-row: span 2; }
.chamber_model-section{padding: 100px 0;}
.chamber_model-section h1{margin-bottom: 10px;}
.chamber_model-section .modal-content {margin-top: -100px;}
.modal { display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.85);justify-content: center;align-items: center;}
.modal-content {position: relative;max-width: 50%;max-height: 50%;}
 .modal-content img {width: 100%;height: auto;border-radius: 8px;}
.close-modal {position: absolute;top: -30px;right: -30px;font-size: 28px;color: var(--white);cursor: pointer;}
.close-modal:hover {color: #ccc;}
.case-study-list {padding: 100px 0; background-color: var(--white);}
.case-study-list h2 {color: var(--primary-color);font-size: 36px;font-weight: 600;line-height: 45px;margin-bottom: 20px;}
.case-study-detail h1{font-size: 48px;font-weight: 600;line-height: 60px;color: var(--primary-color);}
.case_study_dec p, .case_study_dec h3,.case_study_dec h4 ,.case_study_dec h5 ,.case_study_dec h6,.case_study_dec ul li {font-size: 16px;line-height: 24px;font-weight: 400;color: var(--black);margin-bottom: 10px;}
.case_study_p{font-size: 16px;line-height: 24px;font-weight: 400;color: var(--primary-color); margin-bottom: 30px;}
.case-study-detail{padding: 100px 0;background-color: var(--white);}
.case-study-card h5{ color: var(--primary-color);font-size: 20px;line-height: 28px; font-weight: 600; margin-bottom: 10px;text-align: center;}
.case-study-card p{font-size: 16px;line-height: 20px;font-weight: 400;color: var(--black);margin-bottom: 10px;text-align: center;}
.recent-casestudy-section{padding: 100px 0;background-color: var(--white);}
.recent-casestudy-section h2{color: var(--primary-color);font-size: 36px;font-weight: 600;line-height: 45px;margin-bottom: 20px;}
.recent-casestudy-section .card{display: flex;flex-direction: column;align-items: center;}
.recent-casestudy-section .card .case_study_p{text-align: center;margin-bottom: 0;}
.recent-casestudy-section h5,.recent-casestudy-section  .case_study_d{ text-align: center;}
.case_study_d { font-size: 16px;line-height: 24px;font-weight: 400;color: var(--black);margin-bottom: 20px;}
.case-study-card a{ background-color: var(--primary-color);color: var(--white);padding: 10px 20px;border: none;border-radius: 50px;font-size: 16px;line-height: 20px;cursor: pointer;text-decoration: none;border: 1px solid var(--primary-color);transition: background-color 0.3s ease;display: flex;justify-content: center;width: fit-content;margin: 0 auto;&:hover { background-color: var(--white) !important;color: var(--primary-color) !important;border-color: var(--primary-color) !important;}}
.site-header .main-nav {display: flex;gap: 20px;}
.menu-toggle {display: none;font-size: 24px;background: none;border: none;color: var(--black);cursor: pointer;}
.menu-toggle{display: none;}
#imageModal{z-index: 9999;}

@media (max-width: 991px) {
.site-header .main-nav {display: none;flex-direction: column;background: var(--primary-color);position: absolute;top: 100%;right: 0;width: 100%;padding: 10px 36    px; z-index: 999;box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
.hero_section{height: 100%;padding: 100px 0;}
.whychoose_section,.whychoose_section,.hbot_chambers_section,.testimonial-section,.benifit_section,.about-section,.chamber_model-section,.case-study-list,.faq-section,.blog_section,.single_post_section,.contact-section,.recent-casestudy-section,.case-study-detail{padding: 60px 0;}
.science-content,.locate_a_chamber_section{padding-top: 60px;}
.latest-posts-section{padding-bottom: 60px;}
.hero_section h1{font-size: 48px; line-height: 56px;}
.how-hbot-work-img{max-width: 100%;}
.site-header .main-nav.active {display: flex;}
.case_study_dec p, .case_study_dec h3, .case_study_dec h4, .case_study_dec h5, .case_study_dec h6, .case_study_dec ul li,.case-study-detail h1,.case_study_p,.recent-casestudy-section h2{text-align: center !important;}
.contact-section .row{flex-direction: column-reverse;}
.form_wrapper_main{padding: 0;}
.site-header .main-nav.active #menu-main_menu{flex-direction: column !important;gap: 10px !;}
.menu-toggle {display: block;}
button.menu-toggle.header_toggle { background: transparent !important;}
button.menu-toggle.header_toggle  i{color: var(--white);}
.site-header {position: relative;}
}
@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0); }}
@media (max-width: 768px) {
.form_col {flex: 1 1 100%;}
.grid-wrapper {grid-template-columns: repeat(2, 1fr);}
.science-header h1 ,.contact-section h1, .chamber_model-section h1,.locate_a_chamber_section h1,.faq-section h1,.case-study-detail h1,.blog_section h1, .single_post_title_h1{font-size: 40px;line-height: 50px;}
.hbot_icon {font-size: 2rem;}
.about-section ul{padding-left: 10px;}
}
@media (max-width: 575.98px) {
.info-card-body {padding: 1.5rem;}
.site-logo img{max-height: 60px !important;}
}


/* hide Recaptcha */
.grecaptcha-badge {
  visibility: hidden !important;
}


@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2') format('woff2');
}