/* ===================================
   RESPONSIVE MEDIA QUERIES
   Organized from largest to smallest screens
   =================================== */

/* ===================================
   4K DISPLAYS (2560px and above) - Home Page Components
   =================================== */
@media (min-width: 2560px) {
    /* Testimonial Cards */
    .testimonial-card,
    .testimonial-card2 {
        height: 750px !important;
        width: 1800px !important;
        padding: 30px !important;
    }

    .testimonial-card h3,
    .testimonial-card2 h3 {
        font-size: 24px !important;
    }

    .testimonial-card p,
    .testimonial-card2 p {
        font-size: 25px !important;
        line-height: 1.6 !important;
    }

    /* Experience Box */
    .experience-box {
        width: 440px !important;
        height: 190px !important;
        padding: 25px !important;
    }

    .experience-box .years {
        font-size: 100px !important;
    }

    .experience-box .text {
        font-size: 25px !important;
    }
    
    /* Hero Carousel */
    .hero-carousel .carousel-item img {
        height: 70vh !important;
    }

    /* Background Carousel */
    #backgroundCarousel,
    .hero-section3 {
        height: 80vh !important;
    }

    /* Marquee */
    .marquee-container {
        margin-top: 5% !important;
        font-size: 27px !important;
    }

    /* Contact Section */
    .contact-section h1 {
        font-size: 48px !important;
    }

    .contact-section h2 {
        font-size: 32px !important;
    }

    .contact-info p {
        font-size: 16px !important;
    }

    /* Forms */
    .form-control {
        font-size: 16px !important;
        padding: 15px 20px !important;
    }
}

/* ===================================
   LARGE DESKTOPS (1440px and above)
   =================================== */
@media (min-width: 1440px) {


    .testimonial-card2 {
        margin-top: 10% !important;
    }

    .read-more-btn3 {
        margin-bottom: 40px !important;
    }
}

/* ===================================
   DESKTOPS (1300px - 1439px)
   =================================== */
@media (max-width: 1300px) {
    .read-more-btn3 {
        margin-bottom: 40px !important;
    }
}

/* ===================================
   DESKTOPS 1280x832 RESOLUTION
   =================================== */
@media screen and (max-width: 1280px) and (max-height: 900px),
       screen and (max-width: 1280px) and (max-height: 832px) {
    .testimonial-card,
    .testimonial-card2 {
        height: 500px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .testimonial-card .divider,
    .testimonial-card2 .divider {
        margin-top: auto !important;
    }

    .feedback-dots {
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
    }
}

/* ===================================
   LARGE TABLETS/LAPTOPS (1200px - 1299px)
   =================================== */
@media (max-width: 1200px) {
    .read-more-btn3 {
        margin-bottom: 40px !important;
    }

    .form-control {
        margin: 0px 2px 32px 2px !important;
    }
}


/* ===================================
   MEDIUM DESKTOPS (1025px - 1199px)
   =================================== */
@media (max-width: 1024px) {
    /* Marquee adjustments */
    .marquee-container {
        margin-top: 7.5%;
    }

    /* Experience box positioning */
    .experience {
        margin-left: -20px;
        margin-bottom: -48px !important;
    }

    /* Dentistry section */
    .dentistry-header {
        font-size: 33px !important;
    }

    .dentistry-subHeader {
        padding-top: 10px !important;
        font-size: 33px !important;
    }

    .dentistry-text {
        font-size: 19px !important;
        line-height: 40px !important;
    }

    .read-more-btn2 {
        margin-top: 0px !important;
        padding: 7px 25px !important;
    }

    /* Kids section */
    .kids-cool h1 {
        font-size: 48px !important;
    }

    .kids-cool p {
        font-weight: 200;
        font-size: 23px !important;
        margin: 10px 0 0 !important;
    }

    .tooth-fairy1,
    .tooth-fairy2 {
        padding-top: 40px !important;
        width: 80px !important;
    }

    .kids-cool {
        padding-left: 20px !important;
        color: #F0EFE7 !important;
    }

    .kids-cool h2 {
        font-size: 24px !important;
    }

    .kids-cool h4 {
        line-height: 35px !important;
        padding-top: 10px !important;
        font-size: 24px !important;
    }

    .kids-cool ul {
        padding-left: 20px !important;
        padding-top: 10px !important;
    }

    .kids-cool ul li h4 {
        font-size: 18px !important;
        line-height: 30px !important;
    }

    /* Exceptional section */
    .exceptional h1 {
        font-size: 50px !important;
    }

    /* Forms and buttons */
    .read-more-btn3 {
        padding: 7px 26px !important;
        font-size: 13px !important;
        margin-bottom: 10px;
    }

    .form-control {
        margin: 0px 2px 32px 2px !important;
    }

    /* Contact section */
    .end-logo {
        margin-right: -47px !important;
    }

    .contact-info p {
        font-size: 12px !important;
    }

    .contact-section h1 {
        font-size: 37px !important;
    }

    .contact-section h2 {
        font-size: 25px !important;
    }
}

/* ===================================
   TABLETS (997px - 1024px)
   =================================== */
@media (max-width: 996px) {
    /* Dentistry section */
    .dentistry-header {
        font-size: 24px !important;
    }

    .dentistry-subHeader {
        padding-top: 10px !important;
        font-size: 22px !important;
    }

    .dentistry-text {
        font-size: 13px !important;
        line-height: 30px !important;
    }

    .read-more-btn2 {
        margin-top: 0px !important;
        padding: 7px 25px !important;
        font-size: 14px !important;
    }

    /* Kids section */
    .kids-cool h1 {
        font-size: 39px !important;
    }

    .kids-cool p {
        font-weight: 200;
        font-size: 16px !important;
        margin: 10px 0 0 !important;
    }

    .tooth-fairy1,
    .tooth-fairy2 {
        padding-top: 40px !important;
        width: 64px !important;
    }

    .kids-cool {
        padding-left: 20px !important;
        color: #F0EFE7 !important;
    }

    .kids-cool h2 {
        font-size: 21px !important;
    }

    .kids-cool h4 {
        line-height: 35px !important;
        padding-top: 10px !important;
        font-size: 24px !important;
    }

    .kids-cool ul {
        padding-left: 20px !important;
        padding-top: 10px !important;
    }

    .kids-cool ul li h4 {
        line-height: 26px !important;
        font-size: 15px !important;
    }

    /* Exceptional section */
    .exceptional h1 {
        font-size: 40px !important;
    }

    /* Forms and buttons */
    .read-more-btn3 {
        padding: 7px 26px !important;
        font-size: 13px !important;
        margin-bottom: 10px;
    }

    .form-control {
        margin: 0px 2px 9px 2px !important;
    }

    /* Contact section */
    .end-logo {
        margin-right: -47px !important;
    }

    .contact-info p {
        font-size: 12px !important;
    }

    .contact-section h1 {
        font-size: 30px !important;
    }

    .contact-section h2 {
        font-size: 20px !important;
    }
}

/* ===================================
   LARGE TABLETS (769px - 996px)
   =================================== */
@media (max-width: 768px) {
    /* Marquee adjustments */
    .marquee-container {
        margin-top: 10%;
    }

    /* Hero sections */
    .hero-section2 {
        padding: 50px 0px;
    }

    .hero-carousel .carousel-item img {
        height: 50vh !important;
    }

    .hero-section {
        display: block !important;
        min-height: auto;
    }

    /* Fixed content */
    .fixed-content h2 {
        font-size: 35px;
    }

    .fixed-content p {
        font-size: 21px;
    }

    .hero-section2 h2 {
        font-size: 23px !important;
    }

    /* Experience box */
    .experience-box {
        font-size: 12px;
    }

    .experience-box span {
        font-size: 34px;
    }
}

/* ===================================
   MOBILE LANDSCAPE (601px - 768px)
   =================================== */
@media (max-width: 600px) {
    /* Marquee adjustments */
    .marquee-container {
        margin-top: 19%;
    }

    /* Hero sections */
    .hero-section2 {
        padding: 50px 0px;
    }

    .hero-carousel .carousel-item img {
        height: 50vh !important;
    }

    .hero-section {
        display: block !important;
        min-height: auto;
    }

    /* Fixed content */
    .fixed-content h2 {
        font-size: 20px;
    }

    .fixed-content p {
        font-size: 18px;
    }

    .hero-section2 h2 {
        font-size: 18px !important;
    }

    /* Experience box */
    .experience-box {
        font-size: 12px;
    }

    .experience-box span {
        font-size: 22px;
    }

    /* Hero text */
    .hero-text h1 {
        line-height: 30px !important;
        font-size: 18px !important;
    }

    .hero-text h2 {
        font-size: 18px !important;
    }

    /* Buttons */
    .read-more-btn {
        padding: 8px 26px !important;
    }

    /* Tooth fairy icons - hidden on mobile */
    .tooth-fairy1,
    .tooth-fairy2 {
        display: none;
    }

    /* Kids section */
    .kids-cool {
        padding-left: 20px !important;
        color: #F0EFE7 !important;
    }

    .kids-cool h2 {
        font-size: 21px !important;
    }

    .kids-cool h4 {
        line-height: 35px !important;
        padding-top: 10px !important;
        font-size: 24px !important;
    }

    .kids-cool ul {
        padding-left: 20px !important;
        padding-top: 10px !important;
    }

    .kids-cool ul li h4 {
        font-size: 17px !important;
        line-height: 31px !important;
    }

    .read-more-btn3 {
        padding: 7px 26px !important;
        font-size: 13px !important;
        margin-bottom: 10px;
    }

    /* Exceptional section */
    .exceptional h1 {
        font-size: 30px !important;
    }
}

/* ===================================
   MOBILE PORTRAIT (481px - 600px)
   =================================== */
@media (max-width: 480px) {
    /* Marquee adjustments */
    .marquee-container {
        margin-top: 19%;
    }

    /* Hero sections */
    .hero-section2 {
        padding: 50px 0px;
    }

    .hero-carousel .carousel-item img {
        height: 50vh !important;
    }

    /* Fixed content */
    .fixed-content h2 {
        font-size: 20px;
    }

    .fixed-content p {
        font-size: 18px;
    }

    .hero-section2 h2 {
        font-size: 18px !important;
    }

    /* Experience box */
    .experience-box {
        font-size: 12px;
    }

    .experience-box span {
        font-size: 22px;
    }

    /* Dentistry section */
    .dentistry-header {
        font-size: 38px !important;
    }

    .dentistry-subHeader {
        padding-top: 10px !important;
        font-size: 24px !important;
    }

    .dentistry-text {
        font-size: 18px !important;
        line-height: 30px !important;
    }

    .read-more-btn2 {
        margin-top: 0px !important;
        padding: 7px 25px !important;
    }

    /* Kids section */
    .kids-cool h1 {
        font-size: 39px !important;
    }

    .kids-cool p {
        font-weight: 200;
        font-size: 17px !important;
        margin: 10px 0 0 !important;
    }

    .tooth-fairy1,
    .tooth-fairy2 {
        display: none;
    }

    .kids-cool {
        padding-left: 20px !important;
        color: #F0EFE7 !important;
    }

    .kids-cool h2 {
        font-size: 19px !important;
    }

    .kids-cool h4 {
        line-height: 35px !important;
        padding-top: 10px !important;
        font-size: 24px !important;
    }

    .kids-cool ul {
        padding-left: 20px !important;
        padding-top: 10px !important;
    }

    .kids-cool ul li h4 {
        line-height: 34px !important;
    }

    .read-more-btn3 {
        padding: 7px 26px !important;
        font-size: 13px !important;
        margin-bottom: 10px;
    }

    /* Exceptional section */
    .exceptional h1 {
        font-size: 24px !important;
    }
}

/* ===================================
   SMALL MOBILE (381px - 480px)
   =================================== */
@media (max-width: 380px) {
    /* Marquee adjustments */
    .marquee-container {
        margin-top: 21%;
    }

    /* Fixed content */
    .fixed-content h2 {
        font-size: 20px;
    }

    .fixed-content p {
        font-size: 18px;
    }

    .hero-section2 h2 {
        font-size: 18px !important;
    }

    /* Experience box */
    .experience-box {
        font-size: 12px;
    }

    .experience-box span {
        font-size: 22px;
    }

    /* Dentistry section */
    .dentistry-header {
        font-size: 26px !important;
    }

    .dentistry-subHeader {
        padding-top: 10px !important;
        font-size: 24px !important;
    }

    .dentistry-text {
        font-size: 18px !important;
        line-height: 30px !important;
    }

    .read-more-btn2 {
        margin-top: 0px !important;
        padding: 7px 25px !important;
    }

    /* Kids section */
    .kids-cool h1 {
        font-size: 31px !important;
    }

    .kids-cool p {
        font-weight: 200;
        font-size: 11px !important;
        margin: 10px 0 0 !important;
    }

    .tooth-fairy1,
    .tooth-fairy2 {
        display: none;
    }

    .kids-cool {
        padding-left: 20px !important;
        color: #F0EFE7 !important;
    }

    .kids-cool h2 {
        font-size: 15px !important;
    }

    .kids-cool h4 {
        line-height: 35px !important;
        padding-top: 10px !important;
        font-size: 24px !important;
    }

    .kids-cool ul {
        padding-left: 20px !important;
        padding-top: 10px !important;
    }

    .kids-cool ul li h4 {
        font-size: 13px !important;
        line-height: 26px !important;
    }

    /* Exceptional section */
    .exceptional h1 {
        font-size: 20px !important;
    }

    /* Forms and buttons */
    .read-more-btn3 {
        padding: 7px 26px !important;
        font-size: 13px !important;
        margin-bottom: 10px;
    }

    /* Bootstrap overrides */
    .ps-5 {
        padding-left: 10px !important;
    }

    .pb-5 {
        padding-bottom: 0px !important;
    }

    .read-more-btn {
        font-size: 11px !important;
        padding: 5px 20px !important;
    }
}

/* ===================================
   VERY SMALL MOBILE (280px - 380px)
   =================================== */
@media (max-width: 280px) {
    /* Dentistry section */
    .dentistry-header {
        font-size: 22px !important;
    }

    .dentistry-subHeader {
        font-size: 18px !important;
    }

    /* Kids section */
    .kids-cool h1 {
        font-size: 48px !important;
    }

    .kids-cool p {
        font-weight: 200;
        font-size: 26px !important;
        margin: 10px 0 0 !important;
    }

    .tooth-fairy1,
    .tooth-fairy2 {
        display: none;
    }

    .kids-cool {
        padding-left: 20px;
        color: #F0EFE7;
    }

    .kids-cool h4 {
        line-height: 35px !important;
        padding-top: 10px !important;
        font-size: 24px !important;
    }

    .kids-cool ul {
        list-style-type: disc !important;
        padding-left: 20px !important;
        padding-top: 10px !important;
    }

    .kids-cool ul li h4 {
        line-height: 50px !important;
    }

    /* Exceptional section */
    .exceptional h1 {
        font-size: 15px !important;
    }

    /* Buttons */
    .read-more-btn3 {
        padding: 7px 26px !important;
        font-size: 13px !important;
    }
}


@media (max-width: 999px) {
    .testimonial-card,
    
    .testimonial-card2 {
        height: fit-content;
        padding: 20px !important;
        width: 100%;
    }
}