:root {
    --primaryColor: #00CDFE;
    --darkprime: #344a53;
    --secondaryColor: #00FEB0;
    --complementary: #FE3100;
    --light: #fff;
    --dark: #000;
    --headingFont: 'Noto Serif', serif;
    --bodyFont: 'Roboto Condensed', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--bodyFont) !important;
    letter-spacing: 0.05rem !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--headingFont) !important;
}

img {
    max-width: 100%;
}

/* ------- Header */

header {
    box-shadow: 0 1px 5px #ccc;
}

#logo {
    color: var(--primaryColor);
    font-size: 2rem !important;
}

#openNav i {
    font-size: 2rem;
    display: none;
}

#nav-links {
    position: relative !important;
}

#nav-drop #solution {
    position: absolute !important;
    left: -100% !important;
    top: 130% !important;
}

.nav-link {
    color: var(--dark) !important;
}

.nav-link:hover {
    color: var(--primaryColor) !important;
}

/*
.active {
    color: var(--primaryColor) !important;
}
*/
@media screen and (max-width: 767px) {
    #openNav i {
        display: block;
    }

    #nav-drop #solution {
        position: static !important;
    }

    .dropdown-menu {
        border: none !important;
    }
}

/*
  ------ Hero Section
*/



.hero-img img {
    width: 500px;
    max-width: 100%;
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
    clip-path: polygon(
      0% 0%, /* top-left */
      100% 0%, /* top-right */
      100% 80%, /* bottom-right */
      95% 90%, /* teeth */
      90% 80%, 
      85% 90%, 
      80% 80%, 
      75% 90%, 
      70% 80%, 
      65% 90%, 
      60% 80%, 
      55% 90%, 
      50% 80%, 
      45% 90%, 
      40% 80%, 
      35% 90%, 
      30% 80%, 
      25% 90%, 
      20% 80%, 
      15% 90%, 
      10% 80%, 
      5% 90%, 
      0% 80%
    );
}

.h-contact, .h-book {
    transition: 0.3s ease !important;
}

.h-contact {
    border: 1px solid var(--primaryColor) !important;
    background-color: var(--primaryColor) !important;
}

.h-book {
    border: 1px solid var(--complementary) !important;
    background-color: var(--complementary) !important;
}

.h-contact:hover, .h-book:hover {
    color: var(--dark) !important;
    background-color: transparent !important;
}

.h-look {
    background-color: var(--complementary);
}

@media screen and (max-width: 768px) {
    .hero-img img {
        width: 400px;
    }
}

/*
  -------- About Section
*/

.about-img img {
    width: 500px !important;
}

.about-content {
    height: 100% !important;
}

@media screen and (max-width: 576px) {
    .about-content {
        width: 100% !important;
    }
}



/*
  ---------- Services Section
*/

#services {
    background-image: linear-gradient(rgba(0,205,254,0.4), rgba(0,205,254,0.4)), url(../assets/backimg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#service-link span {
    color: black;
    border: 1px solid var(--secondaryColor) !important;
    background-color: var(--secondaryColor) !important;
    transition: 0.3s ease;
}

#service-link:hover span {
    background-color: transparent !important;
}

.service-bx {
    height: 100% !important;
}

.service-bx div h4 {
    color: var(--darkprime);
}

#services img {
    width: 100% !important;
    height: auto;
}

/*
  --------- Appoitment Section
*/

form button {
    border: 1px solid var(--primaryColor) !important;
    background-color: var(--primaryColor) !important;
    transition: 0.3s ease;
    color: white !important;
}

form button:hover {
    background-color: transparent !important;
    color: black !important;
}


/*
  -------- Testimonials Section
*/

#testimonials {
    margin-block: 7rem !important;
}

#testimonials > div > h2 {
    margin-bottom: 4.4rem !important;
}

.test-name > div h4 {
    font-style: italic;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
}

/*
  --------- Footer Section
*/

footer {
    background-color: var(--darkprime) !important;
}

.socials a {
    margin-inline: 2px;
}

.socials a:hover {
    color: var(--complementary) !important;
}

.footer-content h2 {
    color: var(--primaryColor);
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.moto-header {
    font-weight: 800;
    font-style: italic;
}

.footer-content .moto {
    font-style: italic;
    font-weight: 500;
}

/*

.footer-content .moto::before {
    content: '"';
    color: var(--complementary);
    font-size: 2rem;
    margin-right: 10px;
}

.footer-content .moto::after {
    content: '"';
    color: var(--complementary);
    font-size: 2rem;
    margin-left: 10px;
}
*/

/*
  -------- Responsive Design
*/

/* Desktop view */

@media screen and (min-width: 600px) {

    .hero {
        height: 90vh;
    }

    .hero .home {
        margin-top: 0 !important;
    }

    .about-img img {
        width: 700px !important;
    }

    .about-content h2 {
        margin-bottom: 36px !important;
    }
    .about-text {
        width: 75% !important;
        margin-inline: auto;
    }

    #services img {
        height: 250px !important;
    }

    #book-appoitment {
        width: 600px !important; 
        margin-inline: auto;
    }

    .form-floating input {
        height: 2rem;
        font-size: 1rem;
    }

    .form-naming {
        display: flex;
        justify-content: space-between;
    }
    
    .form-names {
        display: inline-block;
        width: 45%;
        margin: 0 !important;
    }

    .form-names input {
        width: 100%;
    }

    #contact-section .row > div:last-of-type {
        margin-top: 0 !important;
    }

    .contact-forms {
        width: 40% !important;
    }

    .moto {
        width: 100% !important;
    }

    .footer-content {
        min-width: 400px !important;
    }

    .moto {
        margin-top: 2px !important;
    }
}

@media screen and (min-width: 992px) {
    .f-sec {
        min-height: 240px !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1024px) {
    .hero {
        height: 60vh !important;
    }
}

/*
@media screen and (min-width: 600px) and (max-width: 1023px) {
    #services img {
        width: 60% !important;
    }
}
*/