@charset "UTF-8";
/* Phoenix OBGYN 
=================
--->Typography
        Typeface
        Sizing and Color
--->Header- Logo, Phone Number, Social Media Icons, Slider
--->Color Palette
--->Breakpoints
==========================================================*/
@keyframes fade {
    0%{opacity: 0;}
    100%{opacity:100;}
}
/*================
Typography
==================*/
    /*============
      Typeface
    ==============*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@font-face {
 font-family: 'Open Sans', sans-serif;
 src:url('https://fonts.googleapis.com/css?family=Open+Sans');
}

body{
    font-family:"open-sans", sans-serif;
    color:#0b0146;
}
    /*=======================
    General Sizing and Color
    =========================*/
.nav-link {
    color:#0b0146;
}

h3 {
    font-weight:bold;
}
h4 {
    font-weight:bold;
}

p.tight {
    line-height: 1.2;
}
h1.display-4 {
    font-size:2.5rem;
}
.btn.gradientbtn {
    background:linear-gradient(to right,#e0013f,#5c0047,#0b0146);
    color: #ffffff;
    border:0;
   
}
.navbar-light .navbar-nav .nav-link{
    color:#0b0146;
    transition: 1s;
}
.navbar-light .navbar-nav .nav-link:hover{
     color:orange;
}
.dropdown-item:hover{
    color:orange;
}
.blogbg {
    background-image: url("../image/svg/blogbg.svg");
    background-repeat: no-repeat;
}
button {
    background-color:transparent;
    color:#ffffff;
}
.btn {
    border: 1px solid white;
}
.welcome {
    color:#0b0146;
    position:relative;
    animation-name: fade;
    animation-duration:3s;
    animation-fill-mode:forwards;
}
footer .nav-link {
    color:white;
    font-weight: lighter;
    padding: 4px 16px 4px 16px;
}
.card {
    border:0;
}

/*======================
Header - social media icons, phone symbol, logo, dropdown menu
========================*/
img.socialicon{
    height:35px;
}

.fa-phone {
    color:#0b0146;
}
.phonenumber{
    font-size:1.5rem;
}
.logo{
    height:90px;
}
.navigation-color{
    background-color: #ffffff;
    box-shadow: 0px 6px 10px -2px rgba(0,0,0,0.40);
}
.dropdown-menu {
    border:0;
    border-radius: 0;
}
.dropdown-item {
    color:#0b0146;
}
    /*================
    Slider - Main slider and Testimonal slider
    =================*/

.carousel-caption {
    bottom:30%;
}
.carousel-caption.testimonal {
    bottom:20%;
    line-height: 1.2;
    font-weight: lighter;
}
.signature {
    font-style: italic;
}
h3.slidertitle {
    font-weight: lighter;
    font-size: 4rem;
    text-align: left;
}
p.subtitle {
    font-weight:100;
    font-size: 2rem;
    text-align: left;
}
.fas.fa-star {
    color:#faaf3a;
}
.far.fa-star {
    color:#ffffff;
}
/*=============================
About Page Appointment
==============================*/
p.appointmenttext{
    color:#ffffff;
    line-height: 1.2;
}
.appointmenttext{
    color:#ffffff;
}
/*Color Palette*/
.pink {
    background-color: #fca0ba;
    color:#ffffff;
}
.lightpink {
    background-color: #fad6e0;
}
.blue {
    background-color: #0b0146;
    color: #ffffff;
    position:relative;
    animation-name: fade;
    animation-duration:3s;
    animation-fill-mode:forwards;
}
.orange {
    background-color: #f2932f;
    color: #0b0146;
    position:relative;
    animation-name: fade;
    animation-duration:3s;
    animation-fill-mode:forwards;
}

.burgundy {
    background-color: #5c0047;
    color: #ffffff;
    position:relative;
    animation-name: fade;
    animation-duration:3s;
    animation-fill-mode:forwards;
}
/*=============================
 Breaking point
==============================*/
@media (max-width: 575.98px) { 
.logo{
        width:150px;
    }
    ul.navbar-nav.pl-5{
        font-size:1rem;
    }
    .blogbg {
        background-image: url("../image/svg/blogbg-sm.svg");
        background-repeat: no-repeat;
    } 
    .blue{
        height:200px;
    }
    h3.slidertitle{
        font-size:1rem;
    }
    .carousel-caption{
        bottom:10%;
    }
    p.subtitle{
        font-size:1.5rem;
    }
    .carousel-caption.testimonal {
        bottom:1%;
        font-size:.9rem;
    }
    div img.profile-image{
        width:50px;
    }
    p.signature{
        font-size:.5rem;
    }
       
    p.ptestimonal{
        margin-bottom:5px;
        
    }
}

@media (min-width: 1px) and (max-width:575px){
    .display{
        display:none;
    }
       div.col-md-5.d-flex.justify-content-end.pt-4 {
        width:20px;
    }
    ul.list-inline{
        padding-left: 200px;
    }
}

/*==================================================
Small devices (landscape phones, 576px and up)
===================================================*/
@media (min-width: 576px) and (max-width: 767.98px) { 

      .logo{
        width:150px;
    }
    ul.navbar-nav.pl-5{
        font-size:1rem;
    }
    .blogbg {
        background-image: url("../image/svg/blogbg-sm.svg");
        background-repeat: no-repeat;
    } 
    .blue{
        height:200px;
    }
    h3.slidertitle{
        font-size:2.5rem;
    }
    .carousel-caption{
        bottom:10%;
    }
    p.subtitle{
        font-size:1.5rem;
    }
    div.welcome p{
        width:496px;
    }
    .carousel-caption.testimonal {
        bottom:1%;
        font-size:.9rem;
    }
    div img.profile-image{
        width:50px;
    }
    p.signature{
        font-size:.5rem;
    }
       
    p.ptestimonal{
        margin-bottom:5px;
        
    }
    /*About Page*/
    h1.display-4 {
    font-size:2rem;
}
    .display{
        display:none;
    }
    div.col-md-5.d-flex.justify-content-end.pt-4 {
        width:20px;
    }
    ul.list-inline{
        padding-left: 130px;
    }
}

/*======================================================
Medium devices (tablets, 768px and up)
========================================================*/
@media (min-width: 768px) and (max-width: 991.98px) { 
    .logo{
        width:150px;
    }
    ul.navbar-nav.pl-5{
        font-size:.7rem;
    }
    .blogbg {
        background-image: url("../image/svg/blogbg-md.svg");
        background-repeat: no-repeat;
    } 
    .blue{
        height:305px;
    }
    h3.slidertitle{
        font-size:3rem;
    }
    .carousel-caption{
        bottom:20%;
    }
    .carousel-caption.testimonal {
        bottom:4%;
        font-size:.9rem;
    }
}
    
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
    
    .blogbg {
    background-image: url("../image/svg/blogbg-lg.svg");
    background-repeat: no-repeat;
} 
    .blue{
        height:267px;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .blue{
        height:229px;
    }
}