@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: middle; background: transparent; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, article { display: block }
body { line-height: 1 }
ol, ul { list-style: none }
:focus { outline: 0 }
::-moz-focus-inner {border:0;outline:0}
table { border-collapse: collapse; border-spacing: 0;}
.clear { clear: both }
.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; line-height: 0 }
.cf { display: inline-block }
* html .cf { height: 1% }
.cf { display: block }
p {padding-bottom: 20px;}
sub, sup {font-size: 75% !important;}
a, a:hover, a:focus{outline: none;}
a{color: #2E2F30;}
a:hover{color: #60C6C9;}

#ie-toolbar {position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999; background-color:#f3f3f3;}
#ie-toolbar div {position:absolute; top:50%; left:50%; width:700px; margin-left:-350px; text-align:center; height:120px; margin-top:-60px; color:#616161; font-size:30px;}
#ie-toolbar div a {color:#d65727; text-decoration:underline;}
#ie-toolbar div a:hover {color:#d65727; text-decoration:none;}

html.iphone-x-fix-left { margin: 0; padding: 0 0 0 32px; }
html.iphone-x-fix-left::before { content: ''; width: 32px; height: 100vh; position: fixed; left: 0; top: 0; background-color: #000; }
html.iphone-x-fix-right { margin: 0; padding: 0 32px 0 0; }
html.iphone-x-fix-right::before { content: ''; width: 32px; height: 100vh; position: fixed; right: 0; top: 0; background-color: #000; }

html{scroll-behavior: smooth;}
html, body {height:100%; width:100%;}
body {font-family: 'IBM Plex Sans', sans-serif; font-size: 18px; line-height: 22px; background-color:#fff; color: #2E2F30; overflow-y: scroll;}
.al{float: left;}
.ar{float: right;}
.pr {position: relative;}
.margin-auto {margin: 0 auto;}
a,a:after, button {text-decoration: none; cursor: pointer!important;}
a:focus, a:hover{text-decoration: none; outline: none;}
img { border: 0; vertical-align: top;}
img, a, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, .btn-sm.active.focus, .btn-sm.active:focus, .btn-sm.focus, .btn-sm:active.focus, .btn-sm:active:focus, .btn-sm:focus {outline: none;}
.imgW100p {width:100%;}


/*
font-family: 'IBM Plex Sans', sans-serif;
font-family: 'IBM Plex Mono', monospace;
font-family: 'Roboto', sans-serif;
*/

/* Start Transition Effect */
body { -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s; }
a,a:after{ -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}

.menu li a, .menu li a:visited, .menu li a:focus{-webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; transition-duration: 200ms;}
.btn-primary, .btn-secondary, .home-what-link a, .shadow-hover, .owl-theme .owl-dots .owl-dot span, .testimonial .owl-theme .owl-nav [class*=owl-], .about-service-1, .about-service-1 span, .service-top li a, .service_box li a{-moz-transition:background, 0.5s; -webkit-transition:background, 0.5s; transition:background, 0.5s;}

/* End Transition Effect */

.wrap { margin: 0 auto; max-width: 1240px; width: 100%; padding: 0 48px; }
.wrap-big{max-width: 1920px;}
.header-wrap, .our-process-top-bg .wrap, .contact_bg .wrap, .wrap-middle{max-width: 1700px;}
.row{ margin: 0 -12px;}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{ padding: 0 12px;}
.label{font-size: 100%;}


h1{font-family: 'IBM Plex Sans', sans-serif; font-size: 56px; line-height: 64px; color: #2E2F30; font-weight: 700;}
h2, .service-text h1{font-family: 'IBM Plex Sans', sans-serif; font-size: 40px; line-height: 55px; color: #2E2F30; font-weight: 700;}
h3{font-family: 'IBM Plex Sans', sans-serif; font-size: 32px; line-height: 40px; color: #2E2F30; font-weight: 700; letter-spacing: 0.5px;}
h4{font-family: 'IBM Plex Sans', sans-serif; font-size: 24px; line-height: 31px; color: #2E2F30; font-weight: 500;}
.subheading{font-family: 'IBM Plex Sans', sans-serif; font-size: 20px; line-height: 26px; color: #2E2F30; font-weight: 600; letter-spacing: -0.15px;}
.text-1{font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 28px; color: #2E2F30;}
.textLink, .menu .dropdown-menu li a{font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; line-height: 18px; color: #2E2F30; font-weight: 700; letter-spacing: 0.5px;}
.caption{font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; line-height: 16px; color: #2E2F30; font-weight: 500;}
.caption-sm{font-family: 'IBM Plex Sans', sans-serif; font-size: 8px; line-height: 10px; color: #2E2F30;}
label{font-weight: inherit; }
.font-100{font-family: 'IBM Plex Mono', monospace; font-size: 100px; line-height: 1.2; color: #4554E7; font-weight: 600; letter-spacing: 1px;}
.testimonial .item h4, .contactForm h4{letter-spacing: 1px; font-weight: 600;}
/* Start Background  & Color */
.purple-bg{background: linear-gradient(90deg, #1273D0 0%, #4554E7 100%);}
.broadbeam-bg{background: linear-gradient(107.51deg, #152733 34.31%, #535992 92.32%);}
.ppl-bg{background: linear-gradient(107.51deg, #172A3A 34.31%, #184C78 92.32%);}
.alex-bg{background: linear-gradient(107.51deg, #0A0A0A 34.31%, #424242 92.32%);}
.hippo-bg{background: linear-gradient(107.51deg, #2A56A6 34.31%, #598EEE 92.32%);}
.gf-bg{background: linear-gradient(107.51deg, #30819B 34.31%, #48A0C3 92.32%);}
.afisco-bg{background: linear-gradient(107.51deg, #0B2150 34.31%, #102D6B 92.32%);}
.cscca-bg{background: linear-gradient(107.51deg, #123A72 34.31%, #4F698D 92.32%);}
.sponsability-bg{background: linear-gradient(107.51deg, #1d4356 34.31%, #295469 92.32%);}
.the-nut-garden-bg{background: linear-gradient(107.51deg, #267E3B 34.31%, #35A549 92.32%);}
.gray-bg{background: #F2F5F7;}
.gray-text{color: #F2F5F7;}
.gradient-bg{background: linear-gradient(92.41deg, #8FE8BD 55.2%, #1273D0 95.44%);}
.gradient-bg-2{background: linear-gradient(290deg, #1273D0 0%, #8FE8BD 52.76%);}
.text-color-purple{color: #4554E7;}
/* End Background  & Color */

/* Start Input, textarea, Select, Switch button */
.form-control{ border: 1px solid #2E2F30; width: 100%; padding: 13px 9px 12px 12px; color: #2E2F30; font-size: 15px; line-height: 21px; font-family: 'IBM Plex Sans', sans-serif; height: auto; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background-color: #fff; }
select.form-control{background-color: #fff; color: #2E2F30; background-image: url(../images/icon/select-icon.svg); background-position: calc(100% - 18px) 18px; background-size: 18px 18px, 11px 11px; background-repeat: no-repeat; -webkit-appearance: none; -moz-appearance: none; padding: 13px 45px 12px 12px; height: auto !important;}
select.form-control:focus, input.form-control:focus, textarea.form-control:focus{border: 1px solid #2E2F30; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-color: #fff; color: #2E2F30;}
textarea.form-control{resize: none; height: 142px;}
.form-control:disabled, .form-control[readonly], select.form-control[readonly]:focus, input.form-control[readonly]:focus, textarea.form-control[readonly]:focus{cursor: not-allowed; background-color: #e9ecef; border: 1px solid #2E2F30;}
.form-control:disabled{opacity: 0.5;}

.btn, .btn-sm{font-family: 'IBM Plex Sans', sans-serif; color: #2E2F30; font-size: 18px; line-height: 23px; font-weight: 600; padding: 10px 10px 9px; display: inline-block; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; text-align: center; margin-top: 0;}
.btn:hover, .btn-sm:hover{margin-top: -4px; margin-bottom: 4px;}
.btn-sm{padding: 2px 10px 1px;}
.btn-primary, .menu li.lets-btn a{border: 3px solid #1273D0; color: #fff; background: #1273D0;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .menu li.lets-btn a:hover{border: 3px solid #083764; color: #fff; background: #083764; }
.btn-secondary, .header-white .menu li.lets-btn a {border: 3px solid #4554E7; color: #4554E7; background: #fff;}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:active:focus, .btn-secondary:active:hover, .btn-secondary.active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .header-white .menu li.lets-btn a:hover{ border: 3px solid #4554E7; color: #4554E7; background: #F2F5F7;}
.btn.active, .btn:active, .btn:focus{-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
.btn-disable{pointer-events: none; opacity: .65;}
.btn-yellow{border: 3px solid #F2BD42; color: #2E2F30; background: #F2BD42;}
.btn-yellow:hover, .btn-yellow:focus, .btn-yellow:active, .btn-yellow:active:focus, .btn-yellow:active:hover, .btn-yellow.active, .btn-yellow:not(:disabled):not(.disabled).active, .btn-yellow:not(:disabled):not(.disabled):active{border: 3px solid #f6ce73; color: #2E2F30; background: #f6ce73; }
.btn-white{border: 3px solid #fff; color: #083764; background: #fff;}
.btn-white:hover, .btn-white:focus{border: 3px solid #083764; color: #fff; background: #083764;}

/* Start Placeholder */
.input-search::placeholder, .form-control::placeholder {color: #7F8285 !important; opacity: 1;}
.input-search:-ms-input-placeholder, .form-control:-ms-input-placeholder {color: #7F8285 !important; opacity: 1;}
.input-search::-ms-input-placeholder, .form-control::-ms-input-placeholder {color: #7F8285 !important; opacity: 1;}

/* Start checkbox & radiobox */
.checkBox, .radioBox{display: block; position: relative; padding-left: 28px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #2b2b2b;}
.checkBox label, .radioBox label{cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 18px; line-height: 140%; color: #9747FF; margin-bottom: 0 !important; display: block;}
.checkBox input, .radioBox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkBox .checkmark, .radioBox .checkmark{position: absolute; top:calc(50% - 10px); left: 0; height: 20px; width: 20px;}
.checkBox .checkmark, .checkBox .checkmark:after{transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; }
.checkBox .checkmark:after, .radioBox .checkmark:after{content: ""; position: absolute; opacity: 0;}
.checkBox input:checked ~ .checkmark:after, .radioBox input:checked ~ .checkmark:after{opacity: 1;}

.checkBox .checkmark {border: 2px solid #9747FF; background: #FFFDFC; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; }
.checkBox input:checked ~ .checkmark { background-color: #9747FF; border: 2px solid #9747FF;}
.checkBox .checkmark:after {left: 4px; top: 0px; width: 7px; height: 12px; border:solid #FFFDFC; border-width: 0 2px 2px 0; -webkit-transform: rotate(0deg) scale(0); -ms-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); }
.checkBox input:checked ~ .checkmark:after {-webkit-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1);}
.checkBox span.checkmark{padding: 0 !important;}

/* Start radiobox */
.radioBox .checkmark {top:calc(50% - 11px); background-color: #FFFDFC; border: 2px solid #9747FF; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.radioBox:hover input ~ .checkmark { border: 2px solid #9747FF;}
.radioBox input:checked ~ .checkmark { border: 2px solid #9747FF; background-color: #FFFDFC;}
.radioBox .checkmark:after {background: #9747FF; top: 3px; left: 3px; width: 10px; height: 10px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}


/* Start Floating Label */
.floating-label { position:relative; }
.floating-input , .floating-select {}
.floating-input:focus , .floating-select:focus {border: 1px solid #2E2F30;  padding-top: 14px; padding-bottom: 11px;}
.floating-label label { position:absolute; pointer-events:none; left:12px; top:10px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; color: #7F8285; font-size: 15px; line-height: 28px;}
.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label { top:5px; font-size:8px; line-height: 10px; color: #1273D0;}
.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label, .selectLabel {top:5px !important; font-size:8px; line-height: 10px;}
.floating-input:not(:placeholder-shown){border: 1px solid #2E2F30; padding-top: 14px; padding-bottom: 11px;}
.floating-select option:first-child{display: none;}
.error-text{font-size: 14px; line-height: 11px; color: #BB1414; margin: 5px 0 0 0px;}
.error-msg .floating-input:focus ~ label, .error-msg .floating-input:not(:placeholder-shown) ~ label { color: #BB1414;}
/* End Input, textarea, button */

/* Start Border Radius */
.testimonial-name img{-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
/* End Border Radius */

/* Start Margin & Padding */
.mb-16{margin-bottom: 16px;}
.mb-22{margin-bottom: 22px;}
.mb-24{margin-bottom: 24px;}
.mb-32{margin-bottom: 32px;}
.mb-80{margin-bottom: 80px;}
.mt-10{margin-top: 10px}
.mt-12{margin-top: 12px;}
.mt-20{margin-top: 20px;}
.mt-24{margin-top: 24px;}
.mt-32{margin-top: 32px;}
.mt-40{margin-top: 40px;}
.pt-160{padding-top: 160px;}
.pt-190{padding-top: 190px;}
.ptb-36{padding-top: 36px; padding-bottom: 36px !important;}
/* End Margin & Padding */

/* Start Common CSS */
.shadow-hover:hover, .menu .dropdown-menu ul{-moz-box-shadow: 0px 4px 48px rgba(18, 115, 208, 0.08), 0px 2px 16px rgba(8, 55, 100, 0.12); -webkit-box-shadow: 0px 4px 48px rgba(18, 115, 208, 0.08), 0px 2px 16px rgba(8, 55, 100, 0.12); box-shadow: 0px 4px 48px rgba(18, 115, 208, 0.08), 0px 2px 16px rgba(8, 55, 100, 0.12);}
.column-2{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.over-hidden-x{overflow-x: hidden;}
.about-service-1:hover, .service-img img, .shadow-img{filter: drop-shadow(0px 2px 16px rgba(8, 55, 100, 0.12));}
.line:after{content: ''; background: #7F8285; width: 100px; height: 1px; margin-top: 16px; display: block;}

.owl-theme .owl-nav{text-align: right !important;}
.owl-theme .owl-nav [class*=owl-]{background: rgba(18, 115, 208, 0.2) !important; padding: 6px !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important;}
.owl-theme .owl-nav [class*=owl-] span {background-position: 0 0; background-repeat: no-repeat; height: 36px; width: 36px; display: block;}
.owl-theme .owl-nav [class*=owl-] span svg{display: none;}
.owl-theme .owl-nav [class*=owl-]:hover {background: rgba(18, 115, 208, 0.5) !important;}
.owl-carousel .owl-nav .owl-prev span{background-image: url("../images/icon/slider-left.svg")}
.owl-carousel .owl-nav .owl-next span{background-image: url("../images/icon/slider-right.svg")}
.owl-theme .owl-dots{position: absolute; left: 0; bottom: 16px;}
.owl-theme .owl-dots .owl-dot span{margin: 0 8px !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; width: 40px !important; height: 8px !important; background: #DADFE3 !important;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{ background: linear-gradient(90deg, #1273D0 0%, #4554E7 100%) !important;}
.bulletList{margin: 8px 0 12px 20px;}
.bulletList li{line-height: normal; padding: 0 0 8px 0; list-style: initial;}
.fullHeight{min-height: 100vh;}
.height-100{height: 100px;}
/* End Common CSS */

input.error-msg, textarea.error-msg, select.error-msg, .error-msg input, .error-msg select, .error-msg textarea{border-color: #BB1414!important;}