/* Comment out for launch .barba-wrapper { margin-top: 80px; } 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-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; padding: 0; vertical-align: baseline;} html.js{margin-top: 0 !important;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;} audio, canvas, video {display: inline-block; max-width: 100%;} html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; height: 100%; box-sizing: border-box; scroll-behavior: smooth;} [id] { scroll-margin-top: 100px; } */ .blog-page-mitratech-wrapper, .new-product-page { a{color: #021849; text-decoration: none; transition: all 0.4s ease; text-decoration: none !important; cursor: pointer; } a:focus {outline: none;} a:hover, a:active {outline: 0;} a:hover{color: #021849;} .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{clear: both; margin: 0; letter-spacing: 0; color: #021849; font-weight: 700; text-transform: none;} .h1, h1{font-size: 62px; line-height: 70px; letter-spacing: -0.62px; margin-bottom: 14px;} .h2, h2{font-size: 44px; line-height: 50px; margin-bottom: 30px;} .h3, h3{font-size: 40px; line-height: 46px; margin-bottom: 30px;} .h4, h4{font-size: 36px; line-height: 55px; margin-bottom: 30px;} .h5, h5{font-size: 24px; line-height: 35px; letter-spacing: 0px; font-weight: 600; margin-bottom: 12px;} .h6, h6{font-size: 22px; line-height: 33px; margin-bottom: 14px;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: #021849;} h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{color: #021849;} h1 span{position: relative; z-index: 0; display: inline-block;} .h2 span, h2 span{position: relative; z-index: 0;} h1 span svg{left: 0; top: -11px; position: absolute;} .h2 span svg, h2 span svg{left: -9px; bottom: -16px; position: absolute;} address{font-size: 1.125rem; line-height: 1.5rem; margin-bottom: 24px;} abbr[title] {border-bottom: 1px dotted #021849; cursor: help;} b, strong {font-weight: 700;} cite, dfn, em {font-style: italic;} i {font-style: normal;} p {margin-bottom: 1.625rem; color: #001949; } p:last-child{margin-bottom: 0;} code, kbd, tt, var, samp, pre {font-size: 0.938rem; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; line-height: 1.6;} pre {border: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 24px; max-width: 100%; overflow: auto; padding: 12px; white-space: pre; white-space: pre-wrap; word-wrap: break-word;} blockquote, q{-webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; } blockquote{padding: 40px 40px 30px 100px; margin: 0px 0px 48px 20px; font-size: 22px; line-height: 29px; font-weight: 400; letter-spacing: normal; box-shadow: 0px 10px 25px #0000000D; position: relative; font-family: "Poppins", Helvetica, Sans-serif; font-style: normal; } blockquote::before{content: "“"; font-size: 55px; line-height: 39px; position: absolute; font-weight: 700; left: 40px; top: 45px; } .general-default-article blockquote::before, .general-default-article blockquote::after{display: none;} .general-default-article blockquote p::before{content: "“";} .general-default-article blockquote p::after{content: "”";} blockquote cite, blockquote small {font-size: 1rem;} blockquote em, blockquote i, blockquote cite {font-style: normal;} small{font-size: 0.75rem; line-height: 1.25rem; letter-spacing: -0.24px; display: block;} big {font-size: 125%;} sup, sub {font-size: 0.625rem; letter-spacing: -0.18px; height: 0; line-height: 0; position: relative; vertical-align: baseline;} sup {bottom: 1ex;} sub {top: 0;} dl{margin-bottom: 0px; font-size: 22px; line-height: 30px; } dl:last-child{margin-bottom: 0;} dl dt::before{width: 29px; height: 1px; margin-right: 11px; background-color: var(--foreground); display: inline-block; vertical-align: middle;} blockquote dl dt::before{background-color: #ffffff;} dd {margin-bottom: 24px;} ul {list-style: none; margin: 0 0 26px 0px; padding-left: 0px; } ul > li {counter-increment: li; position: relative; margin-bottom: 15px; padding-left: 28px;} ul > li:before{ position: absolute; font-family: "Font Awesome 6 Free"; content: "\f00c"; width: 16px; height: 16px; font-size: 14px; color: #002453; padding-left: 0; background: transparent; border-radius: 0; left: 0; top: 2px; font-weight: 900; } li > ul {margin: 25px 0 26px 25px;} ol {counter-reset: section; list-style: none; margin: 0 0 28px 70px; } ol > li {counter-increment: li; position: relative; margin-bottom: 20px;} ol > li:before { color: var(--foreground); counter-increment: section; content: counter(section, decimal); top: 5px; left: -75px; position: absolute; font-weight: 500; font-size: 30px; line-height: normal; color: #fc552e; border: 4px solid #fc552e; border-radius: 50%; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.29); } li > ol {margin: 25px 0 26px 25px;} img {-ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; max-width: 100%; height: auto;} figure {margin: 0;} fieldset {border: none; margin: 0; padding: 0;} legend {white-space: normal;} table, th, td {border: 1px solid rgba(0, 0, 0, 0.1);} table {border-collapse: separate; border-spacing: 0; border-width: 1px; margin: 0 0 30px; max-width: 100%; width: 100%;} table tr td:first-child {text-align: left;} th {font-family: "Poppins", Helvetica, Sans-serif; font-weight: 800; border-width: 0; padding: 14px 15px 13px; background-color: #021849; color: #ffffff; border-radius: 0;} th span.icon{font-size: 0.875rem; margin-left: 4px; top: 0px; position: relative; } td {border-width: 0; padding: 13px 15px 11px; text-align: center; border-bottom: 1px solid rgba(0,0,0,.1); vertical-align: middle; font-size: 1.05rem; line-height: 1.5rem;} table tr:nth-child(even) td{background-color: rgba(0,0,0, 0.02);} table tr:last-child td{border-bottom: none;} caption, th, td {text-align: left;} del {color: var(--black);} hr{margin: 0 0 31px; height: 4px; width: 96px; background-color: #021849; border-radius: 2px; display: block; border: none;} hr.dot-line{ width: 100%; height: 2px; display: block; background-image: linear-gradient(to right,#021849 25%,rgba(255,255,255,0) 0); background-position: bottom; background-size: 8px 2px; background-repeat: repeat-x; border: none; border-radius: 0; background-color: transparent; opacity: 0.5;} ::selection {background-color: #021849; color: #ffffff;} ::-moz-selection {background-color: #021849; color: #ffffff;} } /* End Commented Style for Launch */ .blog-page-mitratech-wrapper, .new-product-page { .footer-cta-banner-wrap { margin: 50px 0px 0px; box-shadow: 3px 3px 6px #00000029; } } html.desktop.windows.chrome.chrome-133\.0\.0\.0.fontawesome-i2svg-active.fontawesome-i2svg-complete { margin-top: 0 !important; } .footer a .fa-stack-2x.fa-stack-2x { font-size: 1em !important; } .page-template-template-modules { main#barba-wrapper { overflow: unset; } } .blog-page-mitratech-wrapper { margin-top: 80px !important; } .front-page-mitratech-wrapper, .blog-page-mitratech-wrapper, .new-product-page { margin-top: 80px; .h3, h3{font-size: 26px; line-height: 32px; margin-bottom: 30px;} /* Buttons */ .button, button, body .frm_forms .frm_form_fields .frm_submit button[type="submit"]{ font-size: 13px; line-height: 14px; letter-spacing: 0.3px; padding: 14px 16px 15px; font-family: "Poppins", Helvetica, Sans-serif; font-weight: 400; display: inline-block; background: #fc552e; color: #fff; border: 2px solid #ffffff; border-radius: 32px; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.29)!important; pointer; vertical-align: middle; text-decoration: none; text-transform: uppercase; text-align: center; outline: 0; position: relative; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; text-orientation: mixed; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; transition: all 0.4s ease; margin: 0;} .button:hover, button:hover, body .frm_forms .frm_form_fields .frm_submit button[type="submit"]:hover{ background: #004398 !important; color:#ffffff; text-decoration: none; } /*.button.btn-transparent{background: transparent; border-color: var(--capri-ocean); color: var(--capri-ocean);}*/ .button.btn-transparent:hover{background: #004398; border-color: #004398; color:#ffffff;} .btn-transparent { color: #ED5B3E; font-size: 17px; line-height: 27px; letter-spacing: 0.3px; padding: 14px 48px 15px; font-weight: 700; display: inline-block; background-color: transparent; border: 2px solid #ED5B3E; border-radius: 32px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.29) !important; vertical-align: middle; text-decoration: none; transition: all 0.4s ease; } .btn-transparent:hover {background: #004398; border-color: #004398; color:#ffffff;} .btn-transparent.white-text{color: #ffffff;} .btn-green.btn-transparent{border-color: #004398;} .btn-green.btn-transparent:hover{background: #004398; color:#ffffff;} .btn-green.green-text{color: #004398;} .btn-white.btn-transparent{border-color: #ffffff;} .btn-white.btn-transparent:hover{background: #004398; color:#ffffff;} .no-bg { background: transparent; } .btn-aquamarine.btn-transparent{border-color: var(--aquamarine); color: var(--aquamarine);} .btn-aquamarine.btn-transparent:hover{background: #004398; color:#ffffff;} .button.btn-sm{font-size: 14px; line-height: 14px; letter-spacing: 0.18px; padding: 11px 16px 11px;} .button.btn-lg{padding: 14px 29px 15px;} .btn-link.green-text{color: #004398;} .btn-link.green-text::after{background-image: url('../arrow-right-green.html');} /* Responsive images. Fluid images for posts, comments, and widgets */ embed, iframe, object, video{margin: 0; max-width: 100%; border-radius: 0; display: block; object-fit: cover;} p > embed, p > iframe, p > object, span > embed, span > iframe, span > object {margin-bottom: 0;} /* iframe { box-shadow: 0px 0px 12px 0px #024b9c; } */ /* Alignment */ .alignleft {float: left;} .alignright {float: right;} .aligncenter {display: block; margin-left: auto; margin-right: auto; text-align: center;} .hide {display: none;} img.alignnone{margin: 25px 0 25px;} img.alignleft{margin: 25px 25px 25px 0;} img.alignright{margin: 25px 0 25px 25px;} img.aligncenter{margin: -75px auto 40px; float: right;} /* Genericons */ .clearfix {clear: both;} * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /*-- flex css starts here --*/ .flex{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; width: 100%; } .flex-vcenter{-webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .flex-content-center{-ms-justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; } .flex-center{-webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; } .flex-nowrap{flex-wrap: nowrap; } .flex-end{align-items: flex-end;} .flex-start{align-items: flex-start;} .flex-space-b { justify-content:space-between; } .flex-space-c { justify-content:center; } .row-reverse{flex-direction: row-reverse;} .text-center { text-align:center; } /*-- custom css starts here --*/ body{height: 100vh; font-family: "Poppins", Helvetica, Sans-serif; font-size: 16px; line-height: 24px;} .tabInContent{max-width:calc(50% - 10px)} .tabInContent.fullwidth { max-width: 100%; } .tabInImg{max-width:calc(50% - 10px)} .topbar {width: 100%; text-align: center; padding: 15px; background: #004398; color: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); transition: background-color 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; margin-top: 0px !important; position: relative; z-index: 2; } .topbar a, .topbar a:hover { color: #fff; } .topbar a > span { display: block; } header.header-main { position: fixed; width: 100%; z-index: 100; top: 0; background-color: #fff; border-bottom: 1px solid #dedede; } ul.main-menu > li.nav-products > ul > li > a > img { max-width: 45px; } /* media css starts here */ @media only screen and (min-width: 1200px){ .container.lg{max-width: 1440px; padding: 0 2rem; margin: auto; } .header{gap: 32px; position: relative;} .logo{width: 220px;} .header-right{flex: 1;} ul.main-menu{margin: 0; gap: 10px; flex: 1;} ul.main-menu > li::before{display: none;} ul.main-menu > li{margin: 0; padding: 0; } ul.main-menu > li > a{padding: 28px 10px; display: block; font-size: 16px; font-family: "Poppins", Helvetica, Sans-serif; text-decoration: none; } ul.main-menu > li:hover > a, ul.main-menu > li > a:hover{background-color: #EFF4FA;} ul.main-menu > li > ul{display: block; visibility: hidden; opacity: 0; min-width: 250px; top: 100%; margin: 0; position: absolute; background: #fff; box-shadow: 0 1px 4px #dadada; transition: all 0.4s ease; padding-left: 20px; } ul.main-menu > li.simple-menu > ul { padding-left: 0px; } ul.main-menu > li:hover > ul{visibility: visible; opacity: 1;} ul.main-menu > li > ul > li{margin: 0; padding-left: 0px; } ul.main-menu > li > ul.sub-menu > li > a:hover { border-radius: 0; } ul.main-menu > li > ul > li::before {display: none;} ul.main-menu > li > ul > li > a{ padding: 15px 20px; border-bottom: 0px solid #EFF4FA; font-size: 14px; display: block; color: #001949; font-weight: 600;font-family: "Poppins", Helvetica, Sans-serif;} ul.main-menu > li > ul > li > a:hover{background-color: #EFF4FA; -webkit-border-top-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } ul.main-menu > li.nav-products{position: static;} ul.main-menu > li.nav-products > ul{width: calc(100vw - 60px); left: -50vw; margin-left: calc(50% + 30px); opacity: 0; visibility: hidden; transition: all 0.4s ease; min-height: 480px; display: none; } ul.main-menu > li.nav-products:hover > ul{visibility: visible; opacity: 1; text-decoration: none; z-index:1; display: block; } ul.main-menu > li.nav-products > ul > li > ul{visibility: hidden; opacity: 0; padding: 0px 32px 20px; margin: 0 0 0 420px; top: 0; left: 0%; width: calc(100% - 420px); background-color: #fff; border-left: 1px solid #EFF4FA; position: absolute; z-index: 1; gap: 0; display: flex; flex-wrap: wrap; transition: all 0.4s ease;} ul.main-menu > li.nav-products > ul > li{position: static;} ul.main-menu > li.nav-products > ul > li > a{max-width: 420px; margin-bottom: 10px; } ul.main-menu > li.nav-products > ul > li.open > a{ background-color: #EFF4FA; text-decoration: none; -webkit-border-top-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } ul.main-menu > li.nav-products > ul > li:hover > ul, ul.main-menu > li.nav-products > ul > li.open > ul{visibility: visible; opacity: 1;} ul.main-menu > li.nav-products > ul > li > ul > .flex-menu-text li::before{display: none;} ul.main-menu > li.nav-products > ul > li > ul > .flex-menu-text li{margin-bottom: 0; flex: 0 0 calc(50% - 16px); padding: 5px 10px; } ul.main-menu > li.nav-products > ul > li > ul > .flex-menu-text li:hover { border-radius: 4px; background-color: #EFF4FA; } ul.main-menu > li.nav-products > ul > li > ul > .flex-menu-text li > a{font-size: 14px; color: #001949; font-weight: 600; text-decoration: none; } ul.main-menu > li.nav-products > ul > li > ul > .flex-menu-image li .menu-image-title{font-size: 16px; color: #001949; font-weight: 600; text-align: left; padding: 20px 0px 10px; display: block; } ul.main-menu > li.nav-products > ul > li > ul > .flex-menu-image li img.menu-image{width: 100%; max-height: 150px; overflow: hidden; object-fit: cover; object-position: center; padding: 0px; } .menu-description{display: block; font-size: 14px; color: #7b7b7b; border: 0; } .product-menu-image .menu-description{padding: 10px; background-color: #f0f4fa;} .submenu-title {padding: 13px 10px; margin-bottom: 15px; border-bottom: 1px solid #d2dbe3; justify-content: space-between; align-items: center; } .submenu-title:hover { background: #EFF4FA; border-radius: 4px; } .submenu-title strong{color: #333333; font-size: 16px; } .submenu-title a{font-size: 14px; color: #7b7b7b; font-weight: 300; text-transform: capitalize;} .submenu-title > a { align-items: center; position: relative; width:100%; display: flex; } .submenu-title > a > span { position: absolute; right: 0px; -webkit-transition: all .35s cubic-bezier(.4,0,.2,1); transition: all .35s cubic-bezier(.4,0,.2,1);} .submenu-title > a > span:hover { color: #001949; } .submenu-title > a > img { height: 46px; width: auto; margin-right: 15px; } .view-link { color: #fc552e; display: block; margin-top: 10px; } .view-link:hover { color: #001949; } .flex-menu-text{flex: 0 0 calc(100% - 334px); padding-right: 10px; gap: 5px 10px;} .flex-menu-image{flex: 0 0 334px; padding-left: 16px;border-left: 1px solid #d2dbe3;} span.read-more{margin-top: 32px; display: inline-block; font-size: 14px; color: #fc552e; font-weight: 600; flex: 0 0 100%; } .product-tile { padding: 20px 24px 5px; font-size: 20px; line-height: 24px; margin: 0; display: block; border-bottom: 1px solid #d2dbe3; margin-bottom: 10px; } .product-tile h4 { margin: 0px; } .inline-items{flex: 0 0 300px;} ul.social-share{margin: 0; gap: 10px; flex: 1;} ul.social-share li::before{display: none;} ul.social-share li{margin: 0 5px; padding-left: 0px; } .demo-btn{flex: 0 0 200px;} } @media only screen and (max-width: 1299px) and (min-width: 1200px){ ul.main-menu{gap: 0;} } @media only screen and (max-width: 1199px) and (min-width: 200px){ .header{gap: 32px; padding: 16px 0; position: relative;} .logo{width: 220px; position: relative; z-index: 2;} .humburger-btn {width: 23px; height: 23px; right: 4px; top: calc(50% + 4px); transform: translateY(-50%); cursor: pointer; display: block; position: absolute; z-index: 850;} .humburger-btn span{width: 23px; height: 3px; margin: 0; top: 0; display: block; background-color: #001133; position: absolute; transition: all 0.5s ease;} .humburger-btn span:nth-child(2){top: 8px;} .humburger-btn span:nth-child(3){top: 16px;} .humburger-btn.active span:nth-child(1){top: calc(50% - 5px); transform: rotate(45deg);} .humburger-btn.active span:nth-child(3){top: calc(50% - 5px); transform: rotate(-45deg);} .humburger-btn.active span:nth-child(even){opacity: 0;} .header-right{ padding: 80px 20px 80px; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(100%); display: block; position: fixed; background-color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;} .header-right.open{transform: translateX(0); overflow-x: hidden; } ul.main-menu{margin: 0 0 40px; display: block;} ul.main-menu > li::before{display: none;} ul.main-menu > li{margin: 0; border-bottom: 1px solid #bebebe;} ul.main-menu > li.sib{opacity: 0; display: none; } ul.main-menu > li > a{padding: 16px 20px 16px 10px; display: block; font-size: 16px; font-family: "Poppins", Helvetica, Sans-serif; position: relative;} ul.main-menu > li > a.active{padding-left: 32px;} ul.main-menu > li > a.active:hover{background-color: transparent; color: #fc552e;} ul.main-menu > li > a:hover::after{animation: arrowMove 0.5s linear forwards;} @keyframes arrowMove{ 0%{transform: translateY(-50%) translateX(0);} 50%{transform: translateY(-50%) translateX(-10px);} 100%{transform: translateY(-50%) translateX(0);} } ul.main-menu > li > a::after{ display: block; font-family: "Font Awesome 6 Sharp"; font-style: normal; font-weight: 200; content: "\f178"; position: absolute; right: 5px; font-size: 20px; top: 50%; transform: translateY(-50%); } ul.main-menu > li > a.active::after{left: 0; right: auto; content: "\f177";} ul.main-menu > li > a:hover{background-color: #EFF4FA; text-decoration: none;} ul.main-menu > li > ul{padding: 0 0 20px; display: block; transform: translateX(100%); left: 100%; margin: 0; position: absolute; background: #fff; transition: all 0.5s ease;} ul.main-menu > li > ul.open{transform: translateX(0); position: static;} ul.main-menu > li > ul > li{margin: 0; border-bottom: 1px solid #EFF4FA; } ul.main-menu > li > ul > li:last-child{border-bottom: none;} ul.main-menu > li > ul > li::before{display: none;} ul.main-menu > li > ul > li > a{ padding: 15px 20px; font-size: 14px; display: block; color: #001949; font-weight: 600;font-family: "Poppins", Helvetica, Sans-serif; text-decoration: none; } ul.main-menu > li > ul > li > a:hover{background-color: #EFF4FA;} ul.main-menu > li > ul > li > ul{display: none;} ul.social-share{margin: 0; gap: 10px; flex: 1;} ul.social-share li::before{display: none;} ul.social-share li{margin: 0; padding-left: 0px; } .demo-btn{flex: 0 0 200px;} /* .barba-wrapper { margin-top: 59px; } */ .topbar { margin-top: 0px; font-size: 17px; } } @media only screen and (min-width: 1024px) { .container { max-width: 100%; padding: 0 70px; } .product-hero-cta-container { max-width: 65%; } .low-width { max-width: 80%; margin: auto; } .portfolioWrap.low-width { max-width: 80%; margin: 50px auto; } } @media only screen and (min-width: 1640px) { .container { max-width: 1920px; padding: 0 140px; margin: 0 auto; } } @media only screen and (max-width: 1023px) and (min-width: 768px) { .container { max-width: 100%; padding: 0 30px; } } @media only screen and (max-width: 767px) and (min-width: 200px) { .container { max-width: 100%; padding: 0 20px; } } /* Banner CSS Start */ .hero-main { padding: 0px 0px; position: relative; margin-top: 50px; background: url(../png/bg-1440x450-1.png) no-repeat; background-size: cover; background-position: bottom center; } body.no-topbar .hero-main { margin-top: 150px; } .hero-wrap { margin: 0; position: relative; z-index: 2; align-items: center; } .hero-text { /*max-width: 695px;*/ width: 50%; position: relative; padding: 30px 30px; border-radius: 10px; margin: 2.5em 0em 2.5em; } .hero-content-right { /* width: calc(100% - 695px); */ width: 50%; text-align: center; position: relative; text-align: right; } /* .blogbg .hero-text { margin: 20px 0px 10px; } */ /* .hero-main:before, .hero-text:after, .hero-main:after, .hero-content-right:after, .hero-content-right:before { content: ''; background-size: contain !important; z-index: -1; position: absolute; } /*.hero-main:before { height: 215px; width: 515px; top: 80px; background-size: auto !important; left: 0px; z-index:1; background: url(https://mitratech.com/wp-content/uploads/Mitratech-Background-Texture_Green_Top-Mid-Hex-1.png) no-repeat; /* background: url(''); } .hero-text:after { height: 350px; width: 355px; bottom: -90px; right: 0; background: url(/wp-content/uploads/2024/04/Mitratech-Background-Texture_Green_Mid-Left-Circles-1.png) no-repeat; } .hero-main:after { width: 187px; height: 180px; left: 0px; bottom: -55px; z-index: 1; background: url(/wp-content/uploads/2024/04/Mitratech-Background-Texture_Green_Top-Middle-DotGrid.png) no-repeat; background: url(https://mitratech.com/wp-content/uploads/Mitratech-Background-Texture_Green_Left-Middle-DotGrid.png) no-repeat; } .hero-content-right:before { width: 259px; height: 327px; right: 0px; top: -180px; background: url(https://mitratech.com/wp-content/uploads/Mitratech-Background-Texture_Green_Top-Right-GradientSlash.png) no-repeat; } .hero-content-right:after { width: 259px; height: 327px; left: 0px; bottom: -237px; background: url(https://mitratech.com/wp-content/uploads/Mitratech-Background-Texture_Green_Left-Middle-DotGrid.png) no-repeat; } */ .hero-text .intro-top-text { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 15px; } .hero-text .intro-top-text img { max-width: 55px; height: 54px; margin-right: 10px; } .hero-text .intro-top-text span { font-size: 24px; color: #001949; line-height: 35px; font-weight: 500; } .hero-text .intro-wrap h1 { font-size: 40px; line-height: 40px; color: #001949; font-weight: 700; margin-bottom: 15px; } .hero-text .intro-wrap p { font-size: 18px; font-weight: 300; color: #7F7F7F; line-height: 30px; max-width: 580px; margin-bottom: 20px; } .hero-text.hero-text-full .intro-top-text { justify-content: center; } .hero-text.hero-text-full .intro-wrap h1 { text-align: center; } .hero-text.hero-text-full .intro-wrap p { max-width: 100%; } .hero-text h1 { font-size: 45px; line-height: 55px; letter-spacing: 0px; font-weight: 500;} .hero-text h1 span { font-size: 40px; line-height: 57px; letter-spacing: 0px; font-weight: 600; color: #0073EA; display: inline; margin-left: 10px; } body.hrc .hero-text h1, body.hrc .hero-text h1 > span { font-size: 65px; } body.clc .hero-text h1 { font-size: 60px; } .hero-button { padding-top: 10px; } .hero-text p { font-size: 19px; line-height: 29px; letter-spacing: 0px; font-weight: 400; color: #001949; margin-top: 10px; max-width: 650px; } .demo-btn.button { border-color: #ffffff; font-size: 15px; line-height: 14px; letter-spacing: 0.3px; padding: 15px 30px; font-family: "Poppins", Helvetica, Sans-serif; font-weight: 500; display: inline-block; background: #fc552e; border: 2px solid #ffffff; border-radius: 32px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.29) !important; vertical-align: middle; text-decoration: none; text-transform: uppercase; text-align: center; outline: 0; } .learn-btn { color: #2699FB; font-size: 15px; margin-left: 25px; font-weight: 600; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; } .learn-btn i { margin-left: 15px; font-size: 16px; } .hero-text.hero-text-full { max-width: 970px; margin: auto; text-align: center; width: 100%; padding: 50px 0px 70px; } .hero-text.hero-text-full p { margin: 10px auto 30px; } .hero-content-right img { max-width: 450px; margin: auto; } .hero-video iframe { margin: auto; border-radius: 10px; } .hero-accordion .accordion-wrapper { max-width: 500px; margin: auto; } .hero-accordion .accordion { text-align: left; margin-bottom: 15px; box-shadow: 0 4.4px 12px -1px rgba(18.999999999999964, 15.999999999999979, 33.99999999999995, 0.11); border-radius: 5px; background-color: #ffffff; } .hero-accordion .accordion-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; padding-right: 20px; } .hero-accordion .accordion-icon { background-color:#F2F7FD; width:23px; height:23px; display:flex; justify-content:center; align-items:center; border-radius:50%; color:#001949; flex-shrink:0; } .hero-accordion .accordion-question { cursor:pointer; background-color:#fff; padding:20px; font-size:18px; font-weight:500; color:#7f7f7f; margin-bottom:0px; } .hero-accordion .accordion-answer { padding:0px 20px 20px; } .hero-accordion .accordion-content { overflow:hidden; height:0; transition:0.4s ease-in-out; } .blogbg .hero-content-right img { border-radius: 20px; box-shadow: 0px 30px 25px #0000000D; } .blogbg.hero-main { background-position: center center; background-image: url(../png/light-background-1920x600-1.png); } /* Banner CSS End */ /* BUbar Section CSS Start */ body.no-banner .BUbar { margin-top: 80px;} .BUbar { width: 100%; margin: 0; } .BUbar ul { margin: 0 0 0px; padding: 0; width: 100%; list-style: none; display: flex; align-items: center; justify-content: space-around; list-style: none; } .BUbar ul > li { width: 100%; text-align: center; padding-left: 0px; background: linear-gradient(202.65deg, rgba(252, 85, 46, 0.75) 0.27%, #fc552e 99.08%); box-shadow: 0px 0px 7px 0px rgba(0,0,0,.5); margin-bottom: 0px; } .BUbar ul > li:before { display: none; } .BUbar ul > li > a { font-size: 18px; font-weight: 400; color: #fff; border-radius: 0; padding: 12px 0; display: block; transition: all 0.4s ease; } .BUbar ul > li > a:hover { background-color: #024b9c !important; } /*.BUbar ul > li:nth-of-type(2n) { background: linear-gradient(202.36deg, rgba(169, 0, 98, 0.75) 0.32%, #a90062 99.07%); } .BUbar ul > li:nth-of-type(3n) { background: linear-gradient(202.36deg, rgba(96, 36, 140, 0.75) -9.8%, #60248c 88.95%); } .BUbar ul > li:nth-of-type(4n) { background: linear-gradient(202.35deg, rgba(31, 188, 213, 0.75) -11.29%, #1fbcd5 87.33%);}*/ /* BUbar Section CSS End */ /* Clients Section CSS Start */ .clients { padding: 30px 0px 5px; } .clients-wrap { margin: auto; } .clients-wrap .clients-content .clients-logo a { display: block; box-shadow: 0px 10px 25px #0000000D; } .clients-logo.slick-slide { border-radius: 10px; } .clients-wrap .clients-content .clients-logo a img { width: 100%; border-radius: 10px; max-width: 120px; padding: 10px; margin: auto;} .clients-wrap h5 { font-weight: 700; margin-bottom: 0px; } .clients-wrap .clients-content .slick-track { margin: 15px 0px 30px 0px; display: flex; align-items: center; justify-content: center; gap: 20px; } .clients-content.slick-initialized.slick-slider { position: relative; } /* .clients-content.slick-initialized.slick-slider a.slide-arrow.prev-arrow { position: absolute; left: -70px; top: 35%; } .clients-content.slick-initialized.slick-slider a.slide-arrow.next-arrow { position: absolute; right: -70px; top: 35%; } .clients-content.slick-initialized.slick-slider a.slide-arrow { background-color: #fafafa; border: 2px solid #F2F7FD; font-size: 16px; padding: 10px 16px; cursor: pointer; border-radius: 10px; } .clients-content.slick-initialized.slick-slider a.slide-arrow:hover { background: #004398 !important; color: #ffffff; } */ .clients-content ul.slick-dots button { font-size: 0px; line-height: 0; letter-spacing: 0; padding: 0; border: 0px solid #ffffff; border-radius: 50px; height: 15px; width: 14px; } .clients-content ul.slick-dots { bottom: -30px; } .clients-content ul.slick-dots li:before { display: none; } .clients-content ul.slick-dots li.slick-active button { background: #004398; } /* Clients Section CSS End */ /* Footer CSS Start */ #topBtn { position:fixed; bottom:20px; right:30px; z-index:99999999000000000; font-size:18px; border:none; outline:none; background-color:#0B59F5; color:white; cursor:pointer; padding:18px; border-radius:10px; } #topBtn:hover { background-color:#fc552e; } .footer_socials { color:white; background-color:#0B59F5; cursor:pointer; padding:10px; border-radius:30px; transition:all 0.4s ease; } ul.social-share li > a:hover .footer_socials { background-color:#fc552e; } #copyright { background-color:#001949; text-align:center; padding:15px; } #copyright p { color: #fff; } footer.main-footer { padding:70px 0px; background-color: #F2F7FD; } .footer-wrap-logo { width:260px; text-align:center; } .footer-logo-widget > div { margin-bottom:20px; } .footer-logo-widget { max-width:220px; } .footer-wrap-menu { width:calc(100% - 280px); } .footer-widgets-menu { flex-direction:row; display:flex; padding:0px 30px; } .footer-widgets-menu > .widget_nav_menu { width:25%; padding:0px 10px; } #footer-menu-widgets .menu-item-has-children > a { font-weight:700; margin-bottom:10px; } .widget_nav_menu ul.sub-menu { margin:0; } ul.sub-menu > li { margin-bottom:10px; } ul.menu > li:before, ul.sub-menu > li:before { display: none; } .footer-widgets-menu a { display:block; padding:5px 15px; font-size:16px; line-height:18px; border-radius: 5px; } ul.sub-menu > li > a:hover { background-color:#d6e6ee; color:#2c2c2c; } .footer-widgets-menu ul.sub-menu li a { padding-left: 0; } /* Footer CSS End */ /* Demo Request Page CSS Start */ .formSection { padding: 100px 0px; margin-top: 80px; position: relative; /*background-color: #F2F7FD;*/ z-index: 1; } .form-wrap { max-width: 869px; margin: auto; } .form-content h1 { font-size: 40px; line-height: 40px; color: #001949; font-weight: 700; margin-bottom: 30px; } .form-content p { font-size: 30px; font-weight: 300; color: #7F7F7F; line-height: 40px; } .demo-request-form { width: 100%; background-color: #fff; margin-top: 50px; padding: 40px; border-radius: 5px; box-shadow: 0px 4.4px 12px -1px rgba(18.999999999999964, 15.999999999999979, 33.99999999999995, 0.11); } .demo-request-form label { } .full-wrap .form-content { max-width: 100%; text-align: center; padding: 0px 60px; } .full-wrap .demo-request-form { width: 100%; } .form-halfBG .form-content { max-width: 750px; } .formSection.form-halfBG { background-color: #fff; } .formSection.form-halfBG:before { content: ''; background-color: #F2F7FD; height: 455px; width: 100%; position: absolute; z-index: -1; top: 0; left: 0; } .demoRequest .form-wrap { max-width: calc(100% - 100px); justify-content: space-around; gap: 20px; } .demoRequest .form-content { max-width: calc(100% - 580px); padding-top: 30px; } /* .demoRequest .demo-request-form { width: 380px; background-color: #fff; padding: 40px 40px; border-radius: 5px; box-shadow: 0px 4.4px 12px -1px rgba(18.999999999999964, 15.999999999999979, 33.99999999999995, 0.11); margin-top: 0px; } */ .demoRequest .demo-request-form { width: 380px; background-color: #fff; padding: 0; border-radius: 5px; box-shadow: none; margin-top: 0px; } .demoRequest .text-container { gap: 300px; flex-direction: column; } .demoRequest p.demo-hero-text { font-size: 19px; line-height: 29px; letter-spacing: 0px; font-weight: 400; color: #001949; margin-top: 10px; max-width: 583px; } /* Demo Request Page CSS End */ /* Gated Landing 6 CSS Start */ .gated-form-6-section { .gated-form-6-wrap { max-width: unset; } .gated-form-6-left-col { flex-grow: 1; max-width: 700px; } .gated-form-6-right-col { flex-grow: 1; width: unset; } } @media only screen and (max-width: 768px) { .gated-form-6-section { &.formSection { padding-top: 0px; } .gated-form-6-wrap { flex-direction: column-reverse; } .gated-form-6-left-col { padding: 40px; } .upper-content-area { padding-bottom: 16px; } } } /* Gated Landing 6 CSS End */ /* Gated Landing 7 CSS Start */ .gatedLanding7 { background: #00C0FA24; .container { padding: 100px 50px; } .gated-module-7-form { display: flex; justify-content: center; } iframe#hs-form-iframe-0 { width: 380px !important; background-color: #fff !important; padding: 40px !important; border-radius: 5px !important; box-shadow: 0px 4.4px 12px -1px rgba(18.999999999999964, 15.999999999999979, 33.99999999999995, 0.11) !important; margin-top: 0px !important; } .demo-request-form { width: 50%; margin: auto; } } @media only screen and (max-width: 768px) { .gatedLanding7 { .gated-module-7-form.demo-request-form { width: 100%; margin: auto; padding: 0px; } } } /* Gated Landing 7 CSS End */ /* Gated Landing 8 CSS Start */ .gatedLanding8 { background: #00C0FA24; margin: 100px 0px; .container { padding: 100px 50px; } .gated-landing-8-content, .gated-landing-8-form-container { flex: 50%; max-width: 50; padding: 0px 50px; } iframe#hs-form-iframe-2 { width: 380px !important; background-color: #fff !important; padding: 40px !important; border-radius: 5px !important; box-shadow: 0px 4.4px 12px -1px rgba(18.999999999999964, 15.999999999999979, 33.99999999999995, 0.11) !important; margin-top: 0px !important; } } /* Gated Landing 8 CSS End */ /* Animation Card CSS Start */ .animated-card-main { /* background: url(/wp-content/uploads/Mitratech-Web_Home-ConnectedSol-Background-1920w.png); */ background-size: contain; background-repeat: no-repeat; background-position: 100% 100%; padding-bottom: 0px; } .animated-card-main .container { max-width: 100%; padding: 50px 70px; } /* .animated-card-head { padding: 0px 200px; } */ .animated-card-main h2 { font-size: 32px !important; line-height: 48px; display: block; margin: 0px auto 40px; max-width: 960px; } .animated-card-main h2 > span { display: block; font-size: 18px; color: #1fbcd5; letter-spacing: 2px; font-weight: 500; } .animated-card-main p { font-size: 15px; line-height: 30px; color: #001949; margin-bottom: 10px; } .animated-card-wrap p { font-size: 15px; line-height: 20px; color: #001949; margin-bottom: 0px; min-height: 80px; } .animated-card-row { gap: 20px; margin: 70px 0px 40px; } .animated-card-wrap { flex: calc(25% - 15px); max-width: calc(25% - 15px); background-color: #fff; box-shadow: 0 0 10px 0 rgba(4.000000000000002, 20.000000000000032, 44, 0.19); } .animated-card-wrap h4 { font-size: 18px !important; line-height: 24px; } .animated-card-thumb-img { position: relative; height: 100%; width: 100%; } .animated-card-thumb-img img.card-thumb-icon { position: absolute; max-width: 75px; bottom: 20px; left: 15px; } .animated-card:hover img.card-thumb-icon { -webkit-animation: card-thumb-icon 1.5s ease; animation: card-thumb-icon 1.5s ease; } .animated-card-content { padding: 10px 15px; min-height: 112px; } .animated-card-content span.btnlink { font-size: 12px; margin-bottom: 0px; } .animated-card-main p.note-text { color: #7F7F7F; font-size: 14px; line-height: 25px; margin-top: 2rem; /* padding-top: 50px; */ text-align: center; } @media only screen and (max-width: 768px) { .animated-card-main { background-position: 100% 97%; } .animated-card-wrap { flex: calc(50% - 15px); max-width: calc(50% - 15px); } } @media only screen and (max-width: 480px) { .animated-card-main { background-position: bottom; } .animated-card-wrap { flex: 100%; max-width: 100%; } } /* Animation Card CSS End */ /* Featured Article CSS Start */ .featured-article-module { .number { font-size: 40px; font-family: "Poppins", Helvetica, Sans-serif; color: #ED5B3E; padding: 16px; width: 55px; } .article-column { display: flex; flex-grow: 1; } } /* Featured Article CSS End */ /* Paragraph Section CSS Start */ .paragraph-section-module { display:flex; justify-content: center; margin: 48px; .container { width: 65%; } } .paragraphSectionContent { flex-direction: column; margin-bottom: 0px; } .paragraphSectionContent h3 { color: #001949; margin-bottom: 15px; } .paragraphSectionContent p { font-size: 18px; line-height: 27px; color: #001949; font-weight: 300; } .paragraphSectionContent .paragraph-section-bg { position: relative; /* box-shadow: 0px 10px 25px #0000000D; */ /* border: 2px solid #7070701C; */ /* border-radius: 10px; */ /* background-color: #001949; */ width: 100%; height: 100%; background-size: cover; text-align: center; } .paragraphSectionContent .paragraph-section-bg:before { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: #001949; z-index: -1; border-radius: 10px; } .paragraphSectionContent .paragraph-section-content-container { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; bottom: 0; margin: 0 auto; padding: 0px; } .paragraphSectionContent .paragraph-section-bg img { border-radius: 10px; } @media only screen and (max-width: 768px) { .paragraph-section-module { .container { width: 90%; padding: 0px; } } } /* Paragraph Section CSS End */ /* Card Slider Section CSS Start */ .card-slider-module-section { margin: 40px 0px; } .card-slider-container { display: flex; } .card-slider-title-container { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; } .card-slider-module-section .card-slider-slider-container { padding: 20px 50px 50px 50px; flex-grow: 5; width: 80%; display: flex; align-items: center; justify-content: center; gap: 20px; margin: 10px 5px 20px; overflow: hidden; .learn-btn i { font-size: 12px; } .card-slider-wrap { width: 303px; height: 207px; margin: 24px; box-shadow: 0px 0px 10px -5px #024b9c; transition: 0.4s ease-out; border-radius: 10px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; padding: 22px 25px 27px; border: 1px solid #f7fafb; transform: translateX(10px); /* Added so current slide will have enough space to show box shadow*/ } .slick-arrow.prev-arrow { position: absolute; bottom: 0px; left: 80px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #FAFAFA; } .slick-arrow.next-arrow { position: absolute; bottom: 0px; left: 135px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #FAFAFA; } } .card-slider-wrap:hover { box-shadow: 0px -10px 0px 0px #024b9c; } .card-slider-wrap a { font-size: 10px; font-weight: 700; margin: 0px; } .card-slider-module-section { .card-title { font-size: 18px; font-weight: bold; margin: 0px; } .card-subtext { font-size: 16px; font-weight: 300; margin: 0px; } } @media only screen and (max-width: 768px) { .card-slider-container { flex-direction: column; } .card-slider-module-section .card-slider-slider-container { width: 100%; padding: 20px 20px 50px 20px; .card-slider-wrap { width: 270px; } } } /* Card Slider Section CSS End */ /* Flip Card Grid Module CSS Start*/ .flip-card-grid-container { display:flex; } .flip-card-grid-section-title-container { flex-grow: 0; flex-basis: 40%; display: flex; flex-direction: column; align-content: center; justify-content: center; } .flip-card-grid { flex-grow: 0; flex-basis: 60%; max-width: 962px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 19px; row-gap: 19px; grid-template-rows: auto; margin: auto; } .flip-card { background-color: #E0E0E0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-align: center; padding: 16px; p { margin: 0px; } img { max-width: 60%; } .flip-card-title { color: #7f7f7f; font-size: 20px; font-weight: 600; } .flip-card-subtext { font-weight: 300; } } /* W3 Schools Flip Card Example */ .flip-card-container { aspect-ratio: 1; background-color: transparent; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-container-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card-container:hover .flip-card-container-inner { transform: rotateY(180deg); } /* First card in grid show revealed */ .flip-card-container .flip-card-container-inner { transform: rotateY(180deg); } .flip-card-container:hover .flip-card-container-inner { transform: rotateY(0deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } .flip-card-back { transform: rotateY(180deg); } /* Style the back side */ .flip-card-front { background-color: #E0E0E0; color: #021849; display: flex; align-items: center; justify-content: center; padding: 16px; } .flip-card-front p { margin-bottom: 0px; text-align: center; } /* End W3 Schools Example*/ /* Mobile Styles */ @media only screen and (max-width: 768px) { .flip-card-grid-container { flex-direction: column; align-items: center; } .flip-card-grid-section-title-container { align-self: start; } .flip-card-grid { display: flex; flex-direction: column; margin-top: 16px; width: 100%; } } /* Flip Card Grid Module CSS End*/ /* Product Hero CSS Start */ .product-hero-image-section { background-size: cover; background-position-x: center; } .product-hero-image-container.container { display: flex; /* padding-top: 30px; padding-bottom: 30px; */ } .product-hero-cta-container { flex-grow: 1; /* max-width: 65%; */ display: flex; flex-direction: column; justify-content: center; } .product-hero-media-container { flex-grow: 1; max-width: 50%; position: relative; text-align: center; display: flex; align-items: center; justify-content: end; flex-direction: column-reverse; } /* .parallax-image { position: absolute; left: 0; } */ /* ._parallax { transform: perspective(var(--perspective)) rotateX(var(--rotate_x)) rotateY(var(--rotate_y)); transition: transform 0.1s ease-out; } */ ._parallax { position: absolute; left: 0; animation: parallaxMotion 10s infinite ease-in-out; /* Adjust duration and easing */ } .logo-super-heading { display: flex; align-items: center; gap: 10px; margin: 16px 0px; img { width: 32px; } p { margin: 0px; } } .cta-wrapper { display: flex; align-items: center; padding: 10px 0px 40px 0px; } @media only screen and (max-width: 768px) { .product-hero-image-container { flex-direction: column; gap: 16px; align-items: center; width: 100%; text-align: center; } .logo-super-heading { justify-content: center; } .product-hero-cta-container { width: 100%; margin-bottom: 50px; } .cta-wrapper { align-items: center; justify-content: space-around; } .product-hero-media-container { max-width: 80%; } } /* Product Hero CSS End */ /* Stick Nav CSS Start */ .sticky-nav-section { position: sticky; top: 80px; z-index: 10; background: #FFF; box-shadow: 0 0 0 #DADADA; border-bottom: 1px solid #DEDEDE; } .sticky-nav-container { display: flex; height: 72px; margin: 0px 24px; .sticky-title-container { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; span { margin: 0px; font-size: 20px; line-height: 35px; letter-spacing: 0px; font-weight: 600; color: #021849; } } .sticky-nav-wrapper { flex-grow: 1; display: flex; flex-direction: row; justify-content: center; gap: 16px; p { font-weight: 600; text-transform: uppercase; color: #001949; margin: 0px; } .top-level-nav-item { display: flex; flex-direction: column; justify-content: center; padding: 16px 8px; position: relative; } .top-level-nav-item:hover { background: #e7eff2; cursor: pointer; } } .sticky-nav-cta-wrapper { flex-grow: 1; display: flex; justify-content: end; align-items: center; } /* Second Level Nav Desktop */ .second-level-nav-item-container { display: none; opacity: 0; min-width: 16rem; position: absolute; transition: transform .3s cubic-bezier(0.88,-0.72, 0, 1), opacity .3s ease-in-out; top: 73px; transform: translateX(-7px); background-color: #FFF; } .top-level-nav-item:hover .second-level-nav-item-container { display: block; opacity: 1; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .second-level-nav-item { clear: both; width: 100%; padding: 4px 8px; } .second-level-nav-item:first-of-type { padding-top: 8px; } .second-level-nav-item:hover { background: #e7eff2; cursor: pointer; } } /* Hide the mobile nav */ .sticky-nav-section .sticky-nav-mobile-container { display: none; } @media only screen and (max-width: 768px) { .sticky-nav-section { top: 65px; } /** Hide the desktop nav */ .sticky-nav-section .sticky-nav-container { display: none; } /* Show the mobile nav */ .sticky-nav-section .sticky-nav-mobile-container { display: block; } .sticky-nav-mobile-container { .hero-button { margin-top: 60px; margin-bottom: 30px; } } .sticky-nav-mobile-wrapper { display: flex; justify-content: space-around; align-items: center; padding: 20px 10px 20px; } .sticky-mobile-title-container { h5 { margin: 0px; } } .sticky-mobile-menu-button-container { cursor: pointer; } .sticky-mobile-menu { /* Hide if not open */ display: none; padding: 20px 20px 40px; width: 100%; height: 100%; transform: translateX(100%); background-color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Show if open */ &.open { display: block; transform: translateX(0); overflow-x: hidden; } } .sticky-mobile-menu-item-container { border-bottom: 1px solid #bebebe; } .sticky-mobile-menu-item { display: flex; padding: 16px 20px 16px 28px; p { font-size: 16px; color: #021849; } } .mobile-top-level-link { flex-grow: 2; } /* Second Level Mobile Nav */ .second-level-mobile-nav-item-container { display: none; margin-top: 8px; } .second-level-mobile-nav-item-container.active { display: block; } .second-level-mobile-nav-item { padding: 8px 20px 8px 28px } .expand-mobile-menu-container { flex-grow: 1; display: flex; justify-content: end; align-items: center; } } /* Stick Nav CSS End */ /* FAQ Accordion CSS Start */ .faq-title-container { text-align: center; } .faq-module-section { padding: 60px; .hero-accordion.no-img .accordion-wrapper { max-width: 800px; } .accordion-wrapper { width: 50%; } .hero-accordion { margin-top: 50px; } #faq-icon { color: #fc552e; } .accordion-question { color: #001949; } .hero-accordion .accordion-content { padding: 0px 20px; } .hero-accordion .accordion-content p, .hero-accordion .accordion-content ol > li, .hero-accordion .accordion-content ul > li { font-size: 14px; line-height: 23px; } .hero-accordion .accordion-content ol > li, .hero-accordion .accordion-content ul > li { margin-bottom: 10px; } .faq-img { margin-bottom: 30px; width: 50%; text-align: center; } .hero-accordion .accordion-wrapper { max-width: 100%; margin: auto; padding-right: 0px; } } /* FAQ Accordion CSS End */ /* col2-stats Section CSS Start */ .col2-stats { padding: 100px 0px; } .col2-stats-wrap { gap: 20px; } .leftSide-stats-2col, .rightSide-stats-2col { max-width: 530px; min-height: 370px; display: flex; align-items: center; flex-direction: column; justify-content: space-between; } .statsCounterContent { height: 186px; flex-direction: column; margin-bottom: 20px; } .statsCounterContent h5 { font-size: 40px; line-height: 63px; color: #001949; } .statsCounterContent p { font-size: 18px; line-height: 27px; color: #7F7F7F; } .count-bg { position: relative; box-shadow: 0px 10px 25px #0000000D; border: 2px solid #7070701C; border-radius: 10px; } .count-bg:before { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: #001949; z-index: -1; border-radius: 10px; } .count-content { display: flex; align-items: center; position: absolute; gap: 12px; width: 100%; height: 100%; bottom: 0; max-width: 530px; margin: 0 auto; left: 0; right: 0; padding: 0 40px 0px 70px; top: 5px; } .count-bg img { border-radius: 10px; } .count-content .count { font-size: 78px; width: 50%; color: #fff; } .count-content p { width: 50%; color: #fff; } /* col2-stats Section CSS End */ /* col3-stats Section CSS Start */ .col3-stats { padding: 50px 0px; } .stats-intro { margin-bottom: 40px; } .stats-intro h5 { font-size: 22px; line-height: 30px; font-weight: 700; } .stats-intro p { font-size: 18px; line-height: 25px; font-weight: 400; color: #7F7F7F; } /* .col3-stats-wrap { align-items: start; } */ .col3-stats-wrap .col3-stats-content:nth-child(2) { min-width: 540px; padding: 0px 80px; min-height: 420px; display: flex; align-items: center; justify-content: center; } .leftSide-stats-3col, .rightSide-stats-3col { min-width: 265px; min-height: 370px; display: flex; align-items: center; flex-direction: column; justify-content: space-between; max-width: 20%; } .leftSide-stats-3col > div, .rightSide-stats-3col > div { min-height: 210px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .count { color: #001949; font-size: 60px; line-height: 80px; font-weight: 700; transition: all 0.4s ease; } .stats-content { font-size: 14px; font-weight: 300; line-height: 21px; } /* col3-stats Section CSS End */ /* col4-stats Section CSS Start */ .col4-stats { padding: 100px 0px 50px; background-color: #F2F7FD; } .statsCounterWrap p.subheading { margin-bottom: 0px; } .col4-stats h5 { font-size: 42px; line-height: 63px; } .col4-stats-wrap { gap: 0px; margin: 40px 0px; } .col4-stats-content { width: 25%; padding: 10px 10px; } .statsCounterWrap { width: 100%; height: 220px; box-shadow: 0px 10px 25px #0000000D; border-radius: 10px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 20px; padding: 20px 30px; } /* col4-stats Section CSS End */ /* 3 Col Team Module CSS Start */ .teamSec { padding:65px 0px 15px; } .teamIntro { max-width: 1000px; margin: 0px auto 50px; } .teamIntro h2 { font-size: 40px; font-weight: 400; line-height: 50px; color: #001949; } .teamIntro p { font-size: 14px; font-weight: 400; line-height: 24px; } .teamSecRow { max-width: 1000px; margin: auto; } .teamWrap { flex: calc(32.78% - 15px); max-width: calc(32.78% - 15px); margin: 0 15px 50px; } .teamWrap:nth-child(3n+1) { margin-left: 0; } .teamWrap:nth-child(3n+3) { margin-right: 0; } .teamImg { height: 280px; width: 280px; /*background-color: #F2F7FD;*/ border-radius: 50%; margin: auto; } .teamImg img { max-width: 140px; } .teamWrap h6 { font-size: 20px; line-height: 30px; color: #7F7F7F; margin: 10px 0px 5px; } .teamWrap p { font-size: 10px; line-height: 15px; color: #001949; margin-bottom: 10px; } .socialIcons a { color: #ED5B3E; font-size: 16px; margin: 0px 15px; } .socialIcons a:hover { color: #021849; } /* 3 Col Team Module CSS End */ /* 2 Col Image and Text Portfolio Module CSS Start */ .col2-portfolio { padding: 30px 0px; } /*.col2-portfolio .row { padding: 50px 0px; }*/ /*.portfolioWrap { flex: 50%; max-width: 50%; padding-left: 50px; padding-right: 50px; margin: 50px 0px; }*/ .portfolioWrap { max-width: 100%; margin: 50px auto; padding: 0; } /* .portfolioWrap:nth-child(even) { flex-direction: row-reverse; } */ .portfolioWrap.reverse-layout { flex-direction: row-reverse; } .portfolioContent, .portfolioMedia { flex: 50%; max-width: 50%; padding-left: 50px; padding-right: 50px; } .portfolioMedia { text-align: center; } .portfolioMedia a.demo-btn.button { margin-top: 30px; } .portfolioWrap.one-by-one .portfolioMedia, .portfolioWrap.one-by-one .portfolioContent { flex: 100%; max-width: 100%; text-align: center; } .portfolioWrap.one-by-one .portfolioMedia .portfolioVideo iframe { margin: 20px auto; } .portfolioWrap.two-by-three .portfolioMedia { flex: 33.33%; max-width: 33.33%; } .portfolioWrap.two-by-three .portfolioContent { flex: 66.66%; max-width: 66.66%; } .portfolioWrap.three-by-four .portfolioMedia { flex: 25%; max-width: 25%; } .portfolioWrap.three-by-four .portfolioContent { flex: 75%; max-width: 75%; } .portfolioContent p { font-size: 17px; line-height: 26px; margin-bottom: 15px; } .portfolioContent a { /*padding: 11px 37px 11px 37px;*/ margin-top: 20px; } .portfolioWrap ul { margin-bottom: 15px; } .portfolioWrap ul.list-checked > li { margin-bottom: 0px; font-size: 16px; line-height: 26px; color: #001949; position: relative; padding-left: 28px; } /*.portfolioWrap ul.list-checked > li:before { position: absolute; font-family: "Font Awesome 6 Free"; content: "\f00c"; width: 16px; height: 16px; font-size: 14px; color: #002453; padding-left: 0; background: transparent; border-radius: 0; left: 0; top: 2px; font-weight: 900; }*/ /* .lightHeading { color: #001949; font-size: 50px; line-height: 60px; font-weight: 400; } */ .lightHeading span { /*font-weight: 700; line-height: 60px;*/ display: block; } .portfolioWrap.one-by-one.full-width .portfolioMedia, .portfolioWrap.one-by-one .portfolioContent { text-align: center; } /* 2 Col Image and Text Portfolio Module CSS End */ /* Resources Module CSS Start */ /* .resourcesRow { padding: 0 50px; } */ .resourcesSec { padding: 50px 0px; } .resourcesWrap { flex: calc(30% - 15px); max-width: calc(30% - 5px); margin: 0 20px 50px; box-shadow: 0px 0px 10px -5px lightgrey; transition: 0.4s ease-out; border-radius: 10px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 190px; padding: 22px 25px 27px; /* border: 1px solid #f7fafb; */ border-bottom: 5px solid #ED5D3E; background: #fff; } .resourcesWrap:hover { box-shadow: 0px -10px 0px 0px #024b9c, 0px 0px 20px 10px lightgrey; } .resourcesWrap:nth-child(3n+1) { margin-left: 0; } .resourcesWrap:nth-child(3n+3) { margin-right: 0; } .resourcesWrap h5 { font-size: 16px; line-height: 25px; } .resourcesWrap span { background-color: #F2F7FD; border: 3px solid #EFF4FA; border-radius: 4px; font-size: 12px; line-height: 10px; color: #001949; display: inline-block; padding: 5px 10px 5px 10px; margin-bottom: 15px; } .resourcesWrap a { color: #fc552e; font-size: 12px; font-weight: 700; margin: 0px; } /* Resources Module CSS End */ /* Tab Module CSS Start */ .tabSec { padding: 70px 0px; } .tabHead { padding-bottom: 30px; } .tabSecRow { max-width: 1140px; margin: auto; } .responsive-tabs .active + dd { display: block; } .responsive-tabs dd { display: none; padding: 0.5em; } .responsive-tabs-placeholder { display: none; } .responsive-tabs { display: flex; align-items: center; justify-content: space-between; width: 100%; } .tab { cursor: pointer; box-shadow: 3px 3px 6px #00000029; display: flex; align-items: center; background-color: #FFF; padding: 13px 10px; /* width: calc(100% / 3); */ justify-content: center; font-size: 18px; line-height: 30px; font-weight: 700; position: relative; transition: all 0.4s ease; height: 56px; flex-grow: 1; h4 { font-size: 18px; margin: 0px; } } .tab img { max-width: 40px; margin-right: 5px; /* margin-left: auto; */ } .tab.active { background-color: #fff; } .tab.active:before { content: ''; height: 5px; width: 100%; position: absolute; bottom: -5px; left: 0; background-color: #ED5B3E; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .tab:hover { background-color: #fff; } .tab .accordion-icon { margin-left: auto; } .tabs-content .tab-content { display: none; } .tabs-content .tab-content.active { display: block; } .tabWrap { padding: 50px 0px 25px; gap: 20px; justify-content: space-evenly; } .tabInImg img { max-width: 335px; } .tab-video { padding: 0px 10px; } /* .tab-video iframe { width: revert-layer; } */ .tabInContent h6 { margin-bottom: 10px; } .tabInContent span { color: #7F7F7F; margin-bottom: 30px; display: block; font-size: 40px; line-height: 50px; } .tabInContent p { font-size: 18px; } .tabInContent a { color: #fc552e; font-size: 14px; font-weight: 700; margin: 0px; } .tabInContent a:hover, .tabInContent a:hover:after { color: #004398; } @media only screen and (min-width: 768px) { .responsive-tabs dt { float: left; border-top: 0; } .responsive-tabs .active + dd { display: none; } .responsive-tabs-placeholder { clear: both; display: block; } .responsive-tabs .tab { img { margin-left: unset; } h4 { font-size: 16px; } .accordion-icon { display: none; margin-left: unset; } } .half-sec { max-width: 50%; float: left; margin-bottom: 40px; padding: 0px 10px; text-align: left; } } @media only screen and (max-width: 767px) { .responsive-tabs { display: block; } } /* Tab Module CSS End */ /* Accordion Module CSS Start */ .accordionSec { padding: 50px 0px; } .accordionHeader { max-width: 960px; margin: auto; } .accordionSec h4 { line-height: 30px; margin-bottom: 20px; } #faq__accordian-main-wrapper { display: flex; flex-direction: column; align-items: start; max-width: 1160px; margin: 40px auto 0px; padding: 20px; /*min-height: 531px;*/ height: 100%; position: relative; } .faq__accordion-wrapper { width: 572px; padding: 15px; border-bottom: 1px solid #E0E0E0; } .faq__accordion-wrapper.active { box-shadow: 0px 2px 15px #00000029; border-radius: 8px; border-bottom: 5px solid #ED5D3E; background-color: #fff; } a.faq__accordian-heading > img { width: 39px; height: 39px; } a.faq__accordian-heading h4 { margin: 0 0 0 18px; } .faq__accordion-content p, .faq__accordion-content > ul > li, .faq__accordion-content > ol > li { font-size: 15px; margin: 0px; } .contentImg { position: absolute; right: -20px; width: 470px; top: 50%; transform: translateY(-50%); } .contentImg img { opacity: 0; transition: 0.3s; } .faq__accordion-wrapper.active .contentImg img { opacity: 1; } .contentImg:before { content: ''; /*background: url(/wp-content/uploads/2024/04/Mitratech-Background-Texture_Green_Right-Bottom-DotGrid.png);*/ width: 110px; height: 163px; position: absolute; top: -20px; right: -40px; background-repeat: no-repeat; z-index: -1; } .contentImg:after { content: ''; /*background: url(/wp-content/uploads/2024/04/Mitratech-Background-Texture_Green_Right-Bottom-DotGrid.png);*/ width: 163px; height: 110px; position: absolute; bottom: -50px; left: -15px; background-repeat: no-repeat; z-index: -1; } .faq__accordian-heading { position: relative; display: flex; align-items: center; justify-content: flex-start; } .faq__accordion-content { display: none; padding: 10px 30px 0px 55px; } /* Accordion Images Left Start */ .imageIsLeft #faq__accordian-main-wrapper { align-items: end; } .imageIsLeft .contentImg { left: -20px; } .light-color-font h1, .light-color-font h2, .light-color-font h3, .light-color-font h4, .light-color-font h5, .light-color-font p, .light-color-font a, .light-color-font span, .light-color-font button { color: #fff !important; } .light-color-font a.learn-btn { border-color: #fff; background-color: #fff; color: #fc552e !important; } .light-color-font a.learn-btn:hover { border-color: #fff; background-color: #004398; color: #fff !important; } .product-hero-image-section.light-color-font a.demo-btn.button, .product-hero-image-section.light-color-font a.learn-btn { background-color: transparent; } .product-hero-image-section.light-color-font a.learn-btn { color: #fff !important; } .product-hero-image-section.light-color-font a.learn-btn:hover { color: #ED5B3E !important; } .product-hero-image-section .hero-button { padding-top: 0px; } /* Accordion Images Left End */ /* Accordion Module CSS End */ /* Hex Portfolio Section CSS Start */ .hexPortfolio { padding: 40px 0px 40px;; } /* .hexPortfolio .container { max-width: 1190px; padding: 0; } */ .hexPortfolioHead { margin: 50px auto 50px; } .hexPortfolioContent > ul { align-items: start; padding-left: 0px; } .hexPortfolioContent.three-col > ul { justify-content: start; } .hexPortfolioContent.stack.three-col > ul { justify-content: center; } .hexPortfolioContent.stack.three-col.left-align > ul { justify-content: start; } .hexPortfolioContent.stack.three-col.left-align .hexPortfolioWrap { text-align: left; } .hexPortfolioContent.stack.three-col.center-align > ul { justify-content: center; } .hexPortfolioContent.stack.three-col.center-align .hexPortfolioWrap { text-align: center; } .hexPortfolioContent.stack.four-col.left-align > ul { justify-content: start; } .hexPortfolioContent.stack.four-col.left-align .hexPortfolioWrap { text-align: left; } .hexPortfolioContent.stack p { font-size: 16px; line-height: 23px; margin-bottom: 8px; } .light-color-font .hexPortfolioWrap a.learn-btn { background-color: transparent; } .light-color-font .hexPortfolioWrap a.learn-btn:hover svg { color: #fff; } .hexPortfolioContent ul > li { max-width: 50%; width: 50%; display: inline-block; padding: 0px; } .hexPortfolioContent ul > li:before { display: none; } .hexPortfolioContent ul > li img { width: 80px; height: 80px; margin-right: 10px; } .hexPortfolioWrap { display: flex; margin: 0px auto 30px; align-items: start; /* flex: calc(90% - 35px); max-width: calc(90% - 35px); -webkit-box-flex: 1; */ padding: 0px 20px; } .hexPortfolioContent.three-col > ul > li { max-width: 33.33%; width: 33.33%; } .hexPortfolioContent.stack.three-col ul > li img { width: 100px; height: 100px; } .hexPortfolioContent.stack.three-col.left-align ul > li img { width: 50px; height: 50px; margin-left: -.6rem; } .hexPortfolioList a.learn-btn { color: #fc552e; margin-left: 0px; max-width: 100%; font-size: 15px; } .hexPortfolioList a.learn-btn:hover { color: #004398; } .hexPortfolioList a.learn-btn:hover svg { margin-left: 5px; color: #2699FB; } .hexPortfolioList a.learn-btn svg { transition: all 0.4s ease; } .hexPortfolioContent.stack ul > li { max-width: 33.33%; } .hexPortfolioContent.stack .hexPortfolioWrap { display: block; text-align: center; padding: 0px 25px; } .hexPortfolioContent.stack ul > li img { margin-right: 0; margin-bottom: 10px; } .hexPortfolioContent.stack ul > li h4 { font-size: 18px; line-height: 23px; margin-bottom: 8px; } /* .hexPortfolioContent.stack ul > li p { font-size: 18px; line-height: 30px; } */ .hexPortfolioContent.stack.four-col > ul > li { max-width: 25%; } /* Hex Portfolio Section CSS End */ /* Single Post Page CSS Start */ .single-post-container { margin: 40px 0px 0px; } .blogbg.hero-main:after { width: 187px; height: 180px; left: 25px; bottom: 40px; } .blogbg.hero-content-right:before { right: -50px; } .blogbg.hero-content-right:after { width: 228px; height: 160px; left: 44px; bottom: -20px; } .quote .post-meta { margin-left: -30px; } .author-avatar { margin-right: 20px; } span.author-name { display: block; margin-bottom: -5px; font-weight: 700; font-size: 18px; color: #001949; line-height: 18px; padding-top: 8px; } span.author-name:hover a { color: #fc552e; } span.publish-date:after, span.reading-time:after { content: '|'; position: absolute; right: -12px; top: -3px; } span.publish-date, span.reading-time { font-size: 13px; color: #001949; position: relative; margin-right: 17px; line-height: 23px; margin-bottom: 0; } span.ai-overview { font-size: 13px; color: #fc552e; font-weight: bold; } span.ai-overview:hover{ cursor: pointer !important; } span.ai-overview:before{ content: ''; background-image: url('../png/volume-high.png'); background-size:contain; height: 15px; width: 15px; display: inline-block; margin-right: 13px; margin-bottom: -3px; background-repeat: no-repeat; } .blog-wrap { max-width: calc(100% - 390px); padding-right: 85px; } .blog-wrap > div { margin-bottom: 45px; } .blog-wrap a { color: #0073EA; } .blog-wrap h6 { margin-bottom: 10px; } .blog-list p { margin-bottom: 1.625rem; } .intro-content p { font-size: 24px; line-height: 30px; font-weight: 400; } .blog-content h5 { margin-bottom: 10px; } .blog-content p, .blog-content ul > li { font-size: 18px; } .blog-content ol > li { min-height: 45px; /* display: flex; */ align-items: center; justify-content: start; line-height: normal; } .blog-content ol > li:before { top: 0; } .blog-content ol { margin: 0 0 25px 0px; } .blog-content ol > li { list-style: decimal; } .blog-content ol > li:before { content: none !important; } .blog-wrap figure { width: 100% !important; } .quote span.author-name { margin: 0; font-weight: 300; line-height: 1.2; } .quote.author-meta { display: block; font-weight: 300; font-size: 18px; color: #001949; width: calc(100% - 80px); } blockquote.quote p { margin-bottom: 35px; } .post-links { box-shadow: 0px 10px 25px #0000000D; background-color: #F2F7FD; max-width: 520px; margin: auto; padding: 25px 35px; } .post-links h5 { font-size: 18px; line-height: 26px; } .post-links ol { margin: 0 0 0px 50px; } .post-links ol > li { font-size: 18px; line-height: 30px; margin-bottom: 10px; } .post-links ol > li:before { font-size: 11px; height: 27px; width: 27px; color: #fff; background-color: #ED5B3E; border: 0px; left: -40px; top: 0px; } .post-links ol > li > a { color: #021849; } .separator { width: 100%; } .cta-wrap { text-align: center; box-shadow: 0px 10px 25px #0000000D; /*border: 2px solid #7070701C;*/ border-radius: 10px; position: relative; padding: 27px; background-repeat: no-repeat; background-size: cover; background-position: top center; } .cta-wrap:before { content: ''; background-color: #001949; position: absolute; height: 100%; width: 100%; left: 0; z-index: -1; opacity: 1; /* border-radius: 10px; */ top: 0px; } .cta-wrap.text-left { min-height: 500px; display: flex; align-items: center; justify-content: start; } .cta-wrap.text-left .cta-content { max-width: 960px; min-width: 100%; padding-left: 80px; } .cta-content { padding: 40px 10px; max-width: 960px; margin: auto; } .cta-wrap h4 { font-size: 26px; margin-bottom: 15px; color: #fff; /* Why was this commented out? It's needed on https://mitratech.com/us-mandatory-harassment-training/ */ line-height: normal; } .cta-wrap p { font-size: 17px; margin-bottom: 15px; color: #fff; /* Why was this commented out? It's needed on https://mitratech.com/us-mandatory-harassment-training/ */ } .cta-wrap.dark-color-font h4, .cta-wrap.dark-color-font p { color: #001949; } .cta-wrap a { color: #fff; } .blog-video iframe { margin: auto; } .side-bar { width: 236px; } .side-bar-wrap { text-align: center; box-shadow: 0px 10px 25px #0000000D; /* border: 2px solid #7070701C; */ border-radius: 10px; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 1; padding: 110px 18px 20px; } .side-bar-wrap:before { content: ''; background-color: #001949; position: absolute; height: 100%; width: 100%; left: 0; z-index: -1; opacity: 0.8; border-radius: 10px; top: 0px; } .side-bar-wrap h4 { font-size: 26px; margin-bottom: 45px; color: #fff; line-height: 30px; } .side-bar-wrap p { font-size: 13px; line-height: 15px; margin-bottom: 45px; color: #fff; } .stat-call-out { border-left: 6px solid #fc552e; padding-left: 20px; } .stat-call-out p { font-size: 18px; line-height: 20px; } .take-look-content-wrap { margin: 50px 0px; } .take-a-look-text { max-width: calc(50% - 50px); margin-left: 50px; } .take-a-look-image { max-width: calc(50% - 50px); margin-right: 50px; } .take-a-look-text h5 { font-weight: 700; } .featured-articles { margin-top: 50px; padding-bottom: 50px; } .featured-articles-wrap { margin-top: 50px; align-items: flex-start; } .featured-articles h5, .featured-articles span { color: #001949; } .featured-articles p { margin-bottom: 15px; } .featured-articles span { font-size: 15px; font-weight: 400; } .featured-article-right { margin-right: 0 !important; } .featured-article-left { margin-left: 0 !important; } .articals { flex: calc(44% - 15px); max-width: calc(44% - 15px); margin: 0 25px 0px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; } .footer-cta-banner-wrap { margin: 60px 0 10px; box-shadow: 3px 3px 6px #00000029; } .footer-cta-banner-wrap.text-left { box-shadow: none; min-height: 450px; } .footer-cta-banner-wrap.text-left .text-center { text-align: left !important; margin: initial; } .footer-cta-banner-text { padding: 40px 0px; max-width: 960px; margin: auto; } .footer-cta-banner-text h5 { font-size: 30px; font-weight: 400; line-height: 36px; color: #001949; margin-bottom: 25px; } .footer-cta-banner-text.light-color-font h5, .footer-cta-banner-text.light-color-font p { color: #ffffff; } /*.footer-cta-banner-text .button { font-size: 18px; font-weight: 600; padding: 15px 60px; }*/ .footer-cta-banner-text .footer-cta-banner-paragraph-text { margin: 0 0 20px 0; } body.post-template footer.main-footer { background-color: #fff; } ul.blog-social-share { padding-top: 25px; margin-left: 0px; padding-left: 0; } ul.blog-social-share > li { margin-right: 10px; margin-bottom: 0px; padding-left: 0px; } ul.blog-social-share > li:before { display: none; } ul.blog-social-share > li > a { min-width: 44px; color: #002453; font-weight: 700; padding: 0px 12px 7px; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; border-radius: 0; -webkit-transition: all .35s cubic-bezier(.4,0,.2,1); transition: all .35s cubic-bezier(.4,0,.2,1); display: block; } ul.blog-social-share > li > a > i { font-style: normal !important; font-size: 17px; } ul.blog-social-share > li > a:before { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: #002453; -webkit-transform: skewX(-10deg); transform: skewX(-10deg); -webkit-transition: all .35s cubic-bezier(.4,0,.2,1); transition: all .35s cubic-bezier(.4,0,.2,1); background: #e7eff2; z-index: -1; } ul.blog-social-share > li > a:hover:before { background: #002453; } ul.blog-social-share > li > a:hover { color: #fff; } ul.blog-social-share > li > a svg { max-height: 15px; } /* Single Post Page CSS End */ /* Testimonial Slider CSS Start */ .testimonial-slider-section { padding: 50px 0px 100px 0px; } .testimonial-main { max-width: 1100px; margin: auto; } .testimonials-content { position: relative; } .testimonials-content a.slide-arrow.prev-arrow.slick-arrow { position: absolute; bottom: -50px; right: 110px; } .testimonials-content a.slide-arrow.next-arrow.slick-arrow { position: absolute; right: 40px; } .testimonials-content a.slide-arrow { background-color: #fafafa; border: 2px solid #F2F7FD; font-size: 16px; padding: 10px 16px; cursor: pointer; border-radius: 10px; } .testimonials-content a.slide-arrow:hover { background: #004398 !important; color: #ffffff; } .testimonial-wrap { /* max-width: 1100px; width: 100%; */ gap: 30px; padding: 20px 0px; margin: auto; } .testimonials-image { max-width: 280px; height: auto; } .testimonials-image img { max-width: 280px; margin: auto; } .testimonial-details { max-width: calc(100% - 330px); position: relative; padding: 40px 30px 0px 110px; } /* .testimonial-details:before */ .testimonial-quote:before { content: ''; position: absolute; width: 93px; height: 86px; background: url(../webp/testimonial-upper-left-quote-icon.webp) no-repeat; background-size: cover; left: -120px; top: -40px; z-index: -1; } /* .testimonial-details:after */ .testimonial-quote:after { content: ''; position: absolute; width: 93px; height: 86px; background: url(../webp/testimonial-upper-left-quote-icon.webp) no-repeat; background-size: cover;; right: 0px; bottom: -70px; transform: rotate(180deg); z-index: -1; } .testimonial-quote { margin-bottom: 50px; position: relative; } .testimonial-quote p { font-style: italic; font-weight: 300; line-height: 30px; font-size: 18px; font-family: Poppins, Helvetica, sans-serif; } span.testimonial-author-name { color: #ED5B3E; /* font-size: 36px; line-height: 55px; */ font-weight: 400; display: block; } span.testimonial-author-position { /* font-size: 24px; line-height: 40px; */ display: block; } span.testimonial-author-company { /* font-size: 24px; line-height: 35px; */ font-weight: 400; display: block; } .testimonial-author-details { font-size: 18px; line-height: 25px; } a.link-btn { font-size: 14px; font-weight: 700; margin: 10px 0px 0px; display: inline-block; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; } a.link-btn svg { margin-left: 5px; } a.link-btn:hover { color: #004398; } /* POPUP-STYLES BLOG TEMPLATE AI OVERVIEW START */ .popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; justify-content: center; align-items: center; z-index: 2000; background-image: url('../png/audio-popup-background-.png') !important; background-repeat: no-repeat; background-size:cover; background-position: bottom; } .popup-overlay:after{ content:''; opacity: 0.95; z-index: -1; height: 100%; width:100%; position:absolute; } #closePopup{ position: absolute; top: 150px; right: 150px; font-size: 24px; padding: 16px; background-color: #FFF; color: #002453; border-width: 1px; } #closePopup:hover{ background-color:#ed5b3e !important; color: #fff; } .popup-content { width: 80%; max-width: 800px; padding: 30px; border-radius: 8px; } .popup-title { font-size: 24px !important; color: #fff !important; line-height: 35px !important; font-weight: 700 !important; margin-bottom:0 !important; } .popup-description { font-size: 18px !important; color: #fff !important; line-height: 20px !important; font-weight: 400 !important; margin-bottom: 23px !important; } p.disclaimer { font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; margin-top: 10px !important; color: #fff !important; } /* POPUP-STYLES BLOG TEMPLATE AI OVERVIEW END */ /* a.link-btn:hover svg { margin-left: 12px; } */ /* Testimonial Slider CSS End */ /* Media Query Start Here */ @media only screen and (min-width: 1440px){ .header .logo {width: 221px;} } /* @media only screen and (max-width: 1281px) { body.no-topbar .front-page-mitratech-wrapper { margin-top: 0px; } body.no-topbar .hero-main { margin-top: 0px; } } */ @media only screen and (max-width: 1280px) { body.no-topbar .front-page-mitratech-wrapper { margin-top: 0px; } body.no-topbar .hero-main { margin-top: 0px; } body h2 { font-size: 40px; } .blog-page-mitratech-wrapper .blogbg.hero-main { margin-top: 0px !important; } .front-page-mitratech-wrapper, .hero-main { margin-top: 66px; } .topbar { margin-top: -15px; } .learn-btn { max-width: 195px; margin-left: 20px; } .animated-card-wrap h4 { min-height: 72px; } .animated-card-main { background-position: 100% 100%; } .animated-card-main .container { padding: 0px 30px; } .accordionSec { padding: 50px 0px 100px; } .resourcesWrap h5 { min-height: 75px; } .portfolioWrap { margin: 30px auto; } .faq-module-section .hero-accordion { align-items: start; } /* Testimonial Slider CSS Responsive Start */ .testimonials-main { max-width: 100%; } /* Testimonial Slider CSS Responsive End */ } @media only screen and (max-width: 1200px) { .h3, h3 { font-size: 35px; line-height: 45px; margin-bottom: 20px; } h5 { font-size: 21px; line-height: 30px; margin-bottom: 10px; } p { font-size: 15px; line-height: 25px; } .container { max-width: 100%; padding: 0px 30px;} .hero-wrap { gap: 30px; justify-content: space-between; } .hero-text { max-width: calc(50% - 15px); } .hero-content-right { width: calc(50% - 15px); } .hero-content-right img { max-width: 100%; text-align: center; } .hero-text h1, .hero-text h1 span { font-size: 48px; line-height: 55px; } .hero-text p { font-size: 16px; line-height: 25px; } .learn-btn { margin: 20px 10px; max-width: 195px; display: block; } .hero-main:after { width: 160px; height: 100px; left: 50px; bottom: -50px; } .hero-content-right:before { width: 160px; height: 200px; right: -30px; top: -120px; } .hero-content-right:after { width: 140px; height: 110px; left: -45px; bottom: -25px; } .BUbar ul > li > a { font-size: 15px; padding: 20px 0; } .portfolioContent p, .portfolioWrap ul > li { font-size: 15px; line-height: 25px; } .lightHeading, .lightHeading span { font-size: 35px; line-height: 50px; } .statsCounterContent h5, .col4-stats h5 { font-size: 35px; line-height: 45px; } .count-content .count, .count { font-size: 50px; } .btn-transparent { font-size: 14px; line-height: 14px; padding: 14px 16px 15px; } .teamIntro h2 { font-size: 35px; line-height: 35px; } .teamImg { height: 250px; width: 250px; } .accordionSec h4 { /*margin-bottom: 14px;*/ font-size: 30px; line-height: 35px; } .faq__accordion-wrapper { width: 50%; padding: 25px 0px 25px 20px; } .contentImg { right: 10px; /*top: 30px;*/ width: calc(50% - 100px); } a.faq__accordian-heading h6 { margin: 0 0 0 18px; font-size: 18px; line-height: 25px; } .imageIsLeft .contentImg { left: 0px; } .tab { font-size: 18px; line-height: 25px; } .tabInContent p { font-size: 15px; line-height: 25px; } .hexPortfolio .container { max-width: 100%; padding: 0 30px; } footer.main-footer { padding: 50px 0px 30px; } /* .footer-widgets-menu a { font-size: 15px; line-height: 25px; padding: 0; text-align: center; }*/ .footer-widgets-menu ul.sub-menu li a { font-size: 15px; line-height: 20px; padding: 0; text-align: left; } /* Demo Request Page CSS Start */ .formSection { margin-top: 60px; } /* Demo Request Page CSS End */ } @media only screen and (max-width: 1140px){ body.no-topbar .hero-main { margin-top: 58px; padding: 80px 10px 80px; } .hero-text h1, .hero-text h1 span { font-size: 40px; line-height: 50px; } .h3, h3 { font-size: 26px; line-height: 40px; margin-bottom: 15px; } .resourcesWrap { flex: calc(30% - 0px); max-width: calc(30% - 0px); margin: 0 10px 50px; } .leftSide-stats-2col, .rightSide-stats-2col { max-width: calc(50% - 30px); min-height: 100%; } .statsCounterContent { height: 175px; height: 100%; } .leftSide-stats-3col, .rightSide-stats-3col { max-width: 20%; } .col3-stats-wrap .col3-stats-content:nth-child(2) { min-width: 50%; padding: 0px 5px; } /* .statsCounterWrap { min-width: 220px; } */ /* Demo Request Page CSS Start */ .form-content h1 { font-size: 35px; line-height: 40px; } .form-content p { font-size: 20px; font-weight: 300; line-height: 30px; } /* Demo Request Page CSS End */ /* Single Post Page CSS Start */ .blogbg.hero-main { padding: 20px 0px 20px; } .blogbg.hero-main:after, .blogbg.hero-main:before, .blogbg.hero-content-right:after { display: none; } .blog-Row.flex-space-c { justify-content: space-between; } .blog-wrap { padding-right: 10px; max-width: calc(100% - 240px); } .take-a-look-image { padding-right: 15px; margin-right: 0px; } .take-a-look-text { padding-left: 15px; margin-left: 0px; } .footer-cta-banner-text h5 { font-size: 24px; line-height: 30px; } /* Single Post Page CSS End */ /* Testimonial Slider CSS Responsive Start */ .testimonial-details { max-width: calc(100% - 310px); padding: 10px 10px 0px 20px; } .testimonial-quote:before { width: 50px; height: 45px; left: -60px; top: -10px; } .testimonial-quote:after { width: 50px; height: 45px; right: 10px; bottom: -20px; } /* Testimonial Slider CSS Responsive End */ } @media only screen and (max-width: 1024px){ /* .container { max-width: 100%; padding: 0px 15px;}*/ .hero-text .intro-wrap h1 { margin-bottom: 25px; } .hero-text .intro-wrap p { font-size: 16px; line-height: 25px; margin-bottom: 10px; } .hero-accordion .accordion-question { padding: 15px; font-size: 15px; line-height: 25px; } .hero-accordion .accordion-answer { padding: 0px 15px 20px; } .BUbar ul { display: contents; } .BUbar ul > li { width: 50%; } .BUbar ul > li > a { font-size: 15px; } .portfolioContent, .portfolioMedia { padding-left: 20px; padding-right: 20px; } .portfolioMedia img { width: 100%; margin: auto; } .hexPortfolioContent.stack.four-col > ul > li { max-width: 33.33%; } a.faq__accordian-heading h4 { font-size: 20px; line-height: 30px; } .faq-module-section .hero-accordion .accordion-wrapper { padding: 0px 0px 0px 20px; } /* Demo Request Page CSS Start */ .form-content h1 { font-size: 35px; line-height: 40px; } /* Demo Request Page CSS End */ /* Single Post Page CSS Start */ blockquote.quote p { margin-bottom: 25px; font-size: 18px; line-height: 26px; } .quote span.author-name, span.job-title { font-size: 16px; } /* Single Post Page CSS End */ /* Testimonial Slider CSS Responsive Start */ .testimonial-main { max-width: 950px; } .testimonial-wrap { /* max-width: 950px; */ } /* Testimonial Slider CSS Responsive End */ .hexPortfolioContent.three-col > ul > li { max-width: 50%; width: 50%; } } @media only screen and (max-width: 1439px) and (min-width: 1360px){ .header{gap: 20px;} .header .logo{width: 182px;} .header-right{flex: 1;} .header-inline-flex{flex: 1;} ul.main_menu{gap: 20px;} } @media only screen and (max-width: 1359px) and (min-width: 1024px){ .header{gap: 10px;} } @media only screen and (max-width: 1023px){ /* .desktop-bg { display: none; } .tablet-bg { display: block; width: 100%; } .background img.desktop-bg { display: none; } .background img.mobile-bg { width: 100%; } ol > li { margin-bottom: 35px; } ol > li:before { top: 0px; }*/ /* Demo Request Page CSS Start */ .full-wrap .form-content { max-width: 100%; padding-top: 0; margin-bottom: 30px; text-align: center; padding: 0px; } .demo-request-form { width: 100%; } .demoRequest .form-wrap { max-width: 100%; } .demoRequest .form-content { max-width: 100%; text-align: center; } .demoRequest .demo-request-form { width: 100%; margin-top: 25px; } /* Demo Request Page CSS End */ /* Single Post Page CSS Start */ .intro-content p { font-size: 22px; line-height: 30px; } /* Single Post Page CSS End */ /* Testimonial Slider CSS Responsive Start */ .testimonial-main { max-width: 100%; } .testimonial-wrap { /* max-width: 920px; */ } /* Testimonial Slider CSS Responsive End */ } @media only screen and (max-width: 980px){ .hero-content-right:before { top: -190px; } .main-footer { padding: 90px 0px 53px; } .footer-main { display: block; } .footer-wrap-logo { margin: 0 auto 40px; } .footer-wrap-menu { margin: auto; } .portfolioContent, .portfolioMedia { flex: 100%; max-width: 100%; padding-left: 25px; padding-right: 25px; } .portfolioWrap.two-by-three .portfolioMedia, .portfolioWrap.two-by-three .portfolioContent, .portfolioWrap.three-by-four .portfolioMedia, .portfolioWrap.three-by-four .portfolioContent { flex: 100%; max-width: 100%; } .portfolioVideo iframe { margin: auto; } .resourcesWrap { flex: calc(33% - 10px); max-width: calc(32% - 10px); } .leftSide-stats-3col, .rightSide-stats-3col { max-width: 100%; flex-direction: row; min-height: auto; margin: 10px 10px; gap: 30px; align-items: start; } .col3-stats-wrap .col3-stats-content:nth-child(2) { display: block; min-height: auto; } .leftSide-stats-3col > div, .rightSide-stats-3col > div { min-height: auto; width: 50%; } .col4-stats-content { width: calc(50% - 20px); } .statsCounterWrap { margin-bottom: 0px; } .hexPortfolioContent { padding: 0; } .hexPortfolioContent ul { margin: 0; padding-left: 0px; } /*        .hexPortfolioWrap { margin: 0px auto 20px; flex: calc(95% - 10px); max-width: calc(95% - 10px); padding: 0px 0px; } */ .hexPortfolioWrap { padding: 0px; } .hexPortfolioContent ul > li img { width: 80px; height: 75px; margin-right: 15px; } .hexPortfolioList h5 { font-size: 19px; line-height: 20px; } .hexPortfolioContent.stack.four-col > ul > li { max-width: 50%; } .faq-module-section .faq-img { display: none; } .faq-module-section .hero-accordion .accordion-wrapper { max-width: 100%; margin: auto; padding: 0; } .resourcesWrap h5 { min-height: auto; } .faq-module-section .accordion-wrapper { width: 100%; } .popup { top: 50px;} /* Testimonial Slider CSS Responsive Start */ .testimonial-wrap { /* max-width: 720px; */ transform: translateX(10px); } .testimonial-details { max-width: 100%; padding: 0px 50px; } .testimonial-quote:before { left: -50px; top: -15px; } .testimonial-quote:after { right: 0px; bottom: -30px; } testimonial-quote { margin-bottom: 30px; } /* span.testimonial-author-name { font-size: 26px; line-height: 45px; } */ .testimonial-quote p { font-size: 18px; line-height: 26px; } /* Testimonial Slider CSS Responsive End */ } @media only screen and (max-width: 1023px) and (min-width: 768px){ .hide-tablet{display: none;} ul.sub-menu li a{font-size: 18px;} h2 {font-size: 36px; line-height: 42px; margin-bottom: 23px; } /* blockquote p{font-size: 30px; line-height: 42px;}*/ } @media only screen and (max-width: 768px){ /* POPUP-STYLES BLOG TEMPLATE AI OVERVIEW START */ #closePopup{ padding: 6px; height: 40px; width: 40px; top: 90px; right: 20px; } .popup-content { width: 90%; padding: 30px 20px 20px; } .popup-title { font-size: 20px !important; line-height: 28px !important; margin-bottom: 8px !important; } .popup-description { font-size: 16px !important; line-height: 24px !important; margin-bottom: 18px !important; } .close-btn { top: 10px; right: 10px; font-size: 20px; width: 25px; height: 25px; } .disclaimer { font-size: 12px !important; line-height: 18px !important; margin-top: 15px !important; } /* POPUP-STYLES BLOG TEMPLATE AI OVERVIEW END */ .topbar { margin-top: -13px; } .hero-bg.hero-desktop{display: none;} .hero-bg.hero-tablet {display: block; } .desktop-bg { display: none; } .tablet-bg { display: block; } img.img-desktop{display: none;} img.img-tablet{display: block;} .hero-text { width: 100%; max-width: 100%; margin: 30px auto 0; } .hero-content-right { width: 100%; margin: auto; text-align: center; } .hero-text h1, .hero-text h1 span { text-align: center; } .hero-text p { text-align: center; max-width: 100%; } .hero-text .intro-top-text span { display: inline; width: 100%; text-align: center; } .hero-button { text-align: center; } .learn-btn { margin: 20px auto; } /* .hero-image { display: none; }*/ .hero-content-right:before, .hero-content-right:after { display: none; } .resourcesWrap { flex: 100%; max-width: 100%; margin: 0 0px 25px; } .animated-card-head { padding: 0px 0px; } .col2-stats-wrap { gap: 0px; } .leftSide-stats-2col, .rightSide-stats-2col { max-width: 100%; min-height: auto; } .statsCounterContent { flex-direction: row; } .col3-stats, .col2-stats { padding: 50px 0px; } .teamWrap { flex: calc(50% - 25px); max-width: calc(50% - 25px); margin: 0 0px 50px !important; } .faq__accordion-wrapper { width: 100%; } #faq__accordian-main-wrapper { min-height: auto; padding: 0; } .faq__accordion-content { padding-bottom: 35px; padding: 10px 30px 0px 20px; } .faq__accordion-content p { margin-bottom: 30px; } .contentImg { top: 0; width: 100%; position: relative; transform: none; } /* .tabs { display: block; } .tab { width: 100%; }*/ .hexPortfolioContent ul > li, .hexPortfolioContent.stack ul > li { max-width: 100%; display: block; width: 100%; } .light-color-font .hexPortfolioWrap a.learn-btn { margin: auto; } .hexPortfolioContent.three-col > ul > li { max-width: 100%; width: 100%; } .footer-wrap-logo, .footer-logo-widget, .footer-wrap-menu { width: 100%; max-width: 100%; } ul.social-share { justify-content: center; } .footer-widgets-menu { padding: 0; } /* Single Post Page CSS Start */ .blog-page-mitratech-wrapper .blogbg.hero-main { margin-top: 0px; } .blogbg.hero-main { margin-top: 50px; } /* .blogbg .hero-wrap { flex-direction: column-reverse; }*/ .post-meta { width: 100%; justify-content: center; } ul.blog-social-share { justify-content: center; } .blog-wrap { padding-right: 0; max-width: 100%; } .number-list ol { margin-left: 40px; } ol > li:before { left: -45px; font-size: 18px; border: 2px solid #fc552e; width: 25px; height: 25px; } .blog-wrap h6 { margin-bottom: 10px; font-size: 20px; line-height: 28px; } .blog-Row.flex-space-c { justify-content: center; } .featured-articles-wrap { align-items: flex-start; } .articals { flex: calc(50% - 10px); max-width: calc(50% - 10px); margin: 0 10px 0px; } .footer-cta-banner-text h5 { font-size: 20px; line-height: 28px; } .footer-cta-banner-text .button { font-size: 15px; padding: 12px 25px; border: 0px; } .quote .post-meta { justify-content: flex-start; margin-left: 0px; } /* Single Post Page CSS End */ .footer div#footer_list_d, .footer .container-fluid .container .col-lg-9 .border-bottom { margin: 0 !important; justify-content: center !important; } } @media only screen and (max-width: 767px){ /* .container { max-width: 100%; padding: 0px 15px;}*/ .hide-mobile{display: none;} /*blockquote p {font-size: 23px; line-height: 32px;} blockquote { font-size: 24px; line-height: 32px; padding: 40px 40px; margin-top: 31px; margin-bottom: 32px; }*/ p.alignright img { width: auto; } ol { margin: 41px 0 48px; } ol > li { margin-left: 0px; margin-bottom: 16px; } ol > li:before { left: 0px; top: 0px; width: 49px; height: 49px; font-size: 27px; margin-bottom: 9px; } ol > li strong{margin-bottom: 9px; color: #333333;} .header{padding: 20px 10px 20px;} .hero-main:before { height: 150px; width: 300px; top: 10px; } body.no-topbar .hero-main { padding: 80px 0px 80px; } .learn-btn { font-size: 15px; display: block; margin-top: 30px; } .button, button, body .frm_forms .frm_form_fields .frm_submit button[type="submit"] { font-size: 14px; padding: 12px 10px 13px; } .BUbar ul > li { width: 100%; } .col4-stats-content { width: 100%; } .clients-wrap .clients-content { gap: 0; } .tab { width: 100%; border-bottom: 1px solid #ED5B3E; } .tab.active { border-bottom: none; } .tabs-content { padding: 0; } .tabInContent h6 { font-size: 18px; } .tabInContent span { font-size: 17px; line-height: 25px; margin-bottom: 10px; } .tabInImg, .tabInContent { max-width: 100%; } .tabInImg img { max-width: 100%; } .teamWrap { flex: 100%; max-width: 100%; margin: 0 auto 50px !important; } .footer-widgets-menu { display: block; } .footer-widgets-menu > .widget_nav_menu { width: 100%; padding: 0px 0px; } .footer-wrap-menu .menu { margin-left: 0; } .faq__accordion-wrapper { padding: 25px 10px 25px 10px; } .faq__accordion-content { padding: 10px 0px 0px 0px; } a.faq__accordian-heading h4 { margin: 0 0 0 10px; } .faq__accordion-content p { margin-left: 10px; } .count-content { padding: 0 15px 0px 15px; top: 0px; flex-direction: column; justify-content: center; text-align: center; gap: 0px; } .count-content .count, .count { font-size: 40px; line-height: 50px; } .statsCounterContent p { font-size: 15px; line-height: 20px; } .col2-portfolio .flex { width: unset; } .portfolioWrap { margin: 25px auto; } .portfolioContent, .portfolioMedia { padding-left: 0px; padding-right: 0px; text-align: center; } .lightHeading, .lightHeading span { font-size: 29px; line-height: 40px; } .portfolioContent a { margin: 0px 0px 20px; } .portfolioWrap ul { margin-left: 15px; } .col3-stats, .col2-stats { padding: 25px 0px; } .leftSide-stats-3col, .rightSide-stats-3col { gap: 15px; align-items: flex-start; } .col4-stats { padding: 50px 0; } .col4-stats-wrap { margin: 10px 0px 50px; } .resourcesRow { padding: 0px 0px; } .clients-wrap .clients-content .slick-track { margin: 15px 0px 30px 10px; } .clients-wrap .clients-content .clients-logo { margin-right: 15px; } .statsCounterWrap { height: 100%; } .hexPortfolio { padding: 25px 0px; } .hexPortfolio .container { padding: 0 30px; } .hexPortfolioWrap { align-items: flex-start; margin: 0px auto 15px; flex: 100%; max-width: 100%; display: block; text-align: center; padding: 0px; } .hexPortfolioContent ul > li img { height: 75px; margin: 0px auto 15px; } .hexPortfolioContent.stack.four-col > ul > li { max-width: 100%; } #topBtn { bottom: 5px; right: 10px; } .footer-wrap-menu .menu > li{ padding-left: 0; } .topbar { margin-top: -13px; } .animated-card-main { background-position: 100% 98%; } .me-3 { margin-right: 0.5rem !important; } /* Demo Request Page CSS Start */ .formSection { padding: 50px 0px; } .demo-request-form { padding: 0px; } /* Demo Request Page CSS End */ /* Single Post Page CSS Start */ .author-meta { /* text-align: center;*/ /* margin-top: 20px;*/ } .post-links ol { margin: 0 0 0px 10px; } .take-a-look-text, .take-a-look-image { max-width: 100%; padding: 0px; } .take-look-content-wrap { flex-direction: column-reverse; gap: 30px; } .footer-widgets-menu ul.sub-menu > li { padding-left: 0px; } #footer-menu-widgets .menu-item-has-children > a { margin-bottom: 10px; text-align: center; } .footer-widgets-menu ul.sub-menu li a { text-align: center; } .articals { flex: 100%; max-width: 100%; margin: 15px 0px; } .number-list ol { margin-left: 0px; } ol > li:before { left: -40px; top: 2px; width: 25px; height: 25px; font-size: 13px; margin-bottom: 0px; } blockquote { padding: 40px 10px 40px 40px; margin: 0px; } blockquote::before { content: "“"; font-size: 40px; line-height: 39px; position: absolute; font-weight: 700; left: 15px; top: 40px; } blockquote.quote p { margin-bottom: 25px; font-size: 16px; line-height: 24px; } /* Single Post Page CSS End */ /* Testimonial Slider CSS Responsive Start */ .testimonial-quote { margin-bottom: 20px; } .testimonial-wrap { gap: 10px; padding: 0px 0px; } .testimonial-details { padding: 0px 20px; } .testimonial-quote:before { width: 25px; height: 23px; left: -25px; top: -10px; } .testimonial-quote:after { right: 0px; bottom: -10px; width: 25px; height: 23px; } .testimonial-author-details { line-height: normal; } /* Testimonial Slider CSS Responsive End */ .footer-cta-banner-wrap.text-left { min-height: auto; } } @media only screen and (max-width: 600px){ .author-avatar { width: 100%; text-align: center; margin: 0 0 20px; } span.author-name { width: 100%; text-align: center; } .quote.author-meta, .quote .post-meta .author-avatar, .quote span.author-name { width: 100%; text-align: left; } .articals span.author-name { text-align: left; } } @media only screen and (max-width: 500px){ .hero-main .container.lg { padding: 0px 15px; } .hero-text { padding: 20px 10px 10px;} } @media only screen and (max-width: 480px){ .popup-inner { width: 100%; height: auto; } .col3-stats-wrap, .leftSide-stats-3col, .rightSide-stats-3col { display: block; margin: 0px; } .col3-stats-wrap .col3-stats-content:nth-child(2) { margin-bottom: 20px; padding: 0px; } .leftSide-stats-3col > div, .rightSide-stats-3col > div { width: 100%; margin-bottom: 10px; } .ai-overview { display:block !important; } .author-name { padding-bottom: 5px; } .reading-time:after{ display:none !important; } } @media only screen and (max-width: 375px){ .container { max-width: 100%; padding: 0px 30px;} .logo { width: 200px; } .humburger-btn { right: -5px; } ul.main-menu > li > ul > li > a { padding: 15px 0px; } .demoRequest .demo-request-form { padding: 10px 25px; } } @media only screen and (max-width: 370px){ } /* Hustle Tech Style Guide Start */ /* Text */ .extra-light { color: #7f7f7f; font-weight: 100; } .lighter { color: #7f7f7f; font-weight: 200; } .light { color: #7f7f7f; font-weight: 300; } .large-body { font-size: 20px; color: #7f7f7f; letter-spacing: 0; } /* Hustle Tech Style Guide End */ } @keyframes parallaxMotion { 0% { transform: perspective(500px) translateX(0) translateY(0) rotateX(0deg) rotateY(0deg); } 25% { transform: perspective(500px) translateX(-10px) translateY(5px) rotateX(-2deg) rotateY(2deg); } 50% { transform: perspective(500px) translateX(10px) translateY(-5px) rotateX(2deg) rotateY(-2deg); } 75% { transform: perspective(500px) translateX(-5px) translateY(10px) rotateX(-1deg) rotateY(1deg); } 100% { transform: perspective(500px) translateX(0) translateY(0) rotateX(0deg) rotateY(0deg); } } .row .hbspt-form { width: auto; margin-top: -150px; /*this might need to be changed to a variable as it should depend on screen size*/ background: white; box-shadow: 0px 2px 15px #00000029; border-radius: 8px; border-bottom: 5px solid #ED5D3E; background-color: #fff; padding: 30px; } @media(max-width:1280px){ .blog-page-mitratech-wrapper, .blog-page-mitratech-wrapper .blogbg.hero-main { margin-top: 0px !important; } } @media only screen and (max-width: 1079px){ .row .hbspt-form { margin: auto; } } .blog-feature-img img.abs-bg { border-radius: 30px; box-shadow: 0 0 10px 0 rgba(4.000000000000002, 20.000000000000032, 44, 0.19); } .blog-page-mitratech-wrapper .single-post-container .site-main .blog-wrap { /* width: 100%; max-width: calc(100% - 390px); padding-right: 85px;*/ } .blog-page-mitratech-wrapper .hero-wrap .hero-text .author-avatar:empty { display: none; } /* Gated Template CSS Start (Mitratech) */ .gated-hero-main { min-height: 200px; background-size: cover; background-repeat: no-repeat; background-position: bottom; display: flex; align-items: center; justify-content: flex-start; color: #fff; } .gated-hero-wrap { max-width: 50%; } .gated-section { padding: 50px 0px 120px; } .gated-form { box-shadow: 0 10px 25px #0000000D, inset 0 -11px 0 0 #ed5b3e; border-radius: 10px; padding: 32px 48px; max-width: 467px; background-color: #fff; margin-top: -180px; } .gated-content { max-width: calc(100% - 500px); padding-right: 50px; } @media only screen and (max-width: 1023px) { .gated-hero-wrap { max-width: 100%; } .gated-form { max-width: 50%; margin-top: 0; } .gated-content { max-width: 50%; } } @media only screen and (max-width: 767px) { .gated-main.flex.flex-space-b { display: block; } .gated-content, .gated-form { max-width: 100%; } .gated-content { padding-right: 0px; } .gated-form { margin-top: 50px; padding: 20px 20px; } } /* Gated Template CSS End (Mitratech) */