/************************************************* Header ********************************************************************/
#Header {font-size:17px; color:#000;}  #Header + main {margin-top:152px;}  
.CallText a,.Phnmail a{color:#000;}.SerArea a:hover,.Phnmail a:hover{color:#d4202b;}

/********** Main Banner **************************************************************************************************/
.MainBanner .carousel-caption{text-shadow:1px 1px 1px rgba(0,0,0,.3); line-height:1.4;} 
.BnrText{width:75%;}

.diagonal-box {margin-top:110px; background-image:linear-gradient(45deg, #f70066, #7e00fd); transform:skewY(3deg); height:600px;}
.content {margin:0 auto; transform:skewY(-3deg);}

.diagonal-box1 {background-image:linear-gradient(45deg, #f2f2f2,#f2f2f2); transform:skewY(3deg); height:634px; padding-top:130px;}
.content1 {margin:0 auto; transform:skewY(-3deg);}

.ImgTop{margin-top:-247px;}
.TextBox{padding:40px 30px 30px 30px; border-radius:16px; line-height:1.6;}
.Head{letter-spacing:.020em !important; font-size:18px; line-height:25px; margin-bottom:15px;}

#chevron {position:relative; text-align:center; padding:12px; margin-bottom:6px; height:970px;}
#chevron:before {content:''; position:absolute; top:0; left:0; height:100%; width:51%; background:#ececec; transform:skew(0deg, 6deg);}
#chevron:after {content:''; position:absolute; top:0; right:0; height:100%; width:50%; background:#ececec; transform:skew(0deg, -6deg);}
#chevron .container{z-index:9;position:absolute; left:0px; right:0px;}
  

.hero {position:relative; font-size:30px; line-height:40px; font-weight:300; background:#000; color:#FFF; border-radius:70px; border:24px solid #fff; padding:45px 30px; min-height:420px;}
.hero:after, .hero:before {top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.hero:after {border-color:rgba(0, 0, 0, 0); border-top-color:#000; border-width:40px; margin-left:-40px;}
.hero:before {border-color:rgba(255, 255, 255, 0); border-top-color:#fff; border-width:68px; margin-left:-68px;}


#ContactForm {position:relative; text-align:center; padding:12px;  height:720px;
background: rgb(248,0,101);
background: linear-gradient(90deg, rgba(248,0,101,1) 0%, rgba(233,0,120,1) 20%, rgba(190,0,173,1) 40%, rgba(161,0,209,1) 60%, rgba(136,0,241,1) 80%, rgba(126,0,253,1) 100%);}

#ContactForm:before {content:''; position:absolute; top:-43px; left:0; height:100%; width:51%; 
background: rgb(251,0,97);
background: linear-gradient(84deg, rgba(251,0,97,1) 0%, rgba(218,0,138,1) 49%, rgba(169,0,199,1) 87%); transform:skew(0deg, 6deg);}
   
#ContactForm:after {content:''; position:absolute; top:-43px; right:0; height:100%; width:50%; 
background: rgb(169,0,199);
background: linear-gradient(84deg, rgba(169,0,199,1) 0%, rgba(141,0,234,1) 49%, rgba(126,0,253,1) 87%); transform:skew(0deg, -6deg);}
#ContactForm .container{z-index:9; position:absolute; left:0px; right:0px;}



#ContactForm a{color:#fff;}#ContactForm a:hover{color:#000;}
#ContactForm .list-inline-item:not(:last-child) {margin-right:28px;}

	.mark, mark {
    padding: 0px !important;
}
	
.text-grey {color:#464646;}	

/************************************************* Testimonials ********************************************************************/
#ContactForm .form-group {margin-bottom:21px;}
#ContactForm .form-control{font-size:13px; background:#fff; border-color:#fff; border-radius:0; height:50px; color:#7a7a7a; box-shadow:0px 0px 5px rgba(54,54,54,.3)}
#ContactForm .form-control::placeholder{color:#7a7a7a;}
#ContactForm textarea.form-control{height:121px;font-size:13px;}
.map {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}

#Innerpages{min-height:500px;} .coming {min-height:400px;}.opimg{opacity:.1;}

/********** Footer ***************************************************************************************************/
#Footer{color:#7b7b7b; font-size:12px; line-height:26px;}
#Footer a{color:#7b7b7b;}#Footer a:hover{color:#e7001b;}


.List {padding:0; margin:0 0 15px 0; list-style-type:none;}
.List li{background:url(../images/check.png) no-repeat 0.1em 0.43em; padding:3px 0 3px 40px; margin:0px;}

/***********/

.price-text ul li {
    list-style-type: none;
    font-size: 16px;
}

.cont-text textarea.wpcf7-form-control.wpcf7-textarea {
    height: 80px;
}


        .feat h1,
        h2,
        h3,
        h4,
        h5,
        h6 {}
        a,
        a:hover,
        a:focus,
        a:active {
            text-decoration: none;
            outline: none;
        }
        
        .feat a,
        a:active,
        a:focus {
            color: #333;
            text-decoration: none;
            transition-timing-function: ease-in-out;
            -ms-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -webkit-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
            transition-duration: .2s;
            -ms-transition-duration: .2s;
            -moz-transition-duration: .2s;
            -webkit-transition-duration: .2s;
            -o-transition-duration: .2s;
        }
        
        .feat ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .feat img {
    max-width: 100%;
    height: auto;
}
.feat span, a, a:hover {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.feat .svg-inline--fa.fa-w-14, .fa {
    width: 30px !important;
    float: none !important;
    margin-right: 3px !important;
    align-self: center;
}
.section-head {
  margin-bottom: 60px;
}
.section-head h4 {
  position: relative;
  padding:0;
  color:#f91942;
  line-height: 1;
  letter-spacing:0.3px;
  font-size: 34px;
  font-weight: 700;  
  text-align:center;
  text-transform:none;
  margin-bottom:30px;
}
.section-head h4:before {
  content: '';
  width: 60px;
  height: 3px;
  background: #f91942;
  position: absolute;
  left: 0px;
  bottom: -10px;
  right:0;  
  margin:0 auto;
}
.section-head h4 span {
  font-weight: 700;
  padding-bottom: 5px;
  color:#2f2f2f
}
p.service_text{
  color:#cccccc !important;
  font-size:16px;
  line-height:28px;
  text-align:center;    
}
.section-head p, p.awesome_line{
  color:#818181;
  font-size:16px;
  line-height:28px;
  text-align:center;  
}

.extra-text {
    font-size:34px;
    font-weight: 700;
    color:#2f2f2f;
    margin-bottom: 25px;
    position:relative;
    text-transform: none;
}
.extra-text::before {
    content: '';
    width: 60px;
    height: 3px;
    background: #f91942;
    position: absolute;
    left: 0px;
    bottom: -10px;
    right: 0;
    margin: 0 auto;
}
.extra-text span {
    font-weight: 700;
    color:#f91942;
}
.item {
    background: #fff;
    text-align: center;
    padding: 30px 25px;
    -webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
    box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    border:5px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 30px;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover{
    background:#f91942;
    box-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover .item, .item:hover span.icon{
    background:#fff;
    border-radius:10px;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover h6, .item:hover p{
    color:#fff;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item .icon {
    font-size: 30px;
    margin-bottom: 20px;
    color: #f91942;
    width: 90px;
    height: 90px;
    line-height: 97px;
    border-radius: 50px;
}
.item .feature_box_col_one{
    background:rgba(247, 198, 5, 0.20);
    color:#f91942
}
.item .feature_box_col_two{
    background:rgba(255, 77, 28, 0.15);
    color:#f91942
}
.item .feature_box_col_three{
    background:rgba(0, 147, 38, 0.15);
    color:#f91942
}
.item .feature_box_col_four{
    background:rgba(0, 108, 255, 0.15);
    color:#f91942
}
.item .feature_box_col_five{
    background:rgba(146, 39, 255, 0.15);
    color:#f91942
}
.item .feature_box_col_six{
    background:rgba(23, 39, 246, 0.15);
    color:#f91942
}
.item p{
    font-size:15px;
    line-height:26px;
	    height: 80px;
}
.item h6 {
    margin-bottom:20px;
    color:#2f2f2f;
}
.mission p {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 28px;
    font-weight: 500;
}
.mission i {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #f91942;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
}
.mission .small-text {
    margin-left: 10px;
    font-size: 13px;
    color: #666;
}
.skills {
    padding-top:0px;
}
.skills .prog-item {
    margin-bottom: 25px;
}
.skills .prog-item:last-child {
    margin-bottom: 0;
}
.skills .prog-item p {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 10px;
}
.skills .prog-item .skills-progress {
    width: 100%;
    height: 10px;
    background: #e0e0e0;
    border-radius:20px;
    position: relative;
}
.skills .prog-item .skills-progress span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #f91942;
    width: 10%;
    border-radius: 10px;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.skills .prog-item .skills-progress span:after {
    content: attr(data-value);
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 10px;
    font-weight:600;    
    color: #fff;
    background:rgba(0, 0, 0, 0.9);
    padding: 3px 7px;
    border-radius: 30px;
}



/**** Blog sidebar CSS ***/

.sidebar{
	background: linear-gradient(to right, #8c00f9, #d11d2b);
	padding:2rem;
	border-radius: 25px 25px 25px 25px;
}

.fs-blog{font-size:13px;}

.block{
	padding: 20px 10px;
    text-align: center;
	border: 1px solid #b800fa;
    background: #f2f2f2;
	margin-bottom: 60px;
	transition: opacity .25s;
	border-radius: 50px 25px 50px 25px;
}

.block:hover{    
	transform: scale(1.03);
	transition: transform 0.4s ease;
}

.border22{
	border-width: 3px;
	border-style: solid;
	border-image: linear-gradient(to bottom, #f5b200, rgba(0, 0, 0, 0)) 1 100%;
	padding: 10px;
}

.description{
	margin-left: auto;
	margin-right: auto;
	max-width: 250px;
}

.recent-post a:hover{color: #9b00d1;}

@media (min-width: 480px){
	.block {padding: 50px 30px;}
}

/**** Blog sidebar CSS end ***/



/*************************************************************************************************************/
.container-fluid{max-width:1920px !important;}
.container{max-width:1430px !important;} 

/* ============ desktop view ============ *
@media all and (min-width: 1025px) {
	.navbar .nav-item .dropdown-menu{ display:none;}
	.navbar .nav-item:hover .nav-link{ color:#adadad;}
	.navbar .nav-item:hover .dropdown-menu{ display:block;}
	.navbar .nav-item .dropdown-menu{ margin-top:0;}
}	
/* ============ desktop view .end// ============ */


/* Large devices (desktops, 992px and up) */
@media (min-width:992px) {
#Header {top:0px; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s;}
.shrink {background:rgba(255,255,255,1); box-shadow:0px 5px 12px rgba(0,0,0,.5); z-index:999;}
.navbar-brand img {max-width:225px;-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}
.shrink .navbar-brand img {max-width:180px;-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}

.navbar-brand{padding:18px 0px 25px 0px !important;}
.shrink .navbar-brand{padding:10px 0px !important;}

.Phnmail{margin-bottom:15px;}  .shrink .Phnmail{margin-bottom:5px;}

}
/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
.gutter-lg {margin-left:-20px!important;margin-right:-20px!important;}
.gutter-lg div[class^="col"]{padding-left:20px!important;padding-right:20px!important;}
}

@media (min-width: 1920px) {
#ContactForm:before {top:-50px;}
#ContactForm:after {top:-50px;}

}

@media (min-width: 1199.98px) and (max-width: 1359.98px) {}

/*@include media-breakpoint-between(md, xl) { ... }*/
@media (min-width: 768px) and (max-width: 1199.98px) {
.BnrText{width:85%;}
.fs-30 {font-size:24px;}
.fs-60 {font-size:46px;}
.fs-90 {font-size:70px; line-height:1.2;}
.hero {font-size:22px; line-height:27px;}
.diagonal-box {margin-top:80px;}
#chevron {height:870px;}
#ContactForm {height:660px;}
}

/*For example the @include media-breakpoint-only(md) { ... } will result in :*/
@media (min-width: 768px) and (max-width: 991.98px) {
#Header{position:static; background:#fff; padding:10px 0px;}#Header + main {margin-top:0px;}
.container{max-width:100% !important;}

.BnrText{width:100%;}
.fs-30 {font-size:20px;}
.fs-60 {font-size:36px;}
.fs-90 {font-size:60px; line-height:1.2;}
.diagonal-box {margin-top:50px;height: 500px;}
#chevron {height:930px;}
#ContactForm {height:660px;}

.diagonal-box1 {height:500px; padding-top:80px;}
.ImgTop {margin-top:-170px;}.fs-40 {font-size:30px;}

h2, .h2 {font-size:40px;}

.hero {font-size:22px; line-height:27px; min-height:unset;border: 14px solid #fff; padding: 35px 30px;}
.hero::before {border-width: 57px; margin-left: -57px;}

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Small devices (landscape phones, 576px and up) */
@media (max-width:767.98px) {
.container{max-width:100% !important;}
#Header{position:static; background:#fff; padding:10px 0px;}#Header + main {margin-top:0px;}

.BnrText{width:100%;}
.fs-30 {font-size:16px;}
.fs-60 {font-size:30px;}
.fs-90 {font-size:40px; line-height:1.2;}
.btn-lg{padding:10px 30px;font-size:18px;}


.diagonal-box {margin-top:50px;height: 500px;}
#chevron {height:930px;}
#ContactForm {height:940px;}

.diagonal-box1 {height:500px; padding-top:80px;}
.ImgTop {margin-top:-170px;}.fs-40 {font-size:30px;}

h2, .h2 {font-size:40px;}

.hero {font-size:22px; line-height:27px; min-height:unset;border: 14px solid #fff; padding: 35px 30px;}
.hero::before {border-width: 57px; margin-left: -57px;}

}

@media (max-width:575.98px) {
#Header {font-size:14px;padding:0 0 5px 0px;} #TestiArea{width:82%; line-height:1.4; font-size:15px;} 
.MainBanner .Homebnr .carousel-item  img {
    height:200px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.BnrText{width:100%;}.MainBanner .carousel-caption{ position:static; background:#000; padding:25px 0 5px 0px;}
.fs-30 {font-size:16px;}
.fs-60 {font-size:20px;}
.fs-90 {font-size:40px; line-height:1.2;}
.btn-lg{padding:10px 30px;font-size:18px;}

#ContactForm {height:1030px;}
h2, .h2 {
  font-size: 33px;
}
.diagonal-box {margin-top:50px; background-image:linear-gradient(0deg, #f70066, #7e00fd); transform:(0deg); height:unset; padding:50px 0px;}
.content {margin:0 auto; transform:(0deg);}
.ImgTop {margin-top:50px;}.hero {font-size:16px; line-height:20px;padding:20px 20px;}
}
/* X-Small devices (portrait phones, less than 576px) */

.widgettitle{font-size:25px;}
.widget {border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;}
.widget ul {list-style: none; padding: 0px;}
.widget ul li {border-bottom: 1px solid #ccc; padding: 5px;}
.widget ul li:last-child {border-bottom: 0px solid #fff;}

ul.bycategories {margin: 0; padding: 0; }
ul.bycategories li {list-style: none; list-style-type: none; margin: 0; padding: 0;}
ul.bycategories li a {list-style: none; list-style-type: none; margin: 0 20px 15px 0; float: left;  background: #eee; color: #464646; padding: 5px 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
ul.bycategories li a:hover{text-decoration: none; background: #ff6200; color: #fff;}
.clear{clear: both;}