/*


SHARED


*/
@media (max-width: 576px) { 
    * {
        font-size: 5vw;
    }  

    a {
        color: #fff !important;
    }

    #navbar-expanded {
        display: none !important;
    }

    #navbar-logo {
        width: 55% !important;
    }

    #jumbotron {
        height: 200vw !important;
        margin-top: 0px !important;
    }


    #navbar-selected-page{
        border-style: none;
        font-weight: bolder;
        border-style: none !important;
        
    }


    .services-preview-card {
        width: 150vw !important;
    }

    #banner-text-small {
        display: block !important;
    }

    #banner-text-large {
        display: none !important;
    }


    #jumbotron > div:nth-child(2) > div > a > button {
        font-size: 1.5rem !important;
    }

    #headshot {
        height: 60vw !important;
    }

    #lotus-flower {
        height: 55vw !important;
    }

    #about-us-headshot {
        height: 80vw !important;
        margin-left: 0px !important;
        margin-top: 0px !important;
    }

    #about-us-flower {
        height: 70vw !important;
    }

    #about-us > div > div > h1 {
        font-size: 4.3rem !important;
    }

    #services > div > div > h1 {
        font-size: 4.3rem !important;
    }

    #contact-us > div > div > h1 {
        font-size: 4rem !important;
    }

    #client-form > div > form > div > input {
        height: 12vw !important;
    }

    #client-form > div > form > div > select {
        height: 12vw !important;
    }

    #services-title {
        margin-top: -40vw !important;
    }

    #services-flower-top {
        width: 30vw !important;
        position: relative !important;
        left: -12vw !important;
        top: -29px !important;
    }

    #services-flower-bottom {
        width: 30vw !important;
        right: -69% !important;
        bottom: 20vw !important;
        margin-bottom: -20vw !important;
    }

    #animation {
        margin-top: 0px !important;
    }
}

@media ((min-width: 576px) and (max-width: 768px)) { 
    * {
        font-size: 4vw;
    }  

    a {
        color: #fff !important;
    }

    #navbar-selected-page{
        border-style: none;
        font-weight: bolder;
        border-style: none !important;
        
    }

    #navbar-logo {
        max-width: 260px;
    }

    #navbar-expanded {
        display: none !important;
    }

    #banner-text-small {
        display: block !important;
    }

    #banner-text-large {
        display: none !important;
    }

    #jumbotron {
        height: 160vw !important;
        margin-top: 0px !important;
    }

    #jumbotron > div > div > img {
        height: 115vw !important;
    }

    #jumbotron > div:nth-child(2) > div > a > button {
        font-size: 1.5rem !important;
    }

    #headshot {
        height: 50vw !important;
    }

    #lotus-flower {
        height: 55vw !important;
    }

    .services-preview-card {
        width: 90vw !important;
        min-height: 92vw !important;
    }

    #about-us-headshot {
        height: 70vw !important;
        margin-left: 0px !important;
        margin-top: 0px !important;
    }

    #about-us-flower {
        height: 60vw !important;
    }

    #client-form > div > form > div > input {
        height: 6vw !important;
    }

    #client-form > div > form > div > select {
        height: 6vw !important;
    }

    #client-form > div > form > div > input {
        height: 10vw !important;
    }

    #client-form > div > form > div > select {
        height: 10vw !important;
    }

    #services-title {
        margin-top: -40vw !important;
    }

    #services-flower-top {
        width: 30vw !important;
        position: relative !important;
        left: -5vw !important;
        top: -101px !important;
    }

    #services-flower-bottom {
        width: 30vw !important;
        right: -69% !important;
        bottom: 20vw !important;
        margin-bottom: -20vw !important;
    }

    #animation {
        margin-top: 0px !important;
    }
}



@media ((min-width: 768px) and (max-width: 1199px)) {
    * {
        font-size: 2vw;
    } 

    a {
        color: #000 !important;
        font-size: 0.9rem !important;
    }

    #navbar-compact {
        display: none !important;
    }

    #navbar-expanded {
        display: block !important;
    }

    #jumbotron {
        height: 40vw !important;
    }

    #headshot {
        height: 24vw !important;
    }

    .services-preview-card {
        width: 80vw !important;
        min-height: 47vw !important;
    }

    #about-us-headshot {
        height: 30vw !important;
    }

    #about-us-flower {
        height: 28vw !important;
    }

    #client-form > div > form > div > input {
        height: 6vw !important;
    }

    #client-form > div > form > div > select {
        height: 6vw !important;
    }

    #services-flower-top {
        width: 20vw !important;

    }

    #services-flower-bottom {
        width: 20vw !important;
        bottom: -5vw !important;
        right: -80% !important;
    }
}


@media (min-width: 1200px) {
    * {
        font-size: 1.5vw;
    } 

    a {
        color: #000 !important;
    }

    #navbar-compact {
        display: none !important;
    }

    #navbar-expanded {
        display: block !important;
    }

    #client-form > div > form > div > input {
        height: 4vw !important;
    }

    #client-form > div > form > div > select {
        height: 4vw !important;
    }
}

@media (min-width: 1400px) {
    * {
        font-size: 1.1vw;
    }
}

@media (min-width: 2000px) {
    * {
        font-size: 1vw;
    }
}

@media (min-width: 3000px) {
    * {
        font-size: 0.8vw;
    }

    #jumbotron {
        height: 28vw !important;
    }

    #banner-text-large {
        height: 12vw !important;
    }

    #lotus-flower {
        height: 15vw !important; 
    }
}


#navbar-top-border{
    background-color: #F0D2DB;
    height: 35px;
}

#navbar-compact {
    padding-bottom: 0px !important;
}

#navbarSupportedContent {
    background-color: #FD9EBA;
}

#navbarSupportedContent > ul {
    color: #fff !important
}

.navbar-toggler {
    color: #fff;
    border: none !important;
}

#navbar-toggler-img {
    height: 10vw;
}

#navbar-logo {
    width: 94%;
    height: auto;
    max-width: 320px;
}

a {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    text-decoration: none !important;
}

a:hover {
    color: #FD9EBA !important;
}

a:hover {
    color: #F0D2DB !important;
}

#navbar-selected-page {
    border-bottom: 5px solid #F0D2DB;
}

.navbar .col p{
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;;
}

#footer-section {
    background-color: #F0D2DB;
    font-family: 'Inter';
}

#footer-section > div > div:nth-child(1) > img {
    width: auto; 
    height: 160px;
}

p {
    font-size: 1rem;
}


/*


HOME PAGE


*/

#jumbotron {
    background-image: url(./../images/cherry-bottom-background.jpeg);
    background-size: cover;
    background-position: 0 70%;
    background-repeat: no-repeat;
    backdrop-filter: blur(3px);
    margin-top: 20px;
    height: 34vw;
    object-position: 0 80%;
}

#banner-text-small {
    display: none;
    height: 130vw;
}

#banner-text-large {
    display: block;
    height: 17vw;
}

#jumbotron > div > div > img {
    filter: drop-shadow(0px 8px 5px #000);
}

#jumbotron > div:nth-child(2) > div > a > button {
    filter: drop-shadow(0px 0px 0px #fff);
    background-color: #FF92B2;
    color: #fff;
    animation: pulse 3s infinite;
    font-size: 1rem;
}

#jumbotron > div:nth-child(2) > div > a > button:hover{
    background-color: #f8759b;
    color: #fff;
    animation:normal;
    transform:scale(1);
    transition-duration: 300ms;
}

@keyframes pulse {
    0% {
      filter: drop-shadow(0px 0px 0px #fff);
        transform:scale(1);
    }
    70% {
        filter: drop-shadow(0px 0px 3px #fff);
        transform:scale(1.02);
    }
    100% {
        filter: drop-shadow(0px 0px 0px #fff);
      transform: scale(1);
    }
  }


#about-us-section {
    font-family: 'Inter', sans-serif;
}

#headshot {
    border-radius: 50%;
    height: 17vw;
    width: auto;
}


#about-us-position-title {
    color: #FF92B2;
}

.about-us-header {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
}

#mission-section {
    font-family: 'Inter', sans-serif;
    color: #fff;
    background: linear-gradient(#FD9EBA, #F0D2DB), no-repeat fixed;
}

#lotus-flower {
    height: 20vw; 
    width: auto;
}


#insurance-section {
    font-family: 'Inter', sans-serif;
    color: #013548
}

.insurance-provider-name-preview {
    font-weight: lighter;
}

#insurance-provider-subtitle {
    margin-top: -5px;
    font-size: 1rem;
    font-weight: lighter;
}

#services-section {
    background-color: #013548; 
    font-family: 'Inter', sans-serif;
    color: #fff;
}

.services-preview-card {
    background-color: #fff; 
    width: 23vw; 
    padding: 0 30px; 
    border-radius: 14px;
    color:#013548;
}

.services-preview-card > hr {
    width: 200px;
    margin: 20px auto;
}

.services-preview-card > h1 {
    text-align: center;
}

#call-to-action-section {
    background-image: url(./../images/background-1.png); 
    background-size: cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(4px); 
    padding-top: 100px; 
    padding-bottom: 100px;
}

#call-to-action-section > div:nth-child(1) {
    background-color: #fff; 
    padding: 30px 30px; 
    font-family: 'Inter', sans-serif; 
    filter: drop-shadow(0 8px 5px #000)
}

#call-to-action-section > div:nth-child(1) > div > h2 {
    font-family: "Parisienne", cursive;
    font-size: 3.36rem;
    color: #FD9EBA;
}

#call-to-action-section > div > div:nth-child(3) > div > a > button {
    background-color: #013548; 
    color: #fff; 
    filter: drop-shadow(0px 3px 5px #000);
}

#call-to-action-section > div > div:nth-child(3) > div > a > button:hover  {
    background-color: #FD9EBA !important;
    transform: scale(1.1);
    transition-duration: 125ms;
}




/*


ABOUT US PAGE


*/
#about-us {
    background-color: #FD9EBA;
    color: #fff;
    font-family: 'Inter';
}

#about-us > div > div > h1 {
    font-family: 'Poiret One'; 
    font-size: 4.8rem; 
}

#about-us-headshot { 
    height: 20vw; 
    margin-left: -12vw; 
    margin-top: 10px; 
    border-radius: 15px; 
    border: 5px solid white
}

#about-us-flower {
    height: 16vw; 
    opacity: 50%;
}





/*


SERVICES PAGE


*/
#services {
    background-color: #FF6391; 
    font-family:'Inter';
    color: #fff !important;
    overflow: hidden;

}

#services > div > div > h1 {
    font-family: 'Poiret One'; 
    font-size: 4.8rem; 
}

.services-card {
    background-color:#D9587E; 
    border: solid 1px #FD79A0; 
    border-radius: 15px;
}

#services-flower-top {
    width: 15vw; 
    position: absolute; 
    transform: rotate(45deg); 
    opacity: 50%
}

#services-flower-bottom {
    width: 15vw; 
    position: relative; 
    bottom: -5vw;
    right: -86%;
    transform: rotate(230deg); 
    opacity: 50%;
}


/*


INSURANCE PAGE


*/
#insurance {
    background-color: #fff;
    font-family:'Inter';
    color: #013548 !important;
}

#insurance > div > div > h1 {
    font-family: 'Poiret One'; 
    font-size: 4.8rem;
}



/*


CONTACT US PAGE


*/
#contact-us {
    background-color: #FD9EBA;
    font-family:'Inter';
    color: #fff;
}

#contact-us > div > div > h1 {
    font-family: 'Poiret One'; 
    font-size: 4.8rem;
}

#confirmation-message {
    display: none !important;
}

#confirmation-message > div {
    padding-bottom: 200px;
}

#confirmation-message > div > div:nth-child(2) > img {
    max-width: 600px;
}

#client-form > div {
    font-size: 0.96rem;
}

#client-form > div > form > div > input {
    height: 3vw;
}

#client-form > div > form > div > select {
    height: 3vw;
}

#client-form > div > form > button {
    background-color: #013548; 
    color: #fff;
}

#contact-us-iframe {
    position: absolute; 
    visibility: hidden  
}





/*

LAUNCH PAGE

*/

#launch-page {
    background-color: #FD9EBA;
    color: #fff;
    font-family: 'Inter';
}

#launch-page-countdown {
    display: flex; 
    justify-content: center;
}

#launch-page-countdown > li {
    list-style-type: none;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    color:#013548
}

#launch-page-countdown > li.seperator {
    margin: 0 10px;
    font-size: 4rem;
    line-height: 1.3;
    color: #013548;
}

#launch-page-countdown > li > span {
    display: block;
    font-size: 4rem;
    color: #013548;

}

#animation {
    margin-top: -350px;
}