@charset "UTF-8";
/*
Theme Name: 32 Dental Care
Author: Webdesign 309
Author URI: http://www.webdesign309.com/
Description: We are a full service webdesign and development company delivering high end design and development solution for our clients and delivering best solutions to attract more visibility and customization to your website.
Version: 3.0.0
Tags: peoria web development, chicago web development, custom wordpress development, advertising agency solutions, florida webdesign, chicago webdesign, illinois webdesign, custom webdesign development
*/
@font-face {
    font-family: 'MrsEavesBold';
    src: url('fonts/MrsEavesBold.eot');
    src: url('fonts/MrsEavesBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/MrsEavesBold.woff2') format('woff2'),
        url('fonts/MrsEavesBold.woff') format('woff'),
        url('fonts/MrsEavesBold.ttf') format('truetype'),
        url('fonts/MrsEavesBold.svg#MrsEavesBold') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rotunda Extra';
    src: url('fonts/Rotunda-ExtraBold.eot');
    src: url('fonts/Rotunda-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Rotunda-ExtraBold.woff2') format('woff2'),
        url('fonts/Rotunda-ExtraBold.woff') format('woff'),
        url('fonts/Rotunda-ExtraBold.ttf') format('truetype'),
        url('fonts/Rotunda-ExtraBold.svg#Rotunda-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvenirNextCyr-Regular';
    src: url('fonts/AvenirNextCyr-Regular.eot');
    src: url('fonts/AvenirNextCyr-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/AvenirNextCyr-Regular.woff2') format('woff2'),
        url('fonts/AvenirNextCyr-Regular.woff') format('woff'),
        url('fonts/AvenirNextCyr-Regular.ttf') format('truetype'),
        url('fonts/AvenirNextCyr-Regular.svg#AvenirNextCyr-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AvenirNextCyr-Demi';
    src: url('fonts/AvenirNextCyr-Demi.eot');
    src: url('fonts/AvenirNextCyr-Demi.eot?#iefix') format('embedded-opentype'),
        url('fonts/AvenirNextCyr-Demi.woff2') format('woff2'),
        url('fonts/AvenirNextCyr-Demi.woff') format('woff'),
        url('fonts/AvenirNextCyr-Demi.ttf') format('truetype'),
        url('fonts/AvenirNextCyr-Demi.svg#AvenirNextCyr-Demi') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AvenirNextCyr-Bold';
    src: url('fonts/AvenirNextCyr-Bold.eot');
    src: url('fonts/AvenirNextCyr-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/AvenirNextCyr-Bold.woff2') format('woff2'),
        url('fonts/AvenirNextCyr-Bold.woff') format('woff'),
        url('fonts/AvenirNextCyr-Bold.ttf') format('truetype'),
        url('fonts/AvenirNextCyr-Bold.svg#AvenirNextCyr-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Beloved Script';
    src: url('fonts/BelovedScript.eot');
    src: url('fonts/BelovedScript.eot?#iefix') format('embedded-opentype'),
        url('fonts/BelovedScript.woff2') format('woff2'),
        url('fonts/BelovedScript.woff') format('woff'),
        url('fonts/BelovedScript.ttf') format('truetype'),
        url('fonts/BelovedScript.svg#BelovedScript') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Beloved';
    src: url('fonts/BelovedRegular.eot');
    src: url('fonts/BelovedRegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/BelovedRegular.woff2') format('woff2'),
        url('fonts/BelovedRegular.woff') format('woff'),
        url('fonts/BelovedRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root{
    --body-font:'AvenirNextCyr-Regular';
    --heading-font:'AvenirNextCyr-Bold';
    --sub-heading:'HelveticaNeue-Bold';
    --btn-font:'AvenirNextCyr-Demi';
    --banner-font: 'Beloved';

    --white-color:#FFFFFF;
    --black-color:#000000;
    --blue-color:#375896;
    --body-color:#000000;
    --primary-color:#8FC065;


    


}



*:focus { outline: none ; }

/* 1. Create a Clean Base
------------------------------------------------------------------------------*/
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox { background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }
blockquote { quotes: none; }
br { height: 0; }
ul, ol, dl, li { margin: 0; padding: 0; list-style-type: none; }
ul, ol { margin: 0 0 0 0px; }

html, body { appearance: none; -webkit-appearance: none; border: none; -webkit-text-size-adjust: none; }


/* 2. Define Base Typography
------------------------------------------------------------------------------*/
body { padding: 0; margin: 0; font-family: var(--body-font); font-size: 20px; color: var(--body-color); line-height:30px; box-sizing: border-box; overflow-x: hidden;}
section{ overflow: hidden; }

*, *:after, *:before { box-sizing: border-box; }

/* Create the Default Headers  */
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--green-color); line-height: 1.2; font-weight: normal; font-family: var(--heading-font); text-transform: capitalize; }


/* Specific Header Settings */
h1, .h1 { font-size: 60px;}
h2, .h2 { font-size: 30px;}
h3, .h3 { font-size: 25px;} 
h4, .h4 { font-size: 20px;}
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }

p{ word-wrap: break-word; margin-bottom: 20px; }


/* Other Typo */
strong { font-weight: bold; }
hr { border: 0 #000 solid; border-top-width: 1px; clear: both; height: 0; }
ol { list-style: decimal; }
ul { list-style: disc; }


/* Remove border around linked images */
img { max-width: 100%; border: 0; border-style: none; height: auto; }

/* 4. Links
------------------------------------------------------------------------------*/

/* Default Link Types */
a { text-decoration: none; transition: 0.5s; display: inline-block; color: var(--primary-color);}
a:hover { color:var(--primary-color); }

/* 5. Forms
------------------------------------------------------------------------------*/
.button, a.button, button, html input[type="button"], input[type="reset"], input[type="submit"] { width: 323px; text-align: center; text-transform: capitalize; font-family: var(--btn-font); font-weight: normal; margin: 0 0 0 0; padding: 10px 20px; border-radius: 26px; background-color: var(--white-color); border: 1px solid var(--white-color); display: inline-block; vertical-align: middle; letter-spacing: 0px; font-size: 20px; color: var(--white-color); line-height: 31px; position: relative; outline: none; box-shadow: none; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; overflow: hidden; position: relative; z-index: 0; cursor: pointer; }

/* .button:hover, a.button:hover, button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover{ background-color: transparent; color: var(--header); border-color: var(--header); } */
.button:hover, a.button:hover, html input[type="button"]:hover, input[type="reset"]:hover, button[type="submit"]:hover { background-color:var(--white-color); box-shadow:none; }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea { color: rgba(35, 35, 35, 0.8); padding: 20px 24px; background:rgba(244, 244, 242, 1); font-family: var(--body-font); font-size: 18px; letter-spacing: 0; width: 100%; filter: alpha(opacity=100); border: 1px solid rgba(181, 181, 181, 1); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; line-height: 100%; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; outline: none !important; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; caret-color: var(--primary-color); }

textarea{ padding: 20px 24px; min-height: 107px; background: rgba(244, 244, 242, 1); overflow-y: auto; resize: vertical; }

input::-webkit-input-placeholder { color: rgba(35, 35, 35, 1); opacity: 0.8; text-transform: capitalize; }
input:-moz-placeholder { color: rgba(35, 35, 35, 1); opacity: 0.8; }
input::-moz-placeholder { color: rgba(35, 35, 35, 1); opacity: 0.8; }
input:-ms-input-placeholder { color: rgba(35, 35, 35, 1); opacity: 0.8; }
textarea::-webkit-input-placeholder{color: rgba(35, 35, 35, 1); opacity: 0.8;  text-transform: capitalize; }
textarea:-moz-placeholder { color: rgba(35, 35, 35, 1); opacity: 0.8; }
textarea::-moz-placeholder { color: rgba(35, 35, 35, 1); opacity: 0.8; }
textarea:-ms-input-placeholder { color: rgba(35, 35, 35, 1); opacity: 0.8; }

/* container */
.wrapper { max-width: 1750px; width: 100%; padding: 0 50px; margin: 0 auto;}
.container { max-width: 1500px; width: 100%; padding: 0 50px; margin: 0 auto;}

.col1{max-width: 100%; width: 100%;}
.col2{max-width: 50%; width: 100%;}
.col3{max-width: 33.33%;}
.col4{max-width: 25%;}

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.row-reverse { flex-direction: row-reverse; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-light { font-weight: 300; }

svg path, svg circle{ transition: 0.5s; }


/* header css */
header{ background-color: var(--white-color);   position: sticky; top: 0; left: 0; width: 100%; z-index: 2;}
.header_top{padding: 28px 0 40px;}
.header_logo { max-width: 200px; line-height: 0; }
.header_logo a{width: 100%;}
.header_top_in .new-btn{gap: 123px;}
.phone a:hover{color: var(--primary-color);}
.phone a{color: var(--blue-color);font: normal normal bold 25px/31px var(--heading-font);}
.header_logo a img{width: 100%;height: 100%; object-fit: cover;}
a.button::before, .btn::before { content: ''; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; background-color: var(--primary-color); transition: all .3s ease-in; border-radius:26px !important; transform: scale(1) translate(-50%, -50%); transform-origin: center; z-index: -1; border-radius: 21px; }
a.button:hover:before, .btn:hover::before { width: 98%; height: 88%; }
.header_bottom{padding: 22px 0 17px;background-color:var(--primary-color) ;}
.header_bottom ul li a{color: var(--white-color);font: normal normal bold 20px/38px var(--btn-font);transition: 0.3s all ease-in-out;text-transform: uppercase;position: relative;}
.header_bottom ul li > ul.sub-menu > li > a{ font-size: 18px; line-height: 28px;}
.header_bottom ul li a:hover{ text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1), 1px -1px 0 rgba(255, 255, 255, 0.1), -1px  1px 0 rgba(255, 255, 255, 0.1), 1px  1px 0 rgba(255, 255, 255, 0.1), -1px  0   0 rgba(255, 255, 255, 0.1), 1px  0   0 rgba(255, 255, 255, 0.1), 0    1px 0 rgba(255, 255, 255, 0.1), 0   -1px 0 rgba(255, 255, 255, 0.1); }
.footer_logo{gap: 18px;}
.footer_in{ justify-content: space-around !important;} 
footer{padding: 33px 0 19px;}
.footer_logo_text { max-width: 13%; width: 100%; }
.footer_logo { max-width: fit-content; width: 100%; }
.footer_link { max-width: fit-content; width: 100%; }
.footer_img { line-height: 0;max-width: 257px; width: 100%;}
.footer_img a{ width: 100%;line-height: 0; }
.footer_img a img{ width: 100%;height: 100%;object-fit: cover; }
footer{color: var(--blue-color);background-color: #F0F0F0; font: normal normal bold 20px/30px var(--heading-font);}
footer p{margin-bottom: 0;}
.footer_copy p{text-align: center;padding: 24px 0 0;font: normal normal bold 20px/30px var(--heading-font);}
footer a{color: var(--blue-color);font: normal normal bold 20px/30px var(--heading-font);}
.footer_link h3,
.footer_logo_text h3{position: relative; padding: 0 0 17px;} 
.footer_link{ flex-direction: column;} 
.footer_link h3:after,
.footer_logo_text h3:after { position: absolute; content: ""; background: var(--primary-color); height: 4px; width: 38px; left: 0; bottom: 0; }
.footer_logo_text .foot_contact {padding: 11px 0 0; }
.footer_logo_text .foot_contact a { position: relative; padding: 6px 0 6px 30px; }
.footer_logo_text .foot_contact > a:first-child::after { position: absolute; content: ""; background: url(images/pin.webp) no-repeat center; height: 25px; width: 25px; left: -4px; top: 9px; background-size: cover; }
.footer_logo_text .foot_contact a::after{ position: absolute; content: ""; background: url(images/phone-call.webp) no-repeat center; height: 20px; width: 20px; left: 0; top: 9px; background-size: cover; }
.footer_logo_text .foot_contact a:last-child::after{ position: absolute; content: ""; background: url(images/email.webp) no-repeat center; height: 20px; width: 20px; left: 0; top: 12px; background-size: cover; }
    /* Anjali Start */

    /* sub-menu */
/* ul li ul.sub-menu { padding-left: 0 !important; white-space: nowrap; display: block; border-radius: 5px; flex-direction: column; gap: 0; position: absolute; margin: 0px 0 0; z-index: 3; text-align: center; transform: scaleY(0); transition: .3s; transform-origin: top; box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px; min-width: 300px; background-color: #fff; } */
/* .footer-item.list ul li.current-menu-item>a, header ul li a:hover, header ul li.current-menu-item>a, .header-top-left li a:hover, footer ul li a:hover, ul li.current-page-parent>a { color: var(--primary-color); } */
/* ul li:hover>ul.sub-menu { transform: scaleY(1); }
ul li ul.sub-menu li a { padding: 9px 50px 9px 25px !important; display: block;color: var(--black-color);  border-bottom: solid 1px var(--primary-color); transition: .4s ease-in-out; font-size: 20px; text-align: left; line-height: 26px; }
ul li ul.sub-menu li:last-child >a{ border-bottom: 0; }
ul li ul.sub-menu li{ position: relative;}
ul li ul.sub-menu li > ul.sub-menu{ left: 100%; top: 0; margin-left: 4px; visibility: hidden;}
ul li ul.sub-menu li:hover > ul.sub-menu{visibility: visible;} */


.header_bottom nav > ul > li{position: relative !important;}

.header_bottom nav ul li > ul.sub-menu {
    align-items: self-start;
    position: absolute;
    padding: 10px;
    left: 0;
    top: 100%;
    min-width: max-content;
    z-index: 1000;
    background: var(--primary-color);
}
.nav ul li ul.sub-menu li ul.sub-menu{left:100%;top:0;transform:scale(0);transition:.3s;transform-origin:left top}
.nav ul li ul.sub-menu li:hover ul.sub-menu{transform:scale(1)}
.nav ul.sub-menu li.menu-item-has-children:hover>a,.nav ul.sub-menu li.menu-item-has-children>a{background:0 0}
.nav ul.sub-menu li.menu-item-has-children:hover>a:after{transform:rotate(-90deg) translateY(-50%);top:43%}
.nav ul.sub-menu li.menu-item-has-children>a:after{transform:rotate(0) translateY(-50%);top:50%;transition:.2s}
 li > ul.sub-menu{display:grid;padding:15px 20px;justify-content:start;gap:0;transition:.5s;transform:scaleY(0);transform-origin:top center;border-radius:0 ;grid-template-columns:auto auto auto}
li > ul.sub-menu > li:first-child,li > ul.sub-menu > li:nth-child(2){grid-row:1/span 2}
li > ul.sub-menu > li.combine_state_cls:nth-child(2){grid-column:3;grid-row:2}
li:hover > ul.sub-menu{transform:scaleY(1)}
li  ul.sub-menu li > ul.sub-menu li a {
    padding: 7px 0px 0px 0;
    color: rgba(255,255,255,.8);
    font-size: 16px;
    line-height: 26px;
}
li  ul.sub-menu li{width:100%; flex:1;}
li  ul.sub-menu li > ul.sub-menu{border-left:1px solid #fff;position:relative!important;display:block;transform:scale(1)!important;left:0!important;margin-left:5px;}
li  ul.sub-menu li > ul.sub-menu li a {
    padding: 7px 0px 0px 0;
    color: rgba(255,255,255,.8);
}
li  ul.sub-menu li > ul.sub-menu li.current-menu-item a{color:rgba(255,255,255)}
ul.menu > li.current-menu-ancestor,ul.sub-menu > li > ul.sub-menu > li.current-menu-ancestor{background-color:#c30a0a!important}
li {position:unset!important}
.nav ul li  ul{left:110px}





    /* banner */
     .banner {background: linear-gradient(#f0f0f0,  #f0f0f0ED,  #f0f0f013,  #f0f0f000); position: fixed; top: 247px; left: 0; height: 100vh;}
    .banner-img { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(3, 260px); gap: 12px; }
    .banner-img img { width: 100%; height: 100%; object-fit: cover; }
    .banner-img-1 {grid-column: 1 / span 3;  line-height: 0;}
    .banner-img-2 {grid-column: 4 / span 2; line-height: 0;}
    .banner-img-3 {  grid-row: 1 / span 2; grid-column-start: 4; grid-column: 6 / span 3; line-height: 0;}
    .banner-img-4 {  grid-row: 1 / span 2; grid-column-start: 6; grid-column: 9 / span 2; line-height: 0;}
    .banner-img-4 img {object-position: left;} 
    .banner-img-5 {grid-column: 1 / span 1; grid-row: 2 / 4;  line-height: 0;}
    .banner-img-6 {grid-column: 2 / span 4; grid-row: 2 / 4; line-height: 0;}  
    .banner-img-7 {grid-column: 6 / span 2; line-height: 0;}
    .banner-img-8 {grid-column: 8 / span 2; line-height: 0;}
    .banner-img-9 {grid-column: 10 / span 1; line-height: 0;}

    .appointment, .appointment-inr {position: relative;}
     .appointment::after {content: ''; background: url('images/shap-1.png')no-repeat center ; background-size: 100% 100%; top: 45%; left: 0; height: 100%; width: 100%; position: absolute; }
      .appointment::before {position: absolute; content: ''; width: 2266px; height: 520px; background: #FFFFFF; mix-blend-mode: saturation; opacity: 1; filter: blur(50px); top: 0; left: 0;}
    .appointment-inr::before { content: ''; background: url(images/banner-logo.webp) no-repeat center; top: 4%; left: 10%; height: 690px; width: 690px; position: absolute; background-position: left; z-index: 1; background-size: 100%; opacity: 0; visibility: hidden; }
     .appointment-inr::after {content: ''; background: url('images/shap-2.png')no-repeat center ; background-size: 100% 100%; top: 1px; left: 0; height: 100%; width: 100%; position: absolute; opacity: 0; visibility: hidden; 
  /* animation: upThenDown 5s ease-in-out forwards; */
 }
/* @keyframes upThenDown {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
} */

    .appointment-para-img {text-align: right; padding-top: 40px;}
    .appointment-text-img { padding: 45px 150px 0 60px; }
   .appointment-text {position: relative; z-index: 1; padding-top: 150px;}
   .appointment-text .new-btn {text-align: center; padding: 0 0 40px;}
   .appointment-text h1, .smile-needs-inr h2 {color: var(--blue-color); font-size: 60px; line-height: 58px; text-align: center; padding-bottom: 10px;}
   .appointment-text h1 { width: 48%; margin: 0 auto; }
  .appointment-text p { margin-bottom: 0; width: 82%; margin: 0 auto; }

   body.show-shap .appointment-heading img { animation-name: fadeInLeft ; animation-duration: 1s; animation-fill-mode: both;}
   @keyframes fadeInLeft  { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
   body.show-shap .appointment-para-img { animation-name: fadeInBottom; animation-duration: 1s; animation-fill-mode: both;}
   @keyframes fadeInBottom { from { opacity: 0; transform: translateY(100%); } to { opacity: 1 } }


/* 
    body.show-shap .appointment-inr::before { content: ''; background: url(images/banner-logo.webp) no-repeat center; top: 4%; left: 10%; height: 690px; width: 690px; position: absolute; background-position: left; z-index: 1; background-size: 100%; opacity: 1; visibility: visible; }
    body.show-shap .appointment-inr::after {content: ''; background: url('images/shap-2.png') no-repeat center ; background-size: 100% 100%; top: 1px; left: 0; height: 100%; width: 100%; position: absolute; opacity: 1; visibility: visible;  } */
   


    /* smile-needs */
    .smile-needs {background: linear-gradient(#f0f0f0,  #f0f0f0ED,  #f0f0f013,  #f0f0f000), url('images/smile-img.webp')no-repeat center ; height: 569px; width: 100%; padding: 50px 0 0;}
    .smile-needs-content {gap: 25px; padding-top: 10px;}
    .smile-needs-main-text {border: 1px solid var(--primary-color); border-radius: 47px; padding: 26px 56px; font-size: 30px; background-color: #FFFFFF; height: 100%; transition: 0.5s all; overflow: hidden;}
    .smile-needs-main-text h3 {text-align: center;}
    .smile-needs-main-text h3,  .smile-needs-text ul li {color: var(--blue-color); font-family: var(--heading-font);}
    .smile-needs-text { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.5s ease, max-height 0.5s ease;}
    .smile-needs-text ul {padding-top: 12px; }
    .smile-needs-text ul li {font-size: 18px; position: relative !important; padding: 3px 0 3px 12px;}
     .smile-needs-text ul li::before {content: '';  transform: translateY(-50%); position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: var(--blue-color); top: 18px; left: 0; }
      .smile-needs-main-text:hover  .smile-needs-text {  opacity: 1; max-height: 500px; }
    .smile-needs, footer {position: relative;}

    /* Anjali End */


  /* about page */
.inr_banner { position: relative; }
.inr_banner_img { position: relative;line-height: 0;height: 300px; }
.inr_banner_img img { width: 100%; height: 100%; object-fit: cover; }
.inr_banner_txt h1 { color: var(--white-color); }
.inr_banner_txt { text-align: center; }
/* .inr_banner_txt { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } */
.inr_banner_img::after { position: absolute; content: ''; width: 100%; height: 100%; background: rgba(99, 148, 204, 0.6); left: 0; top: 0; }
.p_tb_80 { padding: 80px 0px; }
.philosophy_inr { position: relative; }
.philosophy_img { margin-left: auto; width: 60%; border-radius: 5px;height: 780px; }
.philosophy_img img{ border-radius: 5px;height: 100%;object-fit: cover;object-position: top; }


.experienced .philosophy_inr .textimonial { transform: inherit; position: inherit; margin-right: -100px; width: 54%; padding: 50px; left: 0px; bottom: -50px; right: 30px; top: 50%; background-color: #fff; border-radius: 5px; border: 4px solid var(--blue-color); height: fit-content; }
.title h2 { font-size: 58px; color: #101010; position: relative;  font-family:var(--sub-heading); text-transform: capitalize; padding-bottom: 15px; margin-bottom: 20px; }
.title h2::after { position: absolute; content: ''; width: 40px; height: 3px; bottom: 0; left: 20px; transform: translateX(-50%); background-color: var(--blue-color); }
.experienced .textimonial h3 { line-height: 36px; margin-bottom: 15px; }
.experienced .textimonial p:last-child { margin-bottom: 0px; }
.experienced .textimonial p{line-height: 34px;}
.philosophy_inr .textimonial h2 { text-align: left; }

.mission { background-color: #f9f9f9; margin-top: 100px; overflow: visible; }
.mission .title h2::after { left: 50%; }
.heading_box { padding: 25px; border: 3px solid var(--blue-color); border-radius: 5px;max-width: 471px; display: table; width: max-content; margin: auto; margin-top: -160px; background-color: #fff; }
.title { width: 100%; text-align: center; padding-bottom: 20px; }
.mission .title h2 { margin-bottom: 0px; }
.mission .title p {/* display: inline-block;*/ font-size: 16px; line-height: 26px; }
.mission .mission_content { padding-left: 30px; margin-top: 30px; }
.title p { padding-top: 10px; }
.mission .mission_content h3 { color: var(--black-color); margin-bottom: 15px; position: relative; }
.mission .mission_content p { margin-bottom: 25px; }
.mission .mission_content h3::after { position: absolute; content: ''; /* color: var(--primary-color); */ left: -30px; top: 4px; background-image: url(images/circle-check-solid.svg); font-family: 'fontello'; background-repeat: no-repeat; width: 21px; height: 21px; background-size: cover; font-size: 20px; }
.recognize { background-color: var(--blue-color); }
.recognize h2 { font-family: 'Cicle Gordita'; text-align: center; width: 90%; color: var(--white-color); margin: auto; position: relative; padding-bottom: 15px; margin-bottom: 25px; font-size: 54px; }
.recognize h2::after { position: absolute; content: ''; width: 40px; height: 3px; bottom: 0; left: 50%; transform: translateX(-50%); background-color: var(--black-color); }
.recognize h4 { color: var(--body-color); text-align: center; font-weight: 600; }



/* health_dentistry.php */
.health_dentistry { padding: 40px 0 90px 0; }
.slider_content_div-2 { width: 50%; float: right; }
.slider_content_div-1 { padding: 0 38px 0 0; }
.left_text_section h4 { font-size: 30px; color: #101010; font-weight: bold; line-height: 35px; text-transform: uppercase; white-space: nowrap; }
.left_text_section p { line-height: 30px; padding: 10px 0; font-size: 18px; margin-bottom: 0; color:var(--body-color); }
.left_text_section .btn { margin: 26px 0 0 0; }
.carousel-slider .swiper-wrapper { display: flex; align-items: center; max-height: 456px; max-width: 100%; cursor: auto !important; }
.carousel-slider{position: relative;} .carousel-slider .swiper-slide { width: clamp(150px, 15vw, 293px); height: clamp(150px, 15vw, 293px); aspect-ratio: 1 / 1; box-sizing: border-box; padding: 1rem; display: flex; justify-content: center; align-items: center; }
.carousel-slider .swiper-slide { /* background: rgba(9, 21, 50, 0.2); */padding: 0; border-radius: 25px; }
.carousel-slider .swiper-slide.swiper-slide-next, .carousel-slider .swiper-slide.swiper-slide-prev { /* background: rgba(9, 21, 50, 0.75); */ padding: 0; }
.carousel-slider .swiper-slide.swiper-slide-active { /* background: #0762e5; */ padding: 0; /* box-shadow: 0 0 25px 2px rgba(255, 255, 255, 0.7); */ }
.carousel-slider .item-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; }
.carousel-slider .item-content a{ width: 100%; height: 100%; } .carousel-slider .item-content a img{ width: 100%; height: 100%; object-fit: cover; }
.oral_dna_testing .left_text_section p a:hover { color:var(--body-color); }
.health_dentistry a.button{margin-top: 26px;} .swiper-button-prev, .swiper-button-next { z-index: 1; }


.swiper-button-prev:hover, .swiper-button-next:hover { color: var(--primary-color); }
.new_patients { padding: 41px 0 90px 0; }

/* 21-05-2025 */
/* contact us */
.contact_text{padding: 80px 0;  } 
.common_banner_text { position: relative;  }
.common-banner-inr::before { z-index: 1; }
.contact_text .dummy_text_text{flex-direction: column;}
.contact_text .dummy_text_text .dummy_text_box{padding: 30px 0;text-align: center; border-top: 5px solid var(--blue-color); border-bottom: 5px solid var(--blue-color) }
.contact_text .dummy_text_text .dummy_text_box img{padding-bottom: 30px;}
.contact_text .dummy_text_text .dummy_text_box h3{padding-bottom: 20px; text-transform: capitalize; }
.contact_text .dummy_text_text .dummy_text_box p{margin-bottom: 0;width: 312px; margin: auto;}
.contact_text .dummy_text_text .dummy_text_box:last-of-type{ border-bottom: 5px solid var(--blue-color);}
.contact_text .dummy_text_text .dummy_text_box:first-of-type{border-top: 5px solid var(--blue-color);border-bottom:0;}

.contact_text .dummy_text_in .dummy_text_text { max-width: 33%; width: 100%; }
.input_filed { padding: 12px 15px; }
.contact_text .dummy_text_in .dummy_text_img { max-width: 67%; width: 100%; }
.contact_from input[type="text"],.contact_from input[type="email"],.contact_from select,.contact_from textarea{border: 1px solid #00000026}
.contact_from form { flex-wrap: wrap; padding:  20px  0; background: transparent; box-shadow: none; border-radius: 8px; margin: 0 -15px; }
.dummy_text_in { gap: 150px; }
.dummy_text_box img{ width: 100px; height: 100px; margin: 0 auto; object-fit: contain; }
.btn.button{ padding: 0; max-width: 200px; width: 100%; margin-left: 15px; }
.btn.button input[type="submit"]{ background-color: transparent; max-width: 200px; width: 100%; }
.row{ display: flex;  justify-content:center; flex-wrap: wrap;margin:0 -30px;}

.patients_inr_text{ text-align: center; height: 100%;}
.patients_inr_text h4{ color: var(--blue-color); padding-bottom: 12px; }  

.download_btn.button{ margin-top: auto; }
.patients_inr_img {width: 100%; background: #fff; border-radius: 10px; overflow: hidden; border: solid 1px #cfcfcf; margin: 25px 0px; transition: all 0.4s ease-in; }


.patients_inr_text a:hover .patients_inr_img { border: solid 1px #fff; }
.patients_inr_text a:hover .patients_inr_img { box-shadow: 0px 0px 54px rgba(16, 16, 16, 0.12); }

/* .new_patients .row div{ height: 100%; } */
.patients_inr_text a{    display: flex ; flex-direction: column; align-items: center;}


/* mahma */
.contact-form-in { width: 100%; background: #fff; border-radius: 10px; box-shadow: 0px 0px 54px rgba(16, 16, 16, 0.12); padding: 40px 0px 70px; margin-top: 60px; }
.form_inner{ max-width: 80%; width: 100%; margin: 0 auto; }
.title { text-align: center; margin-top: 40px; }
.contact-form .title { margin-bottom: 38px; }
.contact-form-in  .title h2::after { position: unset; display: none; }
.contact-form .title { margin-bottom: 38px; padding-bottom: 0px; }
.contact-form input { width: 100%; background: #f5f5f5; border: 0; border-radius: 10px; font-size: 18px; color: #666666; padding: 20px 28px; }
.btn.button input[type="submit"] { background-color: transparent; max-width: 200px; width: 100%; padding: 10px 20px; color: var(--white-color); }
form{display: flex;flex-wrap: wrap;}
.input_fild{padding: 12px 15px; width: 100%;}
.contact-form .title h2 { font-size: 30px; text-transform: capitalize; font-weight: bold;padding:0;margin-bottom: 0; }
.patients_inr_text .new-btn{   margin: 20px auto 0; display: inline-block;}


 /* def-page */ 
 .def-page {
padding: 80px 0;
}
 .def_page_otr {padding: 80px 0;}
 .def-page p{ font-family: var(--body-font); color: var(--body-color); font-style: normal; font-weight: 400; margin-bottom: 15px; }
 .def-page .right-img{float:right; margin:0 0 15px 40px; position: relative; z-index: 0; line-height: 0;}
 .def-page .left-img{float:left; margin:0 40px 15px 0; position: relative; line-height: 0;}
 .def-page .right-img img{border-radius: 0px;border-radius: 5px; position: relative; height: auto;}
 .def-page .left-img img{border-radius: 0px;border-radius: 5px; position: relative; height: auto;}
 .def-page h2, .def-page h3, .def-page h4, .def-page h5, .def-page h6{ margin: 0 0 15px 0; color: var(--green-color); line-height: 1.2; font-weight: normal; font-family: var(--heading-font); text-transform: capitalize;  }
 .def-page h2{ font-size: 30px; line-height: 40px;} 
 .def-page h3{font-size: 25px; line-height: 35px;}
 .def-page h4{font-size:20px; line-height:30px; }
 .def-page h5{ font-size:18px; line-height:28px; }
 .def-page h6{font-size: 16px; line-height: 26px;}
 .privacy-page > div > p{ padding-bottom: 0; }
 .def-page a:hover{color: var(--body-color);}
 .def-page ul {list-style-type: none; padding-bottom: 15px; max-width: inherit; width: inherit; margin: 0; }
 .def-page ul li { list-style: none;font-size: 20px; color: var(--body-color); position: relative !important; padding: 6px 18px;}
.def-page ul li::before {
    content: '';
    position: absolute;
    background-color: var(--primary-color);
    width: 8px;
    height: 8px;
    top: 18px;
    left: 0;
    border-radius: 50%;
}
 .def-page ol{padding-left: 0; padding-bottom: 15px ; }
 .def-page ol li {list-style-type:none;counter-increment:item;font-size: 20px; color: var(--body-color); padding:5px 0; }
.def-page ol li:before {display:inline-block; content: counter(item) ".";  color: var(--body-color);  padding-right:10px;}
 .def-page ul.col-2, .def-page ul.col-3 { overflow: hidden }
 .def-page ul.col-2 li {width: 50%;float: left;}
 .def-page ul.col-3 li {width: 33.33%;float: left;}
 .privacy-page ol { margin-bottom: 25px;}
 .privacy-page ol>li:before { padding-right: 05px;}
 .privacy-page .privacy-inner{ padding-left: 30px; margin-bottom: 20px;}
 .privacy-page .privacy-inner ul{ margin-top: 05px; }
 .privacy-page ul,.privacy-page ol{ margin-left:20px;}
 .privacy-page ol li{padding: 5px 0px;}
 .pagenotfound {width: 100%;display: block; padding: 70px 0px 80px; text-align: center;}
 .pagenotfound h2 {font-size: 50px;font-weight: 600;}
 .pagenotfound p{font-size: 16px; text-align: center;}
 .thankyou {text-align: center;}
 .thankyou h3 strong {font-size: 46px;}
 .clearfix:after { clear: both; display: block; visibility: hidden; content: ""; }
 .fl{float:left}.fr{float:right}.cl,.clear,.clr,.social_share{clear:both}.clearfix:after{clear:both;display:block;visibility:hidden;content:""}
 
 /* contact form css */
 input.wpcf7-not-valid { border: 1px solid red !important; }
 .wpcf7-not-valid-tip { color: #dc3232; font-size: 1em; font-weight: normal; display: block; }
 .wpcf7-not-valid-tip { display: none; }
 .cf7sr-recaptcha .wpcf7-not-valid-tip { display: block !important; font-size: 15px; }
 


.carousel { position: relative; height: 488px; }
.carousel__slide { position: absolute; top: 0; left: 50%; width: 458px; height: 488px; transform: translateX(-50%); transition: transform 0.5s ease, z-index 0.5s ease; will-change: transform; pointer-events: none; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.3); }
.arrow { position: absolute;  font-size: 35px; height: 35px; width: 35px; line-height: 35px; color: #333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; top: 50%; transform: translateY(-50%); background-color: transparent; padding: 0; border-radius: 0; border: none; }
.arrow.left { left: 10px; text-align: left; }
.arrow.right { right: 10px; text-align: right; }

/* 27-5-25 H.P */
.patients_inr_img img { vertical-align: middle;width: 100%; }

/* File Upload Wrapper */
.file_upload_wrapper {
    margin: 20px 0;
}

/* Custom File Upload Label */
.file_upload_label {
    display: inline-block;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    padding: 15px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    /* text-align: center; */
}

.file_upload_label:hover {
    /* background: #e0e0e0; */
    border-color: #999;
}

/* File Upload Button */
.file_upload_button.button {
    background: #8FC065;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    margin-right: 10px;
    border-radius: 26px;
    border: 2px solid var(--primary-color);
    transition: background 0.3s ease;
        width: 216px;
        font-size: 18px;
}

.file_upload_button.button:hover {
    background: #e87525;
}

/* File Upload Text */
.file_upload_text {
    color: #666;
    font-style: italic;
}

/* Hide Default File Input */
.file_upload_input {
    display: none;
}

/* Style for when a file is selected */
.file_upload_input:not(:placeholder-shown) + .file_upload_label .file_upload_text {
    color: #0073e6;
    font-style: normal;
    font-weight: bold;
}



/* 27-5-2025 */
.submit-recaptcha { display: flex; align-items: center; gap: 20px; }
.wpcf7-response-output { display: block; width: 100%; text-align: center; }
 .btn::before {
    
    position: unset;
    
}
.submit-btn input[type="submit"]{
       background-color: var(--primary-color);
    color: var(--white-color);
    border: 2px solid var(--primary-color);
    border-radius: 500px;
       padding: 10px 20px;
           width: 100%;

}
.submit-btn input[type="submit"]:hover{
    color: var(--primary-color);
    background-color: transparent;
    border: 2px solid var(--primary-color);
   
}
.wpcf7-spinner {
   
    width: 39px;
    height: 26px;
   
    margin: 0 0;
    
}
.submit-btn {
    display: flex
;
    align-items: center;
    gap: 20px;
}
span.file_upload_button.button:hover {
   color: var(--primary-color);
    background-color: transparent;
    border: 2px solid var(--primary-color);
  
}



/* mahima  */
.contact_text .dummy_text_text .dummy_text_box h3 >a{color: var(--body-color);}
.contact_text .dummy_text_text .dummy_text_box p a {color: var(--body-color);}
.contact_text .dummy_text_text .dummy_text_box p a:hover ,.contact_text .dummy_text_text .dummy_text_box h3 >a:hover{color: var(--primary-color);} 
/* .row .col3:last-of-type{ margin: 0 auto;} */
.row .col3{
   width: 100%;
   padding:15px 30px;
}
.oral_dna_testing .left_text_section p a.button:hover { color: var(--white-color); }
.discover_div.default_page { padding: 60px 0 40px; }
.discover_div .default_page_otr { margin: 0 auto; max-width: 1235px; }
.discover_div  h2,.about_div h2,.benefits_div h2,.premium_div h2 { text-align: center;font-size: 30px;margin-bottom: 10px; }
.about_div h2,.about_left_inr h2{ font-size: 30px;margin-bottom: 10px; text-align: start;}
.about_div { padding: 60px 0; width: 100%; display: block; background: #e4e4e4; position: relative; }
.about_right { width:700px; float: right; right: 0;; height: 450px;     margin: 0 0 10px 40px; }
.about_left {  width: 100%; }
.about_right_inr { line-height: 0;height: 100%; border-radius: 10px; overflow: hidden;}
.about_right_inr  img{height: 100%; width: 100%; object-fit: cover;}

.discover_div { padding: 60px 0 40px; text-align: center;}
.premium_div{ padding: 80px 0;text-align: center; }
 .premium_div .title { text-align: center; margin-top: 0px; }
.benefits_div { width: 100%; display: block; padding: 60px 0; background: #e4e4e4; }
.benefits_div .title { padding-bottom: 30px; }
.benefits_div .benefits_div_otr >div p {
  text-align: center;
}
.benefits_div_inr{ margin: 0 -15px; }
.premium_col { width: 48%; display: inline-block; vertical-align: top; margin-right: -2px; padding: 0 15px; }
.benefits_div .premium_col_inr { padding: 10px 0; }
.benefit_icon { width: 19%; }
.benefit_txt h4 { font-size: 36px; font-weight: 700; line-height: 48px; color: var(--primary-color); text-transform: uppercase; }
.benefit_txt { width: 80%; padding-left: 30px; }
.benefit_icon, .benefit_txt, .default_page ul li { display: inline-block; vertical-align: top; margin-right: -2px; }
.premium_div ul  { display: flex; flex-wrap: wrap; }
.default_page ul li { /* color: #666; */ position: relative !important; padding: 6px 0 7px 30px; text-align: left; max-width: 50%; width: 100%; }
.default_page ul li:before, .section2_home_text.default_text ul li:before { position: absolute; content: ""; width: 8px; height: 8px; left: 7px; border-radius: 50%; background-color: var(--primary-color); top: 17px; }
.distributers_div { width: 100%; display: block; padding: 60px 0; background: #e4e4e4;}
.distributers_div .about_right { left: 0; right: inherit; float: left; left: inherit; right: inherit; position: inherit; margin-right: 50px; width: 700px; }
/* .distributers_div .about_left ul li{ max-width: 100%; width: 100%;} */
.distributers_div .about_right_inr img { border-radius: 10px; height: 450px;  object-fit: cover; }
.about_left_inr p { }
/* .about_left_inr h2 { padding-bottom: 10px; } */
section.discover_div .title { margin: 0; padding: 0; }
.about_div_inr { position: relative; }
 .discover_div  .title h2 { font-size: 25px;margin-bottom: 10px; }
 .about_div a:hover,.premium_div  a:hover,.discover_div a:hover{color: var(--body-color);}
 header .header_bottom  ul li.menu-item-has-children > a::after { content: ''; position: absolute; right: -18px; border-top: 3px solid var(--white-color); border-left: 3px solid var(--white-color); top: 9px; transform: rotate(-136deg); width: 12px; height: 12px; transition: 0.3s all ease-in-out; }
 header .header_bottom  ul li ul.sub-menu li.menu-item-has-children > a::after { display: none; }
 header .header_bottom  ul li ul.sub-menu li > a:hover{color: white !important; }
header .header_bottom ul li  ul li.menu-item-has-children>a::after { right: 20px; border-top: 3px solid var(--black-color); border-left: 3px solid var(--black-color); top: 20px; }
header .header_bottom nav > ul{ align-items: self-start !important;}
header .header_bottom  ul li a:hover, header .header_bottom  ul li.current_page_item a, header .header_bottom  ul li.current-menu-ancestor a { text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1), 1px -1px 0 rgba(255, 255, 255, 0.1), -1px 1px 0 rgba(255, 255, 255, 0.1), 1px 1px 0 rgba(255, 255, 255, 0.1), -1px 0 0 rgba(255, 255, 255, 0.1), 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.1); }
ul li ul.sub-menu li a:hover { color: var(--white-color); }
 header .header_bottom ul li.current-menu-parent.menu-item-has-children>a, header .header_bottom ul li.current-menu-parent.menu-item-has-children a::after { text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1), 1px -1px 0 rgba(255, 255, 255, 0.1), -1px 1px 0 rgba(255, 255, 255, 0.1), 1px 1px 0 rgba(255, 255, 255, 0.1), -1px 0 0 rgba(255, 255, 255, 0.1), 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.1); }
header .header_bottom ul li ul.sub-menu li a:hover, header .header_bottom ul li ul.sub-menu li.current-menu-item a,header .header_bottom ul li ul.sub-menu li.current-menu-parent> a { color:white;}
header .header_bottom ul li ul.sub-menu li.current-menu-item a::after,    header .header_bottom ul li ul.sub-menu li a:hover:after,header .header_bottom ul li> ul li.current-menu-parent>a::after{border-color: var(--primary-color);}



/* 29-5-2025 */
/* ul.col-3,ul.col-2 {float: left;} */
ul.col-2 li{max-width: 50%;width: 100%;float: left;}
ul.col-3 li{max-width: 33.33%;width: 100%;float: left;}

.title p{
padding: 0;
}

/* Anjali */
.benefit_txt p {text-align: left !important;}
.full_width {width: 100%;}
/* .about_left .about_left_inr p, .about_left .about_left_inr h3, .about_left .about_left_inr h4, .benefits_div_content h3, .benefits_div_content h4, .bottom_content h3, .bottom_content p {text-align: center;} */
.benefits_div_content h3, .benefits_div_content h4 { text-align: center; }
.about_left .about_left_inr h3, .about_left .about_left_inr h4, .premium_div_content h3, .premium_div_content h4, .benefits_div_content h3, .benefits_div_content h4, .bottom_content h3, .premium_col_inr h3, .premium_col_inr h4 {padding-bottom: 15px;}
.about_left .about_left_inr ul li {max-width: 100%; position: relative !important; padding: 6px 0 7px 30px;}
.about_left .about_left_inr ul li::before {    position: absolute; content: ""; width: 8px; height: 8px; left: 7px; border-radius: 50%; background-color: var(--primary-color); top: 17px;}
.benefits_div_content ul li { position: relative; padding: 6px 0 7px 30px;}
.benefits_div_content ul li::before {    position: absolute; content: ""; width: 8px; height: 8px; left: 7px; border-radius: 50%; background-color: var(--primary-color); top: 17px;}
.about_left .about_left_inr ul{overflow: hidden;}
.about_left .about_left_inr ul.col-2 li {width: 50%;}
.distributers_div .about_right {margin: 0 40px 10px 0;}
.about_left .about_left_inr ul , .benefits_div_content ul, .bottom_content ul, .premium_div_content ul {margin-bottom:15px;}
.premium_col_inr ol { display: flex ; flex-wrap: wrap;} 
.premium_col_inr ol li {position: relative; padding: 6px 0 7px 30px; text-align: left; max-width: 50%; width: 100%;}

.about_left .about_left_inr ol, .benefits_div_content ol, .default_page_otr ol, .premium_div_content ol, .premium_col_inr ol {margin-bottom: 15px;}
.about_left .about_left_inr ol li, .benefits_div_content ol li, .default_page_otr ol li, .premium_div_content ol li, .premium_col_inr ol li {list-style-type:none;counter-increment:item; padding:5px 0;}
.about_left .about_left_inr ol li:before, .benefits_div_content ol li:before, .default_page_otr ol li::before, .premium_div_content ol li::before, .premium_col_inr ol li::before {display:inline-block; content: counter(item) ".";  color: var(--body-color);  padding-right:10px;}

.inr_banner_inr {background-color: #e4e4e4; padding: 80px 0;}
.inr_banner_txt_inr h1 {color: var(--blue-color);}

.footer_link ul { column-count: 3; column-gap: 110px; padding: 15px 0 0; }
.footer_logo_text h4 { padding: 15px 0 0; }

.smile-needs-text ul li a {color: var(--blue-color);}
.smile-needs-text ul li a:hover {color: var(--primary-color);}