/*--- Custom CSS ---*/

/* Cookie Consent*/
.cookie-consent {font-size: .90rem; color: white; position: fixed; bottom: 0; width: 100%; padding: .5rem; z-index: 99999;}
.cookie-consent-inner {background-color: #343a40; padding: .5rem 1rem; border-radius: 6px; display: flex; align-items: center; gap: 1rem;}
.cookie-consent a {color: #15bef3!important;}
.cookie-consent p {margin-bottom:0!important;color: #fff!important; line-height: 1.5rem!important;}
.cookie-consent a:hover {color: #14a3d0 !important;}
.cookie-consent button {background-color: #15bef3!important; border-color: #15bef3!important;}
.cookie-consent button:hover {background-color: #14a3d0 !important;}

/* General */
html {scroll-behavior: smooth;}

p, h4 {font-family: 'Open Sans', sans-serif;}

h4 {font-size: 24px;}

::-webkit-input-placeholder { /* Chrome */
  color: #242424;
}

:-ms-input-placeholder { /* IE 10+ */
  color: #242424;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #242424;
}

:-moz-placeholder { /* Firefox 4 - 18 */
  color: #242424;
}

.d-flex {
 display: flex;
 align-items: center;
 justify-content: center;
}

.b-shadow-none {
 box-shadow: none!important;
}

/* Margin*/

.mrg-h {margin: 0 auto;}

.mrg-5 {margin: 5px;}


/* Navigation*/
.navbar {box-shadow: 0 6px 9px rgba(0,0,0,0.05)}

.navbar-height {padding: 0.5em 0 0.69em 0 !important;}

/* Text sections*/
.desc-sec p{font-size: 1rem;}

/* Banner Home-Page Parallaxed. bh2p*/
.bh2p {
 height: 100%;
 background:linear-gradient(0deg,rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url("../images/main-banner.jpg") no-repeat center top/ cover;
 background-attachment: fixed;
}

/* Banner Web-dev page. bwdp*/
.bwdp {
 background:linear-gradient(0deg,rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url("../images/web-banner.jpg") no-repeat center / cover;
}

.bh2p-h {
 height: 850px !important;
}

.bh2p-in h4 {
 padding: 10px 0 20px;
 color: #fff;
}

.bh2p-in h5 {
 color: #222;
 font-weight: 400;
 line-height: 30px;
 margin-bottom: 30px;
}

.bh2p-c h2 span {
 font-weight: 300;
 display: block;
}

.bh2p-c h4 {
 font-weight: 300;
}

/*Contact form [custom]*/
.contact-form-1 {
 text-align: center;
 padding: 105px 0;
}

.contact-form-1-head p {padding: 20px 0;}

.contact-form-1-body input {
 display: block;
 width: 100%;
 max-width: 400px;
 height: 45px;;
 padding: 0 20px;
 border: 1px solid #eee;
 margin: 0 auto 10px;
 font-size: 13px;
}

.contact-form-1-body input[type="submit"] {
 background: #15bef3;
 color: #fff;
 font-size: 13px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 2px;
 margin-top: 7px;
}

.contact-form-1-body textarea {
 width: 100%;
 max-width: 400px;
 padding:10px 20px;
 border: 1px solid #eee;
 resize: none;
 font-size: 13px;
}
  
.contact-form-1-body p.small, .contact-prl p.small {
 color: #736d6d;
 max-width: 400px;
 margin: 0 auto 10px;
 font-size: 12px;
}

.contact-form-1-body p.small a, .contact-prl p.small a, .cont-text a {
 color: #736d6d; 
 text-decoration: underline;
}

.contact-form-1-body p.small a:hover, .contact-prl p.small a:hover {
 color: #515151;
}

.cont-text {
 color: #736d6d;
 font-size: 12px;
}

/* Our specs. Home-page. osp*/
.osp {
 padding: 91px 0 50px;
 overflow: hidden;
}

.osp-ltx {
 font-weight: 300;
 line-height: 26px;
 font-size: 16px;
}

.osp-wrp h4 {padding:20px 0 10px;}

.osp-wrp-mtx {
 color: #9d9d9d;
 line-height: 25px;
 margin-bottom: 0px;
}

/* Why we section. Home-Page*/
.desc-block-0 {
 padding: 60px 0 60px;
 background:url("../images/why-img-back.svg") no-repeat right top , url("../images/why-img-back-left.svg") no-repeat left bottom;
 background-color: #008ee8;
}

/* Why we section. Web dev*/

.desc-block-1-main {padding: 100px 0 0;}

.desc-block-1 {
 width: 100%;
 max-width: 700px;
 padding-right: 100px;
}

.desc-block-1 p {line-height: 24px;}

.desc-block-1 h3 {margin-bottom: 20px;}

/* What we do secrton. Web-dev*/

.dev-desc-main {padding: 95px 0px 95px;}

.dev-desc-main-head {
 width: 100%;
 max-width: 800px;
 margin: 0 auto;
 padding-bottom: 70px;
}
.dev-desc-main-head  h5 {
 padding-bottom: 30px;
 text-transform: uppercase;
}

.dev-desc-inner ul {padding: 0px;}

.dev-desc-inner li {
 width: calc(100% / 3);
 float: left;
 list-style: none;
 padding:0px 10px;
 border:0px;
}

.dev-desc-num {
 font-size: 15px;
 color: #373737;
 font-weight: 100;
 margin-bottom: 20px;
 text-decoration: underline #C4C4C4 dashed;
}

.c-height {min-height: 175px;}

/* Contact form paralax edition*/

.contact-plr-container {
   background-attachment: scroll, scroll!important;
   background-attachment: fixed!important;
   padding: 120px 0 100px;
}

.contact-plr-container.plr-bg-1 {
 background: linear-gradient(to right, rgba(0,0,0,.6) , rgba(0,0,0,.6)), url("../images/c-form-bg.jpg")no-repeat center / cover;
}

.contact-plr-container.plr-bg-2 {
 background: linear-gradient(to right, rgba(0,0,0,.6) , rgba(0,0,0,.6)), url("../images/web-img-2.jpg")no-repeat center / cover;
}

.contact-prl {
 background-color: #fff;
 padding: 50px;
 border-radius: 5px;
}
.contact-prl input, .contact-prl textarea {
 width: 100%;
 height: 45px;
 margin-bottom: 20px;
 border:1px solid #ececec;
 font-size: 12px;
 padding: 15px 20px;
 border-radius: 2px;
 transition: .2s ease-in;
 background-color: #fafbfc;
}

.contact-prl textarea {
 resize: none;
 height: 100px;
}

.contact-prl input[type="checkbox"] {
 height: 25px;
 float: left;
 width: auto;
}

.contact-prl input:focus, .contact-prl textarea:focus {border-color: #4fd2c2;}

.contact-prl-intr h4 {font-weight: 300;}

.contact-prl-intr p {
 font-size: 13px;
 padding: 15px 0;
 color: #444;
 line-height: 27px;
}

.contact-prl-intr-main {color: #fff;}

.contact-prl-intr-main h6 {padding: 20px 0;}

.contact-prl-intr-main p span {display: block;}

.btn-web {
 padding: 10px 20px;
 font-size: 12px;
 background: #4fd2c2;
 color: #fff;
 border-radius: 5px;
 width: 100%;
 margin-bottom: 20px;
}

.btn-web:hover {
 color: #fff;
 background: #3ea497;
}

.copyright p {
 margin-bottom: 0px !important;
 color: #4a4848;
}

.c-shadow {box-shadow: 0px 0px 14px 0px #ccc;}

/*Home Page Project Preview Wrapper (h3pw)*/

.h3pw {
 /*align-items: center !important;*/
 padding:100px 0;
 border-bottom: 1px solid #eee;
}

.h3pw.lst-img {
 border-bottom: 0px;
}

.h3pw h4 {
 color: #555;
 font-weight: 400;
 padding-bottom: 20px;
}

.h3pw p {
 line-height: 28px;
 font-size: 14px;
}

.h3pw-btn {
 background: #15bef3;
 width: 180px;
 color: #fff;
 font-size: 14px;
 /*text-transform: uppercase;*/
 font-weight: 600;
 padding: 8px 0;
 /*border-radius: 20px;*/
}

.h3pw-btn:hover {
 background: #12A4D1;
 color: #fff;
}
/* // Home Page Project Preview Wrapper (h3pw)*/

/* Contact page */

.contact-main-wrpr {padding: 130px 0 80px 0;}

/* Simple Footer */
.s-footer {
 padding: 20px 0;
 background-color: #fff;
}

footer .s-footer {
 padding: 10px 0;
}

.foot-logo {
 width: 50% !important;
 margin-top: 3%;
 filter: opacity(0.4);
}

/* Copyright */
a.legal {
 font-size: 80%;
 font-weight: 400;
 color: #212529;
}

a.legal:hover {
 text-decoration: underline;
 color: #212529;
}

.text-sec-pdg {
 padding: 100px 0;
}

.info-banner {
 background: linear-gradient(to right, rgba(27,216,220,.2) , rgba(253,0,58,.2));
 height: 300px;
 width: 100%;
 text-align: center;
}

.info-banner .container {
 display: flex;
 height: 100%;
 justify-content: center;
 align-items: center;
}

.info-banner-bread li {display: inline-block;}
 
.info-banner-bread li:before {
 content: "|";
 font-size: 10px;
 padding: 0 10px 0 10px;
}

.info-banner-bread li:first-child:before {
 content: " ";
 padding-left: 0;
}

.info-banner-bread li a {
 color: #4d4a4a;
 font-size: 11px;
 font-weight: 400;
 text-transform: uppercase;
 letter-spacing: 1px;
}

@media (max-width: 576px) {
 .dev-desc-inner li {width: calc(100% / 1);}
}

@media (min-width: 576px) and (max-width: 720px) {
 .dev-desc-inner li {width: calc(100% / 2);}
}

@media (min-width: 720px) and (max-width: 960px) {
 .dev-desc-inner li {width: calc(100% / 2);}
}

@media (min-width: 960px) and (max-width: 992px) {
 .dev-desc-inner li {width: calc(100% / 2);}
}

@media (min-width: 992px) and (max-width: 1200px) {
 .osp-wrp h4 {font-size: 21px;}
}

@media (min-width: 768px) and (max-width: 1200px) {
 .lwdc1 {padding-left: 1rem;}
 .lwdc2 {padding-right: 1rem;}
}

@media (max-width: 768px) {
 .lwdc1, .lwdc2 {padding-top: 3rem;}
}

@media (min-width: 768px) and (max-width: 991px) {
 .lwdc2 {
   padding-left: 1rem;
   padding-right: 0!important;
  }
}