@font-face {

	font-family: Roboto;

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

}

:root {

    --black:black;

    --white:white;

    --red:#e44847;

    --transparent:transparent;

    --lightgray:lightgray;

}

/*-----header-css-----*/

.navbar-default {

    background-image: url("../images/BG-img.jpg");

    border-bottom: none!important;

}

.navbar {

    min-height: 100px!important;

}

.navbar-header {

    min-height: 100px;

}

.navbar-brand {

    height: 100px!important;

    width: 100%;

}

.navbar-brand img {

    width: auto;

    height: 100px;

    margin-top: -6%;

    object-fit: cover;

}

.navbar-default ul {

    margin-top: 2%;

}

.navbar-nav li a {

    color: var(--white)!important;

    font-family: Roboto;

    font-size: 22px;

}

.navbar-nav li a:hover {

    opacity: 0.7;

}

header .navbar-nav li a.actived {

    opacity: 0.7;

}

.navbar-default .navbar-nav .active a {

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

}



/*-----sections-css-----*/



.banner {

    background-image: url("../images/BG-img.jpg");

    width: 100%;

    float: left;

    padding-top: 12%;

    padding-bottom: 8%;

}

.leftbanner h3 {

    font-size: 28px;

    font-family: Roboto;

    color: var(--white);

    letter-spacing: 1.2px;

    padding-left: 0px;

}

.leftbanner h2 {

    font-family: Roboto;

    font-size: 50px;

    color: var(--white);

    letter-spacing: 2px;

    font-weight: 900;

    margin-top: 10px;

}

.leftbanner p {

    width: 100%;

    margin-top: 5%;

    font-size: 18px;

    line-height: 1.6;

    color: var(--white);

    font-family: Roboto;

}

.leftbanner img {

    margin-left: -16%;

    margin-top: -3%;

    filter: invert(1);

}

.rightbanner div {

    width: 75%;

    height: 355px;

    float: left;

    margin-top: 25%;

    margin-left: 18%;

}

.rightbanner div img {

    width: 100%;

    float: left;

    margin-top: -40%;

    margin-left: 0%;

}

.services {

    background-image: url("../images/Bg-img-2.jpg");

    width: 100%;

    float: left;

    padding-bottom: 6%;

}

.services .row {

    float: left;

    margin-left: 0px;

    margin-right: 0px;

}

.icon1 {

    width: 100%;

    float: left;

    display: flex;

    justify-content: center;

    margin-bottom: 7%;

}

.icon1 div {

    background-image: url("../images/BG-img.jpg");

    width: 6%;

}

.icon1 div img {

    width: 100%;

    float: left;

    filter: invert(1);

}

.ser1 {

    background-image: url("../images/BG-img.jpg");

    float: left;

    padding-bottom: 2%;

}

.serimg1 {

    width: 33%;

    float: right;

    border-radius: 0px 0px 0px 80px;

    margin-right: 0px;

    background-color: var(--white);

}

.serimg1 img {

    width: 100%;

    float: left;

    filter: brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(1269%) hue-rotate(324deg) brightness(97%) contrast(91%);

}

.ser1 h2 {

    float: left;

    width: 60%;

    color: var(--white);

    font-family: Roboto;

    font-size: 30px;

    font-weight: 800;

    margin-top: 10%;

    margin-left: 5%;

    letter-spacing: 1.7px;

    line-height: 1.2;

}

.ser1 p {

    float: left;

    color: var(--white);

    letter-spacing: 1px;

    line-height: 1.3;

    width: 100%;

    margin-top: 5%;

    padding-left: 5%;

    padding-right: 2%;

    font-size: 20px;

    font-family: Roboto;

}

.ser1 a {

    float: left;

    width: 45%;

    text-decoration: none;

    margin-left: 30%;

    margin-top: 10%;

    overflow: hidden;

}

.ser1 a span {

    font-size: 20px;

    color: var(--white);

    letter-spacing: 1px;

}

.ser1 a img {

    width: 20px!important;

    display: inline!important;

    margin-left: 5px;

    margin-top: -3%;

}

.ser1 a:hover {

    text-decoration: none;

}

.ser1 a hr {

    float: left;

    height: 2px;

    width: 80%;

    margin-top: 0%;

}

.ser2 {

    background-color: var(--white);

    float: left;

    padding-bottom: 2%;

}

.serimg2 {

    width: 33%;

    float: right;

    border-radius: 0px 0px 0px 80px;

    margin-right: 0px;

    background-image: url("../images/BG-img.jpg");

}

.serimg2 img {

    width: 100%;

    float: left;

}

.ser2 h2 {

    float: left;

    width: 60%;

    color: var(--red);

    font-family: Roboto;

    font-size: 30px;

    font-weight: 800;

    margin-top: 10%;

    margin-left: 5%;

    letter-spacing: 1.7px;

    line-height: 1.2;

}

.ser2 p {

    float: left;

    color: var(--red);

    letter-spacing: 1px;

    line-height: 1.3;

    width: 100%;

    margin-top: 5%;

    padding-left: 5%;

    padding-right: 2%;

    font-size: 20px;

    font-family: Roboto;

}

.ser2 a {

    float: left;

    width: 45%;

    text-decoration: none;

    margin-left: 30%;

    margin-top: 10%;

    overflow: hidden;

}

.ser2 a:hover {

    text-decoration: none;

}

.ser2 a span {

    font-size: 20px;

    color: var(--red);

    letter-spacing: 1px;

}

.ser2 a img {

    width: 20px!important;

    display: inline!important;

    margin-left: 5px;

    margin-top: -3%;

    filter: brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(1269%) hue-rotate(324deg) brightness(97%) contrast(91%);

}

.ser2 a hr {

    float: left;

    height: 2px;

    width: 80%;

    margin-top: 0%;

    background-color: var(--red);

}

.ser3 {

    background-image: url("../images/BG-img.jpg");

    float: left;

    padding-bottom: 2%;

}

.serimg3 {

    width: 33%;

    float: right;

    border-radius: 0px 0px 0px 80px;

    margin-right: 0px;

    background-color: var(--white);

}

.serimg3 img {

    width: 100%;

    float: left;

    filter: brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(1269%) hue-rotate(324deg) brightness(97%) contrast(91%);

}

.ser3 h2 {

    float: left;

    width: 60%;

    color: var(--white);

    font-family: Roboto;

    font-size: 30px;

    font-weight: 800;

    margin-top: 10%;

    margin-left: 5%;

    letter-spacing: 1.7px;

    line-height: 1.2;

}

.ser3 p {

    float: left;

    color: var(--white);

    letter-spacing: 1px;

    line-height: 1.3;

    width: 100%;

    margin-top: 5%;

    padding-left: 5%;

    padding-right: 2%;

    font-size: 20px;

    font-family: Roboto;

}

.ser3 a {

    float: left;

    width: 45%;

    text-decoration: none;

    margin-left: 30%;

    margin-top: 10%;

    overflow: hidden;

}

.ser3 a:hover {

    text-decoration: none;

}

.ser3 a span {

    font-size: 20px;

    color: var(--white);

    letter-spacing: 1px;

}

.ser3 a img {

    width: 20px!important;

    margin-left: 5px;

    margin-top: -3%;

}

.ser3 a hr {

    float: left;

    height: 2px;

    width: 80%;

    margin-top: 0%;

}

.information {

    width: 100%;

    float: left;

    background-image: url("../images/BG-img.jpg");

    padding-bottom: 7%;

}

.icon2 {

    width: 100%;

    float: left;

    display: flex;

    justify-content: center;

    margin-bottom: 7%;

}

.icon2 div {

    background-image: url("../images/Bg-img-2.jpg");

    width: 6%;

}

.icon2 div img {

    width: 100%;

    float: left;

    filter: brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(1269%) hue-rotate(324deg) brightness(97%) contrast(91%);

}

.information .row {

    float: left;

    width: 100%;

}

.meating div {

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

    border-radius: 10px;

}

.meating div img {

    width: 100%;

    object-fit: cover;

    height: 300px;

    border-radius: 7px;

}

.meating2 {

    margin-top: 13%;

}

.meating2 div {

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

    border-radius: 10px;

    overflow: hidden;

}

.meating2 div img {

    width: 100%;

    float: left;

    height: 300px;

    object-fit: cover;

}

.infor p {

    color: var(--white);

    font-family: Roboto;

    font-size: 22px;

    line-height: 1.2;

    letter-spacing: 1.2px;

    width: 100%;

    float: left;

}

.infor ul {

    width: 100%;

    float: left;

    list-style: none;

    margin-top: 4%;

    padding-left: 0%;

    margin-bottom: 5%;

}

.infor ul li {

    color: var(--white);

    width: 100%;

    float: left;

    font-size: 22px;

    padding-top: 2%;

}

.infor ul li img {

    width: 35px;

    filter: invert(1);

}

.infor a {

    width: 55%;

    float: left;

    background-color: var(--white);

    color: var(--black);

    font-size: 20px;

    padding: 10px;

    margin-top: 5%;

}

.infor a:hover{

    text-decoration: none;

    color: var(--white);

    background-color: var(--black);

}

.infor a:hover img {

    filter: invert(1);

}

.infor a:focus {

    text-decoration: none;

}

.infor a img {

    width:30px;

}

.infor a span {

    padding-left: 5%;

}

.testimonials {

    width: 100%;

    float: left;

    background-image: url("../images/Bg-img-2.jpg");

    padding-bottom: 7%;

}

.icon3 {

    width: 100%;

    float: left;

    display: flex;

    justify-content: center;

    margin-bottom: 7%;

}

.icon3 div {

    background-image: url("../images/BG-img.jpg");

    width: 6%;

}

.icon3 div img {

    width: 100%;

    float: left;

    filter: invert(1) brightness(1.5);

}

.testimonials span {

    width: 100%;

    float: left;

    padding-right: 15%;

    padding-left: 15%;

    font-size: 22px;

    text-align: center;

    font-family: Roboto;

    color: var(--black);

    margin-bottom: 5%;

}

.testimonials .row {

    float: left;

}

.teammember{

    display: flex;

    justify-content: center;

    filter: drop-shadow(10px 0px var(--red));

}

.teammember img{

    width: 100%!important;

    height: auto;

    object-fit: cover;

    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: Roboto;

    font-size: 33px;

    color: var(--red);

    margin-bottom: 20px;

    font-weight: 600;

    letter-spacing: 1.5px;

}

.contentt p {

    font-family: Roboto;

    font-size: 18px;

    color: var(--black);

}

.hightlight {

    width: 100%;

    float: left;

    background-image: url("../images/BG-img.jpg");

    padding-bottom: 5%;

}

.hightlight .row {

    float: left;

}

.icon4 {

    width: 100%;

    float: left;

    display: flex;

    justify-content: center;

    margin-bottom: 7%;

}

.icon4 div {

    background-image: url("../images/Bg-img-2.jpg");

    width: 6%;

}

.icon4 div img {

    width: 100%;

    float: left;

    filter: brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(1269%) hue-rotate(324deg) brightness(97%) contrast(91%);

}

.gallery {

    width: 100%;

    float: left;

}

.gallery .col-md-3 {

    width: 23%!important;

    float: left;

    overflow: hidden;

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

    border-radius: 10px;

    padding-left: 0px;

    padding-right: 0px;

    box-shadow: 0px -5px 7px var(--black);

    margin-top: 11px!important;

    margin-bottom: 11px;

    margin-right: 11px;

    margin-left: 11px;

}

.gallery .col-md-3 img {

    width: 100%;

    height: 200px;

    object-fit: cover;

}

.hightlight .col-md-2 {

    width: 16%;

    float: left;

    margin-top: 6%;

    height: 150px;

    object-fit: cover;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

}

.hightlight .col-md-2 img {

    width: 100%;

    float: left;

    object-fit: cover;

}

.contact {

    width: 100%;

    float: left;

    background-image: url("../images/Bg-img-2.jpg");

    padding-bottom: 5%;

}

.icon5 {

    width: 100%;

    float: left;

    display: flex;

    justify-content: center;

    margin-bottom: 5%;

}

.icon5 div {

    background-image: url("../images/BG-img.jpg");

    width: 6%;

}

.icon5 div img {

    width: 100%;

    float: left;

    padding: 12px;

    filter: invert(1);

}

.contact .row {

    float: left;

}

.contactleft h2{

    font-size: 35px;

    font-weight: 700;

    font-family: Roboto;

    letter-spacing: 1.2px;

    width: 100%;

    float: left;

}

.contactleft p {

    width: 100%;

    float: left;

    font-size: 22px;

    font-family: Roboto;

    padding-right: 5%;

}

.contactleft form {

    float: left;

    width: 100%;

}

.contactleft div {

    margin-top: 4%;

    float: left;

    width: 100%;

}

.contactleft label {

    font-size: 20px;

    width: 100%;

    float: left;

    font-family: Roboto;

}

.contactleft input {

    width: 80%;

    float: left;

    border-left: none;

    border-right: none;

    border-top: none;

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

    background-color: var(--transparent);

    padding-top: 7px;

    font-size: 16px;

    padding-bottom: 5px;

    outline: none;

}

.contactleft textarea {

    width: 80%;

    height: 100px;

    float: left;

    border-left: none;

    border-right: none;

    border-top: none;

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

    background-color: var(--transparent);

    padding-top: 7px;

    padding-bottom: 5px;

    font-size: 16px;

    outline: none;

}

.contactleft button {

    padding: 10px 20px;

    margin-top: 10%;

    font-size: 20px;

    background-color: var(--red);

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

    font-family: Roboto;

}

.contactleft a {

    color: var(--white);

}

.contactleft a:hover {

    color: var(--white);

}

.contactleft button:hover {

    font-weight: bold;

    background-color: var(--black);

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

}

.contactright {

    border-left: 2px solid var(--black);

    padding-left: 3%!important;

}

.contactright h2 {

    font-size: 35px;

    font-weight: 700;

    font-family: Roboto;

    letter-spacing: 1.2px;

    width: 50%;

    float: left;

}

.media {

    width: 50%;

    float: right;

}

.media img {

    width: 60px;

    float: right;

    margin-top: -2%;

}

.media img:hover {

    opacity: 0.7;

}

.media .linkdin {

    width: 45px;

    float: right;

    margin-top: 0%;

}

.call {

    width: 100%;

    float: left;

    margin-top: 5%;

}

.call div {

    width: 10%;

    float: left;

}

.call div img {

    width: 100%;

}

.call p {

    width: 90%;

    margin-top: 2%;

    float: left;

    font-family: Roboto;

    font-size: 22px;

}

.call a {

    color: var(--black);

}

.call a:hover {

    color: var(--red);

}

.email2 {

    width: 100%;

    float: left;

    margin-top: 2%;

}

.email2 div {

    width: 10%;

    float: left;

}

.email2 div img {

    width: 100%;

}

.email2 p {

    width: 90%;

    float: left;

    font-size: 22px;

    font-family: Roboto;

    margin-top: 2%;

}

.email2 a {

    color: var(--black);

}

.email2 a:hover {

    color: var(--red);

}

.map {

    width: 100%;

    float: left;

    margin-top: 3%;

}

.map div {

    width: 10%;

    float: left;

}

.map div img {

    width: 100%;

}

.map p {

    width: 90%;

    float: left;

    font-family: Roboto;

    font-size: 22px;

}

.map2 {

    width: 100%;

    float: left;

    display: flex;

    justify-content: center;

    margin-top: 5%;

}

.map2  img {

    width: 90%;

    float: left;

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

}

footer {

    background-image: url("../images/BG-img.jpg");

    width: 100%;

    float: left;

    padding-top: 1%;

    padding-bottom: 1%;

}

.logo {

    width: 20%;

    float: left;

    margin-top: 1%;

}

.logo img {

    width: 200px;

    float: left;

}

.topep {

    width: 50%;

    float: left;

    margin-top: 2%;

}

.topep p {

    color: var(--white);

    font-size: 19px;

    margin-top: 4%;

    text-align: center;

}

.develop {

    width: 30%;

    float: left;

    margin-top: 2%;

}

.develop p {

    font-size: 19px;

    margin-top: 4%;

    color: var(--white);

}

.develop p a {

    font-size: 19px;

    margin-top: 4%;

    color: var(--white);

    text-decoration: unset;

}

.develop p a:hover {

    opacity: 0.70;

}

.betwin::after {

    content: "|";

    position: absolute;

    padding-left: 10px;

}



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





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

    .navbar-brand {

        width: 70%;

    }

    .navbar-header {

        height: 130px;

    }

    .navbar-toggle {

        margin-right: 10%!important;

        margin-top: 10%!important;

    }

    .navbar-default .navbar-toggle {

        border-color: var(--white)!important;

    }

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

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

    }

    .navbar-brand img {

        margin-top: 0px;

    }

    .banner {

        padding-top: 40%;

    }

    .leftbanner h3 {

        font-size: 25px;

    }

    .leftbanner h2 {

        font-size: 35px;

    }

    .leftbanner img {

        width: 100%;

        padding-bottom: 0%;

    }

    .rightbanner {

        float: left;

    }

    .rightbanner div {

        height: auto;

        margin-left: 20%;

    }

    .rightbanner div img {

        margin-top: -33%;

    }

    .icon1 {

        margin-bottom: 10%;

    }

    .icon1 div {

        width: 20%;

    }

    .services {

        padding-bottom: 15%;

    }

    .services .row .col-md-4 {

        width: 90%;

        margin-left: 5%;

        margin-right: 5%;

        margin-top: 10%;

    }

    .ser1 h2 {

        font-size: 30px;

    }

    .ser1 p {

        font-size: 18px;

    }

    .ser1 a {

        width: 60%;

        margin-left: 5%;

        margin-top: 5%;

    }

    .ser1 a span {

        font-size: 18px;

    }

    .ser2 h2 {

        font-size: 30px;

    }

    .ser2 p {

        font-size: 18px;

    }

    .ser2 a {

        width: 60%;

        margin-left: 5%;

        margin-top: 5%;

    }

    .ser2 a span {

        font-size: 18px;

    }

    .ser3 h2 {

        font-size: 30px;

    }

    .ser3 p {

        font-size: 18px;

    }

    .ser3 a {

        width: 60%;

        margin-left: 5%;

        margin-top: 5%;

    }

    .ser3 a span {

        font-size: 18px;

    }

    .icon2 {

        margin-bottom: 10%;

    }

    .icon2 div {

        width: 20%;

        margin-top: -1px;

    }

    .meating2 {

        margin-top: 20%;

    }

    .infor {

        float: left;

        width: 100%;

    }

    .infor p {

        font-size: 18px;

        margin-top: 10%;

        padding-left: 5%;

    }

    .infor ul {

        padding-left: 5%;

        margin-top: 0%;

        margin-bottom: 0%;

    }

    .infor ul li {

        font-size: 18px;

        padding-top: 1%;

    }

    .infor a {

        width: 90%;

        font-size: 18px;

        margin-left: 5%;

    }

    .icon3 {

        margin-bottom: 10%;

    }

    .icon3 div {

        width: 20%;

        margin-top: -1px;

    }

    .information {

        padding-bottom: 15%;

    }

    .information .row {

        margin-right: 0px;

        margin-left: 0px;

    }

    .testimonials span{

        font-size: 18px;

    }

    .testimonials .row .col-md-4 {

        float: left;

    }

    .teammember {

        margin-top: 15%;

    }

    .teammember img {

        width: 90%;

    }

    .contentt h3 {

        font-size: 30px;

    }

    .testimonials {

        padding-bottom: 10%;

    }

    .icon4 {

        margin-bottom: 10%;

    }

    .icon4 div {

        width: 20%;

        margin-top: -1px;

    }

    .gallery .col-md-3 {

        width: 100%!important;

        margin-left: 0%;

    }

    .hightlight {

        padding-bottom: 8%;

    }

    .hightlight .col-md-2 {

        width: 50%;

        height: 110px;

    }

    .icon5 {

        margin-bottom: 10%;

    }

    .icon5 div {

        width: 20%;

        margin-top: -1px;

    }

    .contact .col-md-6 {

        float: left;

    }

    .contactleft h2 {

        font-size: 30px;

    }

    .contactleft p {

        font-size: 16px;

    }

    .contactleft label {

        font-size: 18px;

    }

    .contactleft input {

        width: 95%;

    }

    .contactleft textarea {

        width: 95%;

    }

    .contactleft {

        padding-bottom: 10%;

        padding-left: 7%!important;

    }

    .contactright {

        border-left: none;

        padding-left: 5%!important;

    }

    .contactright h2 {

        font-size: 30px;

        width: 100%; 

        padding-left: 2%;

    }

    .media {

        float: left;

        width: 100%;

        padding-left: 2%;

    }

    .media .linkdin {

        float: left;

    }

    .media img {

        float: left;

    }

    .call {

        margin-top: 8%;

    }

    .call p {

        font-size: 18px;

        margin-top: 0%;

    }

    .email2 {

        margin-top: 5%;

    }

    .email2 p {

        font-size: 18px;

        margin-top: 1%;

    }

    .map p {

        font-size: 18px;

        color: var(--black);

    }

    .contact {

        padding-bottom: 10%;

    }

    .logo {

        width: 100%;

        float: left;

        display: flex;

        justify-content: center;

    }

    .topep {

        width: 100%;

        margin-top: 0%;

    }

    

    .develop {

        width: 100%;

        padding-bottom: 5%;

        margin-top: 0%;

    }

    .develop p {

        font-size: 18px;

        text-align: center;

    } 

    .testimonials .row {

        margin-left: 0;

        margin-right: 0;

    }

    .hightlight .row {

        margin-left: 0;

        margin-right: 0;

    }

    .contente .col-md-12 div span {

        font-size: 19px;

    }

    .contente p {

        font-size: 18px;

    }

    .contente h2 {

        margin-top: 4%;

        margin-bottom: 8%;

        font-size: 25px;

    }

    .Benefits span {

        margin-bottom: 3%;

    }

    .Benefits span img {

        width: 21px;

        margin-top: 3px;

    }

    .Benefits span p {

        width: 89%;

        font-size: 18px;

    }

    .ulimgs {

        margin-bottom: 9%;

    }

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

        .ser1 a hr {

            width: 80%;

        }

        .ser2 a hr {

            width: 80%;

        }

        .ser3 a hr {

            width: 80%;

        }

        .meating div img {

            height: auto;

        }

    }

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

        .ser1 a hr {

            width: 70%;

        }

        .ser2 a hr {

            width: 70%;

        }

        .ser3 a hr {

            width: 70%;

        }

        .hightlight .col-md-2 img {

            padding: 13px;

        }

    }    

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



        .banner {

            padding-top: 30%;

        }

        .icon1 div {

            width: 15%;

        }

        .services {

            padding-bottom: 10%;

        }

        .icon2 div {

            width: 15%;

        }

        .meating {

            width: 100%;

            float: left;

            margin-left: 0%;

        }

        .meating2 {

            width: 100%;

            float: left;

            margin-left: 0%;

            margin-top: 9%;

        }

        .infor a {

            width: 54%;

        }

        .icon3 div {

            width: 15%;

        }

        .teammember img {

            height: auto;

        }

        .gallery .col-md-3 img {

            height: auto;

        }

        .icon4 div {

            width: 15%;

        }

        .icon5 div {

            width: 15%;

        }

        .call p {

            margin-top: 1%;

        }

        .email2 {

            margin-top: 2%;

        }

        .email2 p {

            margin-top: 2%;

        }

        .topep ul li {

            margin-top: 1%;

        }

        .infor ul li {

            padding-top: 2%;

        }

        .hightlight .col-md-2 img {

            padding: 30px;

        }

    }

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

        .fy {

            margin-top: -86%;

        }

        .infor a {

            width: 55%;

        }

        .hightlight .col-md-2 {

            height: 150px;

        }

        .hightlight .col-md-2 img {

            padding: 15px;

        }

        .rightbanner div {

            margin-left: 23%;

        }

    }

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

        .ser1 a {

            width: 200px;

        }

        .ser2 a {

            width: 200px;

        }

        .ser3 a {

            width: 200px;

        }

        .infor ul {

            margin-bottom: 0%;

        }

        .rightbanner div {

            margin-left: 30%;

        }

    }

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

        .icon1 div {

            width: 10%;

        }

        .icon1 {

            margin-bottom: 0%;

        }

        .ser1 a span {

            font-size: 20px;

        }

        .ser2 a span {

            font-size: 20px;

        }

        .ser3 a span {

            font-size: 20px;

        }

        .navbar-toggle {

            margin-top: 8%!important;

        }

        .serimg1 {

            width: 25%;

        }

        .serimg2 {

            width: 25%;

        }

        .serimg3 {

            width: 25%;

        }

        .ser1 h2 {

            margin-top: 6%;

        }

        .ser2 h2 {

            margin-top: 6%;

        }

        .ser3 h2 {

            margin-top: 6%;

        }

        .icon2 div {

            width: 10%;

        }

        .icon3 div {

            width: 10%;

        }

        .icon4 div {

            width: 10%;

        }

        .icon5 div {

            width: 10%;

        }

        .hightlight .col-md-2 {

            width: 33%;

            margin-top: 0%;

        }

        .call {

            margin-top: 3%;

        }

        .call p {

            margin-top: 3%;

        }

        .email2 p {

            margin-top: 3%;

        }

        .map p {

            margin-top: 2%;

        }

        .contactright h2 {

            width: 50%;

        }

        .media {

            width: 50%;

            padding-right: 5%;

        }

        .media .linkdin {

            float: right;

        }

        .media img {

            float: right;

        }

        .meating2 {

            margin-top: 6%;

        }

        .infor a {

            width: 39%;

        }

        .rightbanner div {

            margin-left: 37%;

        }

        .subbanner h2 {

            margin-top: 40%;

        }

    }

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

        .leftbanner img {

            width: 75%;

        }

        .rightbanner div {

            margin-left: 50%;

        }

        .ser1 a hr {

            width: 60%;

        }

        .ser2 a hr {

            width: 60%;

        }

        .ser3 a hr {

            width: 60%;

        }

        .serimg1 {

            width: 20%;

        }

        .serimg2 {

            width: 20%;

        }

        .serimg3 {

            width: 20%;

        }

        .banner {

            padding-top: 17%;

        }

        .meating img {

            height: 350px;

        }

        .meating2 img {

            height: 350px;

        }

        .infor a {

            width: 32%;

        }

        .testimonials span {

            margin-bottom: 0%;

        }

        .teammember {

            margin-top: 5%;

        }

        .develop {

            margin-top: 0%;

        }

        .call {

            margin-top: 0%;

        }

        .map {

            margin-top: 0%;

        }

        .email2 {

            margin-top: 0%;

        }

        .call div img {

            width: 50px;

            margin-top: 10%;

            margin-left: 10%;

        }

        .email2 div img {

            width: 50px;

            margin-top: 10%;

            margin-left: 10%;

        }

        .map div img {

            width: 50px;

            margin-top: 0%;

            margin-left: 10%;

        }

        .ser1 a img {

            margin-top: -1%;

        }

        .ser2 a img {

            margin-top: -1%;

        }

        .ser3 a img {

            margin-top: -1%;

        }

        .subbanner h2 {

            margin-top: 33%;

        }

    }

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

        .infor ul {

            margin-top: 0%;

        }

        .infor p {

            margin-top: 5%;

        }

        .navbar-toggle {

            margin-top: 6%!important;

        }

    }

}







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





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

    .develop p a {

        font-size: 17px;

    }

    .navbar-default ul {

        margin-top: 3%;

    }

    .navbar-nav li a {

        font-size: 18px;

        padding: 10px 8px !important;

    }

    .banner {

        padding-top: 20%;

    }

    .leftbanner {

        width: 50%;

        float: left;

    }

    .leftbanner h3 {

        font-size: 25px;

    }

    .leftbanner h2 {

        font-size: 43px;

    }

    .leftbanner img {

        margin-left: -20%;

        margin-top: -9%;

        padding-bottom: 0%;

    }

    .rightbanner {

        width: 50%;

        float: left;

    }

    .rightbanner div {

        height: auto;

        margin-top: 70%;

        width: 80%;

        margin-left: 18%;

    }

    .rightbanner div img {

        width: 100%;

        margin-top: -34%;

    }

    .inicon {

        width: 45px;

        top: 35%;

    }

    .inicon a {

        width: 45px;

        height: 45px;

    }

    .icon1 div {

        width: 8%;

    }

    .icon2 div {

        width: 8%;

    }

    .icon3 div {

        width: 8%;

    }

    .icon4 div {

        width: 8%;

    }

    .icon5 div {

        width: 8%;

    }

    .ser1 h2 {

        font-size: 22px;

        margin-top: 5%;

        margin-left: 1%;

        padding-left: 5%;

    }

    .ser2 h2 {

        font-size: 22px;

        margin-top: 5%;

        margin-left: 1%;

        padding-left: 5%;

    }

    .ser3 h2 {

        font-size: 22px;

        margin-top: 5%;

        margin-left: 1%;

        padding-left: 5%;

    }

    .ser1 p {

        padding-left: 5%;

        font-size: 15px;

    }

    .ser2 p {

        padding-left: 5%;

        font-size: 15px;

    }

    .ser3 p {

        padding-left: 5%;

        font-size: 15px;

    }

    .serimg1 {

        width: 38%;

    }

    .serimg1 img {

        margin-left: 10%;

    }

    .serimg2 {

        width: 38%;

    }

    .serimg2 img {

        margin-left: 10%;

    }

    .serimg3 {

        width: 38%;

    }

    .serimg3 img {

        margin-left: 10%;

    }

    .ser1 a {

        width: 145px;

        margin-top: 3%;

        margin-left: 5%;

    }

    .ser1 a span {

        font-size: 17px;

    }

    .ser1 a img {

        width: 19px;

        margin-top: 0%;

    }

    .ser2 a {

        width: 145px;

        margin-top: 3%;

        margin-left: 5%;

    }

    .ser2 a span {

        font-size: 17px;

    }

    .ser2 a img {

        width: 19px;

        margin-top: 0%;

    }

    .ser3 a {

        width: 145px;

        margin-top: 3%;

        margin-left: 5%;

    }

    .ser3 a span {

        font-size: 17px;

    }

    .ser3 a img {

        width: 19px;

        margin-top: 0%;

    }

    .information .row .col-md-6 {

        width: 50%;

        float: left;

    } 

    .meating div img {

        height: 200px;

    }

    .meating2  {

        height: auto;

        margin-top:10%;

    }

    .meating2 div img {

        height: 200px;

    }

    .fy {

        width: 100px;

        margin-top: -65%;

        margin-left: 36%;

    }

    .infor p {

        font-size: 18px;

    }

    .infor ul {

        margin-top: 0%;

        margin-bottom: 4%;

    }

    .infor ul li {

        font-size: 16px;

    }

    .infor ul li img {

        width: 25px;

    }

    .infor a {

        width: 75%;

        font-size: 17px;

    }

    .infor a img {

        width: 25px;

    }

    .testimonials span {

        font-size: 18px;

    }

    .testimonials .row .col-md-4 {

        width: 33%;

        float: left;

    }

    .teammember img {

        height: 200px;

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

    }

    .contentt h3 {

        font-size: 25px;

    }

    .contentt p {

        font-size: 15px;

    }

    .hightlight .row {

        margin-right: 0px;

        margin-left: 0px;

    }

    .gallery .col-md-3 {

        width: 46%!important;

        margin-left: 17px;

        margin-bottom: 17px;

    }

    .hightlight .col-md-2 {

        width: 33%;

    }

    .hightlight .col-md-2 img {

        padding: 15px;

    }

    .contact .row .col-md-6 {

        width: 50%;

        float: left;

    }

    .contactleft h2 {

        font-size: 33px;

    }

    .contactleft p {

        font-size: 17px;

    }

    .contactleft label {

        font-size: 18px;

    }

    .contactleft input {

        width: 95%;

    }

    .contactleft textarea {

        width: 95%;

    }

    .media {

        width: 42%;

    }

    .media img {

        width: 50px;

    }

    .media .linkdin {

        width: 37px;

        margin-top: 2%;

    }

    .contactright h2 {

        font-size: 33px;

        width: 58%;

    }

    .call p {

        font-size: 18px;

        margin-top: 1%;

    }

    .email2 p {

        font-size: 18px;

        margin-top: 1%;

    }

    .map p {

        font-size: 18px;

    }

    .map2 img {

        height: 300px;

        object-fit: cover;

    }

    .logo img {

        width: 146px;

    }

    .topep ul li {

        font-size: 18px;

        padding: 15px;

    }

    .topep {

        margin-top: 1%;

        width: 45%;

        float: left;

    }

    .develop {

        width: 35%;

        margin-top: 2%;

    }

    .develop p {

        font-size: 15px;

    }

    .contactleft button {

        font-size: 18px;

    }

    .services .row {

        margin-left: 0px;

        margin-right: 0px;

        width: 100%;

    }

    .subbanner h2 {

        margin-top: 33%;

    }

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

        .icon1 div {

            margin-top: -1px;

        }

        .icon2 div {

            margin-top: -1px;

        }

        .icon3 div {

            margin-top: -1px;

        }

        .icon4 div {

            margin-top: -1px;

        }

        .icon5 div {

            margin-top: -1px;

        }

    }

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

        .banner {

            padding-top: 15%;

        }

    }

}



/*-----------------------------------------------Small-Laptop-css---------------------------------------------------------*/





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

    #servicesCarousel .item p {

        min-height: 130px;

    }

    .banner {

        padding-top: 12%;

    }

    .rightbanner div {

        height: auto;

        margin-top: 53%;

    }

    .leftbanner img {

        padding-bottom: 0%;

    }

    .navbar-default {

        border-color: var(--transparent)!important;

    }

    .icon1 div {

        margin-top: -1px;

    }

    .icon2 div {

        margin-top: -1px;

    }

    .icon3 div {

        margin-top: -1px;

    }

    .icon4 div {

        margin-top: -1px;

    }

    .icon5 div {

        margin-top: -1px;

    }

    .serimg1 {

        width: 30%;

        margin-top:-1px;

    }

    .serimg2 {

        width: 30%;

    }

    .serimg3 {

        width: 30%;

        margin-top: -1px;

    }

    .serimg1 img {

        margin-left: 6px;

    }

    .serimg2 img {

        margin-left: 6px;

    }

    .serimg3 img {

        margin-left: 6px;

    }

    .ser1 h2 {

        margin-top: 5%;

        font-size: 30px;

    }

    .ser1 p {

        font-size: 18px;

    }

    .ser1 a {

        width: 165px;

        margin-left: 5%;

        margin-top: 5%;

    }

    .ser2 h2 {

        margin-top: 5%;

        font-size: 30px;

    }

    .ser2 p {

        font-size: 18px;

    }

    .ser2 a {

        width: 165px;

        margin-left: 5%;

        margin-top: 5%;

    }

    .ser3 h2 {

        margin-top: 5%;

        font-size: 30px;

    }

    .ser3 p {

        font-size: 18px;

    }

    .ser3 a {

        width: 165px;

        margin-left: 5%;

        margin-top: 5%;

    }

    .infor p {

        font-size: 18px;

    }

    .infor ul li {

        font-size: 18px;

    }

    .infor ul li img {

        width: 30px;

    }

    .infor ul {

        margin-top: 1%;

    }

    .infor a {

        width: 60%;

        font-size: 18px;

    }

    .infor a img {

        width: 25px;

    }

    .meating img {

        height: auto;

    }

    .meating2 img {

        height: auto;

    }

    .testimonials span {

        font-size: 18px;

    }

    .teammember img {

        height: 250px;

    }

    .contentt h3 {

        font-size: 30px;

    }

    .hightlight .row {

        margin-left: 0px;

        margin-right: 0px;

    }

    .gallery .col-md-3 {

        width: 22%!important;

        margin-left: 15px;

    }

    .hightlight .col-md-2 {

        margin-top: 0%;

        width: 33%;

        padding: 50px;

        margin-bottom: 2%;

    }

    .hightlight .patner {

        padding-top: 1%;

    }

    .contactleft p {

        font-size: 18px;

    }

    .contactleft div {

        margin-top: 2%;

    }

    .contactleft input {

        width: 90%;

    }

    .contactleft textarea {

        width: 90%;

    }

    .contactleft button {

        font-size: 18px;

        margin-top: 7%;

    }

    .call {

        margin-top: 2%;

    }

    .topep {

        margin-top: 3%;

        width: 40%;

    }

    .develop {

        text-align: center;

        width: 36%;

        float: right;

        margin-top: 3%;

    }

    .media {

        width: 40%;

        margin-right:5%;

    }

    .media .linkdin {

        margin-top: 2%;

    }

    .subbanner h2 {

        margin-top: 23%;

    }

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

        .rightbanner div img {

            width: 100%;

            margin-top: -45%;

            margin-left: 0%;

        }

        .subbanner h2 {

            margin-top: 20%;

        }

    }

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

        .ser1 a {

            width: 55%;

        }

        .ser2 a {

            width: 55%;

        }

        .ser3 a {

            width: 55%;

        }

    }

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

        .topep {

            margin-top: 2%;

        }

        .develop {

            margin-top: 2%;

        }

    }

}



