@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;box-sizing:border-box}
a{color:#2d2a2a;text-decoration:none}
a{outline:0;-webkit-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s}
 body{
	margin: 0;
	padding: 0;
    font-family: Nunito, 'Helvetica Neue', Helvetica, sans-serf;
     line-height: 1.6;
    font-size:16px;
    color: #444444;    background: #f7f7f7;
    font-weight: normal;
}
.discover-more:hover {
    background:#d4600e;
    color: #fff !important;}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunito/v16/XRXW3I6Li01BKofAnsSUYevI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v5/7cHpv4kjgoGqM7E_DMs5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 1200px;
}
.responsive-bar{
    display: none;
}
nav{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
  padding:10px 365px;
/*  background: rgb(0 0 0 / 16%);*/
	background: rgb(208 44 44 / 70%);
    box-sizing: border-box;
    transition: .5s;
  z-index: 99999999999;
}
nav.black{
    background: rgba(0,0,0,0.8);
    height: 80px; 
 padding-right: 50px;
}
nav .logo{  float: left; width: 170px;}
nav .logo img{ padding-top:16px; transition: .5s;width: 100%;}
nav.black .logo img{
        padding-top: 10px;    height: auto;
}
nav > ul{
    width: 80%;
    margin: 0 auto;
    padding: 0;
    float: right;
}
nav > ul > li{ list-style: none; display: inline-block;}
nav > ul > li > a:hover{background: #f44336; color: #fff; border-radius: 5px;}
nav > ul > li > a{
    color: #fff;
    text-decoration: none;
    text-transform: uppercase; /*for capitalisation of letters */
    line-height: 80px;
    padding: 5px 20px;
    transition: .5s;   
}
nav.black > ul > li > a{
    color: #fff;
    line-height: 60px;
}

.button{width:55px; height:46px; position:absolute; right:0; top:10px; cursor:pointer; z-index:12399994}
.button:after{position:absolute; top:22px; right:20px; display:block; height:4px; width:20px; border-top:2px solid #fff; border-bottom:2px solid #fff; content:''}
.button:before{-webkit-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; position:absolute; top:16px; right:20px; display:block; height:2px; width:20px; background:#fff; content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; top:23px; border:0; height:2px; width:19px; background:#fff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg)}
.button.menu-opened:before{top:23px; background:#fff; width:19px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg)}
 
section.sec1{
    width: 100%; background: url(../images/banner.jpg) top center no-repeat;height: 670px;
    background-size: cover;
}

.banner-text {
    width: 50%;
    float: right;
    margin-top: 20%;
    background: #b519319e;
    padding: 20px;
    border-bottom: 10px solid #f3535a;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.content-head {
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height:60px;
    letter-spacing: 0px;
    font-weight: 700;
    font-size:50px;
    transform-origin: 50% 50%;
   }
.banner-text p{
   font-family: 'Barlow', sans-serif;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 26px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size:16px;
    transform-origin: 50% 50%;
    }
.city-support-feature h1 {
    font-family: Nunito, 'Helvetica Neue', Helvetica, sans-serf;
    margin-top: 0;
    font-size: 2.2em;
    color: #25ACF0; position:relative;
    margin-bottom: 0.7em;
     line-height: 1.3;
}
.city-support-feature h1:before {
    content: "";
    position: absolute;
    width: 80px;
    height: 2px;
    background-color: #f3535a;
    bottom: -5px;
} 
.city-support-feature h2 {
    font-family: Nunito, 'Helvetica Neue', Helvetica, sans-serf;
    margin-top: 0;
    font-size: 2.2em;
    color: #25ACF0;
    margin-bottom: 0.7em;
    position: relative;
     line-height: 1.3;
}
.city-support-feature h2:before {
    content: "";
    position: absolute;
    width: 80px;
    height: 2px;
    background-color: #f3535a;
    bottom: -5px;
} 
.city-support-blue-bg {width: 100%; float:left; background-color: #a22424 }

section.content{
    margin: 0;
    padding: 0;
}
.city-support-boxes:hover {
    box-shadow: 0 4px 0 #f3535a;
}
.city-support-feature {width: 100%; float: left; padding: 20px 0;}
.city-support-left{width: 50%; float: left; }
 .center {padding:40px;  }
.city-support-left p{text-align: justify; }
.city-support-right{width:50%; float:right; }
.city-support-right img {width:100%; }
.discover-more {background: #f3535a;
    color: #fff !important;
    font-size: 1rem; margin-top: 10px;
    border: 0 none;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    -webkit-appearance: none;
    padding: 1em;
    border-radius: 7px !important;
    -webkit-box-shadow: 0 3px 3px rgb(0 0 0 / 42%);
    box-shadow: 0 3px 3px rgb(0 0 0 / 42%);
    -webkit-transition: .1s ease-in-out all;
    -o-transition: .1s ease-in-out all;
    transition: .1s ease-in-out all;}
.discover-more a{color: #fff;}
.city-support-blue-bg {color: #fff; text-align: center; padding: 40px 0;}
.city-support-white-bg { width: 100%; float: left; background:#f2f2f4;padding: 1.4em 1em;
    background-color: #fff;
    border-radius: 10px;margin: 20px 0;
    box-shadow: 0px 3px 7px rgb(0 0 0 / 16%);}
.city-support-boxes{width: 33%;
    float: left;
    padding: 20px;
border: 1px solid #faf0f0;
    padding:5px;
    box-shadow: 0 2px 2px #ccc;}
.city-support-boxes img {width: 100%;}
.city-support-boxes h3 {color:#444444!important;}
.city-support-boxes p {color:#444444!important;}
.city-support-left img {width: 100%;}


/* slider   */
.slider-center {padding:40px 0; background:#f0f2f1; position: relative;
z-index: 99999999;}
.slider-center h2 {text-align: center}
.slider-center h2:before {
    content: "";
    position: absolute;
    width: 80px;
    height: 2px;
    background-color: #f3535a;
    bottom: -5px;
}
.entry img {
  width: 100%;
 /* border-radius: 50%;*/
}

.container2 {
  overflow: hidden;
    position: relative;
}
.items {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  animation: carouselAnim 50s infinite alternate linear;
}

.entry {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  width: 300px;
  background: #fff;
  margin: 1em;
  padding: 0.5em;
  border-radius: 10px;
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 768px) {
  .items {
    animation: carouselAnim 35s infinite alternate linear;
  }
  
  @keyframes carouselAnim {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(calc(-100% + (2 * 300px)));
    }
  }
}

.entry p {
  text-align: center;
  padding: 1em;
}

.name {
  font-weight: bold;
}

@keyframes carouselAnim {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(calc(-100% + (5 * 300px)));
  }
}

.container .faders {
  width: 100%;
  position: absolute;
  height: 100%;
}

.faders .right,
.faders .left {
  background: linear-gradient(
    to right,
    rgba(245, 245, 245, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 15%;
  height: 100%;
  position: absolute;
  z-index: 200;
}

.right {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(245, 245, 245, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
/* Blog  */
.content-head-blog{text-align: center; color: #fff; font-size: 50px;}
section.blog {float: left;
    width: 100%;
        background: url(../images/blog-banner.jpg) top center no-repeat;
    height:366px;
    background-size: cover;
}
.banner-text-blog {
    width:100%; text-align: center;
    margin-top:12%;
}

.blog-ul {}

.blog-ul li {padding: 7px 0; list-style: none;}
.blog-ul li:before {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    content: "";
    float: left;
    height: 5px;
    background-color: inherit;
    margin: 5px 10px;
    width: 5px;
  border: 2px solid #014;
    background: #e4f6ff;
}
.city-support-blog-page-right {
    width: 30%;
    float: right;
    padding: 10px;
    background: #eef3f3;
    box-shadow: 4px 6px 2px #e5e4e4;
    border-bottom: 5px solid #f3535a;}

.city-support-blog-page-right h3 {border-bottom: solid 3px #25ACF0;
    display: inline-block;
    font-size: 23px;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 0;}
.blog-boxes{width: 33%; float:left; padding: 20px; border: 1px solid #ccc;}
.blog-boxes h1 {font-size: 23px;
    border-bottom: solid 1px #25ACF0;
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 0;}
.blog-boxes h2 {font-size: 23px;
    border-bottom: solid 1px #25ACF0;
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 0;}
.blog-boxes h3 {font-size:23px;
    border-bottom: solid 1px #25ACF0;
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 0;}

.city-support-blog-page h1 {font-size: 22px; color: #25ACF0;}
.city-support-blog-page h2 {font-size: 22px; color: #25ACF0;}
.city-support-blog-page h3 {font-size: 22px; color: #25ACF0;}

.blog-bg-1 {background: #f5f5f5;}
.blog-bg-2 {background: #fff;}
.blog-bg-3 {background: #f5f5f5;}

.blog-boxes p {text-align: justify}
.city-support-blog-page { float: left;max-width: calc(70% - 1em);
    min-width: calc(70% - 1em);
    padding: 20px;
    background-color: #f7fafc;}
.city-support-blog-page p {text-align: justify}
.city-support-blog{  width: 100%; float: left;   padding: 20px 0; }
.read-more {background: #f3535a;
    color: #fff !important;
    font-size: 1rem;
    margin-top: 10px;
    border: 0 none;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    -webkit-appearance: none;
    padding: 1em;
    border-radius: 7px !important;
    -webkit-box-shadow: 0 3px 3px rgb(0 0 0 / 42%);
    box-shadow: 0 3px 3px rgb(0 0 0 / 42%);
    -webkit-transition: .1s ease-in-out all;
    -o-transition: .1s ease-in-out all;
    transition: .1s ease-in-out all;}
.read-more a {color: #fff;}
/* footer   */

.footer-top {
    background:#712424;
    width: 100%;
    float: left;
    padding:45px 0;
}
.footer {
    width: 100%;
    float: left;
    padding: 20px 0px;
    background:#521111;
    text-align: center;
}
.footer p {
    font-size: 13px;
    color: #c1c1c1;
}
.footer a { color: #c3c2c0; text-decoration: none;}
.city-support-col-footer {
    width: 29%;
    float: left;
    margin: 30px 20px;
}
.footer-top h4 {
    color: #fff !important;
    border-bottom: 1px dotted #36383c;
    font-size: 17px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}
.city-support-col-footer ul {
    width: 100%;
    float: left;
}
.city-support-col-footer ul li {
    padding: 7px 0;
    color: #d1d1d1;
    list-style: none;
    letter-spacing: 0.5px;
}
.city-support-col-footer ul li a {
    text-decoration: none;
    color: #aaa;
    padding: 10px 0;
    text-decoration: none;
    font-size: 12px;
}

/*------contact us---------*/

.col-md-4, .col-md-12{position: relative;  width: 100%; /*padding-right: 15px;  padding-left: 15px;*/float: left;
} 
.col-md-12{width: 100%;}

.col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}

.wrappercon {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    -webkit-box-shadow: 0 21px 41px -13px rgb(0 0 0 / 18%);
    -moz-box-shadow: 0 21px 41px -13px rgba(0,0,0,.18);
    box-shadow: 0 21px 41px -13px rgb(0 0 0 / 18%);
    background: #fff;
    margin: 30px 0px;
    float: left;
}

.dbox p { margin-bottom: 0;}
.dbox p span {
    font-weight: 400;
    color: rgba(0,0,0,.2);
    display: block;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}

.contactForm .form-control {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: 0;
}

input:focus { 
    outline: none !important;
    border-color: #a01b2b;
        box-shadow: 0 0 10px #a01b2b52;
 }

.contactForm textarea {
    height: 90px;
    border: 1px solid #ccc!important;
    padding: 10px 20px!important;
    background: #fdf7fa;
    border-radius: 35px;
}

textarea:focus { 
    outline: none !important;
    border-color: #a01b2b;
    box-shadow: 0 0 10px #a01b2b52;
 }

.btn {
    padding: 12px 16px;
    cursor: pointer; 
    border-width: 1px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    -webkit-box-shadow: 0 10px 20px -6px rgb(0 0 0 / 12%);
    -moz-box-shadow: 0 10px 20px -6px rgba(0,0,0,.12);
    box-shadow: 0 10px 20px -6px rgb(0 0 0 / 12%);
    position: relative;
    margin-bottom: 20px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
	border-radius: 25px;
}
.mt-5, .my-5 {
    margin-top: 3rem!important;
}
.p-md-5 { padding: 3rem!important;}
.social-media p a { color: #fff; text-transform: uppercase;
    font-size: 12px;
    margin-right: 10px;
    border: 1px solid #dcdcdc;
    padding: 5px 15px;
    margin-top: 10px;
    float: left;
    border-radius: 20px;
    font-weight: 700;
	background: #3e54aa;
    text-decoration: none;
}
.social-media p a:nth-child(2) {background:#5fb8fe;}
.social-media p a:nth-child(3) {background:#e04a91;}
.social-media p a:nth-child(4) {background:#ea4c88;}


.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
}


.btn.btn-primary { background: #f44336!important; border-color: #df3b2f!important;    color: #fff;}

.form-group { margin-bottom: 1rem;}
.mt-3{margin-top: 30px;}
.form-control {
    height: 45px;
    border: 1px solid #ccc!important;
    padding:10px 20px!important;
    border-radius: 35px;
    background: #fdf7fa;
}

.contact-wrap { background: #fff;}
.p-md-5 { padding: 2rem!important;}
.w-100 { width: 100%!important; float: left;}

/*------contact us end---------*/



@media(max-width:768px){
    .responsive-bar{
        display: block;
        width: 100%;
        height: 60px;
        background: #262626;
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px 20px;
        box-sizing: border-box;
        z-index: 1;
    }
    .responsive-bar .logo img{
        float: left;
        height: 50px;  
    }
    .responsive-bar .menu h4{
        float: right;
        color: #fff;
        margin: 0;
        padding: 0;
        line-height: 50px;
        cursor: pointer;
        text-transform: uppercase;
    }
    nav{
        padding: 0;
    }
    nav,
    nav.black{
    height: 60px;
    padding: 0;
    }
    nav .logo{
        display: none;
    }
    nav ul{
        position: absolute;
        width: 100%;
        top: 60px;
        left: 0;
        background: #262626;
        float: none;
        display: none;
    }
    nav ul.active{
        display: block;
    }
    nav ul li{
        width: 100%;
    }
    nav ul li a{
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        line-height: 30px !important;
        color: #fff;
        
    }

    nav > ul{
        width: 100%;
        display: none;
    }
    nav > ul > li{
        display: block;
        text-align: center;
    }
    .active{
        display: block;
    }
}

@media only screen and (min-width:768px) and (max-width:1280px){ .container {width: 100%;}
     .city-support-col-footer { width: 28%;}
    nav {padding: 10px 30px;    padding-right: 30px;}
    nav > ul {  width: 77%;}
    .content-head {line-height: 40px;font-size: 30px;}
    section.sec1 { height: 425px;}
.banner-text { margin-top: 17%;}
    section.blog { height: 250px;}
}
@media only screen and (min-width:768px) and (max-width:1000px){
    .container {width: 100%;}
    .city-support-col-footer { width: 28%;}
    nav {padding: 10px 30px;    padding-right: 30px;}
    nav > ul {  width: 77%;}
    .content-head {line-height: 40px;font-size: 30px;}
    section.sec1 { height: 425px;}
.banner-text { margin-top: 17%;}
    section.blog { height: 250px;}
}

@media only screen and (min-width:480px) and (max-width:767px){
    .container {width: 100%;}
    .city-support-col-footer {  width: 100%;  margin: 10px 10px;}
    .footer-top {  padding: 10px 0;}
    
    .city-support-left {  width: 100%;}
    .city-support-right {   width: 100%;}
    .city-support-boxes {  width:100%;}
    .banner-text { width:55%;  margin: 12% 0 5%;}
    .content-head {line-height:23px; font-size: 18px;}
    section.sec1 {
    width: 100%;
    background: url("../images/banner-mobile.jpg") top center no-repeat;
        background-size: auto;overflow: hidden;
    height: 100%;
    background-size: cover;margin-top: 8%;
}
    .responsive-bar .logo img { height: auto; padding-top: 7px;}
    .banner-text p {  line-height: 14px;  font-size: 11px;}
    .discover-more {
    font-size: 15px;
    margin-top: 10px;
    padding: 10px;
    margin-bottom: 5px;
}
    .city-support-feature h1 { font-size: 21px;}
    .center { padding: 20px;}
    .city-support-feature h2 { font-size: 21px; line-height: 24px;}
    section.blog {float: left;  height: 160px;}
    .blog-boxes {  width: 100%;}
    .city-support-blog-page { max-width: calc(100% - 1em); min-width: calc(100% - 1em);}
    .city-support-blog-page-right {   width: 100%;}
    .city-support-blog-page h1 { font-size: 20px;}
    .city-support-blog-page h2 { font-size: 20px; }
    .city-support-blog-page h3 {font-size: 20px;}
    .banner-text-blog { width: 100%; text-align: center; margin-top:12%;}
    .content-head-blog {
    font-size: 40px;
}
    
}
@media only screen and (min-width:320px) and (max-width:479px){
    
    .container {width: 100%;}
    .city-support-col-footer {  width: 100%;  margin: 10px 10px;}
    .footer-top {  padding: 10px 0;}
    
    .city-support-left {  width: 100%;}
    .city-support-right {   width: 100%;}
    .city-support-boxes {  width:100%;}
    .banner-text { width:75%;  margin: 12% 0 5%;}
    .content-head {line-height:23px; font-size: 18px;}
    section.sec1 {
    width: 100%;
    background: url("../images/banner-mobile.jpg") top center no-repeat;
        background-size: auto;
    height: 100%;
    background-size: cover;margin-top: 10%;
        overflow: hidden;
}
    .responsive-bar .logo img { height: auto; padding-top: 7px;}
    .banner-text p {  line-height: 14px;  font-size: 11px;}
    .discover-more {
    font-size: 15px;
    margin-top: 10px;
    padding: 10px;
    margin-bottom: 5px;
}
    .city-support-feature h1 { font-size: 21px;}
    .center { padding: 20px;}
    .city-support-feature h2 { font-size: 21px; line-height: 24px;}
    section.blog {float: left;  height: 160px;}
    .blog-boxes {  width: 100%;}
    .city-support-blog-page { max-width: calc(100% - 1em); min-width: calc(100% - 1em);}
    .city-support-blog-page-right {   width: 100%;}
    .city-support-blog-page h1 { font-size: 20px;}
    .city-support-blog-page h2 { font-size: 20px; }
    .city-support-blog-page h3 {font-size: 20px;}
    .banner-text-blog { width: 100%; text-align: center; margin-top: 19%;}
    .content-head-blog {
    font-size: 40px;
}
    nav {
    z-index: auto;
}
}