*{margin: 0; padding: 0; box-sizing: border-box;}
html,body{ height:100%;}
body {font-family: 'Roboto'; font-weight: normal; text-rendering: geometricPrecision;}
img{ vertical-align:top;}
input:focus{ outline: none;}

/* Site-wide heading scale (guideline). Page/component selectors with
   higher specificity may still override this for display headlines,
   footer labels, card titles, etc. */
:root {
  --h1-hero-size: clamp(32px, 3.4vw, 54px);
  --h1-hero-lh: 1.15;
  --h1-size: clamp(30px, 3vw, 46px);
  --h1-lh: 1.18;
  --h2-size: clamp(24px, 2.6vw, 38px);
  --h2-lh: 1.22;
  --h3-size: clamp(18px, 1.6vw, 24px);
  --h3-lh: 1.3;
  --h4-size: clamp(15px, 1.1vw, 18px);
  --h4-lh: 1.35;
  --h5-size: clamp(13px, 1vw, 15px);
  --h5-lh: 1.4;
}
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
h1 { font-size: var(--h1-size); line-height: var(--h1-lh); }
h2 { font-size: var(--h2-size); line-height: var(--h2-lh); }
h3 { font-size: var(--h3-size); line-height: var(--h3-lh); }
h4 { font-size: var(--h4-size); line-height: var(--h4-lh); }
h5 { font-size: var(--h5-size); line-height: var(--h5-lh); }
a{ text-decoration: none;}
ul {list-style: none;}

.full-container{ position: relative; }
.full-container.work{ background:#fafafc url(../images/work-bg.png) no-repeat bottom center; background-size:100%;}

.middle-container{ position:relative;}
.middle-container.padd-btm{padding-bottom:53px;}

header {display: flex; justify-content: space-between; align-items: flex-start; }
header.absolute{ position: absolute; left:0; top:0; width:100%; z-index: 1;}
header .logo-box{ width:23.76%; text-align: center; position: relative;}
header .logo-box .logo-bg{width:100%;}
header .logo-box a{ width:40%; top:14%; right:calc(50% - 40px); display: inline-block; vertical-align:top; position: absolute;}
header .logo-box a img{ width:100%;}

header .right-header {display: flex; align-items: flex-end; padding:0 2% 0 0;}
header nav{ margin-right:40px;}
header nav ul {display: flex; }
header nav ul li {margin:0 1px; font-family: 'Roboto'; font-weight:500; font-size: 15px; line-height: 20px;}
header nav ul li:hover a, header nav ul li.active a {background: #e1142b; color:fff;}
header nav ul li a { padding: 50px 10px 10px; display: inline-block; vertical-align:top; color:#000;}
header .right-header .call {display: flex; flex-direction: column; align-items: flex-end;}
header .right-header .call span { font-size: 20px; line-height: 25px;  font-family: 'Roboto'; font-weight:bold; color:#02123b; text-transform:uppercase;}
header .right-header .call a {font-size: 27px; line-height:30px; color:#b57b1f; font-weight:bold; font-family: 'Myriad Pro';}

header .toggle-btn{ background: #000; width:35px; height:35px; display:none; flex-direction: column; justify-content: space-between; vertical-align:top; margin-left:15px; padding:8px 5px;}
header .toggle-btn span{ height:3px; background: #fff; width:80%;}
header .toggle-btn span:nth-child(2){ width:100%;}
header .toggle-btn span:nth-child(3){ width:60%;}

.home-page { display: flex; justify-content: space-between; background: url(../images/home-yellow-circle.png) no-repeat right bottom; background-size:20.27%; padding-left:6.4%; padding-right:3%; position: relative;}

.home-page .clock{ position: absolute; left:2%; top:70px; width:5.5%;}
.home-page .clock img{ width:100%;}
.chatbox{ position: absolute; right:0.59%; top:-5px; width:3.68%;}
.chatbox img{ width:100%;}
.home-page .left-banner {width:42.85%; margin-top:-5%; -webkit-animation: action 2s infinite alternate;
    animation: action 2s infinite alternate}
.home-page .left-banner img {width: 100%;}

@-webkit-keyframes action {
    0% { transform: translateY(0);}
    100% { transform: translateY(-20px); }
}
@keyframes action {
    0% { transform: translateY(0);}
    100% {transform: translateY(-20px);}
}

.home-page .right-content{ display: inline-flex; flex-direction: column; align-items:flex-end; text-align:right; flex: 1; padding-top:30px;}
.home-page .right-content .text-content{ padding-right:24%;}
.home-page .right-content h1 {font-size:52px; line-height:62px; text-transform: uppercase; margin-bottom: 15px; font-family: 'Montserrat'; font-weight:200; color:#02123b;}
.home-page .right-content strong { font-weight:900;}
.home-page .right-content span { color:#e1142b; font-weight:900; display: block; font-size:88px; line-height:100%;}

.cta-btn{ font-size:18px; line-height:30px; background:#01113b; color:#fff; padding: 15px 20px; border-radius:5px; display: inline-block; vertical-align:top; font-family: 'Montserrat'; font-weight:600; text-transform: uppercase; transition:.5s;}
.cta-btn:hover{ background: #000;}
.cta-btn.red{ background: #d93f3f; color:#fff;}
.cta-btn.red:hover{ background:#d91515;}

.home-page .our-service{display: flex; flex-direction: column; align-items: flex-end; margin-top:50px;}
.home-page .our-service h2 {margin:0 0 20px; font-size: 22px; line-height: 25px; font-family: 'Montserrat'; font-weight:bold; text-transform: uppercase; position: relative; padding-bottom:5px;}
.home-page .our-service h2:after{ position: absolute; right:0; bottom:0; height:2px; width:53%; content: ''; background:#e1142b;}
.home-page .our-service ul{ display: flex; flex-direction: column; align-items: flex-end;}
.home-page .our-service ul li {margin-bottom: 10px; font-family: 'Myriad Pro'; font-weight:normal; text-transform: uppercase; background: #01113b; color: #fff; padding:4px 10px 1px; font-size:18px; line-height:25px; letter-spacing:4px;}

footer{ display: flex; justify-content: space-between; padding:15px 5%; align-items: center; }
footer.absolute{ position: absolute; left:0; bottom:0; width:100%;}
footer.black{ background: #000;}
footer.skyblue{ background:#e9efff;}
footer.black p{ color: #fff;}
footer p {font-size: 13px; line-height: 20px; color:#02123b; text-transform: uppercase; font-family: 'Montserrat'; font-weight:400;}
footer .black {color:#fff; font-size: 10px; line-height: 15px;}
footer.black .menu a {color: #e1142b; font-size: 12px; line-height: 15px;}

.social-icon{ display: flex;}
.social-icon li{ margin-right: 7px;}
.social-icon li:last-child{ margin-right:0;}
.social-icon li a{ display: inline-block; vertical-align:top; width:23px; height:23px;}
.social-icon li .facebook{ background:url('../images/social-icons.png') no-repeat 0 0; background-size: auto 46px;}
.social-icon li .twitter{ background:url('../images/social-icons.png') no-repeat -31px 0; background-size: auto 46px;}
.social-icon li .pinterest{ background:url('../images/social-icons.png') no-repeat -62px 0; background-size: auto 46px;}
.social-icon li .insta{ background:url('../images/social-icons.png') no-repeat -94px 0; background-size: auto 46px;}
footer.black .social-icon li .facebook{ background:url('../images/social-icons.png') no-repeat 0 -23px; background-size: auto 46px;}
footer.black .social-icon li .twitter{ background:url('../images/social-icons.png') no-repeat -31px -23px; background-size: auto 46px;}
footer.black .social-icon li .pinterest{ background:url('../images/social-icons.png') no-repeat -62px -23px; background-size: auto 46px;}
footer.black .social-icon li .insta{ background:url('../images/social-icons.png') no-repeat -94px -23px; background-size: auto 46px;}

/* Our work page start here */
.work-page { display: flex; align-items: flex-start; padding-left:6.75%; padding-right:6.75%; min-height:94.5vh;}
.work-left { display: inline-flex; flex: 1; align-items:flex-start; padding-top:20px;}
.work-left h1{ color:#131313; font-family: 'Montserrat'; font-weight:bold; font-size:79px; line-height:100%; margin-right:25px;}
.work-left h1 span{ color: #da3f3f; transform:rotate(-50deg); display: inline-block; margin:0 10px 0 -5px;}
.work-left .formated-text ul{ display: flex; flex-direction:column; align-items:flex-start;}
.work-left .formated-text ul li{font-size:36px; line-height: 40px; background: #000; color:#fff; margin-bottom: 3px;  text-transform: uppercase; padding:4px 16px; font-family: 'Montserrat'; font-weight: 500;}
.work-left .cta-btn{ border-radius:0; font-family: 'Montserrat'; font-weight:normal; padding:10px 25px; letter-spacing:2px;}
.ipad-slider{ background:url('../images/frame.png') no-repeat 0 0; background-size:100%; width:29%; margin-right:2%; margin-top:-5%; min-height:480px; padding:4.1% 3% 4.3% 3.4%;}
.custom-arrow .owl-nav{ margin:0;}
.custom-arrow .owl-nav button{ margin:0!important; position: absolute; width:35px; height:35px; border-left:1px solid #000!important; border-bottom:1px solid #000!important; border-radius:0!important; top:calc(50% - 17px);}
.custom-arrow .owl-nav button:hover{ background:none!important;}
.custom-arrow .owl-nav button.owl-prev{ left:-50px; transform:rotate(45deg);}
.custom-arrow .owl-nav button.owl-next{ right:-50px; transform:rotate(225deg);}
.custom-arrow .owl-nav button span{ font-size:0; line-height:0;}


/* Our Services page start here */
.service-content {padding: 40px 6% 60px;}
.service-content h1 {text-transform: uppercase; font-size: 47px; line-height:57px; color:#02123b; font-family: 'Montserrat'; font-weight:300;}
.service-content h1 strong{ font-weight:700; display: inline-block;}
.service-content h2 {text-transform: uppercase; font-size:55px; line-height: 60px; color:#02123b; font-family: 'Montserrat'; font-weight:400; margin:0 0 70px; display: inline-block; vertical-align:top; position: relative;}
.service-content h2:after{ position: absolute; right:0; bottom:-5px; width: 70%; background:#e49820; height:2px; content: '';}
.service-content h2 strong{color:#e49820; font-weight:600;}

.service-detail {display: flex; align-items: flex-start;}
.service-detail .service-banner {width: 31%; margin-right:8%; position: relative;}
.service-detail .service-banner:after,
.service-detail .service-banner:before{ position: absolute; left:-65px; bottom:-5px; content:''; width:95px; height:95px; border-radius:50%;}
.service-detail .service-banner:before{ background:#ecb762;}
.service-detail .service-banner:after{ background:#e3dcd0; right:-30px; left: auto;}
.service-detail .service-banner img{ width:100%;}
.service-detail .right-detail{ padding-top:20px; flex: 1;}
.service-detail .right-detail p{ color:#02123b; font-family: 'Roboto'; font-weight:normal; letter-spacing:0.5px; font-size:18px; line-height:30px;}

.service-detail .right-detail .progres-sec{ margin:35px 0 25px; display: flex;}
.service-detail .right-detail .single-progress {display: flex; align-items: center; margin-right:35px; align-items: center; flex-direction: row}
.service-detail .right-detail .single-progress:last-child{ margin-right:0;}
.service-detail .right-detail .single-progress p { margin-left: 20px; font-size: 16px; line-height: 20px;}
.service-detail .right-detail .cta-btn{ font-size:16px; padding:10px 15px;}

@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}
@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
div[role="progressbar"] {
  --size: 100px;
  --fg: #0bdac4;
  --bg: #eceef3;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, white 90%, transparent 0 99.9%, white 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-family: 'Montserrat';
  font-weight:600;
  font-size: calc(var(--size) / 5);
  color: var(--fg);
}
div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
}

.service-list {background: #131529; padding: 40px 10%;}
.service-list h2 {text-transform: uppercase; font-size:48px; line-height:57px; color:#fff; font-family: 'Montserrat'; font-weight:300; margin:0 0 40px;}
.service-list h2 span {color:#7ddebf; font-weight:bold;}
.service-box{ position: relative; background: #020626; border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px 12%;}
.services-slider h4 { font-weight: 600; font-size:18px; line-height:25px; color: #fff; margin-bottom: 20px; font-family: 'Montserrat'; font-weight:600;}
.services-slider p { font-size: 16px; line-height: 22px; color:#9C9C9C; font-family: 'Myriad Pro'; font-weight:400; margin-bottom:15px;}
.services-slider .icon { position: relative; margin-bottom: 30px; display: inline-block;}
.services-slider .icon::before{ position: absolute; left:25px; top:-15px; width:50px; height:50px; content: ''; background:#191c3a; border-radius:50%;}
.services-slider .owl-item .icon img {  width: 44px; position: relative; z-index: 1;}
.services-slider a{ font-weight: 500; font-size: 16px; line-height: 20px; color:#7ddebf; position:relative; text-decoration: none; font-family: 'Myriad Pro'; padding-right:20px; transition:.5s;}
.services-slider .service-box:hover a{ padding-right:30px;}
.services-slider a:after{ position: absolute; right:0; top:calc(50% - 1px); width:15px; height:2px; background:#7ddebf; content:'';}
.services-slider a:before{ position: absolute; right:0; top:calc(50% - 4px); width:6px; height:6px; border-bottom:2px solid #7ddebf; border-right:2px solid #7ddebf; content:''; transform:rotate(-45deg);}

.top-slider-arrows .owl-nav{ position:absolute; right:0; top:-80px; margin:0!important;}
.top-slider-arrows .owl-nav button{ border:1px solid #fff!important; border-radius:0!important; width:45px; height:30px; margin:0 3px!important; position: relative; background:none;}
.top-slider-arrows .owl-nav button:hover{ background:rgba(255,255,255,.2);}
.top-slider-arrows .owl-nav button span{ display:none;}
.top-slider-arrows .owl-nav button:before{ position: absolute; left:15px; top:calc(50% - 1px); width:20px; height:2px; background: #fff; content:'';}
.top-slider-arrows .owl-nav button:after{ position: absolute; left:8px; top:calc(50% - 5px); border-right:7px solid #fff; border-top:5px solid rgba(0,0,0,0); border-bottom:5px solid rgba(0,0,0,0); content:'';}
.top-slider-arrows .owl-nav button.owl-next:before{ left: auto; right:15px;}
.top-slider-arrows .owl-nav button.owl-next:after{  border-right:0; border-left:7px solid #fff; left:auto; right:8px;}


/* Contact page start here */
.wrapper{ margin:0 auto; width:62%; max-width:100%;}

.contact-page .wrapper{ display: flex;}
.formSec { padding:90px 0;}
.contact-form {background: #d3d3d3; padding:60px 6.7%; flex:2; }
.contact-page .heading-sec{ margin-bottom:40px;}
.contact-page .heading-sec h5 {font-size: 16px; line-height: 15px; color:#fc4327; margin:0 0 10px; font-family: 'Montserrat'; font-weight:600;}
.contact-page .heading-sec h3 {font-size: 45px; line-height: 50px; font-family: 'Nunito'; font-weight:900;}
.formSec .contact-form input {border: none; padding: 5px 20px; border-radius:40px; margin-bottom: 15px; width: 100%; height:50px; font-size:14px; font-family: 'Montserrat'; font-weight:400; color:#9a9a9a;}
.formSec .contact-form textarea {border: none; padding: 20px; border-radius: 20px; margin-bottom: 15px; width: 100%; font-size:14px; font-family: 'Montserrat'; font-weight:400; color:#9a9a9a; height:140px; resize:none;}
.formSec .contact-form textarea:focus{ outline:none;}
.formSec .contact-form .submit-btn{ background: #75bb18; border-radius:30px; padding: 10px 25px; color:#000; font-size: 15px; display: inline-block; font-weight:600; width:170px; cursor:pointer; margin:0;}
.formSec .contact-form .submit-btn:hover{ background:#efb719;}

.address-sec {border:1px solid #c1c1c1; padding:60px 2%; text-align: center; flex: 1;}
.address-sec address{ margin-bottom:25px; font-style: normal;}
.address-sec address:last-child{ margin-bottom:0;}
.address-sec h6 {font-size: 14px; line-height: 20px; margin-bottom:5px; font-family: 'Montserrat'; font-weight:600; color: #212121;}
.address-sec p {font-size: 13px; line-height: 20px; color: #757575; font-family: 'Montserrat'; font-weight:400;}
.address-sec p{ font-size:12px; line-height:18px;}
.address-sec p a{color: #757575;}
.address-sec p a:hover{ text-decoration: underline;}
.address-sec .social-icon{ justify-content: center;}

/* about us page start here */
.worktogether-sec{ background:url('../images/together-bg.png') no-repeat bottom center; background-size:100%; padding-bottom:140px;}
.worktogether-sec .text-content{ width:35%;}
.worktogether-sec h4{ font-size:72px; line-height:105%; font-family: 'Montserrat'; font-weight:600; color:#ff4c6c; margin:0 0 25px;}
.worktogether-sec p{ color:#3B3663; font-size:18px; line-height:1.5; font-family: 'Nunito'; font-weight: normal; margin:0 0 20px;}
.worktogether-sec .number{ font-size:30px; line-height: 1.5; color:#3B3663; font-family: 'Nunito'; font-weight:bold;}
.worktogether-sec .mail{font-size:11px; line-height: 15px; color:#3B3663; font-family: 'Nunito'; font-weight:bold; text-transform: uppercase; display: block; margin-bottom:30px;}
.worktogether-sec .cta-btn{ background:linear-gradient(96deg, #FA9D4D 0%, #FF4C6C 100%); color:#fff; font-size:13px; line-height:1.5; padding:12px 40px 12px 20px; position: relative;}
.worktogether-sec .cta-btn:after{ position: absolute; right:15px; top:calc(50% - 1px); width:15px; height:2px; background:#fff; content:'';}
.worktogether-sec .cta-btn:before{ position: absolute; right:15px; top:calc(50% - 4px); width:6px; height:6px; border-bottom:2px solid #fff; border-right:2px solid #fff; content:''; transform:rotate(-45deg);}


.about-page .wrapper{ width:82%;}
.about-banner{ background:#e9efff url('../images/about-banner.png') no-repeat 0 0; background-size:100%; padding:270px 4.2% 40px;}
.about-banner .banner-content{ width:42%;}
.about-banner h1{ font-size:35px; line-height:1.2; color: #02123b; font-family: 'Montserrat'; font-weight:300; margin:0 0 30px; text-transform: uppercase;}
.about-banner h1 strong{ font-weight:bold; position: relative; display: inline-block; padding-bottom:15px;}
.about-banner h1 strong:before{ position: absolute; left:0; bottom:0; height:2px; width:100%; content: ''; background:#e49820;}
.about-banner p{ font-size:20px; line-height:1.5; color: #000; font-family: 'Montserrat'; font-weight:400; margin-bottom:10px;}
.about-banner .points{ display: flex; margin-top:40px;}
.about-banner .pointer{ display: flex; align-items: center; flex: 1; border-right:2px solid #d7d7d6; padding:0 14%;}
.about-banner .pointer:first-child{ padding-left:0;}
.about-banner .pointer:last-child{ padding-right:0; border-right:none;}
.about-banner .pointer img{ width:55px; margin-right:20px;}
.about-banner .pointer span{ font-family: 'Nunito'; font-weight:600;}


.offer-sec{ padding:50px 0;}
.title-sec{ text-align: center; margin:0 0 30px;}
.title-sec h5{ color:#3b3663; font-size:14px; line-height:2; font-family: 'Montserrat'; font-weight:600;}
.title-sec h3{ color:#3b3663; font-size:30px; line-height:1.3; font-family: 'Nunito'; font-weight:700;}

.offer-list{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.offer-list .offer-box{ flex:0 0 31.5%; background:#fff; box-shadow:13px 13px 51px 0px rgba(9.999999999999991, 50.99999999999997, 80, 0.1); border-radius:10px; margin-bottom:30px; padding:35px 3%; transition:.5s;}
.offer-list .offer-box:hover{ transform: scale(1.05);}
.offer-box .offer-head{ display: flex; align-items: center; margin-bottom:15px;}
.offer-box .offer-head img{ width:76px; margin-right:10px;}
.offer-box .offer-head h4{ font-size:24px; line-height:1.7; color:#252A3F; font-family: 'Nunito'; font-weight:bold;}
.offer-box .offer-body{ color:#696588; font-size:16px; line-height:1.5; font-family: 'Montserrat'; font-weight:500;}