/* 
Theme Name: EJ Web Design - Dental
Author: Eric Ranner
Author URI: https://dev.eranner.website
Descripton: A custom theme for dental business.
Version: 1.0
License: GNU General Public License v2 or later
*/

@font-face {
    font-family: digital;
    src: url('./assets/fonts/Michroma-Regular.ttf');
}

@font-face {
    font-family: head-font;
    src: url('./assets/fonts/LexendZetta-VariableFont_wght.ttf');
}

@font-face {
    font-family: main-text;
    src: url('./assets/fonts/CarroisGothic-Regular.ttf');
}

@font-face {
    font-family: thick-text;
    src: url('./assets/fonts/BebasNeue-Regular.ttf');
}

body {
    background-color: #030E28!important;
}
/* *{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  } */
  
  /* h1{
    font-size: 2.5rem;
    font-family: 'Montserrat';
    font-weight: normal;
    color: #444;
    text-align: center;
    margin: 2rem 0;
  } */
.wordpress-container {
    max-width: 850px;
    margin: auto;
    margin-top: 4rem;
}

  .wordpress-container > h1,h2,h3,h4,h5, h6{
    font-family:head-font!important;
    margin-bottom: 2rem!important;
  }
  .wordpress-container > p {
    font-family: main-text;
  }
  .wrapper{
    width: 90%;
    margin: 0 auto;
    max-width: 80rem;
  }
  
  .cols{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .col{
    width: calc(25% - 2rem);
    min-width: 250px;
    margin: 1rem;
    cursor: pointer;
  }
  
  .card-container{
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
      -webkit-perspective: 1000px;
              perspective: 1000px;
  }
  
  .front,
  .back{
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
    border-radius: 10px;
      background-position: center;
      -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      text-align: center;
      min-height: 280px;
      height: auto;
      border-radius: 10px;
      color: #fff;
      font-size: 1.5rem;
  }
  
  .back{
    background: #030E28;
    background: -webkit-linear-gradient(45deg,  #030E28 0%,#2D3889 100%);
    background: -o-linear-gradient(45deg,  #030E28 0%,#2D3889 100%);
    background: linear-gradient(45deg,  #030E28 0%,#2D3889 100%);
  }
  
  .front:after{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      content: '';
      display: block;
      opacity: .6;
      background-color: #000;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      border-radius: 10px;
  }
  .card-container:hover .front,
  .card-container:hover .back{
      -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
      transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  }
  
  .back{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
  }
  
  .inner{
      -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
              transform: translateY(-50%) translateZ(60px) scale(0.94);
      top: 50%;
      position: absolute;
      left: 0;
      width: 100%;
      padding: 2rem;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      outline: 1px solid transparent;
      -webkit-perspective: inherit;
              perspective: inherit;
      z-index: 2;
  }
  
  .card-container .back{
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
  }
  
  .card-container .front{
      -webkit-transform: rotateY(0deg);
              transform: rotateY(0deg);
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
  }
  
  .card-container:hover .back{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  
  .card-container:hover .front{
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  
  .front .inner p{
    font-size: 2rem;
    margin-bottom: 1rem;
    position: relative;
  }
  
  .front .inner p:after{
    content: '';
    width: 4rem;
    height: 2px;
    position: absolute;
    background: #C6D4DF;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -.75rem;
  }
  
  .front .inner span{
    color: rgba(255,255,255,0.7);
    font-family: main-text;
    font-weight: 300;
  }
  
  @media screen and (max-width: 64rem){
    .col{
      width: calc(33.333333% - 2rem);
    }
  }
  
  @media screen and (max-width: 48rem){
  .cols{
    flex-direction: column;
    align-items: center;
  }
    .col{
      width: calc(50% - 2rem);
    }
  }
  
  @media screen and (max-width: 32rem){
    .col{
      width: 100%;
      margin: 0 0 2rem 0;
    }
  }
#main-navbar-logo{
    height: 100px;
}

.nav-link {
    font-family: thick-text;
    color: white!important;
    font-size: 2rem!important;
}

#link-holder {
    display: flex;
    justify-content: center;
    width: 100%;
}

#navbar-cta {
    font-family:thick-text;
    color: white;
    font-size: 1.25rem;
    text-shadow: 2px 2px #333;
    background-color: #00ADEE;
    border: 3px solid rgba(255, 255, 255, 0.52);
    border-radius: 5px;
    box-shadow: 4px 4px 24px 3px rgba(255, 255, 255, 0.52);
}

.navbar-cta-class {
    font-family:thick-text;
    color: white;
    font-size: 2rem;
    min-width: 200px;
    text-shadow: 2px 2px #333;
    background-color: #00ADEE;
    border: 3px solid rgba(255, 255, 255, 0.52);
    border-radius: 5px;
    box-shadow: 4px 4px 24px 3px rgba(255, 255, 255, 0.52);
}

#free-span {
    color: #030E28;
    text-decoration: underline;
    text-shadow: .5px .5px #333;
}

.main-hero {
    height: 800px;
    background-image: url('./images/pink-blue-main.svg');
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction:column;
    justify-content: center;
    transition: opacity 3s ease-in-out; /* Adjust duration and easing */
    text-shadow: 3px 3px 3px #333;

}
.contact-form-holder {
    min-height: 800px;
    background-image: url('./images/left-right-back.svg');
    background-size: cover;
    display: flex;
    padding: 0 3rem 0 3rem;
    justify-content: space-between;
    font-family: thick-text;
}

.contact-description {
    color: white;
    width: 40%;
    margin-top: 3rem;
    font-size: 1.5rem;

}

.contact-form {
    margin-top: 3rem;
    width: 50%;
    height: 90%;
    border: 3px solid white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    align-items: center;
}

.form-inputs {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-bottom: 1rem;
}
.form-input {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 8px 8px  4px hsla(0, 0%, 100%, 0.25);
    /* height: 50px; */
    border-radius: 5px;
    font-size: 1.5rem;
}

.form-label {
    font-size: 1.5rem;
    color: white;
    text-shadow: 2px 2px 2px #333;
}

.main-contact-submit {
    border: 3px solid white;
    height: 97px;
    font-size: 1.5rem;
    background:transparent;
    color: white;
    border-radius: 5px;
    width: 250px;
    font-family: head-font;
    transition: ease-in-out 1s;

}
.main-contact-submit:hover {
    background-color: #E200F0;
    text-shadow: 2px 2px 2px #333;
}
#contact-inquiry {
    height: 170px;
}

.contact-us-header {
    color: white;
    font-family: head-font;
    font-size: 2rem;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


.main-hero.visible {
    opacity: 1; /* Fully visible */
}

.fading-image { /* Add this to ensure transitions work correctly */
    transition: background-image 0.5s ease-in-out; /* Optional: Transition the background-image property itself */
}

.smarter {
    font-size: 6rem;
    font-family: head-font;
    color: #E200F0;
    padding-left: 30px;
    /* text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.52); */
}

.dental-marketing {
    font-size: 3.5rem;
    color:#00ADEE;
    padding-left: 30px;
    font-family: head-font;
    /* text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.52); */
}

.hero-tagline {
    font-family: thick-text!important;
    color: white;
    font-size: 2.2rem;
    padding-left: 35px;
    letter-spacing: 10px;
    margin-top: 3rem;
}

.cta-hero {
    background-color: #00ADEE;
    color:#030E28;
    border: 3px solid rgba(255, 255, 255, 0.52);
    border-radius: 5px;
    box-shadow: 4px 4px 24px 3px rgba(255, 255, 255, 0.52);
    font-size: 3rem;
    font-family: thick-text;
    width: 250px;
    margin-left: 30px;
    margin-top: 3rem;
}

.video-holder {
    max-width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 10px;
}

#main-video {
    object-fit: cover;
    height: 500px;
    width: 700px;
    border-radius: 10px;
    box-shadow: 4px 4px 24px 3px rgba(255, 255, 255, 0.52);
}

.video-section {
    height: 750px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        to bottom, 
        #030E28 0%, 
        #1B2151 31%, 
        #2D3889 57%
      );
      margin-top:3rem;
}

.vid-label {
    color:#E8E8E8;
    text-align: center;
    font-size: 2.5rem;
    font-family: head-font;
    margin-bottom: 3rem;
    letter-spacing: 1px;
    text-shadow: 3px 3px 3px #333;
}
footer {
    background-color: #2D3889;
    height: 200px;
}
.footer-link-holder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 20%;
    justify-content: center;
}
.footer-link-holder > a {
    font-family: thick-text;
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}
.footer-sm-holder {
    display:flex;
    justify-content: center;
    width: 20%;
    gap: 20px;
}
.link-holder {
    display:flex;
    justify-content: center;
}
.footer-holder {
    display: flex;
    justify-content: space-around;
    height: 100%;
    align-items: center;
    }
.sm-logo {
    height: 50px; 
    widtH: 50px;
    
}

.footer-image-holder {
    display:flex;
    justify-content: center;
}
.footer-logo {
    height: 100px;
}

.program-section {
    background: white;
    color: #030E28;

}

.program-section-holder {
    display: flex;
    flex-direction: column;
    padding-top: 3rem;
}

.content-section-header {
    font-family : head-font;
    text-align: center;
    margin-top: 2rem;
    color: #030E28;

}

.program-section-tagline{
    font-family: main-text;
    font-size: 1.25rem;
    text-align: center;
    margin: auto;
    width: 80%;
    margin-top: 2rem;
}

.small-headline {
    color:#2D3889;
    font-family: main-text;
    font-size: 1.5rem;
    margin-top: 2rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .service-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    position: relative;
    height: 300px;
    /* font-size: 1.5rem; */
    overflow: hidden; /* Add this line */
}

  .service-item:hover {
    transform:translate(2px, -4px);
    transition: ease-in-out .5s;
  }
  
  .service-item:nth-child(even) {
    background-color: #2a3a7c; /* Dark blue for odd items */
    color: white;
  }
  
  .service-item:nth-child(odd) {
    background-color: #f0f0f0; /* Light gray for even items */
    color: black;
  }
  
  .service-icon img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
  }
  
  .service-item h3 {
    margin: 10px 0;
    font-size: 1.5rem;
    font-family: head-font;
  }
  
  .more-link {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: auto;
    font-family: head-font;
    font-size: 2rem;
  }
  
  .arrow {
    height: 50px;
  }

  .bio-holder-wrapper {
    border: 3px solid #030E28;
    border-radius: 5px;
    padding: 3rem;
}
.bio-holder {
    overflow: hidden; /* Clearfix for floated elements */
}
.bio-pic-section {
    float: left; 
    width: 300px;
    margin-right: 2rem; /* Space between image and text */
}
.bio-pic-holder {
    background-size: cover;
    background-position: center;
    height: 300px;
    width: 300px;
    background-color: #f0f0f0; /* Fallback color */
};
.bio-text-holder {
    /* Text flows around the floated image */
}
.bio-text {
    font-size: .75rem;
    margin: 0 0 1rem 0; /* Spacing between paragraphs */
}
.clear-below-image {
    clear: both; /* Forces text to start below the image */
    width: 100%; /* Takes full width */
}
.bio-header {
    text-align:center;
    margin-bottom: 1rem!important;
}

.bio-social-media {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem!important;

}
.bio-extended {
    display:block;
}

.read-more-header {
    display:none;
    text-align: center;
    margin:auto;
    background-color: #030E28;
    color: white;
    margin-top: 2rem;
    width: 200px;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
}
/* Responsive design: stack vertically on smaller screens */
@media (max-width: 768px) {
    .read-more-content > p {
        font-size:1.1rem;
    }
    .bio-holder-wrapper {
        padding: 1rem;
    }
    .bio-pic-section {
        float: none; /* Remove float */
        width: 100%; /* Full width for image */
        margin-right: 0;
        margin-bottom: 1rem; /* Space below image */
        display: flex;
        justify-content: center;
    }
    .bio-text-holder {
        width: 100%; /* Full width for text */
    }
    .clear-below-image {
        clear: none; /* No need for clearing in stacked layout */
    }
    .bio-extended {
        display:none;
    }

    .read-more-header {
        display: block;
    }
}
@media screen and (max-width: 950px) {
    .service-item {
        height: 250px;
    }
    .service-item  h3 {
        font-size: 1rem;
    }
    .arrow {
        height: 30px;
    }

    .more-link {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 760px) {
    footer {
        height: 100%;
        padding-bottom: 3rem;
    }
    .footer-holder {
        flex-direction: column-reverse;
        gap: 2rem;
    }
    .footer-link-holder{
        width: 100%;
        gap: 20px;
        padding: 1rem;
    }

    .footer-sm-holder {
        margin-top: 2rem;
    }
    .contact-form-holder {
        flex-direction: column;
        height: 100%;
    }
    .contact-description {
        width: 100%;
        text-align: center;
    }
    .contact-form {
        width: 100%;
        margin-bottom: 3rem;
    }

    .form-input {
        background: #bababa;
    }
    .main-contact-submit {
        font-size: 1.2rem;
        height: 60px;
    }
    .main-contact-submit:hover{
        background-color: #030E28;
    }
    .video-section{
        height: 500px;
    }
    #main-video {
        height: 375px;
        width: 525px;
    }
    .smarter {
        font-size: 4rem;
        padding-left: 10px;
    }
    .dental-marketing {
        font-size: 2rem;
        padding-left: 10px;

    }

    .hero-tagline {
        font-size: 1.5rem;
        padding-left: 15px;
        letter-spacing: 5px;
    }

    .cta-hero {
        margin-left: 10px;
        margin-top: 2rem;
        font-size: 2rem;
    }

    .main-hero {
        justify-content: flex-start;
        padding-top: 2rem;
        height: 450px;
    }
}

@media screen and (max-width: 600px){
    .services-grid {
        display:flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
    }

    .service-item {
        width: 300px;
    }
}
@media screen and (max-width: 530px) {
    #main-video {
        height: 250px;
        width: 325px;
    }
    .video-section{
        height: 400px;
    }

    #main-navbar-logo {
        height: 75px;
    }
}
@media screen and (max-width: 460px) {
    .cols {
        padding: 2px;
    }
    .contact-form-holder {
        padding: 1rem;
    }
    .vid-label {
        font-size: 1.5rem;
    }

    .smarter {
        font-size: 3rem;
    }
    .dental-marketing {
        font-size:1.75rem;
    }
    .hero-tagline {
        text-align:center;
        padding: 5px;
    }
    .cta-hero {
        margin: auto;
        margin-top: 2rem;

    }
}

@media screen and (max-width: 345px) {
    .smarter {
        font-size: 2.5rem;
        padding: 5px;
        text-align: center;
    }
    .dental-marketing {
        font-size: 1.5rem;
        padding: 5px;
        text-align: center;


    }
    .hero-tagline {
        font-size: 1.25rem;
        
    }
}

@media screen and (max-width: 325px){
    #main-video {
        height: 200px;
        width: 300px;
    }
}