/* ==========================================================
IALIGN NAVABR
========================================================== */
.navabr {
width: 100%;
font-family: "Poppins", sans-serif;
background: #ffffff;
position: relative;
z-index: 1000;
}
/* ==========================================================
TOP BAR
========================================================== */
.navabr-topbar {
width: 100%;
height: 61px;
background: #294e47;
color: #ffffff;
}
.navabr-topbar-inner {
width: 100%;
/* height: 100%; */
padding-left: 70px;
padding-right: 68px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ADDRESS */
.navabr-address {
min-width: 0;
display: flex;
align-items: center;
color: #ffffff;
font-size: 16px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
.navabr-address i {
flex-shrink: 0;
font-size: 26px;
margin-right: 12px;
color: #ffffff;
}
.navabr-address span {
opacity: 0.98;
}
/* RIGHT CONTACT AREA */
.navabr-top-right {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: 35px;
}
.navabr-phone {
display: inline-flex;
align-items: center;
text-decoration: none;
font-size: 18px;
font-weight: 500;
line-height: 1;
color: #ffffff;
transition: opacity 0.2s ease;
}
.navabr-phone:hover {
color: #ffffff;
opacity: 0.88;
}
.navabr-phone i {
font-size: 24px;
margin-right: 11px;
}
.navabr-divider {
color: rgba(255, 255, 255, 0.80);
font-size: 21px;
font-weight: 400;
margin-left: 13px;
margin-right: 13px;
}
/* SOCIAL ICONS */
.navabr-socials {
display: flex;
align-items: center;
margin-left: 24px;
gap: 21px;
}
.navabr-socials a {
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
font-size: 21px;
line-height: 1;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.navabr-socials a:hover {
color: #ffffff;
opacity: 0.85;
transform: translateY(-1px);
}
/* ==========================================================
MAIN NAVBAR
========================================================== */
.navabr-main {
position: relative;
width: 100%;
min-height: 126px;
padding: 0;
background: #ffffff;
border-bottom: 1px solid #e8ecea;
box-shadow:
0 5px 8px rgba(23, 56, 49, 0.10);
}
.navabr-main-inner {
width: 100%;
min-height: 126px;
padding-left: 70px;
padding-right: 69px;
display: flex;
align-items: center;
}
/* ==========================================================
LOGO
========================================================== */
.navabr-logo {
padding: 0;
margin: 0;
flex-shrink: 0;
display: flex;
align-items: center;
}
.navabr-logo img {
width: 324px;
height: auto;
display: block;
object-fit: contain;
}
/* ==========================================================
COLLAPSE / NAV AREA
========================================================== */
.navabr-collapse {
align-items: center;
margin-left: 112px;
}
/* ==========================================================
MENU
========================================================== */
.navabr-menu {
display: flex;
align-items: center;
gap: 44px;
margin: 0;
padding: 0;
}
.navabr-menu .nav-item {
display: flex;
align-items: center;
}
.navabr-link {
position: relative;
padding: 11px 0 13px !important;
color: #171717 !important;
font-size: 17px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition: color 0.2s ease;
}
.navabr-link:hover {
color: #294e47 !important;
}
/* ACTIVE HOME UNDERLINE */
.navabr-link.active {
color: #294e47 !important;
font-weight: 500;
}
.navabr-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 3px;
margin: auto;
background: #346e62;
border-radius: 1px;
}
/* ==========================================================
APPOINTMENT
========================================================== */
.navabr-appointment-wrapper {
margin-left: auto;
padding-left: 52px;
flex-shrink: 0;
}
.navabr-appointment {
width: 307px;
height: 68px;
border-radius: 31px;
background: #294e47;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
gap: 17px;
text-decoration: none;
font-size: 19px;
font-weight: 500;
border: 1px solid #294e47;
transition:
background 0.25s ease,
color 0.25s ease,
border 0.25s ease;
}
.navabr-appointment i {
font-size: 25px;
line-height: 1;
}
.navabr-appointment:hover {
background: #ffffff;
color: #294e47;
border-color: #294e47;
}
/* ==========================================================
TOGGLER
========================================================== */
.navabr-toggler {
margin-left: auto;
border: 1px solid #294e47;
border-radius: 6px;
padding: 7px 10px;
box-shadow: none !important;
}
.navabr-toggler:focus {
box-shadow: none !important;
}
/* ==========================================================
LARGE SCREEN ADJUSTMENT
========================================================== */
@media (max-width: 1750px) {
.navabr-main-inner {
padding-left: 45px;
padding-right: 45px;
}
.navabr-topbar-inner {
padding-left: 45px;
padding-right: 45px;
}
.navabr-logo img {
width: 290px;
}
.navabr-collapse {
margin-left: 65px;
}
.navabr-menu {
gap: 30px;
}
.navabr-appointment-wrapper {
padding-left: 35px;
}
.navabr-appointment {
width: 270px;
}
}
/* ==========================================================
LAPTOP
========================================================== */
@media (max-width: 1400px) {
.navabr-topbar-inner {
padding-left: 30px;
padding-right: 30px;
}
.navabr-address {
font-size: 13px;
}
.navabr-address i {
font-size: 21px;
}
.navabr-phone {
font-size: 14px;
}
.navabr-phone i {
font-size: 19px;
}
.navabr-socials {
gap: 14px;
margin-left: 17px;
}
.navabr-main-inner {
padding-left: 30px;
padding-right: 30px;
}
.navabr-logo img {
width: 250px;
}
.navabr-collapse {
margin-left: 38px;
}
.navabr-menu {
gap: 22px;
}
.navabr-link {
font-size: 15px;
}
.navabr-appointment-wrapper {
padding-left: 25px;
}
.navabr-appointment {
width: 225px;
height: 59px;
font-size: 15px;
}
.navabr-appointment i {
font-size: 21px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width: 1199.98px) {
.navabr-topbar {
height: auto;
min-height: 52px;
}
.navabr-topbar-inner {
padding: 10px 22px;
}
.navabr-address {
font-size: 12px;
white-space: normal;
line-height: 1.5;
}
.navabr-top-right {
margin-left: 20px;
}
.navabr-socials {
display: none;
}
.navabr-main,
.navabr-main-inner {
min-height: 93px;
}
.navabr-main-inner {
padding: 12px 22px;
flex-wrap: wrap;
}
.navabr-logo img {
width: 245px;
}
.navabr-collapse {
width: 100%;
flex-basis: 100%;
margin-left: 0;
padding-top: 20px;
padding-bottom: 20px;
}
.navabr-menu {
width: 100%;
align-items: flex-start;
gap: 0;
}
.navabr-menu .nav-item {
width: 100%;
}
.navabr-link {
width: 100%;
padding: 14px 5px !important;
border-bottom: 1px solid #eeeeee;
font-size: 15px;
}
.navabr-link.active::after {
width: 35px;
height: 3px;
left: 5px;
right: auto;
bottom: 5px;
margin: 0;
}
.navabr-appointment-wrapper {
width: 100%;
padding-left: 0;
padding-top: 20px;
}
.navabr-appointment {
width: 230px;
height: 55px;
border-radius: 28px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767.98px) {
.navabr-topbar-inner {
padding: 8px 15px;
}
.navabr-address {
font-size: 10px;
}
.navabr-address i {
font-size: 18px;
margin-right: 7px;
}
.navabr-top-right {
display: none;
}
.navabr-main,
.navabr-main-inner {
min-height: 82px;
}
.navabr-main-inner {
padding-left: 15px;
padding-right: 15px;
}
.navabr-logo img {
width: 205px;
}
}
@media (max-width: 420px) {
.navabr-logo img {
width: 180px;
}
}
/* ==========================================================
IALIGN NAVBAR - FINAL RESPONSIVE ALIGNMENT OVERRIDE
HTML / PHP STRUCTURE CHANGE AVASARAM LEDU
========================================================== */
.navabr,
.navabr * {
box-sizing: border-box;
}
/* ==========================================================
DESKTOP - 1600px AND ABOVE
========================================================== */
.navabr-topbar {
width: 100%;
height: 50px !important;
min-height: 50px !important;
background: #294e47;
}
.navabr-topbar-inner {
width: 100%;
height: 100%;
padding: 0 62px !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.navabr-address {
min-width: 0;
display: flex;
align-items: center;
flex: 1 1 auto;
font-size: 13px !important;
font-weight: 400;
line-height: 1.3;
white-space: nowrap;
}
.navabr-address i {
flex: 0 0 auto;
font-size: 20px !important;
margin-right: 9px !important;
}
.navabr-address span {
overflow: hidden;
text-overflow: ellipsis;
}
.navabr-top-right {
flex: 0 0 auto;
display: flex;
align-items: center;
margin-left: 0 !important;
}
.navabr-phone {
display: inline-flex;
align-items: center;
font-size: 14px !important;
font-weight: 500;
white-space: nowrap;
}
.navabr-phone i {
font-size: 18px !important;
margin-right: 7px !important;
}
.navabr-divider {
font-size: 17px !important;
margin-left: 10px !important;
margin-right: 10px !important;
}
.navabr-socials {
display: flex;
align-items: center;
margin-left: 18px !important;
gap: 18px !important;
}
.navabr-socials a {
font-size: 17px !important;
}
/* ==========================================================
MAIN NAVBAR
========================================================== */
.navabr-main {
width: 100%;
height: 100px !important;
min-height: 100px !important;
padding: 0 !important;
background: #ffffff;
}
.navabr-main-inner {
width: 100%;
height: 100px !important;
min-height: 100px !important;
padding: 0 52px 0 62px !important;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
/* LOGO */
.navabr-logo {
flex: 0 0 auto;
padding: 0 !important;
margin: 0 !important;
display: flex;
align-items: center;
}
.navabr-logo img {
width: 250px !important;
height: 76px !important;
max-width: none !important;
display: block;
object-fit: contain;
object-position: left center;
}
/* NAVIGATION AREA */
.navabr-collapse {
min-width: 0;
height: 100%;
margin-left: 72px !important;
display: flex;
align-items: center;
}
/* MENU */
.navabr-menu {
height: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 34px !important;
margin: 0 !important;
padding: 0 !important;
}
.navabr-menu .nav-item {
height: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
}
.navabr-link {
position: relative;
height: 100%;
padding: 3px !important;
display: flex !important;
align-items: center;
font-size: 15px !important;
font-weight: 500;
white-space: nowrap;
}
.navabr-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 26px !important;
width: 100%;
height: 3px;
margin: auto;
background: #346e62;
border-radius: 2px;
}
/* APPOINTMENT */
.navabr-appointment-wrapper {
flex: 0 0 auto;
margin-left: auto !important;
padding-left: 32px !important;
display: flex;
align-items: center;
}
.navabr-appointment {
width: 245px !important;
height: 54px !important;
padding: 0 20px;
border-radius: 28px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 11px !important;
font-size: 15px !important;
font-weight: 500;
white-space: nowrap;
}
.navabr-appointment i {
font-size: 19px !important;
}
/* ==========================================================
1400px - 1599px
========================================================== */
@media (min-width: 1400px) and (max-width: 1599.98px) {
.navabr-topbar {
height: 46px !important;
min-height: 46px !important;
}
.navabr-topbar-inner {
padding-left: 42px !important;
padding-right: 42px !important;
}
.navabr-address {
font-size: 11.5px !important;
}
.navabr-address i {
font-size: 18px !important;
}
.navabr-phone {
font-size: 12px !important;
}
.navabr-phone i {
font-size: 16px !important;
}
.navabr-socials {
gap: 14px !important;
margin-left: 14px !important;
}
.navabr-socials a {
font-size: 15px !important;
}
.navabr-main,
.navabr-main-inner {
height: 92px !important;
min-height: 92px !important;
}
.navabr-main-inner {
padding-left: 42px !important;
padding-right: 38px !important;
}
.navabr-logo img {
width: 220px !important;
height: 68px !important;
}
.navabr-collapse {
margin-left: 48px !important;
}
.navabr-menu {
gap: 24px !important;
}
.navabr-link {
font-size: 14.5px !important;
}
.navabr-link.active::after {
bottom: 23px !important;
}
.navabr-appointment-wrapper {
padding-left: 24px !important;
}
.navabr-appointment {
width: 210px !important;
height: 49px !important;
font-size: 13px !important;
}
.navabr-appointment i {
font-size: 17px !important;
}
}
/* ==========================================================
992px - 1199.98px
FULL NAVBAR - NO TOGGLE
========================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
/* ================= TOP BAR ================= */
.navabr-topbar {
height: 40px !important;
min-height: 40px !important;
}
.navabr-topbar-inner {
width: 100%;
height: 40px !important;
padding-left: 14px !important;
padding-right: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
.navabr-address {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
font-size: 8.2px !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
.navabr-address i {
flex: 0 0 auto !important;
font-size: 12px !important;
margin-right: 4px !important;
}
.navabr-address span {
display: block;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* ================= TOP RIGHT ================= */
.navabr-top-right {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
margin-left: 5px !important;
}
.navabr-phone {
display: inline-flex !important;
align-items: center !important;
font-size: 8.5px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.navabr-phone i {
font-size: 11px !important;
margin-right: 3px !important;
}
.navabr-divider {
font-size: 11px !important;
margin-left: 4px !important;
margin-right: 4px !important;
}
.navabr-socials {
display: flex !important;
align-items: center !important;
margin-left: 6px !important;
gap: 7px !important;
}
.navabr-socials a {
font-size: 11px !important;
}
/* ======================================================
MAIN NAVBAR
====================================================== */
.navabr-main {
width: 100% !important;
height: 76px !important;
min-height: 76px !important;
padding: 0 !important;
}
.navabr-main-inner {
width: 100% !important;
height: 76px !important;
min-height: 76px !important;
padding-left: 12px !important;
padding-right: 12px !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
/* ======================================================
LOGO
====================================================== */
.navabr-logo {
flex: 0 0 auto !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
}
.navabr-logo img {
width: 135px !important;
height: 54px !important;
max-width: none !important;
object-fit: contain !important;
object-position: left center !important;
}
/* ======================================================
REMOVE TOGGLE
====================================================== */
.navabr-toggler {
display: none !important;
}
/* ======================================================
FORCE COLLAPSE OPEN
====================================================== */
.navabr-collapse {
display: flex !important;
flex-grow: 1 !important;
flex-basis: auto !important;
width: auto !important;
height: 100% !important;
min-width: 0 !important;
align-items: center !important;
margin-left: 12px !important;
padding: 0 !important;
background: transparent !important;
}
/* ======================================================
MENU
====================================================== */
.navabr-menu {
width: auto !important;
height: 100% !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
.navabr-menu .nav-item {
width: auto !important;
height: 100% !important;
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
}
.navabr-link {
position: relative !important;
width: auto !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
padding: 8px !important;
border: none !important;
font-size: 11.5px !important;
font-weight: 500 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* ================= ACTIVE UNDERLINE ================= */
.navabr-link.active::after {
content: "";
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 18px !important;
width: 100% !important;
height: 2px !important;
margin: auto !important;
background: #346e62 !important;
border-radius: 2px !important;
}
/* ======================================================
APPOINTMENT BUTTON
====================================================== */
.navabr-appointment-wrapper {
flex: 0 0 auto !important;
width: auto !important;
margin-left: auto !important;
padding-left: 9px !important;
padding-top: 0 !important;
}
.navabr-appointment {
width: 135px !important;
height: 40px !important;
padding-left: 8px !important;
padding-right: 8px !important;
border-radius: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
font-size: 9px !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
.navabr-appointment i {
font-size: 12px !important;
}
}
/* ==========================================================
1100px - 1199px
MORE SPACE AVAILABLE
========================================================== */
@media (min-width: 1100px) and (max-width: 1199.98px) {
.navabr-main-inner {
padding-left: 18px !important;
padding-right: 18px !important;
}
.navabr-logo img {
width: 150px !important;
height: 56px !important;
}
.navabr-collapse {
margin-left: 16px !important;
}
.navabr-menu {
gap: 10px !important;
}
.navabr-link {
font-size: 10px !important;
}
.navabr-appointment-wrapper {
padding-left: 11px !important;
}
.navabr-appointment {
width: 145px !important;
height: 41px !important;
font-size: 9.5px !important;
}
}
/* ==========================================================
1160px - 1199px
LITTLE MORE COMFORTABLE SPACING
========================================================== */
@media (min-width: 1160px) and (max-width: 1199.98px) {
.navabr-logo img {
width: 158px !important;
}
.navabr-collapse {
margin-left: 18px !important;
}
.navabr-menu {
gap: 11px !important;
}
.navabr-link {
font-size: 10.3px !important;
}
.navabr-appointment {
width: 152px !important;
font-size: 10px !important;
}
}
/* ==========================================================
NAVBAR - DEFINITIVE RESPONSIVE ALIGNMENT
Keeps one consistent layout across desktop, tablet and mobile.
========================================================== */
.navabr,
.navabr * {
box-sizing: border-box;
}
.navabr {
width: 100%;
position: relative;
z-index: 1000;
background: #ffffff;
font-family: "Poppins", sans-serif;
}
.navabr .navabr-topbar {
width: 100%;
height: 48px !important;
min-height: 48px !important;
color: #ffffff;
background: #294e47;
}
.navabr .navabr-topbar-inner {
width: 100%;
max-width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0 clamp(24px, 3.2vw, 56px) !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.navabr .navabr-address {
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
color: #ffffff;
font-size: clamp(11px, 0.75vw, 13px) !important;
line-height: 1.35 !important;
white-space: nowrap !important;
}
.navabr .navabr-address i {
flex: 0 0 auto;
margin-right: 8px !important;
color: #ffffff;
font-size: 18px !important;
}
.navabr .navabr-address span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.navabr .navabr-top-right {
flex: 0 0 auto;
margin-left: 0 !important;
display: flex;
align-items: center;
}
.navabr .navabr-phone {
display: inline-flex;
align-items: center;
color: #ffffff;
font-size: 13px !important;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.navabr .navabr-phone i {
margin-right: 6px !important;
font-size: 16px !important;
}
.navabr .navabr-divider {
margin: 0 10px !important;
color: rgba(255, 255, 255, 0.78);
font-size: 16px !important;
}
.navabr .navabr-socials {
margin-left: 18px !important;
display: flex;
align-items: center;
gap: 16px !important;
}
.navabr .navabr-socials a {
color: #ffffff;
font-size: 16px !important;
line-height: 1;
text-decoration: none;
}
.navabr .navabr-main {
width: 100%;
height: auto !important;
min-height: 96px !important;
padding: 0 !important;
background: #ffffff;
border-bottom: 1px solid #e8ecea;
box-shadow: 0 5px 8px rgba(23, 56, 49, 0.10);
}
.navabr .navabr-main-inner {
width: 100%;
max-width: 1600px;
height: auto !important;
min-height: 96px !important;
margin: 0 auto;
padding: 0 clamp(24px, 3.2vw, 56px) !important;
display: flex;
align-items: center;
flex-wrap: nowrap !important;
}
.navabr .navabr-logo {
flex: 0 0 auto;
width: 84px;
height: 84px;
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.navabr .navabr-logo img {
width: 84px !important;
height: 84px !important;
max-width: 100% !important;
display: block;
object-fit: contain !important;
object-position: center !important;
}
.navabr .navabr-toggler {
margin-left: auto;
padding: 7px 9px;
align-items: center;
justify-content: center;
border: 1px solid #294e47;
border-radius: 7px;
box-shadow: none !important;
}
.navabr .navabr-toggler:focus {
box-shadow: 0 0 0 3px rgba(41, 78, 71, 0.15) !important;
}
@media (min-width: 1200px) {
.navabr .navabr-main-inner {
display: grid !important;
grid-template-columns:
minmax(190px, 1fr) auto minmax(190px, 1fr);
align-items: center;
}
.navabr .navabr-logo {
grid-column: 1;
justify-self: start;
}
.navabr .navabr-collapse {
display: contents !important;
min-width: 0;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.navabr .navabr-menu {
grid-column: 2;
justify-self: center;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: row;
flex-wrap: nowrap !important;
align-items: center;
gap: clamp(15px, 1.35vw, 26px) !important;
}
.navabr .navabr-menu .nav-item {
width: auto !important;
height: auto !important;
flex: 0 0 auto;
display: flex;
align-items: center;
}
.navabr .navabr-link {
width: auto !important;
height: auto !important;
padding: 14px 0 !important;
display: flex !important;
align-items: center;
border: 0 !important;
color: #171717 !important;
font-size: 16px !important;
line-height: 1.2 !important;
white-space: nowrap;
}
.navabr .navabr-link.active::after {
left: 0 !important;
right: 0 !important;
bottom: 7px !important;
width: 100% !important;
height: 2px !important;
margin: auto !important;
}
.navabr .navabr-appointment-wrapper {
grid-column: 3;
justify-self: end;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto;
display: flex;
align-items: center;
}
.navabr .navabr-appointment {
width: auto !important;
min-width: 184px;
height: 50px !important;
padding: 0 21px !important;
gap: 9px !important;
border-radius: 26px !important;
font-size: 14px !important;
white-space: nowrap;
}
.navabr .navabr-appointment i {
font-size: 17px !important;
}
}
@media (max-width: 1199.98px) {
.navabr .navabr-topbar {
height: 46px !important;
min-height: 46px !important;
}
.navabr .navabr-topbar-inner {
padding: 0 24px !important;
gap: 16px !important;
}
.navabr .navabr-address {
font-size: 10px !important;
}
.navabr .navabr-address i {
font-size: 14px !important;
}
.navabr .navabr-phone {
font-size: 11px !important;
}
.navabr .navabr-phone i {
font-size: 13px !important;
}
.navabr .navabr-socials {
display: none !important;
}
.navabr .navabr-main,
.navabr .navabr-main-inner {
min-height: 84px !important;
}
.navabr .navabr-main-inner {
height: auto !important;
padding: 0 24px !important;
flex-wrap: wrap !important;
}
.navabr .navabr-logo,
.navabr .navabr-logo img {
width: 72px !important;
height: 72px !important;
}
.navabr .navabr-toggler {
width: 44px;
height: 42px;
display: flex !important;
}
.navabr .navabr-collapse {
flex: 0 0 100% !important;
width: 100% !important;
height: auto !important;
max-height: calc(100vh - 130px);
margin: 0 !important;
padding: 8px 0 20px !important;
overflow-y: auto;
background: #ffffff !important;
border-top: 1px solid #e8ecea;
}
.navabr .navabr-collapse:not(.show):not(.collapsing) {
display: none !important;
}
.navabr .navabr-collapse.show,
.navabr .navabr-collapse.collapsing {
display: block !important;
}
.navabr .navabr-menu {
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
.navabr .navabr-menu .nav-item {
width: 100% !important;
height: auto !important;
display: block !important;
}
.navabr .navabr-link {
width: 100% !important;
height: auto !important;
padding: 14px 4px !important;
display: block !important;
border-bottom: 1px solid #eef1ef !important;
font-size: 16px !important;
line-height: 1.4 !important;
text-align: center !important;
}
.navabr .navabr-link.active::after {
left: 4px !important;
right: auto !important;
bottom: 5px !important;
width: 32px !important;
height: 2px !important;
margin: 0 !important;
}
.navabr .navabr-appointment-wrapper {
width: 100% !important;
margin: 0 !important;
padding: 18px 0 0 !important;
display: block !important;
}
.navabr .navabr-appointment {
width: 100% !important;
max-width: 320px;
height: 50px !important;
padding: 0 18px !important;
gap: 9px !important;
border-radius: 25px !important;
font-size: 14.5px !important;
}
.navabr .navabr-appointment i {
font-size: 17px !important;
}
}
@media (max-width: 767.98px) {
.navabr .navabr-topbar {
height: 42px !important;
min-height: 42px !important;
}
.navabr .navabr-topbar-inner {
padding: 0 14px !important;
justify-content: center !important;
}
.navabr .navabr-address {
display: none !important;
}
.navabr .navabr-top-right {
width: 100%;
margin: 0 !important;
display: flex !important;
justify-content: center;
}
.navabr .navabr-phone {
font-size: 11px !important;
}
.navabr .navabr-phone i {
margin-right: 4px !important;
font-size: 13px !important;
}
.navabr .navabr-divider {
margin: 0 8px !important;
font-size: 13px !important;
}
.navabr .navabr-main,
.navabr .navabr-main-inner {
min-height: 78px !important;
}
.navabr .navabr-main-inner {
padding: 0 15px !important;
}
.navabr .navabr-logo,
.navabr .navabr-logo img {
width: 66px !important;
height: 66px !important;
}
.navabr .navabr-collapse {
max-height: calc(100vh - 120px);
padding-bottom: 16px !important;
}
.navabr .navabr-appointment {
max-width: none;
}
}
@media (max-width: 380px) {
.navabr .navabr-topbar-inner {
padding: 0 8px !important;
}
.navabr .navabr-phone {
font-size: 10px !important;
}
.navabr .navabr-phone i {
font-size: 12px !important;
}
.navabr .navabr-divider {
margin: 0 5px !important;
}
.navabr .navabr-main-inner {
padding: 0 12px !important;
}
.navabr .navabr-logo,
.navabr .navabr-logo img {
width: 62px !important;
height: 62px !important;
}
}
/* ==========================================================
992px - 1199px: SHOW THE COMPLETE HORIZONTAL MENU
========================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
.navabr .navabr-main,
.navabr .navabr-main-inner {
min-height: 78px !important;
}
.navabr .navabr-main-inner {
padding: 0 16px !important;
display: grid !important;
grid-template-columns:
minmax(140px, 1fr) auto minmax(140px, 1fr);
align-items: center;
}
.navabr .navabr-logo {
grid-column: 1;
justify-self: start;
}
.navabr .navabr-logo,
.navabr .navabr-logo img {
width: 66px !important;
height: 66px !important;
}
.navabr .navabr-toggler {
display: none !important;
}
.navabr .navabr-collapse,
.navabr .navabr-collapse:not(.show):not(.collapsing),
.navabr .navabr-collapse.show,
.navabr .navabr-collapse.collapsing {
display: contents !important;
width: auto !important;
height: auto !important;
max-height: none;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
border: 0;
background: transparent !important;
}
.navabr .navabr-menu {
grid-column: 2;
justify-self: center;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: clamp(7px, 0.75vw, 10px) !important;
}
.navabr .navabr-menu .nav-item {
width: auto !important;
height: auto !important;
flex: 0 0 auto;
display: flex !important;
align-items: center;
}
.navabr .navabr-link {
width: auto !important;
height: auto !important;
padding: 12px 10px !important;
/* padding: 12px 0 !important; */
display: flex !important;
align-items: center;
border: 0 !important;
font-size: clamp(13px, 1.1vw, 13.5px) !important;
line-height: 1.2 !important;
white-space: nowrap;
}
.navabr .navabr-link.active::after {
left: 0 !important;
right: 0 !important;
bottom: 5px !important;
width: 100% !important;
height: 2px !important;
margin: auto !important;
}
.navabr .navabr-appointment-wrapper {
grid-column: 3;
justify-self: end;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center;
}
.navabr .navabr-appointment {
width: auto !important;
min-width: 142px;
max-width: none;
height: 43px !important;
padding: 0 12px !important;
gap: 6px !important;
border-radius: 23px !important;
font-size: 11.5px !important;
white-space: nowrap;
}
.navabr .navabr-appointment i {
font-size: 14px !important;
}
}
/* =========================================================
INDEX FIRST SECTION
========================================================= */
.index_first_section {
position: relative;
width: 100%;
min-height: 760px;
overflow: hidden;
background:
linear-gradient(90deg,
#f5f7f4 0%,
#f7f8f5 40%,
#eef1ec 100%);
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.index_first_section_container {
position: relative;
z-index: 5;
padding: 0;
}
.index_first_section_row {
min-height: 760px;
}
/* =========================================================
LEFT SECTION
========================================================= */
.index_first_section_left {
position: relative;
display: flex;
align-items: center;
padding-left: 7%;
padding-right: 25px;
z-index: 5;
}
.index_first_section_content {
width: 100%;
max-width: 930px;
padding-top: 40px;
}
/* =========================================================
EYEBROW
========================================================= */
.index_first_section_eyebrow {
margin-bottom: 18px;
color: #4e625e;
font-size: 18px;
line-height: 1.4;
font-weight: 600;
letter-spacing: 8px;
text-transform: uppercase;
}
/* =========================================================
TITLE
========================================================= */
.index_first_section_title {
margin: 0;
color: #164a40;
font-family: "Playfair Display", serif;
font-size: 54px;
/* font-size: 60px; */
font-weight: 500;
line-height: 0.98;
letter-spacing: -3px;
}
/* subtitle italic */
.index_first_section_subtitle {
margin-top: 10px;
color: #174e43;
font-family: "Playfair Display", serif;
font-style: italic;
font-weight: 500;
font-size: 36px;
line-height: 1.1;
letter-spacing: -1.2px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.index_first_section_description {
max-width: 820px;
margin: 34px 0 30px;
color: #2b3936;
font-size: 24px;
line-height: 1.35;
font-weight: 500;
}
.index_first_section_description strong {
font-weight: 700;
}
/* =========================================================
BUTTONS
========================================================= */
.index_first_section_buttons {
display: flex;
align-items: center;
gap: 34px;
margin-top: 26px;
}
.index_first_section_btn {
height: 70px;
padding: 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 21px;
text-decoration: none;
border-radius: 15px;
font-size: 21px;
font-weight: 600;
transition: 0.25s ease;
}
.index_first_section_btn i {
font-size: 27px;
}
/* primary */
.index_first_section_btn_primary {
min-width: 335px;
color: #ffffff;
background: #174e43;
border: 2px solid #174e43;
}
.index_first_section_btn_primary:hover {
color: #174e43;
background: #ffffff;
}
/* secondary */
.index_first_section_btn_secondary {
min-width: 265px;
color: #1c332e;
background: rgba(255, 255, 255, 0.55);
border: 2px solid #72847f;
}
.index_first_section_btn_secondary:hover {
color: #ffffff;
background: #174e43;
border-color: #174e43;
}
/* =========================================================
FEATURE ROW
========================================================= */
.index_first_section_features {
max-width: 920px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 61px;
}
.index_first_section_feature {
display: flex;
align-items: center;
gap: 15px;
flex-shrink: 0;
}
.index_first_section_feature_icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: #3d5d57;
font-size: 35px;
}
.index_first_section_feature_text {
color: #24332f;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
/* =========================================================
RIGHT SIDE
========================================================= */
.index_first_section_right {
position: relative;
min-height: 760px;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.index_first_section_image_wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
/* =========================================================
WOMAN IMAGE
========================================================= */
.index_first_section_image {
position: absolute;
right: 6%;
bottom: 0;
width: auto;
height: 100%;
max-width: none;
object-fit: contain;
object-position: bottom right;
z-index: 3;
}
/* =========================================================
HAND WRITTEN TEXT
========================================================= */
.index_first_section_handwriting {
position: absolute;
right: 5%;
top: 19%;
z-index: 6;
width: 180px;
display: flex;
flex-direction: column;
color: #66736f;
font-family: "Caveat", cursive;
font-size: 41px;
line-height: 0.86;
transform: rotate(-7deg);
text-align: center;
}
.index_first_section_handwriting span:nth-child(1) {
transform: translateX(-25px);
}
.index_first_section_handwriting span:nth-child(2) {
transform: translateX(-8px);
}
.index_first_section_handwriting span:nth-child(3) {
margin-top: 8px;
transform: translateX(13px);
}
.index_first_section_handwriting span:nth-child(4) {
margin-top: 7px;
transform: translateX(23px);
}
.index_first_section_handwriting i {
margin-left: 7px;
font-size: 27px;
}
/* =========================================================
RIGHT BOTTOM CARD
========================================================= */
.index_first_section_smile_card {
position: absolute;
right: 2.2%;
bottom: 38px;
z-index: 10;
width: 260px;
min-height: 194px;
padding: 29px 27px;
background: rgba(250, 250, 247, 0.92);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 29px;
box-shadow:
0 12px 40px rgba(55, 69, 64, 0.06);
backdrop-filter: blur(5px);
}
.index_first_section_smile_icon {
color: #31574f;
font-size: 34px;
margin-bottom: 7px;
}
.index_first_section_smile_text {
color: #24443d;
font-size: 23px;
font-weight: 600;
line-height: 1.3;
}
/* =========================================================
DECORATIVE SHAPES
========================================================= */
.index_first_section_shape {
position: absolute;
pointer-events: none;
z-index: 1;
}
/* LEFT BIG CURVED SHAPE */
.index_first_section_shape_left {
left: -170px;
bottom: -40px;
width: 365px;
height: 590px;
border-radius: 0 70% 55% 0;
background:
linear-gradient(150deg,
rgba(205, 215, 211, 0.8),
rgba(224, 230, 226, 0.42));
transform: rotate(-12deg);
}
.index_first_section_shape_left::after {
content: "";
position: absolute;
left: 70px;
top: 25px;
width: 235px;
height: 520px;
border-radius: 0 70% 60% 0;
border-right: 1px solid rgba(157, 172, 167, 0.35);
transform: rotate(3deg);
}
/* TOP RIGHT SHAPE */
.index_first_section_shape_top {
width: 370px;
height: 150px;
right: -55px;
top: -53px;
background:
rgba(205, 214, 210, 0.55);
border-radius: 50%;
transform: rotate(19deg);
}
/* =========================================================
DESKTOP ADJUST
========================================================= */
@media (max-width: 1700px) {
.index_first_section {
min-height: 680px;
}
.index_first_section_row {
min-height: 680px;
}
.index_first_section_right {
min-height: 680px;
}
.index_first_section_eyebrow {
font-size: 13px;
letter-spacing: 6px;
}
.index_first_section_description {
font-size: 19px;
max-width: 680px;
}
.index_first_section_features {
margin-top: 45px;
}
.index_first_section_feature_text {
font-size: 14px;
}
.index_first_section_feature_icon {
font-size: 31px;
}
.index_first_section_btn {
height: 62px;
font-size: 17px;
}
.index_first_section_btn_primary {
min-width: 290px;
}
.index_first_section_btn_secondary {
min-width: 235px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
.index_first_section_left {
padding-left: 5%;
}
.index_first_section_content {
padding-top: 25px;
}
.index_first_section_eyebrow {
font-size: 12px;
letter-spacing: 4px;
}
.index_first_section_description {
font-size: 17px;
}
.index_first_section_buttons {
gap: 18px;
}
.index_first_section_btn {
padding: 0 20px;
}
.index_first_section_btn_primary {
min-width: 250px;
}
.index_first_section_btn_secondary {
min-width: 160px;
}
.index_first_section_features {
gap: 18px;
}
.index_first_section_feature {
gap: 8px;
}
.index_first_section_feature_icon {
width: 37px;
height: 37px;
font-size: 26px;
}
.index_first_section_feature_text {
font-size: 13px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.index_first_section {
min-height: auto;
}
.index_first_section_row {
min-height: auto;
}
.index_first_section_left {
padding: 70px 7% 50px;
}
.index_first_section_content {
max-width: none;
padding: 0;
}
.index_first_section_eyebrow {
font-size: 14px;
}
.index_first_section_description {
max-width: 700px;
font-size: 18px;
}
.index_first_section_features {
max-width: 700px;
flex-wrap: wrap;
justify-content: flex-start;
gap: 30px 50px;
}
.index_first_section_feature {
width: calc(50% - 30px);
}
.index_first_section_feature_text {
font-size: 14px;
}
.index_first_section_right {
min-height: 650px;
}
.index_first_section_image {
right: 50%;
transform: translateX(50%);
height: 100%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.index_first_section_left {
padding: 55px 20px 45px;
}
.index_first_section_eyebrow {
margin-bottom: 15px;
font-size: 16px;
letter-spacing: 3px;
}
.index_first_section_title {
font-size: 49px;
letter-spacing: -1.5px;
}
.index_first_section_subtitle {
font-size: 36px;
}
.index_first_section_description {
margin-top: 25px;
font-size: 16px;
line-height: 1.5;
}
.index_first_section_buttons {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.index_first_section_btn,
.index_first_section_btn_primary,
.index_first_section_btn_secondary {
width: 100%;
min-width: 0;
height: 58px;
border-radius: 12px;
font-size: 17px;
}
.index_first_section_features {
margin-top: 42px;
gap: 28px 10px;
}
.index_first_section_feature {
width: calc(50% - 5px);
}
.index_first_section_feature_icon {
width: 35px;
font-size: 25px;
}
.index_first_section_feature_text {
font-size: 13px;
}
.index_first_section_right {
min-height: 510px;
}
.index_first_section_image {
height: 100%;
}
.index_first_section_handwriting {
top: 45px;
right: 20px;
width: 130px;
font-size: 29px;
}
.index_first_section_smile_card {
right: 15px;
bottom: 18px;
width: 190px;
min-height: auto;
padding: 18px;
border-radius: 20px;
}
.index_first_section_smile_icon {
font-size: 25px;
}
.index_first_section_smile_text {
font-size: 16px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.index_first_section_title {
font-size: 35px;
}
.index_first_section_subtitle {
font-size: 25px;
}
.index_first_section_feature {
width: 100%;
}
.index_first_section_right {
min-height: 450px;
}
}
/* ==========================================================
INDEX SECOND SECTION
========================================================== */
.index_second_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 35px 0 38px;
background: #fcfbf8;
font-family: "DM Sans", sans-serif;
}
/* ==========================================================
CONTAINER
========================================================== */
.index_second_section_container {
width: 100%;
padding-left: 55px;
padding-right: 55px;
}
/* ==========================================================
HEADER
========================================================== */
.index_second_section_header {
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
margin-bottom: 28px;
}
/* center heading */
.index_second_section_heading_wrap {
text-align: center;
}
/* heading */
.index_second_section_title {
margin: 0;
color: #174c42;
font-family: "Playfair Display", serif;
font-size: 52px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -1px;
}
/* subtitle */
.index_second_section_subtitle {
margin: 7px 0 0;
color: #33413d;
font-size: 21px;
font-weight: 500;
line-height: 1.4;
}
/* ==========================================================
VIEW ALL TREATMENTS
========================================================== */
.index_second_section_view_all {
position: absolute;
right: 0;
top: 27px;
display: inline-flex;
align-items: center;
gap: 13px;
color: #264b43;
font-size: 16px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: color 0.3s ease;
}
.index_second_section_view_all i {
font-size: 22px;
transition: transform 0.3s ease;
}
.index_second_section_view_all:hover {
color: #174c42;
}
.index_second_section_view_all:hover i {
transform: translateX(6px);
}
/* ==========================================================
SLIDER
========================================================== */
.index_second_section_slider {
width: 100%;
position: relative;
overflow: hidden;
cursor: grab;
touch-action: pan-y;
user-select: none;
--visible-items: 6;
--slide-gap: 22px;
}
.index_second_section_slider:active {
cursor: grabbing;
}
/* slider track */
.index_second_section_track {
display: flex;
align-items: flex-start;
gap: var(--slide-gap);
width: max-content;
will-change: transform;
transform: translate3d(0, 0, 0);
transition: transform 650ms cubic-bezier(.22, .61, .36, 1);
}
/* ==========================================================
CARD
Desktop:
exactly 6 cards visible
========================================================== */
.index_second_section_card {
flex: 0 0 calc((100vw - 110px - (var(--slide-gap) * 5)) / 6);
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
color: #171717;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s ease;
}
.index_second_section_card:hover {
color: #171717;
transform: translateY(-5px);
}
/* ==========================================================
IMAGE BOX
========================================================== */
.index_second_section_image_box {
width: 100%;
aspect-ratio: 1.35 / 1;
min-height: 170px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
margin-bottom: 15px;
background:
linear-gradient(145deg,
#f3f3f0 0%,
#ececea 100%);
border-radius: 18px;
transition:
box-shadow 0.3s ease,
transform 0.3s ease;
}
.index_second_section_card:hover .index_second_section_image_box {
box-shadow:
0 10px 28px rgba(23, 76, 66, 0.11);
}
/* image */
.index_second_section_image_box img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
pointer-events: none;
transition: transform 0.4s ease;
}
.index_second_section_card:hover .index_second_section_image_box img {
transform: scale(1.025);
}
/* ==========================================================
CARD TITLE
========================================================== */
.index_second_section_card_title {
width: 100%;
margin: 0;
padding: 0 8px;
color: #151515;
font-size: 17px;
font-weight: 700;
line-height: 1.28;
letter-spacing: -0.2px;
}
/* ==========================================================
1600 AND BELOW
Still 6 cards
========================================================== */
@media (max-width: 1600px) {
.index_second_section_container {
padding-left: 42px;
padding-right: 42px;
}
.index_second_section_title {
font-size: 45px;
}
.index_second_section_subtitle {
font-size: 18px;
}
.index_second_section_slider {
--slide-gap: 18px;
}
.index_second_section_card {
flex-basis:
calc((100vw - 84px - (var(--slide-gap) * 5)) / 6);
}
.index_second_section_image_box {
min-height: 140px;
}
.index_second_section_card_title {
font-size: 15px;
}
}
/* ==========================================================
LARGE TABLET / SMALL LAPTOP
4 cards visible
========================================================== */
@media (max-width: 1199.98px) {
.index_second_section_container {
padding-left: 30px;
padding-right: 30px;
}
.index_second_section_slider {
--visible-items: 4;
--slide-gap: 18px;
}
.index_second_section_card {
flex-basis:
calc((100vw - 60px - (var(--slide-gap) * 3)) / 4);
}
.index_second_section_image_box {
min-height: 155px;
}
.index_second_section_card_title {
font-size: 15px;
}
}
/* ==========================================================
TABLET
3 cards visible
========================================================== */
@media (max-width: 991.98px) {
.index_second_section {
padding: 38px 0;
}
.index_second_section_container {
padding-left: 24px;
padding-right: 24px;
}
.index_second_section_header {
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.index_second_section_title {
font-size: 39px;
}
.index_second_section_subtitle {
font-size: 16px;
}
.index_second_section_view_all {
position: relative;
top: auto;
right: auto;
margin-top: 14px;
}
.index_second_section_slider {
--visible-items: 3;
--slide-gap: 18px;
}
.index_second_section_card {
flex-basis:
calc((100vw - 48px - (var(--slide-gap) * 2)) / 3);
}
.index_second_section_image_box {
min-height: 150px;
}
}
/* ==========================================================
MOBILE
2 cards visible
========================================================== */
@media (max-width: 767.98px) {
.index_second_section_container {
padding-left: 16px;
padding-right: 16px;
}
.index_second_section_title {
font-size: 34px;
}
.index_second_section_subtitle {
max-width: 360px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
.index_second_section_slider {
--visible-items: 2;
--slide-gap: 14px;
}
.index_second_section_card {
flex-basis:
calc((100vw - 32px - var(--slide-gap)) / 2);
}
.index_second_section_image_box {
min-height: 135px;
border-radius: 15px;
}
.index_second_section_card_title {
padding: 0 3px;
font-size: 13px;
}
}
/* ==========================================================
SMALL MOBILE
1 card visible
========================================================== */
@media (max-width: 480px) {
.index_second_section {
padding-top: 32px;
padding-bottom: 32px;
}
.index_second_section_title {
font-size: 28px;
}
.index_second_section_subtitle {
font-size: 15px;
}
.index_second_section_view_all {
font-size: 13px;
}
.index_second_section_slider {
--visible-items: 1;
--slide-gap: 14px;
}
.index_second_section_card {
flex-basis: calc(100vw - 32px);
}
.index_second_section_image_box {
min-height: 220px;
}
.index_second_section_card_title {
font-size: 16px;
}
}
/* =========================================================
INDEX THIRD SECTION
========================================================= */
.index_third_section {
position: relative;
width: 100%;
background: #f5f6f3;
overflow: hidden;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.index_third_section_container {
padding: 0;
}
.index_third_section_row {
min-height: 500px;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.index_third_section_content_col {
display: flex;
align-items: center;
position: relative;
z-index: 4;
}
.index_third_section_content {
width: 100%;
padding-left: 70px;
padding-right: 35px;
}
/* small heading */
.index_third_section_eyebrow {
margin-bottom: 16px;
color: #576c67;
font-size: 16px;
font-weight: 600;
letter-spacing: 7px;
line-height: 1.3;
}
/* main heading */
.index_third_section_title {
margin: 0;
color: #174d43;
font-family: "Playfair Display", serif;
font-size: 48px;
font-weight: 600;
line-height: 1.14;
letter-spacing: -1px;
}
/* small horizontal line */
.index_third_section_line {
width: 67px;
height: 2px;
margin: 28px 0 23px;
background: #71847f;
}
/* paragraph */
.index_third_section_description {
max-width: 540px;
margin: 0;
color: #34413e;
font-size: 18px;
font-weight: 500;
line-height: 1.55;
}
/* =========================================================
BUTTON
========================================================= */
.index_third_section_btn {
width: 330px;
height: 65px;
margin-top: 35px;
padding: 0 32px;
display: inline-flex;
align-items: center;
justify-content: space-between;
color: #263d38;
background: rgba(255, 255, 255, 0.38);
border: 2px solid #82918d;
border-radius: 13px;
text-decoration: none;
font-size: 18px;
font-weight: 600;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.index_third_section_btn i {
font-size: 23px;
transition: transform 0.3s ease;
}
.index_third_section_btn:hover {
background: #174d43;
border-color: #174d43;
color: #ffffff;
}
.index_third_section_btn:hover i {
transform: translateX(5px);
}
/* =========================================================
DOCTORS AREA
========================================================= */
.index_third_section_doctors_col {
display: flex;
align-items: center;
}
.index_third_section_doctors {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
padding: 42px 15px;
}
/* =========================================================
DOCTOR CARD
========================================================= */
.index_third_section_doctor_card {
width: 100%;
display: block;
overflow: hidden;
background: #ffffff;
border-radius: 12px;
text-decoration: none;
color: #171717;
box-shadow:
0 6px 20px rgba(22, 62, 54, 0.04);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.index_third_section_doctor_card:hover {
color: #171717;
transform: translateY(-5px);
box-shadow:
0 12px 30px rgba(22, 62, 54, 0.10);
}
/* =========================================================
DOCTOR IMAGE
========================================================= */
.index_third_section_doctor_image {
width: 100%;
height: 305px;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
background:
linear-gradient(145deg,
#ebeeea 0%,
#e4e8e4 100%);
border-radius: 12px 12px 0 0;
}
.index_third_section_doctor_image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: bottom center;
transition: transform 0.4s ease;
}
.index_third_section_doctor_card:hover .index_third_section_doctor_image img {
transform: scale(1.025);
}
/* =========================================================
DOCTOR DETAILS
========================================================= */
.index_third_section_doctor_info {
min-height: 108px;
padding: 20px 16px 17px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
background: #ffffff;
}
.index_third_section_doctor_info h3 {
margin: 0 0 4px;
color: #161616;
font-size: 21px;
font-weight: 700;
line-height: 1.2;
}
.index_third_section_doctor_info p {
margin: 0;
color: #222222;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
/* =========================================================
RIGHT QUOTE AREA
========================================================= */
.index_third_section_quote_col {
position: relative;
}
.index_third_section_quote_area {
position: relative;
width: 100%;
height: 100%;
min-height: 500px;
display: flex;
align-items: center;
padding: 30px 35px 30px 67px;
overflow: hidden;
background:
linear-gradient(90deg,
rgba(245, 247, 244, 0.94) 0%,
rgba(247, 248, 246, 0.78) 55%,
rgba(246, 247, 245, 0.56) 100%),
url("assets/img/index-third-clinic-bg.jpg");
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
}
/* soft curve on left */
.index_third_section_quote_area::before {
content: "";
position: absolute;
left: -90px;
top: -70px;
width: 190px;
height: 650px;
border-radius: 50%;
background:
rgba(221, 226, 222, 0.42);
transform: rotate(7deg);
}
/* top decorative curve */
.index_third_section_quote_area::after {
content: "";
position: absolute;
right: -80px;
top: -85px;
width: 300px;
height: 155px;
border-radius: 50%;
background:
rgba(218, 224, 220, 0.50);
transform: rotate(9deg);
}
/* quote content */
.index_third_section_quote_content {
position: relative;
z-index: 4;
}
/* quote words */
.index_third_section_quote_words {
display: flex;
flex-direction: column;
gap: 4px;
color: #176054;
font-family: "Playfair Display", serif;
font-style: italic;
font-size: 45px;
font-weight: 500;
line-height: 1.24;
}
/* line */
.index_third_section_quote_line {
width: 62px;
height: 2px;
margin: 28px 0 22px;
background: #67837c;
}
/* text */
.index_third_section_quote_content p {
margin: 0;
color: #34423f;
font-size: 19px;
font-weight: 600;
line-height: 1.4;
}
/* =========================================================
BOTTOM GREEN BAR
========================================================= */
.index_third_section_bottom_bar {
width: 100%;
height: 21px;
background: #174e43;
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1700px) {
.index_third_section_content {
padding-left: 55px;
padding-right: 25px;
}
.index_third_section_title {
font-size: 42px;
}
.index_third_section_description {
font-size: 18px;
}
.index_third_section_doctor_image {
height: 285px;
}
.index_third_section_doctor_info h3 {
font-size: 19px;
}
.index_third_section_doctor_info p {
font-size: 13px;
}
.index_third_section_quote_words {
font-size: 39px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
.index_third_section_row {
min-height: 460px;
}
.index_third_section_content {
padding-left: 38px;
}
.index_third_section_eyebrow {
font-size: 12px;
letter-spacing: 5px;
}
.index_third_section_title {
font-size: 31px;
/* font-size: 35px; */
}
.index_third_section_description {
font-size: 15px;
}
.index_third_section_btn {
width: 285px;
height: 58px;
padding: 0 25px;
font-size: 15px;
}
.index_third_section_doctors {
gap: 18px;
padding: 35px 10px;
}
.index_third_section_doctor_image {
height: 250px;
}
.index_third_section_doctor_info {
min-height: 95px;
}
.index_third_section_doctor_info h3 {
font-size: 17px;
}
.index_third_section_doctor_info p {
font-size: 11px;
}
.index_third_section_quote_area {
min-height: 460px;
padding-left: 48px;
}
.index_third_section_quote_words {
font-size: 34px;
}
.index_third_section_quote_content p {
font-size: 16px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.index_third_section_content_col {
padding: 55px 0 20px;
}
.index_third_section_content {
padding: 0 35px;
text-align: center;
}
.index_third_section_line {
margin-left: auto;
margin-right: auto;
}
.index_third_section_description {
max-width: 620px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
.index_third_section_btn {
margin-top: 28px;
}
.index_third_section_doctors {
padding: 30px 35px 50px;
gap: 25px;
}
.index_third_section_doctor_image {
height: 330px;
}
.index_third_section_doctor_info h3 {
font-size: 20px;
}
.index_third_section_doctor_info p {
font-size: 13px;
}
.index_third_section_quote_area {
min-height: 400px;
justify-content: center;
text-align: center;
padding: 45px 25px;
background-position: center;
}
.index_third_section_quote_line {
margin-left: auto;
margin-right: auto;
}
.index_third_section_quote_words {
font-size: 42px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.index_third_section_content_col {
padding-top: 45px;
}
.index_third_section_content {
padding-left: 20px;
padding-right: 20px;
}
.index_third_section_eyebrow {
font-size: 12px;
letter-spacing: 4px;
}
.index_third_section_title {
font-size: 34px;
}
.index_third_section_description {
font-size: 14px;
line-height: 1.6;
}
.index_third_section_btn {
width: 100%;
max-width: 320px;
height: 57px;
font-size: 15px;
}
/* doctors one below another */
.index_third_section_doctors {
grid-template-columns: 1fr;
padding: 30px 20px 45px;
gap: 25px;
}
.index_third_section_doctor_card {
max-width: 440px;
margin: auto;
}
.index_third_section_doctor_image {
height: 350px;
}
.index_third_section_doctor_info {
min-height: 105px;
}
.index_third_section_doctor_info h3 {
font-size: 19px;
}
.index_third_section_doctor_info p {
font-size: 12px;
}
.index_third_section_quote_area {
min-height: 330px;
}
.index_third_section_quote_words {
font-size: 37px;
}
.index_third_section_quote_content p {
font-size: 15px;
}
.index_third_section_bottom_bar {
height: 14px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.index_third_section_title {
font-size: 30px;
}
.index_third_section_doctor_image {
height: 315px;
}
.index_third_section_quote_words {
font-size: 33px;
}
}
/* =========================================================
INDEX FOURTH SECTION
========================================================= */
.index_fourth_section {
width: 100%;
position: relative;
background:
linear-gradient(90deg,
#214e47 0%,
#234f48 48%,
#214c45 100%);
font-family: "DM Sans", sans-serif;
overflow: hidden;
}
/* subtle top line */
.index_fourth_section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.08);
}
/* =========================================================
CONTAINER
========================================================= */
.index_fourth_section_container {
width: 100%;
padding-left: 80px;
padding-right: 80px;
}
.index_fourth_section_row {
min-height: 172px;
display: flex;
align-items: stretch;
}
/* =========================================================
COLUMN
========================================================= */
.index_fourth_section_col {
position: relative;
display: flex;
align-items: center;
}
/* vertical line */
.index_fourth_section_col:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 36px;
bottom: 36px;
width: 1px;
background: rgba(255, 255, 255, 0.09);
}
/* =========================================================
ITEM
========================================================= */
.index_fourth_section_item {
width: 100%;
min-height: 170px;
display: flex;
align-items: center;
gap: 32px;
padding: 25px 39px;
}
/* =========================================================
ICON
========================================================= */
.index_fourth_section_icon {
width: 75px;
min-width: 75px;
height: 75px;
border-radius: ;
display: flex;
align-items: center;
justify-content: center;
/* background-color: red; */
color: #e1ddbd;
font-size: 55px;
line-height: 1;
}
/*
Bootstrap gem icon konchem different untundi.
Screenshot lo diamond outline feel kosam slight scale.
*/
.index_fourth_section_col:first-child .index_fourth_section_icon {
font-size: 58px;
}
/* =========================================================
CONTENT
========================================================= */
.index_fourth_section_content {
min-width: 0;
}
/* Heading */
.index_fourth_section_content h3 {
margin: 0 0 7px;
color: #ffffff;
font-size: 21px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.2px;
}
/* Description */
.index_fourth_section_content p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
white-space: nowrap;
}
/* =========================================================
HOVER
========================================================= */
.index_fourth_section_item {
transition: background 0.3s ease;
}
.index_fourth_section_icon {
transition:
transform 0.3s ease,
color 0.3s ease;
}
.index_fourth_section_item:hover .index_fourth_section_icon {
transform: translateY(-3px);
color: #f1edce;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1800px) {
.index_fourth_section_container {
padding-left: 70px;
padding-right: 70px;
}
.index_fourth_section_item {
padding-left: 36px;
padding-right: 36px;
}
.index_fourth_section_content h3 {
font-size: 21px;
}
.index_fourth_section_content p {
font-size: 16px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1700px) {
.index_fourth_section_container {
padding-left: 45px;
padding-right: 45px;
}
.index_fourth_section_item {
gap: 24px;
padding-left: 28px;
padding-right: 28px;
}
.index_fourth_section_icon {
width: 58px;
min-width: 58px;
font-size: 47px;
}
.index_fourth_section_content h3 {
font-size: 18px;
}
.index_fourth_section_content p {
font-size: 14px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
.index_fourth_section_container {
padding-left: 25px;
padding-right: 25px;
}
.index_fourth_section_item {
gap: 17px;
padding-left: 20px;
padding-right: 20px;
}
.index_fourth_section_icon {
width: 50px;
min-width: 50px;
font-size: 40px;
}
.index_fourth_section_col:first-child .index_fourth_section_icon {
font-size: 44px;
}
.index_fourth_section_content h3 {
font-size: 16px;
}
.index_fourth_section_content p {
font-size: 12px;
white-space: normal;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1199.98px) {
.index_fourth_section_container {
padding-left: 35px;
padding-right: 35px;
}
.index_fourth_section_row {
min-height: auto;
}
.index_fourth_section_col {
min-height: 150px;
}
/* desktop dividers remove */
.index_fourth_section_col::after {
display: none;
}
/* 2 column divider */
.index_fourth_section_col:nth-child(odd)::after {
content: "";
display: block;
position: absolute;
right: 0;
top: 30px;
bottom: 30px;
width: 1px;
background: rgba(255, 255, 255, 0.09);
}
/* row separator */
.index_fourth_section_col:nth-child(1),
.index_fourth_section_col:nth-child(2) {
border-bottom:
1px solid rgba(255, 255, 255, 0.08);
}
.index_fourth_section_item {
min-height: 150px;
padding: 28px;
}
.index_fourth_section_icon {
font-size: 45px;
}
.index_fourth_section_content h3 {
font-size: 18px;
}
.index_fourth_section_content p {
font-size: 14px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.index_fourth_section_container {
padding: 0 20px;
}
.index_fourth_section_col {
min-height: auto;
border-bottom:
1px solid rgba(255, 255, 255, 0.09) !important;
}
.index_fourth_section_col:last-child {
border-bottom: 0 !important;
}
.index_fourth_section_col::after {
display: none !important;
}
.index_fourth_section_item {
min-height: 120px;
padding: 24px 10px;
gap: 22px;
}
.index_fourth_section_icon {
width: 52px;
min-width: 52px;
font-size: 41px;
}
.index_fourth_section_col:first-child .index_fourth_section_icon {
font-size: 44px;
}
.index_fourth_section_content h3 {
margin-bottom: 5px;
font-size: 17px;
}
.index_fourth_section_content p {
font-size: 13px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.index_fourth_section_container {
padding-left: 15px;
padding-right: 15px;
}
.index_fourth_section_item {
gap: 16px;
padding-left: 5px;
padding-right: 5px;
}
.index_fourth_section_icon {
width: 45px;
min-width: 45px;
font-size: 36px;
}
.index_fourth_section_content h3 {
font-size: 15px;
}
.index_fourth_section_content p {
font-size: 12px;
}
}
/* =========================================================
COMMON BACKGROUND
========================================================= */
.index_fifth_section,
.index_sixth_section {
width: 100%;
position: relative;
background: #fdfcf9;
font-family: "DM Sans", sans-serif;
overflow: hidden;
}
/* =========================================================
INDEX FIFTH SECTION
========================================================= */
.index_fifth_section {
padding: 25px 0 20px;
/* border-top: 8px solid #174e43; */
}
.index_fifth_section_container {
padding-left: 60px;
padding-right: 60px;
}
/* =========================================================
FIFTH HEADER
========================================================= */
.index_fifth_section_header {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
margin-bottom: 22px;
}
.index_fifth_section_heading {
text-align: center;
}
.index_fifth_section_heading h2 {
margin: 0;
color: #174e43;
font-family: "Playfair Display", serif;
font-size: 45px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.7px;
}
.index_fifth_section_heading p {
margin: 7px 0 0;
color: #4b5754;
font-size: 18px;
font-weight: 500;
}
/* =========================================================
VIEW MORE
========================================================= */
.index_fifth_section_view_more {
position: absolute;
right: 0;
top: 9px;
min-width: 245px;
height: 57px;
padding: 0 27px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid #81908c;
border-radius: 13px;
background: rgba(255, 255, 255, 0.45);
color: #263d38;
text-decoration: none;
font-size: 15px;
font-weight: 700;
transition: all 0.3s ease;
}
.index_fifth_section_view_more i {
font-size: 20px;
transition: transform 0.3s ease;
}
.index_fifth_section_view_more:hover {
color: #ffffff;
background: #174e43;
border-color: #174e43;
}
.index_fifth_section_view_more:hover i {
transform: translateX(5px);
}
/* =========================================================
FIFTH SLIDER
========================================================= */
.index_fifth_section_slider_wrapper {
width: 100%;
display: flex;
align-items: center;
gap: 20px;
}
.index_fifth_section_slider {
width: 100%;
overflow: hidden;
}
.index_fifth_section_track {
display: flex;
gap: 34px;
transition:
transform 0.65s cubic-bezier(.22, .61, .36, 1);
will-change: transform;
}
/* =========================================================
CASE
========================================================= */
.index_fifth_section_case {
flex: 0 0 calc((100% - 68px) / 3);
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
text-decoration: none;
}
/* =========================================================
BEFORE AFTER IMAGE
========================================================= */
.index_fifth_section_image {
position: relative;
width: 100%;
height: 170px;
border-radius: 11px;
overflow: hidden;
background: #eeeeea;
}
.index_fifth_section_image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.4s ease;
}
.index_fifth_section_case:hover .index_fifth_section_image img {
transform: scale(1.03);
}
/* BEFORE / AFTER LABEL */
.index_fifth_section_image span {
position: absolute;
left: 12px;
bottom: 8px;
min-width: 80px;
height: 31px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: rgba(38, 51, 47, 0.88);
border-radius: 16px;
font-size: 14px;
font-weight: 600;
line-height: 1;
}
/* =========================================================
ARROWS
========================================================= */
.index_fifth_section_arrow,
.index_sixth_section_arrow {
width: 43px;
min-width: 43px;
height: 43px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #51605c;
background: transparent;
border: 0;
border-radius: 50%;
font-size: 31px;
cursor: pointer;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.index_fifth_section_arrow:hover,
.index_sixth_section_arrow:hover {
color: #174e43;
background: #eef1ee;
transform: scale(1.05);
}
/* =========================================================
INDEX SIXTH SECTION
========================================================= */
/* =========================================================
INDEX SIXTH SECTION
========================================================= */
.index_sixth_section {
position: relative;
width: 100%;
padding:
30px 0 22px;
overflow: hidden;
background:
radial-gradient(circle at 50% 45%,
#ffffff 0%,
#fffefa 45%,
#fbfaf3 100%);
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.index_sixth_section_container {
position: relative;
z-index: 5;
max-width: 1500px;
padding-left: 85px;
padding-right: 85px;
}
/* =========================================================
HEADER
========================================================= */
.index_sixth_section_header {
margin-bottom: 27px;
text-align: center;
}
/* eyebrow */
.index_sixth_section_eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 9px;
}
.index_sixth_section_eyebrow span {
width: 72px;
height: 1px;
background: #174e43;
}
.index_sixth_section_eyebrow p {
margin: 0;
color: #31594f;
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 6px;
}
/* title */
.index_sixth_section_header h2 {
margin: 0;
color: #174e43;
font-family: "Playfair Display", serif;
font-size: 52px;
font-weight: 700;
line-height: 1.08;
letter-spacing: -1px;
}
/* subtitle */
.index_sixth_section_subtitle {
margin: 9px 0 0;
color: #747a77;
font-size: 17px;
font-weight: 400;
}
/* =========================================================
SLIDER WRAPPER
========================================================= */
.index_sixth_section_slider_wrapper {
position: relative;
display: flex;
align-items: center;
gap: 23px;
}
/* =========================================================
SLIDER
========================================================= */
.index_sixth_section_slider {
width: 100%;
overflow: hidden;
padding:
5px 2px 15px;
}
/* =========================================================
TRACK
========================================================= */
.index_sixth_section_track {
display: flex;
gap: 20px;
transition:
transform 0.6s cubic-bezier(.22, .61, .36, 1);
will-change: transform;
}
/* =========================================================
CARD
========================================================= */
.index_sixth_section_card {
position: relative;
flex:
0 0 calc((100% - 40px) / 3);
min-width: 0;
min-height: 300px;
padding:
22px 30px 25px;
overflow: hidden;
display: flex;
flex-direction: column;
background:
linear-gradient(145deg,
rgba(255, 255, 255, 0.98),
rgba(252, 251, 245, 0.95));
border:
1px solid rgba(191, 177, 136, 0.48);
border-radius: 22px;
box-shadow:
0 9px 26px rgba(46, 63, 56, 0.06);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.index_sixth_section_card:hover {
transform: translateY(-5px);
box-shadow:
0 15px 35px rgba(39, 65, 57, 0.10);
}
/* =========================================================
CARD TOP
========================================================= */
.index_sixth_section_card_top {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 14px;
}
/* =========================================================
QUOTE ICON
========================================================= */
.index_sixth_section_quote_icon {
width: 53px;
min-width: 53px;
height: 53px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 13px;
color: #17604f;
background:
linear-gradient(145deg,
#f1eadc,
#faf7ef);
border-radius: 18px;
font-family: Georgia, serif;
font-size: 43px;
font-weight: 700;
line-height: 1;
}
/* =========================================================
CATEGORY PILL
========================================================= */
.index_sixth_section_category {
max-width: 190px;
padding:
8px 19px;
color: #31574e;
background:
linear-gradient(90deg,
#f1f3ea,
#f7f8f2);
border-radius: 25px;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
/* =========================================================
REVIEW TEXT
========================================================= */
.index_sixth_section_review {
position: relative;
z-index: 3;
margin: 0;
max-width: 100%;
min-height: 105px;
color: #34423e;
font-size: 17px;
font-weight: 400;
line-height: 1.45;
}
/* =========================================================
SMALL LINE
========================================================= */
.index_sixth_section_small_line {
position: relative;
z-index: 3;
width: 68px;
height: 2px;
margin:
13px 0 19px;
background:
#e4e2d6;
}
/* =========================================================
USER
========================================================= */
.index_sixth_section_user {
position: relative;
z-index: 3;
margin-top: auto;
display: flex;
align-items: center;
gap: 17px;
}
/* =========================================================
AVATAR
========================================================= */
.index_sixth_section_avatar {
width: 61px;
min-width: 61px;
height: 61px;
overflow: hidden;
border:
2px solid rgba(213, 194, 151, 0.65);
border-radius: 50%;
background: #eeeeea;
}
.index_sixth_section_avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
USER INFO
========================================================= */
.index_sixth_section_user_info {
min-width: 0;
}
.index_sixth_section_user_info h3 {
margin:
0 0 7px;
color: #174e43;
font-size: 17px;
font-weight: 600;
line-height: 1.2;
}
/* =========================================================
STARS
========================================================= */
.index_sixth_section_stars {
display: flex;
align-items: center;
gap: 5px;
color: #f8ac18;
font-size: 19px;
}
/* =========================================================
CARD WATERMARK
========================================================= */
.index_sixth_section_card_watermark {
position: absolute;
z-index: 1;
right: -1px;
bottom: -7px;
width: 135px;
height: 125px;
display: flex;
align-items: center;
justify-content: center;
color:
rgba(186, 180, 146, 0.24);
background:
linear-gradient(135deg,
rgba(245, 242, 228, 0.15),
rgba(238, 234, 214, 0.45));
border-radius:
100% 0 0 0;
font-size: 58px;
pointer-events: none;
}
/* =========================================================
ARROWS
========================================================= */
.index_sixth_section_arrow {
position: relative;
z-index: 10;
width: 58px;
min-width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
color: #174e43;
background:
rgba(255, 255, 255, 0.96);
border:
1px solid rgba(71, 102, 92, 0.12);
border-radius: 50%;
box-shadow:
0 7px 20px rgba(37, 61, 54, 0.10);
font-size: 26px;
cursor: pointer;
transition:
color 0.3s ease,
background 0.3s ease,
transform 0.3s ease;
}
.index_sixth_section_arrow:hover {
color: #ffffff;
background: #174e43;
transform: scale(1.06);
}
/* =========================================================
DOTS
========================================================= */
.index_sixth_section_dots {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
}
.index_sixth_section_dot {
width: 11px;
height: 11px;
padding: 0;
border: 0;
border-radius: 50%;
background: #d8ddce;
cursor: pointer;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.index_sixth_section_dot.active {
background: #316958;
transform: scale(1.1);
}
/* =========================================================
TRUST BAR
========================================================= */
.index_sixth_section_trust_bar {
width: 100%;
max-width: 900px;
margin:
28px auto 0;
display: grid;
grid-template-columns:
1fr 1px 1fr 1px 1.25fr;
align-items: center;
}
.index_sixth_section_trust_item {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
color: #737b77;
font-size: 12px;
font-weight: 500;
text-align: center;
}
.index_sixth_section_trust_item i {
color: #547c70;
font-size: 30px;
}
.index_sixth_section_trust_divider {
width: 1px;
height: 36px;
background:
#dcd8ca;
}
/* =========================================================
DECORATIVE LEAVES
========================================================= */
.index_sixth_section_leaf_left {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 250px;
opacity: 0.58;
pointer-events: none;
}
.index_sixth_section_leaf_right {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
width: 280px;
opacity: 0.70;
pointer-events: none;
}
/* =========================================================
HANDWRITING
========================================================= */
.index_sixth_section_handwriting_left,
.index_sixth_section_handwriting_top,
.index_sixth_section_handwriting_bottom {
position: absolute;
z-index: 3;
display: flex;
flex-direction: column;
color:
rgba(34, 83, 69, 0.88);
font-family: "Caveat", cursive;
font-weight: 500;
line-height: 0.88;
text-align: center;
pointer-events: none;
}
/* left */
.index_sixth_section_handwriting_left {
left: 25px;
top: 165px;
font-size: 24px;
transform: rotate(-7deg);
}
.index_sixth_section_handwriting_left span {
margin-top: 3px;
}
/* top right */
.index_sixth_section_handwriting_top {
right: 35px;
top: 34px;
font-size: 28px;
transform: rotate(-6deg);
}
.index_sixth_section_handwriting_top i {
margin-top: 9px;
font-size: 34px;
}
/* bottom right */
.index_sixth_section_handwriting_bottom {
right: 44px;
bottom: 38px;
font-size: 25px;
transform: rotate(-5deg);
}
.index_sixth_section_handwriting_bottom i {
margin-top: 6px;
font-size: 30px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.index_sixth_section_container {
max-width: 1600px;
padding-left: 100px;
padding-right: 100px;
}
.index_sixth_section_header h2 {
font-size: 58px;
}
.index_sixth_section_card {
min-height: 320px;
padding:
24px 34px 27px;
}
.index_sixth_section_review {
font-size: 18px;
}
}
/* =========================================================
1200 - 1399
========================================================= */
@media (max-width: 1399.98px) {
.index_sixth_section_container {
padding-left: 65px;
padding-right: 65px;
}
.index_sixth_section_header h2 {
font-size: 46px;
}
.index_sixth_section_card {
min-height: 285px;
padding:
20px 24px;
}
.index_sixth_section_review {
font-size: 15px;
}
.index_sixth_section_category {
padding:
7px 13px;
font-size: 10px;
}
.index_sixth_section_quote_icon {
width: 47px;
min-width: 47px;
height: 47px;
font-size: 38px;
}
.index_sixth_section_handwriting_left,
.index_sixth_section_handwriting_top,
.index_sixth_section_handwriting_bottom {
display: none;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.index_sixth_section {
padding:
35px 0 28px;
}
.index_sixth_section_container {
padding-left: 30px;
padding-right: 30px;
}
.index_sixth_section_header h2 {
font-size: 42px;
}
.index_sixth_section_card {
flex:
0 0 calc((100% - 20px) / 2);
}
.index_sixth_section_review {
font-size: 16px;
}
.index_sixth_section_arrow {
width: 48px;
min-width: 48px;
height: 48px;
font-size: 21px;
}
.index_sixth_section_leaf_left {
width: 180px;
opacity: 0.28;
}
.index_sixth_section_leaf_right {
width: 190px;
opacity: 0.30;
}
.index_sixth_section_trust_bar {
max-width: 700px;
}
.index_sixth_section_trust_item {
font-size: 13px;
}
.index_sixth_section_trust_item i {
font-size: 25px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.index_sixth_section {
padding:
30px 0 25px;
}
.index_sixth_section_container {
padding-left: 15px;
padding-right: 15px;
}
.index_sixth_section_header {
margin-bottom: 22px;
}
.index_sixth_section_eyebrow {
gap: 10px;
}
.index_sixth_section_eyebrow span {
width: 35px;
}
.index_sixth_section_eyebrow p {
font-size: 8px;
letter-spacing: 3px;
}
.index_sixth_section_header h2 {
font-size: 34px;
}
.index_sixth_section_subtitle {
font-size: 14px;
}
.index_sixth_section_slider_wrapper {
gap: 0;
}
.index_sixth_section_slider {
padding:
5px 3px 15px;
}
.index_sixth_section_track {
gap: 12px;
}
.index_sixth_section_card {
flex:
0 0 100%;
min-height: 295px;
padding:
21px 22px;
}
.index_sixth_section_review {
min-height: auto;
font-size: 16px;
}
.index_sixth_section_category {
max-width: 155px;
font-size: 10px;
}
.index_sixth_section_arrow {
position: absolute;
z-index: 20;
top: 50%;
width: 42px;
min-width: 42px;
height: 42px;
transform: translateY(-50%);
font-size: 19px;
}
.index_sixth_section_arrow:hover {
transform:
translateY(-50%) scale(1.04);
}
.index_sixth_section_prev {
left: -6px;
}
.index_sixth_section_next {
right: -6px;
}
.index_sixth_section_avatar {
width: 55px;
min-width: 55px;
height: 55px;
}
.index_sixth_section_stars {
font-size: 17px;
}
.index_sixth_section_leaf_left,
.index_sixth_section_leaf_right {
display: none;
}
/* Trust vertical */
.index_sixth_section_trust_bar {
margin-top: 25px;
grid-template-columns: 1fr;
}
.index_sixth_section_trust_item {
min-height: 58px;
justify-content: flex-start;
padding:
8px 18px;
font-size: 13px;
border-bottom:
1px solid rgba(100, 110, 104, 0.10);
}
.index_sixth_section_trust_item:last-child {
border-bottom: 0;
}
.index_sixth_section_trust_divider {
display: none;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.index_sixth_section_header h2 {
font-size: 30px;
}
.index_sixth_section_card {
min-height: 285px;
}
.index_sixth_section_review {
font-size: 14px;
}
.index_sixth_section_user_info h3 {
font-size: 15px;
}
.index_sixth_section_stars {
font-size: 15px;
gap: 4px;
}
}
/* =========================================================
DESKTOP 1600
========================================================= */
@media (max-width: 1600px) {
.index_fifth_section_container,
.index_sixth_section_container {
padding-left: 45px;
padding-right: 45px;
}
.index_fifth_section_heading h2,
.index_sixth_section_header h2 {
font-size: 39px;
}
.index_fifth_section_image {
height: 150px;
}
.index_sixth_section_review {
font-size: 19px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.index_fifth_section_container,
.index_sixth_section_container {
padding-left: 30px;
padding-right: 30px;
}
.index_fifth_section_case {
flex-basis: calc((100% - 25px) / 2);
}
.index_fifth_section_track {
gap: 25px;
}
.index_sixth_section_card {
flex-basis: calc((100% - 25px) / 2);
}
.index_sixth_section_track {
gap: 25px;
}
.index_fifth_section_view_more {
min-width: 200px;
height: 52px;
font-size: 13px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.index_fifth_section_header {
flex-direction: column;
align-items: center;
}
.index_fifth_section_view_more {
position: relative;
top: auto;
right: auto;
margin-top: 16px;
}
.index_fifth_section_heading h2 {
font-size: 35px;
}
.index_sixth_section_header h2 {
font-size: 35px;
}
.index_fifth_section_slider_wrapper,
.index_sixth_section_slider_wrapper {
gap: 10px;
}
.index_fifth_section_arrow,
.index_sixth_section_arrow {
width: 35px;
min-width: 35px;
font-size: 25px;
}
.index_fifth_section_image {
height: 140px;
}
.index_sixth_section_card {
padding: 24px 28px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.index_fifth_section {
padding-top: 28px;
}
.index_fifth_section_container,
.index_sixth_section_container {
padding-left: 15px;
padding-right: 15px;
}
.index_fifth_section_heading h2,
.index_sixth_section_header h2 {
font-size: 30px;
line-height: 1.2;
}
.index_fifth_section_heading p,
.index_sixth_section_header p {
font-size: 12px;
}
.index_fifth_section_case {
flex-basis: 100%;
gap: 6px;
}
.index_fifth_section_image {
height: 160px;
}
.index_fifth_section_image span {
left: 7px;
bottom: 7px;
min-width: 60px;
height: 26px;
padding: 0 9px;
font-size: 11px;
}
.index_sixth_section_card {
flex-basis: 100%;
min-height: 205px;
padding: 24px;
}
.index_sixth_section_review {
font-size: 15px;
}
.index_sixth_section_avatar {
width: 50px;
min-width: 50px;
height: 50px;
}
.index_sixth_section_user_info h3 {
font-size: 15px;
}
.index_sixth_section_stars {
gap: 4px;
font-size: 16px;
}
.index_fifth_section_arrow,
.index_sixth_section_arrow {
position: absolute;
z-index: 10;
width: 36px;
min-width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.92);
box-shadow:
0 3px 12px rgba(0, 0, 0, 0.08);
}
.index_fifth_section_slider_wrapper,
.index_sixth_section_slider_wrapper {
position: relative;
}
.index_fifth_section_prev,
.index_sixth_section_prev {
left: 5px;
}
.index_fifth_section_next,
.index_sixth_section_next {
right: 5px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.index_fifth_section_heading h2,
.index_sixth_section_header h2 {
font-size: 27px;
}
.index_fifth_section_image {
height: 135px;
}
}
/* =========================================================
INDEX SEVEN SECTION
========================================================= */
.index_seven_section {
width: 100%;
position: relative;
overflow: hidden;
background:
linear-gradient(90deg,
#214d46 0%,
#234f48 50%,
#214d46 100%);
font-family: "DM Sans", sans-serif;
}
/* =========================================================
SEVEN CONTAINER
========================================================= */
.index_seven_section_container {
width: 100%;
padding-left: 62px;
padding-right: 62px;
}
.index_seven_section_inner {
min-height: 120px;
display: grid;
grid-template-columns:
330px minmax(400px, 1fr) 260px 180px;
align-items: center;
column-gap: 40px;
}
/* =========================================================
LOGO
========================================================= */
.index_seven_section_logo {
display: flex;
align-items: center;
}
.index_seven_section_logo a {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.index_seven_section_logo img {
width: 275px;
height: auto;
display: block;
object-fit: contain;
}
/* =========================================================
CONTENT
========================================================= */
.index_seven_section_content {
min-width: 0;
}
.index_seven_section_content h3 {
margin: 0 0 6px;
color: #ffffff;
font-size: 17px;
font-weight: 600;
line-height: 1.3;
}
.index_seven_section_content p {
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}
/* =========================================================
BUTTON
========================================================= */
.index_seven_section_button_wrap {
display: flex;
justify-content: center;
}
.index_seven_section_button {
width: 218px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: #ffffff;
color: #30483f;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 11px;
text-decoration: none;
font-size: 15px;
font-weight: 600;
box-shadow:
0 4px 13px rgba(0, 0, 0, 0.05);
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.index_seven_section_button i {
font-size: 18px;
}
.index_seven_section_button:hover {
background: #f1f4f1;
color: #174e43;
transform: translateY(-2px);
}
/* =========================================================
HANDWRITING
========================================================= */
.index_seven_section_handwriting {
display: flex;
flex-direction: column;
align-items: center;
color: rgba(228, 225, 204, 0.70);
font-family: "Caveat", cursive;
font-size: 25px;
font-weight: 500;
line-height: 1.1;
transform: rotate(-7deg);
text-align: center;
}
.index_seven_section_handwriting span {
display: flex;
align-items: center;
gap: 6px;
}
.index_seven_section_handwriting i {
font-size: 16px;
}
/* =========================================================
INDEX EIGHT SECTION
========================================================= */
.index_eight_section {
width: 100%;
background: #ffffff;
font-family: "DM Sans", sans-serif;
position: relative;
overflow: hidden;
}
/* =========================================================
EIGHT CONTAINER
========================================================= */
.index_eight_section_container {
width: 100%;
padding-left: 64px;
padding-right: 64px;
}
.index_eight_section_inner {
min-height: 120px;
display: grid;
grid-template-columns:
minmax(400px, 1.2fr) 270px 1px minmax(470px, 1fr);
align-items: center;
column-gap: 42px;
}
/* =========================================================
COMMON BLOCK
========================================================= */
.index_eight_section_block {
display: flex;
align-items: center;
gap: 20px;
}
/* =========================================================
ICON
========================================================= */
.index_eight_section_icon {
width: 38px;
min-width: 38px;
display: flex;
align-items: center;
justify-content: center;
color: #383832;
font-size: 32px;
}
/* phone slightly smaller */
.index_eight_section_phone .index_eight_section_icon {
font-size: 29px;
}
/* =========================================================
TEXT
========================================================= */
.index_eight_section_text {
min-width: 0;
}
.index_eight_section_text p {
margin: 0;
color: #353934;
font-size: 14px;
font-weight: 600;
line-height: 1.55;
}
/* =========================================================
PHONE LINKS
========================================================= */
.index_eight_section_phone .index_eight_section_text {
display: flex;
flex-direction: column;
}
.index_eight_section_phone a {
color: #383c37;
font-size: 14px;
font-weight: 600;
line-height: 1.45;
text-decoration: none;
}
.index_eight_section_phone a:hover {
color: #174e43;
}
/* =========================================================
DIVIDER
========================================================= */
.index_eight_section_divider {
width: 1px;
height: 62px;
background: #d8d8d4;
}
/* =========================================================
RIGHT AREA
========================================================= */
.index_eight_section_right {
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
/* =========================================================
SOCIAL
========================================================= */
.index_eight_section_socials {
display: flex;
align-items: center;
gap: 15px;
}
.index_eight_section_socials a {
width: 25px;
height: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #393934;
text-decoration: none;
font-size: 22px;
transition:
color 0.25s ease,
transform 0.25s ease;
}
.index_eight_section_socials a:hover {
color: #174e43;
transform: translateY(-2px);
}
/* =========================================================
FOOTER MENU
========================================================= */
.index_eight_section_menu {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.index_eight_section_menu a {
color: #343a36;
font-size: 16px;
font-weight: 550;
text-decoration: none;
white-space: nowrap;
}
.index_eight_section_menu a:hover {
color: #174e43;
}
.index_eight_section_menu span {
color: #6e716d;
font-size: 12px;
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1600px) {
.index_seven_section_container,
.index_eight_section_container {
padding-left: 45px;
padding-right: 45px;
}
.index_seven_section_inner {
grid-template-columns:
280px minmax(350px, 1fr) 225px 150px;
gap: 28px;
}
.index_seven_section_logo img {
width: 235px;
}
.index_seven_section_content h3 {
font-size: 15px;
}
.index_seven_section_content p {
font-size: 15px;
}
.index_seven_section_button {
width: 195px;
height: 47px;
font-size: 15px;
}
.index_eight_section_inner {
grid-template-columns:
minmax(350px, 1fr) 235px 1px minmax(430px, 1fr);
gap: 32px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.index_seven_section_container {
padding-left: 30px;
padding-right: 30px;
}
.index_seven_section_inner {
grid-template-columns:
230px 1fr 200px;
min-height: 115px;
gap: 24px;
}
.index_seven_section_logo img {
width: 205px;
}
.index_seven_section_handwriting {
display: none;
}
.index_seven_section_content h3 {
font-size: 14px;
}
.index_seven_section_content p {
font-size: 11px;
}
.index_seven_section_button {
width: 185px;
}
.index_eight_section_container {
padding-left: 30px;
padding-right: 30px;
}
.index_eight_section_inner {
grid-template-columns:
1fr 230px 1px 1fr;
gap: 25px;
}
.index_eight_section_text p {
font-size: 11px;
}
.index_eight_section_phone a {
font-size: 12px;
}
.index_eight_section_menu {
gap: 5px;
}
.index_eight_section_menu a {
font-size: 11px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.index_seven_section {
padding: 30px 0;
}
.index_seven_section_inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
gap: 25px;
}
.index_seven_section_logo {
width: 100%;
justify-content: center;
}
.index_seven_section_logo img {
width: 230px;
}
.index_seven_section_content {
width: 100%;
}
.index_seven_section_content h3 {
font-size: 17px;
}
.index_seven_section_content p {
font-size: 13px;
}
.index_seven_section_button_wrap {
width: 100%;
}
.index_seven_section_button {
width: 215px;
}
/* footer bottom */
.index_eight_section {
padding: 30px 0;
}
.index_eight_section_inner {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 30px;
}
.index_eight_section_divider {
display: none;
}
.index_eight_section_address,
.index_eight_section_phone {
align-self: flex-start;
}
.index_eight_section_right {
grid-column: 1 / -1;
padding-top: 22px;
border-top: 1px solid #e5e5e2;
align-items: center;
}
.index_eight_section_socials {
justify-content: center;
}
.index_eight_section_menu {
justify-content: center;
}
.index_eight_section_text p {
font-size: 13px;
}
.index_eight_section_phone a {
font-size: 13px;
}
.index_eight_section_menu a {
font-size: 13px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.index_seven_section_container,
.index_eight_section_container {
padding-left: 20px;
padding-right: 20px;
}
.index_seven_section_logo img {
width: 205px;
}
.index_seven_section_content h3 {
font-size: 16px;
}
.index_seven_section_content p {
max-width: 420px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
.index_eight_section_inner {
grid-template-columns: 1fr;
gap: 25px;
}
.index_eight_section_block {
justify-content: flex-start;
max-width: 450px;
width: 100%;
margin: 0 auto;
}
.index_eight_section_address,
.index_eight_section_phone {
padding-bottom: 23px;
border-bottom: 1px solid #e6e6e2;
}
.index_eight_section_right {
grid-column: auto;
border-top: 0;
padding-top: 0;
}
.index_eight_section_socials {
justify-content: center;
}
.index_eight_section_menu {
justify-content: center;
row-gap: 10px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.index_seven_section {
padding-top: 28px;
padding-bottom: 28px;
}
.index_seven_section_logo img {
width: 185px;
}
.index_seven_section_content h3 {
font-size: 15px;
}
.index_seven_section_content p {
font-size: 11px;
line-height: 1.6;
}
.index_seven_section_button {
width: 205px;
height: 48px;
font-size: 13px;
}
.index_eight_section_block {
gap: 15px;
}
.index_eight_section_icon {
width: 30px;
min-width: 30px;
font-size: 27px;
}
.index_eight_section_text p {
font-size: 11px;
}
.index_eight_section_phone a {
font-size: 12px;
}
.index_eight_section_menu {
gap: 5px;
}
.index_eight_section_menu a {
font-size: 11px;
}
}
/* about page */
/* ==========================================================
ABOUT FIRST SECTION
========================================================== */
.about_first_section {
width: 100%;
position: relative;
overflow: hidden;
background: #f5f6f3;
font-family: "DM Sans", sans-serif;
}
/* ==========================================================
CONTAINER
========================================================== */
.about_first_section_container {
width: 100%;
padding: 0;
}
.about_first_section_row {
min-height: 660px;
}
/* ==========================================================
LEFT SIDE
========================================================== */
.about_first_section_left {
position: relative;
min-height: 660px;
display: flex;
align-items: center;
overflow: hidden;
background:
linear-gradient(90deg,
#f2f4f1 0%,
#f6f7f4 65%,
#f4f5f2 100%);
}
/* ==========================================================
LEFT DECORATIVE CURVE
========================================================== */
.about_first_section_left_shape {
position: absolute;
left: -175px;
bottom: -130px;
width: 300px;
height: 640px;
border-radius: 50%;
background:
rgba(205, 215, 210, 0.55);
transform: rotate(-13deg);
pointer-events: none;
}
.about_first_section_left_shape::after {
content: "";
position: absolute;
top: 30px;
right: 42px;
width: 165px;
height: 570px;
border-radius: 50%;
border-right:
1px solid rgba(145, 164, 157, 0.35);
}
/* ==========================================================
CONTENT
========================================================== */
.about_first_section_content {
position: relative;
z-index: 3;
width: 100%;
padding-left: 95px;
padding-right: 48px;
padding-top: 20px;
}
/* ==========================================================
EYEBROW
========================================================== */
.about_first_section_eyebrow {
margin-bottom: 13px;
color: #516c65;
font-size: 15px;
font-weight: 600;
letter-spacing: 7px;
line-height: 1.4;
}
/* ==========================================================
TITLE
========================================================== */
.about_first_section_title {
margin: 0;
color: #103f36;
font-family: "Playfair Display", serif;
/* font-size: clamp(52px, 4.3vw, 75px); */
/* font-size:57px; */
font-weight: 600;
line-height: 1.25;
letter-spacing: -2px;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.about_first_section_description {
max-width: 575px;
margin: 28px 0 0;
color: #31403c;
font-size: 17px;
font-weight: 500;
line-height: 1.45;
}
.about_first_section_description strong {
font-weight: 700;
}
/* ==========================================================
FEATURES
========================================================== */
.about_first_section_features {
width: 100%;
max-width: 690px;
margin-top: 38px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
/* ==========================================================
FEATURE
========================================================== */
.about_first_section_feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* icon */
.about_first_section_feature_icon {
width: 60px;
height: 60px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #294f47;
font-size: 45px;
line-height: 1;
transition:
transform 0.3s ease,
color 0.3s ease;
}
.about_first_section_feature:hover .about_first_section_feature_icon {
transform: translateY(-4px);
color: #173f37;
}
/* text */
.about_first_section_feature_text {
color: #273934;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
/* ==========================================================
RIGHT SIDE
========================================================== */
.about_first_section_right {
position: relative;
min-height: 660px;
overflow: hidden;
}
/* image wrapper */
.about_first_section_image_wrapper {
position: relative;
width: 100%;
height: 100%;
min-height: 660px;
overflow: hidden;
background: #e9ebe7;
}
/* ==========================================================
IMAGE
========================================================== */
.about_first_section_image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* object-fit: cover; */
object-position: center center;
display: block;
}
/* subtle fade from left */
.about_first_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
top: 0;
bottom: 0;
width: 100px;
background:
linear-gradient(90deg,
rgba(244, 246, 242, 0.35),
rgba(244, 246, 242, 0));
pointer-events: none;
}
/* ==========================================================
IMAGE QUOTE
========================================================== */
.about_first_section_image_quote {
position: absolute;
z-index: 5;
right: 4.5%;
top: 25%;
display: flex;
flex-direction: column;
color: rgba(36, 72, 63, 0.76);
font-family: "Playfair Display", serif;
font-style: italic;
font-size: 40px;
font-weight: 500;
line-height: 1.4;
text-align: left;
}
.about_first_section_quote_line {
width: 58px;
height: 2px;
margin-top: 19px;
margin-left: 10px;
background: #5e7b74;
}
/* ==========================================================
1700 BELOW
========================================================== */
@media (max-width: 1700px) {
.about_first_section_row,
.about_first_section_left,
.about_first_section_right,
.about_first_section_image_wrapper {
min-height: 620px;
}
.about_first_section_content {
padding-left: 75px;
padding-right: 35px;
}
.about_first_section_eyebrow {
font-size: 15px;
letter-spacing: 6px;
/* text-align: center; */
}
.about_first_section_description {
max-width: 510px;
font-size: 21px;
}
.about_first_section_features {
margin-top: 32px;
gap: 12px;
}
.about_first_section_feature_icon {
width: 52px;
height: 52px;
font-size: 39px;
}
.about_first_section_feature_text {
font-size: 14px;
}
.about_first_section_image_quote {
font-size: 35px;
}
}
/* ==========================================================
LAPTOP
========================================================== */
@media (max-width: 1399.98px) {
.about_first_section_row,
.about_first_section_left,
.about_first_section_right,
.about_first_section_image_wrapper {
min-height: 560px;
}
.about_first_section_content {
padding-left: 55px;
padding-right: 28px;
}
.about_first_section_title {
font-size: 40px;
/* font-size: 53px; */
}
.about_first_section_description {
margin-top: 22px;
font-size: 15px;
}
.about_first_section_features {
margin-top: 14px;
}
.about_first_section_feature_icon {
width: 45px;
height: 45px;
font-size: 34px;
}
.about_first_section_feature_text {
font-size: 11px;
}
.about_first_section_image_quote {
font-size: 30px;
}
}
@media (max-width: 991.98px) {
.about_first_section_title {
font-size: 40px;
/* font-size: 53px; */
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 991.98px) {
.about_first_section_row {
min-height: auto;
}
.about_first_section_left {
min-height: auto;
padding: 65px 0 55px;
}
.about_first_section_content {
padding-left: 45px;
padding-right: 45px;
}
.about_first_section_title {
font-size: 67px;
}
.about_first_section_description {
max-width: 680px;
font-size: 16px;
}
.about_first_section_features {
max-width: 720px;
gap: 20px;
}
.about_first_section_feature_icon {
width: 55px;
height: 55px;
font-size: 42px;
}
.about_first_section_feature_text {
font-size: 13px;
}
.about_first_section_right,
.about_first_section_image_wrapper {
min-height: 560px;
}
.about_first_section_image_quote {
right: 7%;
font-size: 35px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767.98px) {
.about_first_section_left {
padding: 50px 0 42px;
}
.about_first_section_content {
padding-left: 22px;
padding-right: 22px;
}
.about_first_section_eyebrow {
margin-bottom: 10px;
font-size: 14px;
letter-spacing: 4px;
text-align: center;
}
.about_first_section_title {
font-size: 46px;
letter-spacing: -1.2px;
line-height: 1.03;
}
.about_first_section_description {
margin-top: 24px;
font-size: 14px;
line-height: 1.55;
}
.about_first_section_features {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 15px;
margin-top: 36px;
}
.about_first_section_feature_icon {
width: 50px;
height: 50px;
font-size: 38px;
}
.about_first_section_feature_text {
font-size: 12px;
}
.about_first_section_right,
.about_first_section_image_wrapper {
min-height: 430px;
}
.about_first_section_image {
object-position: center;
}
.about_first_section_image_quote {
right: 20px;
top: 50px;
padding: 12px 16px;
background: rgba(245, 247, 244, 0.70);
backdrop-filter: blur(3px);
border-radius: 12px;
font-size: 28px;
}
.about_first_section_quote_line {
width: 45px;
margin-top: 12px;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 420px) {
.about_first_section_title {
font-size: 32px;
}
.about_first_section_description {
font-size: 13px;
}
.about_first_section_right,
.about_first_section_image_wrapper {
min-height: 370px;
}
.about_first_section_image_quote {
font-size: 24px;
}
}
/* ==========================================================
ABOUT SECOND SECTION
========================================================== */
.about_second_section {
width: 100%;
position: relative;
overflow: hidden;
background: #fbfaf7;
font-family: "DM Sans", sans-serif;
padding: 22px 0;
}
/* ==========================================================
CONTAINER
========================================================== */
.about_second_section_container {
width: 100%;
padding-left: 45px;
padding-right: 45px;
}
.about_second_section_row {
min-height: 325px;
align-items: center;
}
/* ==========================================================
LEFT
========================================================== */
.about_second_section_left {
position: relative;
padding-right: 35px;
}
/* ==========================================================
IMAGE WRAPPER
========================================================== */
.about_second_section_image_wrapper {
position: relative;
width: 100%;
height: 285px;
overflow: hidden;
border-radius: 15px;
background: #e8ebe7;
}
/* IMAGE */
.about_second_section_image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.about_second_section_image_wrapper:hover .about_second_section_image {
transform: scale(1.02);
}
/* ==========================================================
IMAGE OVERLAY CARD
========================================================== */
.about_second_section_image_card {
position: absolute;
left: -15px;
bottom: 15px;
width: 210px;
min-height: 86px;
display: flex;
align-items: center;
gap: 16px;
padding: 17px 18px;
color: #ffffff;
background:
linear-gradient(135deg,
rgba(25, 78, 68, 0.96),
rgba(20, 66, 58, 0.95));
border-radius: 14px;
box-shadow:
0 10px 25px rgba(17, 57, 49, 0.20);
backdrop-filter: blur(4px);
}
/* overlay icon */
.about_second_section_image_card_icon {
width: 48px;
min-width: 48px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: #e1e5dc;
font-size: 39px;
}
/* overlay text */
.about_second_section_image_card_text {
color: #ffffff;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
/* ==========================================================
RIGHT CONTENT
========================================================== */
.about_second_section_right {
display: flex;
align-items: center;
}
.about_second_section_content {
width: 100%;
padding-left: 15px;
}
/* ==========================================================
EYEBROW
========================================================== */
.about_second_section_eyebrow {
margin-bottom: 7px;
color: #526d66;
font-size: 12px;
font-weight: 600;
letter-spacing: 6px;
line-height: 1.4;
}
/* ==========================================================
TITLE
========================================================== */
.about_second_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 39px;
font-weight: 600;
line-height: 0.98;
letter-spacing: -1.2px;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.about_second_section_description {
max-width: 670px;
margin: 15px 0 0;
color: #394642;
font-size: 13px;
font-weight: 500;
line-height: 1.45;
}
/* ==========================================================
FEATURES
========================================================== */
.about_second_section_features {
width: 100%;
margin-top: 20px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* ==========================================================
FEATURE
========================================================== */
.about_second_section_feature {
position: relative;
min-height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
}
/* vertical divider */
.about_second_section_feature:not(:last-child)::after {
content: "";
position: absolute;
top: 5px;
right: 0;
bottom: 5px;
width: 1px;
background: #dddeda;
}
/* icon */
.about_second_section_feature_icon {
width: 45px;
height: 45px;
margin-bottom: 7px;
display: flex;
align-items: center;
justify-content: center;
color: #294f47;
font-size: 37px;
line-height: 1;
transition:
transform 0.3s ease,
color 0.3s ease;
}
.about_second_section_feature:hover .about_second_section_feature_icon {
transform: translateY(-3px);
color: #163f37;
}
/* text */
.about_second_section_feature_text {
color: #374440;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
}
/* ==========================================================
1600 BELOW
========================================================== */
@media (max-width: 1600px) {
.about_second_section_container {
padding-left: 38px;
padding-right: 38px;
}
.about_second_section_image_wrapper {
height: 270px;
}
.about_second_section_title {
font-size: 36px;
}
.about_second_section_description {
font-size: 16px;
}
}
/* ==========================================================
LAPTOP
========================================================== */
@media (max-width: 1199.98px) {
.about_second_section {
padding: 30px 0;
}
.about_second_section_container {
padding-left: 30px;
padding-right: 30px;
}
.about_second_section_left {
padding-right: 25px;
}
.about_second_section_image_wrapper {
height: 260px;
}
.about_second_section_title {
font-size: 32px;
}
.about_second_section_description {
font-size: 15px;
line-height: 1.5;
}
.about_second_section_feature {
padding: 0 10px;
}
.about_second_section_feature_icon {
font-size: 32px;
}
.about_second_section_feature_text {
font-size: 14px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 991.98px) {
.about_second_section {
padding: 45px 0;
}
.about_second_section_container {
padding-left: 30px;
padding-right: 30px;
}
.about_second_section_left {
padding-right: 0;
padding-bottom: 35px;
}
.about_second_section_image_wrapper {
height: 430px;
max-width: 750px;
margin: auto;
}
.about_second_section_image_card {
left: 20px;
bottom: 20px;
width: 220px;
}
.about_second_section_content {
max-width: 760px;
margin: auto;
padding-left: 0;
}
.about_second_section_eyebrow {
font-size: 12px;
}
.about_second_section_title {
font-size: 43px;
}
.about_second_section_description {
max-width: 720px;
font-size: 14px;
}
.about_second_section_features {
margin-top: 30px;
}
.about_second_section_feature_icon {
width: 50px;
height: 50px;
font-size: 39px;
}
.about_second_section_feature_text {
font-size: 12px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767.98px) {
.about_second_section {
padding: 35px 0;
}
.about_second_section_container {
padding-left: 18px;
padding-right: 18px;
}
.about_second_section_image_wrapper {
height: 330px;
border-radius: 13px;
}
.about_second_section_image_card {
left: 12px;
bottom: 12px;
width: 190px;
min-height: 78px;
padding: 13px 14px;
}
.about_second_section_image_card_icon {
width: 40px;
min-width: 40px;
font-size: 33px;
}
.about_second_section_image_card_text {
font-size: 11px;
}
.about_second_section_eyebrow {
font-size: 10px;
letter-spacing: 4px;
}
.about_second_section_title {
font-size: 35px;
line-height: 1.05;
}
.about_second_section_description {
font-size: 13px;
line-height: 1.55;
}
.about_second_section_features {
grid-template-columns: 1fr;
margin-top: 25px;
}
.about_second_section_feature {
min-height: 95px;
flex-direction: row;
justify-content: flex-start;
gap: 20px;
padding: 15px 5px;
text-align: left;
/* border-bottom: 1px solid #2c6747; */
border-bottom: 1px solid #074f42;
}
.about_second_section_feature:last-child {
border-bottom: 0;
}
.about_second_section_feature::after {
display: none !important;
}
.about_second_section_feature_icon {
margin-bottom: 0;
flex-shrink: 0;
}
.about_second_section_feature_text {
font-size: 13px;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 420px) {
.about_second_section_image_wrapper {
height: 285px;
}
.about_second_section_title {
font-size: 28px;
}
.about_second_section_description {
font-size: 12px;
}
}
/* ==========================================================
ABOUT THIRD SECTION
========================================================== */
/* ==========================================================
ABOUT THIRD SECTION
========================================================== */
.about_third_section {
position: relative;
width: 100%;
min-height: 580px;
overflow: hidden;
padding: 48px 0;
background:
radial-gradient(circle at 50% 40%,
#ffffff 0%,
#fcfbf6 50%,
#f7f7f1 100%);
font-family: "DM Sans", sans-serif;
}
/* ==========================================================
CONTAINER
========================================================== */
.about_third_section_container {
position: relative;
z-index: 5;
width: 100%;
max-width: 1900px;
margin: auto;
padding-left: 70px;
padding-right: 70px;
}
/* ==========================================================
GRID
========================================================== */
.about_third_section_grid {
width: 100%;
min-height: 490px;
display: grid;
grid-template-columns:
minmax(340px, 1.25fr) minmax(300px, 0.95fr) minmax(300px, 0.95fr) minmax(260px, 0.82fr);
gap: 26px;
align-items: center;
}
/* ==========================================================
LEFT
========================================================== */
.about_third_section_left {
position: relative;
padding:
25px 20px 25px 5px;
}
/* ==========================================================
EYEBROW
========================================================== */
.about_third_section_eyebrow {
display: flex;
align-items: center;
gap: 17px;
margin-bottom: 20px;
}
.about_third_section_eyebrow>span {
width: 42px;
height: 1px;
background: #789088;
}
.about_third_section_eyebrow p {
margin: 0;
color: #52766d;
font-size: 11px;
font-weight: 600;
letter-spacing: 6px;
}
/* ==========================================================
TITLE
========================================================== */
.about_third_section_title {
margin: 0;
color: #0b4a3e;
font-family: "Playfair Display", serif;
font-size: 46px;
/* font-size: 59px; */
font-weight: 600;
line-height: 1.04;
letter-spacing: -1.8px;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.about_third_section_description {
max-width: 500px;
margin:
23px 0 0;
color: #31524a;
font-size: 15px;
font-weight: 500;
line-height: 1.7;
}
/* ==========================================================
TRUST LINE
========================================================== */
.about_third_section_trust_line {
display: flex;
align-items: center;
gap: 17px;
margin-top: 33px;
}
.about_third_section_trust_line>span {
width: 55px;
height: 1px;
background: #91a39d;
}
.about_third_section_trust_line p {
margin: 0;
color: #648079;
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
white-space: nowrap;
}
/* ==========================================================
DOCTOR CARD
========================================================== */
.about_third_section_doctor_card {
position: relative;
width: 100%;
min-height: 480px;
padding: 12px;
overflow: hidden;
background:
linear-gradient(145deg,
rgba(255, 255, 255, 0.98),
rgba(250, 249, 243, 0.97));
border:
1px solid rgba(206, 188, 146, 0.55);
border-radius: 22px;
box-shadow:
0 12px 30px rgba(36, 65, 56, 0.08);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.about_third_section_doctor_card::before {
content: "";
position: absolute;
inset: 5px;
z-index: 0;
border:
1px solid rgba(255, 255, 255, 0.85);
border-radius: 19px;
pointer-events: none;
}
.about_third_section_doctor_card:hover {
transform: translateY(-7px);
box-shadow:
0 20px 42px rgba(32, 67, 57, 0.13);
}
/* ==========================================================
DOCTOR IMAGE
========================================================== */
.about_third_section_doctor_image {
position: relative;
z-index: 2;
width: 100%;
height: 275px;
overflow: hidden;
border-radius:
17px 17px 7px 7px;
background: #e9ebe6;
}
.about_third_section_doctor_image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.45s ease;
}
.about_third_section_doctor_card:hover .about_third_section_doctor_image img {
transform: scale(1.025);
}
/* white wave */
.about_third_section_image_curve {
position: absolute;
z-index: 3;
left: -5%;
right: -5%;
bottom: -38px;
height: 75px;
border-radius: 50% 50% 0 0;
background:
rgba(255, 255, 255, 0.94);
transform: rotate(-3deg);
}
/* tiny leaf decoration */
.about_third_section_image_leaf {
position: absolute;
z-index: 4;
right: 5px;
bottom: 2px;
width: 46px;
height: 62px;
opacity: 0.38;
transform: rotate(25deg);
}
.about_third_section_image_leaf::before,
.about_third_section_image_leaf::after {
content: "";
position: absolute;
width: 24px;
height: 42px;
border-radius:
80% 20% 80% 20%;
background:
linear-gradient(145deg,
#7d9c72,
#c4d0ae);
}
.about_third_section_image_leaf::before {
left: 0;
top: 16px;
transform: rotate(-28deg);
}
.about_third_section_image_leaf::after {
right: 0;
top: 0;
transform: rotate(25deg);
}
/* ==========================================================
DOCTOR INFO
========================================================== */
.about_third_section_doctor_info {
position: relative;
z-index: 5;
min-height: 180px;
padding:
20px 12px 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about_third_section_doctor_info h3 {
margin: 0;
color: #0d4c40;
font-family: "Playfair Display", serif;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.about_third_section_doctor_info p {
min-height: 44px;
margin:
7px 0 0;
color: #284a43;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
}
/* ==========================================================
GOLD LINE
========================================================== */
.about_third_section_gold_line {
width: 43px;
height: 1px;
margin:
15px 0 17px;
background:
linear-gradient(90deg,
transparent,
#c9a567,
transparent);
}
/* ==========================================================
PROFILE BUTTON
========================================================== */
.about_third_section_profile_btn {
width: 190px;
height: 49px;
padding:
0 25px;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
background:
linear-gradient(100deg,
#074f42,
#006453);
border:
1px solid rgba(34, 137, 116, 0.5);
border-radius: 30px;
text-decoration: none;
box-shadow:
0 8px 18px rgba(14, 79, 66, 0.19);
font-family: "Playfair Display", serif;
font-size: 16px;
font-weight: 600;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.about_third_section_profile_btn i {
font-size: 19px;
transition:
transform 0.3s ease;
}
.about_third_section_profile_btn:hover {
color: #ffffff;
transform: translateY(-3px);
box-shadow:
0 13px 25px rgba(14, 79, 66, 0.26);
}
.about_third_section_profile_btn:hover i {
transform: translateX(5px);
}
/* ==========================================================
RIGHT SIDE
========================================================== */
.about_third_section_right {
position: relative;
min-height: 450px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding:
35px 0 5px;
}
/* ==========================================================
HAND WRITTEN
========================================================== */
.about_third_section_quote {
position: relative;
z-index: 5;
width: 180px;
display: flex;
flex-direction: column;
align-items: center;
color: #14584c;
font-family: "Caveat", cursive;
font-size: 38px;
font-weight: 500;
line-height: 0.92;
text-align: center;
transform: rotate(-5deg);
}
.about_third_section_quote>span:nth-child(1) {
transform: translateX(-22px);
}
.about_third_section_quote>span:nth-child(2) {
margin-top: 7px;
transform: translateX(8px);
}
.about_third_section_quote>span:nth-child(3) {
margin-top: 8px;
transform: translateX(-5px);
}
.about_third_section_quote_last {
display: flex;
align-items: center;
margin-top: 8px;
transform: translateX(20px);
}
.about_third_section_quote_last i {
margin-left: 8px;
font-size: 25px;
}
/* ==========================================================
TOOTH OUTLINE
========================================================== */
.about_third_section_tooth_outline {
position: absolute;
z-index: 1;
right: -2px;
top: 2px;
width: 175px;
height: 245px;
opacity: 0.35;
border:
4px solid rgba(194, 166, 108, 0.62);
border-radius:
48% 52% 55% 45% / 35% 35% 65% 65%;
transform:
rotate(-8deg) scaleX(0.82);
pointer-events: none;
}
.about_third_section_tooth_outline::before {
content: "";
position: absolute;
left: 46%;
bottom: -3px;
width: 38px;
height: 120px;
border-left:
4px solid rgba(194, 166, 108, 0.62);
transform:
rotate(12deg);
}
/* tooth leaves */
.about_third_section_tooth_leaf {
position: absolute;
right: -28px;
bottom: -10px;
width: 115px;
height: 120px;
}
.about_third_section_tooth_leaf::before,
.about_third_section_tooth_leaf::after {
content: "";
position: absolute;
width: 48px;
height: 90px;
border-radius:
80% 20% 80% 20%;
background:
linear-gradient(145deg,
#54795d,
#96ad87);
}
.about_third_section_tooth_leaf::before {
left: 10px;
top: 30px;
transform: rotate(-40deg);
}
.about_third_section_tooth_leaf::after {
right: 8px;
top: 0;
transform: rotate(30deg);
}
/* shine */
.about_third_section_tooth_shine {
position: absolute;
right: -8px;
top: 25px;
color: #cda65d;
font-size: 28px;
animation:
about_third_section_shine 2.5s ease-in-out infinite;
}
@keyframes about_third_section_shine {
0%,
100% {
opacity: 0.35;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
/* ==========================================================
OUR DOCTORS
========================================================== */
.about_third_section_all_doctors {
position: relative;
z-index: 5;
width: 190px;
height: 48px;
padding:
0 23px;
display: flex;
align-items: center;
justify-content: space-between;
color: #174e43;
background:
rgba(255, 255, 255, 0.50);
border:
1.5px solid #47766b;
border-radius: 26px;
text-decoration: none;
box-shadow:
0 7px 15px rgba(31, 65, 56, 0.06);
font-size: 14px;
font-weight: 700;
transition:
color 0.3s ease,
background 0.3s ease,
transform 0.3s ease;
}
.about_third_section_all_doctors i {
font-size: 18px;
transition:
transform 0.3s ease;
}
.about_third_section_all_doctors:hover {
color: #ffffff;
background: #174e43;
transform: translateY(-2px);
}
.about_third_section_all_doctors:hover i {
transform: translateX(4px);
}
/* ==========================================================
RIGHT BOTTOM
========================================================== */
.about_third_section_right_bottom {
position: relative;
z-index: 5;
text-align: center;
}
.about_third_section_right_bottom>span {
display: block;
width: 45px;
height: 1px;
margin:
0 auto 15px;
background: #c3a36a;
}
.about_third_section_right_bottom p {
margin: 0;
color: #5a7c73;
font-size: 10px;
font-weight: 600;
line-height: 1.8;
letter-spacing: 5px;
}
/* ==========================================================
GLOBAL DECORATIVE CURVES
========================================================== */
.about_third_section_curve {
position: absolute;
z-index: 1;
pointer-events: none;
}
.about_third_section_curve_top {
left: -80px;
top: -260px;
width: 800px;
height: 400px;
border:
1px solid rgba(196, 161, 99, 0.45);
border-radius: 50%;
}
.about_third_section_curve_top::after {
content: "";
position: absolute;
inset: 25px;
border:
1px solid rgba(42, 92, 79, 0.06);
border-radius: inherit;
}
.about_third_section_curve_bottom {
left: 60px;
right: -150px;
bottom: -270px;
height: 390px;
border:
1px solid rgba(199, 161, 93, 0.55);
border-radius: 50%;
}
/* ==========================================================
BACKGROUND LEAVES
========================================================== */
.about_third_section_leaf {
position: absolute;
z-index: 2;
opacity: 0.65;
pointer-events: none;
}
.about_third_section_leaf::before,
.about_third_section_leaf::after {
content: "";
position: absolute;
border-radius:
80% 20% 80% 20%;
background:
linear-gradient(145deg,
#385d46,
#88a17b);
}
/* left */
.about_third_section_leaf_left {
left: -30px;
bottom: -5px;
width: 170px;
height: 190px;
filter: blur(1px);
}
.about_third_section_leaf_left::before {
width: 62px;
height: 135px;
left: 12px;
bottom: 0;
transform: rotate(30deg);
}
.about_third_section_leaf_left::after {
width: 53px;
height: 110px;
left: 88px;
bottom: -10px;
transform: rotate(-18deg);
}
/* right */
.about_third_section_leaf_right {
right: -15px;
top: -45px;
width: 130px;
height: 170px;
opacity: 0.18;
filter: blur(5px);
}
.about_third_section_leaf_right::before {
width: 65px;
height: 130px;
right: 10px;
transform: rotate(-35deg);
}
/* ==========================================================
LARGE DESKTOP
========================================================== */
@media (min-width: 1600px) {
.about_third_section {
min-height: 650px;
padding:
55px 0;
}
.about_third_section_container {
padding-left: 80px;
padding-right: 80px;
}
.about_third_section_grid {
min-height: 530px;
grid-template-columns:
minmax(420px, 1.28fr) minmax(330px, .95fr) minmax(330px, .95fr) minmax(280px, .80fr);
gap: 32px;
}
.about_third_section_title {
font-size: 64px;
}
.about_third_section_description {
max-width: 530px;
font-size: 16px;
}
.about_third_section_doctor_card {
min-height: 515px;
}
.about_third_section_doctor_image {
height: 300px;
}
.about_third_section_doctor_info h3 {
font-size: 22px;
}
.about_third_section_profile_btn {
width: 200px;
height: 52px;
}
}
/* ==========================================================
DESKTOP / LAPTOP
========================================================== */
@media (max-width: 1399.98px) {
.about_third_section_container {
padding-left: 40px;
padding-right: 40px;
}
.about_third_section_grid {
grid-template-columns:
minmax(295px, 1.2fr) minmax(245px, .95fr) minmax(245px, .95fr) minmax(190px, .72fr);
gap: 18px;
}
.about_third_section_title {
font-size: 34px;
}
.about_third_section_description {
font-size: 13px;
}
.about_third_section_trust_line p {
font-size: 9px;
letter-spacing: 2px;
}
.about_third_section_doctor_card {
min-height: 435px;
}
.about_third_section_doctor_image {
height: 245px;
}
.about_third_section_doctor_info {
min-height: 165px;
padding-top: 15px;
}
.about_third_section_doctor_info h3 {
font-size: 17px;
}
.about_third_section_doctor_info p {
font-size: 10px;
}
.about_third_section_profile_btn {
width: 165px;
height: 43px;
font-size: 14px;
}
.about_third_section_quote {
width: 150px;
font-size: 31px;
padding-right: 60px;
}
.about_third_section_tooth_outline {
width: 140px;
height: 200px;
}
.about_third_section_all_doctors {
width: 165px;
height: 44px;
/* font-size: 12px; */
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 991.98px) {
.about_third_section {
padding:
50px 0;
}
.about_third_section_container {
padding-left: 28px;
padding-right: 28px;
}
.about_third_section_grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 30px;
}
.about_third_section_left {
grid-column: 1 / -1;
padding: 0;
text-align: center;
}
.about_third_section_eyebrow {
justify-content: center;
}
.about_third_section_title {
font-size: 48px;
}
.about_third_section_description {
max-width: 620px;
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.about_third_section_trust_line {
justify-content: center;
}
.about_third_section_doctor_card {
max-width: 430px;
min-height: 500px;
justify-self: center;
}
.about_third_section_doctor_image {
height: 300px;
}
.about_third_section_doctor_info h3 {
font-size: 20px;
}
.about_third_section_doctor_info p {
font-size: 12px;
}
.about_third_section_profile_btn {
width: 190px;
height: 48px;
font-size: 15px;
}
.about_third_section_right {
grid-column: 1 / -1;
min-height: 220px;
padding-top: 10px;
flex-direction: row;
justify-content: center;
gap: 70px;
}
.about_third_section_tooth_outline {
display: none;
}
.about_third_section_quote {
font-size: 32px;
}
.about_third_section_right_bottom {
display: none;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767.98px) {
.about_third_section {
padding:
40px 0;
}
.about_third_section_container {
padding-left: 16px;
padding-right: 16px;
}
.about_third_section_grid {
grid-template-columns: 1fr;
gap: 25px;
}
.about_third_section_left {
grid-column: auto;
}
.about_third_section_eyebrow {
gap: 10px;
}
.about_third_section_eyebrow>span {
width: 27px;
}
.about_third_section_eyebrow p {
font-size: 9px;
letter-spacing: 4px;
}
.about_third_section_title {
font-size: 38px;
line-height: 1.07;
}
.about_third_section_description {
font-size: 13px;
line-height: 1.6;
}
.about_third_section_trust_line {
display: none;
}
.about_third_section_doctor_card {
width: 100%;
max-width: 430px;
min-height: 490px;
margin: auto;
}
.about_third_section_doctor_image {
height: 290px;
}
.about_third_section_doctor_info {
min-height: 175px;
}
.about_third_section_doctor_info h3 {
font-size: 20px;
}
.about_third_section_doctor_info p {
font-size: 12px;
}
.about_third_section_profile_btn {
width: 190px;
height: 48px;
font-size: 15px;
}
.about_third_section_right {
grid-column: auto;
min-height: auto;
flex-direction: column;
gap: 30px;
padding:
25px 0 5px;
}
.about_third_section_quote {
font-size: 32px;
}
.about_third_section_all_doctors {
width: 185px;
height: 48px;
font-size: 13px;
}
.about_third_section_curve_top {
opacity: 0.45;
}
.about_third_section_leaf_left {
opacity: 0.25;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 420px) {
.about_third_section_title {
font-size: 33px;
}
.about_third_section_doctor_card {
min-height: 445px;
}
.about_third_section_doctor_image {
height: 260px;
}
.about_third_section_doctor_info {
min-height: 165px;
}
.about_third_section_quote {
font-size: 29px;
}
}
/* =========================================================
ABOUT FOURTH SECTION
========================================================= */
.about_fourth_section {
width: 100%;
position: relative;
overflow: hidden;
background: #faf9f6;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.about_fourth_section_container {
width: 100%;
padding: 0;
}
.about_fourth_section_row {
min-height: 205px;
align-items: stretch;
}
/* =========================================================
LEFT IMAGE AREA
========================================================= */
.about_fourth_section_left {
position: relative;
padding:
12px 0 7px 8px;
}
.about_fourth_section_image_wrapper {
position: relative;
width: 100%;
height: 190px;
overflow: hidden;
border-radius:
0 30px 30px 0;
background: #e9ebe7;
}
/* image */
.about_fourth_section_image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.about_fourth_section_image_wrapper:hover .about_fourth_section_image {
transform: scale(1.025);
}
/* =========================================================
HANDWRITTEN TEXT
========================================================= */
.about_fourth_section_handwriting {
position: absolute;
left: 28px;
top: 34px;
z-index: 5;
width: 120px;
display: flex;
flex-direction: column;
color: rgba(255, 255, 255, 0.94);
font-family: "Caveat", cursive;
font-size: 23px;
font-weight: 500;
line-height: 0.95;
text-align: center;
transform: rotate(-7deg);
text-shadow:
0 2px 7px rgba(0, 0, 0, 0.15);
}
.about_fourth_section_handwriting span:nth-child(1) {
transform: translateX(-17px);
}
.about_fourth_section_handwriting span:nth-child(2) {
margin-top: 3px;
transform: translateX(-4px);
}
.about_fourth_section_handwriting span:nth-child(3) {
margin-top: 4px;
transform: translateX(7px);
}
.about_fourth_section_handwriting i {
margin-top: 7px;
font-size: 19px;
transform: translateX(20px);
}
/* =========================================================
RIGHT AREA
========================================================= */
.about_fourth_section_right {
display: flex;
align-items: center;
}
.about_fourth_section_content {
width: 100%;
padding:
24px 35px 13px 33px;
}
/* =========================================================
HEADER
========================================================= */
.about_fourth_section_header {
margin-bottom: 13px;
}
/* eyebrow */
.about_fourth_section_eyebrow {
margin-bottom: 3px;
color: #527068;
font-size: 10px;
font-weight: 600;
letter-spacing: 5px;
line-height: 1.3;
}
/* title */
.about_fourth_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 32px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.8px;
}
/* =========================================================
VALUES GRID
========================================================= */
.about_fourth_section_values {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
width: 100%;
}
/* =========================================================
VALUE ITEM
========================================================= */
.about_fourth_section_value {
position: relative;
min-height: 105px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding: 0 20px;
}
/* vertical divider */
.about_fourth_section_value:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 20px;
bottom: 0;
width: 1px;
background:
rgba(106, 122, 116, 0.17);
}
/* =========================================================
CIRCLE ICON
========================================================= */
.about_fourth_section_icon_circle {
width: 55px;
height: 55px;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(145deg,
#f1f3ef,
#f7f7f4);
color: #294e47;
font-size: 31px;
line-height: 1;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.about_fourth_section_value:hover .about_fourth_section_icon_circle {
transform: translateY(-3px);
background: #eef2ee;
}
/* =========================================================
VALUE TITLE
========================================================= */
.about_fourth_section_value h3 {
margin: 0 0 2px;
color: #263631;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
}
/* =========================================================
VALUE DESCRIPTION
========================================================= */
.about_fourth_section_value p {
margin: 0;
color: #55615d;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
/* =========================================================
BOTTOM GREEN LINE
========================================================= */
.about_fourth_section_bottom_line {
width: 100%;
height: 5px;
background: #174e43;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.about_fourth_section_row {
min-height: 220px;
}
.about_fourth_section_image_wrapper {
height: 205px;
}
.about_fourth_section_content {
padding-left: 45px;
padding-right: 45px;
}
.about_fourth_section_title {
font-size: 35px;
}
.about_fourth_section_value h3 {
font-size: 14px;
}
.about_fourth_section_value p {
font-size: 11px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.about_fourth_section_image_wrapper {
height: 185px;
}
.about_fourth_section_content {
padding-left: 25px;
padding-right: 20px;
}
.about_fourth_section_title {
font-size: 29px;
}
.about_fourth_section_value {
padding-left: 12px;
padding-right: 12px;
}
.about_fourth_section_icon_circle {
width: 50px;
height: 50px;
font-size: 28px;
}
.about_fourth_section_value h3 {
font-size: 14px;
}
.about_fourth_section_value p {
font-size: 12px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.about_fourth_section_left {
padding:
20px 20px 10px;
}
.about_fourth_section_image_wrapper {
height: 350px;
max-width: 750px;
margin: auto;
border-radius: 22px;
}
.about_fourth_section_handwriting {
left: 50px;
top: 55px;
font-size: 31px;
width: 150px;
}
.about_fourth_section_handwriting i {
font-size: 24px;
}
.about_fourth_section_content {
max-width: 760px;
margin: auto;
padding:
30px 30px 35px;
}
.about_fourth_section_header {
text-align: center;
margin-bottom: 25px;
}
.about_fourth_section_title {
font-size: 39px;
}
.about_fourth_section_values {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px 0;
}
.about_fourth_section_value {
min-height: 135px;
padding: 15px 20px;
}
.about_fourth_section_value::after {
display: none;
}
.about_fourth_section_value:nth-child(odd)::after {
content: "";
display: block;
position: absolute;
right: 0;
top: 20px;
bottom: 20px;
width: 1px;
background:
rgba(106, 122, 116, 0.17);
}
.about_fourth_section_value:nth-child(1),
.about_fourth_section_value:nth-child(2) {
border-bottom:
1px solid rgba(106, 122, 116, 0.13);
}
.about_fourth_section_icon_circle {
width: 60px;
height: 60px;
font-size: 34px;
}
.about_fourth_section_value h3 {
font-size: 14px;
}
.about_fourth_section_value p {
font-size: 11px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.about_fourth_section_left {
padding:
15px 15px 5px;
}
.about_fourth_section_image_wrapper {
height: 275px;
border-radius: 18px;
}
.about_fourth_section_handwriting {
left: 30px;
top: 38px;
font-size: 25px;
}
.about_fourth_section_content {
padding:
30px 18px 30px;
}
.about_fourth_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.about_fourth_section_title {
font-size: 34px;
}
.about_fourth_section_values {
grid-template-columns: 1fr;
gap: 0;
}
.about_fourth_section_value {
min-height: 100px;
flex-direction: row;
justify-content: flex-start;
gap: 18px;
padding: 17px 5px;
text-align: left;
border-bottom:
1px solid rgba(106, 122, 116, 0.14) !important;
}
.about_fourth_section_value:last-child {
border-bottom: 0 !important;
}
.about_fourth_section_value::after {
display: none !important;
}
.about_fourth_section_icon_circle {
width: 55px;
min-width: 55px;
height: 55px;
margin-bottom: 0;
font-size: 30px;
}
.about_fourth_section_value h3 {
font-size: 14px;
margin-bottom: 3px;
}
.about_fourth_section_value p {
font-size: 11px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.about_fourth_section_image_wrapper {
height: 235px;
}
.about_fourth_section_handwriting {
left: 20px;
top: 30px;
width: 115px;
font-size: 22px;
}
.about_fourth_section_title {
font-size: 30px;
}
}
/* =========================================================
ABOUT FIFTH SECTION
========================================================= */
.about_fifth_section {
width: 100%;
min-height: 135px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background:
linear-gradient(90deg,
#18493f 0%,
#174b41 45%,
#174c42 100%);
font-family: "DM Sans", sans-serif;
}
/* subtle top line */
.about_fifth_section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.10);
z-index: 5;
}
/* =========================================================
LEFT IMAGE
========================================================= */
.about_fifth_section_visual {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 28%;
background:
linear-gradient(90deg,
rgba(14, 51, 43, 0.10) 0%,
rgba(20, 69, 59, 0.15) 45%,
#18493f 100%),
url("assets/img/about/about-fifth-bg.jpg");
background-size: cover;
background-position: center left;
background-repeat: no-repeat;
}
/* fade image naturally into green */
.about_fifth_section_visual::after {
content: "";
position: absolute;
top: 0;
right: -85px;
bottom: 0;
width: 170px;
background:
linear-gradient(90deg,
rgba(24, 73, 63, 0),
#18493f 75%);
}
/* =========================================================
CONTAINER
========================================================= */
.about_fifth_section_container {
width: 100%;
position: relative;
z-index: 3;
padding-left: 25%;
padding-right: 8%;
}
/* =========================================================
INNER
========================================================= */
.about_fifth_section_inner {
min-height: 135px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
/* =========================================================
CONTENT
========================================================= */
.about_fifth_section_content {
min-width: 0;
}
/* small heading */
.about_fifth_section_eyebrow {
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.72);
font-size: 10px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 4px;
text-transform: uppercase;
}
/* main title */
.about_fifth_section_title {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 37px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.8px;
}
/* =========================================================
BUTTON WRAPPER
========================================================= */
.about_fifth_section_button_wrap {
flex-shrink: 0;
}
/* =========================================================
BUTTON
========================================================= */
.about_fifth_section_button {
min-width: 315px;
height: 64px;
padding:
0 9px 0 22px;
display: flex;
align-items: center;
gap: 18px;
background: #ffffff;
color: #24483f;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 18px;
text-decoration: none;
box-shadow:
0 7px 18px rgba(0, 0, 0, 0.08);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.about_fifth_section_button:hover {
color: #24483f;
transform: translateY(-2px);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.13);
}
/* calendar */
.about_fifth_section_calendar {
display: flex;
align-items: center;
justify-content: center;
color: #24483f;
font-size: 20px;
}
/* button text */
.about_fifth_section_button_text {
flex: 1;
color: #29463f;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
ROUND ARROW
========================================================= */
.about_fifth_section_arrow {
width: 43px;
min-width: 43px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #24594f;
color: #ffffff;
font-size: 18px;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.about_fifth_section_button:hover .about_fifth_section_arrow {
background: #173f37;
transform: translateX(2px);
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1600px) {
.about_fifth_section {
min-height: 120px;
}
.about_fifth_section_inner {
min-height: 120px;
}
.about_fifth_section_container {
padding-left: 24%;
padding-right: 7%;
}
.about_fifth_section_title {
font-size: 33px;
}
.about_fifth_section_button {
min-width: 285px;
height: 58px;
}
.about_fifth_section_arrow {
width: 39px;
min-width: 39px;
height: 39px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.about_fifth_section_container {
padding-left: 22%;
padding-right: 5%;
}
.about_fifth_section_visual {
width: 25%;
}
.about_fifth_section_inner {
gap: 30px;
}
.about_fifth_section_eyebrow {
font-size: 8px;
letter-spacing: 3px;
}
.about_fifth_section_title {
font-size: 28px;
}
.about_fifth_section_button {
min-width: 250px;
height: 54px;
padding-left: 17px;
gap: 13px;
border-radius: 15px;
}
.about_fifth_section_button_text {
font-size: 13px;
}
.about_fifth_section_calendar {
font-size: 17px;
}
.about_fifth_section_arrow {
width: 36px;
min-width: 36px;
height: 36px;
font-size: 15px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.about_fifth_section {
min-height: 200px;
}
.about_fifth_section_visual {
width: 42%;
}
.about_fifth_section_container {
padding:
35px 35px 35px 34%;
}
.about_fifth_section_inner {
min-height: auto;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 24px;
}
.about_fifth_section_title {
font-size: 32px;
}
.about_fifth_section_button {
min-width: 270px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.about_fifth_section {
min-height: auto;
padding: 0;
}
.about_fifth_section_visual {
width: 100%;
height: 100%;
opacity: 0.25;
background-position: left center;
}
.about_fifth_section_visual::after {
right: 0;
width: 100%;
background:
linear-gradient(90deg,
rgba(23, 76, 66, 0.40),
rgba(23, 76, 66, 0.95));
}
.about_fifth_section_container {
padding:
42px 20px;
}
.about_fifth_section_inner {
align-items: center;
text-align: center;
gap: 26px;
}
.about_fifth_section_eyebrow {
font-size: 8px;
line-height: 1.5;
letter-spacing: 2.8px;
}
.about_fifth_section_title {
font-size: 30px;
line-height: 1.18;
}
.about_fifth_section_button_wrap {
width: 100%;
display: flex;
justify-content: center;
}
.about_fifth_section_button {
width: 100%;
max-width: 310px;
min-width: 0;
height: 58px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.about_fifth_section_container {
padding:
38px 16px;
}
.about_fifth_section_title {
font-size: 27px;
}
.about_fifth_section_button {
max-width: 285px;
padding-left: 15px;
gap: 11px;
}
.about_fifth_section_button_text {
font-size: 12px;
}
}
/* =========================================================
FOOTER
========================================================= */
/* =========================================================
FOOTER - UPDATED
========================================================= */
.footer {
width: 100%;
position: relative;
overflow: hidden;
background: #ffffff;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
TOP FOOTER
========================================================= */
.footer_top {
width: 100%;
background: #ffffff;
}
.footer_container {
width: 100%;
padding-left: 55px;
padding-right: 55px;
}
/* =========================================================
MAIN GRID
========================================================= */
.footer_grid {
width: 100%;
min-height: 190px;
display: grid;
grid-template-columns:
1.05fr 0.85fr 1.55fr 0.75fr;
align-items: center;
}
/* vertical separator */
.footer_grid>*:not(:last-child) {
position: relative;
}
.footer_grid>*:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 30px;
bottom: 30px;
width: 1px;
background: #deded9;
}
/* =========================================================
BRAND AREA
========================================================= */
.footer_brand {
min-height: 190px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-right: 35px;
}
.footer_logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.footer_logo img {
width: 250px;
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* =========================================================
BRAND TAGLINE
========================================================= */
.footer_tagline {
position: relative;
width: 160px;
margin-top: 7px;
margin-left: 90px;
display: flex;
flex-direction: column;
color: #65766f;
font-family: "Caveat", cursive;
font-size: 27px;
font-weight: 500;
line-height: 0.9;
text-align: center;
transform: rotate(-6deg);
}
.footer_tagline span:nth-child(2) {
margin-top: 4px;
}
.footer_tagline i {
position: absolute;
right: -12px;
bottom: 0;
font-size: 19px;
}
/* =========================================================
COMMON FOOTER SECTION
========================================================= */
.footer_section {
min-height: 190px;
padding: 25px 35px;
display: flex;
flex-direction: column;
justify-content: center;
}
.footer_section h3 {
margin: 0 0 16px;
color: #243a33;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
/* =========================================================
QUICK LINKS
========================================================= */
.footer_links_grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
column-gap: 34px;
row-gap: 10px;
}
.footer_links_grid a {
color: #48534f;
font-size: 16px;
font-weight: 500;
line-height: 1.35;
text-decoration: none;
transition:
color 0.25s ease,
transform 0.25s ease;
}
.footer_links_grid a:hover {
color: #174e43;
transform: translateX(2px);
}
/* =========================================================
CONTACT AREA
========================================================= */
.footer_contact_inner {
display: grid;
grid-template-columns:
minmax(250px, 1.2fr) minmax(185px, 0.8fr);
gap: 30px;
}
.footer_contact_item {
display: flex;
align-items: flex-start;
gap: 12px;
color: #394640;
text-decoration: none;
}
.footer_contact_icon {
width: 21px;
min-width: 21px;
display: flex;
align-items: center;
justify-content: center;
color: #174e43;
font-size: 17px;
line-height: 1.3;
}
/* address */
.footer_contact_text p {
margin: 0;
color: #45504c;
font-size: 16px;
font-weight: 500;
line-height: 1.6;
}
/* phone/email */
.footer_contact_right {
display: flex;
flex-direction: column;
gap: 11px;
}
.footer_contact_right .footer_contact_item {
align-items: center;
color: #424d48;
font-size: 16px;
font-weight: 500;
line-height: 1.4;
}
.footer_contact_right .footer_contact_item:hover {
color: #174e43;
}
/* =========================================================
FOLLOW US
========================================================= */
.footer_follow {
padding-left: 35px;
padding-right: 15px;
}
.footer_socials {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 18px;
}
.footer_socials a {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #173f37;
font-size: 21px;
text-decoration: none;
transition:
color 0.25s ease,
transform 0.25s ease;
}
.footer_socials a:hover {
color: #2c6b5e;
transform: translateY(-2px);
}
.footer_follow_text {
display: flex;
flex-direction: column;
color: #4c5b56;
font-size: 18px;
font-weight: 500;
line-height: 1.55;
}
/* =========================================================
BOTTOM BAR
========================================================= */
.footer_bottom {
width: 100%;
background: #174d43;
}
.footer_bottom_container {
width: 100%;
padding-left: 55px;
padding-right: 55px;
}
.footer_bottom_inner {
min-height: 55px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.footer_bottom_inner p {
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
}
.footer_bottom_right {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.82);
font-size: 16px;
font-weight: 400;
}
.footer_bottom_right i {
font-size: 15px;
}
/* =========================================================
LARGE DESKTOP
1600px+
========================================================= */
@media (min-width: 1600px) {
.footer_container,
.footer_bottom_container {
padding-left: 75px;
padding-right: 75px;
}
.footer_grid,
.footer_brand,
.footer_section {
min-height: 205px;
}
.footer_logo img {
width: 270px;
}
.footer_section h3 {
font-size: 17px;
}
.footer_links_grid a {
font-size: 14px;
}
.footer_contact_text p,
.footer_contact_right .footer_contact_item {
font-size: 13px;
}
.footer_follow_text {
font-size: 14px;
}
}
/* =========================================================
DESKTOP / LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
.footer_container {
padding-left: 35px;
padding-right: 35px;
}
.footer_grid {
grid-template-columns:
1fr 0.85fr 1.55fr 0.75fr;
}
.footer_brand,
.footer_section,
.footer_grid {
min-height: 175px;
}
.footer_logo img {
width: 215px;
}
.footer_tagline {
margin-left: 67px;
width: 140px;
font-size: 23px;
}
.footer_section {
padding-left: 25px;
padding-right: 25px;
}
.footer_section h3 {
font-size: 14px;
margin-bottom: 13px;
}
.footer_links_grid {
column-gap: 20px;
row-gap: 8px;
}
.footer_links_grid a {
font-size: 12px;
}
.footer_contact_inner {
grid-template-columns:
1.2fr 0.9fr;
gap: 18px;
}
.footer_contact_text p {
font-size: 11px;
}
.footer_contact_right .footer_contact_item {
font-size: 11px;
}
.footer_follow_text {
font-size: 12px;
}
.footer_socials {
gap: 15px;
}
.footer_socials a {
font-size: 18px;
}
.footer_bottom_container {
padding-left: 35px;
padding-right: 35px;
}
}
/* =========================================================
1200px RANGE
========================================================= */
@media (max-width: 1199.98px) {
.footer_grid {
grid-template-columns:
0.95fr 0.8fr 1.5fr 0.75fr;
}
.footer_logo img {
width: 190px;
}
.footer_tagline {
margin-left: 52px;
font-size: 20px;
}
.footer_section {
padding-left: 18px;
padding-right: 18px;
}
.footer_links_grid a,
.footer_contact_text p,
.footer_contact_right .footer_contact_item {
font-size: 10.5px;
}
.footer_follow_text {
font-size: 11px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.footer_top {
padding: 20px 0;
}
.footer_container {
padding-left: 25px;
padding-right: 25px;
}
.footer_grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.footer_grid>* {
min-height: 220px;
padding: 30px;
border-bottom:
1px solid #e3e4df;
}
.footer_grid>*:not(:last-child)::after {
display: none;
}
.footer_grid>*:nth-child(odd) {
border-right:
1px solid #e3e4df;
}
.footer_logo img {
width: 220px;
}
.footer_tagline {
margin-left: 65px;
font-size: 24px;
}
.footer_section h3 {
font-size: 16px;
}
.footer_links_grid a {
font-size: 13px;
}
.footer_contact_inner {
grid-template-columns: 1fr;
gap: 20px;
}
.footer_contact_text p {
font-size: 12px;
}
.footer_contact_right .footer_contact_item {
font-size: 12px;
}
.footer_follow_text {
font-size: 13px;
}
.footer_socials a {
font-size: 20px;
}
.footer_bottom_inner {
min-height: 58px;
}
.footer_bottom_inner p,
.footer_bottom_right {
font-size: 11px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.footer_top {
padding: 10px 0;
}
.footer_container {
padding-left: 20px;
padding-right: 20px;
}
.footer_grid {
display: block;
}
.footer_grid>* {
width: 100%;
min-height: auto;
padding:
30px 5px;
border-right: 0 !important;
border-bottom:
1px solid #e4e5e1;
}
.footer_grid>*:last-child {
border-bottom: 0;
}
.footer_brand {
align-items: center;
text-align: center;
}
.footer_logo img {
width: 225px;
}
.footer_tagline {
margin-left: 45px;
font-size: 24px;
}
.footer_section {
align-items: flex-start;
}
.footer_section h3 {
font-size: 17px;
margin-bottom: 18px;
}
.footer_links_grid {
width: 100%;
grid-template-columns:
repeat(2, minmax(0, 1fr));
row-gap: 14px;
column-gap: 25px;
}
.footer_links_grid a {
font-size: 14px;
}
.footer_contact_inner {
width: 100%;
grid-template-columns: 1fr;
gap: 20px;
}
.footer_contact_icon {
font-size: 18px;
}
.footer_contact_text p {
font-size: 13px;
line-height: 1.65;
}
.footer_contact_right {
gap: 13px;
}
.footer_contact_right .footer_contact_item {
font-size: 13px;
}
.footer_socials {
gap: 20px;
}
.footer_socials a {
width: 30px;
height: 30px;
font-size: 21px;
}
.footer_follow_text {
font-size: 14px;
}
.footer_bottom_container {
padding-left: 18px;
padding-right: 18px;
}
.footer_bottom_inner {
min-height: 80px;
flex-direction: column;
justify-content: center;
gap: 8px;
text-align: center;
}
.footer_bottom_inner p,
.footer_bottom_right {
font-size: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.footer_container {
padding-left: 16px;
padding-right: 16px;
}
.footer_logo img {
width: 200px;
}
.footer_tagline {
margin-left: 30px;
width: 145px;
font-size: 22px;
}
.footer_links_grid {
grid-template-columns: 1fr;
row-gap: 13px;
}
.footer_links_grid a {
font-size: 14px;
}
.footer_contact_text p,
.footer_contact_right .footer_contact_item {
font-size: 12px;
}
}
/* ==========================================================
TREATMENT FIRST SECTION
========================================================== */
.treatment_first_section {
width: 100%;
position: relative;
overflow: hidden;
background:
linear-gradient(90deg,
#f4f6f3 0%,
#f4f5f2 43%,
#dfe8e5 58%,
#d6e0dd 100%);
font-family: "DM Sans", sans-serif;
}
/* ==========================================================
CONTAINER
========================================================== */
.treatment_first_section_container {
width: 100%;
padding: 0;
}
.treatment_first_section_row {
min-height: 550px;
}
/* ==========================================================
LEFT SIDE
========================================================== */
.treatment_first_section_left {
position: relative;
min-height: 550px;
display: flex;
align-items: center;
z-index: 4;
}
.treatment_first_section_content {
position: relative;
z-index: 5;
width: 100%;
padding-left: 80px;
padding-right: 25px;
padding-top: 15px;
}
/* ==========================================================
EYEBROW
========================================================== */
.treatment_first_section_eyebrow {
margin-bottom: 16px;
color: #506963;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 7px;
}
/* ==========================================================
TITLE
========================================================== */
.treatment_first_section_title {
margin: 0;
color: #103f37;
font-family: "Playfair Display", serif;
font-size: 50px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -2.5px;
}
.treatment_first_section_title span {
font-style: italic;
font-weight: 500;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.treatment_first_section_description {
margin: 25px 0 0;
max-width: 680px;
color: #35443f;
font-size: 19px;
font-weight: 500;
line-height: 1.45;
}
/* ==========================================================
FEATURES
========================================================== */
.treatment_first_section_features {
width: 100%;
max-width: 720px;
margin-top: 40px;
display: grid;
grid-template-columns:
minmax(0, 1fr) 1px minmax(0, 1.3fr) 1px minmax(0, 1.35fr);
align-items: center;
}
/* ==========================================================
FEATURE ITEM
========================================================== */
.treatment_first_section_feature {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
padding-right: 20px;
}
.treatment_first_section_feature+.treatment_first_section_feature_divider+.treatment_first_section_feature {
padding-left: 42px;
}
/* ==========================================================
ICON
========================================================== */
.treatment_first_section_feature_icon {
width: 55px;
height: 55px;
margin-bottom: 9px;
display: flex;
align-items: center;
justify-content: center;
color: #294f47;
font-size: 45px;
line-height: 1;
}
.treatment_first_section_feature_icon svg {
width: 48px;
height: 48px;
display: block;
}
.treatment_first_section_feature_icon i {
font-size: 45px;
}
/* ==========================================================
FEATURE TEXT
========================================================== */
.treatment_first_section_feature_text {
color: #34413d;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
/* ==========================================================
FEATURE DIVIDER
========================================================== */
.treatment_first_section_feature_divider {
width: 1px;
height: 96px;
background:
rgba(84, 105, 99, 0.17);
}
/* ==========================================================
LEFT DECORATIVE CURVE
========================================================== */
.treatment_first_section_curve {
position: absolute;
z-index: 2;
left: -180px;
bottom: -115px;
width: 275px;
height: 520px;
border-radius: 50%;
background:
rgba(198, 211, 206, 0.58);
transform: rotate(-12deg);
pointer-events: none;
}
.treatment_first_section_curve::after {
content: "";
position: absolute;
right: 37px;
top: 17px;
width: 150px;
height: 475px;
border-radius: 50%;
border-right:
1px solid rgba(131, 153, 145, 0.28);
}
/* ==========================================================
RIGHT SIDE
========================================================== */
.treatment_first_section_right {
position: relative;
min-height: 550px;
overflow: hidden;
}
/* ==========================================================
IMAGE WRAPPER
========================================================== */
.treatment_first_section_image_wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #dce5e2;
}
/* ==========================================================
IMAGE
========================================================== */
.treatment_first_section_image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center right;
}
/* subtle left fade */
.treatment_first_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
top: 0;
bottom: 0;
width: 185px;
/* background:
linear-gradient(90deg,
rgba(239, 243, 240, 0.92) 0%,
rgba(226, 235, 231, 0.64) 48%,
rgba(226, 235, 231, 0) 100%); */
pointer-events: none;
}
/* ==========================================================
HANDWRITTEN TEXT
========================================================== */
.treatment_first_section_handwriting {
position: absolute;
z-index: 6;
left: 8%;
top: 15%;
width: 180px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(53, 74, 68, 0.78);
font-family: "Caveat", cursive;
font-size: 37px;
font-weight: 500;
line-height: 0.92;
text-align: center;
transform: rotate(-7deg);
}
.treatment_first_section_handwriting>span:nth-child(1) {
transform: translateX(-15px);
}
.treatment_first_section_handwriting>span:nth-child(2) {
margin-top: 5px;
transform: translateX(-1px);
}
.treatment_first_section_handwriting>span:nth-child(3) {
margin-top: 7px;
transform: translateX(7px);
}
.treatment_first_section_handwriting_last {
margin-top: 5px;
display: flex;
align-items: flex-end;
transform: translateX(22px);
}
.treatment_first_section_handwriting_last i {
margin-left: 7px;
font-size: 25px;
transform: translateY(4px);
}
/* ==========================================================
LARGE DESKTOP
========================================================== */
@media (min-width: 1700px) {
.treatment_first_section_row,
.treatment_first_section_left,
.treatment_first_section_right {
min-height: 590px;
}
.treatment_first_section_content {
padding-left: 95px;
}
.treatment_first_section_description {
font-size: 20px;
}
.treatment_first_section_feature_text {
font-size: 16px;
}
}
/* ==========================================================
DESKTOP
========================================================== */
@media (max-width: 1500px) {
.treatment_first_section_row,
.treatment_first_section_left,
.treatment_first_section_right {
min-height: 510px;
}
.treatment_first_section_content {
padding-left: 60px;
}
.treatment_first_section_eyebrow {
font-size: 12px;
letter-spacing: 6px;
}
.treatment_first_section_title {
font-size: 62px;
}
.treatment_first_section_description {
font-size: 19px;
}
.treatment_first_section_features {
margin-top: 32px;
}
.treatment_first_section_feature_icon {
width: 47px;
height: 47px;
}
.treatment_first_section_feature_icon svg {
width: 42px;
height: 42px;
}
.treatment_first_section_feature_icon i {
font-size: 40px;
}
.treatment_first_section_feature_text {
font-size: 15px;
}
.treatment_first_section_feature_divider {
height: 82px;
}
.treatment_first_section_handwriting {
font-size: 32px;
}
}
/* ==========================================================
LAPTOP
========================================================== */
@media (max-width: 1199.98px) {
.treatment_first_section_content {
padding-left: 40px;
padding-right: 20px;
}
.treatment_first_section_title {
font-size: 40px;
}
.treatment_first_section_description {
font-size: 16px;
}
.treatment_first_section_features {
max-width: 570px;
}
.treatment_first_section_feature+.treatment_first_section_feature_divider+.treatment_first_section_feature {
padding-left: 24px;
}
.treatment_first_section_feature_text {
font-size: 14px;
}
.treatment_first_section_handwriting {
left: 5%;
font-size: 27px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 991.98px) {
.treatment_first_section_row {
min-height: auto;
}
.treatment_first_section_left {
min-height: auto;
padding: 60px 0 50px;
}
.treatment_first_section_content {
padding-left: 40px;
padding-right: 40px;
}
.treatment_first_section_title {
font-size: 58px;
}
.treatment_first_section_description {
font-size: 21px;
}
.treatment_first_section_features {
max-width: 700px;
}
.treatment_first_section_feature_text {
font-size: 14px;
}
.treatment_first_section_right {
min-height: 520px;
}
.treatment_first_section_image_wrapper {
position: absolute;
}
.treatment_first_section_handwriting {
left: 10%;
top: 14%;
font-size: 35px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767.98px) {
.treatment_first_section_left {
padding: 48px 0 42px;
}
.treatment_first_section_content {
padding-left: 20px;
padding-right: 20px;
}
.treatment_first_section_eyebrow {
margin-bottom: 12px;
font-size: 10px;
letter-spacing: 4px;
}
.treatment_first_section_title {
font-size: 47px;
line-height: 0.98;
letter-spacing: -1.5px;
}
.treatment_first_section_description {
margin-top: 24px;
font-size: 14px;
line-height: 1.55;
}
.treatment_first_section_description br {
display: none;
}
/* Features */
.treatment_first_section_features {
margin-top: 35px;
grid-template-columns: 1fr;
gap: 0;
}
.treatment_first_section_feature {
min-height: 80px;
padding: 13px 0 !important;
flex-direction: row;
align-items: center;
gap: 18px;
border-bottom:
1px solid rgba(84, 105, 99, 0.13);
}
.treatment_first_section_feature:last-child {
border-bottom: 0;
}
.treatment_first_section_feature_divider {
display: none;
}
.treatment_first_section_feature_icon {
width: 47px;
min-width: 47px;
height: 47px;
margin-bottom: 0;
}
.treatment_first_section_feature_text {
font-size: 13px;
}
.treatment_first_section_right {
min-height: 420px;
}
.treatment_first_section_image {
object-position: 68% center;
}
.treatment_first_section_image_wrapper::before {
width: 100px;
}
.treatment_first_section_handwriting {
left: 18px;
top: 35px;
width: 135px;
padding: 10px;
font-size: 27px;
/* background: rgba(243, 247, 244, 0.50); */
backdrop-filter: blur(2px);
border-radius: 12px;
}
.treatment_first_section_handwriting_last i {
font-size: 19px;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 420px) {
.treatment_first_section_title {
font-size: 39px;
}
.treatment_first_section_right {
min-height: 360px;
}
.treatment_first_section_handwriting {
font-size: 23px;
}
}
/* =========================================================
TREATMENT SECOND SECTION
========================================================= */
.treatment_second_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 35px 0 45px;
background:
radial-gradient(circle at 14% 14%,
rgba(228, 235, 228, 0.65) 0,
rgba(228, 235, 228, 0.22) 13%,
transparent 28%),
radial-gradient(circle at 88% 16%,
rgba(236, 242, 239, 0.75) 0,
transparent 26%),
linear-gradient(180deg,
#fcfbf8 0%,
#f8f9f6 50%,
#fbfaf7 100%);
font-family: "DM Sans", sans-serif;
}
/* soft decorative background */
.treatment_second_section::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
left: -180px;
top: 30px;
border-radius: 50%;
border:
45px solid rgba(216, 227, 222, 0.22);
pointer-events: none;
}
.treatment_second_section::after {
content: "";
position: absolute;
width: 420px;
height: 240px;
right: -130px;
top: 90px;
border-radius: 50%;
background:
radial-gradient(ellipse at center,
rgba(230, 237, 232, 0.32),
transparent 68%);
pointer-events: none;
}
/* =========================================================
CONTAINER
========================================================= */
.treatment_second_section_container {
width: 100%;
max-width: 1920px;
position: relative;
z-index: 2;
margin: 0 auto;
padding-left: 38px;
padding-right: 38px;
}
/* =========================================================
HEADER
========================================================= */
.treatment_second_section_header {
width: 100%;
min-height: 92px;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
margin-bottom: 22px;
}
.treatment_second_section_heading_wrap {
position: relative;
text-align: center;
}
.treatment_second_section_eyebrow {
margin-bottom: 6px;
color: #60766f;
font-size: 11px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 6px;
}
.treatment_second_section_title {
margin: 0;
color: #102b26;
font-family: "Playfair Display", serif;
font-size: 42px;
font-weight: 600;
line-height: 1.08;
letter-spacing: -1px;
}
.treatment_second_section_title_line {
width: 48px;
height: 2px;
display: block;
margin: 12px auto 0;
border-radius: 10px;
background: #1b685a;
}
.treatment_second_section_header_text {
position: absolute;
right: 22px;
top: 16px;
color: #53645f;
font-size: 16px;
font-weight: 500;
line-height: 1.55;
text-align: left;
}
/* =========================================================
GRID
========================================================= */
.treatment_second_section_grid {
width: 100%;
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 20px;
}
/* =========================================================
CARD
========================================================= */
.treatment_second_section_card {
min-width: 0;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background:
linear-gradient(180deg,
#ffffff 0%,
#fdfefd 100%);
border: 3px solid rgba(255, 255, 255, 0.95);
border-radius: 24px;
color: #1e2926;
text-decoration: none;
box-shadow:
0 10px 28px rgba(27, 62, 53, 0.07),
0 2px 6px rgba(27, 62, 53, 0.025);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.treatment_second_section_card:hover {
color: #1e2926;
text-decoration: none;
transform: translateY(-7px);
border-color: rgba(219, 236, 230, 0.95);
box-shadow:
0 20px 45px rgba(25, 72, 61, 0.13),
0 5px 12px rgba(25, 72, 61, 0.05);
}
/* =========================================================
IMAGE
========================================================= */
.treatment_second_section_image {
width: 100%;
height: 180px;
position: relative;
overflow: hidden;
background: #eef2ef;
border-radius:
20px 20px 32px 0;
}
.treatment_second_section_image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
transparent 65%,
rgba(255, 255, 255, 0.05) 100%);
pointer-events: none;
}
.treatment_second_section_image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.55s cubic-bezier(.2, .65, .3, 1);
}
.treatment_second_section_card:hover .treatment_second_section_image img {
transform: scale(1.045);
}
/* =========================================================
OVERLAP ICON
========================================================= */
.treatment_second_section_card_icon {
position: absolute;
left: 18px;
top: 151px;
width: 54px;
height: 54px;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #ffffff;
border-radius: 50%;
background: #d9f4ef;
color: #176a5d;
font-size: 22px;
box-shadow:
0 5px 12px rgba(37, 84, 72, 0.08);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.treatment_second_section_card:nth-child(2) .treatment_second_section_card_icon {
background: #fce2e5;
color: #b85b67;
}
.treatment_second_section_card:nth-child(3) .treatment_second_section_card_icon {
background: #dceeff;
color: #357ab9;
}
.treatment_second_section_card:nth-child(4) .treatment_second_section_card_icon {
background: #e9f3dc;
color: #46795d;
}
.treatment_second_section_card:nth-child(5) .treatment_second_section_card_icon {
background: #fff0da;
color: #916743;
}
.treatment_second_section_card:nth-child(6) .treatment_second_section_card_icon {
background: #dcecff;
color: #367cb6;
}
.treatment_second_section_card:nth-child(7) .treatment_second_section_card_icon {
background: #fde2e4;
color: #b45b62;
}
.treatment_second_section_card:nth-child(8) .treatment_second_section_card_icon {
background: #ddf4ec;
color: #307768;
}
.treatment_second_section_card:nth-child(9) .treatment_second_section_card_icon {
background: #fce0e4;
color: #ad5963;
}
.treatment_second_section_card:nth-child(10) .treatment_second_section_card_icon {
background: #d9f6f1;
color: #31776e;
}
.treatment_second_section_card:hover .treatment_second_section_card_icon {
transform: translateY(-3px);
box-shadow:
0 8px 18px rgba(30, 78, 66, 0.13);
}
/* =========================================================
CONTENT
========================================================= */
.treatment_second_section_card_content {
min-height: 196px;
position: relative;
display: flex;
flex-direction: column;
padding:
34px 18px 16px;
}
.treatment_second_section_card_content h3 {
margin: 0 0 8px;
color: #172721;
font-family: "Playfair Display", serif;
font-size: 21px;
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.35px;
}
.treatment_second_section_card_content p {
margin: 0;
color: #65736f;
font-size: 18px;
font-weight: 400;
line-height: 1.45;
}
/* =========================================================
CARD FOOTER
========================================================= */
.treatment_second_section_card_footer {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 14px;
}
.treatment_second_section_learn {
color: #17685a;
font-size: 17px;
font-weight: 700;
line-height: 1;
}
.treatment_second_section_arrow {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
border:
1.4px solid rgba(40, 91, 79, 0.65);
border-radius: 50%;
color: #174f45;
background: #ffffff;
font-size: 16px;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}
.treatment_second_section_card:hover .treatment_second_section_arrow {
color: #ffffff;
background: #185b4f;
border-color: #185b4f;
transform: translateX(3px);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.treatment_second_section_container {
padding-left: 50px;
padding-right: 50px;
}
.treatment_second_section_grid {
gap: 24px;
}
.treatment_second_section_title {
font-size: 46px;
}
.treatment_second_section_image {
height: 195px;
}
.treatment_second_section_card_icon {
top: 165px;
width: 58px;
height: 58px;
font-size: 23px;
}
.treatment_second_section_card_content {
min-height: 205px;
padding:
37px 20px 18px;
}
.treatment_second_section_card_content h3 {
font-size: 22px;
}
.treatment_second_section_card_content p {
font-size: 13px;
}
}
/* =========================================================
NORMAL DESKTOP
========================================================= */
@media (max-width: 1399.98px) {
.treatment_second_section_container {
padding-left: 28px;
padding-right: 28px;
}
.treatment_second_section_title {
font-size: 38px;
}
.treatment_second_section_header_text {
right: 6px;
font-size: 11px;
}
.treatment_second_section_grid {
gap: 16px;
}
.treatment_second_section_image {
height: 155px;
}
.treatment_second_section_card_icon {
top: 128px;
width: 52px;
height: 52px;
}
.treatment_second_section_card_content {
min-height: 180px;
padding:
32px 15px 14px;
}
.treatment_second_section_card_content h3 {
font-size: 18px;
}
.treatment_second_section_card_content p {
font-size: 17px;
}
.treatment_second_section_arrow {
width: 34px;
height: 34px;
flex-basis: 34px;
font-size: 14px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.treatment_second_section {
padding: 38px 0 45px;
}
.treatment_second_section_container {
padding-left: 30px;
padding-right: 30px;
}
.treatment_second_section_header {
min-height: auto;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.treatment_second_section_header_text {
position: relative;
top: auto;
right: auto;
margin-top: 14px;
font-size: 12px;
text-align: center;
}
.treatment_second_section_grid {
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 22px 18px;
}
.treatment_second_section_image {
height: 175px;
}
.treatment_second_section_card_icon {
top: 147px;
}
.treatment_second_section_card_content {
min-height: 190px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.treatment_second_section {
padding: 42px 0;
}
.treatment_second_section_container {
padding-left: 24px;
padding-right: 24px;
}
.treatment_second_section_title {
font-size: 38px;
}
.treatment_second_section_grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 25px 20px;
}
.treatment_second_section_image {
height: 230px;
}
.treatment_second_section_card_icon {
top: 199px;
left: 20px;
width: 58px;
height: 58px;
font-size: 23px;
}
.treatment_second_section_card_content {
min-height: 190px;
padding:
38px 20px 18px;
}
.treatment_second_section_card_content h3 {
font-size: 22px;
}
.treatment_second_section_card_content p {
max-width: 320px;
font-size: 15px;
}
.treatment_second_section_learn {
font-size: 13px;
}
.treatment_second_section_arrow {
width: 38px;
height: 38px;
flex-basis: 38px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.treatment_second_section {
padding: 35px 0 38px;
}
.treatment_second_section_container {
padding-left: 16px;
padding-right: 16px;
}
.treatment_second_section_eyebrow {
font-size: 12px;
letter-spacing: 4px;
}
.treatment_second_section_title {
max-width: 340px;
margin-left: auto;
margin-right: auto;
font-size: 31px;
line-height: 1.14;
}
.treatment_second_section_header_text {
font-size: 15px;
}
.treatment_second_section_grid {
grid-template-columns: 1fr;
gap: 22px;
}
.treatment_second_section_card {
width: 100%;
max-width: 440px;
margin: 0 auto;
border-radius: 22px;
}
.treatment_second_section_image {
height: 230px;
border-radius:
19px 19px 34px 0;
}
.treatment_second_section_card_icon {
left: 20px;
top: 198px;
width: 60px;
height: 60px;
font-size: 24px;
}
.treatment_second_section_card_content {
min-height: 185px;
padding:
40px 20px 18px;
}
.treatment_second_section_card_content h3 {
font-size: 23px;
}
.treatment_second_section_card_content p {
max-width: 320px;
font-size: 15px;
line-height: 1.5;
}
.treatment_second_section_card_footer {
padding-top: 18px;
}
.treatment_second_section_learn {
font-size: 13px;
}
.treatment_second_section_arrow {
width: 40px;
height: 40px;
flex-basis: 40px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.treatment_second_section_title {
font-size: 22px;
}
.treatment_second_section_image {
height: 205px;
}
.treatment_second_section_card_icon {
top: 174px;
width: 57px;
height: 57px;
}
.treatment_second_section_card_content {
min-height: 180px;
padding-top: 38px;
}
.treatment_second_section_card_content h3 {
font-size: 21px;
}
}
/* =========================================================
TREATMENT THIRD SECTION
========================================================= */
.treatment_third_section {
width: 100%;
position: relative;
overflow: hidden;
background: #f7f7f3;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.treatment_third_section_container {
width: 100%;
padding: 0;
}
.treatment_third_section_row {
min-height: 510px;
}
/* =========================================================
MAIN LEFT AREA
========================================================= */
.treatment_third_section_main {
min-height: 510px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
background: #eef1ed;
}
/* =========================================================
BACKGROUND IMAGE
========================================================= */
.treatment_third_section_bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center right;
z-index: 1;
}
/* =========================================================
SOFT LEFT FADE
========================================================= */
.treatment_third_section_overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(90deg,
rgba(247, 248, 245, 0.98) 0%,
rgba(247, 248, 245, 0.96) 32%,
rgba(244, 246, 242, 0.70) 49%,
rgba(238, 242, 237, 0.15) 68%,
rgba(238, 242, 237, 0) 100%);
}
/* =========================================================
CONTENT
========================================================= */
.treatment_third_section_content {
position: relative;
z-index: 5;
width: 55%;
padding-left: 80px;
padding-right: 30px;
}
/* =========================================================
EYEBROW
========================================================= */
.treatment_third_section_eyebrow {
margin-bottom: 20px;
color: #526963;
font-size: 14px;
font-weight: 600;
line-height: 1.6;
letter-spacing: 7px;
}
/* =========================================================
TITLE
========================================================= */
.treatment_third_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 58px;
font-weight: 600;
line-height: 1.02;
letter-spacing: -1.8px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.treatment_third_section_description {
margin: 26px 0 0;
color: #3f4c48;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
}
/* =========================================================
BUTTON
========================================================= */
.treatment_third_section_button {
width: 435px;
height: 76px;
margin-top: 40px;
padding: 0 34px;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
background:
linear-gradient(90deg,
#174e43,
#215b50);
border: 1px solid #174e43;
border-radius: 16px;
text-decoration: none;
font-size: 19px;
font-weight: 600;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.treatment_third_section_button i {
font-size: 24px;
transition: transform 0.3s ease;
}
.treatment_third_section_button:hover {
color: #ffffff;
background: #123f37;
transform: translateY(-2px);
}
.treatment_third_section_button:hover i {
transform: translateX(5px);
}
/* =========================================================
HANDWRITING
========================================================= */
.treatment_third_section_handwriting {
position: absolute;
z-index: 6;
left: 51%;
top: 21%;
width: 170px;
display: flex;
flex-direction: column;
color: rgba(55, 76, 70, 0.76);
font-family: "Caveat", cursive;
font-size: 36px;
font-weight: 500;
line-height: 0.95;
transform: rotate(-6deg);
}
.treatment_third_section_handwriting>span:nth-child(1) {
transform: translateX(-10px);
}
.treatment_third_section_handwriting>span:nth-child(2) {
margin-top: 5px;
}
.treatment_third_section_handwriting>div {
display: flex;
align-items: center;
margin-top: 6px;
transform: translateX(12px);
}
.treatment_third_section_handwriting>div i {
margin-left: 8px;
font-size: 25px;
}
.treatment_third_section_second_heart {
margin-top: 10px;
margin-left: 100px;
font-size: 25px;
}
/* =========================================================
RIGHT JOURNEY PANEL
========================================================= */
.treatment_third_section_journey_col {
min-height: 510px;
background: #fbfaf7;
}
.treatment_third_section_journey {
position: relative;
width: 100%;
height: 100%;
min-height: 510px;
padding:
28px 32px 20px 68px;
background:
linear-gradient(180deg,
#fbfaf7 0%,
#faf9f6 100%);
}
/* =========================================================
JOURNEY TITLE
========================================================= */
.treatment_third_section_journey_title {
margin: 0 0 20px;
color: #253630;
font-size: 27px;
font-weight: 700;
line-height: 1.2;
}
/* =========================================================
VERTICAL JOURNEY LINE
========================================================= */
.treatment_third_section_journey_line {
position: absolute;
left: 42px;
top: 100px;
bottom: 48px;
width: 1px;
background:
rgba(71, 101, 92, 0.28);
}
/* =========================================================
STEP
========================================================= */
.treatment_third_section_step {
position: relative;
min-height: 78px;
display: grid;
grid-template-columns:
64px 1fr;
align-items: center;
column-gap: 17px;
}
/* =========================================================
DOT
========================================================= */
.treatment_third_section_step_marker {
position: absolute;
left: -30px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #668d84;
transform: translateY(-50%);
z-index: 4;
}
/* =========================================================
STEP ICON
========================================================= */
.treatment_third_section_step_icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(145deg,
#cfe8e5,
#bcdedb);
color: #244f47;
font-size: 31px;
line-height: 1;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.treatment_third_section_step:hover .treatment_third_section_step_icon {
transform: translateY(-2px);
background: #acd5d0;
}
/* =========================================================
STEP CONTENT
========================================================= */
.treatment_third_section_step_content h4 {
margin: 0 0 5px;
color: #2b3935;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
}
.treatment_third_section_step_content p {
margin: 0;
color: #505b57;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1700px) {
.treatment_third_section_row,
.treatment_third_section_main,
.treatment_third_section_journey_col,
.treatment_third_section_journey {
min-height: 550px;
}
.treatment_third_section_content {
padding-left: 90px;
}
.treatment_third_section_title {
font-size: 63px;
}
.treatment_third_section_description {
font-size: 21px;
}
.treatment_third_section_journey_title {
font-size: 30px;
}
.treatment_third_section_step {
min-height: 82px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
.treatment_third_section_row,
.treatment_third_section_main,
.treatment_third_section_journey_col,
.treatment_third_section_journey {
min-height: 480px;
}
.treatment_third_section_content {
width: 58%;
padding-left: 55px;
}
.treatment_third_section_eyebrow {
font-size: 11px;
letter-spacing: 2px;
}
.treatment_third_section_title {
font-size: 47px;
}
.treatment_third_section_description {
font-size: 16px;
}
.treatment_third_section_button {
width: 350px;
height: 62px;
margin-top: 30px;
font-size: 16px;
}
.treatment_third_section_handwriting {
left: 52%;
font-size: 29px;
}
.treatment_third_section_journey {
padding:
25px 20px 20px 55px;
}
.treatment_third_section_journey_title {
font-size: 23px;
}
.treatment_third_section_step {
min-height: 70px;
grid-template-columns:
55px 1fr;
column-gap: 13px;
}
.treatment_third_section_step_icon {
width: 55px;
height: 55px;
font-size: 27px;
}
.treatment_third_section_step_content h4 {
font-size: 15px;
}
.treatment_third_section_step_content p {
font-size: 15px;
}
.treatment_third_section_journey_line {
left: 35px;
}
.treatment_third_section_step_marker {
left: -23px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.treatment_third_section_row {
min-height: auto;
}
.treatment_third_section_main {
min-height: 600px;
}
.treatment_third_section_content {
width: 62%;
padding-left: 40px;
}
.treatment_third_section_title {
font-size: 35px;
}
.treatment_third_section_description {
font-size: 16px;
}
.treatment_third_section_description br {
display: none;
}
.treatment_third_section_button {
width: 330px;
}
.treatment_third_section_handwriting {
left: 55%;
top: 17%;
font-size: 28px;
}
.treatment_third_section_journey_col {
min-height: auto;
}
.treatment_third_section_journey {
min-height: auto;
padding:
45px 50px 45px 80px;
}
.treatment_third_section_journey_title {
font-size: 30px;
margin-bottom: 25px;
}
.treatment_third_section_journey_line {
left: 48px;
top: 125px;
bottom: 70px;
}
.treatment_third_section_step {
min-height: 88px;
grid-template-columns:
70px 1fr;
column-gap: 20px;
}
.treatment_third_section_step-marker {
left: -36px;
}
.treatment_third_section_step_icon {
width: 67px;
height: 67px;
font-size: 32px;
}
.treatment_third_section_step_content h4 {
font-size: 18px;
}
.treatment_third_section_step_content p {
font-size: 14px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.treatment_third_section_main {
min-height: 620px;
}
.treatment_third_section_bg {
object-position: 67% center;
}
.treatment_third_section_overlay {
background:
linear-gradient(180deg,
rgba(247, 248, 245, 0.98) 0%,
rgba(247, 248, 245, 0.96) 47%,
rgba(239, 243, 239, 0.60) 67%,
rgba(239, 243, 239, 0.15) 100%);
}
.treatment_third_section_main {
align-items: flex-start;
}
.treatment_third_section_content {
width: 100%;
padding:
45px 20px 20px;
}
.treatment_third_section_eyebrow {
margin-bottom: 14px;
font-size: 12px;
letter-spacing: 4px;
}
.treatment_third_section_title {
font-size: 39px;
line-height: 1.05;
}
.treatment_third_section_description {
margin-top: 20px;
max-width: 430px;
font-size: 14px;
line-height: 1.55;
}
.treatment_third_section_button {
width: 100%;
max-width: 330px;
height: 58px;
margin-top: 25px;
padding:
0 22px;
font-size: 14px;
border-radius: 13px;
}
.treatment_third_section_handwriting {
left: auto;
right: 20px;
top: 350px;
width: 135px;
padding: 10px;
font-size: 25px;
background:
rgba(247, 248, 245, 0.60);
backdrop-filter: blur(3px);
border-radius: 12px;
}
/* Journey */
.treatment_third_section_journey {
padding:
35px 20px 35px 60px;
}
.treatment_third_section_journey_title {
font-size: 26px;
}
.treatment_third_section_journey_line {
left: 35px;
top: 105px;
bottom: 55px;
}
.treatment_third_section_step {
min-height: 86px;
grid-template-columns:
58px 1fr;
column-gap: 15px;
}
.treatment_third_section_step_marker {
left: -28px;
}
.treatment_third_section_step_icon {
width: 56px;
height: 56px;
font-size: 27px;
}
.treatment_third_section_step_content h4 {
font-size: 16px;
}
.treatment_third_section_step_content p {
font-size: 13px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.treatment_third_section_main {
min-height: 590px;
}
.treatment_third_section_title {
font-size: 30px;
}
.treatment_third_section_button {
font-size: 13px;
}
.treatment_third_section_handwriting {
top: 355px;
font-size: 22px;
}
.treatment_third_section_journey {
padding-left: 52px;
}
.treatment_third_section_journey_line {
left: 29px;
}
.treatment_third_section_step-marker {
left: -24px;
}
}
/* ==========================================================
TREATMENT FOURTH SECTION
========================================================== */
.treatment_fourth_section {
width: 100%;
position: relative;
overflow: hidden;
background:
linear-gradient(90deg,
#1d4c43 0%,
#1b4b42 55%,
#1b4b42 100%);
font-family: "DM Sans", sans-serif;
}
/* ==========================================================
CONTAINER
========================================================== */
.treatment_fourth_section_container {
width: 100%;
padding: 0;
}
.treatment_fourth_section_row {
min-height: 230px;
}
/* ==========================================================
LEFT IMAGE
========================================================== */
.treatment_fourth_section_image_col {
position: relative;
min-height: 230px;
}
.treatment_fourth_section_image_wrap {
width: 100%;
height: 100%;
min-height: 230px;
position: relative;
overflow: hidden;
}
/* image */
.treatment_fourth_section_image {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
object-fit: cover;
object-position: center;
display: block;
filter:
saturate(0.65) contrast(0.95);
}
/* image overlay */
.treatment_fourth_section_image_wrap::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(18, 56, 49, 0.12) 0%,
rgba(24, 70, 61, 0.34) 65%,
#1d4c43 100%);
}
/* ==========================================================
CENTER CONTENT
========================================================== */
.treatment_fourth_section_content_col {
display: flex;
align-items: center;
position: relative;
z-index: 3;
}
.treatment_fourth_section_content {
width: 100%;
padding-left: 65px;
padding-right: 35px;
}
/* eyebrow */
.treatment_fourth_section_eyebrow {
margin-bottom: 14px;
color: rgba(255, 255, 255, 0.73);
font-size: 13px;
font-weight: 500;
letter-spacing: 7px;
line-height: 1.3;
}
/* heading */
.treatment_fourth_section_title {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 48px;
font-weight: 500;
line-height: 1.05;
letter-spacing: -1.2px;
}
/* description */
.treatment_fourth_section_description {
margin: 13px 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: 20px;
font-weight: 400;
line-height: 1.4;
}
/* ==========================================================
BUTTON COLUMN
========================================================== */
.treatment_fourth_section_button_col {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 4;
}
.treatment_fourth_section_button_wrap {
width: 100%;
display: flex;
justify-content: center;
}
/* ==========================================================
APPOINTMENT BUTTON
========================================================== */
.treatment_fourth_section_button {
width: 400px;
max-width: 100%;
height: 88px;
padding:
0 14px 0 28px;
display: flex;
align-items: center;
gap: 22px;
background: #ffffff;
color: #27463f;
border-radius: 22px;
text-decoration: none;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.08);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.treatment_fourth_section_button:hover {
color: #27463f;
transform: translateY(-3px);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.14);
}
/* calendar */
.treatment_fourth_section_calendar {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: #25493f;
font-size: 31px;
}
/* text */
.treatment_fourth_section_button_text {
flex: 1;
color: #27463f;
font-size: 20px;
font-weight: 600;
white-space: nowrap;
}
/* arrow */
.treatment_fourth_section_arrow {
width: 57px;
min-width: 57px;
height: 57px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #1d594e;
color: #ffffff;
font-size: 25px;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.treatment_fourth_section_button:hover .treatment_fourth_section_arrow {
transform: translateX(3px);
background: #143f37;
}
/* ==========================================================
HANDWRITING
========================================================== */
.treatment_fourth_section_quote_col {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 5;
}
.treatment_fourth_section_quote {
width: 130px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, 0.70);
font-family: "Caveat", cursive;
font-size: 38px;
font-weight: 500;
line-height: 0.9;
text-align: center;
transform: rotate(-7deg);
}
.treatment_fourth_section_quote span:nth-child(1) {
transform: translateX(-8px);
}
.treatment_fourth_section_quote span:nth-child(2) {
margin-top: 5px;
transform: translateX(2px);
}
.treatment_fourth_section_quote_last {
margin-top: 7px;
display: flex;
align-items: center;
transform: translateX(8px);
}
.treatment_fourth_section_quote_last i {
margin-left: 8px;
font-size: 28px;
}
/* ==========================================================
LARGE DESKTOP
========================================================== */
@media (min-width: 1600px) {
.treatment_fourth_section_row,
.treatment_fourth_section_image_col,
.treatment_fourth_section_image_wrap {
min-height: 245px;
}
.treatment_fourth_section_content {
padding-left: 80px;
}
.treatment_fourth_section_title {
font-size: 53px;
}
.treatment_fourth_section_description {
font-size: 22px;
}
.treatment_fourth_section_button {
width: 420px;
}
}
/* ==========================================================
LAPTOP
========================================================== */
@media (max-width: 1399.98px) {
.treatment_fourth_section_row,
.treatment_fourth_section_image_col,
.treatment_fourth_section_image_wrap {
min-height: 210px;
}
.treatment_fourth_section_content {
padding-left: 45px;
padding-right: 20px;
}
.treatment_fourth_section_eyebrow {
font-size: 10px;
letter-spacing: 5px;
}
.treatment_fourth_section_title {
font-size: 40px;
}
.treatment_fourth_section_description {
font-size: 17px;
}
.treatment_fourth_section_button {
width: 340px;
height: 72px;
padding-left: 22px;
gap: 16px;
border-radius: 18px;
}
.treatment_fourth_section_calendar {
width: 35px;
height: 35px;
font-size: 25px;
}
.treatment_fourth_section_button_text {
font-size: 17px;
}
.treatment_fourth_section_arrow {
width: 47px;
min-width: 47px;
height: 47px;
font-size: 20px;
}
.treatment_fourth_section_quote {
font-size: 31px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 991.98px) {
.treatment_fourth_section {
padding-bottom: 35px;
}
.treatment_fourth_section_image_col {
min-height: 300px;
}
.treatment_fourth_section_image_wrap {
min-height: 300px;
}
.treatment_fourth_section_image_wrap::after {
background:
linear-gradient(180deg,
rgba(20, 64, 55, 0.08) 0%,
rgba(27, 75, 66, 0.40) 70%,
#1b4b42 100%);
}
.treatment_fourth_section_content_col {
padding-top: 35px;
}
.treatment_fourth_section_content {
padding:
0 35px;
text-align: center;
}
.treatment_fourth_section_title {
font-size: 45px;
}
.treatment_fourth_section_description {
font-size: 18px;
}
.treatment_fourth_section_button_col {
padding-top: 30px;
}
.treatment_fourth_section_button {
width: 370px;
}
.treatment_fourth_section_quote_col {
padding-top: 28px;
}
.treatment_fourth_section_quote {
font-size: 34px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767.98px) {
.treatment_fourth_section_image_col,
.treatment_fourth_section_image_wrap {
min-height: 240px;
}
.treatment_fourth_section_content_col {
padding-top: 30px;
}
.treatment_fourth_section_content {
padding-left: 20px;
padding-right: 20px;
}
.treatment_fourth_section_eyebrow {
margin-bottom: 12px;
font-size: 9px;
letter-spacing: 4px;
}
.treatment_fourth_section_title {
font-size: 37px;
line-height: 1.1;
}
.treatment_fourth_section_description {
margin-top: 12px;
font-size: 15px;
line-height: 1.5;
}
.treatment_fourth_section_button_col {
padding:
27px 20px 0;
}
.treatment_fourth_section_button {
width: 100%;
max-width: 360px;
height: 66px;
padding:
0 10px 0 17px;
gap: 13px;
border-radius: 16px;
}
.treatment_fourth_section_calendar {
width: 34px;
height: 34px;
font-size: 23px;
}
.treatment_fourth_section_button_text {
font-size: 15px;
}
.treatment_fourth_section_arrow {
width: 43px;
min-width: 43px;
height: 43px;
font-size: 18px;
}
.treatment_fourth_section_quote_col {
padding-top: 30px;
padding-bottom: 5px;
}
.treatment_fourth_section_quote {
font-size: 31px;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 420px) {
.treatment_fourth_section_image_col,
.treatment_fourth_section_image_wrap {
min-height: 210px;
}
.treatment_fourth_section_title {
font-size: 32px;
}
.treatment_fourth_section_description {
font-size: 14px;
}
.treatment_fourth_section_button_text {
font-size: 14px;
}
}
/* docotor page stylingd */
/* ==========================================================
DOCTOR FIRST SECTION
========================================================== */
.doctor_first_section {
position: relative;
width: 100%;
overflow: hidden;
background: #f4f5f2;
font-family: "DM Sans", sans-serif;
}
/* ==========================================================
CONTAINER
========================================================== */
.doctor_first_section_container {
width: 100%;
padding: 0;
}
.doctor_first_section_row {
min-height: 470px;
}
/* ==========================================================
LEFT SIDE
========================================================== */
.doctor_first_section_left {
position: relative;
min-height: 470px;
display: flex;
align-items: center;
z-index: 5;
background:
linear-gradient(90deg,
#f4f6f3 0%,
#f6f7f4 78%,
#f3f5f2 100%);
}
/* ==========================================================
CONTENT
========================================================== */
.doctor_first_section_content {
width: 100%;
position: relative;
z-index: 5;
padding-left: 105px;
padding-right: 35px;
}
/* ==========================================================
EYEBROW
========================================================== */
.doctor_first_section_eyebrow {
margin-bottom: 18px;
color: #516c65;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 8px;
}
/* ==========================================================
TITLE
========================================================== */
.doctor_first_section_title {
margin: 0;
color: #103f37;
font-family: "Playfair Display", serif;
font-size: 52px;
font-weight: 600;
line-height: 1.03;
letter-spacing: -2px;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.doctor_first_section_description {
max-width: 850px;
margin: 26px 0 0;
color: #34433e;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
}
.doctor_first_section_description strong {
font-weight: 700;
}
/* ==========================================================
LEFT CURVE
========================================================== */
.doctor_first_section_curve {
position: absolute;
z-index: 3;
left: -170px;
bottom: -160px;
width: 285px;
height: 540px;
border-radius: 50%;
background:
rgba(203, 214, 209, 0.54);
transform: rotate(-12deg);
pointer-events: none;
}
.doctor_first_section_curve::after {
content: "";
position: absolute;
right: 38px;
top: 20px;
width: 155px;
height: 490px;
border-radius: 50%;
border-right:
1px solid rgba(128, 151, 143, 0.28);
}
/* ==========================================================
RIGHT SIDE
========================================================== */
.doctor_first_section_right {
position: relative;
min-height: 470px;
overflow: hidden;
}
/* ==========================================================
IMAGE WRAPPER
========================================================== */
.doctor_first_section_image_wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #e7e8e3;
}
/* ==========================================================
IMAGE
========================================================== */
.doctor_first_section_image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
position: absolute;
inset: 0;
}
/* LEFT FADE INTO CONTENT */
.doctor_first_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
width: 180px;
/* background:
linear-gradient(90deg,
rgba(243, 245, 242, 0.95) 0%,
rgba(243, 245, 242, 0.68) 42%,
rgba(243, 245, 242, 0) 100%); */
pointer-events: none;
}
/* subtle white light overlay */
.doctor_first_section_image_wrapper::after {
content: "";
position: absolute;
z-index: 2;
inset: 0;
background:
linear-gradient(90deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.04) 100%);
pointer-events: none;
}
/* ==========================================================
FIRST HANDWRITTEN QUOTE
========================================================== */
.doctor_first_section_quote_one {
position: absolute;
z-index: 6;
left: 8%;
top: 18%;
width: 170px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(49, 74, 67, 0.76);
font-family: "Caveat", cursive;
font-size: 38px;
font-weight: 500;
line-height: 0.9;
text-align: center;
transform: rotate(-7deg);
}
.doctor_first_section_quote_one>span:nth-child(1) {
transform: translateX(-16px);
}
.doctor_first_section_quote_one>span:nth-child(2) {
margin-top: 7px;
transform: translateX(3px);
}
.doctor_first_section_quote_one>span:nth-child(3) {
margin-top: 7px;
transform: translateX(-2px);
}
.doctor_first_section_quote_one_last {
display: flex;
align-items: center;
margin-top: 7px;
transform: translateX(13px);
}
.doctor_first_section_quote_one_last i {
margin-left: 7px;
font-size: 27px;
}
/* ==========================================================
SECOND HANDWRITTEN QUOTE
========================================================== */
.doctor_first_section_quote_two {
position: absolute;
z-index: 6;
right: 5%;
top: 19%;
width: 175px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(46, 71, 64, 0.77);
font-family: "Caveat", cursive;
font-size: 38px;
font-weight: 500;
line-height: 0.95;
text-align: center;
transform: rotate(-6deg);
}
.doctor_first_section_quote_two span:nth-child(1) {
transform: translateX(-12px);
}
.doctor_first_section_quote_two span:nth-child(2) {
margin-top: 7px;
transform: translateX(4px);
}
.doctor_first_section_quote_two span:nth-child(3) {
margin-top: 7px;
transform: translateX(8px);
}
.doctor_first_section_quote_two span:nth-child(4) {
margin-top: 8px;
transform: translateX(14px);
}
/* small underline */
.doctor_first_section_quote_line {
width: 70px;
height: 2px;
margin-top: 25px;
background: #56766e;
transform: translateX(10px);
}
/* ==========================================================
LARGE DESKTOP
========================================================== */
@media (min-width: 1700px) {
.doctor_first_section_row,
.doctor_first_section_left,
.doctor_first_section_right {
min-height: 500px;
}
.doctor_first_section_content {
padding-left: 110px;
}
.doctor_first_section_title {
font-size: 74px;
}
.doctor_first_section_description {
font-size: 21px;
}
.doctor_first_section_quote_one,
.doctor_first_section_quote_two {
font-size: 41px;
}
}
/* ==========================================================
DESKTOP
========================================================== */
@media (max-width: 1500px) {
.doctor_first_section_row,
.doctor_first_section_left,
.doctor_first_section_right {
min-height: 440px;
}
.doctor_first_section_content {
padding-left: 70px;
padding-right: 30px;
}
.doctor_first_section_eyebrow {
font-size: 12px;
letter-spacing: 6px;
}
.doctor_first_section_title {
font-size: 58px;
}
.doctor_first_section_description {
margin-top: 22px;
font-size: 20px;
}
.doctor_first_section_quote_one,
.doctor_first_section_quote_two {
font-size: 32px;
}
}
/* ==========================================================
LAPTOP
========================================================== */
@media (max-width: 1199.98px) {
.doctor_first_section_content {
padding-left: 45px;
padding-right: 25px;
}
.doctor_first_section_title {
font-size: 48px;
}
.doctor_first_section_description {
font-size: 16px;
}
.doctor_first_section_image_wrapper::before {
width: 120px;
}
.doctor_first_section_quote_one {
left: 4%;
font-size: 27px;
}
.doctor_first_section_quote_two {
right: 4%;
font-size: 28px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 991.98px) {
.doctor_first_section_row {
min-height: auto;
}
.doctor_first_section_left {
min-height: auto;
padding: 65px 0 55px;
}
.doctor_first_section_content {
padding-left: 40px;
padding-right: 40px;
}
.doctor_first_section_title {
font-size: 59px;
}
.doctor_first_section_description {
max-width: 720px;
font-size: 17px;
}
.doctor_first_section_right {
min-height: 560px;
}
.doctor_first_section_image_wrapper {
position: absolute;
}
.doctor_first_section_image_wrapper::before {
width: 110px;
}
.doctor_first_section_quote_one {
left: 8%;
top: 14%;
font-size: 35px;
}
.doctor_first_section_quote_two {
right: 7%;
top: 16%;
font-size: 35px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767.98px) {
.doctor_first_section_left {
padding: 50px 0 45px;
}
.doctor_first_section_content {
padding-left: 20px;
padding-right: 20px;
}
.doctor_first_section_eyebrow {
margin-bottom: 13px;
font-size: 10px;
letter-spacing: 4px;
}
.doctor_first_section_title {
font-size: 44px;
line-height: 1.04;
letter-spacing: -1.2px;
}
.doctor_first_section_description {
margin-top: 24px;
font-size: 14px;
line-height: 1.6;
}
.doctor_first_section_right {
min-height: 430px;
}
.doctor_first_section_image {
object-position: center;
}
.doctor_first_section_image_wrapper::before {
width: 75px;
}
.doctor_first_section_quote_one {
left: 18px;
top: 35px;
width: 120px;
padding: 9px;
font-size: 25px;
background: rgba(247, 248, 245, 0.62);
backdrop-filter: blur(3px);
border-radius: 12px;
}
.doctor_first_section_quote_two {
right: 18px;
top: 35px;
width: 125px;
padding: 9px;
font-size: 24px;
background: rgba(247, 248, 245, 0.62);
backdrop-filter: blur(3px);
border-radius: 12px;
}
.doctor_first_section_quote_line {
width: 48px;
margin-top: 15px;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 420px) {
.doctor_first_section_title {
font-size: 38px;
}
.doctor_first_section_description {
font-size: 16px;
}
.doctor_first_section_right {
min-height: 370px;
}
.doctor_first_section_quote_one,
.doctor_first_section_quote_two {
font-size: 21px;
}
}
/* =========================================================
DOCTOR SECOND SECTION - ALIGNMENT + TEXT SIZE FIX
Add this at the END of existing CSS
========================================================= */
/* =========================================================
DOCTOR SECOND SECTION
========================================================= */
.doctor_second_section {
position: relative;
width: 100%;
overflow: hidden;
padding: 38px 32px;
background:
radial-gradient(circle at 45% 35%,
rgba(255, 255, 255, 0.96) 0%,
rgba(251, 250, 244, 0.96) 50%,
rgba(242, 247, 240, 0.96) 100%);
font-family: "DM Sans", sans-serif;
}
/* subtle decorative curves */
.doctor_second_section::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
left: -290px;
bottom: -320px;
border-radius: 50%;
border: 1px solid rgba(55, 102, 90, 0.10);
box-shadow:
70px -40px 0 rgba(100, 145, 128, 0.035),
130px -85px 0 rgba(100, 145, 128, 0.025);
pointer-events: none;
}
.doctor_second_section::after {
content: "";
position: absolute;
width: 430px;
height: 430px;
right: -230px;
top: -210px;
border-radius: 50%;
border: 1px solid rgba(55, 102, 90, 0.08);
pointer-events: none;
}
/* =========================================================
CONTAINER
========================================================= */
.doctor_second_section_container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 0;
}
/* =========================================================
PROFILE
========================================================= */
.doctor_second_section_profile {
position: relative;
padding:
15px 0 45px;
}
.doctor_second_section_profile_second {
margin-top: 30px;
padding-top: 45px;
border-top:
1px solid rgba(50, 84, 74, 0.12);
}
.doctor_second_section_row {
position: relative;
min-height: 550px;
}
/* =========================================================
IMAGE BOX
========================================================= */
.doctor_second_section_image_box {
position: relative;
width: 100%;
height: 550px;
overflow: hidden;
border:
5px solid rgba(255, 255, 255, 0.92);
border-radius: 25px;
background: #e8ece7;
box-shadow:
0 15px 35px rgba(29, 66, 56, 0.13),
0 0 0 1px rgba(69, 108, 97, 0.14);
}
.doctor_second_section_image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center top;
transition:
transform 0.45s ease;
}
.doctor_second_section_image_box:hover .doctor_second_section_image {
transform: scale(1.02);
}
/* =========================================================
TOP SPECIALIST BADGE
========================================================= */
.doctor_second_section_top_badge {
position: absolute;
z-index: 5;
top: 22px;
right: 18px;
min-width: 190px;
min-height: 69px;
padding:
10px 20px;
display: flex;
align-items: center;
gap: 14px;
color: #183f37;
background:
rgba(248, 249, 243, 0.92);
backdrop-filter: blur(10px);
border:
1px solid rgba(255, 255, 255, 0.75);
border-radius: 26px;
box-shadow:
0 10px 23px rgba(32, 62, 54, 0.13);
font-family: "Playfair Display", serif;
font-size: 16px;
font-weight: 600;
line-height: 1.12;
}
.doctor_second_section_top_badge_icon {
width: 39px;
min-width: 39px;
height: 39px;
display: flex;
align-items: center;
justify-content: center;
color: #18584c;
font-size: 28px;
}
/* =========================================================
SPECIALITY
========================================================= */
.doctor_second_section_speciality {
position: absolute;
z-index: 5;
left: 18px;
bottom: 20px;
min-width: 285px;
min-height: 77px;
padding:
12px 20px;
display: flex;
align-items: center;
gap: 16px;
color: #ffffff;
background:
linear-gradient(115deg,
rgba(5, 91, 77, 0.97),
rgba(9, 103, 86, 0.92));
border:
1px solid rgba(57, 196, 166, 0.42);
border-radius: 18px;
box-shadow:
0 10px 25px rgba(11, 66, 55, 0.25);
font-family: "Playfair Display", serif;
font-size: 17px;
font-weight: 500;
line-height: 1.25;
}
.doctor_second_section_speciality_icon {
width: 48px;
min-width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
}
/* =========================================================
SIGNATURE
========================================================= */
.doctor_second_section_signature {
position: absolute;
z-index: 5;
right: 25px;
bottom: 110px;
color: rgba(255, 255, 255, 0.94);
font-family: "Caveat", cursive;
font-size: 27px;
font-weight: 500;
transform: rotate(-5deg);
text-shadow:
0 2px 5px rgba(0, 0, 0, 0.15);
}
/* =========================================================
DETAILS
========================================================= */
.doctor_second_section_details {
width: 100%;
height: 100%;
padding:
2px 5px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* =========================================================
EYEBROW
========================================================= */
.doctor_second_section_eyebrow {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 14px;
color: #52766d;
font-size: 10px;
font-weight: 600;
letter-spacing: 5px;
white-space: nowrap;
}
.doctor_second_section_eyebrow>i {
width: 4px;
min-width: 4px;
height: 4px;
display: block;
border-radius: 50%;
background: #285d52;
}
.doctor_second_section_eyebrow_line {
flex: 1;
height: 1px;
margin-left: 8px;
background:
linear-gradient(90deg,
rgba(40, 94, 81, 0.55),
rgba(40, 94, 81, 0));
}
/* =========================================================
NAME
========================================================= */
.doctor_second_section_name {
margin: 0;
color: #0d4439;
font-family: "Playfair Display", serif;
font-size: 54px;
font-weight: 700;
line-height: 1;
letter-spacing: 2px;
}
/* =========================================================
QUALIFICATION
========================================================= */
.doctor_second_section_qualification {
margin-top: 7px;
color: #213e38;
font-size: 22px;
font-weight: 400;
line-height: 1.3;
}
/* =========================================================
TITLE LINE
========================================================= */
.doctor_second_section_title_line {
width: 65px;
height: 3px;
margin:
18px 0 17px;
border-radius: 20px;
background:
#126052;
}
/* =========================================================
DESCRIPTION
========================================================= */
.doctor_second_section_description {
max-width: 100%;
margin: 0;
color: #40544e;
font-size: 15px;
font-weight: 400;
line-height: 1.58;
}
/* =========================================================
EXPERTISE
========================================================= */
.doctor_second_section_expertise {
margin-top: 17px;
}
.doctor_second_section_expertise_heading {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 10px;
}
.doctor_second_section_expertise_heading h3 {
margin: 0;
flex-shrink: 0;
color: #1d443b;
font-family: "Playfair Display", serif;
font-size: 27px;
font-weight: 600;
}
.doctor_second_section_expertise_heading>span {
width: 100%;
height: 1px;
background:
linear-gradient(90deg,
rgba(52, 101, 88, 0.48),
rgba(52, 101, 88, 0.08));
}
/* =========================================================
EXPERTISE CARD
========================================================= */
.doctor_second_section_expertise_item {
width: 100%;
min-height: 53px;
padding:
5px 12px 5px 8px;
display: flex;
align-items: center;
gap: 12px;
color: #344b44;
background:
linear-gradient(90deg,
rgba(255, 255, 255, 0.90),
rgba(250, 249, 243, 0.88));
border:
1px solid rgba(65, 93, 84, 0.09);
border-radius: 22px;
box-shadow:
0 5px 13px rgba(26, 63, 53, 0.07);
font-family: "Playfair Display", serif;
font-size: 14px;
font-weight: 500;
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.doctor_second_section_expertise_item:hover {
transform: translateY(-2px);
border-color:
rgba(28, 97, 81, 0.22);
box-shadow:
0 9px 20px rgba(25, 67, 55, 0.10);
}
/* =========================================================
EXPERTISE ICON
========================================================= */
.doctor_second_section_expertise_icon {
width: 42px;
min-width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: #17594c;
background:
linear-gradient(145deg,
#e4f0e6,
#f2f6ee);
border-radius: 50%;
font-size: 20px;
}
.doctor_second_section_expertise_icon img {
width: 21px !important;
height: 21px !important;
object-fit: contain;
}
.doctor_second_section_expertise_text {
flex: 1;
min-width: 0;
}
.doctor_second_section_expertise_item>i {
flex-shrink: 0;
color: #56756d;
font-size: 16px;
}
/* =========================================================
RIGHT COLUMN
========================================================= */
.doctor_second_section_right {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
/* =========================================================
QUOTE CARD
========================================================= */
.doctor_second_section_quote_card {
position: relative;
width: 100%;
flex: 1;
min-height: 375px;
padding:
32px 35px 28px;
overflow: hidden;
display: flex;
flex-direction: column;
background:
linear-gradient(145deg,
rgba(255, 255, 255, 0.96),
rgba(248, 249, 243, 0.93));
border:
1px solid rgba(67, 96, 87, 0.08);
border-radius: 26px;
box-shadow:
0 13px 35px rgba(33, 69, 58, 0.09);
border: 1px solid #006451;
}
/* decorative bottom curve */
.doctor_second_section_quote_card::after {
content: "";
position: absolute;
right: -70px;
bottom: -100px;
width: 260px;
height: 260px;
border-radius: 50%;
border:
1px solid rgba(49, 102, 87, 0.10);
box-shadow:
-35px -25px 0 rgba(107, 150, 128, 0.04);
pointer-events: none;
}
/* =========================================================
QUOTE HEADER
========================================================= */
.doctor_second_section_quote_header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
}
/* quote bubble */
.doctor_second_section_quote_mark {
width: 72px;
min-width: 72px;
height: 72px;
padding-top: 17px;
display: flex;
align-items: center;
justify-content: center;
color: #155949;
background:
linear-gradient(145deg,
#eef4e9,
#f7f8f1);
border-radius: 50%;
font-family: Georgia, serif;
font-size: 54px;
font-weight: 700;
line-height: 1;
}
/* tag */
.doctor_second_section_quote_tag {
display: flex;
flex-direction: column;
gap: 5px;
padding-top: 3px;
color: #547970;
font-size: 8px;
font-weight: 600;
line-height: 1.15;
letter-spacing: 4px;
}
.doctor_second_section_quote_tag::after {
content: "";
width: 65px;
height: 1px;
margin-top: 8px;
background: #6e9389;
}
/* =========================================================
QUOTE TEXT
========================================================= */
.doctor_second_section_quote_card p {
position: relative;
z-index: 2;
margin:
15px 0 0;
color: #173f37;
font-family: "Playfair Display", serif;
font-size: 24px;
font-style: italic;
font-weight: 500;
line-height: 1.42;
text-align: center;
}
/* =========================================================
QUOTE LINE
========================================================= */
.doctor_second_section_quote_line {
width: 46px;
height: 2px;
margin:
21px auto 14px;
background: #266556;
}
/* =========================================================
AUTHOR
========================================================= */
.doctor_second_section_quote_author {
position: relative;
z-index: 2;
margin-top: auto;
color: #1a4d42;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 5px;
text-align: center;
}
/* =========================================================
APPOINTMENT
========================================================= */
.doctor_second_section_appointment {
width: 100%;
min-height: 80px;
padding:
10px 15px;
display: flex;
align-items: center;
gap: 19px;
color: #ffffff;
background:
linear-gradient(95deg,
#096451,
#006451);
border:
1px solid rgba(46, 195, 164, 0.32);
border-radius: 24px;
text-decoration: none;
box-shadow:
0 12px 24px rgba(15, 87, 72, 0.18);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.doctor_second_section_appointment:hover {
color: #ffffff;
transform: translateY(-3px);
box-shadow:
0 17px 30px rgba(15, 87, 72, 0.25);
}
/* calendar circle */
.doctor_second_section_appointment_calendar,
.doctor_second_section_appointment_arrow {
width: 59px;
min-width: 59px;
height: 59px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(94, 233, 203, 0.46);
border-radius: 50%;
font-size: 26px;
}
.doctor_second_section_appointment_text {
flex: 1;
font-family: "Playfair Display", serif;
font-size: 20px;
font-weight: 500;
text-align: center;
}
.doctor_second_section_appointment_arrow {
font-size: 25px;
transition: transform 0.3s ease;
}
.doctor_second_section_appointment:hover .doctor_second_section_appointment_arrow {
transform: translateX(3px);
}
/* =========================================================
BOTTOM CAPTION
========================================================= */
.doctor_second_section_bottom_caption {
display: flex;
align-items: center;
gap: 14px;
padding:
0 10px;
}
.doctor_second_section_bottom_caption>span {
flex: 1;
height: 1px;
background:
rgba(58, 101, 90, 0.35);
}
.doctor_second_section_bottom_caption p {
margin: 0;
color: #55786f;
font-size: 8px;
font-weight: 600;
letter-spacing: 4px;
white-space: nowrap;
}
/* =========================================================
1600+
========================================================= */
@media (min-width: 1600px) {
.doctor_second_section {
padding:
45px 38px;
}
.doctor_second_section_row {
min-height: 600px;
}
.doctor_second_section_image_box {
height: 600px;
}
.doctor_second_section_name {
font-size: 59px;
}
.doctor_second_section_qualification {
font-size: 23px;
}
.doctor_second_section_description {
font-size: 16px;
}
.doctor_second_section_expertise_item {
min-height: 57px;
font-size: 15px;
}
.doctor_second_section_quote_card {
min-height: 410px;
}
.doctor_second_section_quote_card p {
font-size: 26px;
}
}
/* =========================================================
1200 - 1399
========================================================= */
@media (max-width: 1399.98px) {
.doctor_second_section {
padding:
30px 22px;
}
.doctor_second_section_row {
min-height: 505px;
}
.doctor_second_section_image_box {
height: 505px;
}
.doctor_second_section_top_badge {
min-width: 155px;
min-height: 58px;
padding:
8px 14px;
font-size: 13px;
}
.doctor_second_section_speciality {
min-width: 230px;
min-height: 64px;
font-size: 14px;
}
.doctor_second_section_signature {
font-size: 22px;
}
.doctor_second_section_eyebrow {
gap: 9px;
font-size: 8px;
letter-spacing: 3px;
}
.doctor_second_section_name {
font-size: 42px;
}
.doctor_second_section_qualification {
font-size: 18px;
}
.doctor_second_section_description {
font-size: 13px;
}
.doctor_second_section_expertise_heading h3 {
font-size: 23px;
}
.doctor_second_section_expertise_item {
min-height: 47px;
font-size: 12px;
}
.doctor_second_section_expertise_icon {
width: 37px;
min-width: 37px;
height: 37px;
}
.doctor_second_section_quote_card {
min-height: 340px;
padding:
25px 25px;
}
.doctor_second_section_quote_mark {
width: 59px;
min-width: 59px;
height: 59px;
font-size: 45px;
}
.doctor_second_section_quote_card p {
font-size: 19px;
}
.doctor_second_section_appointment {
min-height: 70px;
}
.doctor_second_section_appointment_calendar,
.doctor_second_section_appointment_arrow {
width: 50px;
min-width: 50px;
height: 50px;
font-size: 21px;
}
.doctor_second_section_appointment_text {
font-size: 16px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.doctor_second_section {
padding:
35px 24px;
}
.doctor_second_section_profile {
padding-bottom: 35px;
}
.doctor_second_section_image_box {
max-width: 650px;
height: 680px;
margin:
0 auto 15px;
}
.doctor_second_section_details {
max-width: 760px;
margin: auto;
padding:
18px 4px;
}
.doctor_second_section_name {
font-size: 46px;
}
.doctor_second_section_qualification {
font-size: 19px;
}
.doctor_second_section_description {
font-size: 15px;
}
.doctor_second_section_expertise_item {
min-height: 54px;
font-size: 14px;
}
.doctor_second_section_right {
max-width: 760px;
margin:
10px auto 0;
}
.doctor_second_section_quote_card {
min-height: 350px;
}
.doctor_second_section_quote_card p {
max-width: 570px;
margin-left: auto;
margin-right: auto;
font-size: 24px;
}
.doctor_second_section_appointment {
max-width: 560px;
margin: auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.doctor_second_section {
padding:
25px 14px;
}
.doctor_second_section_image_box {
height: 510px;
border-radius: 20px;
}
.doctor_second_section_top_badge {
top: 15px;
right: 12px;
min-width: 140px;
font-size: 11px;
border-radius: 20px;
}
.doctor_second_section_top_badge_icon {
width: 31px;
min-width: 31px;
font-size: 22px;
}
.doctor_second_section_speciality {
left: 10px;
bottom: 12px;
min-width: 205px;
min-height: 59px;
padding:
9px 13px;
gap: 10px;
font-size: 12px;
border-radius: 15px;
}
.doctor_second_section_speciality_icon {
width: 37px;
min-width: 37px;
height: 37px;
font-size: 27px;
}
.doctor_second_section_signature {
right: 15px;
bottom: 18px;
font-size: 19px;
}
.doctor_second_section_details {
padding:
18px 0;
}
.doctor_second_section_eyebrow {
flex-wrap: wrap;
gap: 7px;
font-size: 7px;
letter-spacing: 2px;
}
.doctor_second_section_eyebrow_line {
display: none;
}
.doctor_second_section_name {
font-size: 35px;
letter-spacing: 1px;
}
.doctor_second_section_qualification {
font-size: 15px;
}
.doctor_second_section_title_line {
margin:
14px 0;
}
.doctor_second_section_description {
font-size: 14px;
line-height: 1.6;
}
.doctor_second_section_expertise {
margin-top: 22px;
}
.doctor_second_section_expertise_heading h3 {
font-size: 22px;
}
.doctor_second_section_expertise_heading>span {
display: none;
}
.doctor_second_section_expertise_item {
min-height: 54px;
padding-right: 14px;
font-size: 13px;
}
.doctor_second_section_quote_card {
min-height: 330px;
padding:
25px 22px;
border-radius: 20px;
}
.doctor_second_section_quote_header {
margin-bottom: 5px;
}
.doctor_second_section_quote_mark {
width: 57px;
min-width: 57px;
height: 57px;
font-size: 44px;
}
.doctor_second_section_quote_tag {
font-size: 7px;
letter-spacing: 3px;
}
.doctor_second_section_quote_card p {
font-size: 20px;
}
.doctor_second_section_appointment {
min-height: 67px;
gap: 10px;
border-radius: 18px;
}
.doctor_second_section_appointment_calendar,
.doctor_second_section_appointment_arrow {
width: 47px;
min-width: 47px;
height: 47px;
font-size: 19px;
}
.doctor_second_section_appointment_text {
font-size: 15px;
}
.doctor_second_section_bottom_caption p {
font-size: 6px;
letter-spacing: 2px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.doctor_second_section_image_box {
height: 440px;
}
.doctor_second_section_signature {
display: none;
}
.doctor_second_section_name {
font-size: 31px;
}
.doctor_second_section_qualification {
font-size: 14px;
}
.doctor_second_section_description {
font-size: 13px;
}
.doctor_second_section_quote_card p {
font-size: 18px;
}
.doctor_second_section_appointment_text {
font-size: 13px;
}
}
/* =========================================================
DOCTOR THIRD SECTION
========================================================= */
.doctor_third_section {
width: 100%;
position: relative;
overflow: hidden;
background: #174d43;
font-family: "DM Sans", sans-serif;
}
/* container */
.doctor_third_section_container {
width: 100%;
padding: 0;
}
/* row */
.doctor_third_section_row {
min-height: 270px;
}
/* =========================================================
LEFT AREA
========================================================= */
.doctor_third_section_left {
min-height: 270px;
display: flex;
align-items: center;
background:
linear-gradient(90deg,
#174b42 0%,
#194f45 100%);
}
/* content */
.doctor_third_section_content {
width: 100%;
padding:
35px 45px 35px 40px;
display: grid;
grid-template-columns:
1fr 1px 1.25fr;
align-items: center;
column-gap: 28px;
}
/* =========================================================
EYEBROW
========================================================= */
.doctor_third_section_eyebrow {
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.78);
font-size: 10px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 4px;
}
/* =========================================================
TITLE
========================================================= */
.doctor_third_section_title {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 43px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.8px;
}
/* =========================================================
CENTER DIVIDER
========================================================= */
.doctor_third_section_divider {
width: 1px;
height: 92px;
background:
rgba(255, 255, 255, 0.34);
}
/* =========================================================
TEXT
========================================================= */
.doctor_third_section_text_block p {
margin: 0;
color: rgba(255, 255, 255, 0.86);
font-size: 15px;
font-weight: 400;
line-height: 1.55;
}
/* =========================================================
BUTTON
========================================================= */
.doctor_third_section_button {
width: 165px;
height: 48px;
margin-top: 18px;
padding:
0 18px;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
border:
1px solid rgba(255, 255, 255, 0.62);
border-radius: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 500;
background:
rgba(255, 255, 255, 0.02);
transition:
background 0.3s ease,
color 0.3s ease;
}
.doctor_third_section_button i {
font-size: 15px;
transition:
transform 0.3s ease;
}
.doctor_third_section_button:hover {
color: #174e43;
background: #ffffff;
}
.doctor_third_section_button:hover i {
transform: translateX(4px);
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.doctor_third_section_right {
min-height: 270px;
position: relative;
overflow: hidden;
}
.doctor_third_section_image_wrapper {
width: 100%;
height: 100%;
min-height: 270px;
position: relative;
overflow: hidden;
}
/* image */
.doctor_third_section_image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* fade from green into image */
.doctor_third_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
top: 0;
bottom: 0;
width: 150px;
background:
linear-gradient(90deg,
#194f45 0%,
rgba(25, 79, 69, 0.72) 38%,
rgba(25, 79, 69, 0) 100%);
}
/* =========================================================
IMAGE HANDWRITING
========================================================= */
.doctor_third_section_handwriting {
position: absolute;
z-index: 4;
right: 16%;
top: 22%;
width: 110px;
display: flex;
flex-direction: column;
align-items: center;
/* color: rgba(43, 70, 63, 0.78); */
color: white;
font-family: "Caveat", cursive;
font-size: 27px;
font-weight: 500;
line-height: 0.95;
text-align: center;
transform: rotate(-6deg);
}
.doctor_third_section_handwriting span:nth-child(1) {
transform: translateX(-6px);
}
.doctor_third_section_handwriting span:nth-child(2) {
margin-top: 5px;
}
.doctor_third_section_handwriting span:nth-child(3) {
margin-top: 5px;
transform: translateX(5px);
}
/* =========================================================
DOCTOR FOURTH SECTION
========================================================= */
.doctor_fourth_section {
width: 100%;
position: relative;
overflow: hidden;
background: #fbfaf7;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.doctor_fourth_section_container {
width: 100%;
padding:
0 40px;
}
/* =========================================================
INNER
========================================================= */
.doctor_fourth_section_inner {
min-height: 88px;
display: grid;
grid-template-columns:
1fr 1px 1fr 1px 1fr 1px 1fr 1.4fr;
align-items: center;
column-gap: 20px;
}
/* =========================================================
FEATURE
========================================================= */
.doctor_fourth_section_feature {
display: flex;
align-items: center;
gap: 14px;
}
/* =========================================================
ICON CIRCLE
========================================================= */
.doctor_fourth_section_icon {
width: 52px;
min-width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(145deg,
#f1f3ef,
#f7f7f4);
color: #284f47;
font-size: 29px;
}
/* =========================================================
TEXT
========================================================= */
.doctor_fourth_section_text {
color: #38443f;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
}
/* =========================================================
FEATURE DIVIDER
========================================================= */
.doctor_fourth_section_divider {
width: 1px;
height: 40px;
background:
rgba(103, 120, 114, 0.18);
}
/* =========================================================
TAGLINE
========================================================= */
.doctor_fourth_section_tagline {
position: relative;
justify-self: center;
width: 145px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(61, 91, 83, 0.74);
font-family: "Caveat", cursive;
font-size: 26px;
font-weight: 500;
line-height: 0.9;
text-align: center;
transform: rotate(-6deg);
}
.doctor_fourth_section_tagline span:nth-child(2) {
margin-top: 4px;
transform: translateX(10px);
}
.doctor_fourth_section_tagline i {
position: absolute;
right: -4px;
top: 10px;
font-size: 18px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.doctor_third_section_row,
.doctor_third_section_left,
.doctor_third_section_right,
.doctor_third_section_image_wrapper {
min-height: 300px;
}
.doctor_third_section_content {
padding-left: 55px;
padding-right: 55px;
}
.doctor_third_section_title {
font-size: 48px;
}
.doctor_third_section_text_block p {
font-size: 15px;
}
.doctor_fourth_section_inner {
min-height: 100px;
}
.doctor_fourth_section_text {
font-size: 13px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.doctor_third_section_content {
padding:
30px 30px;
column-gap: 20px;
}
.doctor_third_section_title {
font-size: 36px;
}
.doctor_third_section_text_block p {
font-size: 12px;
}
.doctor_third_section_button {
width: 150px;
height: 44px;
}
.doctor_third_section_handwriting {
right: 10%;
font-size: 23px;
}
/* fourth */
.doctor_fourth_section_container {
padding:
0 25px;
}
.doctor_fourth_section_inner {
column-gap: 13px;
}
.doctor_fourth_section_icon {
width: 45px;
min-width: 45px;
height: 45px;
font-size: 25px;
}
.doctor_fourth_section_text {
font-size: 9px;
}
.doctor_fourth_section_tagline {
font-size: 22px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
/* third */
.doctor_third_section_left {
min-height: auto;
padding: 40px 0;
}
.doctor_third_section_content {
grid-template-columns:
1fr 1px 1fr;
padding:
0 35px;
}
.doctor_third_section_title {
font-size: 38px;
}
.doctor_third_section_right,
.doctor_third_section_image_wrapper {
min-height: 380px;
}
.doctor_third_section_handwriting {
right: 12%;
top: 18%;
font-size: 30px;
}
/* fourth */
.doctor_fourth_section_container {
padding:
20px 30px;
}
.doctor_fourth_section_inner {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px 30px;
}
.doctor_fourth_section_divider {
display: none;
}
.doctor_fourth_section_feature {
padding:
10px 0;
border-bottom:
1px solid rgba(103, 120, 114, 0.12);
}
.doctor_fourth_section_text {
font-size: 15px;
}
.doctor_fourth_section_tagline {
grid-column: 1 / -1;
margin:
10px auto;
font-size: 26px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
/* third */
.doctor_third_section_content {
grid-template-columns: 1fr;
row-gap: 25px;
padding:
0 20px;
text-align: center;
}
.doctor_third_section_divider {
width: 70px;
height: 1px;
margin: auto;
background:
rgba(255, 255, 255, 0.32);
}
.doctor_third_section_eyebrow {
font-size: 9px;
letter-spacing: 3px;
}
.doctor_third_section_title {
font-size: 36px;
}
.doctor_third_section_text_block p {
font-size: 13px;
}
.doctor_third_section_text_block p br {
display: none;
}
.doctor_third_section_button {
margin:
18px auto 0;
}
.doctor_third_section_right,
.doctor_third_section_image_wrapper {
min-height: 300px;
}
.doctor_third_section_handwriting {
right: 20px;
top: 35px;
width: 110px;
padding: 8px;
font-size: 24px;
background:
rgba(250, 250, 247, 0.58);
backdrop-filter: blur(3px);
border-radius: 10px;
}
/* fourth */
.doctor_fourth_section_container {
padding:
18px 18px;
}
.doctor_fourth_section_inner {
grid-template-columns: 1fr;
}
.doctor_fourth_section_feature {
min-height: 75px;
gap: 18px;
}
.doctor_fourth_section_icon {
width: 50px;
min-width: 50px;
height: 50px;
font-size: 28px;
}
.doctor_fourth_section_text {
font-size: 15px;
}
.doctor_fourth_section_tagline {
grid-column: auto;
margin:
20px auto 10px;
font-size: 27px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.doctor_third_section_title {
font-size: 32px;
}
.doctor_third_section_text_block p {
font-size: 12px;
}
.doctor_third_section_right,
.doctor_third_section_image_wrapper {
min-height: 260px;
}
}
/* =========================================================
PATIENT STORIES FIRST SECTION
========================================================= */
.patient_stories_first_section {
width: 100%;
position: relative;
overflow: hidden;
background: #f5f6f3;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.patient_stories_first_section_container {
width: 100%;
padding: 0;
}
.patient_stories_first_section_row {
min-height: 645px;
}
/* =========================================================
LEFT SIDE
========================================================= */
.patient_stories_first_section_left {
position: relative;
min-height: 645px;
display: flex;
align-items: center;
z-index: 5;
background:
linear-gradient(90deg,
#f4f6f3 0%,
#f7f8f5 75%,
#f2f5f2 100%);
}
/* =========================================================
CONTENT
========================================================= */
.patient_stories_first_section_content {
width: 100%;
position: relative;
z-index: 4;
padding-left: 115px;
padding-right: 50px;
}
/* =========================================================
EYEBROW
========================================================= */
.patient_stories_first_section_eyebrow {
margin-bottom: 10px;
color: #4f6c65;
font-size: 16px;
font-weight: 600;
letter-spacing: 9px;
line-height: 1.3;
}
/* =========================================================
TITLE
========================================================= */
.patient_stories_first_section_title {
margin: 0;
color: #103f37;
font-family: "Playfair Display", serif;
font-size: 65px;
font-weight: 600;
/* line-height: 0.96; */
letter-spacing: -2px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.patient_stories_first_section_description {
max-width: 770px;
margin: 30px 0 0;
color: #384742;
font-size: 21px;
font-weight: 500;
line-height: 1.5;
}
/* =========================================================
STATS
========================================================= */
.patient_stories_first_section_stats {
width: 100%;
max-width: 790px;
margin-top: 54px;
display: grid;
grid-template-columns:
minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
align-items: center;
}
/* =========================================================
STAT
========================================================= */
.patient_stories_first_section_stat {
display: flex;
align-items: center;
gap: 18px;
padding: 0 12px;
}
.patient_stories_first_section_stat:first-child {
padding-left: 0;
}
/* =========================================================
STAT ICON
========================================================= */
.patient_stories_first_section_stat_icon {
width: 62px;
min-width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
color: #294f47;
font-size: 52px;
line-height: 1;
}
/* =========================================================
STAT CONTENT
========================================================= */
.patient_stories_first_section_stat_content {
display: flex;
flex-direction: column;
}
.patient_stories_first_section_stat_content strong {
color: #283833;
font-size: 23px;
font-weight: 700;
line-height: 1.1;
}
.patient_stories_first_section_stat_content span {
margin-top: 6px;
color: #4a5652;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
}
/* =========================================================
DIVIDER
========================================================= */
.patient_stories_first_section_stat_divider {
width: 1px;
height: 62px;
background:
rgba(82, 104, 97, 0.16);
}
/* =========================================================
LEFT DECORATIVE CURVE
========================================================= */
.patient_stories_first_section_curve {
position: absolute;
z-index: 3;
left: -180px;
bottom: -135px;
width: 300px;
height: 590px;
border-radius: 50%;
/* background:
rgba(200, 212, 207, 0.58); */
transform: rotate(-12deg);
pointer-events: none;
}
.patient_stories_first_section_curve::after {
content: "";
position: absolute;
right: 40px;
top: 22px;
width: 165px;
height: 535px;
border-radius: 50%;
border-right:
1px solid rgba(126, 150, 141, 0.30);
}
/* =========================================================
RIGHT SIDE
========================================================= */
.patient_stories_first_section_right {
min-height: 645px;
position: relative;
overflow: hidden;
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.patient_stories_first_section_image_wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #e5e8e4;
}
/* =========================================================
IMAGE
========================================================= */
.patient_stories_first_section_image {
width: 100%;
height: 100%;
display: block;
position: absolute;
inset: 0;
/* object-fit: cover; */
object-position: center;
}
/* fade image to left */
.patient_stories_first_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
width: 180px;
/* background:
linear-gradient(90deg,
rgba(243, 246, 242, 0.93) 0%,
rgba(240, 244, 240, 0.60) 45%,
rgba(240, 244, 240, 0) 100%); */
pointer-events: none;
}
/* =========================================================
HANDWRITING
========================================================= */
.patient_stories_first_section_handwriting {
position: absolute;
z-index: 6;
right: 6%;
top: 15%;
width: 210px;
display: flex;
flex-direction: column;
/* color: rgba(48, 72, 66, 0.78); */
color: white;
font-family: "Caveat", cursive;
font-size: 39px;
font-weight: 500;
line-height: 0.95;
text-align: center;
transform: rotate(-7deg);
}
.patient_stories_first_section_handwriting>span:nth-child(1) {
transform: translateX(-17px);
}
.patient_stories_first_section_handwriting>span:nth-child(2) {
margin-top: 8px;
transform: translateX(8px);
}
.patient_stories_first_section_handwriting_middle {
margin-top: 12px;
transform: translateX(-15px);
}
.patient_stories_first_section_handwriting_last {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(18px);
}
.patient_stories_first_section_hearts {
margin-left: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.patient_stories_first_section_hearts i {
font-size: 25px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1700px) {
.patient_stories_first_section_row,
.patient_stories_first_section_left,
.patient_stories_first_section_right {
min-height: 680px;
}
.patient_stories_first_section_content {
padding-left: 120px;
}
.patient_stories_first_section_title {
font-size: 84px;
}
.patient_stories_first_section_description {
font-size: 22px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1500px) {
.patient_stories_first_section_row,
.patient_stories_first_section_left,
.patient_stories_first_section_right {
min-height: 580px;
}
.patient_stories_first_section_content {
padding-left: 55px;
padding-right: 35px;
}
.patient_stories_first_section_eyebrow {
font-size: 13px;
letter-spacing: 7px;
}
.patient_stories_first_section_title {
font-size: 60px;
}
.patient_stories_first_section_description {
margin-top: 25px;
font-size: 20px;
}
.patient_stories_first_section_stats {
margin-top: 42px;
}
.patient_stories_first_section_stat_icon {
width: 52px;
min-width: 52px;
height: 52px;
font-size: 44px;
}
.patient_stories_first_section_stat_content strong {
font-size: 22px;
}
.patient_stories_first_section_stat_content span {
font-size: 13px;
}
.patient_stories_first_section_handwriting {
font-size: 32px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.patient_stories_first_section_content {
padding-left: 45px;
padding-right: 25px;
}
.patient_stories_first_section_title {
font-size: 54px;
}
.patient_stories_first_section_description {
font-size: 15px;
}
.patient_stories_first_section_stats {
gap: 0;
}
.patient_stories_first_section_stat {
gap: 10px;
padding: 0 8px;
}
.patient_stories_first_section_stat_icon {
width: 43px;
min-width: 43px;
font-size: 36px;
}
.patient_stories_first_section_stat_content strong {
font-size: 18px;
}
.patient_stories_first_section_stat_content span {
font-size: 11px;
}
.patient_stories_first_section_handwriting {
right: 4%;
width: 160px;
font-size: 27px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.patient_stories_first_section_row {
min-height: auto;
}
.patient_stories_first_section_left {
min-height: auto;
padding: 65px 0 55px;
}
.patient_stories_first_section_content {
padding-left: 40px;
padding-right: 40px;
}
.patient_stories_first_section_title {
font-size: 64px;
}
.patient_stories_first_section_description {
max-width: 720px;
font-size: 17px;
}
.patient_stories_first_section_stats {
max-width: 700px;
}
.patient_stories_first_section_stat_content strong {
font-size: 23px;
}
.patient_stories_first_section_stat_content span {
font-size: 13px;
}
.patient_stories_first_section_right {
min-height: 560px;
}
.patient_stories_first_section_image_wrapper {
position: absolute;
}
.patient_stories_first_section_handwriting {
right: 7%;
top: 12%;
width: 190px;
font-size: 34px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.patient_stories_first_section_left {
padding: 50px 0 45px;
}
.patient_stories_first_section_content {
padding-left: 20px;
padding-right: 20px;
}
.patient_stories_first_section_eyebrow {
margin-bottom: 14px;
font-size: 10px;
letter-spacing: 4px;
}
.patient_stories_first_section_title {
font-size: 47px;
line-height: 1;
}
.patient_stories_first_section_description {
margin-top: 22px;
font-size: 14px;
line-height: 1.6;
}
/* stats vertical */
.patient_stories_first_section_stats {
margin-top: 35px;
grid-template-columns: 1fr;
gap: 0;
}
.patient_stories_first_section_stat {
min-height: 82px;
padding: 13px 0;
gap: 18px;
border-bottom:
1px solid rgba(82, 104, 97, 0.12);
}
.patient_stories_first_section_stat:last-child {
border-bottom: 0;
}
.patient_stories_first_section_stat_divider {
display: none;
}
.patient_stories_first_section_stat_icon {
width: 52px;
min-width: 52px;
height: 52px;
font-size: 42px;
}
.patient_stories_first_section_stat_content strong {
font-size: 22px;
}
.patient_stories_first_section_stat_content span {
font-size: 13px;
}
.patient_stories_first_section_right {
min-height: 430px;
}
.patient_stories_first_section_image {
object-position: 58% center;
}
.patient_stories_first_section_image_wrapper::before {
width: 80px;
}
.patient_stories_first_section_handwriting {
right: 18px;
top: 30px;
width: 145px;
padding: 10px;
font-size: 25px;
/* background:
rgba(247, 248, 245, 0.62); */
backdrop-filter: blur(3px);
border-radius: 12px;
}
.patient_stories_first_section_hearts i {
font-size: 18px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.patient_stories_first_section_title {
font-size: 40px;
}
.patient_stories_first_section_description {
font-size: 13px;
}
.patient_stories_first_section_right {
min-height: 370px;
}
.patient_stories_first_section_handwriting {
font-size: 22px;
}
}
/* =========================================================
PATIENT STORIES SECOND SECTION
========================================================= */
.patient_stories_second_section {
width: 100%;
position: relative;
padding: 0 0 45px;
background: #ffffff;
overflow: hidden;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.patient_stories_second_section_container {
width: 100%;
padding-left: 82px;
padding-right: 82px;
}
/* =========================================================
DOTS
========================================================= */
.patient_stories_second_section_dots {
height: 45px;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 24px;
}
.patient_stories_second_section_dots span {
width: 15px;
height: 15px;
display: block;
border: 2px solid #9aa5a1;
border-radius: 50%;
background: transparent;
}
.patient_stories_second_section_dots span.active {
border-color: #174e43;
background: #174e43;
}
/* =========================================================
HEADER
========================================================= */
.patient_stories_second_section_header {
width: 100%;
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 25px;
}
.patient_stories_second_section_heading {
min-width: 0;
}
/* eyebrow */
.patient_stories_second_section_eyebrow {
margin-bottom: 7px;
color: #506c65;
font-size: 15px;
font-weight: 600;
letter-spacing: 8px;
line-height: 1.3;
}
/* title */
.patient_stories_second_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 61px;
font-weight: 600;
line-height: 1;
letter-spacing: -1.8px;
}
/* subtitle */
.patient_stories_second_section_subtitle {
margin: 11px 0 0;
color: #4a5752;
font-size: 22px;
font-weight: 500;
line-height: 1.4;
}
/* =========================================================
VIEW MORE
========================================================= */
.patient_stories_second_section_view_more {
width: 265px;
height: 62px;
margin-top: 28px;
padding: 0 25px;
display: flex;
align-items: center;
justify-content: space-between;
color: #30443d;
border: 1.5px solid #879791;
border-radius: 13px;
background: #ffffff;
text-decoration: none;
font-size: 17px;
font-weight: 600;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.patient_stories_second_section_view_more i {
font-size: 23px;
transition: transform 0.3s ease;
}
.patient_stories_second_section_view_more:hover {
color: #ffffff;
background: #174e43;
border-color: #174e43;
}
.patient_stories_second_section_view_more:hover i {
transform: translateX(5px);
}
/* =========================================================
GRID
========================================================= */
.patient_stories_second_section_grid {
width: 100%;
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 40px;
}
/* =========================================================
CASE
========================================================= */
.patient_stories_second_section_case {
min-width: 0;
display: block;
color: inherit;
text-decoration: none;
transition: transform 0.3s ease;
}
.patient_stories_second_section_case:hover {
color: inherit;
transform: translateY(-4px);
}
/* =========================================================
BEFORE AFTER IMAGES
========================================================= */
.patient_stories_second_section_images {
width: 100%;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 5px;
}
.patient_stories_second_section_image {
position: relative;
width: 100%;
height: 213px;
overflow: hidden;
border-radius: 8px;
background: #ecece8;
}
.patient_stories_second_section_image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.patient_stories_second_section_case:hover .patient_stories_second_section_image img {
transform: scale(1.025);
}
/* =========================================================
LABELS
========================================================= */
.patient_stories_second_section_label {
position: absolute;
left: 14px;
bottom: 12px;
min-width: 95px;
height: 36px;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 19px;
color: #ffffff;
font-size: 16px;
font-weight: 600;
line-height: 1;
}
.patient_stories_second_section_label.before {
background: rgba(50, 48, 41, 0.90);
}
.patient_stories_second_section_label.after {
background: rgba(21, 79, 67, 0.95);
}
/* =========================================================
CASE TEXT
========================================================= */
.patient_stories_second_section_case_info {
padding-top: 17px;
text-align: center;
}
.patient_stories_second_section_case_info h3 {
margin: 0;
color: #1f2925;
font-size: 20px;
font-weight: 600;
line-height: 1.25;
}
.patient_stories_second_section_case_info p {
margin: 8px 0 0;
color: #5e6663;
font-size: 19px;
font-weight: 400;
line-height: 1.3;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1700px) {
.patient_stories_second_section_container {
padding-left: 90px;
padding-right: 90px;
}
.patient_stories_second_section_title {
font-size: 67px;
}
.patient_stories_second_section_image {
height: 225px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1500px) {
.patient_stories_second_section_container {
padding-left: 55px;
padding-right: 55px;
}
.patient_stories_second_section_title {
font-size: 52px;
}
.patient_stories_second_section_subtitle {
font-size: 18px;
}
.patient_stories_second_section_view_more {
width: 225px;
height: 56px;
font-size: 14px;
}
.patient_stories_second_section_grid {
gap: 25px;
}
.patient_stories_second_section_image {
height: 180px;
}
.patient_stories_second_section_case_info h3 {
font-size: 17px;
}
.patient_stories_second_section_case_info p {
font-size: 16px;
}
.patient_stories_second_section_label {
min-width: 78px;
height: 31px;
font-size: 13px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.patient_stories_second_section_container {
padding-left: 35px;
padding-right: 35px;
}
.patient_stories_second_section_header {
margin-bottom: 25px;
}
.patient_stories_second_section_eyebrow {
font-size: 12px;
letter-spacing: 6px;
}
.patient_stories_second_section_title {
font-size: 45px;
}
.patient_stories_second_section_grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 35px 28px;
}
.patient_stories_second_section_image {
height: 225px;
}
.patient_stories_second_section_case_info h3 {
font-size: 19px;
}
.patient_stories_second_section_case_info p {
font-size: 16px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.patient_stories_second_section {
padding-bottom: 40px;
}
.patient_stories_second_section_container {
padding-left: 25px;
padding-right: 25px;
}
.patient_stories_second_section_header {
flex-direction: column;
align-items: center;
text-align: center;
}
.patient_stories_second_section_view_more {
margin-top: 20px;
}
.patient_stories_second_section_title {
font-size: 43px;
}
.patient_stories_second_section_subtitle {
font-size: 16px;
}
.patient_stories_second_section_image {
height: 210px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.patient_stories_second_section_container {
padding-left: 16px;
padding-right: 16px;
}
.patient_stories_second_section_dots {
height: 35px;
gap: 18px;
}
.patient_stories_second_section_dots span {
width: 11px;
height: 11px;
}
.patient_stories_second_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.patient_stories_second_section_title {
font-size: 35px;
}
.patient_stories_second_section_subtitle {
margin-top: 8px;
font-size: 14px;
}
.patient_stories_second_section_view_more {
width: 200px;
height: 50px;
margin-top: 17px;
font-size: 13px;
}
.patient_stories_second_section_grid {
grid-template-columns: 1fr;
gap: 32px;
}
.patient_stories_second_section_case {
width: 100%;
max-width: 540px;
margin: auto;
}
.patient_stories_second_section_image {
height: 230px;
}
.patient_stories_second_section_case_info {
padding-top: 14px;
}
.patient_stories_second_section_case_info h3 {
font-size: 18px;
}
.patient_stories_second_section_case_info p {
margin-top: 5px;
font-size: 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.patient_stories_second_section_title {
font-size: 31px;
}
.patient_stories_second_section_image {
height: 180px;
}
.patient_stories_second_section_label {
left: 8px;
bottom: 8px;
min-width: 62px;
height: 27px;
padding: 0 9px;
font-size: 11px;
}
.patient_stories_second_section_case_info h3 {
font-size: 16px;
}
.patient_stories_second_section_case_info p {
font-size: 14px;
}
}
/* =========================================================
PATIENT STORIES THIRD SECTION
========================================================= */
.patient_stories_third_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 62px 0;
background:
linear-gradient(90deg,
#fafaf7 0%,
#ffffff 52%,
#f9f9f6 100%);
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.patient_stories_third_section_container {
width: 100%;
padding-left: 70px;
padding-right: 70px;
}
/* =========================================================
ROW
========================================================= */
.patient_stories_third_section_row {
align-items: center;
}
/* =========================================================
VIDEO COLUMN
========================================================= */
.patient_stories_third_section_video_col {
padding-right: 38px;
}
/* =========================================================
VIDEO BOX
========================================================= */
.patient_stories_third_section_video {
position: relative;
width: 100%;
height: 420px;
overflow: hidden;
border-radius: 15px;
background: #e7eae7;
}
/* IMAGE */
.patient_stories_third_section_video_image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.patient_stories_third_section_video:hover .patient_stories_third_section_video_image {
transform: scale(1.02);
}
/* soft overlay */
.patient_stories_third_section_video::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(90deg,
rgba(26, 61, 53, 0.07),
rgba(0, 0, 0, 0.02));
pointer-events: none;
}
/* =========================================================
PATIENT SPEAK
========================================================= */
.patient_stories_third_section_video_text {
position: absolute;
z-index: 5;
left: 42px;
top: 50px;
display: flex;
flex-direction: column;
color: #27483f;
font-family: "Caveat", cursive;
font-size: 46px;
font-weight: 500;
line-height: 0.88;
transform: rotate(-7deg);
}
.patient_stories_third_section_video_text span:nth-child(2) {
margin-top: 12px;
transform: translateX(28px);
}
/* =========================================================
PLAY BUTTON
========================================================= */
.patient_stories_third_section_play {
position: absolute;
z-index: 8;
left: 50%;
top: 53%;
transform: translate(-50%, -50%);
width: 92px;
height: 92px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: rgba(29, 38, 36, 0.88);
border:
2px solid rgba(255, 255, 255, 0.88);
border-radius: 50%;
font-size: 53px;
cursor: pointer;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.18);
transition:
transform 0.3s ease,
background 0.3s ease;
}
.patient_stories_third_section_play i {
margin-left: 6px;
}
.patient_stories_third_section_play:hover {
background: #174e43;
transform:
translate(-50%, -50%) scale(1.06);
}
/* =========================================================
DURATION
========================================================= */
.patient_stories_third_section_duration {
position: absolute;
z-index: 7;
right: 22px;
bottom: 20px;
min-width: 72px;
height: 40px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background:
rgba(18, 55, 49, 0.94);
border-radius: 7px;
font-size: 18px;
font-weight: 500;
}
/* =========================================================
RIGHT CONTENT COLUMN
========================================================= */
.patient_stories_third_section_content_col {
padding-left: 38px;
}
.patient_stories_third_section_content {
width: 100%;
position: relative;
padding-right: 235px;
}
/* =========================================================
EYEBROW
========================================================= */
.patient_stories_third_section_eyebrow {
margin-bottom: 14px;
color: #506d65;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 7px;
}
/* =========================================================
TITLE
========================================================= */
.patient_stories_third_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 59px;
font-weight: 600;
line-height: 1.03;
letter-spacing: -1.5px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.patient_stories_third_section_description {
max-width: 720px;
margin: 20px 0 0;
color: #495651;
font-size: 20px;
font-weight: 500;
line-height: 1.45;
}
/* =========================================================
QUOTE CARD
========================================================= */
.patient_stories_third_section_quote_card {
width: 100%;
max-width: 660px;
min-height: 160px;
position: relative;
margin-top: 34px;
padding:
28px 58px 22px;
background: #ffffff;
border-radius: 14px;
box-shadow:
0 8px 30px rgba(35, 57, 51, 0.06);
}
/* quote text */
.patient_stories_third_section_quote_card p {
margin: 0;
color: #35453f;
font-family: "Playfair Display", serif;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
}
/* quotation marks */
.patient_stories_third_section_quote_start,
.patient_stories_third_section_quote_end {
position: absolute;
color: #174e43;
font-family: Georgia, serif;
font-size: 48px;
font-weight: 700;
line-height: 1;
}
.patient_stories_third_section_quote_start {
left: 15px;
top: 21px;
}
.patient_stories_third_section_quote_end {
right: 27px;
bottom: 43px;
}
/* AUTHOR */
.patient_stories_third_section_author {
margin-top: 14px;
color: #273f38;
font-size: 17px;
font-weight: 700;
}
/* =========================================================
RIGHT HANDWRITING
========================================================= */
.patient_stories_third_section_handwriting {
position: absolute;
right: 0;
top: 6px;
width: 190px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(55, 78, 72, 0.77);
font-family: "Caveat", cursive;
font-size: 41px;
font-weight: 500;
line-height: 0.92;
text-align: center;
transform: rotate(-7deg);
}
.patient_stories_third_section_handwriting>span:nth-child(1) {
transform: translateX(-16px);
}
.patient_stories_third_section_handwriting>span:nth-child(2) {
margin-top: 7px;
}
.patient_stories_third_section_handwriting>span:nth-child(3) {
margin-top: 8px;
transform: translateX(8px);
}
.patient_stories_third_section_handwriting_last {
margin-top: 10px;
display: flex;
align-items: center;
transform: translateX(18px);
}
.patient_stories_third_section_handwriting_last i {
margin-left: 8px;
font-size: 27px;
}
/* =========================================================
CONTROLS
========================================================= */
.patient_stories_third_section_controls {
position: absolute;
right: 18px;
bottom: 0;
display: flex;
align-items: center;
gap: 22px;
}
/* buttons */
.patient_stories_third_section_control {
width: 57px;
height: 57px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #294940;
background: transparent;
border: 1.5px solid #899993;
border-radius: 50%;
font-size: 29px;
cursor: pointer;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.patient_stories_third_section_control:hover {
color: #ffffff;
background: #174e43;
border-color: #174e43;
transform: scale(1.05);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1700px) {
.patient_stories_third_section_container {
padding-left: 85px;
padding-right: 85px;
}
.patient_stories_third_section_video {
height: 455px;
}
.patient_stories_third_section_title {
font-size: 64px;
}
.patient_stories_third_section_description {
font-size: 21px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1500px) {
.patient_stories_third_section {
padding: 50px 0;
}
.patient_stories_third_section_container {
padding-left: 50px;
padding-right: 50px;
}
.patient_stories_third_section_video_col {
padding-right: 28px;
}
.patient_stories_third_section_content_col {
padding-left: 28px;
}
.patient_stories_third_section_video {
height: 370px;
}
.patient_stories_third_section_content {
padding-right: 190px;
}
.patient_stories_third_section_title {
font-size: 49px;
}
.patient_stories_third_section_description {
font-size: 22px;
}
.patient_stories_third_section_quote_card p {
font-size: 19px;
}
.patient_stories_third_section_handwriting {
width: 155px;
font-size: 34px;
}
.patient_stories_third_section_control {
width: 48px;
height: 48px;
font-size: 24px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.patient_stories_third_section_container {
padding-left: 30px;
padding-right: 30px;
}
.patient_stories_third_section_video {
height: 340px;
}
.patient_stories_third_section_content {
padding-right: 0;
}
.patient_stories_third_section_title {
font-size: 42px;
}
.patient_stories_third_section_description {
font-size: 15px;
}
.patient_stories_third_section_quote_card {
padding:
25px 45px 22px;
}
.patient_stories_third_section_quote_card p {
font-size: 15px;
}
.patient_stories_third_section_handwriting {
display: none;
}
.patient_stories_third_section_controls {
position: relative;
right: auto;
bottom: auto;
margin-top: 24px;
justify-content: flex-end;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.patient_stories_third_section {
padding: 40px 0;
}
.patient_stories_third_section_container {
padding-left: 25px;
padding-right: 25px;
}
.patient_stories_third_section_video_col {
padding-right: 0;
padding-bottom: 35px;
}
.patient_stories_third_section_content_col {
padding-left: 0;
}
.patient_stories_third_section_video {
width: 100%;
max-width: 850px;
height: 470px;
margin: auto;
}
.patient_stories_third_section_content {
max-width: 850px;
margin: auto;
}
.patient_stories_third_section_title {
font-size: 48px;
}
.patient_stories_third_section_description {
max-width: 700px;
font-size: 17px;
}
.patient_stories_third_section_quote_card {
max-width: 100%;
}
.patient_stories_third_section_quote_card p {
font-size: 17px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.patient_stories_third_section {
padding: 32px 0;
}
.patient_stories_third_section_container {
padding-left: 16px;
padding-right: 16px;
}
.patient_stories_third_section_video {
height: 330px;
border-radius: 12px;
}
.patient_stories_third_section_video_text {
left: 20px;
top: 30px;
font-size: 31px;
}
.patient_stories_third_section_play {
width: 72px;
height: 72px;
font-size: 40px;
}
.patient_stories_third_section_duration {
right: 12px;
bottom: 12px;
min-width: 58px;
height: 34px;
font-size: 14px;
}
.patient_stories_third_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.patient_stories_third_section_title {
font-size: 37px;
}
.patient_stories_third_section_description {
margin-top: 15px;
font-size: 14px;
line-height: 1.55;
}
.patient_stories_third_section_quote_card {
min-height: auto;
margin-top: 25px;
padding:
25px 38px 24px;
}
.patient_stories_third_section_quote_card p {
font-size: 15px;
}
.patient_stories_third_section_author {
font-size: 14px;
}
.patient_stories_third_section_quote_start {
left: 14px;
}
.patient_stories_third_section_quote_end {
right: 14px;
}
.patient_stories_third_section_controls {
margin-top: 25px;
justify-content: center;
}
.patient_stories_third_section_control {
width: 46px;
height: 46px;
font-size: 22px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.patient_stories_third_section_video {
height: 280px;
}
.patient_stories_third_section_video_text {
font-size: 27px;
}
.patient_stories_third_section_title {
font-size: 33px;
}
.patient_stories_third_section_quote_card p {
font-size: 14px;
}
}
/* =========================================================
PATIENT STORIES FOURTH SECTION
========================================================= */
.patient_stories_fourth_section {
width: 100%;
position: relative;
overflow: hidden;
background:
linear-gradient(90deg,
#184b42 0%,
#1c5046 55%,
#1d5147 100%) !important;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.patient_stories_fourth_section_container {
width: 100%;
position: relative;
z-index: 3;
padding-left: 360px;
padding-right: 80px;
}
/* =========================================================
ROW
========================================================= */
.patient_stories_fourth_section_row {
min-height: 180px;
align-items: center;
}
/* =========================================================
CONTENT
========================================================= */
.patient_stories_fourth_section_content_col {
display: flex;
align-items: center;
}
.patient_stories_fourth_section_content {
width: 100%;
padding-right: 30px;
}
/* =========================================================
EYEBROW
========================================================= */
.patient_stories_fourth_section_eyebrow {
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.74);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 7px;
}
/* =========================================================
TITLE
========================================================= */
.patient_stories_fourth_section_title {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 48px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -1px;
}
/* =========================================================
BUTTON COLUMN
========================================================= */
.patient_stories_fourth_section_button_col {
display: flex;
align-items: center;
justify-content: flex-end;
}
.patient_stories_fourth_section_button_wrap {
width: 100%;
display: flex;
justify-content: flex-end;
}
/* =========================================================
APPOINTMENT BUTTON
========================================================= */
.patient_stories_fourth_section_button {
width: 385px;
height: 78px;
padding:
0 12px 0 25px;
display: flex;
align-items: center;
gap: 20px;
background: #ffffff;
color: #27463f;
border-radius: 19px;
text-decoration: none;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.08);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.patient_stories_fourth_section_button:hover {
color: #27463f;
transform: translateY(-3px);
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.14);
}
/* =========================================================
CALENDAR
========================================================= */
.patient_stories_fourth_section_calendar {
width: 39px;
height: 39px;
display: flex;
align-items: center;
justify-content: center;
color: #244b42;
font-size: 29px;
}
/* =========================================================
BUTTON TEXT
========================================================= */
.patient_stories_fourth_section_button_text {
flex: 1;
color: #29463f;
font-size: 18px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
ROUND ARROW
========================================================= */
.patient_stories_fourth_section_arrow {
width: 52px;
min-width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #185246;
color: #ffffff;
font-size: 22px;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.patient_stories_fourth_section_button:hover .patient_stories_fourth_section_arrow {
transform: translateX(3px);
background: #103e35;
}
/* =========================================================
LEFT LEAF DECORATION
========================================================= */
.patient_stories_fourth_section_leaf {
position: absolute;
z-index: 1;
left: -90px;
top: -45px;
width: 370px;
height: 270px;
opacity: 0.18;
transform: rotate(-8deg);
}
/* main leaf */
.patient_stories_fourth_section_leaf::before {
content: "";
position: absolute;
left: 40px;
top: 8px;
width: 210px;
height: 290px;
border:
2px solid rgba(218, 227, 216, 0.70);
border-radius:
100% 0 100% 0;
transform:
rotate(-38deg) skewX(-4deg);
}
/* center leaf vein */
.patient_stories_fourth_section_leaf::after {
content: "";
position: absolute;
left: 100px;
top: 13px;
width: 2px;
height: 285px;
background:
rgba(218, 227, 216, 0.65);
transform:
rotate(-38deg);
transform-origin: top center;
}
/* =========================================================
EXTRA LEAF LINES
========================================================= */
.patient_stories_fourth_section {
background-image:
linear-gradient(90deg,
rgba(255, 255, 255, 0.015),
rgba(255, 255, 255, 0));
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1700px) {
.patient_stories_fourth_section_container {
padding-left: 390px;
padding-right: 95px;
}
.patient_stories_fourth_section_row {
min-height: 195px;
}
.patient_stories_fourth_section_title {
font-size: 45px;
}
.patient_stories_fourth_section_button {
width: 410px;
height: 82px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1500px) {
.patient_stories_fourth_section_container {
padding-left: 300px;
padding-right: 60px;
}
.patient_stories_fourth_section_row {
min-height: 165px;
}
.patient_stories_fourth_section_eyebrow {
font-size: 11px;
letter-spacing: 6px;
}
.patient_stories_fourth_section_title {
font-size: 42px;
}
.patient_stories_fourth_section_button {
width: 330px;
height: 70px;
gap: 16px;
}
.patient_stories_fourth_section_calendar {
font-size: 25px;
}
.patient_stories_fourth_section_button_text {
font-size: 16px;
}
.patient_stories_fourth_section_arrow {
width: 46px;
min-width: 46px;
height: 46px;
font-size: 19px;
}
.patient_stories_fourth_section_leaf {
left: -110px;
transform:
scale(0.9) rotate(-8deg);
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.patient_stories_fourth_section_container {
padding-left: 180px;
padding-right: 35px;
}
.patient_stories_fourth_section_title {
font-size: 35px;
}
.patient_stories_fourth_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.patient_stories_fourth_section_button {
width: 290px;
height: 62px;
padding-left: 18px;
gap: 12px;
border-radius: 16px;
}
.patient_stories_fourth_section_button_text {
font-size: 14px;
}
.patient_stories_fourth_section_calendar {
width: 31px;
height: 31px;
font-size: 22px;
}
.patient_stories_fourth_section_arrow {
width: 40px;
min-width: 40px;
height: 40px;
font-size: 17px;
}
.patient_stories_fourth_section_leaf {
left: -155px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.patient_stories_fourth_section {
padding: 40px 0;
}
.patient_stories_fourth_section_container {
padding-left: 40px;
padding-right: 40px;
}
.patient_stories_fourth_section_row {
min-height: auto;
}
.patient_stories_fourth_section_content {
text-align: center;
padding-right: 0;
}
.patient_stories_fourth_section_title {
font-size: 42px;
}
.patient_stories_fourth_section_button_col {
padding-top: 28px;
justify-content: center;
}
.patient_stories_fourth_section_button_wrap {
justify-content: center;
}
.patient_stories_fourth_section_button {
width: 340px;
}
.patient_stories_fourth_section_leaf {
left: -130px;
opacity: 0.10;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.patient_stories_fourth_section {
padding:
38px 0;
}
.patient_stories_fourth_section_container {
padding-left: 18px;
padding-right: 18px;
}
.patient_stories_fourth_section_eyebrow {
margin-bottom: 12px;
font-size: 8px;
line-height: 1.5;
letter-spacing: 3px;
}
.patient_stories_fourth_section_title {
max-width: 520px;
margin-left: auto;
margin-right: auto;
font-size: 34px;
line-height: 1.15;
}
.patient_stories_fourth_section_button_col {
padding-top: 25px;
}
.patient_stories_fourth_section_button {
width: 100%;
max-width: 330px;
height: 62px;
padding:
0 10px 0 17px;
gap: 12px;
}
.patient_stories_fourth_section_button_text {
font-size: 14px;
}
.patient_stories_fourth_section_arrow {
width: 40px;
min-width: 40px;
height: 40px;
}
.patient_stories_fourth_section_leaf {
left: -190px;
opacity: 0.08;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.patient_stories_fourth_section_title {
font-size: 30px;
}
.patient_stories_fourth_section_button {
max-width: 300px;
}
.patient_stories_fourth_section_button_text {
font-size: 13px;
}
}
/* =========================================================
CONTACT FIRST SECTION
========================================================= */
.contact_first_section {
width: 100%;
position: relative;
overflow: hidden;
background: #f5f6f3;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.contact_first_section_container {
width: 100%;
padding: 0;
}
.contact_first_section_row {
min-height: 440px;
}
/* =========================================================
LEFT AREA
========================================================= */
.contact_first_section_left {
position: relative;
min-height: 440px;
display: flex;
align-items: center;
overflow: hidden;
z-index: 4;
background:
linear-gradient(90deg,
#f4f6f3 0%,
#f7f8f5 78%,
#f2f5f2 100%);
}
/* =========================================================
LEFT CONTENT
========================================================= */
.contact_first_section_content {
width: 100%;
position: relative;
z-index: 5;
padding:
35px 35px 35px 95px;
}
/* =========================================================
EYEBROW
========================================================= */
.contact_first_section_eyebrow {
margin-bottom: 15px;
color: #516d65;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 8px;
}
/* =========================================================
TITLE
========================================================= */
.contact_first_section_title {
margin: 0;
color: #103f37;
font-family: "Playfair Display", serif;
font-size: 64px;
font-weight: 600;
line-height: 1.02;
letter-spacing: -1.8px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.contact_first_section_description {
max-width: 610px;
margin: 20px 0 0;
color: #3e4d48;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
/* =========================================================
FEATURES
========================================================= */
.contact_first_section_features {
width: 100%;
max-width: 620px;
margin-top: 38px;
display: grid;
grid-template-columns:
1fr 1px 1fr 1px 1.15fr;
align-items: center;
}
/* =========================================================
FEATURE
========================================================= */
.contact_first_section_feature {
display: flex;
align-items: center;
gap: 15px;
padding: 0 18px;
}
.contact_first_section_feature:first-child {
padding-left: 0;
}
/* =========================================================
FEATURE ICON
========================================================= */
.contact_first_section_feature_icon {
width: 55px;
min-width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
color: #294f47;
font-size: 45px;
line-height: 1;
}
/* =========================================================
FEATURE TEXT
========================================================= */
.contact_first_section_feature_text {
display: flex;
flex-direction: column;
color: #33423d;
}
.contact_first_section_feature_text strong {
font-size: 15px;
font-weight: 700;
line-height: 1.25;
}
.contact_first_section_feature_text span {
margin-top: 2px;
font-size: 15px;
font-weight: 500;
line-height: 1.25;
}
/* =========================================================
DIVIDER
========================================================= */
.contact_first_section_feature_divider {
width: 1px;
height: 55px;
background:
rgba(87, 107, 100, 0.15);
}
/* =========================================================
LEFT DECORATIVE CURVE
========================================================= */
.contact_first_section_curve {
position: absolute;
z-index: 2;
left: -165px;
bottom: -145px;
width: 275px;
height: 520px;
border-radius: 50%;
background:
rgba(201, 213, 208, 0.58);
transform: rotate(-12deg);
pointer-events: none;
}
.contact_first_section_curve::after {
content: "";
position: absolute;
right: 38px;
top: 18px;
width: 150px;
height: 475px;
border-radius: 50%;
border-right:
1px solid rgba(128, 150, 143, 0.27);
}
/* =========================================================
RIGHT AREA
========================================================= */
.contact_first_section_right {
position: relative;
min-height: 440px;
overflow: hidden;
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.contact_first_section_image_wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #e5e8e4;
}
/* =========================================================
IMAGE
========================================================= */
.contact_first_section_image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
LEFT IMAGE FADE
========================================================= */
.contact_first_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
width: 150px;
background:
linear-gradient(90deg,
rgba(243, 246, 242, 0.92) 0%,
rgba(241, 244, 240, 0.60) 45%,
rgba(241, 244, 240, 0) 100%);
pointer-events: none;
}
/* =========================================================
HANDWRITTEN TEXT
========================================================= */
.contact_first_section_handwriting {
position: absolute;
z-index: 5;
right: 7%;
top: 23%;
width: 165px;
display: flex;
flex-direction: column;
align-items: center;
/* color: rgba(46, 72, 65, 0.78); */
color: white;
font-family: "Caveat", cursive;
font-size: 34px;
font-weight: 500;
line-height: 0.95;
text-align: center;
transform: rotate(-7deg);
}
.contact_first_section_handwriting>span:nth-child(1) {
transform: translateX(-12px);
}
.contact_first_section_handwriting>span:nth-child(2) {
margin-top: 7px;
transform: translateX(2px);
}
.contact_first_section_handwriting>span:nth-child(3) {
margin-top: 7px;
transform: translateX(8px);
}
.contact_first_section_handwriting_last {
margin-top: 7px;
display: flex;
align-items: center;
transform: translateX(15px);
}
.contact_first_section_handwriting_last i {
margin-left: 8px;
font-size: 25px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.contact_first_section_row,
.contact_first_section_left,
.contact_first_section_right {
min-height: 470px;
}
.contact_first_section_content {
padding-left: 105px;
}
.contact_first_section_title {
font-size: 69px;
}
.contact_first_section_description {
font-size: 19px;
}
.contact_first_section_feature_text strong,
.contact_first_section_feature_text span {
font-size: 16px;
}
.contact_first_section_handwriting {
font-size: 37px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1399.98px) {
.contact_first_section_row,
.contact_first_section_left,
.contact_first_section_right {
min-height: 410px;
}
.contact_first_section_content {
padding-left: 65px;
padding-right: 25px;
}
.contact_first_section_eyebrow {
font-size: 12px;
letter-spacing: 6px;
}
.contact_first_section_title {
font-size: 55px;
}
.contact_first_section_description {
font-size: 15px;
}
.contact_first_section_features {
margin-top: 30px;
}
.contact_first_section_feature {
gap: 11px;
padding: 0 12px;
}
.contact_first_section_feature_icon {
width: 46px;
min-width: 46px;
height: 46px;
font-size: 38px;
}
.contact_first_section_feature_text strong,
.contact_first_section_feature_text span {
font-size: 12px;
}
.contact_first_section_handwriting {
font-size: 29px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.contact_first_section_content {
padding-left: 42px;
padding-right: 20px;
}
.contact_first_section_title {
font-size: 47px;
}
.contact_first_section_description {
font-size: 14px;
}
.contact_first_section_features {
max-width: 520px;
}
.contact_first_section_feature {
padding: 0 8px;
}
.contact_first_section_feature_icon {
width: 40px;
min-width: 40px;
font-size: 33px;
}
.contact_first_section_feature_text strong,
.contact_first_section_feature_text span {
font-size: 11px;
}
.contact_first_section_handwriting {
right: 5%;
font-size: 26px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.contact_first_section_row {
min-height: auto;
}
.contact_first_section_left {
min-height: auto;
padding: 60px 0 50px;
}
.contact_first_section_content {
padding-left: 40px;
padding-right: 40px;
}
.contact_first_section_title {
font-size: 60px;
}
.contact_first_section_description {
font-size: 16px;
}
.contact_first_section_features {
max-width: 680px;
}
.contact_first_section_feature_icon {
width: 50px;
min-width: 50px;
font-size: 40px;
}
.contact_first_section_feature_text strong,
.contact_first_section_feature_text span {
font-size: 13px;
}
.contact_first_section_right {
min-height: 520px;
}
.contact_first_section_handwriting {
right: 8%;
top: 18%;
font-size: 34px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.contact_first_section_left {
padding: 48px 0 42px;
}
.contact_first_section_content {
padding-left: 20px;
padding-right: 20px;
}
.contact_first_section_eyebrow {
margin-bottom: 12px;
font-size: 9px;
letter-spacing: 4px;
}
.contact_first_section_title {
font-size: 44px;
line-height: 1.05;
}
.contact_first_section_description {
margin-top: 20px;
font-size: 14px;
line-height: 1.55;
}
.contact_first_section_description br {
display: none;
}
/* Features vertical */
.contact_first_section_features {
margin-top: 32px;
grid-template-columns: 1fr;
}
.contact_first_section_feature {
min-height: 75px;
padding: 12px 0;
gap: 17px;
border-bottom:
1px solid rgba(87, 107, 100, 0.12);
}
.contact_first_section_feature:last-child {
border-bottom: 0;
}
.contact_first_section_feature_divider {
display: none;
}
.contact_first_section_feature_icon {
width: 48px;
min-width: 48px;
height: 48px;
font-size: 39px;
}
.contact_first_section_feature_text strong,
.contact_first_section_feature_text span {
font-size: 13px;
}
.contact_first_section_right {
min-height: 420px;
}
.contact_first_section_image {
object-position: 60% center;
}
.contact_first_section_image_wrapper::before {
width: 70px;
}
.contact_first_section_handwriting {
right: 18px;
top: 30px;
width: 135px;
padding: 10px;
font-size: 25px;
/* background:
rgba(247, 248, 245, 0.62); */
backdrop-filter: blur(3px);
border-radius: 12px;
color: white;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.contact_first_section_title {
font-size: 38px;
}
.contact_first_section_description {
font-size: 13px;
}
.contact_first_section_right {
min-height: 360px;
}
.contact_first_section_handwriting {
font-size: 22px;
}
}
/* =========================================================
CONTACT SECOND SECTION
========================================================= */
.contact_second_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 35px 0;
background: #f8f8f5;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.contact_second_section_container {
width: 100%;
padding-left: 42px;
padding-right: 42px;
}
/* =========================================================
LEFT SIDE
========================================================= */
.contact_second_section_left {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
/* =========================================================
MAP
========================================================= */
.contact_second_section_map {
width: 100%;
height: 330px;
position: relative;
overflow: hidden;
border-radius: 14px;
background: #e7ebe7;
}
.contact_second_section_map>img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
MAP LOCATION CARD
========================================================= */
.contact_second_section_map_location {
position: absolute;
left: 48%;
top: 35%;
transform: translate(-50%, -50%);
min-width: 245px;
padding: 12px 18px;
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.08);
}
.contact_second_section_map_pin {
color: #d94436;
font-size: 32px;
}
.contact_second_section_map_location div {
display: flex;
flex-direction: column;
}
.contact_second_section_map_location strong {
color: #253632;
font-size: 16px;
font-weight: 700;
}
.contact_second_section_map_location span {
color: #4d5955;
font-size: 13px;
}
/* =========================================================
DIRECTIONS
========================================================= */
.contact_second_section_direction {
position: absolute;
left: 20px;
bottom: 18px;
min-width: 180px;
height: 48px;
padding: 0 17px;
display: flex;
align-items: center;
gap: 12px;
color: #30463f;
background: #ffffff;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
box-shadow:
0 5px 18px rgba(0, 0, 0, 0.07);
transition:
background 0.3s ease,
color 0.3s ease;
}
.contact_second_section_direction i {
color: #174e43;
font-size: 20px;
}
.contact_second_section_direction:hover {
color: #ffffff;
background: #174e43;
}
.contact_second_section_direction:hover i {
color: #ffffff;
}
/* =========================================================
CLINIC IMAGE
========================================================= */
.contact_second_section_clinic {
width: 90%;
height: 380px;
position: relative;
overflow: hidden;
border-radius: 14px;
background: #e5e8e4;
}
.contact_second_section_clinic>img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
CLINIC OVERLAY CARD
========================================================= */
.contact_second_section_clinic_card {
position: absolute;
left: 14px;
bottom: 14px;
min-width: 310px;
padding: 17px 20px;
display: flex;
align-items: center;
gap: 15px;
color: #ffffff;
background:
linear-gradient(90deg,
rgba(20, 75, 64, 0.97),
rgba(30, 93, 79, 0.95));
border-radius: 12px;
box-shadow:
0 7px 20px rgba(20, 64, 55, 0.16);
}
.contact_second_section_clinic_icon {
width: 58px;
min-width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border:
1.5px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
font-size: 33px;
}
.contact_second_section_clinic_text {
display: flex;
flex-direction: column;
}
.contact_second_section_clinic_text strong {
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
}
.contact_second_section_clinic_text span {
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
/* =========================================================
RIGHT SIDE
========================================================= */
.contact_second_section_right {
width: 100%;
}
/* =========================================================
FORM AREA
========================================================= */
.contact_second_section_form_area {
width: 100%;
padding: 14px 0 0;
}
/* =========================================================
EYEBROW
========================================================= */
.contact_second_section_eyebrow {
margin-bottom: 7px;
color: #536f67;
font-size: 11px;
font-weight: 600;
letter-spacing: 6px;
}
/* =========================================================
TITLE
========================================================= */
.contact_second_section_title {
margin: 0 0 20px;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 39px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.8px;
}
/* =========================================================
INPUT
========================================================= */
.contact_second_section_input {
height: 48px;
padding:
0 15px;
color: #35423e;
background: #ffffff;
border: 1px solid #ecece8;
border-radius: 5px;
font-size: 13px;
box-shadow: none !important;
}
.contact_second_section_input:focus {
border-color: #78958d;
background: #ffffff;
}
/* =========================================================
MESSAGE
========================================================= */
.contact_second_section_message {
height: 120px;
padding: 14px 15px;
resize: none;
color: #35423e;
border: 1px solid #ecece8;
border-radius: 5px;
background: #ffffff;
font-size: 13px;
box-shadow: none !important;
}
.contact_second_section_message:focus {
border-color: #78958d;
}
/* =========================================================
SUBMIT
========================================================= */
.contact_second_section_submit {
width: 100%;
height: 52px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: #ffffff;
background:
linear-gradient(90deg,
#174e43,
#205d50);
border: 0;
border-radius: 7px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.contact_second_section_submit i {
position: absolute;
right: 32%;
font-size: 20px;
transition: transform 0.3s ease;
}
.contact_second_section_submit:hover {
background: #123f37;
transform: translateY(-2px);
}
.contact_second_section_submit:hover i {
transform: translateX(4px);
}
/* =========================================================
TOOTH VISUAL
========================================================= */
.contact_second_section_visual {
width: 100%;
height: 435px;
position: relative;
overflow: hidden;
border-radius: 13px;
background: #e5e9e4;
}
.contact_second_section_visual>img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
HANDWRITING
========================================================= */
.contact_second_section_visual_text {
position: absolute;
left: 50%;
top: 42px;
transform:
translateX(-50%) rotate(-7deg);
width: 150px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, 0.92);
font-family: "Caveat", cursive;
font-size: 31px;
font-weight: 500;
line-height: 0.95;
text-align: center;
text-shadow:
0 2px 7px rgba(0, 0, 0, 0.12);
}
.contact_second_section_visual_text span:nth-child(2) {
margin-top: 5px;
}
.contact_second_section_visual_text span:nth-child(3) {
margin-top: 6px;
}
.contact_second_section_visual_text i {
margin-top: 8px;
font-size: 25px;
transform: translateX(40px);
}
/* =========================================================
BOTTOM AREA
========================================================= */
.contact_second_section_bottom {
margin-top: 16px;
}
/* =========================================================
INFO CARD
========================================================= */
.contact_second_section_info_card {
min-height: 265px;
padding: 18px 20px;
background: #ffffff;
border-radius: 8px;
box-shadow:
0 5px 20px rgba(38, 60, 53, 0.025);
}
/* =========================================================
INFO HEADING
========================================================= */
.contact_second_section_info_heading {
display: flex;
align-items: center;
gap: 15px;
color: #3a4742;
margin-bottom: 16px;
}
.contact_second_section_info_heading i {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border:
1.5px solid #294f47;
border-radius: 50%;
color: #294f47;
font-size: 18px;
}
.contact_second_section_info_heading span {
font-size: 11px;
font-weight: 600;
letter-spacing: 5px;
}
/* =========================================================
HOURS
========================================================= */
.contact_second_section_hours_list {
width: 100%;
}
.contact_second_section_hours_list>div {
min-height: 29px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom:
1px solid #eeeeea;
}
.contact_second_section_hours_list>div:last-child {
border-bottom: 0;
}
.contact_second_section_hours_list span {
color: #4c5753;
font-size: 12px;
font-weight: 500;
}
.contact_second_section_hours_list strong {
color: #52605b;
font-size: 12px;
font-weight: 500;
}
/* =========================================================
CONNECT
========================================================= */
.contact_second_section_connect_text {
margin:
0 0 15px 47px;
color: #4b5853;
font-size: 12px;
font-weight: 500;
line-height: 1.45;
}
/* =========================================================
SOCIAL ICONS
========================================================= */
.contact_second_section_socials {
margin-left: 47px;
display: flex;
align-items: center;
gap: 20px;
}
.contact_second_section_socials a {
width: 27px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
color: #174e43;
font-size: 23px;
text-decoration: none;
transition:
transform 0.25s ease,
color 0.25s ease;
}
.contact_second_section_socials a:hover {
color: #2c6d60;
transform: translateY(-2px);
}
/* =========================================================
QUOTE
========================================================= */
.contact_second_section_quote {
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-height: 100px;
padding:
22px 45px;
display: flex;
align-items: center;
gap: 16px;
border-top:
1px solid #eeeeea;
}
.contact_second_section_connect {
position: relative;
padding-bottom: 105px;
}
.contact_second_section_quote_mark {
color: #174e43;
font-family: Georgia, serif;
font-size: 42px;
font-weight: 700;
line-height: 1;
}
.contact_second_section_quote p {
margin: 0;
flex: 1;
color: #495650;
font-family: "Playfair Display", serif;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
}
.contact_second_section_quote>i {
color: #708983;
font-size: 33px;
}
/* =========================================================
1600+
========================================================= */
@media (min-width: 1600px) {
.contact_second_section_container {
padding-left: 55px;
padding-right: 55px;
}
.contact_second_section_map {
height: 350px;
}
.contact_second_section_clinic {
height: 400px;
}
.contact_second_section_title {
font-size: 43px;
}
.contact_second_section_visual {
height: 455px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
.contact_second_section_container {
padding-left: 25px;
padding-right: 25px;
}
.contact_second_section_map {
height: 295px;
}
.contact_second_section_clinic {
height: 350px;
}
.contact_second_section_map_location {
min-width: 210px;
padding: 10px 14px;
}
.contact_second_section_title {
font-size: 34px;
}
.contact_second_section_visual {
height: 410px;
}
.contact_second_section_visual_text {
font-size: 27px;
}
.contact_second_section_info_card {
min-height: 245px;
padding:
16px 15px;
}
.contact_second_section_hours_list span,
.contact_second_section_hours_list strong {
font-size: 10px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.contact_second_section {
padding: 30px 0;
}
.contact_second_section_container {
padding-left: 22px;
padding-right: 22px;
}
.contact_second_section_left {
margin-bottom: 30px;
}
.contact_second_section_map {
height: 420px;
}
.contact_second_section_clinic {
height: 480px;
}
.contact_second_section_title {
font-size: 42px;
}
.contact_second_section_visual {
height: 435px;
}
.contact_second_section_info_card {
min-height: 275px;
}
.contact_second_section_hours_list span,
.contact_second_section_hours_list strong {
font-size: 12px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.contact_second_section {
padding: 20px 0;
}
.contact_second_section_container {
padding-left: 15px;
padding-right: 15px;
}
/* map */
.contact_second_section_map {
height: 320px;
}
.contact_second_section_map_location {
left: 50%;
top: 42%;
min-width: 205px;
}
.contact_second_section_direction {
left: 12px;
bottom: 12px;
min-width: 160px;
height: 44px;
font-size: 12px;
}
/* clinic */
.contact_second_section_clinic {
height: 360px;
}
.contact_second_section_clinic_card {
left: 10px;
right: 10px;
bottom: 10px;
min-width: 0;
padding: 13px 15px;
}
.contact_second_section_clinic_icon {
width: 48px;
min-width: 48px;
height: 48px;
font-size: 27px;
}
/* form */
.contact_second_section_form_area {
padding-top: 10px;
}
.contact_second_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.contact_second_section_title {
font-size: 35px;
margin-bottom: 18px;
}
.contact_second_section_input {
height: 50px;
}
.contact_second_section_message {
height: 130px;
}
/* visual */
.contact_second_section_visual {
height: 380px;
margin-top: 5px;
}
.contact_second_section_visual_text {
top: 35px;
font-size: 30px;
}
/* info cards */
.contact_second_section_bottom {
margin-top: 14px;
}
.contact_second_section_info_card {
min-height: auto;
padding: 20px;
}
.contact_second_section_hours_list>div {
min-height: 34px;
}
.contact_second_section_hours_list span,
.contact_second_section_hours_list strong {
font-size: 12px;
}
.contact_second_section_connect {
min-height: 260px;
padding-bottom: 110px;
}
.contact_second_section_connect_text,
.contact_second_section_socials {
margin-left: 0;
}
.contact_second_section_quote {
padding:
20px 22px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.contact_second_section_map {
height: 280px;
}
.contact_second_section_clinic {
height: 320px;
}
.contact_second_section_title {
font-size: 31px;
}
.contact_second_section_visual {
height: 330px;
}
.contact_second_section_info_heading span {
font-size: 9px;
letter-spacing: 3px;
}
.contact_second_section_hours_list span,
.contact_second_section_hours_list strong {
font-size: 10px;
}
}
/* =========================================================
CONTACT THIRD SECTION
========================================================= */
.contact_third_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 45px 0 55px;
background:
linear-gradient(180deg,
#fbfaf7 0%,
#f8f8f5 100%);
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.contact_third_section_container {
width: 100%;
padding-left: 65px;
padding-right: 65px;
}
/* =========================================================
HEADER
========================================================= */
.contact_third_section_header {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 35px;
margin-bottom: 25px;
}
/* =========================================================
EYEBROW
========================================================= */
.contact_third_section_eyebrow {
margin-bottom: 8px;
color: #536f67;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 7px;
}
/* =========================================================
TITLE
========================================================= */
.contact_third_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 45px;
font-weight: 600;
line-height: 0.95;
letter-spacing: -1px;
}
/* =========================================================
VIEW ALL
========================================================= */
.contact_third_section_view_all {
width: 170px;
height: 46px;
margin-top: 12px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
color: #344a43;
background: transparent;
border: 1px solid #8a9994;
border-radius: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition:
color 0.3s ease,
background 0.3s ease,
border-color 0.3s ease;
}
.contact_third_section_view_all i {
font-size: 16px;
transition: transform 0.3s ease;
}
.contact_third_section_view_all:hover {
color: #ffffff;
background: #174e43;
border-color: #174e43;
}
.contact_third_section_view_all:hover i {
transform: translateX(4px);
}
/* =========================================================
FAQ ROW
========================================================= */
.contact_third_section_faq_row {
margin-top: 0;
}
/* =========================================================
FAQ ITEM
========================================================= */
.contact_third_section_faq {
width: 100%;
margin-bottom: 10px;
overflow: hidden;
background: #ffffff;
border-radius: 6px;
box-shadow:
0 4px 15px rgba(36, 57, 51, 0.025);
}
/* =========================================================
QUESTION
========================================================= */
.contact_third_section_question {
width: 100%;
min-height: 52px;
padding:
0 20px 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
color: #394842;
background: #ffffff;
border: 0;
text-align: left;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition:
color 0.3s ease,
background 0.3s ease;
}
.contact_third_section_question:hover {
color: #174e43;
background: #fafbf9;
}
/* =========================================================
PLUS / MINUS
========================================================= */
.contact_third_section_plus {
width: 28px;
min-width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #314a43;
font-size: 25px;
font-weight: 400;
line-height: 1;
transition:
transform 0.3s ease,
color 0.3s ease;
}
.contact_third_section_faq.active .contact_third_section_plus {
color: #174e43;
transform: rotate(180deg);
}
/* =========================================================
ANSWER
========================================================= */
.contact_third_section_answer {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 0.35s ease,
opacity 0.3s ease;
}
.contact_third_section_answer_inner {
overflow: hidden;
padding:
0 55px 0 18px;
color: #69736f;
font-size: 15px;
font-weight: 400;
line-height: 1.65;
transition:
padding 0.35s ease;
}
/* OPEN */
.contact_third_section_faq.active .contact_third_section_answer {
grid-template-rows: 1fr;
opacity: 1;
}
.contact_third_section_faq.active .contact_third_section_answer_inner {
padding:
2px 55px 18px 18px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.contact_third_section_container {
padding-left: 80px;
padding-right: 80px;
}
.contact_third_section_title {
font-size: 49px;
}
.contact_third_section_question {
min-height: 58px;
font-size: 15px;
}
.contact_third_section_answer_inner {
font-size: 14px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1399.98px) {
.contact_third_section_container {
padding-left: 45px;
padding-right: 45px;
}
.contact_third_section_title {
font-size: 40px;
}
.contact_third_section_eyebrow {
font-size: 10px;
letter-spacing: 6px;
}
.contact_third_section_question {
min-height: 50px;
font-size: 13px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.contact_third_section {
padding: 40px 0;
}
.contact_third_section_container {
padding-left: 25px;
padding-right: 25px;
}
.contact_third_section_header {
align-items: center;
}
.contact_third_section_title {
font-size: 40px;
}
.contact_third_section_question {
min-height: 56px;
font-size: 14px;
}
.contact_third_section_faq {
margin-bottom: 12px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.contact_third_section {
padding: 35px 0;
}
.contact_third_section_container {
padding-left: 16px;
padding-right: 16px;
}
.contact_third_section_header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.contact_third_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.contact_third_section_title {
font-size: 35px;
line-height: 1.05;
}
.contact_third_section_view_all {
margin-top: 0;
width: 160px;
}
.contact_third_section_question {
min-height: 58px;
padding-left: 15px;
padding-right: 12px;
font-size: 13px;
line-height: 1.4;
}
.contact_third_section_answer_inner {
padding-left: 15px;
padding-right: 42px;
font-size: 13px;
}
.contact_third_section_faq.active .contact_third_section_answer_inner {
padding:
2px 42px 17px 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.contact_third_section_title {
font-size: 31px;
}
.contact_third_section_question {
font-size: 12px;
}
}
/* invisialing stylings */
/* =========================================================
INVISALIGN FIRST SECTION
========================================================= */
.invisalign_first_section {
width: 100%;
position: relative;
overflow: hidden;
background: #f4f6f3;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.invisalign_first_section_container {
width: 100%;
padding: 0;
}
.invisalign_first_section_row {
min-height: 625px;
}
/* =========================================================
LEFT
========================================================= */
.invisalign_first_section_left {
position: relative;
min-height: 625px;
display: flex;
align-items: center;
overflow: hidden;
z-index: 5;
background:
linear-gradient(90deg,
#f4f6f3 0%,
#f7f8f5 78%,
#f2f5f2 100%);
}
/* =========================================================
CONTENT
========================================================= */
.invisalign_first_section_content {
width: 100%;
position: relative;
z-index: 4;
padding:
30px 40px 30px 105px;
}
/* =========================================================
BREADCRUMB
========================================================= */
.invisalign_first_section_breadcrumb {
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 12px;
color: #53605b;
font-size: 15px;
font-weight: 500;
}
.invisalign_first_section_breadcrumb a {
color: #53605b;
text-decoration: none;
transition: color 0.25s ease;
}
.invisalign_first_section_breadcrumb a:hover {
color: #174e43;
}
.invisalign_first_section_breadcrumb i {
color: #78837f;
font-size: 12px;
}
.invisalign_first_section_breadcrumb span {
color: #40514b;
}
/* =========================================================
EYEBROW
========================================================= */
.invisalign_first_section_eyebrow {
margin-bottom: 15px;
color: #526f67;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 8px;
}
/* =========================================================
TITLE
========================================================= */
.invisalign_first_section_title {
margin: 0;
color: #103f37;
font-family: "Playfair Display", serif;
font-size: 49px;
font-weight: 600;
line-height: 1;
letter-spacing: -2px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.invisalign_first_section_description {
max-width: 660px;
margin: 22px 0 0;
color: #3d4c47;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
}
/* =========================================================
BENEFITS
========================================================= */
.invisalign_first_section_benefits {
width: 100%;
max-width: 690px;
margin-top: 34px;
display: grid;
grid-template-columns:
1fr 1px 1fr 1px 1.25fr;
align-items: center;
}
/* =========================================================
BENEFIT
========================================================= */
.invisalign_first_section_benefit {
display: flex;
align-items: center;
gap: 16px;
padding: 0 20px;
}
.invisalign_first_section_benefit:first-child {
padding-left: 0;
}
/* ICON */
.invisalign_first_section_benefit_icon {
width: 55px;
min-width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
color: #294f47;
font-size: 45px;
}
/* TEXT */
.invisalign_first_section_benefit_text {
display: flex;
flex-direction: column;
}
.invisalign_first_section_benefit_text strong,
.invisalign_first_section_benefit_text span {
color: #34433e;
font-size: 15px;
line-height: 1.35;
}
.invisalign_first_section_benefit_text strong {
font-weight: 700;
}
.invisalign_first_section_benefit_text span {
font-weight: 500;
}
/* DIVIDER */
.invisalign_first_section_benefit_divider {
width: 1px;
height: 65px;
background:
rgba(87, 107, 100, 0.17);
}
/* =========================================================
ACTIONS
========================================================= */
.invisalign_first_section_actions {
margin-top: 38px;
display: flex;
align-items: center;
gap: 55px;
}
/* =========================================================
BOOK BUTTON
========================================================= */
.invisalign_first_section_book {
width: 355px;
height: 80px;
padding: 0 35px;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
background:
linear-gradient(90deg,
#174e43,
#205e51);
border-radius: 13px;
text-decoration: none;
font-size: 18px;
font-weight: 600;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.invisalign_first_section_book i {
font-size: 24px;
transition: transform 0.3s ease;
}
.invisalign_first_section_book:hover {
color: #ffffff;
background: #123f37;
transform: translateY(-2px);
}
.invisalign_first_section_book:hover i {
transform: translateX(5px);
}
/* =========================================================
VIDEO BUTTON
========================================================= */
.invisalign_first_section_video_btn {
padding: 0;
text-decoration: none;
display: flex;
align-items: center;
gap: 17px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
/* PLAY */
.invisalign_first_section_play {
width: 74px;
min-width: 74px;
height: 74px;
display: flex;
align-items: center;
justify-content: center;
border:
1.5px solid #526c65;
border-radius: 50%;
color: #174e43;
font-size: 38px;
transition:
background 0.3s ease,
color 0.3s ease;
}
.invisalign_first_section_play i {
margin-left: 5px;
}
.invisalign_first_section_video_btn:hover .invisalign_first_section_play {
color: #ffffff;
background: #174e43;
}
/* VIDEO TEXT */
.invisalign_first_section_video_text {
display: flex;
flex-direction: column;
}
.invisalign_first_section_video_text strong {
color: #354740;
font-size: 17px;
font-weight: 700;
}
.invisalign_first_section_video_text small {
margin-top: 4px;
color: #65706c;
font-size: 13px;
font-weight: 500;
}
/* =========================================================
LEFT CURVE
========================================================= */
.invisalign_first_section_curve {
position: absolute;
z-index: 2;
left: -175px;
bottom: -150px;
width: 295px;
height: 560px;
border-radius: 50%;
/* background:
rgba(200, 212, 207, 0.56); */
transform: rotate(-12deg);
}
.invisalign_first_section_curve::after {
content: "";
position: absolute;
right: 40px;
top: 22px;
width: 160px;
height: 510px;
border-radius: 50%;
border-right:
1px solid rgba(130, 151, 144, 0.28);
}
/* =========================================================
RIGHT AREA
========================================================= */
.invisalign_first_section_right {
position: relative;
min-height: 625px;
overflow: hidden;
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.invisalign_first_section_image_wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #e6e9e5;
}
/* IMAGE */
.invisalign_first_section_image {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
display: block;
object-fit: cover;
object-position: center;
}
/* LEFT FADE */
.invisalign_first_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
width: 170px;
background:
linear-gradient(90deg,
rgba(243, 246, 242, 0.94) 0%,
rgba(240, 244, 240, 0.57) 45%,
rgba(240, 244, 240, 0) 100%);
pointer-events: none;
}
/* =========================================================
LEFT HANDWRITING
========================================================= */
.invisalign_first_section_handwriting_one {
position: absolute;
z-index: 5;
left: 5%;
top: 14%;
width: 175px;
display: flex;
flex-direction: column;
align-items: center;
/* color: rgba(48, 74, 67, 0.79); */
color: white;
font-family: "Caveat", cursive;
font-size: 36px;
font-weight: 500;
line-height: 0.95;
text-align: center;
transform: rotate(-7deg);
}
.invisalign_first_section_handwriting_one>span:nth-child(1) {
transform: translateX(-15px);
}
.invisalign_first_section_handwriting_one>span:nth-child(2) {
margin-top: 7px;
}
.invisalign_first_section_handwriting_one>span:nth-child(3) {
margin-top: 7px;
transform: translateX(8px);
}
.invisalign_first_section_handwriting_one>div {
margin-top: 7px;
display: flex;
align-items: center;
transform: translateX(18px);
}
.invisalign_first_section_handwriting_one i {
margin-left: 8px;
font-size: 26px;
}
/* =========================================================
RIGHT HANDWRITING
========================================================= */
.invisalign_first_section_handwriting_two {
position: absolute;
z-index: 5;
right: 4%;
top: 14%;
width: 150px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, 0.84);
font-family: "Caveat", cursive;
font-size: 35px;
font-weight: 500;
line-height: 0.94;
text-align: center;
transform: rotate(-7deg);
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.12);
}
.invisalign_first_section_handwriting_two span:nth-child(2) {
margin-top: 6px;
}
.invisalign_first_section_handwriting_two span:nth-child(3) {
margin-top: 7px;
}
.invisalign_first_section_handwriting_two i {
margin-top: 15px;
font-size: 31px;
transform: translateX(30px);
}
/* =========================================================
GREEN QUOTE CARD
========================================================= */
.invisalign_first_section_quote_card {
position: absolute;
z-index: 6;
right: 0;
bottom: 0;
width: 315px;
min-height: 240px;
padding:
45px 40px 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background:
linear-gradient(145deg,
rgba(15, 73, 61, 0.94),
rgba(11, 83, 65, 0.94));
border-radius:
28px 0 0 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 29px;
font-weight: 500;
line-height: 1.35;
text-align: center;
backdrop-filter: blur(4px);
}
.invisalign_first_section_quote_line {
width: 65px;
height: 2px;
margin-top: 25px;
background:
rgba(255, 255, 255, 0.75);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1700px) {
.invisalign_first_section_row,
.invisalign_first_section_left,
.invisalign_first_section_right {
min-height: 660px;
}
.invisalign_first_section_content {
padding-left: 110px;
}
.invisalign_first_section_title {
font-size: 56px;
}
.invisalign_first_section_description {
font-size: 21px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1500px) {
.invisalign_first_section_row,
.invisalign_first_section_left,
.invisalign_first_section_right {
min-height: 560px;
}
.invisalign_first_section_content {
padding-left: 65px;
padding-right: 25px;
}
.invisalign_first_section_breadcrumb {
margin-bottom: 20px;
font-size: 13px;
}
.invisalign_first_section_eyebrow {
font-size: 12px;
letter-spacing: 6px;
}
.invisalign_first_section_title {
font-size: 44px;
}
.invisalign_first_section_description {
font-size: 16px;
}
.invisalign_first_section_benefits {
margin-top: 28px;
}
.invisalign_first_section_benefit {
gap: 11px;
padding: 0 13px;
}
.invisalign_first_section_benefit_icon {
width: 46px;
min-width: 46px;
height: 46px;
font-size: 37px;
}
.invisalign_first_section_benefit_text strong,
.invisalign_first_section_benefit_text span {
font-size: 12px;
}
.invisalign_first_section_actions {
margin-top: 30px;
gap: 35px;
}
.invisalign_first_section_book {
width: 285px;
height: 66px;
font-size: 15px;
}
.invisalign_first_section_play {
width: 60px;
min-width: 60px;
height: 60px;
font-size: 30px;
}
.invisalign_first_section_video_text strong {
font-size: 14px;
}
.invisalign_first_section_video_text small {
font-size: 11px;
}
.invisalign_first_section_handwriting_one,
.invisalign_first_section_handwriting_two {
font-size: 29px;
}
.invisalign_first_section_quote_card {
width: 265px;
min-height: 205px;
font-size: 24px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.invisalign_first_section_content {
padding-left: 42px;
padding-right: 20px;
}
.invisalign_first_section_title {
font-size: 38px;
}
.invisalign_first_section_description {
font-size: 14px;
}
.invisalign_first_section_benefit {
padding: 0 8px;
}
.invisalign_first_section_benefit_icon {
width: 40px;
min-width: 40px;
font-size: 32px;
}
.invisalign_first_section_benefit_text strong,
.invisalign_first_section_benefit_text span {
font-size: 10px;
}
.invisalign_first_section_actions {
gap: 20px;
}
.invisalign_first_section_book {
width: 245px;
padding: 0 20px;
font-size: 13px;
}
.invisalign_first_section_handwriting_one {
left: 3%;
font-size: 25px;
}
.invisalign_first_section_handwriting_two {
font-size: 25px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.invisalign_first_section_row {
min-height: auto;
}
.invisalign_first_section_left {
min-height: auto;
padding: 55px 0 50px;
}
.invisalign_first_section_content {
padding-left: 40px;
padding-right: 40px;
}
.invisalign_first_section_title {
font-size: 62px;
}
.invisalign_first_section_description {
max-width: 650px;
font-size: 17px;
}
.invisalign_first_section_benefits {
max-width: 680px;
}
.invisalign_first_section_benefit_icon {
width: 50px;
min-width: 50px;
font-size: 40px;
}
.invisalign_first_section_benefit_text strong,
.invisalign_first_section_benefit_text span {
font-size: 13px;
}
.invisalign_first_section_book {
width: 310px;
}
.invisalign_first_section_right {
min-height: 570px;
}
.invisalign_first_section_handwriting_one {
left: 7%;
top: 12%;
font-size: 32px;
}
.invisalign_first_section_handwriting_two {
right: 6%;
font-size: 31px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.invisalign_first_section_left {
padding: 40px 0;
}
.invisalign_first_section_content {
padding-left: 20px;
padding-right: 20px;
}
.invisalign_first_section_breadcrumb {
margin-bottom: 20px;
gap: 8px;
font-size: 11px;
}
.invisalign_first_section_eyebrow {
margin-bottom: 12px;
font-size: 9px;
letter-spacing: 4px;
}
.invisalign_first_section_title {
font-size: 44px;
line-height: 1.03;
}
.invisalign_first_section_description {
margin-top: 20px;
font-size: 14px;
}
/* benefits vertical */
.invisalign_first_section_benefits {
margin-top: 28px;
grid-template-columns: 1fr;
}
.invisalign_first_section_benefit {
min-height: 72px;
padding: 12px 0;
gap: 16px;
border-bottom:
1px solid rgba(87, 107, 100, 0.12);
}
.invisalign_first_section_benefit:last-child {
border-bottom: 0;
}
.invisalign_first_section_benefit_divider {
display: none;
}
.invisalign_first_section_benefit_icon {
width: 48px;
min-width: 48px;
height: 48px;
font-size: 38px;
}
.invisalign_first_section_benefit_text strong,
.invisalign_first_section_benefit_text span {
font-size: 13px;
}
/* actions */
.invisalign_first_section_actions {
margin-top: 27px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.invisalign_first_section_book {
width: 100%;
max-width: 330px;
height: 60px;
font-size: 14px;
}
.invisalign_first_section_play {
width: 55px;
min-width: 55px;
height: 55px;
font-size: 27px;
}
.invisalign_first_section_video_text strong {
font-size: 14px;
}
.invisalign_first_section_video_text small {
font-size: 11px;
}
/* image */
.invisalign_first_section_right {
min-height: 470px;
}
.invisalign_first_section_image {
object-position: 60% center;
}
.invisalign_first_section_image_wrapper::before {
width: 80px;
}
.invisalign_first_section_handwriting_one {
left: 18px;
top: 30px;
width: 130px;
padding: 9px;
font-size: 24px;
/* background:
rgba(247, 248, 245, 0.58); */
backdrop-filter: blur(3px);
border-radius: 10px;
}
.invisalign_first_section_handwriting_two {
right: 15px;
top: 28px;
width: 120px;
font-size: 23px;
}
.invisalign_first_section_quote_card {
width: 200px;
min-height: 150px;
padding: 25px 20px;
font-size: 19px;
/* border-radius:
20px 0 0 0; */
}
.invisalign_first_section_quote_line {
width: 45px;
margin-top: 16px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.invisalign_first_section_title {
font-size: 38px;
}
.invisalign_first_section_description {
font-size: 13px;
}
.invisalign_first_section_right {
min-height: 410px;
}
.invisalign_first_section_quote_card {
width: 175px;
min-height: 135px;
font-size: 17px;
}
}
/* =========================================================
INVISALIGN SECOND SECTION
========================================================= */
.invisalign_second_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 5px 0 18px;
background:
linear-gradient(90deg,
#fafaf7 0%,
#f8f8f5 48%,
#f7f8f5 100%);
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.invisalign_second_section_container {
width: 100%;
padding-left: 65px;
padding-right: 25px;
}
/* =========================================================
ROW
========================================================= */
.invisalign_second_section_row {
min-height: 320px;
align-items: center;
margin: 30px 0px;
}
/* =========================================================
LEFT
========================================================= */
.invisalign_second_section_left {
min-height: 320px;
display: flex;
align-items: center;
}
.invisalign_second_section_content {
width: 100%;
padding-right: 60px;
}
/* =========================================================
TITLE
========================================================= */
.invisalign_second_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 54px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -1.4px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.invisalign_second_section_description {
max-width: 880px;
margin: 14px 0 0;
color: #3e4d48;
font-size: 18px;
font-weight: 500;
line-height: 1.55;
}
/* =========================================================
BUTTON
========================================================= */
.invisalign_second_section_button {
width: 480px;
max-width: 100%;
height: 62px;
margin-top: 20px;
padding:
0 28px;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
background:
linear-gradient(90deg,
#174e43,
#205e51);
border-radius: 11px;
text-decoration: none;
font-size: 17px;
font-weight: 600;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.invisalign_second_section_button i {
font-size: 22px;
transition: transform 0.3s ease;
}
.invisalign_second_section_button:hover {
color: #ffffff;
background: #123f37;
transform: translateY(-2px);
}
.invisalign_second_section_button:hover i {
transform: translateX(5px);
}
/* =========================================================
RIGHT SIDE
========================================================= */
.invisalign_second_section_right {
min-height: 320px;
display: flex;
align-items: center;
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.invisalign_second_section_image_wrapper {
width: 100%;
height: 320px;
position: relative;
overflow: hidden;
border-radius: 0 16px 16px 0;
background: #e7e9e5;
}
/* =========================================================
IMAGE
========================================================= */
.invisalign_second_section_image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.invisalign_second_section_image_wrapper:hover .invisalign_second_section_image {
transform: scale(1.015);
}
/* =========================================================
SOFT LEFT FADE
========================================================= */
.invisalign_second_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
width: 120px;
background:
linear-gradient(90deg,
rgba(248, 249, 246, 0.88),
rgba(248, 249, 246, 0));
pointer-events: none;
}
/* =========================================================
HANDWRITING
========================================================= */
.invisalign_second_section_handwriting {
position: absolute;
z-index: 5;
left: 3%;
top: 28%;
width: 155px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(47, 72, 65, 0.78);
font-family: "Caveat", cursive;
font-size: 34px;
font-weight: 500;
line-height: 0.92;
text-align: center;
transform: rotate(-7deg);
}
.invisalign_second_section_handwriting>span:nth-child(1) {
transform: translateX(-8px);
}
.invisalign_second_section_handwriting>span:nth-child(2) {
margin-top: 7px;
transform: translateX(2px);
}
.invisalign_second_section_handwriting_last {
margin-top: 8px;
display: flex;
align-items: center;
transform: translateX(14px);
}
.invisalign_second_section_handwriting_last i {
margin-left: 8px;
font-size: 25px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.invisalign_second_section_container {
padding-left: 85px;
padding-right: 30px;
}
.invisalign_second_section_row,
.invisalign_second_section_left,
.invisalign_second_section_right {
min-height: 345px;
}
.invisalign_second_section_image_wrapper {
height: 340px;
}
.invisalign_second_section_title {
font-size: 59px;
}
.invisalign_second_section_description {
font-size: 19px;
}
.invisalign_second_section_button {
height: 65px;
font-size: 18px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1399.98px) {
.invisalign_second_section_container {
padding-left: 45px;
padding-right: 20px;
}
.invisalign_second_section_row,
.invisalign_second_section_left,
.invisalign_second_section_right {
min-height: 290px;
}
.invisalign_second_section_content {
padding-right: 40px;
}
.invisalign_second_section_title {
font-size: 46px;
}
.invisalign_second_section_description {
font-size: 15px;
}
.invisalign_second_section_button {
width: 420px;
height: 56px;
font-size: 14px;
}
.invisalign_second_section_image_wrapper {
height: 285px;
}
.invisalign_second_section_handwriting {
font-size: 29px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.invisalign_second_section_container {
padding-left: 30px;
padding-right: 20px;
}
.invisalign_second_section_content {
padding-right: 30px;
}
.invisalign_second_section_title {
font-size: 40px;
}
.invisalign_second_section_description {
font-size: 13px;
line-height: 1.55;
}
.invisalign_second_section_button {
width: 355px;
font-size: 12px;
}
.invisalign_second_section_handwriting {
left: 2%;
font-size: 25px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.invisalign_second_section {
padding: 35px 0;
}
.invisalign_second_section_container {
padding-left: 30px;
padding-right: 30px;
}
.invisalign_second_section_row {
min-height: auto;
}
.invisalign_second_section_left {
min-height: auto;
padding-bottom: 35px;
}
.invisalign_second_section_content {
padding-right: 0;
}
.invisalign_second_section_title {
font-size: 48px;
}
.invisalign_second_section_description {
max-width: 760px;
font-size: 16px;
}
.invisalign_second_section_button {
width: 420px;
height: 60px;
font-size: 15px;
}
.invisalign_second_section_right {
min-height: auto;
}
.invisalign_second_section_image_wrapper {
height: 420px;
border-radius: 15px;
}
.invisalign_second_section_handwriting {
left: 7%;
top: 20%;
font-size: 33px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.invisalign_second_section {
padding: 30px 0;
}
.invisalign_second_section_container {
padding-left: 16px;
padding-right: 16px;
}
.invisalign_second_section_left {
padding-bottom: 28px;
}
.invisalign_second_section_title {
font-size: 38px;
line-height: 1.08;
}
.invisalign_second_section_description {
margin-top: 15px;
font-size: 14px;
line-height: 1.6;
}
.invisalign_second_section_button {
width: 100%;
max-width: 360px;
height: 58px;
margin-top: 20px;
padding:
0 18px;
font-size: 13px;
}
.invisalign_second_section_image_wrapper {
height: 320px;
border-radius: 13px;
}
.invisalign_second_section_image {
object-position: 62% center;
}
.invisalign_second_section_image_wrapper::before {
width: 75px;
}
.invisalign_second_section_handwriting {
left: 16px;
top: 25px;
width: 125px;
padding: 9px;
font-size: 25px;
/* background:
rgba(247, 248, 245, 0.58); */
color:white;
backdrop-filter: blur(3px);
border-radius: 10px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.invisalign_second_section_title {
font-size: 34px;
}
.invisalign_second_section_description {
font-size: 13px;
}
.invisalign_second_section_button {
font-size: 12px;
}
.invisalign_second_section_image_wrapper {
height: 275px;
}
.invisalign_second_section_handwriting {
font-size: 22px;
}
}
/* =========================================================
INVISALIGN THIRD SECTION
========================================================= */
.invisalign_third_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 28px 0 32px;
background:
linear-gradient(180deg,
#fafaf7 0%,
#f8f8f5 100%);
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.invisalign_third_section_container {
width: 100%;
padding-left: 70px;
padding-right: 35px;
}
/* =========================================================
HEADER
========================================================= */
.invisalign_third_section_header {
margin-bottom: 20px;
}
/* EYEBROW */
.invisalign_third_section_eyebrow {
margin-bottom: 7px;
color: #526f67;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 7px;
}
/* TITLE */
.invisalign_third_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 47px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -1.2px;
}
/* =========================================================
BENEFITS GRID
========================================================= */
.invisalign_third_section_benefits {
width: 100%;
display: grid;
grid-template-columns:
repeat(6, minmax(0, 1fr));
gap: 15px;
}
/* =========================================================
BENEFIT CARD
========================================================= */
.invisalign_third_section_card {
min-height: 185px;
padding:
18px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* background:
linear-gradient(180deg,
#ffffff 0%,
#fbfbf8 100%); */
background:
linear-gradient(180deg,
#bce2cb 0%,
#fbfbf8 100%);
border:
1px solid rgba(83, 105, 98, 0.08);
border-radius: 8px;
box-shadow:
0 5px 18px rgba(38, 59, 53, 0.025);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
border:2px solid #174e43;
align-items:center;
}
.invisalign_third_section_card:hover {
transform: translateY(-4px);
box-shadow:
0 10px 25px rgba(30, 68, 59, 0.08);
}
/* =========================================================
ICON
========================================================= */
.invisalign_third_section_icon {
width: 76px;
height: 76px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(145deg,
#f0f2ee,
#f7f7f4);
color: #294f47;
font-size: 39px;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.invisalign_third_section_card:hover .invisalign_third_section_icon {
transform: scale(1.05);
background: #edf2ee;
}
/* =========================================================
CARD TEXT
========================================================= */
.invisalign_third_section_card_text {
color: #34433e;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
/* =========================================================
CTA CARD
========================================================= */
.invisalign_third_section_cta {
width: 100%;
min-height: 245px;
padding:
24px 28px;
display: flex;
flex-direction: column;
justify-content: center;
background:
linear-gradient(145deg,
#adf3ca,
#f7f8f5);
border-radius: 15px;
border: 2px solid #123f37;
}
/* CTA TITLE */
.invisalign_third_section_cta h3 {
margin: 0;
color: #183f37;
font-family: "Playfair Display", serif;
font-size: 29px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.5px;
}
/* LINE */
.invisalign_third_section_cta_line {
width: 66px;
height: 2px;
margin:
20px 0;
background: #42665d;
}
/* CTA TEXT */
.invisalign_third_section_cta p {
max-width: 310px;
margin: 0;
color: #52605b;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
}
/* =========================================================
CTA BUTTON
========================================================= */
.invisalign_third_section_cta_button {
width: 100%;
height: 52px;
margin-top: 20px;
padding:
0 18px;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
background:
linear-gradient(90deg,
#174e43,
#215d51);
border-radius: 8px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.invisalign_third_section_cta_button i {
font-size: 19px;
transition: transform 0.3s ease;
}
.invisalign_third_section_cta_button:hover {
color: #ffffff;
background: #123f37;
transform: translateY(-2px);
}
.invisalign_third_section_cta_button:hover i {
transform: translateX(4px);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.invisalign_third_section_container {
padding-left: 75px;
padding-right: 40px;
}
.invisalign_third_section_title {
font-size: 51px;
}
.invisalign_third_section_card {
min-height: 200px;
}
.invisalign_third_section_icon {
width: 82px;
height: 82px;
font-size: 42px;
}
.invisalign_third_section_card_text {
font-size: 15px;
}
.invisalign_third_section_cta {
min-height: 260px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1399.98px) {
.invisalign_third_section_container {
padding-left: 45px;
padding-right: 30px;
}
.invisalign_third_section_title {
font-size: 42px;
}
.invisalign_third_section_benefits {
gap: 10px;
}
.invisalign_third_section_card {
min-height: 175px;
padding:
15px 8px;
}
.invisalign_third_section_icon {
width: 65px;
height: 65px;
margin-bottom: 10px;
font-size: 34px;
}
.invisalign_third_section_card_text {
font-size: 12px;
}
.invisalign_third_section_cta {
min-height: 230px;
padding:
20px 22px;
}
.invisalign_third_section_cta h3 {
font-size: 25px;
}
.invisalign_third_section_cta p {
font-size: 12px;
}
.invisalign_third_section_cta_button {
font-size: 11px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.invisalign_third_section_container {
padding-left: 30px;
padding-right: 30px;
}
.invisalign_third_section_benefits {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 16px;
}
.invisalign_third_section_card {
min-height: 180px;
}
.invisalign_third_section_icon {
width: 72px;
height: 72px;
font-size: 37px;
}
.invisalign_third_section_card_text {
font-size: 13px;
}
.invisalign_third_section_cta {
height: 100%;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.invisalign_third_section {
padding: 35px 0;
}
.invisalign_third_section_container {
padding-left: 25px;
padding-right: 25px;
}
.invisalign_third_section_eyebrow {
font-size: 10px;
letter-spacing: 5px;
}
.invisalign_third_section_title {
font-size: 40px;
}
.invisalign_third_section_benefits {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.invisalign_third_section_cta {
min-height: 220px;
margin-top: 5px;
}
.invisalign_third_section_cta h3 {
font-size: 28px;
}
.invisalign_third_section_cta p {
font-size: 14px;
}
.invisalign_third_section_cta_button {
max-width: 400px;
font-size: 13px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.invisalign_third_section {
padding: 30px 0;
}
.invisalign_third_section_container {
padding-left: 16px;
padding-right: 16px;
}
.invisalign_third_section_header {
text-align: center;
margin-bottom: 22px;
}
.invisalign_third_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.invisalign_third_section_title {
font-size: 34px;
line-height: 1.1;
}
.invisalign_third_section_benefits {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
}
.invisalign_third_section_card {
min-height: 165px;
padding:
15px 8px;
}
.invisalign_third_section_icon {
width: 65px;
height: 65px;
font-size: 33px;
}
.invisalign_third_section_card_text {
font-size: 12px;
}
.invisalign_third_section_cta {
min-height: auto;
padding:
25px 22px;
margin-top: 5px;
}
.invisalign_third_section_cta h3 {
font-size: 27px;
}
.invisalign_third_section_cta_line {
margin:
16px 0;
}
.invisalign_third_section_cta p {
font-size: 13px;
}
.invisalign_third_section_cta_button {
max-width: 100%;
height: 50px;
font-size: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.invisalign_third_section_title {
font-size: 30px;
}
.invisalign_third_section_benefits {
grid-template-columns: 1fr;
}
.invisalign_third_section_card {
min-height: 140px;
flex-direction: row;
justify-content: flex-start;
gap: 18px;
padding:
16px 18px;
text-align: left;
}
.invisalign_third_section_icon {
width: 60px;
min-width: 60px;
height: 60px;
margin-bottom: 0;
font-size: 31px;
}
.invisalign_third_section_card_text {
font-size: 13px;
}
}
/* =========================================================
INVISALIGN FORTH SECTION
========================================================= */
.invisalign_forth_section {
width: 100%;
position: relative;
overflow: hidden;
background: #fbfaf7;
font-family: "DM Sans", sans-serif;
}
.invisalign_forth_section_container {
width: 100%;
padding: 0;
}
.invisalign_forth_section_row {
min-height: 325px;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.invisalign_forth_section_left {
min-height: 325px;
display: flex;
align-items: center;
}
.invisalign_forth_section_content {
width: 100%;
padding:
27px 30px 30px 65px;
}
.invisalign_forth_section_eyebrow {
margin-bottom: 5px;
color: #506d65;
font-size: 11px;
font-weight: 600;
letter-spacing: 7px;
}
.invisalign_forth_section_title {
margin: 0 0 30px;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 43px;
font-weight: 600;
line-height: 1.05;
}
/* =========================================================
STEPS
========================================================= */
.invisalign_forth_section_steps {
width: 100%;
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
.invisalign_forth_section_step {
min-height: 160px;
position: relative;
padding:
0 22px;
text-align: center;
}
.invisalign_forth_section_step:first-child {
padding-left: 0;
}
.invisalign_forth_section_step:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 3px;
bottom: 0;
width: 1px;
background:
rgba(75, 99, 91, 0.14);
}
/* =========================================================
STEP TOP
========================================================= */
.invisalign_forth_section_step_top {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
margin-bottom: 8px;
}
.invisalign_forth_section_icon {
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(145deg,
#edf2ef,
#f5f6f3);
color: #294f47;
font-size: 35px;
}
.invisalign_forth_section_number {
margin-top: 12px;
color: #293a35;
font-size: 16px;
font-weight: 700;
}
.invisalign_forth_section_step h3 {
margin: 0 0 5px;
color: #32413c;
font-size: 15px;
font-weight: 700;
}
.invisalign_forth_section_step p {
margin: 0;
color: #59645f;
font-size: 12px;
font-weight: 500;
line-height: 1.45;
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.invisalign_forth_section_right {
min-height: 325px;
}
.invisalign_forth_section_image_wrapper {
width: 100%;
height: 100%;
min-height: 325px;
position: relative;
overflow: hidden;
background: #e6e8e4;
}
.invisalign_forth_section_image {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
HAND WRITING
========================================================= */
.invisalign_forth_section_handwriting {
position: absolute;
z-index: 5;
right: 8%;
top: 17%;
width: 155px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, 0.90);
font-family: "Caveat", cursive;
font-size: 31px;
font-weight: 500;
line-height: 0.93;
text-align: center;
transform: rotate(-7deg);
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.12);
}
.invisalign_forth_section_handwriting span:nth-child(2),
.invisalign_forth_section_handwriting span:nth-child(3) {
margin-top: 6px;
}
.invisalign_forth_section_handwriting>div {
margin-top: 7px;
display: flex;
align-items: center;
}
.invisalign_forth_section_handwriting i {
margin-left: 8px;
font-size: 25px;
}
/* =========================================================
INVISALIGN FIFTH SECTION
========================================================= */
.invisalign_fifth_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 22px 0 28px;
background: #f8f8f5;
border-top:
1px solid rgba(70, 95, 87, 0.06);
font-family: "DM Sans", sans-serif;
}
.invisalign_fifth_section_container {
width: 100%;
padding-left: 62px;
padding-right: 55px;
}
/* =========================================================
LEFT INTRO
========================================================= */
.invisalign_fifth_section_intro {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.invisalign_fifth_section_eyebrow {
margin-bottom: 8px;
color: #526f67;
font-size: 11px;
font-weight: 600;
letter-spacing: 7px;
}
.invisalign_fifth_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 43px;
font-weight: 600;
line-height: 1;
letter-spacing: -1px;
}
.invisalign_fifth_section_description {
margin: 15px 0 0;
color: #52605b;
font-size: 14px;
font-weight: 500;
}
/* =========================================================
BUTTON
========================================================= */
.invisalign_fifth_section_button {
width: 100%;
max-width: 395px;
height: 53px;
margin-top: 17px;
padding:
0 22px;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
background:
linear-gradient(90deg,
#174e43,
#205d50);
border-radius: 8px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.invisalign_fifth_section_button i {
font-size: 19px;
transition: transform 0.3s ease;
}
.invisalign_fifth_section_button:hover {
color: #ffffff;
background: #123f37;
transform: translateY(-2px);
}
.invisalign_fifth_section_button:hover i {
transform: translateX(4px);
}
/* =========================================================
BEFORE AFTER WRAPPER
========================================================= */
.invisalign_fifth_section_before_after {
width: 100%;
height: 225px;
position: relative;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 3px;
overflow: visible;
background: #ffffff;
border-radius: 9px;
box-shadow:
0 5px 20px rgba(37, 60, 53, 0.035);
}
/* =========================================================
PHOTO
========================================================= */
.invisalign_fifth_section_photo {
width: 100%;
height: 225px;
position: relative;
overflow: hidden;
}
.invisalign_fifth_section_photo:first-child {
border-radius:
9px 0 0 9px;
}
.invisalign_fifth_section_photo:nth-child(3) {
border-radius:
0 9px 9px 0;
}
.invisalign_fifth_section_photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
BEFORE AFTER LABEL
========================================================= */
.invisalign_fifth_section_label {
position: absolute;
left: 15px;
bottom: 12px;
min-width: 90px;
height: 35px;
padding:
0 13px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
border-radius: 18px;
font-size: 14px;
font-weight: 600;
}
.invisalign_fifth_section_label.before {
background:
rgba(45, 42, 37, 0.92);
}
.invisalign_fifth_section_label.after {
background:
rgba(20, 80, 67, 0.95);
}
/* =========================================================
CENTER ARROW
========================================================= */
.invisalign_fifth_section_center_arrow {
position: absolute;
z-index: 6;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
color: #244a41;
background: #ffffff;
border-radius: 50%;
font-size: 28px;
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.08);
}
/* =========================================================
TESTIMONIAL
========================================================= */
.invisalign_fifth_section_testimonial {
width: 100%;
height: 225px;
position: relative;
padding:
34px 40px 30px 55px;
background: #ffffff;
border-radius: 8px;
box-shadow:
0 5px 20px rgba(37, 60, 53, 0.035);
border: 2px solid #215d51;
}
.invisalign_fifth_section_quote_mark {
position: absolute;
left: 24px;
top: 5px;
color: #174e43;
font-family: Georgia, serif;
font-size: 46px;
font-weight: 700;
}
.invisalign_fifth_section_quote {
margin: 0;
color: #45524d;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.invisalign_fifth_section_author {
margin-top: 11px;
color: #253c35;
font-size: 15px;
font-weight: 700;
text-align: center;
}
/* =========================================================
STARS
========================================================= */
.invisalign_fifth_section_stars {
margin-top: 8px;
display: flex;
justify-content: center;
gap: 6px;
color: #f8a918;
font-size: 19px;
}
/* =========================================================
CONTROLS
========================================================= */
.invisalign_fifth_section_controls {
position: absolute;
left: 17px;
right: 17px;
bottom: 23px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.invisalign_fifth_section_control {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
color: #355048;
background: #ffffff;
border:
1px solid #96a39f;
border-radius: 50%;
font-size: 19px;
cursor: pointer;
transition:
background 0.3s ease,
color 0.3s ease;
}
.invisalign_fifth_section_control:hover {
color: #ffffff;
background: #174e43;
border-color: #174e43;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.invisalign_forth_section_row,
.invisalign_forth_section_left,
.invisalign_forth_section_right,
.invisalign_forth_section_image_wrapper {
min-height: 345px;
}
.invisalign_forth_section_title {
font-size: 47px;
}
.invisalign_forth_section_step h3 {
font-size: 16px;
}
.invisalign_forth_section_step p {
font-size: 13px;
}
.invisalign_fifth_section_title {
font-size: 47px;
}
.invisalign_fifth_section_before_after,
.invisalign_fifth_section_photo,
.invisalign_fifth_section_testimonial {
height: 240px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1399.98px) {
.invisalign_forth_section_content {
padding-left: 45px;
}
.invisalign_forth_section_title {
font-size: 37px;
}
.invisalign_forth_section_icon {
width: 60px;
height: 60px;
font-size: 30px;
}
.invisalign_forth_section_number {
font-size: 14px;
}
.invisalign_forth_section_step h3 {
font-size: 13px;
}
.invisalign_forth_section_step p {
font-size: 10px;
}
.invisalign_forth_section_handwriting {
font-size: 27px;
}
/* fifth */
.invisalign_fifth_section_container {
padding-left: 40px;
padding-right: 40px;
}
.invisalign_fifth_section_title {
font-size: 37px;
}
.invisalign_fifth_section_description {
font-size: 12px;
}
.invisalign_fifth_section_button {
font-size: 11px;
}
.invisalign_fifth_section_quote {
font-size: 12px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
/* FORTH */
.invisalign_forth_section_left {
min-height: auto;
}
.invisalign_forth_section_content {
padding:
40px 30px;
}
.invisalign_forth_section_title {
font-size: 42px;
}
.invisalign_forth_section_steps {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 25px 0;
}
.invisalign_forth_section_step {
min-height: 170px;
}
.invisalign_forth_section_step:nth-child(2)::after {
display: none;
}
.invisalign_forth_section_step h3 {
font-size: 15px;
}
.invisalign_forth_section_step p {
font-size: 12px;
}
.invisalign_forth_section_right,
.invisalign_forth_section_image_wrapper {
min-height: 430px;
}
.invisalign_forth_section_handwriting {
font-size: 34px;
}
/* FIFTH */
.invisalign_fifth_section {
padding:
35px 0;
}
.invisalign_fifth_section_container {
padding-left: 25px;
padding-right: 25px;
}
.invisalign_fifth_section_intro {
padding-bottom: 10px;
}
.invisalign_fifth_section_title {
font-size: 40px;
}
.invisalign_fifth_section_description {
font-size: 14px;
}
.invisalign_fifth_section_before_after,
.invisalign_fifth_section_photo {
height: 280px;
}
.invisalign_fifth_section_testimonial {
height: 280px;
padding:
45px 45px;
}
.invisalign_fifth_section_quote {
font-size: 15px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
/* FORTH */
.invisalign_forth_section_content {
padding:
35px 16px;
}
.invisalign_forth_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.invisalign_forth_section_title {
font-size: 35px;
}
.invisalign_forth_section_steps {
grid-template-columns: 1fr;
gap: 0;
margin-top: 25px;
}
.invisalign_forth_section_step {
min-height: 120px;
padding:
18px 5px;
border-bottom:
1px solid rgba(75, 99, 91, 0.12);
}
.invisalign_forth_section_step:last-child {
border-bottom: 0;
}
.invisalign_forth_section_step::after {
display: none;
}
.invisalign_forth_section_step_top {
justify-content: flex-start;
}
.invisalign_forth_section_step h3,
.invisalign_forth_section_step p {
text-align: left;
}
.invisalign_forth_section_right,
.invisalign_forth_section_image_wrapper {
min-height: 320px;
}
.invisalign_forth_section_handwriting {
right: 20px;
top: 30px;
width: 130px;
padding: 9px;
font-size: 25px;
background:
rgba(40, 75, 66, 0.35);
backdrop-filter: blur(3px);
border-radius: 10px;
}
/* FIFTH */
.invisalign_fifth_section_container {
padding-left: 16px;
padding-right: 16px;
}
.invisalign_fifth_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.invisalign_fifth_section_title {
font-size: 34px;
}
.invisalign_fifth_section_button {
height: 52px;
font-size: 12px;
}
.invisalign_fifth_section_before_after {
height: 210px;
}
.invisalign_fifth_section_photo {
height: 210px;
}
.invisalign_fifth_section_label {
left: 8px;
bottom: 8px;
min-width: 65px;
height: 28px;
font-size: 11px;
}
.invisalign_fifth_section_center_arrow {
width: 45px;
height: 45px;
font-size: 22px;
}
.invisalign_fifth_section_testimonial {
height: auto;
min-height: 250px;
padding:
40px 40px 55px;
}
.invisalign_fifth_section_quote {
font-size: 14px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.invisalign_forth_section_title {
font-size: 31px;
}
.invisalign_forth_section_right,
.invisalign_forth_section_image_wrapper {
min-height: 275px;
}
.invisalign_fifth_section_title {
font-size: 30px;
}
.invisalign_fifth_section_before_after {
height: 175px;
}
.invisalign_fifth_section_photo {
height: 175px;
}
}
/* =========================================================
SERVICE PAGES - MOBILE WIDTH / STRETCH FIX
========================================================= */
@media (max-width: 767.98px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
main,
.invisalign_first_section,
.invisalign_second_section,
.invisalign_third_section,
.invisalign_forth_section,
.invisalign_fifth_section {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
.invisalign_first_section_container,
.invisalign_second_section_container,
.invisalign_third_section_container,
.invisalign_forth_section_container,
.invisalign_fifth_section_container,
.invisalign_first_section_row,
.invisalign_second_section_row,
.invisalign_forth_section_row {
width: 100%;
max-width: 100%;
min-width: 0;
margin-left: 0 !important;
margin-right: 0 !important;
}
.invisalign_first_section_left,
.invisalign_first_section_right,
.invisalign_second_section_left,
.invisalign_second_section_right,
.invisalign_forth_section_left,
.invisalign_forth_section_right,
.invisalign_first_section_content,
.invisalign_second_section_content,
.invisalign_forth_section_content {
width: 100%;
max-width: 100%;
min-width: 0;
}
.invisalign_first_section_title,
.invisalign_second_section_title,
.invisalign_third_section_title,
.invisalign_forth_section_title,
.invisalign_fifth_section_title,
.invisalign_third_section_cta h3 {
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal;
}
.invisalign_first_section_description,
.invisalign_second_section_description,
.invisalign_fifth_section_description,
.invisalign_first_section_video_text,
.invisalign_third_section_card_text,
.invisalign_forth_section_step,
.invisalign_fifth_section_testimonial {
min-width: 0;
max-width: 100%;
}
.invisalign_first_section_book,
.invisalign_second_section_button,
.invisalign_third_section_cta_button,
.invisalign_fifth_section_button {
max-width: 100%;
min-height: 52px;
height: auto;
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
}
}
/* =========================================================
APPOINTMENT FIRST SECTION
========================================================= */
.appointment_first_section {
width: 100%;
position: relative;
overflow: hidden;
background: #f5f6f3;
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.appointment_first_section_container {
width: 100%;
padding: 0;
}
.appointment_first_section_row {
min-height: 540px;
}
/* =========================================================
LEFT SIDE
========================================================= */
.appointment_first_section_left {
position: relative;
min-height: 540px;
display: flex;
align-items: center;
overflow: hidden;
z-index: 5;
background:
linear-gradient(90deg,
#f4f6f3 0%,
#f7f8f5 78%,
#f1f4f1 100%);
}
/* =========================================================
CONTENT
========================================================= */
.appointment_first_section_content {
width: 100%;
position: relative;
z-index: 4;
padding:
28px 35px 28px 115px;
}
/* =========================================================
BREADCRUMB
========================================================= */
.appointment_first_section_breadcrumb {
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 11px;
color: #4d5d57;
font-size: 15px;
font-weight: 500;
}
.appointment_first_section_breadcrumb a {
color: #4d5d57;
text-decoration: none;
transition: color 0.25s ease;
}
.appointment_first_section_breadcrumb a:hover {
color: #174e43;
}
.appointment_first_section_breadcrumb i {
color: #77827e;
font-size: 12px;
}
.appointment_first_section_breadcrumb span {
color: #3f514b;
}
/* =========================================================
TITLE
========================================================= */
.appointment_first_section_title {
margin: 0;
color: #103f37;
font-family: "Playfair Display", serif;
font-size: 72px;
font-weight: 600;
line-height: 0.96;
letter-spacing: -2px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.appointment_first_section_description {
max-width: 650px;
margin: 22px 0 0;
color: #3f4d48;
font-size: 19px;
font-weight: 500;
line-height: 1.48;
}
/* =========================================================
BENEFITS
========================================================= */
.appointment_first_section_benefits {
width: 100%;
max-width: 680px;
margin-top: 38px;
display: grid;
grid-template-columns:
1fr 1px 1fr 1px 1.15fr;
align-items: center;
}
/* =========================================================
BENEFIT
========================================================= */
.appointment_first_section_benefit {
display: flex;
align-items: center;
gap: 16px;
padding:
0 18px;
}
.appointment_first_section_benefit:first-child {
padding-left: 0;
}
/* =========================================================
ICON
========================================================= */
.appointment_first_section_benefit_icon {
width: 58px;
min-width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
color: #294f47;
font-size: 47px;
line-height: 1;
}
/* =========================================================
TEXT
========================================================= */
.appointment_first_section_benefit_text {
display: flex;
flex-direction: column;
}
.appointment_first_section_benefit_text strong,
.appointment_first_section_benefit_text span {
color: #34433e;
font-size: 15px;
line-height: 1.3;
}
.appointment_first_section_benefit_text strong {
font-weight: 700;
}
.appointment_first_section_benefit_text span {
font-weight: 500;
}
/* =========================================================
DIVIDER
========================================================= */
.appointment_first_section_divider {
width: 1px;
height: 60px;
background:
rgba(84, 104, 98, 0.15);
}
/* =========================================================
LEFT CURVE
========================================================= */
.appointment_first_section_curve {
position: absolute;
z-index: 2;
left: -175px;
bottom: -145px;
width: 295px;
height: 555px;
border-radius: 50%;
background:
rgba(199, 211, 206, 0.55);
transform: rotate(-12deg);
pointer-events: none;
}
.appointment_first_section_curve::after {
content: "";
position: absolute;
right: 40px;
top: 20px;
width: 160px;
height: 505px;
border-radius: 50%;
border-right:
1px solid rgba(126, 149, 141, 0.28);
}
/* =========================================================
RIGHT AREA
========================================================= */
.appointment_first_section_right {
position: relative;
min-height: 540px;
overflow: hidden;
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.appointment_first_section_image_wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #e5e8e4;
}
/* =========================================================
IMAGE
========================================================= */
.appointment_first_section_image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
LEFT IMAGE FADE
========================================================= */
.appointment_first_section_image_wrapper::before {
content: "";
position: absolute;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
width: 185px;
background:
linear-gradient(90deg,
rgba(244, 246, 243, 0.96) 0%,
rgba(242, 245, 241, 0.60) 48%,
rgba(242, 245, 241, 0) 100%);
pointer-events: none;
}
/* =========================================================
CENTER HANDWRITING
========================================================= */
.appointment_first_section_handwriting_one {
position: absolute;
z-index: 5;
left: 7%;
top: 17%;
width: 190px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(40, 84, 72, 0.82);
font-family: "Caveat", cursive;
font-size: 43px;
font-weight: 500;
line-height: 0.92;
text-align: center;
transform: rotate(-7deg);
}
.appointment_first_section_handwriting_one span:nth-child(2) {
margin-top: 9px;
transform: translateX(15px);
}
.appointment_first_section_handwriting_one>i {
margin-top: 18px;
font-size: 35px;
transform: translateX(55px);
}
/* =========================================================
RIGHT HANDWRITING
========================================================= */
.appointment_first_section_handwriting_two {
position: absolute;
z-index: 5;
right: 5%;
top: 12%;
width: 170px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, 0.86);
font-family: "Caveat", cursive;
font-size: 35px;
font-weight: 500;
line-height: 0.92;
text-align: center;
transform: rotate(-7deg);
text-shadow:
0 2px 7px rgba(0, 0, 0, 0.13);
}
.appointment_first_section_handwriting_two span:nth-child(2),
.appointment_first_section_handwriting_two span:nth-child(3) {
margin-top: 7px;
}
.appointment_first_section_handwriting_two>div {
margin-top: 8px;
display: flex;
align-items: center;
}
.appointment_first_section_handwriting_two>div i {
margin-left: 10px;
font-size: 28px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1700px) {
.appointment_first_section_row,
.appointment_first_section_left,
.appointment_first_section_right {
min-height: 575px;
}
.appointment_first_section_content {
padding-left: 120px;
}
.appointment_first_section_title {
font-size: 78px;
}
.appointment_first_section_description {
font-size: 20px;
}
.appointment_first_section_benefit_text strong,
.appointment_first_section_benefit_text span {
font-size: 16px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1500px) {
.appointment_first_section_row,
.appointment_first_section_left,
.appointment_first_section_right {
min-height: 490px;
}
.appointment_first_section_content {
padding-left: 70px;
padding-right: 25px;
}
.appointment_first_section_breadcrumb {
font-size: 13px;
}
.appointment_first_section_title {
font-size: 60px;
}
.appointment_first_section_description {
margin-top: 18px;
font-size: 16px;
}
.appointment_first_section_benefits {
margin-top: 30px;
}
.appointment_first_section_benefit {
padding:
0 12px;
gap: 12px;
}
.appointment_first_section_benefit_icon {
width: 48px;
min-width: 48px;
height: 48px;
font-size: 39px;
}
.appointment_first_section_benefit_text strong,
.appointment_first_section_benefit_text span {
font-size: 12px;
}
.appointment_first_section_handwriting_one {
font-size: 34px;
}
.appointment_first_section_handwriting_two {
font-size: 29px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
.appointment_first_section_content {
padding-left: 42px;
padding-right: 20px;
}
.appointment_first_section_title {
font-size: 50px;
}
.appointment_first_section_description {
font-size: 14px;
}
.appointment_first_section_benefit {
padding:
0 7px;
}
.appointment_first_section_benefit_icon {
width: 41px;
min-width: 41px;
font-size: 33px;
}
.appointment_first_section_benefit_text strong,
.appointment_first_section_benefit_text span {
font-size: 10px;
}
.appointment_first_section_handwriting_one {
left: 3%;
width: 145px;
font-size: 27px;
}
.appointment_first_section_handwriting_two {
right: 3%;
width: 135px;
font-size: 24px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.appointment_first_section_row {
min-height: auto;
}
.appointment_first_section_left {
min-height: auto;
padding:
55px 0 50px;
}
.appointment_first_section_content {
padding-left: 40px;
padding-right: 40px;
}
.appointment_first_section_title {
font-size: 63px;
}
.appointment_first_section_description {
font-size: 17px;
}
.appointment_first_section_benefits {
max-width: 680px;
}
.appointment_first_section_benefit_icon {
width: 50px;
min-width: 50px;
font-size: 41px;
}
.appointment_first_section_benefit_text strong,
.appointment_first_section_benefit_text span {
font-size: 13px;
}
.appointment_first_section_right {
min-height: 560px;
}
.appointment_first_section_handwriting_one {
left: 8%;
top: 13%;
font-size: 34px;
}
.appointment_first_section_handwriting_two {
right: 7%;
top: 13%;
font-size: 31px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.appointment_first_section_left {
padding:
42px 0;
}
.appointment_first_section_content {
padding-left: 20px;
padding-right: 20px;
}
.appointment_first_section_breadcrumb {
margin-bottom: 18px;
gap: 7px;
font-size: 11px;
}
.appointment_first_section_title {
font-size: 45px;
line-height: 1.02;
}
.appointment_first_section_description {
margin-top: 18px;
font-size: 14px;
line-height: 1.55;
}
.appointment_first_section_description br {
display: none;
}
/* benefits */
.appointment_first_section_benefits {
margin-top: 30px;
grid-template-columns: 1fr;
}
.appointment_first_section_benefit {
min-height: 75px;
padding:
12px 0;
gap: 16px;
border-bottom:
1px solid rgba(84, 104, 98, 0.12);
}
.appointment_first_section_benefit:last-child {
border-bottom: 0;
}
.appointment_first_section_divider {
display: none;
}
.appointment_first_section_benefit_icon {
width: 48px;
min-width: 48px;
height: 48px;
font-size: 39px;
}
.appointment_first_section_benefit_text strong,
.appointment_first_section_benefit_text span {
font-size: 13px;
}
/* image */
.appointment_first_section_right {
min-height: 440px;
}
.appointment_first_section_image {
object-position: 60% center;
}
.appointment_first_section_image_wrapper::before {
width: 80px;
}
.appointment_first_section_handwriting_one {
left: 18px;
top: 28px;
width: 130px;
padding: 9px;
font-size: 25px;
background:
rgba(247, 248, 245, 0.58);
backdrop-filter: blur(3px);
border-radius: 10px;
}
.appointment_first_section_handwriting_one>i {
font-size: 21px;
margin-top: 10px;
transform: translateX(35px);
}
.appointment_first_section_handwriting_two {
right: 15px;
top: 27px;
width: 125px;
padding: 8px;
font-size: 23px;
background:
rgba(27, 64, 54, 0.18);
backdrop-filter: blur(2px);
border-radius: 10px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.appointment_first_section_title {
font-size: 39px;
}
.appointment_first_section_description {
font-size: 13px;
}
.appointment_first_section_right {
min-height: 380px;
}
.appointment_first_section_handwriting_one,
.appointment_first_section_handwriting_two {
font-size: 21px;
}
}
/* =========================================================
APPOINTMENT SECOND SECTION
========================================================= */
.appointment_second_section {
width: 100%;
position: relative;
overflow: hidden;
padding: 30px 0 38px;
background:
linear-gradient(180deg,
#fafaf7 0%,
#f8f8f5 100%);
font-family: "DM Sans", sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.appointment_second_section_container {
width: 100%;
padding-left: 55px;
padding-right: 55px;
}
/* =========================================================
FORM CARD
========================================================= */
.appointment_second_section_form_card {
width: 100%;
height: 100%;
padding:
28px 34px 25px;
background: #ffffff;
border:
1px solid rgba(60, 86, 77, 0.04);
border-radius: 12px;
box-shadow:
0 6px 24px rgba(35, 57, 50, 0.035);
}
/* =========================================================
EYEBROW
========================================================= */
.appointment_second_section_eyebrow {
margin-bottom: 6px;
color: #526f67;
font-size: 11px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 7px;
}
/* =========================================================
TITLE
========================================================= */
.appointment_second_section_title {
margin: 0;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 43px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -1px;
}
/* =========================================================
SUBTITLE
========================================================= */
.appointment_second_section_subtitle {
margin:
7px 0 20px;
color: #6a7470;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}
/* =========================================================
INPUT
========================================================= */
.appointment_second_section_input {
height: 55px;
padding:
0 16px;
color: #36443f;
background: #ffffff;
border:
1px solid #e5e8e5;
border-radius: 7px;
font-family: "DM Sans", sans-serif;
font-size: 13px;
box-shadow:
0 2px 10px rgba(29, 54, 47, 0.018);
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.appointment_second_section_input::placeholder {
color: #8b9491;
opacity: 1;
}
.appointment_second_section_input:focus {
color: #34433e;
background: #ffffff;
border-color: #78978e;
box-shadow:
0 0 0 3px rgba(23, 78, 67, 0.05);
}
/* select */
.appointment_second_section .form-select {
cursor: pointer;
}
/* =========================================================
DATE / TIME ICON
========================================================= */
.appointment_second_section_field_icon {
position: relative;
}
.appointment_second_section_field_icon .appointment_second_section_input {
padding-right: 48px;
}
/* Hide native calendar indicator visually where supported */
.appointment_second_section_field_icon input::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.appointment_second_section_field_icon>i {
position: absolute;
z-index: 3;
right: 17px;
top: 50%;
transform: translateY(-50%);
color: #667a74;
font-size: 18px;
pointer-events: none;
}
/* =========================================================
MESSAGE
========================================================= */
.appointment_second_section_message {
width: 100%;
height: 155px;
resize: none;
padding:
14px 16px;
color: #36443f;
background: #ffffff;
border:
1px solid #e5e8e5;
border-radius: 7px;
font-family: "DM Sans", sans-serif;
font-size: 13px;
line-height: 1.6;
box-shadow:
0 2px 10px rgba(29, 54, 47, 0.018);
}
.appointment_second_section_message::placeholder {
color: #89938f;
opacity: 1;
}
.appointment_second_section_message:focus {
outline: 0;
border-color: #78978e;
box-shadow:
0 0 0 3px rgba(23, 78, 67, 0.05);
}
/* =========================================================
SUBMIT
========================================================= */
.appointment_second_section_submit {
width: 100%;
height: 59px;
padding:
0 37%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background:
linear-gradient(90deg,
#174e43 0%,
#205e50 100%);
border: 0;
border-radius: 8px;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
transform 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.appointment_second_section_submit i {
position: absolute;
right: 36%;
font-size: 21px;
transition: transform 0.3s ease;
}
.appointment_second_section_submit:hover {
background: #123f37;
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(23, 78, 67, 0.16);
}
.appointment_second_section_submit:hover i {
transform: translateX(4px);
}
/* =========================================================
SECURITY
========================================================= */
.appointment_second_section_security {
margin-top: 17px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #737e79;
font-size: 11px;
font-weight: 500;
}
.appointment_second_section_security i {
color: #174e43;
font-size: 15px;
}
/* =========================================================
WHY BOOK CARD
========================================================= */
.appointment_second_section_why_card {
width: 100%;
height: 100%;
padding:
27px 26px 18px;
display: flex;
flex-direction: column;
background: #ffffff;
border:
1px solid rgba(60, 86, 77, 0.04);
border-radius: 12px;
box-shadow:
0 6px 24px rgba(35, 57, 50, 0.035);
}
/* =========================================================
WHY TITLE
========================================================= */
.appointment_second_section_why_title {
margin:
0 0 20px;
color: #123f37;
font-family: "Playfair Display", serif;
font-size: 31px;
font-weight: 600;
line-height: 1.1;
}
/* =========================================================
WHY ITEM
========================================================= */
.appointment_second_section_why_item {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 17px;
}
/* ICON */
.appointment_second_section_why_icon {
width: 66px;
min-width: 66px;
height: 66px;
display: flex;
align-items: center;
justify-content: center;
color: #20574c;
background:
linear-gradient(145deg,
#f0f2ef,
#f7f8f5);
border-radius: 50%;
font-size: 32px;
}
/* TEXT */
.appointment_second_section_why_text {
display: flex;
flex-direction: column;
min-width: 0;
}
.appointment_second_section_why_text strong {
color: #273832;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.appointment_second_section_why_text span {
margin-top: 3px;
color: #737c79;
font-size: 12px;
font-weight: 400;
line-height: 1.35;
}
/* =========================================================
CLINIC IMAGE
========================================================= */
.appointment_second_section_clinic_image {
width: 100%;
height: 195px;
margin-top: auto;
overflow: hidden;
border-radius: 8px;
background: #e8e9e5;
}
.appointment_second_section_clinic_image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
CONTACT ROW
========================================================= */
.appointment_second_section_contact_row {
margin-top: 5px;
}
/* =========================================================
CONTACT CARD
========================================================= */
.appointment_second_section_contact_card {
width: 100%;
min-height: 210px;
padding:
24px 27px;
display: flex;
align-items: flex-start;
gap: 24px;
background: #ffffff;
border:
1px solid rgba(60, 86, 77, 0.04);
border-radius: 9px;
box-shadow:
0 5px 20px rgba(36, 57, 51, 0.03);
}
/* =========================================================
CONTACT ICON
========================================================= */
.appointment_second_section_contact_icon {
width: 61px;
min-width: 61px;
height: 61px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background:
linear-gradient(145deg,
#175347,
#22665a);
border-radius: 50%;
font-size: 28px;
}
/* =========================================================
CONTACT CONTENT
========================================================= */
.appointment_second_section_contact_content {
min-width: 0;
padding-top: 2px;
}
.appointment_second_section_contact_content h4 {
margin:
0 0 8px;
color: #263831;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.appointment_second_section_contact_content p {
margin: 0;
color: #4d5b56;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
/* =========================================================
GET DIRECTIONS
========================================================= */
.appointment_second_section_direction {
margin-top: 12px;
display: inline-flex;
align-items: center;
gap: 12px;
color: #174e43;
text-decoration: none;
font-size: 13px;
font-weight: 700;
}
.appointment_second_section_direction i {
font-size: 18px;
transition: transform 0.3s ease;
}
.appointment_second_section_direction:hover {
color: #174e43;
}
.appointment_second_section_direction:hover i {
transform: translateX(4px);
}
/* =========================================================
PHONE
========================================================= */
.appointment_second_section_phone {
display: block;
margin-bottom: 3px;
color: #273d36;
text-decoration: none;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
}
.appointment_second_section_phone:hover {
color: #174e43;
}
.appointment_second_section_timing {
margin-top: 13px !important;
color: #7a8581 !important;
}
/* =========================================================
EMAIL
========================================================= */
.appointment_second_section_email {
display: inline-block;
color: #273d36;
text-decoration: none;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
.appointment_second_section_email:hover {
color: #174e43;
}
.appointment_second_section_email_text {
margin-top: 16px !important;
color: #7a8581 !important;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.appointment_second_section_container {
padding-left: 65px;
padding-right: 65px;
}
.appointment_second_section_form_card {
padding:
32px 38px 28px;
}
.appointment_second_section_title {
font-size: 47px;
}
.appointment_second_section_input {
height: 59px;
font-size: 14px;
}
.appointment_second_section_message {
height: 165px;
font-size: 14px;
}
.appointment_second_section_why_title {
font-size: 34px;
}
.appointment_second_section_why_text strong {
font-size: 15px;
}
.appointment_second_section_why_text span {
font-size: 13px;
}
.appointment_second_section_clinic_image {
height: 205px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1399.98px) {
.appointment_second_section_container {
padding-left: 35px;
padding-right: 35px;
}
.appointment_second_section_form_card {
padding:
25px 28px 22px;
}
.appointment_second_section_title {
font-size: 38px;
}
.appointment_second_section_subtitle {
font-size: 13px;
}
.appointment_second_section_input {
height: 51px;
font-size: 12px;
}
.appointment_second_section_message {
height: 140px;
font-size: 12px;
}
.appointment_second_section_submit {
height: 54px;
font-size: 13px;
}
.appointment_second_section_why_card {
padding:
24px 22px 17px;
}
.appointment_second_section_why_title {
font-size: 27px;
}
.appointment_second_section_why_icon {
width: 58px;
min-width: 58px;
height: 58px;
font-size: 28px;
}
.appointment_second_section_why_text strong {
font-size: 12px;
}
.appointment_second_section_why_text span {
font-size: 10px;
}
.appointment_second_section_clinic_image {
height: 175px;
}
.appointment_second_section_contact_card {
min-height: 195px;
padding:
22px 20px;
gap: 18px;
}
.appointment_second_section_contact_icon {
width: 55px;
min-width: 55px;
height: 55px;
font-size: 25px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.appointment_second_section {
padding:
30px 0;
}
.appointment_second_section_container {
padding-left: 25px;
padding-right: 25px;
}
.appointment_second_section_title {
font-size: 42px;
}
.appointment_second_section_subtitle {
font-size: 14px;
}
.appointment_second_section_why_card {
margin-top: 0;
}
.appointment_second_section_why_item {
margin-bottom: 20px;
}
.appointment_second_section_why_icon {
width: 65px;
min-width: 65px;
height: 65px;
font-size: 31px;
}
.appointment_second_section_why_text strong {
font-size: 14px;
}
.appointment_second_section_why_text span {
font-size: 12px;
}
.appointment_second_section_clinic_image {
height: 300px;
}
.appointment_second_section_contact_card {
min-height: auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.appointment_second_section {
padding:
20px 0 30px;
}
.appointment_second_section_container {
padding-left: 15px;
padding-right: 15px;
}
.appointment_second_section_form_card {
padding:
22px 16px;
}
.appointment_second_section_eyebrow {
font-size: 9px;
letter-spacing: 4px;
}
.appointment_second_section_title {
font-size: 34px;
line-height: 1.08;
}
.appointment_second_section_subtitle {
font-size: 13px;
line-height: 1.5;
}
.appointment_second_section_input {
height: 52px;
font-size: 13px;
}
.appointment_second_section_message {
height: 140px;
font-size: 13px;
}
.appointment_second_section_submit {
height: 55px;
padding:
0 20px;
justify-content: center;
gap: 18px;
font-size: 13px;
}
.appointment_second_section_submit i {
position: relative;
right: auto;
}
.appointment_second_section_security {
font-size: 10px;
text-align: center;
}
/* why card */
.appointment_second_section_why_card {
padding:
24px 18px 18px;
}
.appointment_second_section_why_title {
font-size: 28px;
}
.appointment_second_section_why_item {
gap: 15px;
}
.appointment_second_section_why_icon {
width: 58px;
min-width: 58px;
height: 58px;
font-size: 28px;
}
.appointment_second_section_why_text strong {
font-size: 13px;
}
.appointment_second_section_why_text span {
font-size: 11px;
}
.appointment_second_section_clinic_image {
height: 240px;
}
/* contact */
.appointment_second_section_contact_row {
margin-top: 3px;
}
.appointment_second_section_contact_card {
min-height: auto;
padding:
20px 18px;
gap: 16px;
}
.appointment_second_section_contact_icon {
width: 52px;
min-width: 52px;
height: 52px;
font-size: 24px;
}
.appointment_second_section_contact_content h4 {
font-size: 15px;
}
.appointment_second_section_contact_content p {
font-size: 12px;
}
.appointment_second_section_phone,
.appointment_second_section_email {
font-size: 14px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.appointment_second_section_title {
font-size: 30px;
}
.appointment_second_section_why_title {
font-size: 25px;
}
.appointment_second_section_clinic_image {
height: 200px;
}
.appointment_second_section_contact_card {
align-items: flex-start;
}
}
/* Mobile Marquee Fixes */
.marquee-section {
width: 100%;
overflow: hidden;
padding: 6px 0;
}
.top-info-marquee {
display: block;
width: 100%;
vertical-align: middle;
}
.marquee-item {
display: inline-block;
white-space: nowrap;
font-size: 13px;
padding: 0 10px;
}
.marquee-item a {
color: inherit;
text-decoration: none;
}
.marquee-divider {
display: inline-block;
padding: 0 5px;
opacity: 0.6;
}
.marquee-socials a {
display: inline-block;
margin: 0 5px;
font-size: 14px;
}
@media (max-width: 767.98px) {
.index_first_section_features {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
/* 2 cards per row */
gap: 20px 15px !important;
/* Row and column gap adjustment */
}
}
/* ==========================================================
ROOTCANAL FOURTH SECTION
========================================================== */
.rootcanal_fourth_section_wrapper {
padding:
20px 0 70px !important;
background:
#ffffff !important;
font-family:
'Poppins',
sans-serif !important;
}
.rootcanal_fourth_section_wrapper .container {
max-width:
1450px;
}
/* ==========================================================
PROCESS MAIN CARD
========================================================== */
.rootcanal_fourth_section_process_card {
position:
relative;
overflow:
hidden;
padding:
30px 35px 45px;
border:
1px solid #003b32;
border-radius:
18px;
background:
#ffffff;
box-shadow:
0 10px 28px rgba(0, 67, 59, .06);
}
/* Green Bottom Premium Stroke */
.rootcanal_fourth_section_process_card::after {
content:
"";
position:
absolute;
left:
0;
right:
0;
bottom:
0;
height:
9px;
background:
#005148;
border-radius:
0 0 17px 17px;
}
/* ==========================================================
HEADER
========================================================== */
.rootcanal_fourth_section_header {
text-align:
center !important;
margin-bottom:
36px !important;
}
.rootcanal_fourth_section_title {
margin:
0 0 12px !important;
color:
#07534d !important;
/* color:
#07534d !important; */
font-family:
'Playfair Display',
Georgia,
serif !important;
font-size:
29px !important;
font-weight:
700 !important;
letter-spacing:
.3px !important;
text-transform:
uppercase !important;
}
/* ==========================================================
HEADER DIVIDER
========================================================== */
.rootcanal_fourth_section_divider {
width:
150px;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
}
.rootcanal_fourth_section_divider_line {
flex:
1;
width:
auto !important;
height:
1px !important;
background:
var(--implant-gold, #df9827) !important;
}
.rootcanal_fourth_section_divider_dot {
width:
8px !important;
height:
8px !important;
margin:
0 8px;
border-radius:
0 !important;
background:
#df9827 !important;
transform:
rotate(45deg);
}
/* ==========================================================
PROCESS FLOW
========================================================== */
.rootcanal_fourth_section_steps_flow {
display:
flex !important;
align-items:
flex-start !important;
justify-content:
space-between !important;
width:
100% !important;
position:
relative !important;
}
/* ==========================================================
STEP ITEM
========================================================== */
.rootcanal_fourth_section_step_item {
flex:
1 1 0 !important;
min-width:
0;
display:
flex !important;
flex-direction:
column !important;
align-items:
center !important;
text-align:
center !important;
padding:
0 7px !important;
}
/* ==========================================================
STEP CIRCLE
========================================================== */
.rootcanal_fourth_section_circle_wrap {
position:
relative !important;
width:
122px !important;
height:
122px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
margin-bottom:
20px !important;
border:
1px solid #d6e4e1 !important;
border-radius:
50% !important;
background:
radial-gradient(circle,
#f7faf9,
#edf5f3) !important;
transition:
.3s ease !important;
}
.rootcanal_fourth_section_step_item:hover .rootcanal_fourth_section_circle_wrap {
transform:
translateY(-4px) !important;
border-color:
#87b7b0 !important;
box-shadow:
0 8px 22px rgba(0, 75, 67, .08) !important;
}
/* ==========================================================
NUMBER BADGE
========================================================== */
.rootcanal_fourth_section_badge {
position:
absolute !important;
z-index:
5;
top:
-15px !important;
left:
50% !important;
transform:
translateX(-50%) !important;
width:
31px !important;
height:
31px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
border-radius:
50% !important;
background:
#005249 !important;
color:
#ffffff !important;
font-size:
14px !important;
font-weight:
700 !important;
box-shadow:
none !important;
}
/* ==========================================================
ICON IMAGE
========================================================== */
.rootcanal_fourth_section_icon {
width:
75px !important;
height:
75px !important;
display:
flex;
align-items:
center;
justify-content:
center;
}
.rootcanal_fourth_section_icon img {
width:
68px !important;
height:
68px !important;
object-fit:
contain;
filter:
saturate(.8);
margin-top: 25px;
}
/* ==========================================================
CONNECTOR
========================================================== */
.rootcanal_fourth_section_arrow {
width:
110px;
flex:
0 0 110px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
8px;
padding-top:
57px !important;
color:
#07554e !important;
}
.rootcanal_fourth_section_arrow .process-dotted-line {
flex:
1;
height:
2px;
background-image:
linear-gradient(to right,
#0b655d 35%,
transparent 35%);
background-size:
7px 2px;
background-repeat:
repeat-x;
}
.rootcanal_fourth_section_arrow .process-dot {
width:
9px;
height:
9px;
flex:
0 0 9px;
border-radius:
50%;
background:
#07574f;
}
/* ==========================================================
STEP TITLE
========================================================== */
.rootcanal_fourth_section_step_title {
min-height:
38px;
margin:
0 0 3px !important;
color:
#074f49 !important;
font-family:
'Poppins',
sans-serif !important;
font-size:
13px !important;
font-weight:
700 !important;
line-height:
1.35 !important;
}
/* Small Gold Line Under Each Title */
.rootcanal_fourth_section_small_line {
width:
28px;
height:
1.5px;
margin:
0 auto 8px;
background:
#df9827;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.rootcanal_fourth_section_step_desc {
max-width:
180px !important;
margin:
0 !important;
color:
#394d55 !important;
font-size:
11.5px !important;
font-weight:
400 !important;
line-height:
1.6 !important;
}
/* ==========================================================
LAPTOP
========================================================== */
@media (max-width: 1199.98px) {
.rootcanal_third_section_heading {
font-size:
39px !important;
}
.rootcanal_third_section_quote_card {
min-height:
290px;
padding:
35px 240px 35px 35px !important;
}
.rootcanal_third_section_quote_text {
font-size:
16px !important;
}
.rootcanal_third_section_implant_visual {
width:
215px;
height:
250px;
right:
30px;
}
.rootcanal_third_section_implant_img {
width:
160px;
}
.rootcanal_fourth_section_circle_wrap {
width:
100px !important;
height:
100px !important;
}
.rootcanal_fourth_section_icon {
width:
60px !important;
height:
60px !important;
}
.rootcanal_fourth_section_icon img {
width:
55px !important;
height:
55px !important;
}
.rootcanal_fourth_section_arrow {
width:
60px;
flex-basis:
60px !important;
padding-top:
46px !important;
}
.rootcanal_fourth_section_step_title {
font-size:
11px !important;
}
.rootcanal_fourth_section_step_desc {
font-size:
10px !important;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 991.98px) {
.rootcanal_third_section_wrapper {
padding:
45px 0 25px !important;
}
.rootcanal_third_section_left {
padding-right:
15px !important;
margin-bottom:
15px !important;
}
.rootcanal_third_section_heading {
font-size:
43px !important;
}
.rootcanal_third_section_desc {
max-width:
700px;
font-size:
14px !important;
}
.rootcanal_third_section_quote_card {
min-height:
300px;
padding:
40px 290px 40px 40px !important;
}
.rootcanal_third_section_implant_visual {
right:
45px;
width:
230px;
}
/* Process changes to grid */
.rootcanal_fourth_section_process_card {
padding:
30px 20px 40px;
}
.rootcanal_fourth_section_steps_flow {
display:
grid !important;
grid-template-columns:
repeat(3, 1fr);
gap:
35px 18px;
}
.rootcanal_fourth_section_arrow {
display:
none !important;
}
.rootcanal_fourth_section_step_item {
max-width:
none !important;
}
.rootcanal_fourth_section_step_desc {
max-width:
210px !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767.98px) {
.rootcanal_third_section_heading {
font-size:
35px !important;
}
.rootcanal_third_section_small_title {
font-size:
12px;
}
.rootcanal_third_section_quote_card {
min-height:
390px;
padding:
30px 22px 200px !important;
border-radius:
18px !important;
}
.rootcanal_third_section_quote_icon {
left:
22px;
top:
25px;
font-size:
34px !important;
}
.rootcanal_third_section_quote_text {
margin-top:
42px !important;
max-width:
100% !important;
font-size:
15px !important;
}
.rootcanal_third_section_implant_visual {
width:
230px;
height:
190px;
right:
50%;
top:
auto;
bottom:
5px;
transform:
translateX(50%);
}
.rootcanal_third_section_implant_circle {
width:
150px;
height:
150px;
}
.rootcanal_third_section_implant_img {
width:
130px;
max-height:
190px;
}
.rootcanal_fourth_section_title {
font-size:
22px !important;
}
.rootcanal_fourth_section_steps_flow {
grid-template-columns:
repeat(2, 1fr) !important;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 575.98px) {
.rootcanal_third_section_wrapper {
padding-top:
35px !important;
}
.rootcanal_third_section_heading {
font-size:
30px !important;
}
.rootcanal_third_section_desc {
font-size:
13px !important;
}
.rootcanal_fourth_section_wrapper {
padding:
15px 0 50px !important;
}
.rootcanal_fourth_section_process_card {
padding:
27px 15px 38px;
}
.rootcanal_fourth_section_title {
font-size:
19px !important;
line-height:
1.35 !important;
}
.rootcanal_fourth_section_steps_flow {
grid-template-columns:
1fr !important;
gap:
35px;
}
.rootcanal_fourth_section_circle_wrap {
width:
110px !important;
height:
110px !important;
}
.rootcanal_fourth_section_icon {
width:
65px !important;
height:
65px !important;
}
.rootcanal_fourth_section_icon img {
width:
60px !important;
height:
60px !important;
}
.rootcanal_fourth_section_step_title {
min-height:
0;
font-size:
13px !important;
}
.rootcanal_fourth_section_step_desc {
max-width:
270px !important;
font-size:
12px !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.navabr .navabr-appointment {
margin-left: 196px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.about_third_section_all_doctors {
display: none !important;
}
.about_third_section_right_bottom p{
letter-spacing: 2px;
margin-right: 60px;
}
}
/* Section Wrapper */
.rootcanal_fourth_section_wrapper {
padding: 60px 0;
background-color: #ffffff;
}
.rootcanal_fourth_section_process_card {
background: #ffffff;
border-radius: 12px;
padding: 20px 10px;
}
/* Header Styling */
.rootcanal_fourth_section_header {
text-align: center;
margin-bottom: 50px;
}
.rootcanal_fourth_section_title {
font-size: 26px;
font-weight: 700;
color: #103f37;
margin-bottom: 15px;
letter-spacing: 0.5px;
}
.rootcanal_fourth_section_divider {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.rootcanal_fourth_section_divider_line {
width: 40px;
height: 2px;
background-color: #d97706;
}
.rootcanal_fourth_section_divider_dot {
width: 8px;
height: 8px;
background-color: #d97706;
transform: rotate(45deg);
}
/* Steps Grid Layout (Image Model) */
.rootcanal_fourth_section_steps_flow {
display: flex;
justify-content: center;
gap: 20px;
align-items: stretch;
}
/* Individual Vertical Cards (Matched to reference image design) */
.rootcanal_fourth_section_step_item {
flex: 1;
position: relative;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 35px 15px 25px 15px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
transition: all 0.3s ease-in-out;
margin-top: 15px; /* Badge top space */
border: 1px solid #212529;
}
/* Card Hover State */
.rootcanal_fourth_section_step_item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(16, 63, 55, 0.1);
border-color: #103f37;
}
/* Top Center Number Badge */
.rootcanal_fourth_section_badge {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background-color: #103f37;
color: #ffffff;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
/* Icon Container */
.rootcanal_fourth_section_icon {
width: 60px;
height: 60px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.rootcanal_fourth_section_icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Title & Content */
.rootcanal_fourth_section_step_title {
font-size: 17px;
font-weight: 700;
color: #103f37;
margin-bottom: 12px;
line-height: 1.3;
}
.rootcanal_fourth_section_step_desc {
font-size: 13px;
color: #4a5568;
line-height: 1.5;
margin: 0;
}
/* Responsive Alignment */
@media (max-width: 991px) {
.rootcanal_fourth_section_steps_flow {
flex-wrap: wrap;
}
.rootcanal_fourth_section_step_item {
flex: 0 0 calc(33.333% - 20px); /* 3 cards in row for Tablets */
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.rootcanal_fourth_section_step_item {
flex: 0 0 calc(50% - 15px); /* 2 cards in row for Mobile landscape */
border: 1px solid #212529;
}
}
@media (max-width: 575px) {
.rootcanal_fourth_section_step_item {
flex: 0 0 100%; /* 1 card per row for Small Mobile */
border: 1px solid #212529;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
/* మెయిన్ బటన్ కంటైనర్ */
.doctor_second_section_appointment {
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 6px 10px !important;
max-width: 100% !important;
box-sizing: border-box !important;
gap: 8px !important; /* ఐకాన్స్ మరియు టెక్స్ట్ మధ్య గ్యాప్ */
}
/* క్యాలెండర్ ఐకాన్ కంటైనర్ */
.doctor_second_section_appointment_calendar {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
font-size: 16px !important;
flex-shrink: 0 !important;
}
/* టెక్స్ట్ (Book an Appointment) */
.doctor_second_section_appointment_text {
font-size: 13px !important;
line-height: 1.2 !important;
text-align: center !important;
white-space: normal !important; /* అవసరమైతే టెక్స్ట్ 2 లైన్లుగా మారుతుంది */
}
/* యారో ఐకాన్ కంటైనర్ */
.doctor_second_section_appointment_arrow {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
font-size: 16px !important;
flex-shrink: 0 !important; /* యారో నలిగిపోకుండా/బయటకు వెళ్లకుండా ఉంచుతుంది */
}
}
/* Mobile screens lo maatrame ee 2 blocks hide avuthayi */
@media (max-width: 767px) {
.footer_quick_links,
.footer_contact {
display: none !important;
}
}
/* Mobile Screens (767px or less) lo gradient hide cheyadaniki */
@media (max-width: 767.98px) {
.invisalign_first_section_image_wrapper::before {
display: none; /* Mobile view lo overlay remove avthundhi */
}
}
@media (max-width: 767.98px) {
.about_first_section_image_quote {
display: none !important;
}
}
/* Mobile devices lo matrame Image Rounded Corners (Border Radius) apply avvadaniki */
@media (max-width: 767.98px) {
.about_first_section_image_wrapper {
border-radius: 16px !important; /* Rounded corners kosam (12px / 16px / 20px adjust cheskovachhu) */
overflow: hidden !important; /* Image corners bayataki raakunda cut chesthundhi */
}
.about_first_section_image {
border-radius: 16px !important;
}
}
/* Mobile view (767px or less) lo Curve Design remove cheyadaniki */
@media (max-width: 767.98px) {
.doctor_first_section_curve,
.doctor_first_section_curve::before,
.doctor_first_section_curve::after {
display: none !important;
}
}
/* Mobile view lo Handwriting Text chuttuu unna Box Styling remove cheyadaaniki */
@media (max-width: 767.98px) {
.doctor_third_section_handwriting {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
}
/* Mobile view (767px or less) lo Contact Section Curve Design remove cheyadaniki */
@media (max-width: 767.98px) {
.contact_first_section_curve,
.contact_first_section_curve::before,
.contact_first_section_curve::after {
display: none !important;
}
}
/* 992px nundi 1200px Screen Size Layout Fix (Exact Reference Match) */
@media (min-width: 992px) and (max-width: 1200px) {
/* 1. Send Message Button - Perfect Single Line Center Alignment */
.contact_second_section_submit,
button.contact_second_section_submit {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: row !important;
gap: 10px !important;
width: 100% !important;
height: 48px !important;
padding: 0 24px !important;
text-align: center !important;
}
.contact_second_section_submit span,
.contact_second_section_submit p,
.contact_second_section_submit i,
.contact_second_section_submit svg,
.contact_second_section_submit img {
display: inline-block !important;
margin: 0 !important;
position: static !important;
line-height: 1 !important;
}
/* 2. Connect With Us Card Container Expansion */
.contact_second_section_connect {
padding: 20px 18px !important;
min-height: auto !important;
}
/* 3. Connect Text Alignment */
.contact_second_section_connect_text {
font-size: 11px !important;
line-height: 1.4 !important;
margin-bottom: 15px !important;
text-align: left !important;
}
/* 4. Social Icons Row - Horizontal Left Alignment (Reference Image Match) */
.contact_second_section_socials {
margin-left: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
margin-bottom: 15px !important;
}
.contact_second_section_socials a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
/* 5. Bottom Quote Box (Your smile matters...) Display Fix */
.contact_second_section_connect .quote_box,
.contact_second_section_connect_quote {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: 10px !important;
}
}
/* Connect Card Clean Layout Fix (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
/* 1. Main Card Container */
.contact_second_section_connect {
position: relative !important;
display: flex !important;
flex-direction: column !important;
padding: 20px !important;
min-height: auto !important;
}
/* 2. Overlapping Elements positioning Reset (Main Fix) */
.contact_second_section_connect * {
position: static !important; /* Forces elements to stack naturally instead of overlapping */
transform: none !important;
}
/* 3. Header Title (CONNECT WITH US) */
.contact_second_section_info_heading {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 12px !important;
}
/* 4. Description Text */
.contact_second_section_connect_text {
font-size: 12px !important;
line-height: 1.4 !important;
margin-bottom: 15px !important;
text-align: left !important;
}
/* 5. Social Icons Row */
.contact_second_section_socials {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
margin-left: 0 !important;
margin-bottom: 15px !important;
padding-bottom: 15px !important;
border-bottom: 1px solid #f0f0f0 !important; /* Bottom line divider like reference */
}
/* 6. Quote Section ("Your smile matters...") */
.contact_second_section_connect_quote,
.contact_second_section_connect .quote_wrapper {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: 10px !important;
width: 100% !important;
}
}
/* Tablet Response Layout Fix (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.appointment_first_section_description {
max-width: 100% !important; /* Forces text to expand till title margins */
width: 100% !important;
font-size: 16px !important;
line-height: 1.5 !important;
}
/* HTML lo unna manual
line breaks ni CSS dwara ignore cheyadaaniki */
.appointment_first_section_description br {
display: none !important;
}
}
/* Tablet Response (768px - 991px) - Contact Section Title & Description Fix */
@media (min-width: 768px) and (max-width: 991.98px) {
/* 1. Container width expansion */
.contact_first_section_content,
.contact_first_section_left {
max-width: 100% !important;
width: 100% !important;
}
/* 2. Title single line lo padadaniki font size adjustment */
.contact_first_section_title {
font-size: 42px !important; /* Screen space batti font size compress chesthundhi */
white-space: nowrap !important; /* Text niga single line lo unchuthundhi */
max-width: 100% !important;
}
/* 3. Description wide ga 1 or 2 lines lo stretch avvadaniki */
.contact_first_section_description {
max-width: 100% !important;
width: 100% !important;
font-size: 16px !important;
line-height: 1.5 !important;
}
/* Manual line breaks HTML lo unte ignore cheyadaaniki */
.contact_first_section_description br,
.contact_first_section_title br {
display: none !important;
}
}
/* Tablet Response (768px - 991px) Quote Container Height & Padding Reduction */
@media (min-width: 768px) and (max-width: 991.98px) {
.index_third_section_quote_area {
min-height: auto !important; /* Unnecessary height remove chestundhi */
height: auto !important;
padding: 40px 20px !important; /* Excess top and bottom space thaggistundhi */
}
.index_third_section_quote_content {
margin: 0 auto !important;
}
}
/* 992px to 1200px screens lo Doctor Profile Bottom Caption Hide cheyadaniki */
@media (min-width: 992px) and (max-width: 1200px) {
.doctor_second_section_bottom_caption {
display: none !important;
}
}
/* Tablet Response (768px - 991px) - Treatment Title 2 Lines Fix */
@media (min-width: 768px) and (max-width: 991.98px) {
.treatment_third_section_title {
max-width: 100% !important; /* Width box restriction remove chesthundhi */
width: 100% !important;
font-size: 28px !important; /* Font size compress chesi text room isthundhi */
line-height: 1.3 !important;
white-space: normal !important;
}
/* Heading inside manual
tag ni disable cheyadaaniki */
.treatment_third_section_title br {
display: none !important;
}
}
/* Tablet Response (768px - 991px) - Description 2 Lines Fix */
@media (min-width: 768px) and (max-width: 991.98px) {
.treatment_third_section_description {
max-width: 100% !important; /* Fixed width restriction ni teeseysthundhi */
width: 100% !important;
font-size: 14px !important; /* Font size ni thagginchi exact 2 lines ki fit chesthundhi */
line-height: 1.4 !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
}
}
/* Tablet Response (768px - 991px) - Description Full Image Width Stretch */
@media (min-width: 768px) and (max-width: 991.98px) {
/* Parent content area max width override */
.treatment_third_section_content {
width: 100% !important;
max-width: 100% !important;
padding-right: 0 !important;
}
/* Paragraph element text stretch till image margins */
.treatment_third_section_description {
width: 100% !important;
max-width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
/* Manual line break tags disable */
.treatment_third_section_description br {
display: none !important;
}
}
/* 992px to 1200px / Laptop View Image Aspect Ratio Fix */
@media (min-width: 992px) and (max-width: 1200px) {
/* Right side image wrapper container height reduction */
.about_first_section_image_wrapper {
height: auto !important;
min-height: 400px !important; /* Screen sizes batti wrapper height reduce chesthundhi */
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
/* Image zoom and crop stop cheyadaniki main fix */
.about_first_section_image {
position: relative !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* Image crop avvakunda clean ga scaled box lo fit chesthundhi */
object-position: center !important;
}
}
/* 992px to 1200px / Laptop View - Left & Right Containers Height Equalization */
@media (min-width: 992px) and (max-width: 1200px) {
/* 1. Left container min-height override */
.about_first_section_left {
min-height: auto !important; /* Fixed 600px height limit remove chesthundhi */
height: 100% !important;
padding-top: 30px !important;
padding-bottom: 30px !important;
}
/* 2. Parent row align-items balance */
.about_first_section_row {
align-items: center !important;
min-height: auto !important;
}
/* 3. Right image wrapper height lock */
.about_first_section_right,
.about_first_section_image_wrapper {
min-height: auto !important;
}
}
/* 1400px and Above Screens - Compact Section Container & Height Reduction */
@media (min-width: 1400px) {
/* 1. Main outer section container height lock & center alignment */
.patient_stories_first_section_left,
.patient_stories_first_section_right,
.patient_stories_first_section_image_wrapper {
min-height: 450px !important; /* Default 580px/600px height ni 450px ki reduce chestundhi */
height: 450px !important;
}
/* 2. Container inner flex alignment */
.patient_stories_first_section_row {
min-height: 450px !important;
align-items: center !important;
}
/* 3. Left side content padding adjustment */
.patient_stories_first_section_left {
padding-top: 50px !important;
padding-bottom: 50px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* 4. Right side image proportion fix */
.patient_stories_first_section_image {
height: 100% !important;
width: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
}
/* 1400px and Above Screens - Equal Compact Height & Right Image Render Fix */
@media (min-width: 1400px) {
/* 1. Main Outer Container Reset */
.about_first_section_container,
.container-fluid.about_first_section_container {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
}
/* 2. Row Alignment Fix */
.about_first_section_row {
margin-left: 0 !important;
margin-right: 0 !important;
min-height: 480px !important;
height: 480px !important;
display: flex !important;
align-items: stretch !important;
}
/* 3. Left Content Column - Compact Spacing */
.about_first_section_left {
min-height: 480px !important;
height: 480px !important;
padding: 30px 40px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.about_first_section_left .about_first_section_title {
margin-bottom: 12px !important;
}
.about_first_section_left .about_first_section_description {
margin-bottom: 20px !important;
font-size: 18px !important;
line-height: 1.5 !important;
}
.about_first_section_features {
margin-top: 10px !important;
padding-top: 10px !important;
}
/* 4. Right Side Column & Image Wrapper Render Fix */
.about_first_section_right {
min-height: 480px !important;
height: 480px !important;
position: relative !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
.about_first_section_image_wrapper {
position: relative !important;
width: 100% !important;
height: 100% !important;
min-height: 480px !important;
overflow: hidden !important;
display: block !important;
}
/* Image Display Lock */
.about_first_section_image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
z-index: 1 !important;
}
}
/* 1400px and Above Screens - Stats with Divider Lines & Single Line Text Fix */
@media (min-width: 1400px) {
/* 1. Main Container Setup - Left Box Boundary Width Constraint */
.patient_stories_first_section_stats {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
gap: 0 !important; /* Spacing padding & dividers nundi vasthundhi */
margin-top: 20px !important;
}
/* 2. Stat Item Padding & Sizing */
.patient_stories_first_section_stat {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 12px !important;
flex: 0 0 auto !important;
}
.patient_stories_first_section_stat:first-child {
padding-left: 0 !important; /* First item leftmost edge ki clear align */
}
/* 3. Divider Lines Height & Style Lock */
.patient_stories_first_section_stat_divider {
display: block !important;
width: 1px !important;
height: 35px !important; /* Line height neat ga set avthundhi */
background-color: #d1d5db !important; /* Soft gray border line color */
margin: 0 4px !important;
flex-shrink: 0 !important;
}
/* 4. Icon overlap protection */
.patient_stories_first_section_stat_icon {
flex-shrink: 0 !important;
}
/* 5. Text single line format & exact font scale */
.patient_stories_first_section_stat_content {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.patient_stories_first_section_stat_content span {
font-size: 14px !important; /* Divider + Icon inside row fit ayye exact size */
font-weight: 500 !important;
white-space: nowrap !important; /* Single line lock */
line-height: 1.2 !important;
}
.patient_stories_first_section_stat_content strong {
font-size: 18px !important;
line-height: 1.1 !important;
}
/* Internal
breaks bypass */
.patient_stories_first_section_stat_content span br {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
/* 1. Main card outer padding thagginchi width create chesam */
.contact_second_section_connect {
padding-left: 6px !important; /* Side padding 6px ki thagginchadam valla space bachatundhi */
padding-right: 6px !important;
overflow: hidden !important; /* Container bayataku pokunda bounds maintain chestundhi */
}
/* 2. Main quote layout wrapper */
.contact_second_section_quote {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important; /* Gap 8px nundi 6px ki thaggincham */
width: 100% !important;
padding: 0 !important;
}
/* 3. Quote mark height/size slight adjustment for space */
.contact_second_section_quote_mark {
font-size: 20px !important; /* 42px width ekkuva theeskuntundhi kabatti 20px ki set chesa */
line-height: 1 !important;
flex-shrink: 0 !important;
}
/* 4. Paragraph text formatting without changing font-size */
.contact_second_section_quote p {
margin: 0 !important;
line-height: 1.25 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* 5. Smile icon inside right boundary */
.contact_second_section_quote img,
.contact_second_section_quote i {
display: block !important;
flex-shrink: 0 !important;
width: 26px !important; /* Icon width 26px valla container దాటి bayataku podhu */
height: auto !important;
margin-left: auto !important;
}
}
/* 992px to 1200px / Laptop View - Exact About Us Copy for Patient Stories */
@media (min-width: 992px) and (max-width: 1200px) {
/* 1. Parent Row Layout */
.patient_stories_first_section_row {
display: flex !important;
align-items: center !important;
min-height: 405px !important;
}
/* 2. Left Content Container */
.patient_stories_first_section_left {
min-height: auto !important;
height: 100% !important;
}
/* 3. Right Side Image Column & Wrapper (Image Visible Setup) */
.patient_stories_first_section_right {
min-height: auto !important;
height: 100% !important;
}
.patient_stories_first_section_image_wrapper {
position: relative !important;
width: 100% !important;
min-height: 350px !important; /* Image wrapper 0px ki collapse avvakunda height isthundi */
height: 100% !important;
overflow: hidden !important;
border-radius: 6px !important;
}
/* 4. Image Display Fix (No stretch, clean object-fit) */
.patient_stories_first_section_image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
opacity: 1 !important;
filter: none !important;
display: block !important;
}
}
/* 1400px and Above Devices - Spacing & Container Margin Fix */
@media (min-width: 1400px) {
/* 1. Navbar and Section Top/Bottom Spacing */
.patient_stories_first_section_container,
section.patient_stories_first_section {
margin-top: 0px !important; /* Navbar ki container ki neat gap isthundi */
margin-bottom: 0px !important; /* Kindi section ki gap isthundi */
padding-top: 3px !important;
padding-bottom: 0 !important;
}
/* 2. Main Row & Heights */
.patient_stories_first_section_row {
align-items: center !important;
min-height: 450px !important;
}
/* 3. Columns & Image Wrapper Setup */
.patient_stories_first_section_left,
.patient_stories_first_section_right,
.patient_stories_first_section_image_wrapper {
min-height: 450px !important;
height: 450px !important;
}
/* 4. Left Content Padding Adjustment */
.patient_stories_first_section_left {
padding-top: 40px !important;
padding-bottom: 40px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
}
/* Left Side Content - Padding & Margins Edge Fit Fix */
.patient_stories_first_section_left {
padding-left: 30px !important; /* Left edge ki perfectly align chestundi */
padding-top: 15px !important; /* Top extra blank space remove chestundi */
padding-bottom: 15px !important; /* Bottom extra space fix chestundi */
margin: 0 !important;
}
/* Inner elements baseline alignment */
.patient_stories_first_section_content,
.patient_stories_first_section_left > div {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Doctors Page - Left Content Edge Alignment Fix */
.doctor_first_section_left {
padding-left: 40px !important; /* Left edge ki perfectly baseline alignment */
padding-top: 15px !important; /* Top unwanted blank space reduction */
padding-bottom: 15px !important; /* Bottom extra spacing fix */
margin-left: 0 !important;
}
/* Sub-elements inside left box zero-margin reset */
.doctor_first_section_left > div,
.doctor_first_section_content {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* =========================================================
MOBILE FIRST-HERO IMAGES - SHOW FULL IMAGE
========================================================= */
@media (max-width: 767.98px) {
:is(
.index_first_section_image_wrapper,
.about_first_section_image_wrapper,
.treatment_first_section_image_wrapper,
.invisalign_first_section_image_wrapper,
.appointment_first_section_image_wrapper,
.contact_first_section_image_wrapper,
.doctor_first_section_image_wrapper,
.patient_stories_first_section_image_wrapper
) {
min-height: clamp(300px, 78vw, 450px) !important;
background: #edf4ef !important;
}
:is(
.index_first_section_image,
.about_first_section_image,
.treatment_first_section_image,
.invisalign_first_section_image,
.appointment_first_section_image,
.contact_first_section_image,
.doctor_first_section_image,
.patient_stories_first_section_image
) {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
:is(
.index_first_section_right,
.about_first_section_right,
.treatment_first_section_right,
.invisalign_first_section_right,
.appointment_first_section_right,
.contact_first_section_right,
.doctor_first_section_right,
.patient_stories_first_section_right
) {
min-height: clamp(300px, 78vw, 450px) !important;
}
}
@media (max-width: 420px) {
:is(
.index_first_section_right,
.about_first_section_right,
.treatment_first_section_right,
.invisalign_first_section_right,
.appointment_first_section_right,
.contact_first_section_right,
.doctor_first_section_right,
.patient_stories_first_section_right
) {
min-height: 290px !important;
}
}