@font-face {

	font-family:Roboto;

	src: url("../fonts/Roboto-Regular.ttf");

}

@font-face {

	font-family:Times New Roman;

	src: url("../fonts/Times New Normal Regular.ttf");

}

@font-face {

    font-family:Realife;

    src: url("../fonts/Realife Moment DEMO VERSION.ttf");

}

:root {

    --black:black;

    --white:white;

    --darkgreen:#467162;

    --lightgreen:#eaf3ed;

    --dgreen:#122312;

    --transparent:transparent;

    --silver:silver;

}

header {

    float: left;

}

.navbar-default {

    width: 100%;

    height: 110px;

    float: left;

    background-color:var(--lightgreen)!important;

    border:none!important;

}

.navbar-default ul {

    width: 62%;

    float: left;

    padding-left: 10%;

}

.navbar-nav li {

    font-family: Times New Roman;

    font-size: 20px;

    margin-top: 5%;

    letter-spacing: 1.2px;

}

.navbar-nav li a:hover {

    color:var(--darkgreen)!important;

    font-weight: 600;

}

.navbar-nav li a.actived {

    color:var(--darkgreen)!important;

    font-weight: 600;

}

.navbar-header {

    float: left;

    height: 100px;

}

.navbar-brand {

    height: 100px!important;

    float: left;

    margin-top: 5px;

    padding-bottom: 0px!important;

}

.navbar-brand img {

    width: 200px;

    float: left;

}

.mediya {

    margin-top: 30px;

    float:right;

}

.mediya img {

    width: 55px;

    margin: -4px;

}

.mediya img:hover {

    opacity: 0.7;

}

.banner {

    width: 100%;

    float: left;

}

.bannerimg {

    width: 100%;

    float: left;

    position: relative;

}

.leftbanner {

    width: 50%;

    float: left;

    position: absolute;

    margin-top: 25%;

}

.leftbanner h1 {

    background-color: var(--darkgreen);

    color: var(--lightgreen);

    font-family: Times New Roman;

    letter-spacing: 1.5px;

    padding: 6px;

    padding-left: 16%;

    width: 43%;

    font-size: 45px;

}

.leftbanner h2 {

    background-color: var(--lightgreen);

    color: var(--darkgreen);

    font-family: Times New Roman;

    letter-spacing: 1.5px;

    padding: 6px;

    padding-left: 16%;

    margin-top: 1%;

    width: 73%;

    float: left;

    font-size: 45px;

}

.leftbanner a {

    background-color: var(--darkgreen);

    color: var(--lightgreen);

    font-family: Roboto;

    font-size: 25px;

    border: 1px solid var(--darkgreen);

    border-radius: 10px;

    margin-left: 16%;

    margin-top: 5%;

    padding-right: 15px;

    float: left;

}

.leftbanner a img{

    width: 55px;

    float: left;

}

.leftbanner a span {

    padding-top: 10px;

    float: left;

}

.leftbanner a:hover{

    color: var(--lightgreen);

    background-color: var(--dgreen);

    text-decoration: none;

}

.rightbanner {

    width: 100%;

    float: left;

    position: absolute;

    padding-left: 95%;

    padding-top: 15%;

}

.rightbanner a {

    width: 55px;

    height: 55px;

    float: right;

    margin-bottom: 15px;

    background-color: var(--lightgreen);

}

.rightbanner a:hover {

    opacity: 0.7;

}

.rightbanner a img{

    width: 100%;

    height:100%;

}

.email2 {

    height: 45px!important;

    margin-top: 5px;

}

.about {

    background-color: var(--lightgreen);

    width: 100%;

    padding-top: 10%;

    padding-bottom: 10%;

    float: left;

}

.inside {

    position: relative;

    z-index: 999;

}

.inside img { 

    clip-path: ellipse(49% 48%);

    width:65%;

    margin-left:10%;

    float: left;

}

.inside2{

    position: absolute;

    z-index: 999;

}

.inside2 img{

    clip-path: ellipse(49% 40%);

    width: 25%;

    float: left;

    margin-left: 55%;

}

.inside3{

    position: absolute;

    z-index: 999;

}

.inside3 img {

    clip-path: ellipse(49% 40%);

    width: 30%;

    float: left;

    margin-top: 17%;

    margin-left: 60%;

}

.us h2 {

    font-family: Times New Roman;

    color: var(--darkgreen);

    font-size: 40px;

    margin-bottom: 5%;

}

.us p {

    font-family: Roboto;

    font-size: 18px;

    color: var(--black);

    line-height: 1.4;

}

.us a {

    background-color: var(--darkgreen);

    color: var(--lightgreen);

    font-size: 18px;

    border: 1px solid var(--darkgreen);

    border-radius: 10px;

    padding: 5px;

    margin-top: 7%;

    padding-left: 15px;

    overflow: hidden;

    display: inline-flex;

}

.us a img {

    width: 50px;

    font-weight: bold;

    margin-left: -8%;

    filter: invert(1);

    transform: translateX(0);

    transition: transform 0.6s ease;

} 

.us a:hover img {

    transform: translateX(10px);

}

.us span{

    padding-top: 3px;

    padding-right: 5px;

}

.us a:hover{

    color: var(--lightgreen);

    text-decoration: none;

}

.services {

    float: left;

    width: 100%;

    background-color: var(--darkgreen);

    padding-top: 5%;

    padding-bottom: 7%;

    color: var(--lightgreen);

}

.services h2 {

    font-family: Realife;

    font-size: 45px;

    letter-spacing: 1.2px;

    margin-bottom: 2%;

    font-weight: 700;

}

.services span {

    font-size: 18px;

    font-family: Roboto;

}

.secviceleft {

    margin-top: 20px;

}

.secviceleft div {

    width: 75%;

    float: left;

    text-align: right;

    padding-right: 20px;

}

.secviceleft h3 {

    font-size: 25px;

    font-family: Times New Roman;

}

.secviceleft p{

    font-family: Roboto;

    font-size: 18px;

}

.secviceleft span {

    width: 25%;

    height: 100px;

    float: left;

    border: 2px solid var(--lightgreen);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50% 50%;

}

.secviceleft span img {

    width: 100%;

    float: left;

    filter: invert(1) brightness(1);

}

.services .row {

    margin-left: 0px;

    margin-right: 0px;

}

.services .col-md-4 {

    margin-top: 60px;

}

.center {

    filter: invert(1);

    width: 100%;

    margin-top: -10%;

}

.center2 {

    width: 45%;

    position: absolute;

    margin-left:-68%;

    margin-top: 27%;

}

.secviceright {

    margin-top: 20px;

}

.secviceright span {

    width: 25%;

    height: 100px;

    float: left;

    border: 2px solid var(--lightgreen);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50% 50%;

}

.secviceright span img {

    width: 100%;

    float: left;

    filter: invert(1);

}

.secviceright div {

    width: 75%;

    float: left;

    text-align: left;

    padding-left: 20px;

}

.secviceright h3 {

    font-size: 25px;

    font-family: Times New Roman;

}

.secviceright p{

    font-family: Roboto;

    font-size: 18px;

}

.our-team .row {

    margin-left: 0px;

    margin-right: 0px;

}

.our-team {

    width: 100%;

    float: left;

    background-color: var(--lightgreen);

    padding-top: 5%;

    padding-bottom: 5%;

}

.our-team h2 {

    width: 100%;

    text-align: center;

    font-family: Times New Roman;

    font-size: 45px;

    margin-bottom: 7%;

    color: var(--darkgreen);

}

.teammember{

    display: inline-block;

    filter: drop-shadow(10px -5px var(--darkgreen));

}

.teammember img{

    width: 100%;

    clip-path: ellipse(40% 50% at 48% 50%);

}

.contentt {

    width: 100%;

    float: left;

    text-align: center;

    padding-left: 30px;

    padding-right: 30px;

}

.contentt h3 {

    font-family: Times New Roman;

    font-size: 40px;

    color: var(--darkgreen);

    margin-bottom: 20px;

}

.contentt p {

    font-family: Roboto;

    font-size: 18px;

}

.highlights {

    width: 100%;

    float: left;

    background-color:var(--darkgreen);

    padding-top: 5%;

    padding-bottom: 5%;

}

.highlights h2 {

    width: 100%;

    float: left;

    text-align: center;

    font-family: Times New Roman;

    font-size: 45px;

    letter-spacing: 2.5px;

    color: var(--lightgreen);

    margin-bottom: 7%;

}

.videos video {

    width: 95%;

    height: 340px;

    object-fit: cover;

    margin-right: 5%;

    border-radius:10px;

    border: 2px solid var(--lightgreen);

}

.mm {

    width: 30%!important;

    margin-left: 3%;

    overflow: hidden;

    border: 2px solid var(--lightgreen);

    border-radius: 10px;

    margin-bottom: 20px;

    padding-left: 0px!important;

    padding-right: 0px!important;

}

.mm img {

    width: 100%;

    height: 155px;

    object-fit: cover;

}



.testimonial {

    width: 100%;

    float: left;

    background-color: var(--lightgreen);

    padding-top: 5%;

    padding-bottom: 5%;

}

.testimonial h2 {

    text-align: center;

    color: var(--darkgreen);

    font-size: 45px;

    font-family: Times New Roman;

    width: 100%;

    margin-bottom: 10%;

}



.reviews1 {

    background-color: var(--darkgreen);

    margin: 15px;

    color: var(--lightgreen);

    border-radius: 40px;

    border: 2px solid var(--white);

}

.reviews1 p {

    font-size: 18px;

    font-family: Roboto;

    padding-top: 5%;

    padding-left: 5%;

    padding-right: 6%;

}

.rimg {

    width: 120px;

    height: 130px;

    border-radius: 30px;

    margin-top: -70px;

    margin-left: 40%;

    object-fit: cover;

    box-shadow: 4px 4px var(--lightgreen),-4px 4px var(--lightgreen);

}

.reviews1 hr {

    width: 90%;

    border: none;

    height: 3px;

    background-color: var(--lightgreen);

}

.reviews1 span {

    font-size: 20px;

    float: left;

    margin-left: 5%;

    font-family: Roboto;

}

.str {

    width: 115px;

    margin-top: -6%;

}



.reviews2 {

    background-color: var(--white);

    margin: 15px;

    color: var(--darkgreen);

    border-radius: 40px;

    border: 2px solid var(--darkgreen);

}

.reviews2 p {

    font-size: 18px;

    font-family: Roboto;

    padding-top: 5%;

    padding-left: 5%;

    padding-right: 6%;

}

.rimg2 {

    width: 120px;

    height: 130px;

    border-radius: 30px;

    margin-top: -70px;

    margin-left: 40%;

    object-fit: cover;

    box-shadow: 4px 4px var(--lightgreen),-4px 4px var(--lightgreen);

}

.reviews2 hr {

    width: 90%;

    border: none;

    height: 3px;

    background-color: var(--darkgreen);

}

.reviews2 span {

    font-size: 20px;

    float: left;

    margin-left: 5%;

    font-family: Roboto;

}

.lefta {

    width: 100px;

    float: left;

    transform: scaleX(-1);

    margin-left: 60%;

    filter: grayscale(100%); 

}

.righta {

    width: 100px;

    float: left;

}

.google {

    width: 100%;

}

.google h3 {

    font-family: Times New Roman;

    font-size: 40px;

    color: var(--black);

    text-align: center;

    width: 100%;

    float: left;

}

.logog {

    width: 90%;

    margin-left: 5%;

    margin-right: 5%;

}

.google p {

    font-size: 22px;

    margin-left: 10%;

    font-family: Roboto;

}

.google span {

    font-size: 35px;

    font-weight: bold;

    margin-left: 10%;

    font-family: Roboto;

    float: left;

    margin-top: -3%;

}

.google span img {

    width: 55%;

}

.contact {

    width: 100%;

    float: left;

    background-color: var(--darkgreen);

    padding-top: 7%;

    padding-bottom: 5%;

}

.contact .col-md-7{

    padding-left: 0px;

}

.contact form label {

    color: var(--lightgreen);

    font-family: Times New Roman;

    font-size: 20px;

    letter-spacing: 2.5px;

    font-weight: 200;

}

.contact form input {

    width: 100%;

    background-color:var(--transparent);

    color: var(--lightgreen);

    padding-top: 10px;

    padding-bottom: 5px;

    border-top: none;

    border-left: none;

    border-right: none;

    border-bottom: 2px solid var(--lightgreen);

    outline: none;

}

.contact form input::placeholder {

    color:var(--silver);

}

.texta {

    margin-top: 3%;

}

.texta textarea {

    width: 100%;

    height: 120px;

    background-color: var(--transparent);

    color: var(--lightgreen);

    padding-top: 10px;

    padding-bottom: 5px;

    border-top: none;

    border-left: none;

    border-right: none;

    border-bottom: 2px solid var(--lightgreen);

    outline: none;

}

.texta textarea::placeholder {

    color: var(--silver);

}

.contact form button {

    background-color: var(--lightgreen);

    color: var(--darkgreen);

    padding: 10px;

    border-radius: 15px;

    border: 2px solid var(--lightgreen);

    font-family: Roboto;

    font-size: 20px;

    padding-left: 5%;

    padding-right: 5%;

    font-weight: bold;

    letter-spacing: 1.5px;

    margin-top: 10%;

    margin-left: 2%;

}

.contact form button a{

    color: var(--darkgreen);

}

.contact form button a:hover {

    text-decoration: none;

    color: var(--lightgreen);

}

.contact form button:hover {

    background-color: var(--dgreen);

    color: var(--white);

    border: 2px solid var(--dgreen);

}

.imgica {

    width: 70%;

    display: flex;

    margin-left: auto;

    margin-right: auto;

    border-radius: 30px;

    border: 2px solid var(--lightgreen);

}

.imgica2 {

    width: 33%;

    margin-top: -130%;

    margin-left: 5%;

    transform: scaleX(-1);

}

.imgica3 {

    width: 20%;

    margin-top: -95%;

    margin-left: -31%;

    transform: scaleX(-1);

}

.contact2 {

    width: 100%;

    float: left;

    background-color: var(--darkgreen);

    padding-top: 7%;

    padding-bottom: 5%;

}

.contact2 .col-md-7{

    padding-left: 0px;

}

.contact2 form label {

    color: var(--lightgreen);

    font-family: Times New Roman;

    font-size: 20px;

    letter-spacing: 2.5px;

    font-weight: 200;

}

.contact2 form input {

    width: 100%;

    background-color:var(--transparent);

    color: var(--lightgreen);

    padding-top: 10px;

    padding-bottom: 5px;

    border-top: none;

    border-left: none;

    border-right: none;

    border-bottom: 2px solid var(--lightgreen);

    outline: none;

}

.contact2 form input::placeholder {

    color:var(--silver);

}

.texta2 {

    margin-top: 3%;

}

.texta2 textarea {

    width: 100%;

    height: 120px;

    background-color: var(--transparent);

    color: var(--lightgreen);

    padding-top: 10px;

    padding-bottom: 5px;

    border-top: none;

    border-left: none;

    border-right: none;

    border-bottom: 2px solid var(--lightgreen);

    outline: none;

}

.texta2 textarea::placeholder {

    color: var(--silver);

}

.contact2 form button {

    background-color: var(--lightgreen);

    color: var(--darkgreen);

    padding: 10px;

    border-radius: 15px;

    border: 2px solid var(--lightgreen);

    font-family: Roboto;

    font-size: 20px;

    padding-left: 5%;

    padding-right: 5%;

    font-weight: bold;

    letter-spacing: 1.5px;

    margin-top: 10%;

    margin-left: 2%;

}

.contact2 form button a{

    color: var(--darkgreen);

}

.contact2 form button a:hover {

    text-decoration: none;

    color: var(--lightgreen);

}

.contact2 form button:hover {

    background-color: var(--dgreen);

    color: var(--white)!important;

    border: 2px solid var(--dgreen);

}

.infor {

    width: 90%;

    margin-left: 10%;

    float: left;

    border-radius: 20px;

    background-color: var(--lightgreen);

    padding: 20px;

    border: 3px solid var(--white);

}

.infor div {

    width: 100%;

    float: left;

}

.infor div img {

    width: 51px;

    float: left;

}

.infor div p {

    font-size: 18px;

    font-family: Roboto;

    color: var(--darkgreen);

    width: 83%;

    float: left;

    margin-top: 10px;

}

.infor div h4 {

    color: var(--darkgreen);

    padding-left: 10px;

    font-family: Times New Roman;

    font-size: 24px;

    letter-spacing: 1.5px;

    font-weight: bold;

    margin-top: 20px;

}

.infor span {

    padding-left: 10px;

    width: 100%;

    float: left;

    font-size: 18px;

    color: var(--darkgreen);

    margin-top: 5px;

}

.pet1 {

    margin-top: -95%;

    margin-left: 79%;

    float: left;

    width: 45%;

}

.pet2 {

    width: 33%;

    float: left;

    margin-top: -65%;

    margin-left: 85%;

}

footer {

    width: 100%;

    float: left;

    background-color:var(--dgreen);

    padding-top: 0%;

    font-family: Roboto;

}

footer b {

    color: var(--lightgreen);

    font-size: 18px;

    font-weight: 400;

    margin: 40px 0px;

    float: left;

}

footer b a {

    color: var(--lightgreen);

    text-decoration: none;

}

footer b a:hover {

    color: var(--lightgreen);

    text-decoration: none;

    opacity: 0.7;

}

span.copyright {

    color: var(--lightgreen);

    font-size: 18px;

    font-weight: 400;

    float: right;

    margin-top: 0px;

    margin: 40px 0px;

}

.infor strong {

    font-weight: 700;

    color: var(--darkgreen);

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

footer ul {

    float: right;

    display: flex;

    padding: 10px;

    margin-top: -20px;

}

footer ul li {

    padding: 10px;

    float: left;

    color: var(--lightgreen);

    list-style: none;

    font-size: 18px;

    font-family: Roboto;

    cursor: pointer;

}

.modal-body h1 {

    margin-top: 10px;

}

.modal-body h2 {

    margin-top: 10px;

}

.modal-body h3 {

    margin-top: 10px;

}



.modal-body i {

    float: left;

    width: 100%;

}

.modal-body a {

    float: left;

    width: 100%;

    color: var(--darkgreen);

}

.modal-body button {

    float: left;

    width: 15%;

    padding: 10px;

    font-size: 18px;

    font-family: Roboto;

    background-color: var(--lightgreen);

    color: var(--darkgreen);

    border-radius: 10px;

    border: 2px solid var(--darkgreen);

    margin-top: 20px;

    margin-bottom: 30px;

}

.modal-body img{

    width: 90%;

    display: flex;

    margin-left: auto;

    margin-right: auto;

}

.modal-body li {

    color: var(--black);

    list-style: unset;

    width: 100%;

    float: left;

}

.list {

    float: left;

}

.modal-body ul {

    float: left;

    width: 100%;

    display: inline;

    margin-left: 3%;

}

.modal-body p {

    width: 100%;

    margin-top: 20px;

    margin-bottom: 20px;

}

.modal-body label {

    color: var(--darkgreen);

    font-family: Times New Roman;

    font-size: 22px;

    margin-top: 20px;

}

.modal-body mark {

    background-color: var(--darkgreen);

    color: var(--lightgreen);

}

.modal-body textarea {

    width: 100%;

    height: 100px;

}

.email1 {

    width: 55px!important;

    height: auto!important;

    margin-top: 5px;

}

.map {

    margin-top: 5px;

}



/*--------------------------------------------------Mobile-css-----------------------------------------*/



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

    header {

        float: left;

        width: 100%;

    }

    .navbar-default {

        height: 100px;

        width: 100%;

        float: left;

    }

    .navbar-header {

        width: 100%;

        float: left;

    }

    .navbar-toggle {

        margin-right: 0px!important;

        margin-top: 37px!important;

    }

    .navbar-collapse {

        margin-right: 0px!important;

        margin-left: 0px!important;

        width: 100%;

        float: left;

        background-color: var(--lightgreen);

        padding-left: 25px!important;

        padding-right: 0px!important;

    }

    .navbar-collapse.in {

        overflow-y: unset!important;

    }

    .navbar-default ul {

        width: 100%;

        float: left;

        padding-left: 0px;

    }

    .navbar-nav li {

        margin-top: 0px;

    }

    .navbar-nav li a {

        padding-left: 0px!important;

    }

    .mediya {

        margin-top: 0px;

        float: left;

        margin-bottom: 5px;

        margin-left: -20px;

    }

    .navbar-default .navbar-toggle {

        border:2px solid var(--darkgreen)!important;

    }

    .navbar-default .navbar-toggle .icon-bar {

        background-color: var(--darkgreen)!important;

    }

    .bannerimg {

        height: 500px;

        object-fit: cover;

    }

    .rightbanner {

        width: 100%;

        float: left;

        padding-top: 35%;

    }

    .rightbanner a {

        width: 40px;

        height: 40px;

        margin-bottom: 10px;

    }

    .email2 {

        width: 100%;

        height: 100%;

        margin-top: 0px;

    }

    .leftbanner {

        width: 100%;

        margin-top: 80%;

    }

    .leftbanner h1 {

        font-size: 30px;

        padding-left: 5%;

    }

    .leftbanner h2 {

        width: 85%;

        font-size: 29px;

        padding-left: 5%;

    }

    .leftbanner a {

        font-size: 16px;

        width: auto;

        margin-left: 5%;

    }

    .leftbanner a img {

       width: 35px;

    }

    .us {

        width: 100%;

        float: left;

    }

    .us h2 {

        font-size: 30px;

        margin-top: 10%;

    }

    .us p {

        font-size: 16px;

    }

    .us a {

        width: auto;

        font-size: 16px;

    }

    .us a img {

        width: 40px;

        margin-top: 2px;

    }

    .services {

        padding-bottom: 10%;

    }

    .services h2 {

        font-size: 30px;

        margin-bottom: 30px;

    }

    .services span {

        font-size: 16px;

    }

    .services .col-md-4 {

        margin-top: 50px;

    }

    .secviceleft {

        float: left;

    }

    .secviceleft div {

        width: 75%;

        float: right;

        text-align: left;

        padding-right: 0px;

        padding-left: 20px;

    }

    .secviceleft span {

        height: auto;

    }

    .secviceleft h3 {

        font-size: 22px;

        margin-top: 0px;

    }

    .secviceleft p {

        font-size: 16px;

    }

    .center {

        margin-top: -20%;

    }

    .center2 {

        margin-left: -66%;

        margin-top: 15%;

    }

    .secviceright {

        float: left;

    }

    .secviceright span {

        height: auto;

    }

    .secviceright h3 {

        font-size: 22px;

        margin-top: 0px;

    }

    .secviceright p {

        font-size: 16px;

    }

    .our-team h2 {

        font-size: 30px;

        margin-bottom: 30px;

        margin-top: 50px;

    }

    .teammember {

        margin-top: 10%;

        float: left;

        width: 100%;

    }

    .contentt h3 {

        font-size: 30px;

        margin-bottom: 10px;

    }

    .contentt p {

        font-size: 16px;

    }

    .highlights h2 {

        font-size: 30px;

        margin-bottom: 50px;

        margin-top: 40px;

    }

    .videos video {

        height: auto;

        margin-right: 0%;

        width: 100%;

        margin-bottom: 20px;

    }

    .mm {

        width: 90%!important;

        margin-left: 5%;

    }

    .mm img {

        height: auto;

    }

    .testimonial h2 {

        font-size: 30px;

        margin-bottom: 40px;

        margin-top: 50px;

    }

    .rimg {

        width: 100px;

        height: 100px;

    }

    .reviews1 {

        margin-bottom: 40%;

        margin-top: 40%;

    }

    .reviews1 p {

        font-size: 16px;

        margin-top: 8%;

    }

    .reviews1 hr {

        height: 2px;

        margin-top: 5px;

        margin-bottom: 5px;

    }

    .reviews1 span {

        font-size: 16px;

    }

    .str {

        width: 85px;

    }

    .reviews2 p {

        font-size: 16px;

        margin-top: 8%;

    }

    .reviews2 hr {

        height: 2px;

        margin-top: 5px;

        margin-bottom: 5px;

    }

    .reviews2 span {

        font-size: 16px;

    }

    .rimg2 {

        width: 100px;

        height: 100px;

    }

    .lefta {

        margin-left: 12%;

    }

    .google h3 {

        font-size: 30px;

    }

    .logog {

        width: 90%;

        margin-left: auto;

        margin-right: auto;

        display: flex;

    }

    .google span {

        font-size: 22px;

    }

    .google p {

        font-size: 14px;

    }

    .contact form label {

        font-size: 17px;

        margin-top: 15px;

        margin-bottom: 0px;

    }

    .texta textarea {

        height: 75px;

    }

    .contact form button {

        padding: 10px;

        font-size: 14px;

        margin-left: 6%;

    }

    .imgica {

        margin-top: 20%;

    }

    .contact2 {

        padding-bottom: 10%;

    }

    .contact2 form label {

        font-size: 17px;

        margin-top: 15px;

        margin-bottom: 0px;

    }

    .texta2 textarea {

        height: 75px;

    }

    .contact2 form button {

        font-size: 18px;

        margin-left: 6%;

        padding: 15px 30px;

        font-weight: bold;

    }

    .infor {

        margin-top: 15%;

        border: 2px solid var(--white);

        margin-left: 5%;

        padding-bottom: 2px;

    }

    .infor div img {

        width: 25px;

    }

    .infor div p {

        font-size: 16px;

        margin-top: 3px;

    }

    .email1 {

        width: 30px!important;

        height: 25px!important;

        margin-top: 1px;

        margin-left: -1px;

    }

    .infor div h4 {

        padding-left: 5px;

        font-size: 18px;

        margin-top: 10px;

    }

    .infor span p {

        padding-left: 5px;

        margin-bottom: 5px;

    }

    .pet1 {

        margin-top: -100%;

        margin-left: 76%;

        width: 30%;

    }

    .pet2 {

        margin-top: -77%;

        margin-left: 83%;

        width: 25%;

    }

    footer {

        padding-top: 5%;

    }

    footer b {

        text-align: center;

        width: 100%;

        float: left;

        font-size: 15px;

    }

    footer ul {

        margin-top: 0px;

        float: left;

        justify-content: center;

        width: 100%;

    }

    footer ul li {

        font-size: 16px;

    }

    .modal-body button {

        width: 35%;

    }

    .leftbanner a span {

        padding-top: 10px;

        padding-bottom: 8px;

        float: left;

    }

    .col-md-12.secviceleft:last-child {

        margin-bottom: 50px;

    }

    footer b {

        color : var(--lightgreen);

        font-size: 16px;

        font-weight: 400;

        margin: 10px 0px;

        float: left;

        width: 100%;

        text-align: center;

    }

    span.copyright {

        color: var(--lightgreen);

        font-size: 16px;

        font-weight: 400;

        float: left;

        margin: 10px 0px;

        margin-bottom: 30px;

        width: 100%;

        text-align: center;

    }

    @media only screen and (min-width: 360px) and (max-width: 767px) {

        .bannerimg {

            height: 600px;

        }

        .pet1 {

            margin-top: -85%;

        }

        .pet2 {

            margin-top: -65%;

        }

    }

    @media only screen and (min-width: 450px) and (max-width: 767px) {

        .infor div p {

            font-size: 16px;

        }

        .infor div img {

            width: 33px;

        }

        .infor div h4 {

            font-size: 20px;

        }

        .email1 {

            width: 35px!important;

            height: 30px!important;

            margin-left: 0px;

        }

        .pet2 {

            margin-left: 80%;

        }

        .reviews1 p {

            font-size: 18px;

        }

        .reviews1 span {

            font-size: 18px;

        }

        .reviews2 p {

            font-size: 18px;

        }

        .reviews2 span {

            font-size: 18px;

        }

        .str {

            width: 100px;

            margin-left: 10%;

        }

    }

    @media only screen and (min-width: 550px) and (max-width: 767px){

        .bannerimg {

            height: 700px;

        }

        .us h2 {

            font-size: 33px;

        }

        .us p {

            font-size: 17px;

        }

        .services h2 {

            font-size: 33px;

        }

        .services span {

            font-size: 15px;

        }

        .secviceleft h3 {

            font-size: 27px;

            margin-top: 20px;

        }

        .secviceleft p {

            font-size: 16px;

        }

        .services .col-md-4 {

            margin-top: 20px;

        }

        .center2 {

            margin-left: -70%;

            margin-top: 20%;

        }

        .secviceright h3 {

            font-size: 27px;

            margin-top: 20px;

        }

        .secviceright p {

            font-size: 16px;

        }

        .our-team h2 {

            font-size: 33px;

        }

        .contentt p {

            font-size: 17px;

        } 

        .highlights h2 {

            font-size: 33px;

        }

        .testimonial h2 {

            font-size: 33px;

            margin-bottom: 20%;

        }

        .reviews1 {

            margin-bottom: 20%;

        }

        .reviews1 p {

            margin-top: 0%;

            font-size: 18px;

        }

        .reviews2 p {

            margin-top: 0%;

            font-size: 18px;

        }

        .str {

            margin-left: 40%;

        }

        .lefta {

            margin-left: 30%;

        }

        .google h3 {

            font-size: 33px;

        }

        .google span img {

            width: 33%;

        }

        .pet1 {

            margin-top: -65%;

            margin-left: 74%;

        }

        .pet2 {

            margin-top: -45%;

        }

        footer span {

            margin-top: 11px;

        }

        .leftbanner a {

            font-size: 19px;

        }

        .leftbanner {

            margin-top: 70%;

        }

        .contact2 {

            margin-top: -1%;

        }

    }

    @media only screen and (min-width: 700px) and (max-width: 767px){

        .leftbanner {

            margin-top: 50%;

        }

        .rightbanner {

            padding-top: 30%;

        }

        .testimonial h2 {

            margin-bottom: 15%;

        }

        .str {

            margin-top: -1%;

        }

        .lefta {

            margin-left: 35%;

        }

        .google span img {

            width: 25%;

        }

        .infor {

            width: 85%;

        }

        .pet1 {

            margin-top: -56%;

            margin-left: 70%;

        }

        .pet2 {

            margin-top: -35%;

            margin-left: 75%;

        }

    }

}







/*--------------------------------------------------Tablet-Css-----------------------------------------*/





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

    header {

        float: left;

        width: 100%;

    }

    .navbar-default {

        width: 100%;

        height: 85px;

    }

    .navbar-default ul {

        padding-left: 0%;

        margin-top: 1%;

    }

    .container {

        width:100%!important;

    }

    .navbar-brand img {

        width: 150px;

    }

    .navbar-header {

        height: 90px;

    }

    .navbar-nav li {

        margin-top: 4%;

        font-size: 15px;

    }

    .navbar-nav li a {

        padding-top: 8px!important;

        padding-bottom: 5px!important;

        padding-left: 10px!important;

        padding-right: 5px!important;

    }

    .mediya {

        margin-top: -35px;

        float: right;

        width: 17%;

    }

    .mediya img {

        width: 45px;

    }

    .bannerimg {

        width: 100%;

        float: left;

        height: 650px;

        object-fit: cover;

    }

    .rightbanner a {

        width: 45px;

        height: 45px;

        margin-bottom: 10px;

    }

    .leftbanner h1 {

        font-size: 33px;

        width: 50%;

        padding-left: 10%;

    }

    .leftbanner h2 {

        font-size: 30px;

        width: 80%;

        padding-left: 10%;

    }

    .leftbanner a {

        font-size: 18px;

        margin-left: 10%;

    }

    .leftbanner a img {

        width: 40px;

    }

    .about .col-md-6 {

        width: 50%;

        float: left;

    }

    .us h2 {

        font-size: 33px;

        margin-top: 0%;

    }

    .us p {

        font-size: 15px;

    }

    .us a {

        font-size: 15px;

    }

    .us a img {

        width: 40px;

        margin-left: -5%;

    }

    .us span {

        padding-top: 1px;

    }

    .services h2 {

        font-size: 33px;

    }

    .services span {

        font-size: 15px;

    }

    .secviceleft {

        float: left;

    }

    .services .col-md-4 {

        margin-top: 30px;

    }

    .secviceleft div {

        float: right;

        text-align: left;

        padding-left: 30px;

    }

    .secviceleft span {

        width: 15%;

        height: auto;

        margin-left: 10%;

    }

    .secviceright {

        float: left;

    }

    .secviceright div {

        padding-left: 30px;

    }

    .secviceright span {

        width: 15%;

        height: auto;

        margin-left: 10%;

    }

    .our-team h2 {

        font-size: 33px;

    }

    .our-team .col-md-3 {

        width: 50%;

        float: left;

    }

    .contentt h3 {

        font-size: 33px;

    }

    .contentt p {

        font-size: 14px;

    }

    .contentt {

        margin-bottom: 10%;

    }

    .highlights h2 {

        font-size: 33px;

    }

    .videos video {

        width: 100%;

        margin-right: 0%;

    }

    .gallery {

        padding-top: 5%;

    }

    .mm {

        width: 31%!important;

        float: left;

        margin-left: 13px;

    }

    .testimonial h2 {

        font-size: 33px;

    }

    .reviews1 {

        width: 45%;

        float: left;

    }

    .reviews1 p {

        font-size: 16px;

    }

    .reviews2 {

        width: 45%;

        float: left;

    }

    .reviews2 p {

        font-size: 16px;

    }

    .lefta {

        margin-left: 37%;

    }

    .logog {

        width: 33%;

        margin-left: 33%;

        margin-right: 33%;

    }

    .google h3 {

        font-size: 33px;

    }

    .google span {

        font-size: 22px;

        margin-left: 33%;

        margin-top: 0px;

    }

    .google p {

        font-size: 20px;

        margin-left: 33%;

    }

    .google {

        float: left;

    }

    .google span img {

        width: 33%;

    }

    .contact .col-md-7 {

        width: 57%;

        float: left;

    }

    .contact .col-md-5 {

        width: 43%;

        float: left;

    }

    .contact form label {

        margin-top: 5%;

        font-size: 15px;

    }

    .texta textarea {

        height: 60px;

    }

    .imgica {

        margin-top: 75px;

    }

    .contact form button {

        padding: 6px;

        font-size: 15px;

    }

    .contact2 .col-md-7 {

        width: 57%;

        float: left;

    }

    .contact2 .col-md-5 {

        width: 43%;

        float: left;

    }

    .contact2 form label {

        margin-top: 5%;

        font-size: 15px;

    }

    .texta2 textarea {

        height: 60px;

    }

    .contact2 form button {

        padding: 18px 30px;

        font-size: 18px;

    }

    .infor {

        width: 95%;

        margin-left: 0%;

        margin-top: 15%;

    }

    .infor div img {

        width: 30px;

    }

    .infor div p {

        font-size: 13px;

        margin-top: 5px;

    }

    .email1 {

        width: 45px!important;

        margin-top: 0px;

        margin-left: -7px;

    }

    .infor div h4 {

        font-size: 18px;

    }

    .pet1 {

        margin-left: 73%;

        width: 33%;

        margin-top: -107%;

    }

    .pet2 {

        margin-left: 84%;

        width: 20%;

        margin-top: -84%;

    }

    footer {

        padding-top: 0%;

    }

    footer .col-md-6 {

        width: 50%;

        float: left;

    }

    .modal-body button {

        width: auto;

    }

    @media only screen and (min-width: 816px) and (max-width: 991px) {

        .mediya {

            margin-top: 27px;

        }

        .navbar-default ul {

            padding-left: 8%;

        }

        .contact2 {

            margin-top: -1%;

        }

    }

    @media only screen and (min-width: 900px) and (max-width: 991px) {

        .pet1 {

            margin-top: -91%;

        }

        .pet2 {

            margin-top: -66%;

        }

        .lefta {

            margin-left: 41%;

        }

    }

}







/*--------------------------------------------small-laptop-screen-css--------------------------------------*/





@media only screen and (min-width: 992px) and (max-width: 1350px) {

    .navbar-default ul {

        padding-left: 1%;

    }

    .navbar-nav li {

        font-size: 16px;

    }

    .mediya {

        margin-top: -50px;

    }

    .leftbanner h1 {

        width: 50%;

        font-size: 40px;

    }

    .leftbanner h2 {

        width: 90%;

        font-size: 40px;

    }

    .bannerimg {

        height:700px;

        object-fit: cover;

    }

    .center {

        margin-top: 20%;

    }

    .center2 {

        margin-top: 50%;

    }

    .secviceleft span {

        height: auto;

        margin-top: 7%;

    }

    .secviceright span {

        height: auto;

        margin-top: 7%;

    }

    .contact2 {

        margin-top: -1%;

    }

    .infor {

        margin-left: 0%;

    }

    .infor div img {

        width: 44px;

    }

    .infor div p {

        font-size: 16px;

    }

    .email1 {

        margin-left: -6px;

    }

    .pet1 {

        margin-top: -110%;

        margin-left: 68%;

        width: 40%;

    }

    .pet2 {

        margin-top: -80%;

        margin-left: 73%;

    }

    @media only screen and (min-width: 1200px) and (max-width: 1350px) {

        .mediya {

            margin-top: 35px;

        }

        .navbar-default ul {

            padding-left: 8%;

        }

        .navbar-nav li {

            font-size: 18px;

        }

        .center {

            margin-top: 10%;

        }

        .center2 {

            margin-top: 45%;

        }

        .pet1 {

            margin-top: -90%;

        }

        .pet2 {

            margin-top: -60%;

        }

        .rightbanner {

            padding-top: 11%;

        }

        .leftbanner {

            margin-top: 30%;

        }

        .infor {

            margin-left: 3%;

        }

    }

}



/*---------------------------------------------------larg-laptop-screen-css------------------------------*/





@media only screen and (min-width: 1500px) {

    .secviceleft span {

        height: auto;

    }

    .secviceright span {

        height: auto;

    }

    @media only screen and (min-width: 1680px){

        .center {

            margin-top: -25%;

        }

        .center2 {

            margin-top: 14%;

        }

        .secviceleft h3 {

            font-size: 30px;

        }

        .secviceleft p {

            font-size: 22px;

        }

        .secviceright h3 {

            font-size: 30px;

        }

        .secviceright p {

            font-size: 22px;

        }

    }

}