@import url('https://use.fontawesome.com/releases/v5.6.1/css/all.css');


.bot {
    margin: 0px 0px 120px;
}

/* social media icon */
.icons {
    position:fixed;
    top:45%;
    left:0;
  
    z-index:100;
    
  }
  
  .icons ul {
    list-style:none;
    padding:initial;
    
  }
  
  .icons ul li {
    height:40px;
    width:40px;
    padding-left:10px;
    padding-top:7px;
    margin-top:5px;
    color:white;
    font-size: 18px;
  }
  
  .icons ul li:hover {
    padding-left:27px;
    transition:0.5s;
    width:75px;
  }
  
  
  .facebook {
    background-color: #4267b2;
  }
  .insta{
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
  }
  .youtube{
    background-color: #FF0000;
  }
  .linkdin{
    background-color: #0072b1;
  }
  .watsapp{
    background-color: #25D366;
  }
  
/* vision section style */
.vision-block .vision-img {
    right: 15px;
    position: absolute;
    margin-bottom: 0px;
    bottom: 0;
}

.vision-block {
    width: 100%;
    height: 400px;
    background-color: #dee2e6;
    margin: 0px;
    padding: 0px;
}

.vision-block h2 {
    text-align: right;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 30px;
    padding-right: 10px;
    font-size: 52px;

    
}


.vision-img:after {
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%;
    width: 70px;
    background-color: #ff8a00;
    opacity: 0.80;
    content: "";
    z-index: 1000;
}

.vision-block-content {
    margin: 10% 12%;
}

.vision-block-content p {
    font-size: 14px;
    line-height: 30px;
}

.vision-block-content .icon {
    font-size: 30px;
    color: #d7a449;
    font-weight: 600;
    font-style: italic;
}

/* value section style */
.value-block .value-img {
    left: 15px;
    position: absolute;
    margin-bottom: 0px;
    bottom: 62px;
}

.value-block {
    width: 100%;
    height: 400px;
    background-color: #dee2e6;
    margin: 0px;
    padding: 0px;
}


.value-block h2 {
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 30px;
    padding-left: 10px;
    font-size: 52px;

}
.focus-head{
    font-weight: 500;
    color: #222222;
}

.value-img:before {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    width: 70px;
    background-color: #ff8a00;
    opacity: 0.80;
    content: "";
    z-index: 1000;
}

.value-block-content {
    margin: 10% 12%;
}

.value-block-content p {
    font-size: 14px;
    line-height: 30px;
}

.value-block-content .icon {
    font-size: 30px;
    color: #d7a449;
    font-weight: 600;
    font-style: italic;
}

/* client section */
.client-block h2 {
    text-align: center;
    font-size: 52px;
    font-weight: 700;
    color: black;
    padding: 25px 10px;

}

.client-block ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.client-block ul li {
    flex-basis: 20%;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    margin: 0px 0px -2px -2px;
    border-color: var(--color-border);
    padding: 20px 0 20px 0;
    text-align: center;
    background-color: #d1d1d1b3;
}

/* about section */
.features-head h2 {
    font-size: 72px;
    font-weight:700;
    color: #d1d1d1b3;
    text-align: center;
    margin-bottom: 50px;
}

/* .features-head h2:before {
position: absolute;
    left: 48%;
    bottom: 0;
    height: 2px;
    width: 45px;
    background-color: #ff8a00;
    content: "";
} */


.triangle {
	position: relative;
	background-color:#fec212;
	text-align: left;
}
.triangle:before,
.triangle:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle {
	transform: rotate(-130deg) skewX(-30deg) scale(1,.866);
    margin-top: -30px;
    scroll-margin-top: 10px;
}
.triangle:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

@media(max-width:1024px){
    .sec-title .float-text-test {
        position: absolute;
        left: 0px;
        top: 45px;
        width: 100%;
        font-size: 52px;
        line-height: 1.2em;
        color: #222222;
        font-weight: 700;
        text-transform: uppercase;
        opacity: 1;
        font-family: 'Poppins', sans-serif;
    }
    .sec-title .float-text-pro {
        position: absolute;
        left: 0px;
        top: 45px;
        width: 100%;
        font-size: 52px;
        line-height: 1em;
        color: #222222;
        font-weight: 700;
        text-transform: uppercase;
        opacity: 1;
        font-family: 'Poppins', sans-serif;
    }
}



@media (max-width: 768px) {
    .vision-block {
        background-color: transparent;
        padding: 0px;
        margin: 0px;
        height: auto;
        width: auto;
    }

    .vision-block .vision-img {
        position: relative;
        margin: 0 auto;
        display: table;
        right: auto;
    }

    .vision-block h2 {
        text-align: center;
        margin-bottom: 15px;
    }

    .vision-block-content {
        text-align: justify;
        margin: 5% 20%;
    }

    .vision-img:after {
        display: none;
    }

    .value-block {
        background-color: transparent;
        padding: 0px;
        margin: 0px;
        height: auto;
        width: auto
    }

    .value-block .value-img {
        position: relative;
        bottom: 0;
        margin: 0 auto !important;
        display: table;
        left: auto;
    }

    .value-block h2 {
        text-align: center;
        margin-bottom: 15px;
    }

    .value-block-content {
        text-align: justify;
        margin: 5% 20%;
    }

    .value-img:before {
        display: none;
    }

    .bot {
        margin: 0px 0px 60px;
    }

    .sec-title{
		margin-bottom: 0px;
		margin-right: 0px;
	}
    .news-section .sec-title {
        position: relative;
        margin-bottom: 45px;
        background-image: url(../images/background/11.jpg);
        padding: 20px 30px;
        z-index: 1;
    }

    .services-section .upper-box {
        position: relative;
        padding: 35px 0 215px;
    }
    .testimonial-section .title-column .sec-title {
       margin-bottom: 0px; 
       margin-right: 0px;
    }
    .testimonial-section {
        position: relative;
        margin: 100px 0px;
    }
    .news-section {
        position: relative;
        padding: 0px 0 70px;
    }
    .sec-title .float-text {
        font-size: 35px!important;
        line-height: 35px!important;
        display: none;
    }
    .content-box .bk-titile {
        display: none;
    }

    .sec-title .float-text-sec {
        position: absolute;
        left: 25px;
        top: -26px;
        display: none;
        width: 100%;
        font-size: 46px;
        line-height: 1em;
        color: #ffffff8a;
        font-weight: 700;
        text-transform: uppercase;
        opacity: .10;
        font-family: 'Poppins', sans-serif;
    }
    .sec-title h2 {
        position: relative;
        display: block;
        text-transform: uppercase;
        font-size: 30px;
        line-height: 40px;
        color: #222222;
        font-weight: 400!important;
        padding: 16px 0;
    }
    .sec-title-mob h2 {
        position: relative;
        display: block;
        text-transform: uppercase;
        font-size: 30px;
        line-height: 40px;
        color: #ffff;
        font-weight: 500;
        padding: 16px 0;
    }
    /* .owl-head-mob-top{
        margin-bottom: 60px!important;
    } */
    .sec-title .float-text-pro {
        position: absolute;
        left: 12px;
        display: block;
        top: 35px;
        width: 100%;
        font-size: 46px;
        line-height: 1em;
        color: #222222;
        font-weight: 700;
        text-transform: uppercase;
        opacity: 1;
        font-family: 'Poppins', sans-serif;
    }
    .sec-title .float-text-test {
        position: absolute;
        display: none;
        left: 25px;
        top: 45px;
        width: 100%;
        font-size: 72px;
        line-height: 1em;
        color: #222222;
        font-weight: 700;
        text-transform: uppercase;
        opacity: 1;
        font-family: 'Poppins', sans-serif;
    }
    .team-block .image-box .name {
        position: absolute;
        right: 20px;
        bottom: 40px;
        min-width: 170px;
        text-align: center;
        background-color: #222222;
        z-index: 9;
        font-family: 'Poppins', sans-serif;
        transform: skewX(-30deg);
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        transition: all 200ms linear;
    }
    .team-block .inner-box {
        position: relative;
        padding: 15px;
    }
}

@media (max-width: 586px) {
    .value-block-content {
        text-align: justify;
        margin: 5% 5%;
    }

    .vision-block-content {
        text-align: justify;
        margin: 5% 5%;
    }

    .main-footer .widgets-section {
        position: relative;
        padding: 50px 0 60px;
        margin-top: auto;
    }
    .triangle, .triangle:before, .triangle:after {
        width: 8em;
        height: 8em;
        border-top-right-radius: 30%;
    }
    .main-header .logo-box .logo {
        position: absolute;
        left: 28px;
        bottom: -32px;
        z-index: 1;
        width: 130px;
        /* height: 150px; */
        -webkit-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    .main-header .logo-box {
        position: relative;
        float: left;
        margin-left: -10px;
        top: 35px;
    }
    .header-style-four .header-top {
        position: relative;
        background-color: transparent !important;
        display: none;
    }
    .banner-section {
        position: relative;
        margin-top: -20px;
    }
    .about-section .content-column .content-box {
        position: relative;
        padding: 30px 90px 30px;
        background-color: #f5f5f5d2;
        border: 20px solid #d3d3d3;
        border-left: 0;
    }
    .sec-title .float-text-two {
        position: relative;
        bottom: 10px;
        width: 104%;
        font-size: 52px;
        line-height: 1em;
        color: #222222;
        font-weight: 700;
        text-transform: uppercase;
        opacity: 1;
        font-family: 'Poppins', sans-serif;
    }
    .contact-page-section .contact-form {
        margin-bottom: 20px;
    }

    .news-block-two .image-box .pro-image {
        position: absolute;
        margin-bottom: 0;
        width: 200px;
        height: auto;
        top: 50%;
        left: 7%;
        border-radius: 100%;
        z-index: 1;
        /* border: 10px solid #d1d1d1ed; */
        box-shadow: 1px 12px 15px #cacaca;
    }
    .features-head h2 {
        font-size: 46px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        margin-bottom: 50px;
    }
    .sec-title .float-text-about-black {
        position: absolute;
        bottom: 0px;
        text-align: center;
        width: 100%;
        font-size: 52px;
        line-height: 1em;
        color: #222222;
        font-weight: 700;
        text-transform: uppercase;
        opacity: 1;
        font-family: 'Poppins', sans-serif;
    }
    .client-block ul li {
        flex-basis: 34%;
        border-width: 1px 1px 1px 1px;
        border-style: solid;
        margin: 0px 0px -2px -2px;
        border-color: var(--color-border);
        padding: 20px 0 20px 0;
        text-align: center;
        background-color: #d1d1d1b3;
    }
}