/*@import "../../css/color.scss";*/

*{ box-sizing:border-box;}
html{font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased; scroll-behavior: smooth;}
body{font:normal 16px/20px 'pf_handbook_proregular', sans-serif; margin: 0; background: #f8f8f8; color: #525151;  counter-reset: my-sec-counter;}
.clear{content:".";display:block;clear:both;height:0;visibility:hidden;}
img{max-width:100%;width:auto\9;height:auto;border:0;-ms-interpolation-mode:bicubic; vertical-align: middle;}
i{display: inline-block; vertical-align: middle;}
a{text-decoration: none; color: inherit;}
ul{ margin:0; list-style: none; padding:0px; }
i,span{display: inline-block; vertical-align: middle;}
h1,h2,h3,h4,h5,h6{font-weight: normal; margin:0;}

:root {
	--black: #25272a;
  --darkblack: #000000;
  --grey: #a2a2a2;
	--white: #fff;
	--maroon: #b90303;
  --blue: #0077ff;
  --uniq: #f88400;
  --offwhite: #fffdf2;
}
.text-black{color: var(--black);}
.text-uniq{color: var(--uniq);}
.text-blue{color: var(--blue);}

.bg-maroon{ background: var(--maroon);}
.bg-blue{ background: var(--blue);}
.bg-orange{ background: var(--uniq);  }

.align-center{text-align: center;}
.cta-button{ background: var(--uniq); box-shadow: 0 6px 4px rgba(0,0,0,0.3); color: var(--white); border-radius: 30px; display: inline-block; font-size: 22px;text-transform: uppercase;padding: 12px 40px;}

.cta-button{background-image: linear-gradient(to left, transparent, transparent 50%, #d87300 50%, #d87300); background-position: 100% 0; background-size: 200% 100%; transition: all .25s ease-in;}
.cta-button:hover{background-position: 0 0;}


.container{max-width: 1060px; margin:0 auto;}
.content-wrapper{max-width:1280px; margin:0 auto; background: #FFF;}

header{background: var(--white); box-shadow:0 0 5px rgba(0,0,0,0.6); position: relative;}
header .container{display: grid; grid-template-columns: max-content auto; align-items: center; padding-top:10px; padding-bottom: 10px;}
nav{justify-self: flex-end;}
nav ul{display: inline-flex; align-items: center; grid-gap: 60px;}
nav ul li a{color: var(--black);font-size:18px;text-transform: uppercase;padding: 6px;}
nav ul li.active a{color: var(--uniq);}
nav .home-menu{display: none;}
.logo-panel .contact{display: none;}

.banner-wrapper{padding:30px 0 0; text-align: center;}
.welcome h6{margin:0 0 10px; text-transform: uppercase;font-weight: normal;font-size:20px; color: var(--grey);}
.main-text{padding: 60px 0;}
.main-text h1{margin:0; text-transform: uppercase;color: var(--grey);font-weight: normal;font-size: 60px; line-height: 80px;}
.main-text h1 span{display: block;}
.main-text h1 span.inline-block{display: inline-block;}
.main-text h1 span.block{display: block;}
.main-text h1 i{font-style: normal;font-size: 76px; vertical-align: baseline;}
.banner-mobile-list{display: none;}
.main-text img{vertical-align: bottom;}
.main-text.contant-text img{vertical-align: baseline;}

.solution-wrapper .container{}
.solution-wrapper h5{ margin: 12px 0; font-size: 28px; line-height: 28px; }
.contact-form h5{margin: 12px 0 20px; font-size: 36px; line-height: 36px; text-transform: uppercase; }
.our-solution{ color: var(--white);}
.our-solution ul{border:8px solid #FFF; box-shadow:0 0 10px rgba(0,0,0,0.3);position:relative; z-index:1;display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center; padding: 30px 0;}
.our-solution ul li{ text-align: center;}
.our-solution ul li h2{ margin:0; font-size:60px; line-height: 46px;}
.our-solution ul li h2 span{ vertical-align: baseline;}
.our-solution ul li h2 span:nth-of-type(2){font-size:26px;opacity: 0.6; }
.our-solution ul li h2 span.x{font-size:40px;opacity: 1;}
.our-solution ul li p{margin: 0; text-transform: uppercase;font-size: 20px;}

.cta-focus-section{padding: 60px 0; text-align: center;}
.cta-focus-section h6{margin: 0 0 10px;font-size: 20px;font-style: italic; color: var(--darkblack);}

.challenges-wrapper{background: var(--offwhite); padding:30px 0;}
.common-title h1{margin:0; text-transform: uppercase; font-size: 36px; line-height: 36px;}
.common-title p{margin: 10px 0 10px;font-size: 20px;}
.challenges-wrapper .owl-carousel{background: var(--offwhite); border:15px solid var(--white); padding:20px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.challenges-wrapper ul li{ margin-bottom: 25px; }
.challenges-wrapper ul li:last-of-type{margin-bottom: 0;}
.challenges-wrapper ul li h4{text-transform: uppercase; color: var(--grey); font-size: 26px;}
.challenges-wrapper ul li p{margin: 8px 0 0; font-size: 24px; color:var(--darkblack);}
.challenges-wrapper ul li h6{font-size: 18px; color:var(--darkblack);}
.challenges-wrapper ul li > div{margin-bottom: 10px;}
.challenges-wrapper ul li > div:last-of-type{margin-bottom: 0;}
.challenges-wrapper ul li span{color: var(--maroon); font-weight: bold;}

.challenges-wrapper .cta-focus-section{ padding-bottom: 20px; }

.whatwedo-wrapper,.howwedo-wrapper{padding:30px 0;}
.design-list {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px; padding:20px 0;}
.design-list li{text-transform: uppercase;color: #6f6f6f; font-size: 20px; font-weight: 600; padding: 0 0 0 20px;margin:20px 0;position: relative;}
.design-list li:before{content: '';position: absolute; background: var(--uniq); height: 2px;  width: 10px; left: 0; top: 50%; transform: translateY(-50%);}


.howwedo-wrapper{background: var(--offwhite);}
.howwedo-wrapper .content p{font-size: 20px; line-height: 26px;}

/*.our-solution.whyus{background: var(--blue);}*/
/*.our-solution.whatwedo{background: var(--uniq);}*/
.whatwedo-wrapper.what-inner-page,.contact-form{background: var(--offwhite);}
/*.our-solution.howwedo{background: var(--maroon);}*/

.contact-form{padding:30px 0;}
.form-fields{width: 60%;}
.form-fields li{margin-bottom: 15px;}
.form-fields label{ display: block; font-size: 18px; margin-bottom: 5px; text-transform: uppercase;}
.form-fields input[type="text"]{width:100%; padding: 12px 10px; border: 1px solid #cecece; border-radius: 10px;}
.form-fields textarea{width:100%; padding: 8px; border: 1px solid #cecece; border-radius: 10px; min-height: 100px;}
.terms{display: inline-flex;; align-items: flex-start; grid-gap:5px;width:100%;}
.terms h6{font-size: 16px;}
.terms p{margin:0; font-style: italic; font-size: 12px;}
.contact-form a{margin:20px 0; min-width: 300px; text-align: center;}

.contact-wrapper .container{ display: grid; grid-template-columns: 4fr 8fr; padding-top:40px; padding-bottom: 40px; }
.address-div{border-right: 0px solid #d4d4d4;}
.contact-wrapper h1{text-transform: uppercase;font-size: 26px; margin-bottom: 20px;}
.contact-wrapper h2{color: var(--uniq);text-transform: uppercase;font-size: 22px; line-height:22px;}
.contact-wrapper h2 span{display: block;color: var(--black);font-size: 20px;}
.contact-wrapper p{margin:10px 0 0; font-size:18px;}
.social-links{text-align: center;}
.social-links a{display: block; color: var(--uniq);font-weight: bold; text-transform: uppercase; padding: 5px 0;}
.social-list{width: max-content; text-align: left; margin:0 auto;}

footer{background: var(--black); padding:30px 0;text-align: center; color: var(--white); font-size: 18px; text-align: left;}
footer .container{display: grid; grid-template-columns: auto max-content; align-items: center;}
.copyrights span{display: inline-block; vertical-align: middle;}
.copy{font-size: 24px; }
.social a{text-transform: uppercase; padding: 0 25px; font-size: 20px;}
.social a:hover{color: var(--uniq);}

.animi-text-grid{display:grid !important; grid-gap: 5px; grid-template-columns: 160px 200px; justify-content: center; text-align: left;}
.animi-text{display: none;}
.animi-text-grid.do-animi-text{display:block !important; text-align: center;}
.animi-text-grid.whyus{grid-template-columns:auto;}

/* add custom cursor */
.typed-text::after {
  content: "|";
  display: inline;
  animation: blink 1s infinite;
}

/* custom cursor animation */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.get-in-touch{ display: inline-flex; grid-gap:20px; }
.get-in-touch li{ margin: 10px 0 20px; background: #FFF; padding: 50px 10px; text-align: center; min-width: 300px;  box-shadow: 0 0 5px rgb(0 0 0 / 10%); border-radius: 5px;}
.get-in-touch li h2{ margin-bottom: 12px; color:var(--uniq); text-transform: uppercase; font-size: 20px;}
.get-in-touch li a{ font-size: 24px; font-weight: bold;}
.get-in-touch li a:hover{color: var(--uniq); text-decoration: underline;}
@media only screen and (max-width: 767px) {
  header.home-page{box-shadow: none;}
  header .logo-panel{display: grid; grid-template-columns: auto auto; align-items: center; padding:10px 0;}
  header .logo-panel .logo{width:100px;}
  .home-page .logo-panel{display: none;}
  .logo-panel .contact {display: block; justify-self:flex-end; text-transform: uppercase;}
  header .container{padding-top: 0; padding-bottom: 0; display: block;}
  .container{padding-left: 10px; padding-right: 10px;}
  nav{position: fixed;bottom: 0;background: var(--white); border-top: 1px solid #e2e1e1;width: 100%;left: 0; z-index: 9;}
  nav ul{width: 100%; grid-gap: 20px; justify-content: center; white-space: nowrap; padding: 10px 0;}
  nav ul li a{font-size: 14px;}
  nav .home-menu{display: block;}
  nav .contact-menu{display: none;}
  .banner-wrapper {padding: 30px 10px;}
  .main-text h1{font-size: 24px;line-height: 40px;}
  .main-text h1 i{font-size: 32px;}
  .main-text {padding: 0px 0 0;}
  .welcome{padding-bottom: 30px;}
  .banner-mobile-list{display: block; width: max-content; margin: 0 auto; text-align: left; padding-top: 10px;}
  .banner-mobile-list li{text-transform: uppercase; font-size: 18px; margin-bottom: 5px;}
  .solution-wrapper h5{font-size: 18px; line-height: 18px;}
  .our-solution ul{grid-template-columns: repeat(2, 1fr);grid-gap: 20px;}
  .our-solution ul li h2{font-size: 44px; line-height: 44px;}
  .our-solution ul li p{font-size: 14px;}
  .cta-focus-section {padding: 40px 0;}
  .challenges-wrapper .cta-focus-section{padding-top: 70px;}
  .common-title h1,.contact-form h5{font-size: 30px; line-height: 30px;}
  .common-title p{font-size: 16px;}
  .challenges-wrapper ul li h4{font-size: 24px;}
  .challenges-wrapper ul li p{font-size: 18px;}
  .design-list{grid-template-columns: repeat(1, 1fr);}
  .design-list li{position: relative; padding-left: 20px;}
  .design-list li:before{content: '';position: absolute; background: var(--uniq); height: 2px;  width: 10px; left: 0; top: 50%; transform: translateY(-50%);}
.form-fields{width: 100%;}
footer{padding-bottom: 70px;}
.contact-wrapper .container{display: block;}
.contact-wrapper h1{margin-bottom: 10px;}
.social-links{text-align: left; margin-top:30px;}
.social-list{width: auto; display: inline-flex;; grid-gap:20px;}
.address-div{border-right: 0px solid #d4d4d4; margin-bottom: 20px;}
.animi-text-grid{grid-template-columns: 65px 100px;}
footer .container{text-align: center; grid-template-columns: auto;}
.copyrights{order:2; font-size: 16px;}
.social{order:1;}
.social{padding-bottom: 20px;}
.social a{font-size: 16px;}
.value-img{width:100px;}
.aha-img{width: 180px; vertical-align: bottom;}
.focus-img{width:130px;}
.together-img{width: 140px;}
.get-in-touch{display: block;}
.main-text h1 span.block {display: inline-block;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {
  .design-list {grid-template-columns: repeat(3, 1fr);}
  }
  @media only screen and (min-width: 768px) and (max-width: 1024px){
.container{padding-left:20px;padding-right:20px;}
  }
@media only screen and (max-width: 320px) {
  .get-in-touch li{ width:100%;min-width: 100%; }
  .social a{padding:0 12px;}
  .copyrights{order:2; font-size: 14px;}
}