/* --------------------- This file is made for the responsive corrections --------------------- */
@media (max-width: 1518px) {

    .social-media{
        right: 0;
        bottom: 40%;
    }

    .what-we-do{
        height: 140vh;
    }

    .portfolio{
        margin-top: -25%;
    }
}

/* 
@media (max-width: 1366px) {
    .hero {
        height: 120vh;
    }
} */

@media (max-width: 1024px) {
    .bnrbtm {
        width: 55%;
        position: absolute;
        -webkit-transform: skew(0, 4.76deg) translateY(calc(50vw/12));
        -ms-transform: skew(0, 4.76deg) translateY(calc(50vw/12));
        transform: skew(0, 4.76deg) translateY(calc(50vw/12));
        bottom: -27%;
        left: 25%;

        /*display: inline-block;
    transform: translate(-50%, -50%);*/
    }

    .bnr-txt {
        margin-top: -12%;
    }
}

@media (max-width: 991px) {
    .main-area {
        /*margin-top: -15%;
         flex-wrap: wrap !important; */
        flex-direction: column;
    }
    .main-area .wwd-text {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }
    .bnnr-contnt{
        flex-wrap: wrap;
    }
    .bnnr-txt h3 {
        font-size: 2.1rem;
    }
    .bnnr-txt p {
        font-size: 1rem;
    }
    .sub-text {
        font-size: .8rem;
    }    
    #hero-1 {
        padding: 30% 0;
    }
    .company-logos .logo-item img {
        width: 100%;
    }
    .portfolio {
        margin-top: -90%;
    }
    .w-70 {
        width: 100%;
    }
    .bt .bt-bg {
        left: 50%
    }
    .best-thing {
        margin-top: 10%;
    }
    .contact-details {
        flex-direction: column;
        row-gap: 1rem;
    }
    ul.foo-nav-bar {
        position: relative;
        width: 100% !important;
        height: auto;
        left: 0;
        top: 0;
        background: transparent;
        padding-left: 0;
    }
    .foo-nav-bar .foo-nav-item a {
        font-size: 16px;
    }
}
@media (max-width: 858px){	
label.logo {    padding-left: 0px;}  .checkbtn{    display: block;	margin-right: 0px;  }nav ul {    position: absolute;    width: 100%;    height: 100vh;    background: #0a033b;    top: 60px;    text-align: center;    transition: all .5s;    z-index: 99;    right: 100%;    margin-top: 0;	margin-right: 0;}nav ul li {    display: block;    margin: 40px 0;    line-height: 30px;}  nav ul li a{    font-size: 20px;  }  a:hover,a.active{    background: none;    color: #0082e6;  }  #check:checked ~ ul{    right: 0;  }
}
@media (max-width: 768px) {	
.bnnr-txt h1 {font-size: 2.4rem;}
    .bnrbtm {
        width: 55%;
        position: absolute;
        bottom: -20%;
        left: 23%;    }
    .bnr-txt {margin-top: -5%;}
    .social-media {display: none;}	
	.servicearea h2, .sect-title .title {font-size: 2rem;}	
	.servicearea h2 span, .sect-title .sub-title {font-size: 16px; right: 37%;}	
	.uk-card-primary h3{padding-bottom:0px;}	
	.uk-card-primary p{margin-top:0px;}	
	.what-we-do {height: 100%; padding-bottom: 300px;}	
	.portfolio {		margin-top: -255px;		padding-top: 0px;		padding-bottom: 50px;	}	
	.main-area .wwd-img img, .wwd-img img {width: 75%;}	
	.portfolio-carousel img{height: 220px;}	
	.feature{margin-top:50px;}	
	.box_list {margin: 20px 0 0 0;}	
	.card-title {font-size: 1.5rem;}
	#our_portfolio .filter-button {margin-bottom: 10px;}
}

@media (max-width: 640px) {
	body, .foo-text a, .foo-nav-bar .foo-nav-item a {font-size: .9rem; line-height:normal;}
	p{word-break: break-all;}
	.logo img.logo {height: 45px;}
	.checkbtn {
		line-height: 60px;
		margin-bottom: 0 !important;
	}
	nav {height: auto;}
	
    .hero {
        height: 60vh;
    }
	.bnnr-txt h1 {
		font-size: 1.5rem;
		margin-bottom: 10px;
	}
	.servicearea h2, .sect-title .title {
		font-size: 1.4rem;
		line-height: normal;
		margin-bottom: 0;
	}
	.servicearea h2 span, .sect-title .sub-title {
		font-size: 14px;
		right: 34%;
	}
    .bnr-txt .items:first-child p {
        font-size: 1rem;
    }

    .bnr-txt .items:nth-child(2) p {
        font-size: .75rem;
    }

    .bnrbtm {
        width: 100%;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .bnr-txt {
        display: block;
        margin-top: 5%;
        padding-bottom: 10%;
    }

    .portfolio-carousel img {
        width: 100%;
    height: auto;
}
.portfolio {padding-bottom: 0px;}
.owl-carousel .owl-item img {width: 30%;}
.uk-card-title {font-size: 1.2rem;line-height: normal;}
button.bnrbtn {    font-size: 14px;    padding: 7px 15px;}
li, a, button {font-size: 14px;}
.feature .feature-box .feature-content h4 {font-size: 17px;}
.best-thing {margin-top: 0;}
.aboutus-section {padding: 30px 0 !important;}
section.best-thing.pt-4{margin-top:20px;}
.what-we-do .col-lg-6{text-align:left !important;}
.what-we-do .wwd-img{text-align:center;}
.sect-title {text-align: left;}
.sect-title .sub-title{text-align:right;}
.icon {
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    width: 50px;
}
.feature .feature-box {margin-left: 25px;}
.feature .feature-box .clearfix {margin-left: -25px;}
.feature .feature-box .iconset {width: 50px;}
.feature .feature-box .feature-content {
    padding-left: 20px;
    width: calc(100% - 60px);
}
.lead {
    font-size: 1rem;
    font-weight: 300;
}
.pricing-header{padding-top:40px !important;}
.card-title {font-size: 1.3rem;}
.card-info h4{font-size: 1rem;}
.card-info .row.p-5{padding-top:10px !important;}
.card.bg-light.mb-3{margin: 30px 0 0 0 !important;}
#hero-1 {padding-bottom:50px !important;}
}

@media (max-width: 425px) {

    /* .bnrbtm {
    width: 55%;
    position: absolute;
    bottom: -17%;
    left: 22%;   
} */
    .bnr-txt h3 {
        font-size: 32px;
        font-weight: 700;

    }    

    label.logo {
        padding-left: 0px;
    }

    .bnr-txt {
        margin-top: -40px;
    }

    #hero-1 {
        padding: 20% 0;
    }
}

@media (max-width: 375px) {

    .hero {
        height: 75vh;
    }

    /* .bnrbtm {
    width: 55%;
    position: absolute;
    bottom: -8%;
    left: 22%;   
} */
    .bnr-txt h3 {
        font-size: 32px;
        font-weight: 700;

    }

    .what-we-do {
        height: 150vh;
    }
}

@media (max-width: 320px) {

    /* .bnrbtm {
    width: 65%;
    position: absolute;
    bottom: -5%;
    left: 19%;   
} */
    .bnr-txt h3 {
        font-size: 30px;
        font-weight: 700;

    }
}