/*==================================================
=            Bootstrap 5 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

body{
    font-family: "poppins", arial, helvetica;
}


/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 320px) {
    .navbar{
        background: #64a4d9;
        color: #fff;
    }
    .navbar-brand {
        max-width:35%;
    }
    a.navbar-brand figure img{
        content:url("../images/logo-dental-experts.png");
    }
    .navbar-toggler-icon {
        background-image: url(../images/bg-menu.png);
    }
    .navbar-toggler {
        border: none;
    }
    .navbar-toggler:focus{box-shadow:none;}

    #my-nav-dental > ul > li{
        margin:0px;
        padding: 0px;
        border-bottom: 1px solid #7dc1f9;
    }
    #my-nav-dental > ul > li > a{
        color:#f9f9f9;
        text-transform: uppercase;
        text-align:left;
    }
    #my-nav-dental > ul > li > a:hover{
        color:#fff;
        font-weight: bold;
    }

    #my-nav-dental > div > a{
        background:#365072;
        color:#fff;
        margin:20px 0px 10px 0px;
    }
    #my-nav-dental > div > a:hover{background:#64a4d9;}
    .btn{
        border-radius: 25px;
        padding:10px 20px;
        text-align:center;
    }

    #banner{
        background:url("../images/bg-banner-mobile-2.jpg") no-repeat center top;
        background-size: 102%;
        padding-top:80px;
        padding-bottom:45px;
        text-align: center;
    }

    #banner p.title{
        color:#365072;
        font-size: 30px;
        font-weight:bold;
        margin:95% 0% 0px 0%;
    }

    #banner p.title span{
        color:#64a4d9;
    }
    #banner p{
        font-size:14px;
        font-weight:400;
        margin:15px 0px;
    }
   a.btn{
        background:#64a4d9;
        color: #fff;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    a.btn:hover{
        background:#365072;
        color:#fff;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    #promos{
        background:url("../images/bg-promos-mobile.jpg") no-repeat center;
        background-size:cover;
        text-align:center;
        left:0px;
        right:0px;
    }

    #promos figure{
        width:100%;
        margin: 0;
    }
    #promos .carousel-control-prev-icon{
        background-image: url("../images/arrow-left.png");
        width:32px;
        height: 14px;
    }
    #promos .carousel-control-next-icon{
        background-image: url("../images/arrow-right.png");
        width:32px;
        height: 14px;
    }
    .carousel-indicators [data-bs-target]{
        background-color:#64a4d9;
        width:15px;
        height:15px;
        border-radius:50%;
    }

    #promos a.btn{
        display: block; 
        font-weight:bold;
        margin:10px auto; 
        max-width:60%;
    }
    #carouselPromos{
        padding:0px 0px 50px 0px;
    }

    #carouselPromos { padding:0px; }
    #promos figure img{
        max-width:100%;
    }

    #promos h2{
        color: #365072;
        font-size: 39px;
        margin: 60px 0px 0px 0px;
        font-weight: bold;
    }
    #promos h2 span{color:#64a4d9;}

    #promos a.btn{
        margin: 50px 0;
        padding: 10px 20px;
        font-size: 24px;
        border-radius: 40px;
        max-width:100%;
    }
    #promos a.btn.w100{
        font-size: 21px;
        font-weight:bold;
        border-radius: 40px;
        width:100%;
        margin: 30px auto 60px auto;
    }


    #video{
        background:#365072;
        color:#cfdce8;
        padding:30px;
        text-align:center;
    }

    #video h1{
        color:#cfdce8;
        margin: 20px 0px 30px 0px;
    }
    #video h1 span{color:#64a4d9;}

    #servicios{
        padding-top:80px;
        padding-bottom:80px;
    }



    #servicios h3{
        color:#365072;
        font-size:28px;
        font-weight:bold;
        margin: 50px 0px 0px 0px;
    }
    #servicios > div > div:nth-child(1) > div > p{
        font-size:18px;
        margin:20px 10px;
    }
    #servicios p{
        font-size:16px;
        margin:  0px 10px 20px 10px;
    }

    #servicios h2{
        color:#365072;
        font-size:18px;
        font-weight:bold;
    }

    #servicios > div > div:nth-child(2) > div > div{
        border:3px solid #f8f8f8;
        border-radius:10px;
        margin-bottom: 20px;
    }
    #servicios > div > div:nth-child(2) > div > div > figure > img{
        border-radius:10px;
        width: 100%;
    }

    #servicios a{
        color:#64a4d9;
        display: inline-block;
        font-size:14px;
        text-decoration: none;
        margin:10px 0px;
    }

    #servicios > div > div:nth-child(2) > div:nth-child(4) > div{
        background:#cfdce8;
        color:#365072;
    }

    #servicios ul{
        margin: 15px 0px;
        padding:0px;
        font-size:14px;
        list-style: none;
    }
    #servicios ul li{
        margin: 5px;
        padding: 0px 5px;
    }
    #servicios > div > div:nth-child(2) > div:nth-child(4) > div > p{
        font-size:18px;
        font-weight:bold;
    }
    #contacto, #testimoniales{
        background:#e5ecf3;
        padding: 100px 0px 0px 0px;
    }

    #contacto iframe{
        border:4px #dde0e3 solid;
    }

    #contacto p{
        color:#64a4d9;
        font-size:28px;
        font-family:"poppins", arial;
        font-weight:bold;
        margin: 30px;
        line-height: 1.2;
    }

    #contacto p span{color:#365072;}

    .item-testimonio{
        background:#fff;
        border-radius:10px;
        box-shadow: 0px 0px 8px -6px #0a2e72;
        display:block;
        float:left;
        margin-bottom:30px;
        margin-top:80px;
        padding:20px;
    }
    .item-testimonio .top-elements{
        position: relative;
        top:-60px;
        display:block;
        float:left;
        width: 100%;
    }
    .item-testimonio figure.client{
        display: block;
        float:left;
        width:90px;
    }
    .item-testimonio figure.comillas{
        display: block;
        float:right;
        margin:20px 0px;
    }
    .item-testimonio figure.estrellas{
        display: block;
        float: right;
        margin: -40px 0px 0px 0px;
        max-width:73px;
    }

    

     .item-testimonio h3{
        color:#365072;
        float: left;
        font-size:21px;
        font-weight:bold;
        margin: -40px 10px 0px 10px;
        width: 70%;
    }
    .item-testimonio span.puesto{
        color:#64a4d9;
        float: left;
        margin: 0px 10px;
        position:relative;
        top:-10px;
        width: 100%;
    }

    .item-testimonio p{
        color:#0a2e72;
        display: block;
        float:left;
        font-size:16px;
        font-weight:normal;
        margin:15px 10px;
        min-height: 150px;
    }

    footer{
        background:#365072;
        color:#fff;
        padding:50px 0px;
        text-align:center;
    }

    footer h2{
        font-size:26px;
        font-weight:bold;
        margin-bottom:20px;
    }

    footer h4{
        font-size:17px;
        font-weight:bold;
        margin:10px 0px;
    }

    footer p{font-size:14px;}

    ul#social-links{
        margin: 0px auto;
        padding:0px;
        width: 52%;
        display: block;
        float: none;
    }
    ul#social-links li{
        float:left;
        margin: 20px 10px ;
        padding:0px;
        list-style:none;
    }

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

    
    #banner{
        background:url("../images/bg-banner-3.jpg") no-repeat center top #d9d4d8;
        background-size: cover;
        padding-top:60px;
        padding-bottom:45px;
        text-align: left;
    }

    #banner p.title{
        color:#365072;
        font-size: 40px;
        font-weight:bold;
        margin:0%;
        max-width:68%;
    }

    #banner p.title span{
        color:#64a4d9;
        max-width:70%;
    }
    #banner p{
        font-size:19px;
        font-weight:200;
        margin:15px 0px;
        max-width:68%;
    }
    #promos{
        text-align:left;
    }
    #promos figure img{
        width:100%;
        margin: 0px;
        line-height:0px;
    }
    #carouselPromos p{
        color:#64a4d9;
        font-size:18px;
    }

    #video{
        margin-top: 50px;
        padding:30px;
        text-align:left;
    }

    #video h1{
        color:#cfdce8;
        margin: 10% 0px 30px 0px;
    }

    #servicios > div > div:nth-child(2) > div:nth-child(4) > div > p {
        font-size: 14px;
        font-weight: bold;
        margin: 0px;
    }

    #servicios > div > div:nth-child(1) > div > p{
        margin:50px auto;
        max-width:70%;
    }

    footer{
        text-align:left;
    }
    footer h2{
        font-size:28px;
    }

    footer h4{
        font-size:19px;

    }

    ul#social-links{
        width:33%;
        float:right;
    }
    ul#social-links li{
        float:left;
        margin: 0px 10px 20px 0px ;
        padding:0px;
    }
    
    #sucursales{margin-bottom:50px;}

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

    #my-nav-dental > ul > li{
        border-bottom: none;
    }
    #my-nav-dental > ul > li > a,
    #my-nav-dental > ul > li > a:hover{color:#365072;}{color:#365072;}



    .navbar-brand{
        max-width:160px;
        transition: background-color 500ms linear;
    }
    .navbar{
        background: none;
        color: #fff;
    }
    .fixed-top  a.navbar-brand img{
        content:url("../images/logo-banner-dental-experts.png");
    }

    .fixed-top.scrolled {
        background-color: #64a4d9 !important;
        transition: background-color 500ms linear;
    }
    .fixed-top.scrolled  a.navbar-brand img{
        content:url("../images/logo-dental-experts.png");
    }
    .fixed-top.scrolled #my-nav-dental > ul > li > a{color:#fff;}
    #banner p.title {
        font-size: 50px;
        margin:150px 0px 80px 0px;
        max-width: 64%;
    }
    #banner p {
        font-size: 24px;
        max-width: 76%;
        margin-bottom:50px;
    }

    #banner a.btn{font-size:21px; color:#fff;}

    #banner a.btn:hover{color:#fff;}
    

    #servicios p {
        font-size: 16px;
        margin: 30px 0px;
    }
    #servicios h2{
        font-size:24px;
    }
    #servicios ul{
        font-size:18px;
    }
    #servicios ul li{
        margin:5px;
        padding:7px 5px;
    }
    #servicios > div > div:nth-child(2) > div:nth-child(4) > div > p {
        font-size: 19px;
        font-weight: bold;
        margin:  20px;
    }
    #servicios ul {
        margin: 20px 0px;
        font-size: 16px;
    }
    #servicios ul li{
        margin: 2px;
    }

    ul#social-links{
        width:51%;
        float:right;
    }
    ul#social-links li{
        float:left;
        margin: 0px 10px 20px 0px ;
        padding:0px;
    }




}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

    #banner p.title {
        font-size: 62px;
        line-height:1.2;
        max-width: 64%;
    }
    #banner p {
        font-size: 34px;
        max-width: 76%;
        font-weight:300;
    }

    #servicios p {
        font-size: 19px;
        margin: 20px 30px ;
    }
    #servicios h2{
        font-size:34px;
        margin: 20px 30px;
    }
    #servicios ul li{
        margin:5px;
        padding:7px 5px;
    }
    #servicios > div > div:nth-child(2) > div:nth-child(4) > div > p {
        font-size: 30px;
        font-weight: bold;
        margin:  20px;
    }
    #servicios ul {
        margin: 20px 0px;
        font-size: 24px;
    }
    #servicios ul li{
        margin: 2px;
    }
    #servicios > div > div:nth-child(2) > div:nth-child(4) > div > p {
        font-size: 30px;
        font-weight: bold;
        margin: 30px 20px;
    }
    #video h1{
        font-size:52px;
    }
    #video a.btn{font-size:24px; margin-top: 50px;}

    footer h2{
        font-size:26px;
    }

    footer h4{
        font-size:21px;

    }
    ul#social-links{
        width:60%;
        float:right;
        margin-top:30px;
    }
    #sucursales a{
        color:#64a4d9;
        display: block;
        font-weight:bold;
        margin: 0px 0px 40px 0px;
        text-decoration:none;
    }
    #sucursales a:hover{color:#fff;text-decoration:underline;}
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

    #banner p.title {
        font-size: 72px;
        line-height:1.2;
        max-width: 64%;
    }
    #banner p {
        font-size: 32px;
        max-width: 70%;
        font-weight:300;
    }
    #video h1{
        font-size:52px;
        margin-top:18%;
    }
    #video a.btn{
        font-size:24px; 
        margin-top: 50px;
    }
}

@media (min-width: 1920px){
    #banner{
        background-size: 70%;
    }

}