/* Global Colors */
:root {
     --primary-color:#1F9CE3;
     --secondary-color:#183E9F;
     --light-blue-color:#132540; 
     --light-grey-color:#F4F6FC;
   }
  body {
    font-family: 'Poppins', sans-serif;
}
nav sup{
  font-size: 6px;
  top: -1.5em!important;
}
.marketplace sup{
  font-size: 9px;
  top: -1.5em!important;
}
  .bg-primary
  {
    
    background-color: var(--primary-color)!important;
    border: var(--primary-color)!important;
  }

  .btn-primary
  {
    color: var(--primary-color);
    background-color: var(--primary-color);
    border: var(--primary-color);
  }
  .btn-primary:hover
  {
    color: var(--primary-color);
    background-color: var(--primary-color);
    border: var(--primary-color);
  }
  .btn-secondary
  {
    
    background-color: var(--secondary-color)!important;
    border: var(--dark-grey-color);
  }
  .btn-secondary:hover
  { 
    background-color: var(--secondary-color)!important;
    border: var(--dark-grey-color);
  }


.bg-gray
{
  background-color: var(--light-grey-color)!important;
border-color: transparent; 
}
.card
{
  border: 2px solid #fff;
}

.services .card:hover
{ 
  transition: 0.1s!important;
  border: 2px solid #1f9ce3;
}

.services .card a:hover

  {
    background: #fff!important;
    color: var(--primary-color)!important;
}

  
  .text-primary
  {
    color: var(--primary-color)!important;

  }
  .text-secondary
  {
    color: var(--dark-blue-color)!important;

  }
  
  hr{
    opacity: initial;
    background-color:  var(--primary-color);
    border:  var(--primary-color);
    height: 2px
  }
  .main
  {
    background-image: url("../images/background/bg_hero.png");
     background-size: cover; 
     height:  100vh;
     background-color: #0d6efd;
  }
  .what_we_do
  {
    background-image: url("../images/background/bg_what_to_do_doctor4.png");
     background-size: cover;  
     height: 80vh;
     position: relative;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
  }
  .what_we_do img
  {
    width: 40px;
  }
  @media screen and (max-width: 897px)
  { 
    .what_we_do
    {
      background-image: url("../images/background/bg_what_we_do.svg");
      background-size: cover;  
      height: inherit;
    }
  }
  @media screen and (min-width: 1230px)
  {
  .services .ovaries {
    display: flex;
    z-index: 9999;
    position: absolute; 
    margin-top: -48px; 
    justify-content: space-evenly;
  }
}
  .what_to_expect
  {
    background-image: url("../images/background/bg_what_to_expect.svg");
     background-size: cover;  
  }
  .bg_cover
  {
    background-image: url("../images/background/bg_services1.svg");
     background-size: cover;  
  }
   
  .contraception_details
  {
    background-image: url("../images/background/bg_contraceptive.png");
     background-size: cover;  
  }
  .main_legal_disclaimer
  {
    background-image: url("../images/background/bg_hero.png");
     background-size: cover; 
     background-color: var(--primary-color);
     height:  35vh;
  }
 
 
   .sti_details
  {
    background-image: url("../images/background/bg_sti.png");
     background-size: cover;  
  }

  .main_faq_details
  {
    background-image: url("../images/background/bg_hero.png");
     background-size: cover; 
     background-color: var(--primary-color);
     height:  35vh;
  }
 
  .counselling_details
  {
    background-image: url("../images/background/bg_counselling.png");
     background-size: cover;  
  }
  .counselling_details .card
  {
    background-color: #ffffff9e;  
  }

  .main_hero
  {
    background-image: url("../images/background/bg_hero2.png");
     background-size: cover; 
     background-color: var(--primary-color);
     height: 24vh;
  }
  .main_hero_2
  {
    background-image: url("../images/background/bg_hero3.png");
     background-size: cover; 
     background-color: var(--primary-color);
     height: 29vh;
  }
  .main_hero_3
  {
    background-image: url("../images/background/bg_hero4.png");
     background-size: cover; 
     background-color: var(--primary-color);
     height: 29vh;
  }
  .main_hero_4
  {
    background-image: url("../images/background/bg_hero5.png");
     background-size: cover; 
     background-color: var(--primary-color);
     height: 100vh;
  }
  .main_hero_5
  {
    background-image: url("../images/background/bg_hero5.png");
     background-size: cover; 
     background-color: var(--primary-color);
     height: 35vh;
  }
  @media screen and (min-width: 400px)
  {
    .counselling_details 
    {
      height: 70vh;
    }
    
}
@media screen and (min-width: 1000px)
{
  .prep_details, .contraception_details
  {
    height: 80vh;
  }
  
}

  .prep_details
  {
    background-image: url("../images/background/bg_prep2.png");
     background-size: cover;  
     
  }
  .prep_details .card
  {
    background-color: #1e9be4dc!important;
    border-color: transparent!important;
    
  }

  .sti_drop_inn_details
  {
    background-image: url("../images/background/bg_unintented_preg.png");
     background-size: cover;  
  }
  .sti_drop_inn_details .card
  {
    background-color: #ffffffdc!important;
    border-color: transparent!important;
    
  }

  .what_to_expect p{
    text-align: justify;
  }

  .text-opacity-9
  {
    opacity: 0.9;
  }
  .text-opacity-8
  {
    opacity: 0.8;
  }
  .text-opacity-7
  {
    opacity: 0.7;
  }
 

.w-40
{
  width: 40%!important
}
.w-30
{
  width: 30%!important
}

.contact
{
  padding: 40px 20px 20px 40px;
}

@media screen and (max-width: 1200px)
{
  .services .col-md-3
  {
    width: auto!important;
  }
}


   
  @media (max-width:400px)
  {
    #mainNav img{
      width:118px;
    }
  }
  .small-device-video 
  {
    display: none;
  }
  @media screen and (max-width: 768px)
{ 
  
  .small-device-video 
  {
    display: block;
    left: 40%!important;
    top: 60%!important;
  }
  .pulse-icon 
  {
     
    left: 40%!important;
    top: 56%!important;
  }
  .larger-device-video
  {
    display: none;
  }


}

   
.pulse-icon {
  width: 70px;
    height: 70px;
    background-color: #6a509680;
    border-radius: 50%;
    position: absolute;
    top: 30%;
    left: 69%;
    transform: translate(-50%, -50%);
    animation: pulse_effect 7s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
   color: whitesmoke;
   cursor: pointer;
}

@keyframes pulse_effect {
  0% {
      transform: scale(0.8);
      opacity: 0.7;
  }
  50% {
      transform: scale(1.9);
      opacity: 1;
  }
  100% {
      transform: scale(0.9);
      opacity: 0.7;
  }
}




  .main a
  { 
    margin: auto;
    width: 40%;
  }
  .wave
  {
    position:absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: -1;
  }
  .wave-top
  {
    position: absolute;
    bottom: -200px;
    width: 100%;
    left: 0px;
    z-index: -1;
  }
  @media (max-width:1360px)
  {
    .wave-top
    {
      bottom: -145px;
    }
  }

  @media (max-width:1200px)
  {
    .wave
    {
     
    }
    .wave-top
    {
      bottom: -145px;
    }
    .opportunities .container h2
    {
    color: #1e1e20!important;
    }
    .opportunities a
    {
    width: 70%!important;
    }
  }

  @media (max-width:991px)
  {
    .wave-top
    {
      bottom: -115px;
    }
  }

  @media (max-width:750px)
  {
    .wave-top
    {
      bottom: -115px;
    }
  }
  @media (max-width:750px)
  {
    .wave
    {
     display: none;
    }

    .wave-top
    {
     display: none;
    }
    .opportunities h2
    {
      display: block!important;
    }

  }
 
  .contact
  {
    background-image: url("../images/background/bg_contact.png");
    background-size: cover;
  }
  
  .contact a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  .contact a:hover{ 
    color: var(--primary-color); 
    cursor: pointer;
  }
 

/* Animations */

.bounce {
  animation: bounce 6s ease-in-out infinite ;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.fade-in-left {
  animation: fade-in-left 4s ease infinite;
  animation-delay: 2s;
}
@keyframes fade-in-left {
  0% {
    opacity: 0.5;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.bounce-in {
  animation: bounce-in 8s ease-in-out;
  animation-delay: 2s;
}
@keyframes bounce-in {
  0% {
    opacity: 1;
    transform: scale(.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1.2); }
}

.bounce-in-right {
  animation: bounce-in-right 4s ease-in-out  ;
  animation-delay: 4s;
}
@keyframes bounce-in-right {
  0% {
    opacity: .8;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.pulse {
  animation: pulse 8s infinite ease-in-out alternate;
}
@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}
/* Animation end */


.navbar-collapse
{
padding: 12px;
}

  .text-dark-orange
  {
    color: var(--bg-dark-orange);
  }
  .text-light-blue
  {
    color: var(--heading-text-light-color);
  }
  
  .bg-dark-blue
  {
    background-color: var(--heading-text-color);
  }
  
  .bg-light-orange
  {
    background-color: var(--bg-light-orange-2);
  }
  
  .objectives
  {
    background-color: var(--bg-dark-cream-white);
  }
  
  .objectives .card{
    background-color: var(--bg-cream-white);
      border-radius: 10px;
      border: var(--bg-cream-white);
      height: 100%;
      width: 90%;
  }
  
  .text-dark-blue
  {
    color: var(--heading-text-color);
  }
    
  
  .bg-light-gray
  {
    background-color: var(--bg-light-gray);
  }
  
  .bg-light-pink
  {
    background-color: var(--bg-light-pink);
  }
  
  .bg-light-orange
  {
    background-color: var(--bg-light-orange);
  }
  
  .bg-light-cream-white
  {
    background-color: var(--bg-cream-white);
  }
 
  @media screen and (max-width:750px) {
    .benefits .img-bullets img
    {
    max-width: 20%;
    }


  }
   
  .contact
  {
    background-color: var(--bg-dark-orange);
  }
   
  /* ------------------------------Transitions------------------------------ */
  
  /* ------------------------------NAVBAR------------------------------ */
.nav-bar-img
  {
    margin-left: 89px;
    display: none;
  }

  @media screen and (min-width:1024px)  {
 
    .nav-bar-img
    {
      margin-left: 89px;
      display:block
    }
    #mainNav .container .navbar-brand
  { 
    display: none;
  }
  }

  button:focus:not(:focus-visible) {
    outline: transparent!;
}

#mainNav .navbar-toggler {
  font-size: 16px;
  padding: 0.5rem 1rem;
  color: var(--primary-color);
  border: transparent
}

.navbar-nav
{
  font-size:13px;
}
@media screen and (min-width:992px) and (max-width:1131px){
  .navbar-nav
{
  font-size:10px;
}
}

.headerButtons .btn:hover
{
  background-color: #1d335e;
}

@media (max-width: 1290px)
{
  .collapse:not(.show) {
    display: none;
  }


}
 

@media screen and (min-width:992) {
  .dropdown:hover .dropdown-toggle::after{
    border-top: 0;
    border-bottom: .3em solid;
  }
}
.dropdown:hover .dropdown-menu
{
  display: block;
  margin-top:0;
  margin-left: auto;
}
 
.dropdown .dropdown-menu
{
  display: none; 
}

  
 
@media screen and (max-width:1299px) and (min-width:1125px) {
  #navbarResponsive a, .btn {
    letter-spacing: 0.8px;
    font-size: x-small;
  }
}
@media screen and (max-width:1126px) and (min-width:992px) {
  

  #navbarResponsive a, .btn {
    letter-spacing: 0.4px;
    font-size:10px;
  }

  #mainNav .collapse
  { 
    margin: 10px;
  }
  #headerIcons 
  {
    width: 75%;
    top: 31px;
  } 
  #headerIcons  img
  {
    width: 10%;
  }

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

}
@media screen and (min-width:1127px)  {
 
  #headerIcons  img
  {
   display: none;
  }

  #headerIcons .socialMedia
  {
    direction: rtl;
  }

}

@media screen and (max-width:991px)  {
 
  #headerIcons  img
  {
   display: none;
  }

  #headerIcons .socialMedia
  {
    direction: rtl;
    top:5px
  }

}
 /* -- Logo on small devices */
@media  screen and (min-width:992px) and (max-width:1388px)  {
 
nav sup { 
  display: none;
}
}
@media  screen and (min-width:992px) and (max-width:1095px)  {
  #headerIcons img {
    justify-content: center;
    width: 12%;
    display: block;
    position: absolute;
    margin: -27px;
    top: 0px; 
    right: 262px;
}
}



#mainNav
{
   padding-bottom: 0rem;
}

#navbarResponsive li
{
 letter-spacing: 0.5px;
}

#navbarResponsive .headerButtons a,.btn {
  font-size: 12px;
}
 
   
.text-sm
{
  font-size: 15px!important; 
}
  .text-xs
  {
  font-size: 12px;
  }
  
  .text-xxs
  {
    font-size: 10px;
  }
  
  .opacity-8
  {
    opacity: 0.8;
  }
  .opacity-7
  {
    opacity: 0.7;
  }
  .opacity-6
  {
    opacity: 0.6;
  }
  .opacity-5
  {
    opacity: 0.5;
  }
  .opacity-4
  {
    opacity: 0.4;
  }
  .opacity-3
  {
    opacity: 0.3;
  }
  
  .text-dark
  {
    color: #1e1e20!important;
  }
  section {
    color: var(--color-default);
    background-color: var(--color-background);
    padding: 90px 0;
    overflow: clip;
    padding-left: 100px;
    padding-right: 70px;
  }

  /* MOBILE view */

@media screen and (max-width:768px)  {
 
    .main  
    {
      padding: 2rem!important;
      height: auto;
    }
    .main h1
    {
      font-size: 20px!important;
    }
    main h5
    {
      font-size: 15px;
    }
    .main .device a{
      display: inherit;
      width: 80%;
      margin-top: -47px!important;
      background: #7f4887;
      color: #ffff!important;
      font-weight: 200!important
    }; 

    .device 
    {
      display: none;
    }

    section { 
      padding-left: 30px;
      padding-right: 30px;
    }



  }

   
/* ------------------------------Transitions------------------------------ */

.section-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 2s ease;
}
.section-animate.appear {
  opacity: 1;
  transform: translateY(0);
}


  /* ---------------------PAGE SCROLLER ------------------------*/

::-webkit-scrollbar {
  width: 7px;
  height: 6px;
}

body::-webkit-scrollbar-track {
  background-color: var(--white);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border: 1px solid var(--white);
  border-radius: 10px;

}

iframe {width:100%;  min-height:300px;}