@charset "UTF-8";
/*
Theme Name: Twenty Nineteen
Theme URI: https://wordpress.org/themes/twentynineteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Tested up to: 7.0
Requires at least: 4.7
Requires PHP: 5.2.4
Version: 3.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentynineteen
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, block-patterns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

Bundled block pattern images:
Abstract Background by HD Wallpapers, CC0. https://stocksnap.io/photo/abstract-background-0SRRVNMKBX
Abstract Waves by HD Wallpapers, CC0. https://stocksnap.io/photo/abstract-waves-0KREGLTZQ3
Abstract Bokeh by HD Wallpapers, CC0. https://stocksnap.io/photo/abstract-bokeh-P4KVZBMQ6L
Colorful Bokeh by HD Wallpapers, CC0. https://stocksnap.io/photo/colorful-bokeh-VN4G84GL8H
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Normalize
# Typography
	## Headings
	## Copy
# Elements
	## Lists
	## Tables
# Forms
	## Buttons
	## Fields
# Navigation
	## Links
	## Menus
	## Next & Previous
# Accessibility
# Alignments
# Clearings
# Layout
# Widgets
# Content
	## Archives
	## Posts and pages
	## Comments
# Blocks
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*
 * Chrome renders extra-wide   characters for the Hoefler Text font.
 * This results in a jumping cursor when typing in both the Classic and block
 * editors. The following font-face override fixes the issue by manually inserting
 * a custom font that includes just a Hoefler Text space replacement for that
 * character instead.
 */
/* testimonial slider */
.testimonials_home_section {
    background: #225959;
    border-color: #ce9d71;
    border-style: solid;
    border-width: 8px 0px;
    margin: 0px 0px 0px;
    overflow: hidden;
    padding: 50px 15px;
    width: 100%;
}
.testimonials_home_dentistry_boxs {
    margin: 0px auto 0px;
    max-width: 1110px;
    padding: 0px 0px 0px;
    width: 100%;
}
.double_icon {
    margin: 0 auto 36px;
    text-align: center;
    width: 100%;
}
.double_icon img {
    height: 37px;
    margin: 0 auto;
    text-align: center;
    width: 49px !important;
}
.testimonials_home_dentistry_boxs h3 {
    color: #fff;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: normal;
    margin: 0px 0px 26px;
    padding: 0px 0px;
    text-align: center;
    text-decoration: none;
}
.testimonials_home_star_icon {
    margin: 0 auto 20px;
    text-align: center;
    width: 100%;
}
.testimonials_home_star_icon img {
    display: inline-block !important;
    height: 30px;
    margin: 0 auto;
    text-align: center;
    width: 30px !important;
}
.testimonials_home_dentistry_boxs h6 {
    color: #fff;
    
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px;
    margin: 0px 0px 20px;
    padding: 0px 0px;
    text-align: center;
    text-decoration: none;
}
/* new patient start */
.consultation-form {
    padding: 50px 40px 30px 40px;
    background: #e9f2fa;
    border-radius: 20px;
	border:1px solid #414141;
}
.form-sec-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.3;
}
.appointment-input {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}
.appointment-input input,select {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
}
.message-box {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 12px;
    margin-top: 15px;
    font-size: 15px;
}
.appointment-form-wrapp .check-info {
    display: block;
    font-size: 13px;
    margin-top: 15px;
    line-height: 1.5;
}
.send-btn {
    margin-top: 20px;
    padding: 12px 30px;
    background: #2c4b87;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}
/*
@media (max-width: 1399px) {
    .appointment-space {
        padding-top: 80px;
    }
}*/
.appointment-space {
    padding-top: 120px;
    padding-bottom: 70px;
}
/* new patient end */
/* Extra space so user scrolls */
.spacer{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    color:#777;
}

.scene{
    width:450px;
    height:558px;
    /*margin:100px auto;*/
    perspective:2000px;
}

.book{
    width:100%;
    height:100%;
    position:relative;
}

.page{
    width:100%;
    height:100%;
    position:absolute;
    transform-style:preserve-3d;
    transform-origin: center;
    transition:transform 2.5s ease-in-out;
}

/* Flip animation */
/*
.page.flip{
    transform:rotateY(-180deg);
}*/

.front,
.back{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.front img,
.back img{
    width:auto;
    height:100%;
    object-fit:cover;
}
/*
.back{
    transform:rotateY(180deg);
}
*/
.ceramic-box-lft img {    
	max-width: 100%;
}
/*======== navigation menu start====*/

 
/* ===== MAIN NAV ===== */
.main-nav{
  background:var(--base-color);
  position:relative;
  z-index:1100;
}

.nav-container{
  max-width:1300px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
}
/* Hamburger trigger */
.menu-mobile-trigger{
  display:none;
  background:none;
  border:none;
  font-size:1.6rem;
  color:#fff;
  cursor:pointer;
  line-height:1;
}

/* ===== OVERLAY (mobile backdrop) ===== */
.overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,61,62,0.55);
  z-index:1001;
}

.overlay.active{
  display:block;
}

/* ===== MENU WRAPPER ===== */
.menu{
  /* position is set per-breakpoint below: static/inline on desktop
     so the mega panel anchors to .main-nav (full width), and fixed
     on mobile for the slide-out panel. */
}

.menu-mobile-close{
  display:none;
}

.menu-mobile-header{
  display:none;
  align-items:center;
  gap:10px;
  padding:16px 20px;
  background:#f4f8f7;
  border-bottom:1px solid #e6e6e6;
  position:relative;
  z-index:20;
}

.menu-mobile-header.active{
  display:flex;
}

.menu-mobile-arrow{
  cursor:pointer;
  font-size:1.1rem;
  color:#0f3d3e;
  width:28px;
  height:28px;
  border:1px solid #d9d9d9;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.menu-mobile-title{
  font-weight:600;
  color:#0f3d3e;
  font-size:0.95rem;
}

/* ===== MENU SECTION (nav list) ===== */
.menu-section{
  list-style:none;
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
  gap:4px;
}

/* Position context for dropdowns is set per-breakpoint below (desktop
   anchors small dropdowns to their own <li>; mobile needs the <li>
   to stay unpositioned so its .menu-subs anchors to the full-height
   .menu panel instead). */
.menu-section > li.mega-item{
  position:static;
}

.menu-section > li > a{
  display:flex;
  align-items:center;
  padding:5px 14px;
  color:#fff !important;
  font-weight:600;
  font-size:16px;
  transition:color .2s ease;
  cursor:pointer;
  font-family: var(--font-second);
  text-transform: uppercase;
}

.menu-section > li > a:hover{
  color:#fff !important;
}

.menu-arrow-icon{
  font-size:16px;
  color:#fff;
  transition:transform .2s ease;
  font-style:normal;
}

/* ===== SUBMENU PANELS (desktop = dropdown/mega, mobile = slide-in) ===== */
.menu-subs{
  display:none;
  background:#ffffff;
}

/* Desktop dropdown/mega behaviour */
@media (min-width:992px){
  .menu-item-has-children{
    position:relative;
  }

  /* Mega item's <li> is short but its panel is anchored to the full-width
     .main-nav below, leaving a gap of nav padding in between. Extend the
     li's hoverable hit-area down through that gap (without changing its
     visible height) so the cursor never leaves a hoverable element while
     moving from the "Services" link down into the panel. */
  .menu-section > li.mega-item{
    padding-bottom:24px;
    margin-bottom:-24px;
  }

  .menu-subs{
    position:absolute;
    top:100%;
    left:0;
    min-width:240px;
    box-shadow:0 12px 28px rgba(0,0,0,0.14);
    border-top:3px solid #c99a45;
    padding:14px 0;
    z-index:1001;
  }

  .menu-subs a{
    display:block;
    padding:9px 22px;
    color:#333333;
    font-size:0.87rem;
  }

  .menu-subs a:hover{
    background:#f4f8f7;
    color:#0f3d3e;
  }

  .menu-item-has-children:hover .menu-subs{
    display:block;
  }

  .menu-item-has-children:hover .menu-arrow-icon{
    transform:rotate(180deg);
  }

  /* Mega variant (Services) */
  .menu-subs.mega-subs{
    left:0;
    right:0;
    width:100%;
    padding:32px 20px;
    box-shadow:0 18px 40px rgba(0,0,0,0.18);
  }

  .mega-row{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    max-width:1300px;
    margin:0 auto;
  }

  .mega-col{
    flex:1;
   /* min-width:190px;*/
	  /* min-width:162px;*/
	  min-width:250px;
  }

  .mega-col .col-heading{
    color:#0f3d3e;
    font-weight:700;
    font-size:0.80rem;
    letter-spacing:0.5px;
    text-transform:uppercase;
    margin-bottom:12px;
    padding-bottom:8px;
    border-bottom:2px solid #eee;
	  width:250px;
  }

  .mega-col ul{
    list-style:none;
    margin:0;
    padding:0;
  }

  .mega-col ul li{
    margin-bottom:7px;
  }

  .mega-col ul li a{
    padding:0;
    color:#4a4a4a;
    font-size:0.85rem;
    font-weight:400;
  }

  .mega-col ul li a:hover{
    background:none;
    color:#c99a45;
    text-decoration:underline;
  }

  @media (max-width:1150px){
    .menu-subs.mega-subs{
      padding:26px 22px;
    }
    .menu-section > li > a{
      padding:14px 10px;
      font-size:0.85rem;
    }
  }
}

/* ===== MOBILE (<=991px) ===== */
@media (max-width:991px){
  .top-bar .address{
    display:none;
  }

  .menu-mobile-trigger{
    display:block;
  }

  /* Slide-out panel */
  .menu{
    position:fixed;
    top:0;
    right:-100%;
    width:320px;
    max-width:85vw;
    height:100%;
    background:var(--base-color);
    z-index:1002;
    overflow-y:auto;
    transition:right .35s ease;
  }
  .nav-container {
    justify-content: right;
}

  .menu.active{
    right:0;
  }

  .menu-mobile-close{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:10px;
    right:17px;
    width:34px;
    height:34px;
    background:none;
    border:none;
    font-size:30px;
    color:#fff;
    cursor:pointer;
    z-index:20;
  }

  .menu-section{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    padding-top:56px;
  }

  .menu-section > li{
    width:100%;
    border-bottom:1px solid #f0f0f0;
  }

  .menu-section > li > a{
    padding:13px 20px;
    justify-content:space-between;
  }

  /* Submenu slides in over the main list */
  .menu-subs{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#f9f7f2;
    padding:60px 20px 14px;
    overflow-y:auto;
    z-index:5;
  }

  .menu-subs.active{
    display:block;
  }

  .menu-subs a{
    display:block;
    padding:11px 4px;
    color:#333333;
    font-size:0.9rem;
    border-bottom:1px solid #eee;
  }

  .mega-row{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .mega-col .col-heading{
    color:#0f3d3e;
    font-weight:700;
    font-size:0.85rem;
    letter-spacing:0.5px;
    text-transform:uppercase;
    margin:14px 0 6px;
  }

  .mega-col ul{
    list-style:none;
    margin:0;
    padding:0;
  }
}

@media (max-width:480px){
  .top-bar .top-right{
    gap:10px;
  }
  .top-bar .cta-btn{
    padding:6px 10px;
    font-size:0.72rem;
  }
  .brand{
    font-size:1.15rem;
  }
}

/* ===== SUBMENU SLIDE ANIMATIONS (used by JS via inline style) ===== */
@keyframes slideLeft{
  from{ transform:translateX(100%); }
  to{ transform:translateX(0); }
}

@keyframes slideRight{
  from{ transform:translateX(0); }
  to{ transform:translateX(100%); }
}
/*======== navigation menu end====*/
/* ===== Meet Our Team ===== */
    .team-sec{
        padding: 50px 0;
        background: #f7f7f7
    }
    .team-sec .container{
        width: 100%;
        max-width: 1170px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .team-sec .sec-title{
        text-align: center;
        margin-bottom: 60px;
        position: relative;
    }
    .team-sec .sec-title p.eyebrow{
        color: #8fa4bf;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin: 0 0 8px;
    }
    .team-sec .sec-title h2{
        color: #2f4f7c;
        font-size: 44px;
        font-weight: 600;
        text-transform: uppercase;
        font-family: "Cormorant Garamond", serif;
        letter-spacing: normal;
        line-height: 1.2;
        margin: 0 0 15px;
    }
    .team-sec .sec-title span{
        display: block;
        width: 70px;
        height: 3px;
        margin: 0 auto;
        border-radius: 3px;
        background: linear-gradient(90deg, #4772A9, #7fa6d6);
    }

    /* Card wrapper */
    .team-card{
        display: flex;
        align-items: stretch;
        width: 100%;
        background-color: #ffffff;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 44px;
        box-shadow: 0 10px 30px rgba(38, 63, 102, 0.08);
        border: 1px solid #eef1f6;
        transition: box-shadow 0.35s ease, transform 0.35s ease;
        position: relative;
    }
    .team-card::before{
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(180deg, #4772A9, #8fb1de);
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 2;
    }
    .team-card:hover{
        box-shadow: 0 20px 45px rgba(38, 63, 102, 0.16);
        transform: translateY(-6px);
    }
    .team-card:hover::before{
        opacity: 1;
    }
    .team-card:last-child{
        margin-bottom: 0;
    }

    .team-card .team-img{
        flex: 0 0 34%;
        max-width: 34%;
        min-height: 360px;
        position: relative;
        overflow: hidden;
    }
    .team-card .team-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .team-card:hover .team-img img{
        transform: scale(1.06);
    }
    .team-card .team-img::after{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(20,35,58,0.35) 0%, rgba(20,35,58,0) 40%);
    }
    .team-card .team-img .quote-mark{
        position: absolute;
        bottom: 14px;
        left: 18px;
        color: rgba(255,255,255,0.85);
        font-family: Georgia, serif;
        font-size: 60px;
        line-height: 1;
        font-weight: 700;
        z-index: 1;
    }
    .team-card .team-img .index-num{
        position: absolute;
        top: 16px;
        left: 16px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255,255,255,0.5);
        color: #ffffff;
        font-family: "Cormorant Garamond", serif;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    .team-card .team-text{
        flex: 1 1 66%;
        min-width: 0;
        padding: 44px 48px;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .team-card .team-text .bg-number{
        position: absolute;
        top: -6px;
        right: 30px;
        font-family: var(--font-heding);
        font-size: 110px;
        font-weight: 700;
        color: #4772A9;
        opacity: 0.06;
        line-height: 1;
        user-select: none;
        pointer-events: none;
    }
    .team-card .team-text h3{
        color: #4772A9;
        font-size: 28px;
        font-weight: 600;
        text-transform: uppercase;
        font-family: var(--font-heding);
        letter-spacing: 0.5px;
        line-height: 1.15;
        margin: 0 0 8px;
        position: relative;
    }
    .team-card .team-text h4{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #7186a3;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin: 0 0 18px;
        position: relative;
    }
    .team-card .team-text h4::before{
        content: "";
        width: 24px;
        height: 2px;
        background-color: #4772A9;
        display: inline-block;
    }
    .team-card .tags{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 20px;
        position: relative;
    }
    .team-card .tags span{
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: #4772A9;
        background-color: #eef3fa;
        border: 1px solid #d9e4f2;
        padding: 6px 14px;
        border-radius: 30px;
        text-transform: uppercase;
    }
    .team-card .team-text p{
        color: #5a6474;
        font-size: 18px;
        line-height: 1.85;
        margin: 0 0 16px;
        position: relative;
    }
    .team-card .team-btn{
        margin-top: auto;
        padding-top: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .team-card .team-btn a.read-more{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background-color: #4772A9;
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        padding: 13px 28px;
        border-radius: 30px;
        border: 1px solid #4772A9;
        white-space: nowrap;
        transition: all 0.3s ease;
    }
    .team-card .team-btn a.read-more span.arrow{
        transition: transform 0.3s ease;
    }
    .team-card .team-btn a.read-more:hover{
        background-color: #ffffff;
        color: #4772A9;
    }
    .team-card .team-btn a.read-more:hover span.arrow{
        transform: translateX(4px);
    }

    @media (max-width: 991px){
        .team-sec{
            padding: 55px 0;
        }
        .team-sec .sec-title h2{
            font-size: 32px;
        }
        .team-card{
            flex-direction: column;
        }
        .team-card .team-img,
        .team-card .team-text{
            flex: 0 0 100%;
            max-width: 100%;
        }
        .team-card .team-img{
            min-height: 260px;
        }
        .team-card .team-text{
            padding: 28px 24px;
        }
        .team-card .team-btn{
            justify-content: flex-start;
        }
    }
/* ===== Meet Our Team  end===== */