﻿@import url(effect.css);
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;600&display=swap');

/* Fonts */

html { margin: 0; padding:0; overflow-x:hidden;}
body{
font-family: 'Source Sans Pro', sans-serif; font-weight:normal; padding:0; color:#333; font-weight:normal; padding-right:0!important;
font-size:15px;
line-height:1.5;
}
body:before{position:absolute; left:0; right:0; top:0; height:1px; content:''; background:var(--dark); display:block; z-index:100;}

/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */

:root{--blue:#1e4498; --red:#e21e1c; --dark:#4a5c5e;}

img{border:0;}

*{ box-sizing:border-box;
}
*:hover{
}

a{color:var(--red); text-decoration:none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
a:hover{text-decoration:none; color:var(--red);}

h1, h2, h3, h4, h5{margin:0 0 15px; padding:0; color:var(--dark);}

.wahtsappImg{position:fixed;z-index:9999;left:15px;bottom:20px}
.wahtsappImg img{height:65px}

.container{width:1280px; max-width:99%;}

.header{padding:0; display:block; float:left; width:100%; position:fixed; z-index:9999; margin-top:0.5px;}
.headerTop{background:var(--dark); padding:0 20px; color:#fff; font-size:13px; text-transform:uppercase;}
.headerTop ul{list-style-type:none; margin:0; display:inline-block; border-left:1px rgba(255,255,255,0.2) solid; padding:0 15px;}
.headerTop ul:first-child{border:none; padding-left:0; font-size:16px;}
.headerTop ul li{display:inline-block;}
.headerTop ul li a{display:block; padding:5px; color:#fff;}
.headerTop ul li a img{height:18px;filter: brightness(0) invert(1);}
.headerTop ul li a:hover, .headerTop ul li a.active, .headerTop ul li a:hover img, .headerTop ul li a.active img{color:var(--red);filter: brightness(1) invert(0);}
.headerTop .text-right img{height:16px;filter: brightness(0) invert(1);}

.headerContainer{background:rgba(0,0,0,0.3); padding:10px 20px; color:#fff; display:block; border-bottom:1px rgba(255,255,255,0.3) solid;}
.headerContainer img{max-width:100%;}
.callBtn{float:right; color:#fff; background:var(--red); padding:5px 30px; font-weight:600; border-radius:40px;}
.callBtn:hover{color:var(--red); background:#fff;}


.sticky{
z-index:9999; top:0!important; position:fixed; margin-top:0;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}
.sticky .headerContainer{ background:#fff;transition:all .2s ease-in-out;}
.sticky .headerContainer img{content:url(../images/logo-original.svg);}


.bannerArea{display:block; clear:both; overflow:hidden; position:relative;}
.bannerArea:before{position:absolute; top:0; bottom:5%; left:0; right:5%; display:block; content:''; background:var(--blue); z-index:-1;}
.bannerArea .carousel-item img{float:right; width:800px; max-width:120%;}
.bannerArea .carousel-control-prev, .bannerArea .carousel-control-next{width:40px; height:40px; top:60%; right:0; left:auto; opacity:1; background:var(--red); color:#fff; z-index:100;}
.bannerArea .carousel-control-prev:hover, .bannerArea .carousel-control-next:hover{ background:var(--dark);}
.bannerArea .carousel-control-prev{top:calc(60% - 42px);}
.bannerArea .carousel-control-prev i, .bannerArea .carousel-control-next i{font-size:18px;}

.sliderContent{position:absolute; top:32%; left:5%; width:450px; color:#fff; font-size:20px;}
.sliderContent h2{font-size:34px; font-weight:700; color:#fff; line-height:1.2; font-family:'Zilla Slab';}
.sliderContent p{margin-bottom:25px;}
.sliderContent a{color:#fff; background:var(--red); display:inline-block; padding:10px 20px 10px 10px; border-radius:50px; font-weight:700;}
.sliderContent a img{background:#fff; color:var(--red); width:40px; height:40px; font-size:18px; line-height:40px; padding:8px; text-align:center; border-radius:50%;}
.sliderContent a:hover{background:#fff; color:var(--red);}
.sliderContent a:hover img{background:var(--blue); color:#fff;}


.welcomeArea{display:block; margin:60px auto 120px; width:800px; max-width:100%; text-align:center; position:relative;}
.welcomeArea h1, .testimonialsArea h2{font-weight:400; font-size:36px; color:var(--red); text-transform:uppercase; margin-bottom:5px; font-family:'Zilla Slab';}
.welcomeArea h2, .testimonialsArea h3{font-size:22px; letter-spacing:2px; color:var(--dark); text-align:center;}
.welcomeArea p{margin-bottom:25px;}
.welcomeArea > div > a, .testimonialsArea a{display:inline-block; padding:8px 30px; font-size:14px; letter-spacing:1px; color:#fff; background:var(--red); text-transform:uppercase; border-radius:25px;}
.welcomeArea > div > a:hover, .testimonialsArea a:hover{background:var(--dark);}


.scroll-downs {
  position: absolute;
  right: 0;
  bottom: -60px;
  left: 0;
  margin: auto;
  
  width :28px;
  height: 25px;
}
.mousey {
  width: 3px;
  padding: 7px 12px;
  height: 28px;
  border: 2px solid var(--dark);
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: var(--red);
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}


@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

.serviceArea{background:var(--dark) url("../images/serviceBg.jpg") fixed repeat; display:block; overflow:hidden;}
.serviceArea > div{background:var(--dark); padding:30px 30px 0; position:relative; text-align:center; color:#fff;}
.serviceArea > div > img{position:absolute; left:0; bottom:0;}
.serviceArea h2{color:#fff; text-transform:uppercase; font-family:'Zilla Slab'; font-weight:600; font-size:36px; padding:20px 0;}
.serviceArea [class^="col-"]{margin-bottom:20px;}
.serviceArea [class^="col-"] > a{color:#fff; display:block; overflow:hidden;}
.serviceArea [class^="col-"] > a > img{width:80px; margin-bottom:10px; transition:all .2s ease-in-out;}
.serviceArea [class^="col-"] > a h3{color:#fff; font-size:18px; font-weight:700; margin-bottom:5px;}
.serviceArea [class^="col-"] > a:hover > img{transform: rotate(360deg);}


.skillArea{display:block; overflow:hidden; clear:both; padding:80px 0;}
.skillArea h3{font-size:42px; letter-spacing:1px; color:var(--dark); margin-bottom:5px;}
.skillArea p{font-size:17px; width:250px; max-width:100%;}
.skillArea .row .row{text-align:center;}
.skillArea .row .row h4{font-size:16px; font-weight:700; padding:15px 0 0; text-transform:uppercase; color:var(--dark);}

.progress{
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}
.progress:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.progress > span{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
.progress .progress-left{
    left: 0;
}
.progress .progress-bar{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 6px;
    border-style: solid;
    position: absolute;
    top: 0;
}
.progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.progress .progress-right{
    right: 0;
}
.progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
    width: 85%;
    height: 85%;
    border-radius: 50%;
    border: 2px solid #ebebeb;
    font-size: 32px;
    line-height: 125px;
    text-align: center;
    position: absolute;
    top: 7.5%;
    left: 7.5%;
    background:#eee;
}
.progress.blue .progress-bar{
    border-color: #049dff;
}
.progress.blue .progress-value{
    color: #049dff;
}
.progress.blue .progress-left .progress-bar{
    animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
    border-color: #fdba04;
}
.progress.yellow .progress-value{
    color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
    animation: loading-3 2s linear forwards 1.8s;
}
.progress.pink .progress-bar{
    border-color: #ed687c;
}
.progress.pink .progress-value{
    color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
    animation: loading-4 2.5s linear forwards 1.8s;
}
.progress.green .progress-bar{
    border-color: #1abc9c;
}
.progress.green .progress-value{
    color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
    animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes loading-2{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(100deg);
        transform: rotate(100deg);
    }
}
@keyframes loading-3{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(150deg);
        transform: rotate(150deg);
    }
}
@keyframes loading-4{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes loading-5{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(126deg);
        transform: rotate(126deg);
    }
}
@media only screen and (max-width: 990px){
    .progress{ margin-bottom: 20px; }
}


.blueFullArea{display:block; position:relative; background:var(--red) url('../images/bg-inner-page.png') no-repeat center center; background-blend-mode:linear-light; letter-spacing:1px; color:#fff; text-align:center;}
.blueFullArea h2{display:block; overflow:hidden; margin-bottom:20px; font-weight:700; font-size:42px; color:#fff;font-family:'Zilla Slab';}
.blueFullArea h2 strong{color:#fff;}
.blueFullArea p{display:block; overflow:hidden; font-size:20px; margin-bottom:25px; line-height:1.5;}
.blueFullArea [class^="col-"] > img{position:relative; top:-40px; margin-bottom:-40px; width:100%;}
.blueFullArea a{background:#fff; color:var(--dark); padding:10px 15px; display:inline-block; text-transform:uppercase; font-size:16px; transition:0.5s ease;}
.blueFullArea a img{filter: brightness(0.5) invert(1); position:relative; top:-2px;}
.blueFullArea a i{font-size:20px;color:var(--lightblue); margin-left:10px; position:relative; top:2px;}
.blueFullArea a:hover{background:var(--dark); color:#fff; padding:10px 25px;}
.blueFullArea a:hover img{filter: brightness(1) invert(0);}



.portfoliaArea{background:var(--blue) url("../images/serviceBg.jpg") fixed repeat; padding:80px 0 60px; position:relative;}
.portfoliaArea > svg{ position:absolute; bottom:-5px; left:0; right:0;}
.portfoliaArea > div{position:relative; z-index:5;}
.portfoliaArea h2{color:#fff; font-size:48px; text-transform:uppercase; margin-bottom:30px;}
.portfoliaArea a{background:#fff; color:var(--dark); padding:10px 15px; display:inline-block; text-transform:uppercase; font-size:16px; transition:0.5s ease;}
.portfoliaArea a img{filter: brightness(0.5) invert(1); position:relative; top:-2px;}
.portfoliaArea a i{font-size:20px; margin-left:10px; position:relative; top:2px;}
.portfoliaArea a:hover{background:var(--red); color:#fff; padding:10px 25px;}
.portfoliaArea a:hover img{filter: brightness(1) invert(0);}

.quoteForm{ display:block; border-radius:30px; background:#fff url('../images/phonbgicon.png') no-repeat right 15px top 15px; padding:40px 20px;
-webkit-box-shadow: 10px 10px 0px 0px #637476;
-moz-box-shadow: 10px 10px 0px 0px #637476;
box-shadow: 10px 10px 0px 0px #637476;
}
.quoteForm h3{font-size:26px; font-weight:600; line-height:1.5; margin-bottom:30px;font-family:'Zilla Slab';}
.quoteForm label{display:block; margin-bottom:10px; font-weight:600;}
.quoteForm .form-control{ padding:12px 15px; margin-bottom:15px; border-radius:10px; height:auto;}
.quoteForm textarea{height:80px!important; margin-bottom:30px!important;}
.quoteForm button,.quoteForm input[type="submit"]{ margin:10px 0 0; padding:12px 15px; border:none; display:block; width:100%; border-radius:8px; text-transform:uppercase; font-size:12px; font-weight:700; color:#fff; background:var(--red);}


.testimonialsArea{display:block; clear:both; overflow:hidden; padding:50px 0;text-align:center;}
.testimonialsArea h2{}
.testimonialsArea .item > div{background:#fff; padding:40px; margin:10px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}
.testimonialsArea .item > div span{width:170px; margin:0 auto; height:34px; display:block; margin-bottom:15px; background:transparent url('../images/stars.png') no-repeat left top;}
.testimonialsArea .item > div span.star-4{background-position:left top -34px;}
.testimonialsArea .item > div span.star-3{background-position:left top -68px;}
.testimonialsArea .item > div span.star-2{background-position:left top -102px;}
.testimonialsArea .item > div span.star-1{background-position:left top -136px;}
.testimonialsArea .item > div h4{font-size:18px; margin-bottom:4px; font-weight:600;}
.testimonialsArea .item > div h5{font-size:14px; color:var(--red);}

.owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next{ margin:0 30px; top:42%; border-radius:50%; position:absolute; opacity:1; z-index: 10;}
.owl-carousel .owl-nav button img{width:50px; height:50px; background:var(--red); border-radius:50%; padding:8px;}
.owl-carousel .owl-nav button.owl-prev{left:-50px;}
.owl-carousel .owl-nav button.owl-next{right:-50px;}
.owl-carousel .owl-nav button.owl-prev:hover,.owl-carousel .owl-nav button.owl-next:hover{background:none;opacity:1;}

.footerBoxes{background:var(--blue);}
.footerBoxes > [class^="col-"]{position:relative;}
.footerBoxes > [class^="col-"]:before{position:absolute; left:0; right:0; top:0; bottom:0; display:block; content:''; background:#000; opacity:0;}
.footerBoxes > [class^="col-"]:nth-child(2):before{opacity:0.1;}
.footerBoxes > [class^="col-"]:nth-child(3):before{opacity:0.15;}
.footerBoxes > [class^="col-"]:nth-child(4):before{opacity:0.2;}
.footerBoxes > [class^="col-"]:nth-child(5):before{opacity:0.25;}
.footerBoxes > [class^="col-"]:nth-child(6):before{opacity:0.3;}
.footerBoxes > [class^="col-"] > div{position:relative; z-index:5; padding:40px;}
.footerBoxes > [class^="col-"] > div > img{position:absolute;}
.footerBoxes > [class^="col-"] > div > div{padding:15px 0; color:#fff; margin-left:130px; font-size:14px;}
.footerBoxes > [class^="col-"] > div > div span{display:block; clear:both; overflow:hidden; line-height:1.2; margin-bottom:10px;}
.footerBoxes > [class^="col-"] > div > div h5{color:#fff; margin-bottom:10px; font-size:16px; font-weight:700; text-transform:uppercase;}
.footerBoxes > [class^="col-"] > div > div a{display:inline-block; text-align:center; color:#fff; background:var(--red); padding:5px 15px; text-align:center; border-radius:30px;}
.footerBoxes > [class^="col-"] > div > div a:hover{background:#fff; color:var(--red);}


.footer{display:block; background:var(--dark); color:#fff; padding:40px 0 20px; text-align:center;}
.footer > div{border-top:1px rgba(255,255,255,0.1) solid;border-bottom:1px rgba(255,255,255,0.1) solid;}
.footer > ul{list-style-type:none; margin:0; padding:0 0 20px;}
.footer > ul li{display:inline-block; margin:0 5px;}
.footer > ul li a{display:block; width:50px; height:50px; text-align:center; line-height:50px; background:#fff; color:var(--red); border-radius:50%; font-size:18px;}
.footer > ul li a:hover{background:var(--red); color:#fff;}
.footer > ul li a:hover img{filter: brightness(0) invert(1);}

.footer > div ul{list-style-type:none; margin:0; padding:20px 0;}
.footer > div ul li{display:inline-block; margin:0 20px;}
.footer > div ul li a{color:#fff; text-transform:uppercase; font-size:14px;}
.footer > div ul li a:hover{color:var(--red); font-weight:700;}

.footer p{display:block; padding:20px 0 0;}


#scroll-icon{position:fixed; display:block; height:40px; width:40px; line-height:40px; text-align:center; right:15px; bottom:15px; background:var(--red); color:#fff; z-index:1000;}

.innerbannerArea{display:block; clear:both; overflow:hidden; position:relative; padding:120px 0 0;}
.innerbannerArea:before{position:absolute; top:0; bottom:18%; left:0; right:0; display:block; content:''; background:var(--blue) url("../images/blue-texture.jpg") fixed repeat; z-index:-1;}
.innerbannerArea img{float:right;width:430px; max-width:70%;}

.innerHead{position:absolute; left:5%; top:40%; color:#fff; z-index:5; text-transform:uppercase;}
.innerHead h1{color:#fff; font-size:42px; font-family:'Zilla Slab';}
.innerHead ul{margin:0; padding:0; list-style-type:none;}
.innerHead ul li{display:inline-block; margin:0; padding:0 10px 0 0;}
.innerHead ul li a{color:var(--red);}
.innerHead ul li a:after{content:'>'; color:#fff; margin-left:10px;}


.innerContainer{font-size:17px; display:block; overflow:hidden; clear:both; padding:0 0 60px;}
.innerContainer h2, .innerContainer h3, .innerContainer h4{font-family:'Zilla Slab';}

.aboutbox{width:1000px; max-width:90%;margin:0 auto 60px; text-align:center;}
.innerContainer h2{color:var(--red);}
.innerContainer h3{font-size:22px; margin-bottom:5px;}

.ourStory{display:block; clear:both; overflow:hidden; position:relative; padding:150px 0;}
.img-bg {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #dfdfdf url('../images/welcomeBg.jpg') no-repeat fixed center center;
background-size: cover;
clip-path: inset(20% at center);
z-index:-1;
}
.content, .teamArea{max-width:90%;margin:0 auto; text-align:center; width:700px;}

.teamArea{padding:80px 0 0;}

.contactBox{}
.contactBox h3{font-weight:700; margin-bottom:10px;}
.contactBox h3 img{height:18px; margin:-5px 3px 0 0;}
.contactBox .col-md-7 > a{ display:block; font-size:26px; font-weight:600; margin-bottom:15px;}

.contactBox ul{list-style-type:none; margin:0; display:inline-block; margin:20px 0 0; padding:0;}
.contactBox ul li{display:inline-block; margin-right:5px;}
.contactBox ul li a{display:block; padding:5px 5px 7px; color:#fff; border:2px var(--red) solid;}
.contactBox ul li a:hover{background:var(--red);}
.contactBox ul li a:hover img{filter: brightness(0) invert(1);}

.contactformArea{display:block; margin-left:30px; background:#ddd; padding:45px;}
.contactformArea label{margin-bottom:5px;}
.contactformArea input, .contactformArea textarea{margin-bottom:15px; background:#fff; border-radius:0; border:2px var(--dark) solid;}
.contactformArea input[type="submit"]{width:100%; background:var(--red); color:#fff;  padding:12px; border:none; margin-bottom:0; text-transform:uppercase; font-weight:700;}
.contactformArea input[type="submit"]:hover{background:var(--blue);}


.reviewsArea{text-align:center;}
.reviewsArea h3{ font-weight:400; font-size:36px; color:var(--blue);}
.reviewsArea h3 strong{display:block; clear:both;}
.reviewsArea small{font-size:20px; margin-bottom:15px; display:block; clear:both; overflow:hidden;}
.reviewsArea big{ font-size:30px; display:block; clear:both; overflow:hidden; margin-bottom:40px;}
.reviewsArea big i{margin:2px; color:var(--yellow);}


.servicepages h2{font-size:55px; line-height:1.2; margin-bottom:30px;}
.colorStyleArea{display:block; overflow:hidden; color:#fff; padding:60px 0 30px; background: rgb(30,68,152); background: linear-gradient(45deg, rgba(30,68,152,1) 0%, rgba(226,30,28,1) 100%);}
.colorStyleArea h2{color:#fff;}
.colorStyleArea [class^="col-"] [class^="col-"]{margin-bottom:30px;}
.colorStyleArea h3{color:#fff; font-size:26px;}

.serviceContact{padding:60px 0 0; text-align:center}
.serviceContact h3{font-size:38px; margin-bottom:20px;}
.serviceContact p{font-weight:400; font-size:22px; margin-bottom:30px;}
.serviceContact a{display:inline-block; padding:15px 30px; font-size:16px; letter-spacing:1px; color:#fff; background:var(--red); text-transform:uppercase; border-radius:40px;}
.serviceContact a:hover{background:var(--dark);}

.serviceListingpage{text-align:center;}
.serviceListingpage [class^="col-"]{margin-bottom:30px;}
.serviceListingpage [class^="col-"] > div{background:var(--dark); padding:40px; color:#fff;font-size:20px; border-radius:15px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
.serviceListingpage [class^="col-"] > div:hover{background:var(--blue);}
.serviceListingpage [class^="col-"] > div h3{color:#fff; padding:10px 0;}
.serviceListingpage [class^="col-"] > div img{height:100px;}
.serviceListingpage [class^="col-"] > div a{display:inline-block; padding:10px 30px; margin-top:10px; font-size:14px; letter-spacing:1px; color:#fff; background:var(--red); text-transform:uppercase; border-radius:40px;}
.serviceListingpage [class^="col-"] > div a:hover{background:#fff; color:var(--red);}

/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media (max-width: 1024px){
}

@media (max-width: 991px){
.headerTop{padding:0 10px;}
.headerContainer{padding:8px 10px;}

.bannerArea:before{bottom:0; right:0; border-radius: 50px 0;}
.sliderContent{position:static; width:100%; padding:30px;}
.sliderContent h2{font-size:24px;}

.serviceArea > div > img{display:none;}

.blueFullArea{padding-top:25px;}
.blueFullArea [class^="col-"] > img{top:0px; margin-bottom:0px; width:90%; margin-top:25px;}

}

@media (max-width: 767px){
.headerContainer img{max-width:80%;}
.headerTop ul:last-child{display:none;}

.skillArea{text-align:center;}
.skillArea p{width:100%; margin-bottom:40px;}

.portfoliaArea [class^="col-"]:first-child{text-align:center; margin-bottom:40px;}

.footerBoxes > [class^="col-"] > div {padding: 30px;}
.footerBoxes > [class^="col-"] > div > img{ width:60px; top:28%;}
.footerBoxes > [class^="col-"] > div > div{margin-left:80px;}

.innerbannerArea:before{bottom:13%;}
.innerHead{position:static; display:block; text-align:center;}
.innerHead h1{font-size:40px;}

.contactformArea{margin:0px;}
.contactBox .col-md-7 > a{font-size:22px;}
.contactBox > .row > [class^="col-"]:first-child{margin-bottom:40px;}
.contactBox > .row > [class^="col-"] [class^="col-"]:first-child{margin-bottom:15px;}
.contactformArea{ padding:25px;}

.servicepages h2{font-size:30px;}

}

@media (max-width: 500px){
}

@media (max-width: 360px){
}


@media screen and (max-width: 1920px) and (min-width: 1240px){
}