/* Theme Name:ecomlogisticspark Theme URI:https://#/ Author:ecomlogisticspark Team Author URI:https://ecomlogisticspark.com/ Description:ecomlogisticspark theme for home website Version:1.0.0 License:GNU General Public License v2 or later License URI: Text Domain:ecomlogisticspark */ @import url("assets/css/responsive.css"); :root { --white:#fff; --black:#000; --blue:#ea2401; --grey-900:#101828; --main-font:"Rajdhani", sans-serif; --jost:"Jost", sans-serif; scroll-behavior:smooth; } @keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} body *, html * {box-sizing:border-box;} body {font-size:20px; line-height:1.5; font-family:var(--jost); font-weight:400; margin:0 auto; overflow-x:hidden;} .container {margin:0 auto; width:100%; max-width:1440px; padding:0 32px;} .container-fluid {width:100%; padding:0 32px;} .row {margin:0 -32px;} ul {margin:0; padding-left:20px; color:var(--grey-700);} ol {padding-left:20px; color:var(--grey-700);} .dn {display:none!important;} h1, h2, h3, h4, h5, h6 {font-family:var(--main-font); margin:0; line-height:1.1;} h1 {font-size:80px; font-weight:700;} h2 {font-size:56px;} h3 {font-size:38px;} h4 {font-size:32px;} h5 {font-size:26px;} h6 {color:var(--grey-900);} h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {font-weight:300;} .greybg {background:#F9FAFB;} .flex {display:flex;} .btn {justify-content: center; align-items: center; gap: 8px; display: inline-flex; font-size: 18px; transition: all 0.5s; font-weight: 600; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); line-height: 28px; border-radius: 24px; border: 1px solid var(--grey-900); cursor: pointer; background: var(--grey-900); color: var(--white); overflow:hidden; width:fit-content;} .btn a, .btn-holo a {padding:10px 30px;} .btn:hover {background: none; color: var(--grey-900);} .btn a, .btn-holo a {color:inherit; text-decoration:none;} .btn-holo {justify-content: center; align-items: center; gap: 8px; display: inline-flex; font-size: 18px; transition: all 0.5s; font-weight: 600; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); line-height: 28px; border-radius: 24px; border: 1px solid var(--grey-900); cursor: pointer; background: transparent; color: var(--grey-900); overflow:hidden; width:fit-content;} .btn-holo:hover {background: var(--grey-900); color: var(--white);} .btn.blue-btn {background:var(--blue); border-color:var(--blue);} .btn.blue-btn:hover {background:transparent; color:var(--blue);} .btn-holo.blue-btn {border-color:var(--blue); color:var(--blue);} .btn-holo.blue-btn:hover {background:var(--blue); color:var(--white);} .btn-holo.white-btn {border-color:var(--white); color:var(--white);} .btn-holo.white-btn:hover {background:var(--blue); border-color:var(--blue); color:var(--white);} .text-center .btn-holo, .text-center .btn{margin:auto;} #bodyinside p {font-size:18px; color:var(--grey-700); margin:0;} #bodyinside ul {font-size:18px;} #bodyinside ul li:not(:last-child){margin-bottom:16px;} #bodyinside a {text-decoration:none; color:inherit;} #bodyinside p a:not([class]) {text-decoration:underline;} /* header */ header {position:sticky; top:0; padding:20px 0;z-index:9999; font-family:var(--main-font);background-color: #f0f1ee;} header.sticky {background:#ecedeb; box-shadow: rgba(16, 24, 40, 0.04) 0px 8px 8px -4px;} header .brand a {display:flex;} header .navbar-collapse ul {list-style:none; padding-left:0;} header .navbar-collapse ul li a {text-decoration:none;} .search-form {display: flex; align-items: center;} .search-submit {border: 0; background: none; padding: 0; display: flex; cursor:pointer;} .search-submit:hover svg {filter: brightness(0) saturate(100%) invert(67%) sepia(44%) saturate(2874%) hue-rotate(154deg) brightness(86%) contrast(76%);} .search-form input:-webkit-autofill {background-color::inherit;} header ul.sub-menu li.menu-item-has-children > a {font-weight: 600; color: var(--black); gap: 8px; display: flex; align-items: center; font-size: 20px;} header ul.sub-menu li.menu-item-has-children > a:before {content: ''; width: 6px; height: 7px; background: var(--red);} header .menu-item-has-children ul {gap:20px; display:flex; margin-top:20px; flex-direction:column;} header .menu-item-has-children ul li a {color:var(--white); font-weight:500; border-bottom:2px solid transparent;} header .menu-item-has-children ul li:hover > a {border-color:var(--white)} /* footer */ footer {background: url(/wp-content/uploads/2025/07/footer-bg.png) no-repeat center; background-size: cover;} .card section .title {color: var(--white); font-size: 24px; font-weight: 700; font-family: var(--main-font);} .card section:has(.title) {margin-bottom:20px;} .card section > p {color: var(--white); font-size: 24px; font-style: normal; font-weight: 600; line-height: 32px; margin: 0 0 20px;} .card section ul {padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px;} .card section li a {color: var(--white); font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: -0.1px; text-decoration: none;} .card section li a:hover {color:var(--blue);} .navori-logo-footer {display: flex; flex-direction: column; gap: 10px;} .navori-logo-footer p {font-size: 12px; margin:0} footer .copyright {padding-top: 24px; border-top: 1px solid var(--white); color:var(--white);} footer .social-icons {display: flex; gap: 20px; align-items:inherit;} footer .social-icons a {display:inline-flex;} footer .social-icons a img {filter:brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(0%) hue-rotate(150deg) brightness(104%) contrast(103%);} footer .social-icons a:hover img{filter:brightness(0) saturate(100%) invert(67%) sepia(44%) saturate(2874%) hue-rotate(154deg) brightness(86%) contrast(76%);} footer .card:has(.custom-html-widget) {max-width:25%;} .card .custom-html-widget p {color:var(--white); font-size:16px; } .card .custom-html-widget img {filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(300deg) brightness(107%) contrast(100%);} .vc_section .wpb_text_column:has(video) {overflow:hidden;} .vc_section p:has(video) {margin:-45px 0;} /* home */ #homebanner {position:relative; color:var(--white);} #homebanner::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 27, 36, 0.8); z-index: 0;} #homebanner h1 {text-transform:uppercase;} #homebanner > .vc_row {z-index:1; display:flex; align-items:center;} #homebanner .vc_col-sm-5 > div {padding-right:25px;} #homebanner .vc_single_image-wrapper {display: flex; justify-content: end;} #homebanner img {width: 100%; max-width:600px; height: 100%; max-height:600px; border-radius: 50%; border: 20px solid rgba(255, 255, 255, 0.1); -o-object-fit: contain; object-fit: contain;} .feature-inner > .vc_col-sm-4 {box-shadow: 0 0 10px -2px rgba(107,125,111, 0.2); border-radius: 10px; transition: all 0.2s;} .feature-inner > .vc_col-sm-4:hover {transform: translateY(-10px); box-shadow:rgba(31, 45, 61, 0.125) 0px 1rem 3rem !important;} .feature-inner .vc_col-sm-8 .wpb_text_column {padding:20px; border-left:2px solid #eee;} .feature-inner > .vc_col-sm-4 > .vc_row-fluid {gap:0;} .feature-inner .vc_col-sm-4:has(img) {align-items: center; justify-content: center;} .feature-inner img {width:130px; height:auto;} #how_we_work {background: var(--blue);} #how_we_work > .vc_row-fluid:not(.step) {color:var(--white);} #how_we_work .step .vc_col-sm-12 {display:flex; flex-wrap:wrap; flex-direction:row;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid {position: relative; /*height: 60vh;*/ height:264px; flex: 1 1 0%; transition: 0.7s; overflow: hidden; background: var(--white); border-radius: 24px;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid.active {flex: 8 1 0%;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid .vc_col-sm-6:has(.vc_single_image-wrapper ) {display:none;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid.active .vc_col-sm-6:has(.vc_single_image-wrapper ) {display:block;} #how_we_work .step img {object-fit: cover; width: 100%; height: 266px;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid.active .vc_col-sm-6 .wpb_text_column {padding: 20px 20px 20px 0;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid .vc_col-sm-6 {width:100%;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid:not(.active) .vc_col-sm-6 .wpb_text_column {padding:20px; align-items: center; height: 100%; justify-content: center;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid:not(.active) p, #how_we_work .step .vc_col-sm-12 > .vc_row-fluid:not(.active) h4 {display:none;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid:not(.active) h3 {text-orientation: upright; writing-mode: sideways-lr;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid h3 {text-transform:uppercase;} #counter {background-image: url(/wp-content/uploads/2025/08/achievement.webp); height: 350px; background-size: cover; background-position: center; background-attachment: fixed; display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1;} #counter::before {background:#171717; position:absolute; top:0; left:0; width:100%; height:100%; content:''; display:block; opacity:0.8;} #counter > .vc_row {z-index:0;} #counter h3 {color:var(--white); animation-duration: 1s; animation-delay: 0s;} #counter h3 span {font-weight:inherit;} #counter p {color:var(--blue);} #counter h2, #counter h2+p {color:var(--white)} #outer-service {max-width: 1440px; margin: auto; overflow: hidden; display:flex; width: 100%; padding:0 32px;} #service {transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1) 0s; padding:0;} #service .vc_col-sm-2 {border:1px solid #eee;border-radius: 10px; padding: 20px; min-width: calc(24% - 8px);} #service .vc_col-sm-2 h3 {color: var(--blue); border-bottom: 2px solid var(--blue); padding-bottom: 15px;} #testimonial {background: #F5F5F5; border-radius: 20px; padding: 40px; overflow:hidden;} #testimonial .slide {transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1) 0s; padding:0; display:flex; gap:40px;} #testimonial h3 {color:var(--blue)} #testimonial h5 {font-weight:400;} #testimonial .divTableRow {min-width: calc(33% - 22px); gap: 10px; display: flex ; flex-direction: column;} #testimonial .rating {display: flex; flex-direction: row; gap: 15px; justify-content: center;} #testimonial .rating img {width: 100%; max-width:30px; filter: brightness(0) saturate(100%) invert(59%) sepia(52%) saturate(2152%) hue-rotate(4deg) brightness(109%) contrast(105%);} #testimonial div:has(>p) {text-align: justify; border-top: 2px solid var(--white); padding-top: 10px;} /* feature */ #faeture-banner {background:var(--blue); position:relative; padding-bottom:120px; padding-top:120px; color:var(--white);} #faeture-banner:after { background: url(/wp-content/uploads/2025/08/wave-effects.png) repeat; position: absolute; bottom: -2px; width: 6400px; height: 100px; animation: river-wave 35s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0); content:'';} #faeture-banner:before { background: url(/wp-content/uploads/2025/08/wave-effects.png) repeat; position: absolute; bottom: -45px; width: 6400px; height: 100px; animation: river-wave 20s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite; transform: translate3d(0, 0, 0); content:'';} @keyframes river-wave { 0% {margin-left: 0;} 100% {margin-left: -1600px;} } @keyframes swell { 0%, 100% {transform: translate3d(0,-45px,0);} 50% {transform: translate3d(0,5px,0);} } #faeture-banner .design {background: var(--white); padding: 20px 40px; border-radius: 50px 0 50px 0; max-width: 500px; margin-left: auto; color: initial; transform:scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg); transition:all 1s;} #faeture-banner .design:hover {transform:scale(1.1); border-radius: 0 50px 0 50px;} #onboarding .vc_col-sm-4 {border-radius: 20px; padding: 20px; box-shadow: 0 0 10px -2px rgba(107, 125, 111, 0.2); transition: all 0.2s;} #onboarding .vc_col-sm-4:hover {transform: translateY(-10px); box-shadow:rgba(31, 45, 61, 0.125) 0px 1rem 3rem !important;} #onboarding h5 {transition: all 0.2s;} #onboarding .vc_col-sm-4:hover h5 {color:var(--blue);} #platform {background:var(--blue); position: relative; margin-top:60px; margin-bottom:60px; color:var(--white)} #platform::before {content: ''; width: 102%; height: 68px; transform: rotate(-2deg); background: var(--blue); position: absolute; top: -35px; left: 0;} #platform::after {content: ''; width: 102%; height: 68px; transform: rotate(-2deg); background: var(--blue); position: absolute; bottom: -33px; left: -5px;} #platform .vc_col-sm-4 {border-radius: 20px; padding: 20px; box-shadow: 0 0 10px -2px rgba(255, 255, 255, 0.2); transition: all 0.2s; border:1px solid;} #platform .vc_col-sm-4:hover {transform: translateY(-10px); box-shadow:rgba(31, 45, 61, 0.125) 0px 1rem 3rem !important; background:var(--white);} #platform .vc_col-sm-4:hover h5 {color:var(--blue);} #platform .vc_col-sm-4:hover p {color:#000;} /* pricing */ #pricing .vc_tta-tabs-list a {border:0; background:none; color:var(--blue);} #pricing .vc_tta-tabs-list .vc_active a {background:var(--blue); color:var(--white);} #pricing .vc_tta-panels {background:none; border:0;} #pricing .vc_tta-panel-body {background:none; border: 0; padding: 0;} #pricing .vc_tta-panel-body .vc_col-sm-4:has(.wpb_raw_html) { border:1px solid #CCCCCC; border-radius:20px; transition: all 0.2s;} #pricing .vc_tta-panel-body .vc_col-sm-4:has(.wpb_raw_html):hover {transform: translateY(-10px); box-shadow:rgba(31, 45, 61, 0.125) 0px 1rem 3rem !important;} #pricing .vc_col-sm-4 h4 {text-align: center; border-bottom: 1px solid #ccc; padding: 20px; font-size: 40px; font-weight: 500;} #pricing .vc_col-sm-4 lable {text-align: center; color: var(--blue); padding:0 20px;} #pricing .vc_col-sm-4 h5, #pricing .vc_col-sm-4 p {text-align:center; padding:0 20px;} #pricing .vc_col-sm-4 p+span {text-align: center; padding: 10px 20px; background: var(--blue); color: var(--white); font-weight: 500; font-family: var(--main-font); font-size: 26px;} #pricing .vc_col-sm-4 ul {margin:0 20px;} #pricing .vc_col-sm-4 ul li::marker {color:var(--blue);} #pricing .vc_col-sm-4 .btn {margin:0 auto 20px;} #pricing .vc_col-sm-4 .btn a {padding-right: 50px; padding-left: 50px; font-family: var(--main-font);} /* partner */ #partners {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;} .partner {border: 1px solid #cccc; border-radius: 10px; overflow: hidden; width: calc(20% - 20px); text-align: center; transition: all 0.2s; padding-top: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;} .partner:hover {transform: translateY(-10px); box-shadow:rgba(31, 45, 61, 0.125) 0px 1rem 3rem !important;} .partner h3 {padding: 10px; background: var(--blue); color: var(--white); font-weight: 500; font-size: 24px; margin-top:10px; width:100%;} .partner img {filter:grayscale(1); transition: all 0.2s;} .partner:hover img {filter:none;} /* form */ #quick, #quick_inter {display: flex; flex-direction: column; gap: 20px;} #quick .full, #quick_inter .full {width: 100%; display: flex; flex-direction: column; position:relative;} #quick .half, #quick_inter .half {display:flex; gap:20px;} #quick input, #quick select, #quick_inter input {border: 0; font-size: 20px; border-bottom: 1px solid #E6E8EC; outline: none; height: 30px; z-index: 1; background: transparent;} #quick label, #quick_inter label {position: relative; bottom: -30px; transition:all .5s;} #quick div:has( > input:valid) label, #quick div:has( > input:focus) label, #quick_inter div:has( > input:valid) label, #quick_inter div:has( > input:focus) label {bottom:0;} #quick div:has( > select:valid) label, #quick div:has( > select:focus) label {bottom:0;} #quick button, #quick_inter button {display: inline-flex; font-size: 18px; transition: all 0.5s; font-weight: 600; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); line-height: 28px; border-radius: 24px; border: 1px solid var(--blue); cursor: pointer; padding:10px 30px; width:max-content; background:var(--blue); color:var(--white); font-family:var(--main-font);} #quick .error, #quick_inter .error {position: absolute; bottom: 0; font-size: 16px; color: red; right: 0;} #quick label sup, #quick_inter label sup {color:red;} /* about */ #about-banner {background:var(--blue); color:var(--white); position: relative; padding: 100px 0;} #about-banner::before {background: url(/wp-content/uploads/2025/08/about_bg.jpg); content: ''; width: 100%; height: 100%; top: 0; position: absolute; background-position: bottom; mix-blend-mode: multiply;} #banner {padding:0; position:relative} #banner::before {background:var(--blue); width:100%; height:100%; position:absolute; content:''; top:0; left:0; mix-blend-mode: color;} #banner .vc_row, #fullbanner .vc_row {max-width:100%; padding:0;} #fullbanner {padding:0;} /* blog */ .blog_grid {flex-wrap:wrap; margin-top:32px; margin-bottom:32px;} .blog_grid .grid-inner {border-radius: 20px; background: var(--white); box-shadow: 0 0 10px -2px rgba(107, 125, 111, 0.2); display: flex; flex-direction: column; overflow: hidden; transition: 1s ease; height: 100%;} .imagebox {position:relative; overflow:hidden;} .imagebox img {width: 100%; object-fit: cover; height: 100%; transition: 1s ease;} .grid-inner:hover .imagebox img {transform: scale(1.1);} .imagebox .subtitle {padding: 15px 32px; font-weight: 600; color: var(--white); position: absolute; bottom: 0; font-size: 24px; text-transform: capitalize; width: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -70%, #101323 85.5%);} .blog_grid .box {padding: 24px 32px; display: flex; flex-direction: column; gap: 24px;} .blog_grid .box p {margin: 0; color: var(--black);} .blog_grid .box label {color:var(--blue);} .recent-post {border: 2px solid #efefef; border-radius: 10px; overflow:hidden; padding:20px;} .recent-post h4 {color: var(--blue); border-bottom: 2px solid var(--blue); font-weight:600; margin-bottom:20px} .recent-post .list-post {display: flex; flex-direction: column; gap: 20px;} .recent-post .list-post a {display: flex; gap: 20px; box-shadow: 0 0 10px -2px rgba(107, 125, 111, 0.2); border-radius: 10px; overflow: hidden; text-decoration:none; color: var(--black); transition: all 0.2s;} .recent-post .list-post a:hover {transform: translateY(-10px); box-shadow: rgba(31, 45, 61, 0.125) 0px 1rem 3rem !important;} .recent-post .list-post a > div {width: calc(100% - 170px); display: flex; flex-direction: column; gap: 10px; padding: 10px 0;} .recent-post .list-post a > div p {margin:0;} /* {display: flex; gap: 20px; border: 2px solid #efefef; border-radius: 10px;} */ /* detail */ .breadcum {border-bottom:1px solid #eaeaea;} .breadcum .vc_col-sm-12 {max-width:1440px; margin:auto; padding:0 32px;} .breadcum ul {margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; padding-bottom:20px;} .breadcum ul a {color:var(--black); text-decoration:none;} .breadcum ul a:hover {color:var(--blue);} .post-detail {margin: auto; max-width: 1440px; display: flex; gap: 32px; padding: 32px;} .post-detail .banner {border-radius: 10px; overflow: hidden; max-height: 570px; margin-bottom:20px;} .post-detail .date {margin-bottom:10px; color:var(--blue);} /* result */ .result {max-width: 1440px; margin: auto; padding: 60px 32px;} .link-list {max-width: 1024px; display: flex; flex-direction: column; gap: 40px; margin-top: 30px;} .link-list a {box-shadow: 0 0 10px -2px rgba(107, 125, 111, 0.2); border-radius: 10px; overflow: hidden; text-decoration:none; color: var(--black); transition: all 0.2s; padding:20px;} .link-list a:hover {transform: translateY(-10px); box-shadow: rgba(31, 45, 61, 0.125) 0px 1rem 3rem !important;} /* Extra small devices (phones) */ @media (max-width: 575.98px) { #bodyinside {overflow:hidden;} #bodyinside p, #bodyinside ul {font-size:16px;} #dss-service .vc_col-sm-2, footer .addresscontent .card {width:100%;} #counter {height:auto;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid.active .vc_col-sm-6 .wpb_text_column {padding-left:20px;} footer .card:has(.custom-html-widget) {max-width:100%;} /* partne */ .partner {width:100%;} /* pricing */ #pricing .vc_tta-tabs-container {display:block;} #pricing .vc_tta-panel-heading {display:none} /* from */ #quick .half, #quick_inter .half {flex-wrap:wrap;} #service {flex-direction: row;} #service .vc_col-sm-2 {min-width: calc(100% - 0px);} #testimonial .divTableRow {min-width: calc(100% - 0px);} } @media (max-width: 479.98px) { h1 {font-size:24px; line-height:30px;} h2 {font-size:22px; line-height:28px;} .aligncenter h2, h3 {font-size:20px; line-height:26px;} /* home */ #homebanner > .vc_row {flex-direction: column-reverse;} } @media (min-width: 480px) and (max-width: 575.98px) { h1 {font-size:32px; line-height:44px;} h2 {font-size:26px; line-height:42px;} .aligncenter h2, h3 {font-size:24px; line-height:32px;} } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) and (max-width: 767.98px) { #bodyinside {overflow:hidden;} h1 {font-size:40px; line-height:50px;} h2 {font-size:30px; line-height:42px;} .aligncenter h2, h3 {font-size:26px; line-height:34px;} footer .addresscontent .card {width:calc(50% - 15px);} footer .card:has(.custom-html-widget) {max-width:100%;} /* home */ #homebanner > .vc_row {flex-direction: column-reverse;} #counter {height:auto;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid.active .vc_col-sm-6 .wpb_text_column {padding-left:20px;} #service {flex-direction: row;} #service .vc_col-sm-2 {min-width: calc(50% - 15px);} #testimonial .divTableRow {min-width: calc(50% - 20px);} /* pricing */ #pricing .vc_tta-tabs-container {display:block;} #pricing .vc_tta-panel-heading {display:none} /* partner */ .partner {width:calc(50% - 10px);} /* form */ #quick .half, #quick_inter .half {flex-wrap:wrap;} } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991.98px) { h1 {font-size:48px; line-height:60px;} h2 {font-size:34px; line-height:42px;} .aligncenter h2, h3 {font-size:28px; line-height:36px;} footer .addresscontent .card {width:calc(33.33% - 20px);} footer .card:has(.custom-html-widget) {max-width:100%;} /* home */ #homebanner .vc_col-sm-5 {width:50%;} .feature-inner {flex-wrap:wrap;} .feature-inner > .vc_col-sm-4 {width: calc(48% - 1px);} #service .vc_col-sm-2 {min-width: calc(50% - 15px);} #testimonial .divTableRow {min-width: calc(50% - 20px);} /* partner */ .partner {width:calc(33% - 11px);} .blog_grid > .vc_col-sm-4 { width: calc(50% - 15px);} } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1249.98px) { h1 {font-size:54px; line-height:66px;} h2 {font-size:38px; line-height:42px;} .aligncenter h2, h3 {font-size:28px; line-height:36px;} .aligncenter h2 {margin-right:10%;} header .navbar-collapse.collapse > ul, header .navbar-collapse.collapse, header #desktop .buttonsnav {gap:15px} header .navbar-collapse.collapse a {font-size:16px; padding: 8px 5px !important;} .btn, .btn-holo {font-size:16px;} .btn a, .btn-holo a { padding:8px 20px;} header .brand a img {width: 140px; height: auto;} footer .addresscontent {gap:30px 0;} footer .addresscontent .card {width:calc(33.33% - 20px);} /* home */ #service .vc_col-sm-2 {min-width: calc(33% - 17px);} /* partner */ .partner {width:calc(25% - 15px);} /* blog*/ } @media (min-width: 1250px) and (max-width: 1499.98px) { header .navbar-collapse.collapse > ul, header #desktop .buttonsnav {gap:20px;} header .navbar-collapse .Mega-menu > a {font-size:18px;} .navori-logo-footer {align-items:center} /* home */ .imagebox{height: 350px;} } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1500px) { .navori-logo-footer {align-items:center} .imagebox{height: 300px;} } /* for navigation */ @media (max-width: 991.98px) { .top-sec, header #desktop {display:none;} .top-mobile-sec {background: var(--blue); display: flex; align-items: center; width: 100%; justify-content: center; gap: 10px; padding: 15px 32px; font-size: 16px; min-height: 51px; color: var(--white);} .top-mobile-sec img {width: 20px; height: 20px; filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(300deg) brightness(107%) contrast(100%);} .top-mobile-sec a {color: var(--white); text-decoration: none;} #mobile .first {display: flex; align-items: center; justify-content: space-between;} .navbar-toggle {background:none; border:0; padding:0; cursor:pointer; display:flex; gap:5px; flex-direction:column;} .navbar-toggle span {width: 30px; height: 1px; background: var(--grey-900); border: 1px solid var(--grey-900); transition: all 0.5s; position:relative;} .navbar-toggle span:nth-child(1) {transform: rotate(0deg); top: 0px;} .navbar-toggle span:nth-child(2) {opacity:1;} .navbar-toggle span:nth-child(3) {transform: rotate(0deg); top: 0px;} #mobile {position:relative;} #mobile .first.show .navbar-toggle span:nth-child(2) {opacity:0;} #mobile .first.show .navbar-toggle span:nth-child(1) {transform: rotate(45deg); top: 8px;} #mobile .first.show .navbar-toggle span:nth-child(3) {transform: rotate(-45deg); top: -5px;} #mobile .second {position: absolute; top: 75px; height: calc(100vh - 67px); width: calc(100% + 64px); left: calc(-100vw - 32px); border-top: 1px solid var(--blue); padding: 19px 32px; background: var(--white); transition:all 0.5s; overflow-x:auto;} #mobile .first.show+.second {left:-32px;} #mobile .second ul {list-style:none; padding-left:0; display:flex; flex-direction:column; gap:10px; width:100%;} #mobile .second ul li a {font-weight: 600; color: var(--grey-900);} header .menu-item-has-children ul {margin-top:10px;} #mobile .second .buttonsnav {display: flex; gap: 10px; margin-top: 10px; flex-direction:column;} #mobile .second .buttonsnav > div {margin-right:auto;} #mobile .second a {text-decoration: none;} /* header .second .Mega-menu > a {font-weight:600; color:var(--grey-900);} */ .search-form {position:relative; margin-top:10px;} .search-form:has(input:not(.dn)){background: #F2F4F7;border-radius: 10px; padding-right:10px;} .search-form input {outline: none; background:inherit; border: 0; height: 44px; width: 100%; z-index: 1; border-radius: 10px; padding: 0 10px;} header .Mega-menu.menu-item-has-children {display:flex; flex-direction:row-reverse; flex-wrap:wrap; position:relative; padding-right:10%;} header .second .Mega-menu.menu-item-has-children::before {content:'+'; position:absolute; width:10%; font-weight:600; text-align:center; font-size:20px; right:0;} header .second .Mega-menu.menu-item-has-children > a {width:100%;} #mobile .second .Mega-menu > ul {display:none;} #mobile .second .Mega-menu.minus > ul {display:flex;} header .second .Mega-menu.minus.menu-item-has-children::before {content:'-';} /* footer */ footer {padding:32px 0;} footer .addresscontent {display:flex; gap:30px; flex-wrap:wrap;} footer .copyright {margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;} /* home */ #how_we_work .step .vc_col-sm-12 {flex-direction:column;} #how_we_work .step .vc_col-sm-12 > .vc_row-fluid:not(.active) h3 {writing-mode: horizontal-tb;} .post-detail {display: flex; flex-wrap: wrap-reverse;} .post-detail .banner img {max-width:100%;} .vc_col-sm-4:has(.recent-post) {width:100%;} section:has(.fixedIconNav) {display:none;} } @media (min-width: 992px) { .top-mobile-sec {display:none;} .top-sec {background:var(--blue); display:flex; align-items:center; width:100%; justify-content:space-between; gap:48px; padding:15px 32px; font-size:16px; min-height:51px;} .top-contact {display: inline-flex; gap: 20px; align-items: center; color: var(--white);} .top-contact > div {display: inline-flex; gap: 5px;} .top-contact img {width: 20px; height:20px; filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(300deg) brightness(107%) contrast(100%);} .top-contact a {color:var(--white); text-decoration:none;} .top-sec > section {position: relative; display: flex; width: 50%; justify-content: right; height: 21px;} .top-sec > section .textwidget {display: contents;} .top-sec b {opacity:0; position:absolute; color:var(--white); font-weight:400;} .top-sec b.show {opacity:1;} header #mobile {display:none;} /* header */ header #desktop {display: flex; align-items: center; justify-content: space-between;} header .navbar-collapse, #desktop .buttonsnav {display:flex; gap:30px;} header .navbar-collapse {position:relative;} header .navbar-collapse > ul {display: flex; flex-direction: row; gap: 30px;} header .navbar-collapse > ul > li {display:inline-flex} header .navbar-collapse > ul > li > a {padding:8px 10px; border-bottom:2px solid transparent; color:var(--grey-900); font-weight:600;} header .navbar-collapse > ul > li.menu-item-has-children > a:after {position: relative; content: ''; border-bottom: 2px solid var(--grey-900); width: 5px; height: 5px; display: inline-flex; border-right: 2px solid var(--grey-900); transform: rotate(45deg); left: 10px; top: -5px;} header .navbar-collapse > ul > li.menu-item-has-children:hover > a:after {border-color:var(--blue);} header .navbar-collapse > ul > li > a:hover, header .navbar-collapse > ul > li:has(ul:hover) > a, header .navbar-collapse > ul > li.current-menu-item > a {color:var(--blue); border-color:var(--blue);} header .search-form input {background: var(--blue); outline: none; border: 0; position: absolute; height: 50px; left: -2%; width: 104%; z-index: 1; border-radius: 10px; padding: 0 47px 0 10px; color:var(--white);} header .search-form input::placeholder {color:var(--white);} header .search-form:has(input:not(.dn)) button svg {filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(0%) hue-rotate(150deg) brightness(104%) contrast(103%);} header .search-submit {z-index:2;} header .navbar-collapse > ul > li:has(a+ul.sub-menu) {position:relative} header .navbar-collapse > ul > li > a+ul.sub-menu {position: absolute; width: max-content; display: none; margin-top: 0; top: 46px; padding: 25px 40px; left: -22px; box-shadow: 0px 8px 8px 0px rgba(16, 24, 40, 0.08); background: var(--blue); border-radius: 0 0 20px 20px;} header .navbar-collapse > ul > li:hover > a+ul.sub-menu {display:flex;} /* footer */ footer {padding:64px 0 32px;} footer .container {display:flex; gap:64px; flex-direction:column;} footer .addresscontent {display:flex; flex-wrap:wrap; justify-content:space-between;} footer .copyright {display:flex; justify-content:space-between; align-items:center;} /* dss */ .blog_grid .vc_col-sm-4 { width:calc(33.3333% - 20px);} /* */ .fixedIconNav {position: fixed; transform: translate(0%, -50%); right: 0; top: 50%; z-index: 999;} .fixedIconNav ul {padding: 0; margin: 0;} .fixedIconNav ul li {list-style:none;} .fixedIconNav ul li a {background: var(--blue); color: #fff; width: auto; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 8px 0px 0px 8px; margin-bottom: 8px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; padding: 0px 0px 0px 10px; right: -80px; position: relative; overflow: hidden; transition: ease-in 0.3s; font-weight: 600; text-decoration:none;} .fixedIconNav ul li a:hover {right: 0;} .fixedIconNav ul li a img {-webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); max-width: 30px; margin-right: 6px; background: #ccc; border-radius: 6px; padding: 6px;} .fixedIconNav ul li a span.hidef {width: 80px;} } /* Responsive */ @media (max-width: 900px) { .why-pro-container { flex-direction: column; } .why-pro-stats-row { flex-direction: column; } } /* home */ #Herobanner {background:#f5f7ff;} #Herobanner .vc_row:has(.heroleft) {align-items:center;} #Herobanner .hero-desc {max-width: 650px;} #Herobanner .hero-buttons {margin-bottom: 0; flex-wrap:wrap;} #Herobanner #slider {position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px;} #Herobanner .slide {position:absolute; transition:all 1s; opacity:0;} #Herobanner .slide.active { opacity:1;} #Herobanner .slide img {width: 100%; box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);} .blueOrgangeGradient, .blueOrangeGradient { color: transparent; background: transparent linear-gradient(99deg, #ffc465 0%, #5338ff 100%) 0% 0% no-repeat padding-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 300; } .colorGulfBlue { color: #0a0753; } .fontSize72 { font-size: 72px; line-height: 76px; } .fontSize18 { font-size: 18px; line-height: 28px; } .btn-holo.white-btn1 {border-color:var(--red); color:var(--red);} .btn-holo.white-btn1:hover {background:var(--blue); border-color:var(--blue); color:var(--white);} #platform1 {background:var(--blue); position: relative; margin-top:60px; margin-bottom:60px; color:var(--white)} #platform1::before {content: ''; width: 102%; height: 68px; transform: rotate(-2deg); background: var(--blue); position: absolute; top: -35px; left: 0;} #platform1::after {content: ''; width: 102%; height: 68px; transform: rotate(-2deg); background: var(--blue); position: absolute; bottom: -33px; left: -5px;} #platform1 .vc_col-sm-4 {border-radius: 20px; padding: 20px; box-shadow: 0 0 10px -2px rgba(255, 255, 255, 0.2); transition: all 0.2s; border:1px solid;} #platform1 .vc_col-sm-4:hover {transform: translateY(-10px); box-shadow:rgba(31, 45, 61, 0.125) 0px 1rem 3rem !important; background:var(--white);} #platform1 .vc_col-sm-4:hover h5 {color:var(--blue);} #platform1 .vc_col-sm-4:hover p {color:#000;} #platform1 h3:hover { color: red; } #platform1 .vc_col-sm-4:hover h2, #platform1 .vc_col-sm-4:hover h3 { color: red; } .vc_figure img.attachment-full { width: 100%; height: 350px; } @media (max-width:880px){ .footerProductsLogo { display: inline-block !important;} .footerProductsLogo li { display: inline-block;} } .footerLogo {font-size: 30px; text-align: center; margin: auto;} .footerLogo h6{ font-weight: 800; color: white;} .footerProductsLogo {list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; align-items: center; margin: 10px 0 20px;} .footerProductsLogo li {background: #fff; border-radius: 10px; line-height: 20px;} .footerProductsLogo li img {width: 100px; height: 50px; object-fit: contain; padding: 3px;} .footerProductsLogo {list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; align-items: center; margin: 10px 0 20px;} .footerProductsLogo li {background: #fff; border-radius: 10px; line-height: 20px;} .footerProductsLogo li img {width: 100px; height: 50px; object-fit: contain; padding: 3px;} /*Blog AI */ /* ===== Base Layout ===== */ .post-detail { display: flex; gap: 30px; max-width: 1200px; margin: auto; padding: 20px; box-sizing: border-box; } /* Main content & sidebar */ .post-detail .vc_col-sm-8 { width: 66.66%; } .post-detail .vc_col-sm-4 { width: 33.33%; } /* ===== Banner & Images ===== */ .post-detail img { max-width: 100%; height: auto; display: block; } .banner img { width: 100%; border-radius: 10px; } /* WordPress block images */ .wp-block-image { margin: 20px 0; } .wp-block-image img { border-radius: 8px; } /* ===== Typography ===== */ .post-detail h1 { font-size: 32px; line-height: 1.3; } .wp-block-heading { font-size: 22px; } .wp-block-paragraph, .wp-block-list li { font-size: 16px; } /* ===== Tables (Mobile Friendly) ===== */ table { width: 100%; border-collapse: collapse; overflow-x: auto; display: block; } table th, table td { padding: 10px; border: 1px solid #ddd; text-align: left; } /* ===== Sidebar ===== */ .recent-post { position: sticky; top: 20px; } .recent-post a { display: flex; gap: 12px; margin-bottom: 15px; text-decoration: none; } .recent-post img { width: 80px; height: auto; border-radius: 6px; } .recent-post h5 { font-size: 14px; margin: 0 0 5px; } .recent-post p { font-size: 13px; margin: 0; } /* ===== Tablet (≤ 992px) ===== */ @media (max-width: 992px) { .post-detail { flex-direction: column; } .post-detail .vc_col-sm-8, .post-detail .vc_col-sm-4 { width: 100%; } .recent-post { position: static; } } /* ===== Mobile (≤ 576px) ===== */ @media (max-width: 576px) { .post-detail { padding: 12px; } .post-detail h1 { font-size: 24px; } .wp-block-heading { font-size: 20px; } .wp-block-paragraph, .wp-block-list li { font-size: 15px; line-height: 1.7; } /* Sidebar cards stacked nicely */ .recent-post a { flex-direction: column; } .recent-post img { width: 100%; } } /*Blog End AI*/ /*Blog Listing */ /* =============================== BLOG GRID – LAYOUT CONTROL ================================ */ .blog_grid { display: flex; flex-wrap: wrap; gap: 24px; } /* Reset WPBakery floats */ .blog_grid > .vc_column_container { float: none !important; display: flex; box-sizing: border-box; } /* Desktop / Laptop → 3 columns */ @media (min-width: 768px) { .blog_grid > .vc_column_container { width: 30.3333% !important; } } /* Mobile → 2 columns */ @media (max-width: 767px) { .blog_grid > .vc_column_container { width: 50% !important; } } /* =============================== CARD IMPROVEMENTS ================================ */ .blog_grid .grid-inner { border-radius: 20px; background: var(--white); box-shadow: 0 8px 24px rgba(0,0,0,0.08); display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: transform 0.35s ease, box-shadow 0.35s ease; } .blog_grid .grid-inner:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.15); } /* Make whole card clickable */ .blog_grid .grid-inner a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } /* =============================== IMAGE ================================ */ .imagebox { position: relative; height: 210px; overflow: hidden; } .imagebox img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .grid-inner:hover .imagebox img { transform: scale(1.08); } /* Image title overlay */ .imagebox .subtitle { padding: 16px 24px; font-weight: 600; color: #fff; position: absolute; bottom: 0; width: 100%; font-size: 18px; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(16, 19, 35, 0.9) 100% ); } /* =============================== CONTENT ================================ */ .blog_grid .box { padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; } .blog_grid .box h4 { font-size: 18px; line-height: 1.4; } /* Clamp text for equal height cards */ .blog_grid .box p { margin: 0; color: var(--black); font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Read More */ .blog_grid .box label { margin-top: auto; font-weight: 600; color: var(--blue); cursor: pointer; } /* =============================== MOBILE REFINEMENTS ================================ */ @media (max-width: 767px) { .imagebox { height: 160px; } .blog_grid .box { padding: 18px; } .blog_grid .box h4 { font-size: 16px; } .blog_grid .box p { font-size: 14px; -webkit-line-clamp: 2; } } /* =============================== MOBILE BLOG – 1 CARD PER ROW ================================ */ @media (max-width: 767px) { /* Force full width layout */ .blog_grid, .blog_grid .vc_row, .blog_grid .vc_row-fluid, .blog_grid .container { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Remove WPBakery side gaps */ .blog_grid .vc_column_container, .blog_grid .vc_column-inner { padding-left: 12px !important; padding-right: 12px !important; margin: 0 !important; } /* Stack cards vertically */ .blog_grid { display: flex !important; flex-direction: column !important; } .blog_grid > .vc_column_container { width: 100% !important; display: flex !important; } .blog_grid > .vc_column_container > .vc_column-inner { display: flex; width: 100%; } /* Card stretch */ .blog_grid .grid-inner { width: 100%; } /* Image size for mobile */ .imagebox { height: 180px; } } /*Blog End Listing