/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Open Sans', sans-serif; */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; }
* { padding: 0; margin: 0; border: none; box-sizing: border-box; }
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, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; -webkit-font-smoothing: auto; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block }
audio, canvas, video { display: inline-block }
audio:not([controls]) { display: none; height: 0 }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
a { text-decoration: none; color: #070606; display: inline-block; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
a:focus { outline: none }
a:hover, a:active { outline: 0; }
a:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6, b, strong, dt, th { font-weight: bold; }
em, i { font-style: italic; }
h1 { font-size: 40px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
ul { padding: 0 0 0 0px; }
ol { padding: 0 0 0 0px }
ul ul, ol ol { margin: 0px 0; }
ul li, ol li { list-style: none; }
p, h1, h2, h3, h4, h5, h6, ul, ol, dd, table, fieldset, address { margin: 0 0 0px; }
img { -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; max-width: 100%; height: auto; }
figure { margin: 0; }
legend { white-space: normal; }
q { quotes: "\201C" "\201D" "\2018" "\2019" }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sup { top: -0.5em }
sub { bottom: -0.25em }
table { border-collapse: separate; border-spacing: 0; width: 100%; empty-cells: show; border: none; }
table table { margin: 0 }
th, td { border: none; padding: 8px 10px }
caption, th, td { font-weight: normal; background: #fff }
body{ color: #646f87; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; line-height:24px; }
p{font-size: 16px; font-weight: 400; line-height: 24px; color: #646f87; margin: 0;}
body { background-color: #fff;overflow-x:hidden;}
h1, h2, h3, h4, h5, h6{font-family: 'Montserrat',sans-serif; color: #293651; }
.clearfix:before, .clearfix:after, .container:before, .container:after, .clearDiv:before, .clearDiv:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after { content: " "; display: table }
.clearfix:after, .container:after, .clearDiv:after, .container-fluid:after, .row:after { clear: both; }
svg:not(:root).svgImg { overflow: visible }
.svgImg { display: inline-block; font-size: inherit; height: 1em; overflow: visible; vertical-align: -.125em; font-size: 22px; }
.wrapper { width: 100%; /* overflow: hidden; max-width: 1920px; */ margin: auto; position: relative }
.trans, path, circle, rect, poligon { -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
a[href^="mailto"]{word-break: break-all;}
details, details summary {padding-left:0; background-image:none; -webkit-appearance:none;}
details summary::-webkit-details-marker {display:none;}
button:focus{outline:0}
/* .container{max-width: 1140px;width: 100%;} */
i, span, a {display: inline-block; }
.fixbody {overflow: hidden; }
.overlay {background: rgba(0,0,0,.7); width: 100%; position: fixed; top: 0; left: 0; cursor: pointer; bottom: 0; right: 0; opacity: 0; visibility: hidden; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 2; }
.fixbody .overlay {visibility: visible; opacity: 1; }
.inputField{width: 100%; height: 50px; border-radius: 0; padding: 0 20px; border-radius: 4px; color: #fff;border: 1px solid rgba(225,225,225,0.7); background-color: transparent; font-size: 16px; line-height: 50px; font-weight: 600; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; text-transform: uppercase;}
textarea.inputField {height: 120px; line-height: 1.3em; padding:15px 20px; }
input, textarea {border-radius: 0; -webkit-appearance: none; }
textarea {resize: none; }

.inputField::-webkit-input-placeholder{color:#fff;opacity: 0.7; font-weight: 500; -moz-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}
.inputField:-moz-placeholder{color:#fff;opacity: 0.7; font-weight: 500; opacity:1;-moz-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}
.inputField::-moz-placeholder{color:#fff;opacity: 0.7; font-weight: 500; opacity:1;-moz-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}
.inputField:-ms-input-placeholder{color:#fff;opacity: 0.7; font-weight: 500; -moz-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}
.inputField:focus::-webkit-input-placeholder{color:#fff;opacity: 1; -moz-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}
.inputField:focus:-moz-placeholder {color: #fff; opacity: 1;}
.inputField:focus::-moz-placeholder {color: #fff; opacity: 1;}
.inputField:focus:-ms-input-placeholder {color: #fff;opacity: 1;}
.inputField:focus{border-color: #fff}
.form-group {margin-bottom:15px; }

label.error, div.error, span.wpcf7-not-valid-tip, .captchaDiv span.wpcf7-not-valid-tip{    position: absolute; right: 0; top: -20px; width: auto; height: auto; margin: 0; -webkit-font-smoothing: auto; line-height: normal; font: 11px/11px arial; background: #fb0101; padding: 5px 5px 4px; color: #fff; z-index: 1;}
label.error:after, div.error:after, span.wpcf7-not-valid-tip:after {border-color: #fb0101 transparent transparent; -moz-border-image: none; -o-border-image: none; border-image: none; border-right: 6px solid transparent; border-style: solid; border-width: 6px; content: " "; height: 0; left: 20px; margin-left: -10px; position: absolute; top: 100%; width: 0; }


/*------------------------------------------------------------- General css End -------------------------------------------------------------*/

/*Page loader css start*/
.preloader { position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; background: #fff; z-index: 99999 }
.preloader .loader { display: table-cell; vertical-align: middle; text-align: center }
.preloader .loader .ytp-spinner { position: absolute; left: 50%; top: 50%; width: 64px; margin-left: -32px; z-index: 18; pointer-events: none }
.preloader .loader .ytp-spinner .ytp-spinner-container { pointer-events: none; position: absolute; width: 100%; padding-bottom: 100%; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; animation: ytp-spinner-linspin 1568.23529647ms linear infinite }
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator { position: absolute; width: 100%; height: 100%; -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; animation: ytp-spinner-easespin 5332ms cubic-bezier(.4, 0, .2, 1) infinite both }
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; right: 50% }
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right { position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden; left: 50% }
.preloader .loader .ytp-spinner-circle { box-sizing: border-box; position: absolute; width: 200%; height: 100%; border-style: solid; border-color: #00a78e #00a78e #eceff8; border-radius: 50%; border-width: 6px }
.preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #eceff8; -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; animation: ytp-spinner-left-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both }
.preloader .loader .ytp-spinner-right .ytp-spinner-circle { left: -100%; right: 0; border-left-color: #eceff8; -webkit-animation: ytp-right-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; -moz-animation: ytp-right-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; -o-animation: ytp-right-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; animation: ytp-right-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both }
@-webkit-keyframes ytp-spinner-linspin {
	to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) }
}
@keyframes ytp-spinner-linspin {
	to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) }
}
@-webkit-keyframes ytp-spinner-easespin {
	12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg) }
	25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg) }
	37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg) }
	50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg) }
	62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg) }
	75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg) }
	87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg) }
	to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg) }
}
@keyframes ytp-spinner-easespin {
	12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg) }
	25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg) }
	37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg) }
	50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg) }
	62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg) }
	75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg) }
	87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg) }
	to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg) }
}
@-webkit-keyframes ytp-spinner-left-spin {
	0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg) }
	50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg) }
	to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg) }
}
@keyframes ytp-spinner-left-spin {
	0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg) }
	50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg) }
	to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg) }
}
@-webkit-keyframes ytp-right-spin {
	0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg) }
	50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg) }
	to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg) }
}
@keyframes ytp-right-spin {
	0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg) }
	50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg) }
	to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg) }
}
/*Page loader css end*/

.comSpace{padding-top: 70px; padding-bottom: 70px;}
.comSpace-120{padding-top: 120px; padding-bottom: 120px;}
.greyBg{background: #f9f9f9}
.cstbtn {display: inline-block; font-weight: 600; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0 40px; font-size: 16px; line-height: 55px; height: 55px; border-radius: 5px; color: #fff; cursor: pointer; z-index: 5;  background-color: #00a78e; }
.white-cstBtn {color: #00a78e; background-color: #fff;}
.sectionTitle .subTitle {font-size: 20px; font-weight: 600; color: #00a78e; }
.sectionTitle .mainTitle {font-size: 35px;font-weight: 600;margin-top: 20px;position: relative;padding-bottom: 25px;margin-bottom: 15px;}
.mainTitle:before, .mainTitle:after {content: ''; position: absolute; bottom: 0; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; }
.mainTitle:before {width: 64px;height: 3px;background: #00a78e;}
.mainTitle:after {left: calc(64px + 4px);border-bottom: 3px dashed #00a78e;width: 16px;}
.text-center .mainTitle:before{    left: -17px; right: 0; margin: auto;}
.text-center .mainTitle:after{    right: 0; margin: auto;}

/*Header css start*/
.header_navbar {position: absolute; top: 0; left: 0; width: 100%; z-index: 99; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; }
.navBar  {padding: 25px 0; border-radius: 5px; position: relative; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; }
.topMenuul li{position: relative;}
.topMenuul li:not(:last-child){margin-right: 45px;}
.topMenuul li a {font-size: 16px; font-weight: 600; color: #fff; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; padding: 10px 0; position: relative; font-family: Open Sans,sans-serif; position: relative; }
.topMenuul li a:before, .topMenuul li a:after{content: ''; position: absolute;bottom: 0; opacity: 0; visibility: hidden;-webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s;}
.topMenuul li a:before{width: 0;height: 2px; background: #fff;}
.topMenuul li a:after{ left:0; border-bottom: 2px dashed #fff; width: 14px;}
.topMenuul li.active a:before{opacity: 1; visibility: visible;width: 60%;}
.topMenuul li.active a:after{opacity: 1; visibility: visible;left: calc(60% + 4px);}
.sticky {position: fixed; z-index: 99; background-color: #fff; -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%); -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, .05); box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%); -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; }
.sticky .navBar{padding: 10px 0; }
.sticky .topMenuul li a { color: #293651 }
.sticky .topMenuul li.active a{ color: #00a78e }
.logoDiv {display: flex; align-items: center; }
.logoTxt{font-size: 20px;font-weight: 600;color: #000}
.logoTxt span{color: #00a78e;}
/*Header css end*/

/*Banner section css start*/
.bannerSec{ position: relative; z-index: 1; background-position: bottom center; background-color: #f9f9f9; overflow: hidden; padding-top: 70px;}
.bannerContent .cstbtn {margin-top: 30px; }
.bannerShape  { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: -1 }
.bannerShape:before{ position: absolute; content: ''; width: 1000%; height: 100%; background-color: #00a78e; -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -ms-transform: skewX(20deg); -o-transform: skewX(20deg); transform: skewX(20deg); top: 0; left: 0 }
.bannerContent .bannerColorTitle  { font-size: 30px; font-weight: 600; color: #00a78e; letter-spacing: 4px }
.bannerContent .bannerTitle {font-size: 50px; font-weight: 700; color: #293651; margin-top: 20px; }
.bannerContent span {font-size: 18px; font-weight: 500; color: #293651; margin-top: 15px; }
.bannerContent p {margin-top: 15px; }
.banner_image img { width: 100% }
.topSocialUl { position: absolute; top: 50%; left: 50px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); border: 1px solid rgba(0, 167, 142, .21); border-radius: 50px }
.topSocialUl li a { font-size: 18px; padding: 25px 15px; color: rgba(100, 111, 135, .58); -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s }
/*Banner section css end*/

/*About section css start*/
.aboutImage { position: relative;margin-top: 50px; }
.aboutImage img { width: 100% }
.aboutImage .aboutShape { width: 404px; height: 525px; border-left: 15px solid #00a78e; border-bottom: 15px solid #00a78e; position: absolute; bottom: 0; left: 0; z-index: -1 }
.aboutImage .aboutShape::before { position: absolute; content: ''; width: 15px; height: 85%; background-color: #00a78e; bottom: 0; right: 0 }
.aboutImage .aboutShape::after { position: absolute; content: ''; width: 104%; height: 15px; background-color: #00a78e; top: 36px; right: -2px; -webkit-transform: rotate(11deg); -moz-transform: rotate(11deg); -ms-transform: rotate(11deg); -o-transform: rotate(11deg); transform: rotate(11deg); border-top-left-radius: 20px }
.aboutContent {margin-top: 45px;}
.aboutContent p { margin-top: 10px }
.aboutSkills{padding-top: 20px;}
.skillItem{    margin-top: 20px;}
.skillItem .skillHeader { position: relative }
.skillItem .skillHeader .skillTitle { font-size: 14px; font-weight: 500 }
.skillItem .skillHeader .skillPercentage { position: absolute; top: -3px; right: 0 }
.skillItem .skillHeader .skillPercentage p { font-size: 14px; font-weight: 400 }
.skillItem .skillBar { margin-top: 15px }
.skillItem .skillBar .barInner { width: 100%; height: 9px; border-radius: 5px; background-color: rgba(100, 111, 135, .11); position: relative }
.skillItem .skillBar .barInner .progressLine { position: absolute; top: 0; left: 0; height: 9px; border-radius: 5px; background-color: #00a78e; -webkit-transition: all 2s ease-out 0s; -moz-transition: all 2s ease-out 0s; -ms-transition: all 2s ease-out 0s; -o-transition: all 2s ease-out 0s; transition: all 2s ease-out 0s; width: 0 }
.skillItem .skillBar .barInner .progressLine::before { position: absolute; content: ''; width: 7px; height: 18px; background-color: #fff; border: 2px solid #00a78e; top: -5px; right: 0 }
/*About section css end*/

/*Service section css start*/
.singleService {height: calc(100% - 30px); padding: 30px; border-radius: 5px;margin-top: 30px; -webkit-box-shadow: 0 0 10px 0 rgba(196, 196, 196, .3); -moz-box-shadow: 0 0 10px 0 rgba(196, 196, 196, .3); box-shadow: 0 0 10px 0 rgba(196, 196, 196, .3); -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; background-color: #fff }
.singleService .serviceIcon i { width: 80px; height: 80px; line-height: 80px; text-align: center; font-size: 46px; background-color: #00a78e; color: #fff; border-radius: 25px; border-bottom-right-radius: 0; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s }
.singleService .serviceContent { margin-top: 25px }
.singleService .serviceContent .serviceTitle a { font-size: 22px; font-weight: 600; color: #293651; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s }
.singleService .serviceContent p { margin-top: 20px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s }
/*Service section css end*/

/*Testimonial section css start*/
.testimonialInner{margin-top: 30px;}
.testimonialInner .testimonialAuthor img { border-radius: 50px; border-bottom-right-radius: 0 }
.testimonialInner .testimonialContent { padding-left: 30px; position: relative }
.testimonialInner .testimonialContent .authorName { font-size: 18px; font-weight: 600; font-family: 'Open Sans', sans-serif }
.testimonialInner .testimonialContent .subTitle { font-size: 14px; color: #646f87; margin-top: 5px }
.testimonialInner .testimonialContent p { font-size: 16px; margin-top: 20px }
.testimonialInner .testimonialContent .review { position: absolute; top: 0; right: 0 }
.testimonialInner .testimonialContent .review li { display: inline-block; font-size: 14px; color: #ffae34; margin: 0 2px }
.testmonialSlider .slick-dots { width: 100%; text-align: center; margin-top: 25px ;    position: relative; bottom: inherit;}
.testmonialSlider .slick-dots li { display: inline-block; margin: 0 3px;width: auto; height: auto;}
.testmonialSlider .slick-dots li button { font-size: 0; width: 13px; height: 13px; border: 2px solid rgba(0, 167, 142, .43); border-radius: 50%; background: 0 0; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s }
.testmonialSlider .slick-dots li.slick-active button { background-color: #00a78e; border-color: #00a78e }
.testmonialSlider .slick-dots li button:before{display: none;}
.testmonialSlider.slick-dotted.slick-slider{margin-bottom: 0}
.mediaBody {-ms-flex: 1; flex: 1; }
/*Testimonial section css end*/

/*Buddies section css start*/
.buddiesDiv{position:relative;margin-top:30px;}
.buddiesDiv::before{position:absolute;content:'';left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);top:0;width:2px;height:100%;background-color:#00a78e;}
.buddiesDiv .row:not(:last-child){margin-bottom: 30px;}
.buddiesWrap .buddiesTitle{width:46%}
.buddiesWrap .buddiesTitle .title{font-size:25px;font-weight:600;}
.buddiesWrap .buddiesTitle p{color:#00a78e;font-size:16px;font-weight:600;font-family:open sans,sans-serif;margin-top:10px;}
.buddiesWrap .buddiesTitle .date{font-size:16px;font-weight:600;color:#646f87;font-family:open sans,sans-serif;margin-top:10px;}
.buddiesWrap .bdNo{width:8%;text-align:center;}
.buddiesWrap .bdNo span{width:55px;height:55px;line-height:51px;text-align:center;border:2px solid #00a78e;font-size:20px;font-family:open sans,sans-serif;color:#00a78e;border-radius:50%;-webkit-transition:all .3s ease-out 0s;-moz-transition:all .3s ease-out 0s;-ms-transition:all .3s ease-out 0s;-o-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s;background-color:#fff;}
.buddiesWrap .buddiesContent{-webkit-box-shadow:0 0 10px 0 rgba(196,196,196,.3);-moz-box-shadow:0 0 10px 0 rgba(196,196,196,.3);box-shadow:0 0 10px 0 rgba(196,196,196,.3);padding:30px;border-radius:10px;background-color:#fff;width:46%;-webkit-transition:all .3s ease-out 0s;-moz-transition:all .3s ease-out 0s;-ms-transition:all .3s ease-out 0s;-o-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s;}
.buddiesWrap .buddiesContent p{-webkit-transition:all .3s ease-out 0s;-moz-transition:all .3s ease-out 0s;-ms-transition:all .3s ease-out 0s;-o-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s;}
.buddiesWrap:hover .bdNo span{background-color:#00a78e;color:#fff;}
.buddiesWrap:hover .buddiesContent{background-color:#00a78e;}
.buddiesWrap:hover .buddiesContent p{color:#fff;}
.buddiesImage{border-radius: 30px;border-bottom-right-radius: 0;max-width: 120px;overflow: hidden;}
.buddiesTitleDt{padding-left: 20px;}
.buddiesDiv .row:nth-child(even) .buddiesTitleDt {padding-left: 0px;padding-right: 20px;}
.buddesSocialUl{margin-top: 8px;}
.buddesSocialUl li{display: inline-flex;}
.buddesSocialUl li a {font-size: 16px; padding: 5px 7px; color: rgba(100, 111, 135, .58); -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; }
/*Buddies section css end*/

/*Our Client section css start*/
.purClientLogoDiv {list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.purClientLogoDiv li {padding: 25px; flex-basis: 20%; text-align: center; } 
.purClientLogoDiv img {opacity: .8; transition: .3s; max-height: 110px; max-width: 150px; -webkit-filter: grayscale(1); filter: grayscale(1); cursor: pointer; }
 /*Our Client section css end*/ 

/* Contact Us section css start */
.contactUsMain{position:relative;padding-top: 120px;padding-bottom: 120px}
.contactUsMain::before{position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/shape.png'); background-repeat: repeat; opacity: .06;}
.contactUsBox{background-color:#00a78e;padding:60px 60px;border-radius:10px;position:relative;overflow:hidden;z-index:5;flex-wrap: wrap;}
.contactUsBox::before {position: absolute; content: ''; background-image: url("../images/shape-2.png"); background-position: bottom center; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-size: contain; opacity: .1; z-index: -1; }
.contactUsContent{    width: 100%; margin-bottom: 25px; max-width: 700px; margin: 0 auto 30px;}
.contactUsContent .mainTitle:before{background: #fff}
.contactUsContent .mainTitle:after{border-bottom-color: #fff}
.contactUsContent .mainTitle{color:#fff;}
.contactUsContent p{color:#fff;margin-top:15px;}
.contactUsFrm {width: 100%; max-width: 700px; margin: auto; }
/* Contact Us section css end */

/* Footer section css start */
.footer{background: #f8f8f8;}
.mainFooter{padding-top: 60px;padding-bottom: 60px;}
.ftlogo{margin-bottom: 20px;}
.ftAbt,.ftAbt p{font-size: 16px;line-height: 1.4em;}
.footerTitle{font-size: 20px;font-family: 'Montserrat',sans-serif;font-weight: 600;margin-bottom: 20px;color: #000;}
.ftUl li:not(:last-child){margin-bottom: 10px;}
.ftUl li a{font-size: 16px;line-height: 1.3em;font-weight: 600;color: #293651}
.ftCntUl{margin-bottom: 25px;}
.ftCntUl li:not(:last-child){margin-bottom: 10px;}
.ftCntUl li a, .ftTxt{font-size: 16px;line-height: 1.3em;font-weight: 600;}
.ftCntUl li{display: flex;}
.ftIcon{width: 30px;font-size: 20px;}
.ftTxt{width:calc(100% - 30px);}
.ftSocialUl {display: flex; }
.ftSocialUl li a{padding: 0 10px; color: #00a78e}
.copyRightDiv{padding: 15px 0;background: #e8e8e8}
.copyRightTxt{font-size: 14px;}
/* Footer section css end */

/*Scroll to top css Start*/
.back-to-top.show{opacity:1;visibility:visible;z-index:8}
.back-to-top{position:fixed;bottom:30px;right:15px;cursor:pointer;text-decoration:none;opacity:0;z-index:-1;background-color:transparent;transition:all .3s ease;-webkit-transition:all .3s ease; -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.back-to-top i{color:#fff;font-size:24px;line-height:inherit;margin-top: -2px;margin-left: -2px;position:absolute;left:50%;top:50%;z-index:10;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;transform:translate(-50%,-50%) rotate(-45deg);-webkit-transform:translate(-50%,-50%) rotate(-45deg);-moz-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);}
.back-to-top .btns{width: 50px; height: 50px; line-height: 50px; padding: 0; position: relative; background-color: transparent; border-radius: 50%; border: 5px solid #0e8c79; box-shadow: 0 0 8px rgba(0,0,0,.2); border-right-color: #0e8c79; border-bottom-color: #0e8c79; transition: all .3s ease; box-sizing: border-box; vertical-align: top; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .back-to-top .btns:before{position:absolute;content:"";left:6px;top:6px;right:6px;bottom:6px;background-color:#0e8c79;border-radius:50%;transition:all .3s ease;}
/*Scroll to top css End*/

 /*---------Media Query-----------*/

@media only screen and (min-width: 768px) {
.footerBody {display: block !important; }
.footerTitle {pointer-events: none; }
}

/* css only for hover effect all hover effect must write in this Media query */
@media only screen and (min-width: 1200px) {
	a[href^="tel"] {pointer-events: none; }
	.container{max-width: 1140px;width: 100%;}
	.topMenuul li a:hover:before{opacity: 1; visibility: visible;width: 60%}
	.topMenuul li a:hover:after{opacity: 1; visibility: visible;left: calc(60% + 4px)}
	.cstbtn:hover {background-color: rgba(0, 167, 142, .7); color: #fff; }
	.white-cstBtn:hover {background-color: rgba(255,255,255,.8); color: #00a78e;}
	.topSocialUl li a:hover { color: #00a78e }
	.sticky .topMenuul li a:hover { color: #00a78e }
	.singleService:hover { background-color: #00a78e }
	.singleService:hover .serviceIcon i { background-color: #fff; color: #00a78e }
	.singleService:hover .serviceContent .serviceTitle a { color: #fff }
	.singleService:hover .serviceContent p { color: #fff }
	.buddesSocialUl li a:hover {color: #00a78e; }
	.purClientLogoDiv img:hover {transform: scale(1.1); opacity: 1; -webkit-filter: grayscale(0); filter: grayscale(0); }
	.ftCntUl li a:hover{color: #00a78e  }
	.ftSocialUl li a:hover{color: #000}
	.copyRightDiv a:hover{color: #00a78e  }

	.back-to-top .btns:hover{border-radius:50%;color:#fff;border-color:#3bd6be;}
	.back-to-top .btns:hover i{color:#ffffff;}
	.back-to-top .btns:hover:before{background-color: #3bd6be; -moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}


/* Custome responsive css start from here */

@media only screen and (max-width: 1400px) {
	.topSocialUl  {left: 20px;margin-top: 45px; }
	.topSocialUl li a {padding:15px 10px; font-size: 16px; }
}

/* common css for below screen 1199 */
@media only screen and (max-width: 1199px) {
	.cstbtn{    padding: 0 25px; line-height: 45px; height: 45px;}
	.comSpace-120{padding-top: 70px;padding-bottom: 70px;}
	.sectionTitle .subTitle {font-size: 18px;}
	.sectionTitle .mainTitle{    font-size: 30px; margin-top: 15px;padding-bottom: 20px; margin-bottom: 10px;}
	/*Header css start*/
	.topMenuul li:not(:last-child) {margin-right: 30px; }
	/*Header css end*/

	/*Banner section css start*/
	.bannerContent .bannerColorTitle {font-size: 26px; }
	.bannerContent .bannerTitle {font-size: 35px; margin-top: 10px; }
	.bannerContent span{font-size: 16px;}
	.bannerContent p{font-size: 14px;}
	.bannerContent .cstbtn{margin-top: 20px;}
	/*Banner section css end*/

	/*Service section css start*/
	.singleService {padding: 25px;height: calc(100% - 25px); }
	.singleService .serviceIcon i {width: 70px; height: 70px; line-height: 70px; font-size: 34px;}
	.singleService .serviceContent {margin-top: 20px; }
	.singleService .serviceContent p {margin-top: 10px;}
	/*Service section css end*/

	/*Testimonial section css start*/
	.testimonialInner .testimonialAuthor img {width: 120px; border-radius: 30px; border-bottom-right-radius: 0; }
	/*Testimonial section css end*/

	 /*Our Client section css start*/ 
	.purClientLogoDiv img{ opacity: 1; -webkit-filter: grayscale(0); filter: grayscale(0); }
	 .purClientLogoDiv img {    max-height: 129px;}
	  /*Our Client section css end*/ 
}

/* common css for below screen 991 */
@media only screen and (max-width: 991px) {
	.comSpace{padding-top: 45px;padding-bottom: 45px;}
	.comSpace-120 {padding-top: 45px; padding-bottom: 45px; }
	.topMenuul li.active a{color: #00a78e}


	/*header css start*/
	.menuIcon{display: inline-block; position: relative; overflow: hidden; width: 27px; height: 20px; cursor: pointer;  margin-left: 0px;}
	.menuIcon span {height: 3px; background: #fff; width: 27px; float: left; transition: all .3s; -webkit-transition: all .3s; position: absolute; top: 50%; right: 0; }
	.menuIcon span:after, .menuIcon span:before {content: ""; height: 3px; background: #fff; position: absolute; right: 0; }
	.menuIcon span:before {width: 27px; top: -7px; transition: all .3s; -webkit-transition: all .3s; }
	.menuIcon span:after {width: 27px; bottom: -7px; transition: all .3s; -webkit-transition: all .3s; }
	.menuIcon.menuCloseActive span{background: transparent;}
	.menuIcon.menuCloseActive span:after, .menuIcon.menuCloseActive span:before{width: 24px;}
	.menuIcon.menuCloseActive span:after {transform: translateY(-8px) rotate(-45deg); }
	.menuIcon.menuCloseActive span:before {transform: translateY(6px) rotate(45deg); }
	.topMenu {position: fixed; padding: 0px 0 20px; -webkit-transition: .5s ease-in-out all; -moz-transition: .5s ease-in-out all; -ms-transition: .5s ease-in-out all; transition: .5s ease-in-out all; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); z-index: -1; height: 100%; width: 320px; text-align: left; opacity: 0; top: 0; right: -320px; background: #fff; }
	.openMenu {right: 0; transition: .5s ease-in-out all; -webkit-transition: .5s ease-in-out all; -moz-transition: .5s ease-in-out all; -ms-transition: .5s ease-in-out all; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); visibility: visible; opacity: 1; background: #fff; z-index: 999; }
	.sticky .menuIcon span,.sticky .menuIcon span:after, .sticky .menuIcon span:before{    background-color:#00a78e;}
	.topMenuul{flex-wrap: wrap;overflow-y: auto; height: 100%; align-content: flex-start;}
	.topMenuul li{width: 100%}
	.topMenuul li:not(:last-child) {margin-right: 0px; border-bottom: 1px solid #dedede;}
	.topMenuul li a{width: 100%;color: #070606;    padding: 10px 20px;}
	.menuCloseDiv {text-align: right;padding:15px;}
	.menuClose{display: inline-block; position: relative; overflow: hidden; width: 27px; height: 20px; cursor: pointer;  margin-left: 15px;}
	.menuClose span {height: 3px; background: #070606; width: 27px; float: left; transition: all .3s; -webkit-transition: all .3s; position: absolute; top: 50%; right: 0; }
	.menuClose span:after, .menuClose span:before {content: ""; height: 3px; background: #070606; position: absolute; right: 0; }
	.menuClose span:before {width: 27px; top: -7px; transition: all .3s; -webkit-transition: all .3s; }
	.menuClose span:after {width: 27px; bottom: -7px; transition: all .3s; -webkit-transition: all .3s; }
	.menuClose.menuCloseActive span{background: transparent;}
	.menuClose.menuCloseActive span:after, .menuClose.menuCloseActive span:before{width: 24px;}
	.menuClose.menuCloseActive span:after {transform: translateY(-8px) rotate(-45deg); }
	.menuClose.menuCloseActive span:before {transform: translateY(6px) rotate(45deg); }
	.topMenuul li a.active {color: #00a78e; }
	/*header css end*/

	/*About Ua section css start*/
	.aboutImage{margin-top: 0;}
	/*About Ua section css end*/

	/*Buddies section css start*/
	.buddiesWrap .buddiesTitle {width: 100%; }
	.buddiesWrap .bdNo {display: none;}
	.buddiesWrap .buddiesContent{width: 100%;    padding: 15px; margin-top: 11px;}
	.buddiesWrap .buddiesContent{}
	.buddiesDiv::before{display: none;}
	.buddiesDiv .row:nth-child(even) .buddiesTitleDt{padding-left: 20px; padding-right:0px;}
	.buddiesWrap{background-color: #fff; border: 2px solid #00a78e; padding: 20px; border-radius: 7px; }
	/*Buddies section css end*/

	/*Our Client section css start*/
	 .purClientLogoDiv img {    max-height: 79px;}
	/*Our Client section css end*/ 

	/* Contact Us section css start */
	.contactUsBox{padding: 40px}
	.contactUsMain::before{background-size:contain;}
	/* Contact Us section css end */

	/* Footer section css start */
	.ftFirstCol{margin-bottom: 30px;}
	.mainFooter {padding-top: 45px; padding-bottom: 45px; }
	/* Footer section css end */

}

/* common css for below screen 767 */
@media only screen and (max-width: 767px) {
	.container{max-width: 100%;}
	.sectionTitle .subTitle {font-size: 16px; }
	.sectionTitle .mainTitle {font-size: 24px;  padding-bottom: 15px;margin-top: 9px; margin-bottom: 15px;  }


	/*Header css start*/
	.navBar {padding: 15px 0;}
	.menuIcon span, .menuIcon span:after, .menuIcon span:before {background-color: #293651; }
	.sticky .menuIcon span, .sticky .menuIcon span:after, .sticky .menuIcon span:before {background-color: #00a78e; }
	/*Header css end*/

	/*Banner section css start*/
	.bannerContent {margin-top: 30px !important;padding-bottom: 30px;}
	.bannerContent .bannerColorTitle {font-size: 20px; }
	.bannerContent .bannerTitle {font-size: 35px; margin-top: 10px; }
	.banner_image{margin-top: 30px !important;display: none;}
	.aboutImage{max-width: 351px; margin: auto;}
	.aboutImage .aboutShape {width: 100%; height: 380px; }
	.aboutImage .aboutShape::after{width: 105.7%;top: 20px;}
	/*Banner section css end*/

	/*Testimonial section css start*/
	.testmonialSlider .slick-dots{margin-top: 35px;}
	/*Testimonial section css start*/

	 /*Our Client section css start*/
	 .purClientLogoDiv li {flex-basis: 33.33%; padding: 17px 10px; }
	 .purClientLogoDiv img {max-height: 60px; max-width: 90px; }
	  /*Our Client section css end*/ 

	/* Contact Us section css start */
	.contactUsBox{padding: 20px}
	.contactUsMain{padding-top: 45px;padding-bottom: 45px;}
	/* Contact Us section css end */

	/*Footer Css start*/
	.mainFooter{padding-top: 30px;}
	.ftCol:not(:first-child){padding-left: 0;padding-right: 0; border-bottom: 1px solid #cacaca;}
	.ftSecCol{border-top: 1px solid #cacaca;}
	.footerTitle {font-size: 15px; padding: 15px 40px 15px 15px; margin-bottom: 0; position: relative; }
	.footerTitle.footerMinus{ background: #e0e0e0;}
	.footerBody {display: none; padding: 15px; }
	.mainFooter{padding-bottom: 0}
	.footerTitle:after{content: ''; position: absolute; right: 15px; top: 24px; background: #00a78e; width: 14px; height: 2px;}
	.footerTitle:before{content: ''; position: absolute; right: 21px; top: 18px; background: #00a78e; width: 2px; height: 14px;}
	.footerTitle.footerMinus:before{opacity: 0; visibility: hidden;}
	/*Footer Css end*/
}


/* common css for below screen 600 */
@media only screen and (max-width: 600px) {
/*Testimonial section css start*/
	.testimonialInner .testimonialContent{padding-left: 0; margin-top: 25px; }
	/*Testimonial section css end*/
}

/* common css for below screen 479 */
@media only screen and (max-width: 479px) {

	/*Service Section css start*/
	.singleService{margin-top: 0;}
	.serviceDiv [class^="col-"]:not(:last-child) .singleService{margin-bottom: 30px;}
	/*Service Section css end*/

	/*Buddies section css start*/
	.buddiesTitleDt,.buddiesDiv .row:nth-child(even) .buddiesTitleDt {padding-top: 20px;padding-left: 0;}
	/*Buddies section css end*/

	 /*Our Client section css start*/
	 .purClientLogoDiv li {padding: 0 15px; margin-bottom: 16px; }
	 .purClientLogoDiv img {max-height: none; }
	  /*Our Client section css end*/

}


/* common css for below screen 350 */
@media only screen and (max-width: 350px) {}


/* common css for screen size between 480 to 767 */
@media only screen and (min-width: 480px) and (max-width: 767px) {}


/* common css for screen size between 568 to 767 */
@media only screen and (min-width: 568px) and (max-width: 767px) {}


/* common css for screen size between 600 to 767 */
@media only screen and (min-width: 600px) and (max-width: 767px) {}

/* common css for screen size between 768 to 1199 */
@media only screen and (min-width: 768px) and (max-width: 1199px) {}


/* common css for screen size between 768 to 1023 */
@media only screen and (min-width: 768px) and (max-width: 991px) {}


/* common css for screen size between 1024 to 1199 */
@media only screen and (min-width: 992px) and (max-width: 1199px) {}

/* common css for screen size between 375 to 812 portrait */
@media only screen and (min-width: 375px) and (max-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}

/* common css for screen size between 375 to 812 landscape*/
@media only screen and (min-width: 375px) and (max-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}