@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;0,700;1,100;1,400;1,700&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}

:root {
    --green-color:#92ed1b;
    --blue-color:#0561e5;
}

body {
    font-family: 'Poppins', sans-serif;
}



a {
    text-decoration: none;
}

h2 {
    display: block;
    font-size:2rem;
    width:130px;
    border-bottom:5px solid var(--green-color);
    position: relative;
    padding-bottom: 14px;
    margin:50px 0px;
    text-align: center;
}

.h2-before {
    display: block;
    position: absolute;
    top:0;
    left: -210px;
    width:200px;
    height: 50px;
    background-color: var(--primary-color);
}

.btn-primary {
    background-color: var(--primary-color);
    border:1px solid var(--primary-color);
    color:black;
    border-radius:5px;
    padding: 15px 30px;
}

.btn-primary:hover {
    background-color: #FEA735;
    border:1px solid var(--primary-color);
    color:black;
    border-radius:5px;
    padding: 15px 30px;
}

.btn-primary-outline {
    background-color:white;
    border:1px solid var(--primary-color);
    color:black;
    border-radius:5px;
}

.d-flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: 1%;
}

.nav-menu {
    width:100%;
    background-color: white;
    position: fixed;
    z-index:999;
}

.logo {
    width:140px;
}

.logowhite{
    width:200px;
}

.navbar-nav .nav-link.active, .navbar-nav .show > .nav-link {
    color: var(--green-color);
  }

.nav-item {
    margin:0px 15px;
}

.nav-link {
    color:var(--blue-color);
}

.nav-link:hover {
    color: var(--green-color);
}

section {
    padding:80px 0px;
}


.hero {
    width:100%;
    height: 100vh;
    background-image: url("../img/hero.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.hero h1, p {
    color:white;
}

.hero h1 {
    padding-top: 60px;
    font-size: 3.2rem;
}

.hero p {
    width:600px;
    font-size: 1.6rem;
    padding: 10px 0px;
    margin:20px 0px;
}


.btn-cta {
    margin-top:20px;
    background-color: var(--green-color);
    color:white;
}
.btn-cta:hover {
    color: var(--green-color);
    background-color:white;
}

.sobre {
    background-color: #e8e8e8;
}

.sobre p {
    color:#333;
    padding:0px 30px;
    font-size:16px;
    line-height: 32px;
}


.servicos .card {
    width:32.3%;
    margin:20px 0px;
    border:none;
    border-radius: 5px;

}

.servicos .card img{
   height:255px;
   object-fit: cover;
   
   
}

img {
    max-width: 100%;
}

.black-bg-label {
    display: block;
    position: absolute;
    width:100%;
    height:255px;
    background-image:linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,1)); 
    z-index:3;
}

.card .card-body .card-title {
    position: absolute;
    color:white;
    font-weight: 600;
    font-size:1.8rem;
    margin-top:-100px;
    z-index:10;
}

.card-text {
    margin:30px 0px;
    color:black;
}

.form-box {
    display: block;
    width:50%;
    margin-bottom:2rem;
}

.form-box p {
    color:black;

}


.who-section {
    height: 450px;
    background-color: green;
    background-blend-mode: multiply;
    background-image: url(../img/home-care-who.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;

}

.who-section-text {
    display: block;
    width: 80%;
    margin:0 auto;
    text-align: center;
    padding:60px;

}

footer {
    padding:30px 0px;
    background-color:var(--blue-color);
    color:white;
    overflow: hidden;
}

.footer-end{

    padding:30px 0px;
    background-color:var(--green-color);
    color:white;
    overflow: hidden;

}


@media screen and (max-width:1024px){

    .hero {
        text-align: center;
        overflow: hidden;
    }
    
    .hero h1 {
        padding-top: 40px;
        font-size: 2.2rem;
    }
    
    .hero p {
        width:600px;
        font-size: 1.6rem;
        padding: 10px 0px;
        margin:10px 0px;
    }
    
    
    .btn-cta {
        margin-top:10px;
    }
    .servicos .card {
        width:49%;
        margin:20px 0px;
        border:none;
    }

    .form-box {
        display: block;
        width:80%;
    }

    .servicos {
        clear: both;
    }

    .card .card-body .card-title {
        font-size:1.3rem;
    }
    
}

@media screen and (max-width:768px){

    section {
        padding:50px 20px;
    }

    .hero h1 {
        text-shadow: 2px 2px 8px darkblue;
    }

    .hero p {
        width:350px;
        font-size: 1.2rem;
        padding: 10px 0px;
    }
    
    .servicos .card {
        width:80%;
        margin:20px auto;
        border:none;
    }

    .form-box {
        display: block;
        width:100%;
    }

    .sobre .about-image {
        display: block;
        width:100%;
    }

    .sobre p {
        width:100%;
        color:black;
        padding:0px 30px;
        font-size:16px;
        line-height: 32px;
        margin-top: 30px;
    }

    .servicos {
        clear: both;
    }

}