:root { --primary-color: #f13a11; --white-color: #ffffff; --dark-color: #171819; --about-bg-color: #f9f9f9; --font-family: 'Montserrat'; --btn-red-bg:#ED1C24; --font-weight-normal: normal; --font-weight-light: 300; --font-weight-thin: 100; --h1-font-size: 48px; --h2-font-size: 36px; --h3-font-size: 28px; --h4-font-size: 24px; --h5-font-size: 22px; --h6-font-size: 22px; --p-font-size: 18px; --base-font-size: 16px; --menu-font-size: 14px; --border-radius-large: 100%; --border-radius-small: 2px; --bg: #16181d; --accent: #5686f5; --accent-10: #5686f510; --emphasis: #000; --text: #000; /* Typography */ --h1: 2.25rem; --h2: 1.5rem; --h3: 1.25rem; --paragraph: 1.125rem; --info-text: 1rem; --text-width-wide: 70ch; --text-width-medium: 60ch; --fw-bold: 700; --fw-regular: 500; --fw-light: 300; --spacing-xxs: 0.5em; --spacing-xs: 1em; --spacing-s: 1.5em; --spacing-m: 3em; --spacing-l: 6em; --spacing-xl: 8em; --radius-xs: 0.25em; --radius-s: 0.5em; --center-it: auto; --martinique:#323357; --mariner:#2A5BDA; --bright-sun:#FCCC4D; --zircon: #F5F8FF; --black:#000000; --white:#ffffff; --mercury:#E5E5E5; --comet: #595B71; --color1: #000; --color2: #fff; --color3: #e4202d; --transitionDuration: 1s; } *{margin: 0;padding: 0;} html,body,span,h1,h2,h3,h4,h5,p,abbr,section,div{ font-family:var(--font-family); } .jarallax { position: relative; z-index: 0; } .jarallax > .jarallax-img { position: absolute; object-fit: cover; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .btn-red{ background-color: var(--btn-red-bg); border: none !important; } .btn-red1{ background-color: var(--btn-red-bg); border: none !important; width: 25%; } .btn-red1:hover{ border: 1px solid black !important; color: black; background-color: transparent; } .btn-red:hover{ border: 1px solid #fff !important; color: #fff; background-color: transparent; } /* banner video */ .baner-video { height: 100vh; position: relative; } .baner-video video { position: absolute; width: 100%; height: 100%; object-fit: cover; } .baner-video .baner-video-content { position: relative; padding-top: 150px; color: #fff; text-align: center; } .baner-video h1 { font-family: Playfair Display, serif; font-size: clamp(45px, 7vw, 130px); line-height: 1.1; } .home p { font-size: clamp(25px, 4vw, 40px); margin-top: 10px; } .home-content button { display: block; font-size: clamp(14px, 1.5vw, 18px); border: 1px solid #f1f1f1; border-radius: 5px; background: transparent; color: #fff; margin: 50px auto 0; padding: 12px 20px; cursor: pointer; } .client-review .submit-form,.home-form-section .submit-form{ padding: 70px 0; } /*-------------------------------------------------------------- # client-review start --------------------------------------------------------------*/ /*-------------------------------------------------------------- # client-review end --------------------------------------------------------------*/ /*-------------------------------------------------------------- # client start --------------------------------------------------------------*/ .btn-gradient-1 { } /* method 2 -> use background-clip to support border-radius */ .btn-gradient-2 { } /* demo stuff */ .client-btn { flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; /* min-height: 100vh; */ } .custom-bnt-black { border-width: 2px; border-style: solid; background-color: transparent; position: relative; display: inline-flex; justify-content: center; align-items: center; font-size: 1em; color: #000; padding: 0.5rem 1rem; cursor: pointer; text-decoration: none; --bs-link-hover-color: #dd2734 !important; } .client-list img { /* margin-right: 7rem; */ } /*-------------------------------------------------------------- # client end --------------------------------------------------------------*/ .section-title h2{ font-size: 45px; } .section-title h2 span{ font-weight: 600; } .section-title p{ font-size: 16px; position: relative; padding-right: 33px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* client review */ .theme-bg { background: #0000004d; border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(9.2px); -webkit-backdrop-filter: blur(9.2px); border: 1px solid rgba(162, 162, 162, 0.59); padding: 35px 20px; position: relative; border-radius: 22px; padding-top: 100px; margin-top: 100px; } .success-story-text { padding-right: 35px; } .semi-coma { position: absolute; top: -85px; height: 150px; width: 150px; left: 50px; } .success-story-text h4 { color: #fff; margin-top: 10px; line-height: 1.3; margin-bottom: 10px; font-size: 32px; font-weight: 600; } .success-story-text p { font-size: 14px; color: #fff; letter-spacing: 1.1px; font-weight: 200; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; /* number of lines to show */ line-clamp: 4; -webkit-box-orient: vertical; } .success-story-owl { position: relative; padding: 0px 25px; } .image-wrapper { position: relative; margin-bottom: 20px; background-color: white; text-align: center; padding: 10px; } .semi-coma-sm { position: absolute; bottom: -25px; height: 30px; width: 30px !important; left: 50%; transform: translate(-50%, -50%); } .success-story-owl h2 { color: #ffffff; font-size: 20px; margin-top: 20px; font-weight: 600; } .success-story-owl p { margin-bottom: 0; font-size: 14px; color: white; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; font-weight: 300; } .success-story-owl .owl-nav{ position: absolute; top: -85px; right: 20px; } .success-story-owl .owl-prev { left: -80px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; } .success-story-owl .owl-next { background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; } .success-story-owl .owl-prev.disabled,.success-story-owl .owl-next.disabled { background-color: #fff !important; } .success-story-owl .owl-prev.disabled .fa,.success-story-owl .owl-next.disabled .fa { color: #000 !important; } .success-story-owl .owl-next .fa,.success-story-owl .owl-prev .fa{ color: #fff; } /* client review */ /*-------------------------------------------------------------- # submit-form start --------------------------------------------------------------*/ .submit-form { /* background-image: url(); */ background-position: center; } /*-------------------------------------------------------------- # submit-form end --------------------------------------------------------------*/ /*-------------------------------------------------------------- # contact-details start --------------------------------------------------------------*/ .contact-details{ /* height: 200px; background-image: url(../images/); */ padding: 70px 0px; color: white; } .contact-details i { font-size: 30px; } .contact-details p { font-size: 18px; margin-bottom: 0; } /*-------------------------------------------------------------- # contact-details end --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Footer start --------------------------------------------------------------*/ #footer { background: #F5F5F5; padding: 0 0 30px 0; color: #BCBCBC; font-size: 14px; /* background-image: url(../img/footer-bg.png); */ } #footer .footer-top { padding: 60px 0 30px 0; } #footer .footer-top .footer-info { margin-bottom: 15px; background: #05101e; border-top: 4px solid #ed502e; text-align: center; padding: 30px 20px; } #footer .footer-top .footer-info h3 { font-size: 24px; margin: 0 0 20px 0; padding: 2px 0 2px 0; line-height: 1; font-weight: 700; } #footer .footer-top .footer-info p { font-size: 14px; line-height: 24px; margin-bottom: 0; font-family: 'Poppins'; } #footer .footer-top .social-links a { font-size: 18px; display: inline-block; color: #fff; line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 4px; text-align: center; width: 36px; height: 36px; transition: 0.3s; background: #0a1e38; } #footer .footer-top .social-links a:hover { color: #fff; background: #ed502e; text-decoration: none; } #footer .footer-top h4 { font-size: 16px; font-weight: 600; color: #000000; position: relative; padding-bottom: 12px; } #footer .footer-top .footer-links { margin-bottom: 30px; } #footer .footer-top .footer-links ul { list-style: none; padding: 0; margin: 0; } #footer .footer-top .footer-links ul i { padding-right: 2px; color: #ef6445; font-size: 18px; line-height: 1; } #footer .footer-top .footer-links ul li { padding: 10px 0; display: flex; align-items: center; color: #000; } #footer .footer-top .footer-links ul li:first-child { padding-top: 0; } #footer .footer-top .footer-links ul a { color: #212121; transition: 0.3s; display: inline-block; text-decoration: none; } #footer .footer-top .footer-links ul a:hover { color: #ef6445; } #footer .footer-top .footer-newsletter form { margin-top: 30px; background: #fff; padding: 6px 10px; position: relative; border-radius: 4px; } #footer .footer-top .footer-newsletter form input[type=email] { border: 0; padding: 4px; width: calc(100% - 110px); } #footer .footer-top .footer-newsletter form input[type=submit] { position: absolute; top: 0; right: -2px; bottom: 0; border: 0; background: none; font-size: 16px; padding: 0 20px 2px 20px; background: #ed502e; color: #fff; transition: 0.3s; border-radius: 0 4px 4px 0; } #footer .footer-top .footer-newsletter form input[type=submit]:hover { background: #ef6445; } #footer .copyright { text-align: center; /* padding-top: 30px; */ color: black; } .address-footer p{ color: #000; } .address-footer .detial i{ color: #ffffff; width: 10px; background-color: #dd2734; margin-bottom: 20px; display: flex; height: 30px; width: 35px; text-align: center; font-size: 20px; justify-content: center; align-items: center; } /* .address-footer .detial p{ margin-top: 5px; } */ #footer .credits { padding-top: 10px; text-align: center; font-size: 13px; color: #fff; } #footer .Social-media a{ background: #DD2734; margin: 0 5px; border-radius: 50%; justify-content: center; text-decoration: none; transition: transform 0.5s; padding: 10px; width: 50px; height: 50px; /* position: relative; */ display: inline-block; text-align: center; align-items: center; display: flex; } #footer .Social-media{ display: inline-flex; } .follows-on h3{ color: #000; font-weight: 400; } #footer.follows-on{ border: 1px solid #ededed; background: #f9f9f9; } @media (max-width: 575px) { #footer .footer-top .footer-info { margin: -20px 0 30px 0; } .product-sec-btn{width: 100% !important;} } /*-------------------------------------------------------------- # Footer end --------------------------------------------------------------*/ .owl-videoSlider .item{ z-index: 8; position: relative; height: 100vh; background-color: #111; } .banner-body{ position: absolute; top: 20%; width: 100%; z-index: 1; } .owl-videoSlider .item .bannerSlider_header { position: relative; height: 100%; display: flex; align-items: flex-start; /* justify-content: center; */ flex-direction: column; overflow-y: hidden; /* padding: 6% 0; */ top: 20%; } .owl-videoSlider .item:after { z-index: 0; content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.4; background: #111; } .owl-videoSlider .item .bannerSlider_title { margin-bottom: 0.1em; /* line-height: 1.1; */ color: #fff; letter-spacing: -0.025em; /* font-weight: 700; */ font-size: 2em; } .owl-videoSlider .item .bannerSlider_title span{ display: block; } @media (min-width: 54em) { .owl-videoSlider .item .bannerSlider_title { font-size: 3.5em; } } @media (min-width: 65em) { .owl-videoSlider .item .bannerSlider_title { font-size: 4.5em; } } @media (min-width: 91em) { .owl-videoSlider .item .bannerSlider_title { font-size: 4em; } } .owl-videoSlider .item .bannerSlider_text { color: #fff; max-width: 35em; display: block; margin: 0.5em 0; line-height: 1.8; font-weight: 300; font-size: 0.9em; } @media (min-width: 54em) { .owl-videoSlider .item .bannerSlider_text { font-size: 1.1em; } } .sticky-wrapper.is-sticky .newNavbar{ background-color: #fff; z-index: 1024; } #leaves {position: relative; top: -179px; width: 100%; text-align: center;} .outer-btn { border: 1px solid black; border-radius: 3px; width: 100px; height: 30px; display: block; background: linear-gradient(to right, black 50%, white 50%); background-size: 200% 100%; background-position: right bottom; transition: all .5s ease-out; } .outer-btn:hover { background-position: left bottom; } .outer-btn .hover-button-text { text-align: center; font-size: 16px; line-height: 30px; color: black; transition: all .6s ease-out; display: block; } .outer-btn .hover-button-text:hover { color: white; } .owl-videoSlider.owl-theme .owl-nav { margin-top: 0px; position: absolute; bottom: 200px; left: 17%; display: flex; } .owl-videoSlider.owl-theme .owl-nav button.owl-next { display: block; /* color: rgba(255, 255, 255, 0.9); */ transition: color 0.5s ease, text-shadow 0.5s ease; left: -80px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; display: flex; justify-content: center; align-items: center; margin-right: 10px; } .owl-videoSlider.owl-theme .owl-nav button.owl-prev { display: block; /* color: rgba(255, 255, 255, 0.9); */ transition: color 0.5s ease, text-shadow 0.5s ease; left: -80px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; display: flex; justify-content: center; align-items: center; margin-right: 10px; } .custom-btns{ border: 2px solid #fff; padding: 10px 25px; color: #fff; text-decoration: none; --bs-link-hover-color: #dd2734; } .velo-slider__hint { z-index: 99; position: absolute; top: 0; left: 0.5em; display: none; height: 100vh; width: 4em; font-size: 0.9em; color: #fff; } @media (min-width: 54em) { .velo-slider__hint { display: block; } } .velo-slider__hint > span { position: absolute; top: 50%; left: 50%; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); overflow: hidden; } .velo-slider__hint > span > span { display: inline-block; transform: translateY(-110%); } .is-active .velo-slider__hint > span > span { opacity: 1; top: 50%; transition: 1s cubic-bezier(0.19, 1, 0.22, 1); transform: translateY(0%); transition: 0.4 ease; } .velo-slides-nav { position: absolute; z-index: 91; top: unset; bottom: 8em; transform: translateY(-50%); } @media (min-width: 54em) { .velo-slides-nav { /* top: 50%; */ /* bottom: auto; */ } } .velo-slides-nav__list { list-style: none; display: flex; padding-left: 0; } .velo-slides-nav__list{ } .velo-slides-nav li:first-child { margin-bottom: 0.25em; } .velo-slides-nav a { display: block; /* color: rgba(255, 255, 255, 0.9); */ transition: color 0.5s ease, text-shadow 0.5s ease; left: -80px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; display: flex; justify-content: center; align-items: center; margin-right: 10px; } .velo-slides-nav a:hover { color: white; text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6); transition: color 0.5s ease, text-shadow 0.5s ease; } .velo-slides-nav a.inactive { transition: opacity 0.2s 0s, visibility 0s 0.2s; background: #869791 !important; color: #FFF !important; text-decoration: none; } .velo-slides-nav i { font-size: 2.2em; } @media (min-width: 54em) { .velo-slides-nav i { font-size: 1.5em; } } @font-face { font-family: "ssicons"; src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfgAAAC8AAAAYGNtYXAXVtKOAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZiOKaFQAAAF4AAADTGhlYWQNcwRaAAAExAAAADZoaGVhB6EDzQAABPwAAAAkaG10eCYAA2sAAAUgAAAAMGxvY2EETAN0AAAFUAAAABptYXhwAA4AIQAABWwAAAAgbmFtZbVmJhcAAAWMAAABhnBvc3QAAwAAAAAHFAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qf//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAArgPFAp8AFgAAEzQ2NzYyFwkBNjIXFhQHAQYiJwEuATUABAMIFQgBugG7CBUHCAj+MwcVCP4zAwQCjQUJBAcH/kUBuwcHCBUH/jMICAHNAwoFAAAAAQDu/8AC3wOFABYAAAUiJicmNDcJASY0NzYyFwEWFAcBDgEjAQAFCQQICAG7/kUICAcWBwHNBwf+MwQJBUAEAwgVCAG6AbsIFQcICP4zBxUI/jMDBAAAAAEAAACuA8UCnwAWAAA3FBYXFjI3CQEWMjc2NCcBJiIHAQ4BFQAEAwgVCAG6AbsIFQcICP4zBxUI/jMDBMAFCQQICAG7/kUICAcWBwHNBwf+MwQJBQAAAAABAO7/wALfA4UAFgAABTI2NzY0JwkBNjQnJiIHAQYUFwEeATMCzQUJBAcH/kUBuwcHCBUH/jMICAHNAwoFQAQDCBUIAboBuwgVBwgI/jMHFQj+MwMEAAAAAQCh//MDMwOfAB4AAAkBBhQXFjI3AREUFjMyNjURARYyNz4BNTQmJwEmIgcB1P7NBwcIFQcBCA8KCw8BBwgVCAMEBAP+zAcVCAOf/s0IFQcICAEH/L4LDw8LA0L++QgIAwoFBQkEATMHBwAAAQCa/+EDLAONAB4AAAUBNjQnJiIHARE0JiMiBhURASYiBw4BFRQWFwEWMjcB+QEzBwcIFQf++A8LCg/++AcVCAQDAwQBMwgVCB8BMwgVBwgI/vkDQgsPDwv8vgEHCAgDCgUFCQT+zQcHAAAAAQAhAFoDzQLsAB4AABMBNjIXFhQHASEyFhUUBiMhARYUBw4BIyImJwEmNDchATMIFQcICP75A0ILDw8L/L4BBwgIAwoFBQkE/s0HBwG5ATMHBwgVB/74DwsKD/74BxUIBAMDBAEzCBUIAAAAAQAzAFoD3wLsAB4AAAkBJiIHBhQXASEiBhUUFjMhAQYUFx4BMzI2NwE2NCcD3/7NCBUHCAgBB/y+Cw8PCwNC/vkICAMKBQUJBAEzBwcBuQEzBwcIFQf++A8LCg/++AcVCAQDAwQBMwgVCAAAAQAAAAEAAMChG+1fDzz1AAsEAAAAAADVOl//AAAAANU6X/8AAP/AA98DnwAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAD3wABAAAAAAAAAAAAAAAAAAAADAQAAAAAAAAAAAAAAAIAAAAEAAAABAAA7gQAAAAEAADuBAAAoQQAAJoEAAAhBAAAMwAAAAAACgAUAB4ASgB2AKIAzgEEAToBcAGmAAAAAQAAAAwAHwABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApHNzaWNvbnMAcwBzAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMHNzaWNvbnMAcwBzAGkAYwBvAG4Ac3NzaWNvbnMAcwBzAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcnNzaWNvbnMAcwBzAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("truetype"); font-weight: normal; font-style: normal; } [class^=icon-], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "ssicons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-down-chev:before { content: ""; } .icon-right-chev:before { content: ""; } .icon-up-chev:before { content: ""; } .icon-left-chev:before { content: ""; } .icon-up-arrow:before { content: ""; } .icon-down-arrow:before { content: ""; } .icon-left-arrow:before { content: ""; } .icon-right-arrow:before { content: ""; } @-webkit-keyframes slideLeft { 0% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slideLeft { 0% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideRight { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } html { font-size: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; scroll-behavior: smooth; } .custom-new-header img, .custom-new-header video { display: block; max-width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; width: 125px; } .specification-text.sticky-sm-top { position: -webkit-sticky; position: sticky; top: 85px; z-index: 1; } .custom-new-header.fixed img .brand,.new-customNavbar.fixed img .brand{ height: 50px; width: auto; } /* .custom-new-header.fixed,.new-customNavbar.fixed { padding: 0rem !important; } */ .menu-section{ margin-bottom: 0; } .custom-new-header .brand { font-family: inherit; font-size: 1.75rem; font-weight: 700; line-height: inherit; color: #fff; border: none; outline: none; text-transform: uppercase; text-rendering: optimizeLegibility; } .custom-new-header.header { position: fixed; display: block; left: 0; width: 100%; height: auto; padding: 1rem 0; margin: 0 auto; z-index: 999; border: none; outline: none; background-image: linear-gradient(to bottom, #000000ba, #0000008c, #00000059, #00000024, #a8eb1200); } .custom-new-header.header .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .custom-new-header .header-item-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 17%; flex: 0 0 17%; position: relative; z-index: 1024; } .custom-new-header .header-item-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 66%; flex: 0 0 66%; } .custom-new-header .header-item-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 17%; flex: 0 0 17%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .custom-new-header .header-item-right .menu-icon { font-size: 1.35rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1rem; margin-left: 1rem; border: none; outline: none; color: #121212; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .custom-new-header.header .menu > ul > li { display: inline-block; line-height: 3.125rem; margin-left: 1.5rem; } .custom-new-header.header .menu > ul > li > a { position: relative; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.25; border: none; outline: none; color: #ffffff; text-transform: capitalize; text-rendering: optimizeLegibility; -webkit-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; text-decoration: none; position: relative; z-index: 1024; text-transform: uppercase; } .custom-new-header.header .menu > ul > li .menu-subs { position: absolute; width: 100%; height: auto; /* margin-top: 1.75rem; padding: 1rem 2rem; */ border: none; outline: none; z-index: 500; opacity: 0; visibility: hidden; background: #000000ed; -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .custom-new-header.header .menu > ul > li .menu-subs > ul > li { line-height: 1; } .custom-new-header.header .menu > ul > li .menu-subs > ul > li > a { display: inline-block; font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.25; padding: 0.75rem 0; border: none; outline: none; color: #121212; text-transform: capitalize; text-rendering: optimizeLegibility; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .custom-new-header.header .menu > ul > li .menu-column-1 { min-width: 16rem; max-width: 20rem; } .custom-new-header.header .menu > ul > li .menu-subs.menu-mega { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .custom-new-header.header .menu > ul > li .menu-subs.menu-mega > .list-item > ul > li { display: block; line-height: 1; } .custom-new-header.header .menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a { display: inline-block; font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.25; padding: 0.5rem 0; border: none; outline: none; color: #121212; text-transform: capitalize; text-rendering: optimizeLegibility; -webkit-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .header .menu > ul > li .menu-subs.menu-column-4 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 68rem; width: 100%; padding: 1.25rem 1rem; } .custom-new-header.header .menu > ul > li .menu-subs.menu-column-4 > .list-item { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; padding: 0 1rem; } .custom-new-header.header .menu > ul > li .menu-subs.menu-column-4 > .list-item .title { font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1; padding: 0.75rem 0; border: none; outline: none; color: #fff; text-transform: uppercase; text-rendering: optimizeLegibility; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .custom-new-header.header .menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center .title { text-align: center; } .custom-new-header.header .menu > ul > li .menu-subs.menu-column-4 > .list-item img.responsive { max-width: 100%; width: 100%; height: auto; margin-top: 0.75rem; -o-object-fit: cover; object-fit: cover; vertical-align: middle; } .custom-new-header.header .menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a:hover, .custom-new-header.header .menu > ul > li .menu-subs > ul > li > a:hover { color: #fff; } .custom-new-header.header-item-right a:hover, .custom-new-header.header .menu > ul > li:hover > a { color: #fff; } @media only screen and (min-width: 993px) { .custom-new-header.header .menu > ul > li.menu-item-has-children:hover .menu-subs { opacity: 1; visibility: visible; width: 100%; /* padding: 130px 0; margin-top: -90px; */ z-index: 1; /* padding: 140px 100px; */ } .custom-new-header .menu-mobile-header, .custom-new-header .menu-mobile-trigger { display: none; } @media only screen and (max-width: 992px) { .custom-new-header .header-item-center { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .custom-new-header .header-item-left,.custom-new-header .header-item-right { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .custom-new-header .wrapper { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .custom-new-header.header .menu-mobile-trigger { position: relative; display: block; cursor: pointer; width: 1.75rem; height: 1rem; border: none; outline: none; margin-left: 1.25rem; background: none; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.35s ease-in-out; -o-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } .custom-new-header.header .menu-mobile-trigger span { display: block; position: absolute; width: 100%; height: 2px; left: 0; border: none; outline: none; opacity: 1; border-radius: 0.25rem; background: #121212; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } .custom-new-header.header .menu-mobile-trigger span:nth-child(1) { top: 0; } .custom-new-header.header .menu-mobile-trigger span:nth-child(2), .custom-new-header.header .menu-mobile-trigger span:nth-child(3) { top: 0.5rem; } .custom-new-header.header .menu-mobile-trigger span:nth-child(4) { top: 1rem; } .custom-new-header.header-item-right { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .custom-new-header.header .menu { position: fixed; top: 0; left: 0; width: 20rem; height: 100%; z-index: 1099; overflow: hidden; background: #fafafa; -webkit-transform: translate(-100%); -ms-transform: translate(-100%); transform: translate(-100%); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .custom-new-header.header .menu.active { -webkit-transform: translate(0%); -ms-transform: translate(0%); transform: translate(0%); } .custom-new-header.header .menu > ul > li { display: block; line-height: 1; margin: 0; } .custom-new-header.header .menu > ul > li > a { display: block; line-height: 3.125rem; height: 3.125rem; padding: 0 3.125rem 0 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .custom-new-header.header .menu > ul > li > a i.ion { position: absolute; font-size: 1.25rem; line-height: 3.125rem; top: 0; right: 0; width: 3.125rem; height: 3.125rem; text-align: center; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .custom-new-header.header .menu .menu-mobile-header { position: relative; position: -webkit-sticky; position: sticky; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; top: 0; height: 3.125rem; z-index: 501; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: #fafafa; } .custom-new-header.header .menu .menu-mobile-header .menu-mobile-arrow { display: none; font-size: 1.25rem; line-height: 3.125rem; width: 3.125rem; height: 3.125rem; cursor: pointer; border-right: 1px solid rgba(0, 0, 0, 0.1); color: #121212; text-align: center; } .custom-new-header.header .menu .menu-mobile-header.active .menu-mobile-arrow { display: block; } .custom-new-header.header .menu .menu-mobile-header .menu-mobile-title { font-family: inherit; font-size: 1rem; font-weight: 500; line-height: inherit; color: #121212; text-transform: capitalize; text-rendering: optimizeLegibility; } .custom-new-header.header .menu .menu-mobile-header .menu-mobile-close { font-size: 2.25rem; line-height: 3.125rem; cursor: pointer; width: 3.125rem; height: 3.125rem; border-left: 1px solid rgba(0, 0, 0, 0.1); color: #121212; text-align: center; } .custom-new-header.header .menu .menu-section { height: 100%; overflow-y: auto; overflow-x: hidden; background-color: #000; } .custom-new-header.header .menu > ul > li .menu-subs { position: absolute; display: none; top: 0; left: 0; max-width: none; min-width: auto; width: 100%; height: 100%; margin: 0; padding: 1rem; padding-top: 4rem; opacity: 1; overflow-y: auto; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-box-shadow: none; box-shadow: none; } .custom-new-header.header .menu > ul > li .menu-subs.menu-mega { position: absolute; display: none; top: 0; left: 0; max-width: none; min-width: auto; width: 100%; height: 100%; margin: 0; padding: 1rem; padding-top: 4rem; opacity: 1; overflow-y: auto; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-box-shadow: none; box-shadow: none; } .custom-new-header.header .menu > ul > li .menu-subs.active { display: block; } .custom-new-header.header .menu > ul > li .menu-subs.menu-column-4 > .list-item { -webkit-box-flex: 0; -ms-flex: 0 0 0 100%; flex: 0 0 0 100%; padding: 0rem; } .custom-new-header.header .menu > ul > li .menu-subs.menu-column-4 > .list-item img.responsive { margin-top: 0; } .custom-new-header.header .menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center .title { margin-bottom: 1.25rem; } .custom-new-header.header .menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center:last-child .title { margin-bottom: 0rem; } .custom-new-header.header .menu > ul > li .menu-subs > ul > li > a { display: block; } .custom-new-header.header .menu > ul > li .menu-subs.menu-mega > .list-item > ul { margin-bottom: 1rem; } .custom-new-header.header .menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a { display: block; } .custom-new-header .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1098; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.55); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .custom-new-header .overlay.active { opacity: 1; visibility: visible; } } /* .headerMenu { z-index: 10; position: fixed; width: 100%; background-image: linear-gradient(to bottom, #000000ba, #0000008c, #00000059, #00000024, #a8eb1200); } .headerMenu .logo { position: relative; z-index: 123; padding: 10px 0; } .headerMenu .logo img{ width: 140px; } .headerMenu nav { position: relative; width: 100%; } #cssmenu ul{ margin-left: auto; } #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile { border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: auto; margin-bottom: auto; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #head-mobile { display: none; } #cssmenu { display: flex; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li > a { padding: 16px 14px; font-size: 13px; letter-spacing: 1px; text-decoration: none; color: #ddd; font-weight: 700; text-transform: uppercase; } #cssmenu > ul > li:hover > a, #cssmenu ul li.active a { color: #fff; } #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover { -webkit-transition: background 0.3s ease; -ms-transition: background 0.3s ease; transition: background 0.3s ease; } #cssmenu > ul > li.has-sub > a { padding-right: 30px; } #cssmenu > ul > li.has-sub > a:after { position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #ddd; content: ''; } #cssmenu > ul > li.has-sub > a:before { position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #ddd; content: ''; -webkit-transition: all 0.25s ease; -ms-transition: all 0.25s ease; transition: all 0.25s ease; } #cssmenu > ul > li.has-sub:hover > a:before { top: 23px; height: 0; } #cssmenu ul ul { position: absolute; left: -9999px; } #cssmenu ul ul li { height: 0; -webkit-transition: all 0.25s ease; -ms-transition: all 0.25s ease; background: #333; transition: all 0.25s ease; } #cssmenu li:hover > ul { left: auto; z-index: 1024; padding-left: 0; } #cssmenu li:hover > ul > li { height: 35px; } #cssmenu ul ul ul { margin-left: 100%; top: 0; } #cssmenu ul ul li a { border-bottom: 1px solid rgba(150, 150, 150, 0.15); padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #ddd; font-weight: 400; } #cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a { border-bottom: 0; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #fff; } #cssmenu ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #ddd; content: ''; } #cssmenu ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #ddd; content: ''; -webkit-transition: all 0.25s ease; -ms-transition: all 0.25s ease; transition: all 0.25s ease; } #cssmenu ul ul > li.has-sub:hover > a:before { top: 17px; height: 0; } #cssmenu ul ul li.has-sub:hover, #cssmenu ul li.has-sub ul li.has-sub ul li:hover { background: #363636; } #cssmenu ul ul ul li.active a { border-left: 1px solid #333; } #cssmenu > ul > li.has-sub > ul > li.active > a, #cssmenu > ul ul > li.has-sub > ul > li.active > a { border-top: 1px solid #333; } @media screen and (max-width: 1000px) { .headerMenu .logo { position: absolute; top: 0; left: 0; height: 46px; text-align: center; float: none; } .headerMenu .logo2 { display: none; } .headerMenu nav { width: 100%; } #cssmenu { width: 100%; } #cssmenu ul { width: 100%; display: none; padding-left: 0; margin-top: 100px; } #cssmenu ul li { width: 100%; border-top: 1px solid #444; } #cssmenu ul li:hover { background: #363636; } #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto; } #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; border-bottom: 0; } #cssmenu > ul > li { float: none; } #cssmenu ul ul li a { padding-left: 25px; } #cssmenu ul ul li { background: #333 !important; } #cssmenu ul ul li:hover { background: #363636 !important; } #cssmenu ul ul ul li a { padding-left: 35px; } #cssmenu ul ul li a { color: #ddd; background: none; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a { color: #fff; } #cssmenu ul ul, #cssmenu ul ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before { display: none; } #cssmenu #head-mobile { display: block; padding: 23px; color: #ddd; font-size: 12px; font-weight: 700; } .headerMenu .button { width: 55px; height: 46px; position: absolute; right: 0; top: 15px; cursor: pointer; z-index: 12399994; } .headerMenu.open { min-height: 60px; height: 100%; background-color: #181717e6; } .headerMenu .button:after { position: absolute; top: 22px; right: 20px; display: block; height: 4px; width: 20px; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; content: ''; } .headerMenu .button:before { -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; top: 16px; right: 20px; display: block; height: 2px; width: 20px; background: #ddd; content: ''; } .headerMenu .button.menu-opened:after { -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; top: 23px; border: 0; height: 2px; width: 19px; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .headerMenu .button.menu-opened:before { top: 23px; background: #fff; width: 19px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid #444; height: 46px; width: 46px; cursor: pointer; } #cssmenu .submenu-button.submenu-opened { background: #262626; } #cssmenu ul ul .submenu-button { height: 34px; width: 34px; } #cssmenu .submenu-button:after { position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #ddd; content: ''; } #cssmenu ul ul .submenu-button:after { top: 15px; right: 13px; } #cssmenu .submenu-button.submenu-opened:after { background: #fff; } #cssmenu .submenu-button:before { position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #ddd; content: ''; } #cssmenu ul ul .submenu-button:before { top: 12px; right: 16px; } #cssmenu .submenu-button.submenu-opened:before { display: none; } #cssmenu ul ul ul li.active a { border-left: none; } #cssmenu > ul > li.has-sub > ul > li.active > a, #cssmenu > ul ul > li.has-sub > ul > li.active > a { border-top: none; } } */ } /* contact us */ /* ///// inputs /////*/ .submit-form input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label { top: -15px; -webkit-transition: all 0.225s ease; transition: all 0.225s ease; } .styled-input { float: left; width: 293px; margin: 1rem 0; position: relative; border-radius: 4px; } @media only screen and (max-width: 768px) { .styled-input { width: 100%; } } .styled-input label { display: flex; color: #000; /* padding: 1.3rem 30px 1rem 30px; */ /* position: absolute; */ top: 10px; left: 0; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; pointer-events: all; font-weight: 700; width: 100%;} .styled-input.wide { width: 100%; max-width: 100%; } input, textarea { padding: 10px 0; border: 0; width: 100%; font-size: 1rem; background-color: transparent; color: #000; border-radius: 0; border-bottom: 2px solid #999; } input:focus, textarea:focus { outline: 0; } input:focus ~ span, textarea:focus ~ span { width: 100%; -webkit-transition: all 0.075s ease; transition: all 0.075s ease; } textarea { width: 100%; } /* .input-container { width: 650px; max-width: 100%; margin: 20px auto 25px auto; } */ .form-check-para{ color: #fff; } .submit-btn { float: right; padding: 7px 35px; border-radius: 60px; display: inline-block; background-color: #4b8cfb; color: white; font-size: 18px; cursor: pointer; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06), 0 2px 10px 0 rgba(0, 0, 0, 0.07); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .submit-btn:hover { transform: translateY(1px); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.09); } @media (max-width: 768px) { .submit-btn { width: 100%; float: none; text-align: center; } } input[type="checkbox"]:checked + label { color: #f00; font-style: normal; } .contactus-address{ margin-bottom: 10px; min-height: 120px; /* background-image: url(../images/bg/contact-details-bg.png); */ /* border: 2px solid #8e8e8e; */ padding: 35px 26px; display: flex; } .contactus-address .fa{ font-size: 30px; margin-right: 20px; color: #fff; margin-top: auto; margin-bottom: auto; } .custom-new-header.fixed,.new-customNavbar.fixed { background-color: #000000c7; } .contactus-address .contact-txt{ margin-top: auto; margin-bottom: auto; color: #fff; } /* client section */ /* .clients-section{ padding: 50px 0; } */ /* image auto slider */ .marquee { overflow: hidden; background-color: whitesmoke; padding: 10px; } .marquee-content { display: flex; animation: scrolling 55s linear infinite; } .marquee-item { flex: 0 0 26vw; /* margin: 0 1vw; */ /* flex: 0 0 20vw; */ /* margin: 0 2vw; */ padding: 15px; } .marquee-item img { display: block; width: 100%; height: 240px; /* padding: 0 20px; */ } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translatex(-144vw); } } /* image auto slider */ .mt-100{ margin-top: 50px; } .mt--100{ margin-top: -50px; } .our-success-story{ padding: 80px 0; } .onhover-effect{ position: relative; } .succes-story-bg::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #00000080, #000000); transition: .5s ease; } .succes-story-bg { min-height: 550px; position: relative; background-position: center; } .howwe-Work{ padding: 50px 0; background-color: #F9F9F9; position: relative; } .our-success-story img{ position: absolute; bottom: -35px; right: -15px; width: 240px; z-index: 1; } .successstory-data{ position: absolute; bottom: 50px; left: 50px; z-index: 1; } .successstory-data p{ margin-bottom: 0; } .successstory-data h3{ font-size: 120px; color: #fff; font-weight: 700; margin-bottom: 0; } .successstory-data p{ font-size: 14px; color: #fff; } /* how we work */ .howWork-bx{ background-color: #fff; min-height: 225px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 15px; margin-top: 30px; padding: 20px; position: relative; z-index: 1; } .howWork-bx p{ margin-top: 30px; min-height: 30px; font-size: 14px; } .howWork-bx h3{ font-size: 120px; font-weight: 700; position: absolute; right: 30px; color: #f9f9f9; top: 0; } .services-bx img{ width: 100px; height: 100px; } .howWork-bx:hover{ background-color:#DD2734; color: #fff; } .howWork-bx:hover #defense-shield-svgrepo-com,.howWork-bx:hover #Path_69,.howWork-bx:hover #handshake-thin-svgrepo-com,.howWork-bx:hover #disruption-global-innovation-svgrepo-com path,.howWork-bx:hover #factory-svgrepo-com Path,.howWork-bx:hover #chart-gear-svgrepo-com Path{ fill: white; } .howWork-bx:hover #Ellipse_9,.howWork-bx:hover #Ellipse_7{ stroke: #fff; } .howwe-Work::after{ content: ""; width: 180px; height: 100%; background-image: url(../../assets/images/bg/why-bg.jpg); top: 0; right: 0; position: absolute; display: inline-block; background-repeat: no-repeat; background-size: contain; } /* defence-section */ .defence-section{ min-height: 500px; } .defence-section p{ position: relative; font-weight: 600; } .nicescroll-rails-vr { border: 1px solid #9c27b0; } .nicescroll-rails-vr .nicescroll-cursors { margin: 3px 0; } .defence-section h2{ font-size: 50px; font-weight: 400; margin-top: 50px; } .defence-section .defence-text{ padding: 100px 0; } .text-right{ text-align: start; padding-left: 6px; } /* our-team */ .our-team{ background-color: #003F8A; padding: 100px 0; height: 415px; } .our-team .section-title h2::after{ right: 0; } .our-team img{ -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } .our-team-bx{ position: relative; transition: transform .2s; } .our-team-tx{ position: absolute; bottom: 20px; left: 20px; z-index: 1; } .our-team-tx h2{ font-size: 18px; font-weight: 700; color: #fff; } .our-team-tx p{ color: #dedede; margin-bottom: 0; font-weight: 200; } .our-team-bx::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #00000080, #000000); transition: .5s ease; } .our-team-bx:hover::after { background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #002d63bf, #002d63); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } .our-team-bx:hover img{ -webkit-filter:unset; /* Safari 6.0 - 9.0 */ filter: unset; } .our-team-owl .owl-nav { position: absolute; bottom: 25px; left: -360px; } .our-team-owl .owl-prev.disabled, .our-team-owl .owl-next.disabled { background-color: #d8d8d8 !important; } .our-team-owl .owl-prev { left: -80px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; } .our-team-owl .owl-next { background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff !important; } .white-bg{ background-color: white; min-height: 550px; } .our-team .container-fluid{ overflow: hidden; } .our-team-owl .owl-stage{ padding-left: 0 !important; } .our-team .section-title { padding: 25px 30px; } .chairman-message h3{ text-align: right; font-size: 20px; font-weight: 600; color: #dd2734; padding-right: 20px; margin-top: 30px; } .chairman-message p{ font-size: 16px; line-height: 1.6; padding-right: 20px; position: relative; margin-bottom: 0; } .section-title h2{ position: relative; } .chairman-message .section-title { margin-bottom: 20px; } .section-title h2:after { content: ""; width: 45px; height: 60px; background-image: url(../../assets/images/arrow-red.svg); top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; } .chairman-message .comma-image { width: 45px; position: relative; bottom: 7px; } /* Services bx */ .services-bx{ background-color: #DD2734; } .our-services{ background-image:url(../../assets/images/bg/services-bg.jpg); background-size: contain; background-repeat: no-repeat; background-size: inherit; } .services-bx{ padding: 20px 30px; } .services-content{ padding: 50px 0; } .services-content h3{ font-size: 20px; color: white; margin-top: 10px; min-height: 50px; } .services-content p{ color: #fff; margin-bottom: 0; font-size: 14px; } .howWork-bx svg{ width: 100px; height: 100px; } .ourmission{ position: relative; } .ourmission h3{ color: #fff; font-size: 35px; font-weight: 600; } .ourmission p{ color: #fff; font-weight: normal; } .img-bg-who{ width: 100px; height: 100px; background-color: #DD2734; border-radius: 50%; margin-right: 15px; display: flex; justify-content: center; align-items: center; } .img-bg-who svg{ width: 50px; height: 50px; } .ourmission{ padding-bottom: 50px; } .whoweare p img{ width: 45px; position: relative; bottom: 7px; } .our-product{ padding: 50px 0; } .whoweare p{ color: #fff; } .whoweare { padding: 100px 0; } .bg-glassmorphisam{ background-color: #0000004f; padding: 30px; backdrop-filter: blur(13px) saturate(200%); -webkit-backdrop-filter: blur(13px) saturate(200%); border: 1px solid rgb(255 38 38 / 42%); border-radius: 22px; overflow: hidden; } .sub-headings{ font-size: 22px; } .our-product-bx .card { position: relative; } .our-product-bx .card .card-media { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 1; } .our-product-bx .card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; } .our-product-bx .card:hover .card-media img { transform: scale(1.05); } .our-product-bx .card:hover .card-media::before { background-color: #003f8ad4; } .our-product-bx .card .card-content { display: flex; justify-content: center; flex-direction: column; padding: 20px; opacity: 0; transition: all 0.3s; } .our-product-bx .card:hover .card-content { opacity: 1; z-index: 1; } .our-product-bx .card .card-content .card-header{ padding: 0; } .our-product-bx .card .card-content .card-header .card-date { display: block; color: rgba(255, 255, 255, 0.6); font-size: 15px; font-weight: 500; margin-bottom: 8px; } .our-product-bx .card .card-content .card-header h3 { font-size: 32px; font-weight: 500; line-height: 43px; margin-bottom: 0; } .our-product-bx .card .card-content .card-header h3 a { display: block; color: #ffffff; text-decoration: none; transition: all 0.3s; } .our-product-bx .card .card-content .card-desc { color: rgb(255 255 255); font-size: 14px; line-height: 24px; opacity: 1; font-weight: normal; } .our-product-bx .card .card-content .card-desc p { margin-bottom: 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .our-product-bx .card .card-content .card-footer .read-more-link { display: inline-flex; align-items: center; color: #ffffff; font-size: 15px; font-weight: 500; text-decoration: none; transition: all 0.3s; } .our-product-bx .card .card-content .card-footer .read-more-link:hover { color: #cf000f; } .our-product-bx .card .read-more-link svg { height: 10px; margin-left: 10px; transition: transform 0.3s; } .our-product-bx .card .read-more-link:hover svg { transform: translateX(5px); } .our-product-bx .card .card-border span { display: inline-block; position: absolute; background-color: rgba(255, 255, 255, 0.4); transition: all 0.3s linear; z-index: 2; } .our-product-bx .card .card-border span.top { width: 100%; height: 1px; top: 0; left: 0; transform: scaleX(0); transform-origin: left; } .our-product-bx .card .card-border span.right { width: 1px; height: 100%; top: 0; right: 0; transform: scaleY(0); transform-origin: top; } .our-product-bx .card .card-border span.bottom { width: 100%; height: 1px; bottom: 0; left: 0; transform: scaleX(0); transform-origin: right; } .our-product-bx .card .card-border span.left { width: 1px; height: 100%; top: 0; left: 0; transform: scaleY(0); transform-origin: bottom; } .our-product-bx .card:hover .card-border span.top { transform: scaleX(1); } .our-product-bx .card:hover .card-border span.right { transform: scaleY(1); transition-delay: 0.3s; } .our-product-bx .card:hover .card-border span.bottom { transform: scaleX(1); transition-delay: 0.6s; } .our-product-bx .card:hover .card-border span.left { transform: scaleY(1); transition-delay: 0.9s; } /* Let's write the media query */ @media (max-width: 1024px) { .our-product-bx .card { grid-column: span 2; grid-row: span 2; } } .our-product-bx .card .card-content .card-desc td{ color: #fff; border: none; width: 50%; padding: 1px 0; font-size: 13px; text-transform: uppercase; } .our-product-bx .card .card-content .card-footer { border: none; padding-top: 25px; padding-left: 0px; } .our-product-bx .card .card-media .card-title{ position: absolute; bottom: 30px; left: 20px; z-index: 1; } .our-product-bx .card .card-media .card-title a,.our-product-bx .card .card-media .card-title span{ color: #fff; text-decoration: none; } .our-product-bx .card:hover .card-title{ display: none; } .hover-image{ display: none; position: absolute; bottom: -55px; left: 72%; transform: translate(-50%, 0); } .hover-image img{ width: 300px; } .our-product-bx .card:hover .hover-image{ display: inline-block; } /* .our-product-bx::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #00000080, #000000); transition: .5s ease; } */ .our-product-bx .card .card-media::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #00000080, #000000); transition: all 0.3s; z-index: 1; } .our-product-bx .card{ padding-bottom: 80px; height:570px!important; } .yard-tx{ background-color: white; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; padding: 30px; } .ourYards{ margin-top: -150px; z-index: 9; position: relative; } .yard-count{ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; background-color: #DD2734; } .yard-count h2,.yard-count span{ color: #fff; margin-bottom: 5px; margin-left: 30px; font-weight: 600; } .shipyard-sqt,.shipyard-emp{ flex: 1 1 0px; padding: 40px; } .yard-count img{ width: 60px; } .yard-tx .section-title p{ font-size: 14px; } .defence-section.whoweare::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #002d63bf, #002d63); */ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; transition: .5s ease; } .client-list .item img{ text-align: center; margin: 0 auto; border: 1px solid #bbbbbb; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 5px; } .item:hover .gallery-image { filter: grayscale(100%) brightness(60%) ; } .client-btn{ text-align: center; } .bg-mobile-view { background-color: #000000f5 !important; height: 100%; } .terms-heading{ background-image: url(../images/bg/terms-condition.png); } .policy-heading{ background-image: url(../images/bg/privacy-policy.png); } .faq-heading{ background-image: url(../images/bg/faq.png); } .contact-usBg{ background-image: url(../images/bg/contact.png); } .page-heading{ /* background-image: url(../images/bg/page-heading-bg.jpg); */ background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 170px 0px 150px 0px; color: #fff; min-height: 160px; } .page-heading::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to left, #0000000f, #00000000, #0000001a, #00000073, #000000f7); transition: .5s ease; } .page-heading p{ position: relative; } .page-heading a{ position: relative; } .page-heading h1 { text-transform: capitalize; font-size: 75px; /* font-weight: 700; */ letter-spacing: 2px; margin-bottom: 18px; display: inline-block; line-height: 1; position: relative; z-index: 1; } .page-heading h1::before { content: ""; width: 45px; height: 60px; /* background-image: url(../../assets/images/arrow-red.svg); */ top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; right: -30px; } .page-heading h1::after { content: ""; width: 100%; height: 60px; bottom: 0; left:0 ; height: 20px; background-color: #dd2734; position: absolute; display: inline-block; background-repeat: no-repeat; z-index: -1; } .page-heading h1 span{ font-weight: 600; } .page-heading span { /* font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: #fff; display: block; */ } /* .page-data-policy { padding: 80px 0px; } */ /* faq */ .faq-accordion{ padding: 80px 0px; } .faq-title { text-align: center; font-size: 45px; font-weight: normal; } .faq-group { display: flex; flex-flow: row wrap; width: 100%; } .faq-group .faq-left { width: 38%; } .faq-group .faq-right { width: 58%; border-left: #ccc 1px solid; padding-left: 30px; margin-left: 4%; } .faq-group h3 { font-size: 23px; font-weight: 600; margin: 35px 0 15px 0; color: #dd2734; } .faq-group h3:first-child { margin-top: 0px; } .faq-btns { margin-bottom: 40px; } .faq-btn { width: 100%; display: inline-block; border: #000 1px solid; border-radius: 4px; text-align: center; margin: 10px 0; background-color: #fff; padding: 14px; text-decoration: none; color: #000; transition: 0.5s all; } .faq-btn-red { width: 100%; display: inline-block; border: #fff 1px solid; border-radius: 4px; text-align: center; margin: 10px 0; background-color: #dd2734; padding: 14px; text-decoration: none; color: #fff; transition: 0.5s all; } .faq-btn:hover { background-color: #000; color: #fff; } .faq-item { width: 100%; margin: 7px 0px; border-bottom: #ebebeb 1px solid; } .faq-item .faq-label { position: relative; width: 100%; padding: 15px; cursor: pointer; font-size: 16px; color: #000; user-select: none; -webkit-user-select: none; -moz-user-select: none; font-weight: 500; background-color: white; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .faq-item .faq-label i { width: 18px; height: 100%; position: absolute; right: 15px; top: 0px; } .faq-item .faq-label i:before { content: ''; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; width: 18px; height: 2px; background-color: #dd2734; } .faq-item .faq-label i:after { content: ''; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; width: 2px; height: 18px; background-color: #dd2734; transition: 0.5s all; -webkit-transition: 0.5s all; } .faq-item.faq-item-show .faq-label i:after { opacity: 0; } .faq-cont { transition: 0.3s all; overflow: hidden; height: 0px; } .faq-item.faq-item-show .faq-cont { padding: 2; display: block; overflow: auto; height: auto; background-color: #fff; padding: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .faq-cont p { margin: 0px 0 20px 0; font-size: 14px; } .faq-cont p:last-child { margin-bottom: 0px; } @media(max-width:992px) { .faq-group .faq-left{ width: 100%; } .faq-group .faq-right { width: 100%; border-left: none; padding-left: 0; margin-left: 0; } } .section-padding{ padding: 50px 0px; } /* faq */ /* breadcrumbs */ .innerpage-breadcrumbs { background-color: #dd2734; height: 55px; } .breadcrumbs li { padding: 17px 0px; } .innerpage-breadcrumbs .breadcrumbs { list-style: none; margin: 0; padding: 0; } .innerpage-breadcrumbs .breadcrumbs li { list-style: none; margin: 0; display: block; float: left; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; line-height: 20px; color: #fff; } .innerpage-breadcrumbs .breadcrumbs li a { display: block; padding: 0 40px 0 0px; color: #fff; text-decoration: none; height: 20px; position: relative; perspective: 700px; } .innerpage-breadcrumbs .breadcrumbs li a:after { content: ''; width: 20px; height: 20px; border-color: #fff; border-style: solid; border-width: 1px 1px 0 0; -webkit-backface-visibility: hidden; outline: 1px solid transparent; position: absolute; right: 20px; -webkit-transition: all .15s ease; -moz-transition: all .15s ease; -ms-transition: all .15s ease; transition: all .15s ease; -webkit-transform: rotateZ(45deg) skew(10deg, 10deg); -moz-transform: rotateZ(45deg) skew(10deg, 10deg); -ms-transform: rotateZ(45deg) skew(10deg, 10deg); transform: rotateZ(45deg) skew(10deg, 10deg); } .innerpage-breadcrumbs .breadcrumbs li a:hover:after { right: 15px; -webkit-transform: rotateZ(45deg) skew(-10deg, -10deg); -moz-transform: rotateZ(45deg) skew(-10deg, -10deg); -ms-transform: rotateZ(45deg) skew(-10deg, -10deg); transform: rotateZ(45deg) skew(-10deg, -10deg); } .faq-container{ background-color: #fbfbfb; } .breadcrumbs-custom { padding: 3px; margin-top: -54px; position: relative; padding-bottom: 15px; background-color: #000000f5; padding-top: 12px; } .breadcrumbs-custom .breadcrumb { margin-bottom: 0; background-color: transparent; padding:0.20rem 0rem; } .breadcrumb-item { color: #434343; font-size: 14px; } .breadcrumb-item+.breadcrumb-item { margin-left: -5px; } .breadcrumb-item { color: #fff; font-size: 14px; } .breadcrumbs-custom .breadcrumb-item.active { color: #fff; font-weight: 600; text-transform: capitalize; } .breadcrumb-item .fa-home { color: #f32735; } .breadcrumbs-custom .breadcrumb-item::before{ display: none; } .home-form .styled-input label{ color: #fff; font-weight: 500; } .home-form .styled-input input{ color: #fff; } .feature.map { height:100%; iframe { height:100%; width:100%; border:0; filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ } } .velo-slides-nav a { display: block; /* color: rgba(255, 255, 255, 0.9); */ transition: color 0.5s ease, text-shadow 0.5s ease; left: -80px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; display: flex; justify-content: center; align-items: center; margin-right: 10px; } /* news listing */ .news-event-listing .widget-title { color: #000; margin-bottom: 10px; /* font-weight: 300; */ } .news-event-listing .event-list { margin-left: 0; list-style: none; padding-left: 0; } .news-event-listing .event { background-color: #151515; margin-bottom: 1em; min-height: 120px; display: flex; } .news-event-listing .event .date { background-color: #f32735; line-height: 1; padding: 0 12px 2px; color: white; } @media (min-width: 40em) { .news-event-listing .event .date { padding-top: 12px; margin-right: -120px; text-align: center; text-transform: uppercase; max-width: 145px; font-size: 16px; } } .news-event-listing .event .date a { color: inherit; } .news-event-listing .event .date span { font-size: 2em; font-weight: 300; margin-right: 5px; } @media (min-width: 40em) { .news-event-listing .event .date span { display: block; } } @media (min-width: 40em) { .news-event-listing .event .date .day { font-size: 2.5em; font-weight: 100; } } .news-event-listing .event .date .month { font-weight: 900; } @media (min-width: 40em) { .news-event-listing .event .date .month { font-size: 2em; } } .news-event-listing .event .date .year, .news-event-listing .event .date .time { line-height: 1.3; } @media (min-width: 40em) { .news-event-listing .event .date .year, .news-event-listing .event .date .time { font-size: 0.9em; font-weight: 400; } } .news-event-listing .event .info { color: #f5f5f5; padding: 6px 12px; } @media (min-width: 40em) { .news-event-listing .event .info { margin-left: 120px; margin-top: auto; margin-bottom: auto; } } .news-event-listing .event .info .title { color: #f5f5f5; font-family: inherit; font-weight: 300; font-size: 1.3em; } @media (min-width: 40em) { .news-event-listing .event .info .title { font-size: 1em; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; } } .news-event-listing .event .info .desc { color: #f5f5f5; font-weight: 300; margin-bottom: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; } .category-strip{ position: absolute; top: 30px; background-color: #dd2734; padding: 5px 20px; color: white; border-radius: 0px 5px 5px 0px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } .category-strip-sm{ position: absolute; top: 50px; background-color: #dd2734; padding: 5px 20px; color: white; border-radius: 0px 5px 5px 0px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } .blog-listing .card-header { padding: 0; } .newsEvent-List .card-body .event-place i { color: #dd2734; } .blog-listing .card { background-color: #fff; border-radius: 10px; box-shadow: 0 2px 20px rgb(0 0 0 / 9%); border: none; } /* upcoming event */ .event-calendar { font-size: 14px; overflow:hidden; white-space: nowrap; } .newsEvent-List .card p{ font-size: 14px; } .event-calendar .head { margin-bottom: -3.2em; } .event-calendar .top-line { font-weight: 400; font-size: 37px; text-transform: capitalize; color: #000; padding: 30px 0px; } .event-calendar .spacer { border-bottom: 1px solid rgb(229, 229, 229); } .event-calendar .event-list { display: block; border-right: 1px solid rgb(229, 229, 229); } .event-calendar .event1 { text-decoration: none; } .event-calendar .event:nth-child(3n+1) .event-container { border-left-color: #6D4C41; /* brown */ } .event-calendar .event:nth-child(3n) .event-container { border-left-color: #FDD835; /*yellow*/ } .event-calendar .event:nth-child(3n-1) .event-container { border-left-color: #F44336; /*red*/ } .event-calendar .event-container { color: rgb(221 39 52); transition: all 0.2s ease; background: rgb(221 39 52 / 3%); border-left: 3px solid; padding-top: 10px; } .event-calendar .event-container:hover { border-left-width: 7px; background:#ECEFF1; } .event-calendar .date-container { display:inline-block; width:2.3em; padding-left: 13px; padding-right: 8px; padding-bottom: 2px; margin-right: 6px; font-weight: 700; color: #dd2734; } .event-calendar .date1 { font-size: 2.5em; } .event-calendar .month { display:block; font-size: .4em; font-weight: 400; margin-top:-.8em; text-transform:uppercase; } /* .event-calendar .detail-container { display:inline-block; vertical-align:top; padding: 13px 28px; } */ .event-calendar .detail-container { display: inline-block; vertical-align: top; padding: 13px 28px; width: 288px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-calendar .title { text-transform: capitalize; font-weight: 600; font-size: 16px; color: #000000; } .event-calendar .description { display:block; font-size:0.9em; color: #585858; } /* news-listing slider */ .news-slider .item { /* height: 100vh; */ position: relative; } .news-slider .item img { width: 100%; /* height: 100%; */ object-fit: cover; height: 500px; } .news-slider .item .cover { padding: 75px 0; position: absolute; width: 100%; height: 500px; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; } .news-slider .item .cover .header-content { position: absolute; top: 35%; } /* .news-slider .item .cover .header-content .line { content: ""; display: inline-block; width: 100%; height: 100%; left: 0; top: 0; position: absolute; -webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%); clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%); } */ .news-slider .item .cover .header-content h2 { font-weight: 300; font-size: 18px; color: #fff; background-color: red; display: inline-block; padding: 10px; } .news-slider .item .cover .header-content h1 { font-size: 56px; font-weight: 600; margin: 5px 0 20px; word-spacing: 3px; color: #fff; } .news-slider .item .cover .header-content h4 { font-size: 45px; font-weight: 400; line-height: initial; color: #fff; width: 90%; } .news-slider .owl-item.active h1 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInDown; animation-delay: 0.3s; } .news-slider .owl-item.active h2 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInDown; animation-delay: 0.3s; } .news-slider .owl-item.active h4 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.3s; } .news-slider .owl-item.active .line { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInLeft; animation-delay: 0.3s; } .news-slider .owl-nav .owl-prev { position: absolute; left: 15px; top: 43%; opacity: 0; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; background: rgba(0, 0, 0, 0.5) !important; width: 40px; cursor: pointer; height: 40px; position: absolute; display: block; z-index: 1000; border-radius: 0; } .news-slider .owl-nav .owl-prev span { font-size: 1.6875rem; color: #fff; } .news-slider .owl-nav .owl-prev:focus { outline: 0; } .news-slider .owl-nav .owl-prev:hover { background: #000 !important; } .news-slider .owl-nav .owl-next { position: absolute; right: 15px; top: 43%; opacity: 0; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; background: rgba(0, 0, 0, 0.5) !important; width: 40px; cursor: pointer; height: 40px; position: absolute; display: block; z-index: 1000; border-radius: 0; } .news-slider .owl-nav .owl-next span { font-size: 1.6875rem; color: #fff; } .news-slider .owl-nav .owl-next:focus { outline: 0; } .news-slider .owl-nav .owl-next:hover { background: #000 !important; } .news-slider:hover .owl-prev { left: 0px; opacity: 1; } .news-slider:hover .owl-next { right: 0px; opacity: 1; } .events-venu p{ color: #fff; margin-right: 20px; } .events-venu p i{ color: #dd2734; } .Pager1 { margin-top: 20px; } .emailusQouet{ padding: 100px 0; text-align: center; min-height: 300px; } .emailusQouet h2{ color: #fff; } .findusmt--100 { margin-top: -250px; position: relative; padding-bottom: 50px; } .findusmt--100 h3 a{ color: #dd2734; } .findusmt--100 h3{ font-size: 18px; font-weight: 500; } /* news details */ .blog-details-page h1 { color: var(--black); font-size: var(--h1); font-weight: var(--fw-bold); } .blog-details-page .info_block { display: flex; gap: 6px; } .blog-details-page h3 { color: #464242; /* margin-bottom: var(--spacing-s); */ /* font-size: var(--h3); */ /* font-weight: var(--fw-bold); */ font-size: 20px; line-height: 1.7; font-weight: 400; } .owl-theme .owl-nav { margin-top: 0px; } .pagination.pagination-circle .page-item .page-link { margin-left: 2px; margin-right: 2px; border-radius: 50%; } .pagination .page-item .page-link { -webkit-transition: all .3s linear; transition: all .3s linear; outline: 0; border: 0; background-color: transparent; font-size: .9rem; color: #999; font-weight: bold; } .page-item.disabled .page-link { color: #6c757d; pointer-events: none; cursor: auto; background-color: #fff; border-color: #dee2e6; } .pagination.pagination-circle .page-item.active .page-link { border-radius: 50%; width: 35px; height: 35px; text-align: center; } .pagination .page-item .page-link:hover { -webkit-transition: all .3s linear; transition: all .3s linear; border-radius: .125rem; background-color: #eee; } .pagination.pg-blue .page-item.active .page-link:hover { background-color: #f32735; } .pagination .page-item.active .page-link { -webkit-transition: all .2s linear; transition: all .2s linear; border-radius: .125rem; background-color: #f32735; color: #fff; } .pagination .page-item .page-link { -webkit-transition: all .3s linear; transition: all .3s linear; outline: 0; border: 0; background-color: transparent; font-size: .9rem; color: #999; font-weight:bold; } .pagination.pagination-circle .page-item .page-link:hover { border-radius: 50%; } .pagination.pagination-circle .page-item .page-link { margin-left: 2px; margin-right: 2px; border-radius: 50%; } .pagination .page-item.active .page-link{ box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); } .post-module { position: relative; z-index: 1; display: block; background: #FFFFFF; min-width: 270px; height: 470px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); transition: all 0.3s linear 0s; } .post-module:hover, .hover { box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); } .post-module:hover .thumbnail img, .hover .thumbnail img { transform: scale(1.1); opacity: .6; } .post-module .thumbnail { background: #000000; height: 400px; overflow: hidden; } .post-module .thumbnail .date { position: absolute; top: 20px; right: 20px; z-index: 1; background: #e74c3c; width: 55px; height: 55px; padding: 12.5px 0; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; color: #FFFFFF; font-weight: 700; text-align: center; -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .post-module .thumbnail .date .day { font-size: 18px; } .post-module .thumbnail .date .month { font-size: 12px; text-transform: uppercase; } .post-module .thumbnail img { display: block; width: 120%; transition: all 0.3s linear 0s; } .post-module .post-content { position: absolute; bottom: 0; background: #FFFFFF; width: 100%; padding: 30px; box-sizing: border-box; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; } .post-module .post-content .category { position: absolute; top: -34px; left: 0; background: #e4202d; padding: 10px 15px; color: #FFFFFF; font-size: 14px; font-weight: 600; text-transform: uppercase; } .post-module .post-content .title { margin: 0; padding: 0 0 10px; color: #333333; font-size: 22px; font-weight: 400; line-height: 1.4; } .post-module .post-content .sub_title { margin: 0; /* padding: 0 0 20px; */ color: #696969; font-size: 16px; font-weight: 400; margin-bottom: 10px; } .post-module .post-content .description { display: none; color: #666666; font-size: 14px; line-height: 1.8em; } .post-module .post-content .post-meta { margin: 10px 0 0; color: #999999; } .post-module .post-content .post-meta .timestamp { margin: 0 16px 0 0; } .post-module .post-content .post-meta a { color: #999999; text-decoration: none; } .hover .post-content .description { display: block !important; height: auto !important; opacity: 1 !important; } .post-module{ margin-bottom: 30px; } /* news details */ .product-section .product-img { width: 35%; float: left; margin-right: 20px; } .product-name { font-size: 35px; font-weight: 600; /* line-height: 22px; */ margin-bottom: 17px; color: #1d1c1c; } .product-dtl p.claories-text { color: #ffad01; margin-bottom: 5px; } .product-dtl p { font-size: 14px; line-height: 24px; color: #000; } .product-dtl p.sub-heading-para { font-size: 16px; line-height: 1.8; font-weight: 500; margin-bottom: 10px; } .product-dtl p { font-size: 14px; line-height: 24px; color: #000; } .event-place .fa{ color: #e4202d; } .manu-image img{ width: 100%; height: 35vh; } .manu-image::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000063, #000000bd, #000000); transition: all 0.3s; z-index: 1; } .manu-image h4{ position: absolute; bottom: 0; left: 35%; color: white; z-index: 10; left: 50%; transform: translate(-50%, -50%); font-size: 20px; } .manu-image { position: relative; transition: transform .2s; } .manu-image:hover::after { background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #002d63bf, #002d63); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } .manu-image:hover{ transform: scale(1.1); } .our-inner-products{ padding: 50px 0; } .dynamic-product-text h2{ font-size: 57px; text-transform: capitalize; } .dynamic-product-text span{ font-size: 21px; color: #e4202d; text-transform: uppercase; font-weight: 600; letter-spacing: 8.5px; } .our-inner-products p{ line-height: 1.8; } .categ-list{ min-height: 250px; } .our-inner-products .content-inner { width: 100%; color: #fff; position: relative; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; transition: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .our-inner-products .fl-wrap { float: left; width: 100%; position: relative; } .our-inner-products .content-inner .content-front, .our-inner-products .content-inner .content-back { position: relative; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; height: 100%; display: flex; justify-content: center; align-items: center; } .our-inner-products .content-front { background: #292929; position: relative; } .our-inner-products .content-inner > * { backface-visibility: hidden; transition: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .our-inner-products .cf-inner:before, .our-inner-products .cf-inner:after { content: ""; position: absolute; width: 50px; height: 50px; border-color: rgba(255, 255, 255, 0.4); z-index: 10; } .our-inner-products .cf-inner:before { top: 20px; left: 20px; border-left: 1px solid; border-top: 1px solid; } .our-inner-products .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; background-attachment: scroll; background-position: center; background-repeat: repeat; background-origin: content-box; } .our-inner-products .overlay { /* position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; z-index: 3; */ } .our-inner-products .content-inner .cf-inner .inner { align-items: stretch; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; transform: translateZ(95px) scale(0.81); text-align: center; position: relative; z-index: 2; } .our-inner-products .cf-inner:after { bottom: 20px; right: 20px; border-right: 1px solid; border-bottom: 1px solid; } .our-inner-products .content-inner .cf-inner .inner h2 { position: relative; font-size: 24px; font-weight: 500; /* padding-bottom: 10px; */ margin-bottom: 0; } /* .our-inner-products .content-inner .cf-inner .inner h2:before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 20px; height: 2px; margin-left: -10px; } */ .our-inner-products .content-inner .content-front li { display: inline-block; color: #fff; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; margin: 0 4px; } .our-inner-products .cf-inner:after { bottom: 20px; right: 20px; border-right: 1px solid; border-bottom: 1px solid; } .our-inner-products .content-inner .content-front, .our-inner-products .content-inner .content-back { position: relative; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; height: 100%; display: flex; justify-content: center; align-items: center; } .our-inner-products .content-inner .cf-inner .inner { align-items: stretch; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; transform: translateZ(95px) scale(0.81); text-align: center; position: absolute; z-index: 2; background-color: #e4202de6; padding: 15px; left: 0; right: 0; } .our-inner-products .content-inner:hover .content-front { transform: rotateY(-180deg); } .our-inner-products .content-inner:hover .content-back { transform: rotateY(0deg); } .our-inner-products .content-inner .content-back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; transform: rotateY(180deg); background: #292929; background-image: url("https://images.unsplash.com/photo-1478760329108-5c3ed9d495a0?ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80"); } .our-inner-products .content-inner .cf-inner { transform-style: preserve-3d; backface-visibility: hidden; width: 100%; padding: 150px 20px; min-height: 350px; } .our-inner-products .serv-price-wrap { background: rgba(255, 255, 255, 0.05); padding: 15px 30px; margin-top: 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; } .our-inner-products .serv-price-wrap:hover{ background: black; } .our-inner-products .content-inner .cf-inner .inner h2:before { background: #00bcd4; } .our-inner-products .our-inner:before, .our-inner-products .cf-inner:after { content: ""; position: absolute; width: 50px; height: 50px; border-color: rgba(255, 255, 255, 0.4); z-index: 10; } .our-inner-products .cf-inner:before, .our-inner-products .cf-inner:after { content: ""; position: absolute; width: 50px; height: 250px; border-color: rgba(0, 188, 212, 0.33); z-index: 10; } .our-inner-products .dec-icon { padding-bottom: 40px; } /* .our-inner-products .content-back .cf-inner:before { top: 125px; } .our-inner-products .content-back .cf-inner:after { bottom: 125px; } */ /* custom-cursor */ /* =============================================================================================== */ .custom-cursor { width: 3rem; height: 3rem; border: 1px solid hsla(0, 0%, 100%, .7); border-radius: 100%; background: hsla(0, 0%, 80%, .2); position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; } .vdo{ width: 100%; object-fit: cover; height: 350px; } .category-listing-inner a { color: #aaa; text-decoration: none; position: relative; display: block; width: 100%; height: 100%; } .category-listing-inner a .video { height: 350px; } .category-listing-inner a .video .vdo { z-index: 1; } .category-listing-inner a .video .bg { /* width: 310px; */ /* height: 390px; */ z-index: 2; position: absolute; top: 0; height: 350px; } .category-listing-inner a .video .red { background-image: linear-gradient(to right, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1)); } .category-listing-inner a .video .green { background-image: linear-gradient(to right, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.1)); } .category-listing-inner a .video .blue { background-image: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.1)); } .category-listing-inner a .video .name { position: absolute; left: 0; bottom: 7%; width: 100%; text-align: center; color: #fff; text-transform: uppercase; opacity: 1; z-index: 3; letter-spacing: 3px; transition: all 1s; } .category-listing-inner a .video .name h2 { font-size: 2em; margin: 0; } .category-listing-inner a .video .name p { font-size: 1em; margin: 0; font-size: 14px; letter-spacing: normal; text-transform: lowercase; font-weight: 300; } .category-listing-inner .video:hover .name { opacity: 0.5; } .our-inner-products .overlay::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #00000080, #000000); transition: .5s ease; } .card-custom { background-color: #fff; color: var(--color2); height: 450px; letter-spacing: 5px; border-radius: 20px; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; border: 1px solid #c3c3c3; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } /* 'Nike' label in the background */ .card-custom::before { color: #e8aeb2; width: fit-content; height: fit-content; font-size: 90px; font-weight: bold; font-style: italic; opacity: 15%; content: 'Altattan'; position: absolute; left: 51%; top: 62%; transform: translate(-50%, -50%); } /* Circle */ .card-custom::after { background-color: #f0f0f0; width: 400px; height: 400px; border-radius: 50%; z-index: 0; transition-duration: calc(var(--transitionDuration) / 2); transition-property: width, height, transform; transition-timing-function: ease-in-out; content: ''; position: absolute; right: 0; top: 0; transform: translate(36%, -39%); } .card-custom:hover::after { width: 500px; height: 500px; transform: translate(30%, -62%);; } .card__img { width: 100%; height: auto; z-index: 1; transition: top var(--transitionDuration); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(360deg); } .card-custom:hover .card__img { top: 24%; } .card__title { font-weight: 700; transition: top var(--transitionDuration); position: absolute; left: 47%; top: 72%; transform: translateX(-50%); width: 67%; letter-spacing: 1.5px; color: #000; font-size: 18px; } .card-custom:hover .card__title { top: 50%; } .card__content { height: 70px; font-size: 14px; font-weight: 300; text-transform: uppercase; opacity: 0; transition: top var(--transitionDuration), opacity var(--transitionDuration) calc(var(--transitionDuration) / 2); /* Position */ position: absolute; left: 50%; top: 150%; transform: translate(-50%, -50%); /* Flex */ display: flex; flex-direction: column; justify-content: space-between; } .card-custom .card:hover .card__content { opacity: 100%; top: 70%; } .card__sizeContainer { /* Flex */ display: flex; justify-content: center; align-items: center; } .card__sizeNumber { background-color: var(--color2); color: var(--color1); width: 26px; height: 26px; padding: 5px 7px; margin: 0 5px; font-size: 14px; border-radius: 6px; cursor: pointer; /* Flex */ display: flex; justify-content: center; align-items: center; } .card__sizeNumber:hover { background-color: var(--color3); } .card__colorContainer { /* Flex */ display: flex; justify-content: center; align-items: center; } .card__colorCircle { background-color: var(--color2); color: var(--color1); width: 20px; height: 20px; margin: 0 5px; border-radius: 50%; cursor: pointer; } .card__colorCircle:hover { outline: solid 2px var(--color2); } .card__link { background-color: var(--color2); color: var(--color1); padding: 10px 15px; text-decoration: none; font-weight: 600; border-radius: 3px; transition: top var(--transitionDuration); /* Position */ position: absolute; left: 50%; top: 250%; transform: translate(-50%, -50%); } .card-custom:hover .card__link { top: 88%; } .card__link:hover { background-color: var(--color3); } .productCard { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; position: relative; perspective: 100px; } .productCard.morph .container .colorLayer { width: 70%; transform: none; transition-delay: 0s; } .productCard.morph .container .colorLayer:after { opacity: 1; transition-delay: 0.2s; } .productCard.morph .container .preview { width: 70%; } .productCard.morph .container .preview .brand { top: 50px; } .productCard.morph .container .preview .zoomControl { opacity: 0; pointer-events: none; transition-delay: 0s; } .productCard.morph .container .preview .closePreview { opacity: 1; pointer-events: all; transition-delay: 0.3s; } .productCard .container { width: 90%; margin: 0 auto; background-color: #fff; box-sizing: border-box; } .productCard .container .info { width: calc(50% - 50px); padding-top: 50px; padding-bottom: 50px; } .productCard .container .info .name { color: #ffffff; font-size: 14px; text-transform: uppercase; margin-bottom: 0; background-color: #e4202d; padding: 5px; display: inline-block; letter-spacing: 1.8px; } .productCard .container .info .slogan { font-size: 60px; font-weight: 600; } .productCard .container .info .price { font-size: 14px; line-height: 1.8; } .productCard .container .info .attribs .attrib { margin-top: 40px; } .productCard .container .info .attribs .attrib.size .options .option.activ { color: #fff; border-color: #f7c531; background-color: #f7c531; } .productCard .container .info .attribs .attrib.color .options .option { width: 25px; height: 25px; position: relative; border: 3px solid currentColor; } .productCard .container .info .attribs .attrib.color .options .option:before { content: ""; position: absolute; width: 60%; height: 60%; border-radius: 2px; background-color: currentColor; transform: scale(0); transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 0.3s; } .productCard .container .info .attribs .attrib.color .options .option.activ:before { transform: scale(1); } .productCard .container .info .attribs .attrib .header { margin-bottom: 10px; color: darkgray; font-weight: 600; } .productCard .container .info .attribs .attrib .options { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; align-content: center; } .productCard .container .info .attribs .attrib .options .option { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; width: 35px; height: 35px; margin: 10px 10px 0 0; font-size: 14px; font-weight: 600; color: darkgray; border-radius: 5px; border: 1px solid darkgray; cursor: pointer; user-select: none; transition: ease all 0.3s; } .productCard .container .info .attribs .attrib .options .option:hover { box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); } .productCard .container .info .buttons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; align-content: center; margin-top: 50px; } .productCard .container .info .buttons .button { margin: 20px 20px 0 0; min-width: 120px; padding: 15px; border-radius: 5px; color: #fff; font-weight: 600; text-align: center; letter-spacing: 1px; text-transform: uppercase; background-color: #3a3a31; user-select: none; cursor: pointer; transition: ease all 0.3s; } .productCard .container .info .buttons .button:hover { transform: translateY(-5px); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5); } .productCard .container .info .buttons .button.colored { background-color: #ff5263; } .productCard .container .colorLayer { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-color: #e5e5e5; transform: rotateY(-8deg); transform-origin: right; perspective: 100px; transition: ease all 0.3s 0.2s; } .productCard .container .colorLayer:after { content: ""; position: absolute; top: 0; right: 100%; width: 50%; height: 100%; opacity: 0; background-color: rgba(0, 0, 0, 0.7); transition: ease all 0.3s; } .productCard .container .preview { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; position: absolute; top: 0; right: 0; width: 50%; height: 100%; user-select: none; overflow: hidden; transition: ease all 0.3s; } .productCard .container .preview .brand { position: absolute; top: 62px; width: 90%; height: 200px; font-size: 300px; text-align: center; color: rgb(0 0 0 / 20%); text-transform: uppercase; overflow: hidden; transition: ease all 0.3s; } .productCard .container .preview .imgs { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; width: 100%; height: 100%; } .productCard .container .preview .imgs img { position: absolute; top: 0; height: 100%; object-fit: contain; transform: translate(50%, -10%) rotate(-20deg); opacity: 0; pointer-events: none; transition: ease all 0.3s; } .productCard .container .preview .imgs img.activ { opacity: 1; transform: none; } .productCard .container .preview .zoomControl { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; background-color: rgba(0, 0, 0, 0.3); cursor: pointer; transition: ease all 0.3s 0.5s; } .productCard .container .preview .zoomControl:before, .productCard .container .preview .zoomControl:after { content: ""; position: absolute; } .productCard .container .preview .zoomControl:before { top: 20%; left: 20%; width: 40%; height: 40%; border-radius: 50%; border: 2px solid #fff; } .productCard .container .preview .zoomControl:after { bottom: 20%; right: 20%; width: 2px; height: 30%; background-color: #fff; transform: rotate(-45deg); transform-origin: bottom left; } .productCard .container .preview .closePreview { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; opacity: 0; cursor: pointer; pointer-events: none; transition: ease all 0.3s; } .productCard .container .preview .closePreview:before, .productCard .container .preview .closePreview:after { content: ""; position: absolute; width: 1px; height: 100%; background-color: #fff; transform: rotate(45deg); } .productCard .container .preview .closePreview:after { transform: rotate(-45deg); } .productCard .container .preview .movControls { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; position: absolute; bottom: 150px; } .productCard .container .preview .movControls .movControl { font-size: 40px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; display: flex; justify-content: center; align-items: center; } .productCard .container .preview .movControls .movControl.left { transform: rotateY(180deg); font-size: 40px; transform: rotateY(180deg); margin-right: 20px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; display: flex; justify-content: center; align-items: center; } .productCard .container .preview .movControls .movControl:before { position: relative; } .productCard .container .preview .movControls .movControl:after { position: absolute; display: flex; justify-content: center;align-items: center; content: ""; width: 10px; height: 10px; border: 2px solid #fff; border-left: 0; border-bottom: 0; transform: rotate(45deg); } @media only screen and (max-width: 768px) { body * { cursor: default !important; } .productCard.morph .container .colorLayer { width: 100%; height: 80vh; } .productCard.morph .container .preview { width: 100%; height: calc(80vh - 100px); } .productCard.morph .container .preview .brand { top: 0; } .productCard .container { width: 100%; } .productCard .container .info { width: 100%; margin-bottom: 450px; text-align: center; } .productCard .container .info .attribs .attrib .options { justify-content: center; } .productCard .container .info .attribs .attrib .options .option { margin: 10px; } .productCard .container .info .buttons { justify-content: center; margin-top: 10px; } .productCard .container .info .buttons .button { margin: 20px; } .productCard .container .colorLayer { top: auto; bottom: 0; width: 100%; height: 300px; transform: none; } .productCard .container .colorLayer:after { top: -20vh; right: 0; width: 100%; height: 20vh; } .productCard .container .preview { top: auto; bottom: 50px; width: 100%; height: 400px; } .productCard .container .preview .brand { top: 0; left: 0; text-align: left; -webkit-text-stroke: 3px #f7c531; } .productCard .container .preview .closePreview { top: 0; } .productCard .container .preview .movControls { bottom: 0; } } @media only screen and (max-width: 500px) { .productCard .container .info { margin-bottom: 300px; } .productCard .container .info .buttons .button { width: 100%; margin: 20px 0 0 0; } .productCard .container .colorLayer { height: 200px; } .productCard .container .preview { height: 250px; } .productCard .container .preview .brand { height: 150px; font-size: 150px; } .new-customNavbar .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; display: block; margin-top: 0px!important; } .new-customNavbar .menu-items .dropdown-menu, .new-customNavbar .menu-items .menu-right { padding-left: 1rem; width: 95%!important; margin-left: 16px!important; } } .speed-npx{ min-height: 600px; display: flex; justify-content: center; align-items: center; text-align: center; } .speed-npx .design-combat{ width: 40%; left: 0; background-color: #000000db; height: 100%; position: absolute; bottom: 0; padding: 50px; } .speed-npx .design-combat h2{ color: #fff; font-size: 55px; font-weight: 700; text-align:left; } .speed-npx .design-combat p{ color: #fff; text-align:left; } .speed-npx .design-combat a{ position: relative; } /* .speed-npx::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom, #0000000f, #00000000, #0000001a, #00000073, #000000f7); transition: .5s ease; z-index: -1; } */ .product-menu{ display: flex; top: 74px; z-index: 20; position: relative; background-color: #fff; } .product-menu .produmenu-txt.active{ background-color: #e4202d; color:#fff; } .produmenu-txt{ color: #000; flex-grow: 1; flex-basis: 0; text-align: center; padding: 10px 20px; display: flex; justify-content:space-between; border-right: 1px solid #d0d0d0; text-decoration: none; } .produmenu-txt:hover { background-color: #e4202d; color:#fff; } .produmenu-tx a{ } .counter img{ height: 45px; } .counter-container { display: flex; justify-content: space-around; align-items: center; } .counter { text-align: center; } .counter h3 { font-size: 20px; font-weight: 700; color: #000; } .counter h6 { font-size: 16px; } .product-specification{ background-color: #f2f2f2; min-height: 500px; /* padding: 50px 0; */ } .specificationx-bx{ background-color: #fff; padding: 50px; } .product-specification .sketchs{ background-image: url(assets/images/products/image-removebg-preview.png); padding: 50px 0; text-align: center; } .specification-text .table tr td, .specification-text .table tr th{ font-size: 14px; text-transform: capitalize; padding: 6px 10px; } .specification-text .table{ background-color: white; } .product-requirement{ min-height: 400px; } .product-requirement{ padding: 100px 0; } .design-counter h3, .design-counter h6, .design-counter p{ color: #fff; } .design-counter .counter img { width: 70px; margin-bottom: 20px; } .design-counter .counter p { color: #fff; text-align: center; } .star { display: inline-block; margin: 5px; font-size: 18px; color: whitesmoke; position: relative; } .star:before { font-family: fontAwesome; display: inline-block; content: ""; position: relative; float: right; z-index: 2; } .star.animate { color: #e4202d; } @-webkit-keyframes stretch-bounce { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(1.5); } 50% { -webkit-transform: scale(0.9); } 75% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } .rating .star:nth-child(1) { transition: color 0s ease 1s; } .rating .star:nth-child(1).animate { -webkit-animation: stretch-bounce 0.5s ease-in-out 1s; } .rating .star:nth-child(2) { transition: color 0s ease 1.2s; } .rating .star:nth-child(2).animate { -webkit-animation: stretch-bounce 0.5s ease-in-out 1.2s; } .rating .star:nth-child(3) { transition: color 0s ease 1.4s; } .rating .star:nth-child(3).animate { -webkit-animation: stretch-bounce 0.5s ease-in-out 1.4s; } .rating .star:nth-child(4) { transition: color 0s ease 1.6s; } .rating .star:nth-child(4).animate { -webkit-animation: stretch-bounce 0.5s ease-in-out 1.6s; } .rating .star:nth-child(5) { transition: color 0s ease 1.8s; } .rating .star:nth-child(5).animate { -webkit-animation: stretch-bounce 0.5s ease-in-out 1.8s; } * { box-sizing: border-box; } .product-requirement { height: 100vh; padding: 200px 0; overflow: hidden; } /* .s-1 { display: flex; justify-content: center; align-items: center; margin: auto; } */ .s-1 h1 { font-size: 48px; font-weight: bold; } .s-2 { position: relative; background-color: rgba(221, 221, 221, 0.2); } /* .s-2-inner { width: 23%; position: absolute; left: 25%; top: 50%; transform: translateY(-50%); line-height: 1.3; padding: 25px; border: 10px solid white; } */ .s-2-inner h2 { font-size: 36px; font-weight: bold; } .s-2-inner p { font-size: 16px; /* letter-spacing: 5px; */ margin: 20px 0; } .s-2-inner a { display: inline-block; padding: 10px 20px; background-color: royalblue; color: white; font-size: 24px; font-weight: bold; text-decoration: none; line-height: 40px; } /* .s-2 img { position: absolute; right: 25%; top: 50%; transform: translateY(-50%); } */ /* .s-2 .box { width: 512px; height: 350px; background-color: transparent; border: 10px solid white; position: absolute; right: 22%; top: 47%; transform: translateY(-50%); } */ /* .s-3 { display: flex; justify-content: center; align-items: center; margin: auto; } */ .s-3 h3 { font-size: 24px; font-weight: bold; } .startNew .startNew-txt{ font-size: 30px; } .product-performance{ min-height: 380px; display: flex; justify-content: center; align-items: center; } .product-performance::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000000e8; transition: .5s ease; z-index: -1; } .product-performance .section-title{ color: #fff; text-align: center; } .product-performance .section-title .name { color: #ffffff; font-size: 14px; text-transform: uppercase; margin-bottom: 0; background-color: #e4202d; padding: 5px; display: inline-block; letter-spacing: 1.8px; margin-bottom: 20px; } .product-requirement .section-title .name { color: #ffffff; font-size: 14px; text-transform: uppercase; margin-bottom: 0; background-color: #e4202d; padding: 5px; display: inline-block; letter-spacing: 1.8px; } .product-into-sepcs{ min-height: 500px; } .product-into-sepcs{ padding: 100px 0; } .sepc-01{ display: flex; margin-bottom:10px; } .sepc-01 img{ width: auto; height: 60px; } .sepc-01 h2{ font-size: 40px; font-weight: 700; color: #000; margin-left: 20px; } .sepc-01 p{ font-size: 14px; margin-left: 20px; } .startNew.startNew1 h5{ font-size: 25px; font-weight: 500; color: #e4202d; } .startNew h4{ font-size: 14px; } .caregory-lst-page h2{ font-size: 40px; font-size: 50px; font-weight: 600; } .caregory-lst-page p{ font-size: 14px; line-height: 1.6; } .caregory-lst-page{ background-color: #ececec; padding: 50px 0; } .firstarrow::before{ content: ''; position: absolute; border-radius: 50%; right: 0; bottom: -30px; left: 0; width: 300px; height: 300px; background-color: #d81e2b; transition: .5s ease; z-index: -1; } .p-relative{ position: relative; } .s-2 img{ z-index: 10; position: relative; } /* carrers */ .customform .input-group-addon { background-color: #f3f6f9; border: 0 solid transparent; border-radius: 4px 0 0 4px; color: #656565; /* font-size: 16px; */ font-weight: 400; line-height: 2.5; padding: 6px 5px 6px 20px; text-align: center; } .submit-form .form-control { background-color: #f3f6f9; background-image: none; border: 1px solid #eceff2; border-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #656565; display: block; font-size: 14px; height: 40px; line-height: 1.42857; } .customform .form-control { font-size: 13px !important; border-radius: 0 4px 4px 0 !important; height: 50px !important; box-shadow: none !important; border: 0 !important; } .submit-form .btn-group-vertical > .btn, .submit-form .btn-group > .btn { background-color: #f3f6f9 !important; border-color: #eceff2 !important; color: #656565 !important; float: left; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; height: 40px; position: relative; } .customform .bootstrap-select > .dropdown-toggle { font-size: 13px !important; } .nopadding .customform .btn { box-shadow: none !important; } .bootstrap-select.btn-group .dropdown-toggle .filter-option { display: inline-block; overflow: hidden; width: 100%; text-align: left; } .bootstrap-select.btn-group .dropdown-toggle .caret { position: absolute; top: 50%; right: 12px; margin-top: -2px; vertical-align: middle; } .listcheckbox li { padding: 0 15px 0 0 !important; margin-left: 20px !important; color: rgba(255, 255, 255, 0.5); margin-bottom: 0 !important; } .list-inline>li { display: inline-block; padding-right: 5px; padding-left: 5px; } .checkbox input[type="checkbox"], .checkbox input[type="radio"] { opacity: 0; z-index: 1; } .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { } input[type=checkbox], input[type=radio] { margin: 4px 0 0; margin-top: 1px\9; line-height: normal; } .submit-form small { color: gray; padding-left: 10px; } .listcheckbox small { padding-left: 0 !important; } .listcheckbox .readmore { color: gray !important; text-transform: capitalize; padding-top: 20px; font-size: 13px; display: block; } select.bs-select-hidden, select.selectpicker { display: none !important; } .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%; } .bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="col-"] { float: none; display: inline-block; margin-left: 0; } .submit-form .btn-group-vertical > .btn, .submit-form .btn-group > .btn { background-color: #f3f6f9 !important; border-color: #eceff2 !important; color: #656565 !important; float: left; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; height: 40px; position: relative; width: 100%; height: 50px; } .bootstrap-select.btn-group .dropdown-toggle .filter-option { display: inline-block; overflow: hidden; width: 100%; text-align: left; } .bootstrap-select.btn-group .dropdown-toggle .caret { position: absolute; top: 50%; right: 12px; margin-top: -2px; vertical-align: middle; } .bootstrap-select.btn-group .dropdown-menu { min-width: 100%; z-index: 1035; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: none !important; border-radius: 0; } .bootstrap-select .dropdown-menu, .navbar .dropdown-menu { border: 0; padding: 5px !important; } .bootstrap-select.btn-group .dropdown-menu.inner { position: static; float: none; border: 0; padding: 0; margin: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .bootstrap-select.btn-group .dropdown-menu { min-width: 100%; z-index: 1035; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: none !important; border-radius: 0; } .bootstrap-select .dropdown-menu, .navbar .dropdown-menu { border: 0; padding: 5px !important; } .bootstrap-select.btn-group .dropdown-menu li { position: relative; } .navbar-right .dropdown-menu > li, .bootstrap-select .dropdown-menu > li, .navbar .dropdown-menu > li { padding: 7px 14px !important; border-bottom: 1px solid #ededed !important; background-color: transparent !important; } .job-item { border: 1px solid transparent; border-radius: 2px; box-shadow: 0 0 45px rgba(0, 0, 0, .08); transition: .5s; background-color: #fff; } .recent-jobs h2{ font-size: 26px; } .nav-pills .nav-item .active { border-bottom: 3px solid #ed1c24; color: #ed1c24; } .nav-pills a { color: #000000; text-decoration: none; font-weight: 600; } .btn-black{ background-color: #000; } /* .job-item { color: #d81e2b; } */ .job-item .fa{ color: #ed1c24; } .custom-btns.btn-red i{ color: #fff !important; } .job-item h5{ font-weight: 700; line-height: 1.2; color: #2B3940; } .job-item .btn-red:hover,.customform .btn-red:hover{ border-color: black !important; color: #000; } .job-item .btn-red1:hover,.customform .btn-red1:hover{ border-color: black !important; color: #000; } .job-item .btn-red:hover i,.customform .btn-red:hover i{ color: #000 !important; } .job-item .btn-red1:hover i,.customform .btn-red1:hover i{ color: #000 !important; } .job-details-li i { color: #e4202d; } .job-details-btn{ background-color: #e4202d; color: white; } .job-details-icon i{ color: #e4202d; } hr { border: none; border-top: 2px dotted #e4202d; color: #fff; background-color: #fff; height: 1px; width: 87%; } .job-details-sec{ background-color: #f7f7fb; } .page-heading-sm { /* background-image: url(../images/bg/page-heading-bg.jpg); */ background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 20px 0px 150px 0px; color: #fff; min-height: 160px; } .job-post-container { padding: 48px 48px 56px; border-radius: 24px; background-color: #fff; box-shadow: 4px 4px 12px 0 rgba(21, 60, 245, 0.05), 0 2px 6px 0 rgba(5, 21, 46, 0.02); } .card-sidebars { padding: 40px 32px; box-shadow: 0 7px 8px 0 rgba(30, 54, 170, 0.08); border-radius: 22px; background-color: #fff; } .job-post-container h3{ font-weight: 600; } .job-details-sec h4{ font-weight: 600; } .job-post-container p,.job-post-container ul li{ font-size: 14px; line-height: 1.6; } .card-sidebars p{ font-size: 14px; } /* .banner-container { padding-top: 112px; padding-bottom: 112px; background-color: #dd2734; background-image: url(../images/bg/pattern.png); background-position: 100% 100%; background-size: auto; background-repeat: no-repeat; background-size: contain; } .banner-text-container h2{ font-size: 60px; color: #fff; } */ .paragraph-large { margin-bottom: 24px; font-size: 20px; line-height: 36px; color: white; font-weight: 300; margin-bottom: 0; } .banner-grid { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; grid-column-gap: 110px; -ms-grid-columns: 40% 1fr; grid-template-columns: 40% 1fr; -ms-grid-rows: auto; grid-template-rows: auto; } .subscribe-input { /* min-height: 63px; */ padding-right: 25px; padding-left: 25px; border: 0px solid #000; /* border-radius: 10px; */ box-shadow: 0 20px 24px 0 rgba(21, 60, 245, 0.06), 0 8px 24px 0 rgba(5, 21, 46, 0.1); -webkit-transition: box-shadow 400ms ease; transition: box-shadow 400ms ease; font-size: 18px; /* line-height: 22px; */ background-color: #fff; width: 100%; } .banner-grid { display: -ms-grid; display: grid; grid-auto-columns: 1fr; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto auto; grid-template-rows: auto auto; grid-row-gap: 16px; grid-column-gap: 16px; } #email-form{ display: flex; } .w-60{ width: 60%; } .banner-sub-form-text{ margin-top: 20px; color: #fff; } .services-24.section-title p{ font-size: 14px; line-height: 1.9; } .our-services-inner{ padding: 100px 0; } *{ margin: 0; padding: 0; box-sizing: border-box; } .showimg{ height: 400px; } #show-img { width: 400px; height: 400px; } .small-img{ width: 100%; height: 70px; margin-top: 10px; position: relative; } .small-img .icon-left, .small-img .icon-right{ width: 12px; height: 24px; cursor: pointer; position: absolute; top: 0; bottom: 0; margin: auto 0; } .small-img .icon-left{ transform: rotate(180deg) } .small-img .icon-right{ right: 0; } .small-img .icon-left:hover, .small-img .icon-right:hover{ opacity: .5; } .small-container{ width: 90%; height: 70px; overflow: hidden; position: absolute; left: 0; right: 0; margin: 0 auto; } .small-container div{ width: 800%; position: relative; } .small-container .show-small-img{ width: auto; height: 70px; margin-right: 6px; cursor: pointer; float: left; } .small-container .show-small-img:last-of-type{ margin-right: 0; } .product-details01{ padding: 50px 0; } .video-subtitle{ background-color: #0c0b0b85; color: white; padding: 50px; } .bg-darks{ background-color: #0f0f0f; } .product-perticular01 .specificationx-bx{ background-color: transparent; } .product-perticular01 .specification-text .table{ background-color: #0f0f0f; } .product-perticular01 .specification-text .table tr td,.product-perticular01 .specification-text .table tr th,.product-perticular01 .specification-text .table tr { font-size: 14px; text-transform: capitalize; color: white; padding: 6px 10px; border-color: #e4202d; } .prod-detail02.product-performance::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #e4202df2; transition: .5s ease; z-index: -1; } .product-details01 .productCard .info .name { color: #ffffff; font-size: 14px; text-transform: uppercase; margin-bottom: 0; background-color: #e4202d; padding: 5px; display: inline-block; letter-spacing: 1.8px; } .product-details01 .productCard .info .slogan { font-size: 60px; font-weight: 600; } .product-details01 .section-title p { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .product-details01 .productCard ul{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; padding-left: 0; } .product-details01 .productCard ul li{ border: 1px solid #e4e4e4; padding: 5px 10px; font-size: 14px; margin-bottom: 10px; list-style: none; position: relative; padding-left: 25px; color: #000000; font-weight: 600; } .product-details01 .productCard ul li::before{ content: ''; display: inline-block; height: 25px; width: 31px; background-size: cover; background-image: url(/assets/images/arrow-red.svg); background-repeat: no-repeat; /* margin-right: -21px; */ background-position: center center; vertical-align: middle; position: absolute; left: -12px; top: 1px; } .product-details01 p{ font-size: 14px; } .product-details01 .productCard h4{ color: #e4202d; font-size:16px ; } .product-perticular01 img{ width: 100%; height: 100%; } table.searchPoints td{ padding: 5px 20px; font-size:14px; } table.searchPoints th{ background-color: #e4202d; color: #fff; font-weight: 400; padding: 5px 20px; } .bg-sub-red{ color: #ffffff; font-size: 14px; text-transform: uppercase; margin-bottom: 0; background-color: #e4202d; padding: 5px; display: inline-block; letter-spacing: 1.8px; } .slogan-heading{ font-size: 60px !important; font-weight: 600; } .product-02 .section-title p { font-size: 20px; line-height: 1.4; } .product-perticular01.product-02 ul li::marker { color: red; } .product-perticular01.product-02 ul{ padding-left: 18px; } /* navbar */ /* navbar */ .new-customNavbar { position: fixed; display: block; left: 0; width: 100%; height: auto; padding: 1rem 0; margin: 0 auto; z-index: 999; border: none; outline: none; background-image: linear-gradient(to bottom, #000000ba, #0000008c, #00000059, #00000024, #a8eb1200); transition: 0.4s; } .new-customNavbar .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* .new-customNavbar.sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 999; } */ /* .new-customNavbar.navbar .logo { text-decoration: none; color: #122f48; font-weight: 700; text-transform: uppercase; font-size: 20px; } */ /* nav menu button */ .new-customNavbar .menu-btn { position: relative; display: none; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index: 2; } .new-customNavbar .menu-btn__lines::before, .new-customNavbar .menu-btn__lines::after { content: ""; position: absolute; } .new-customNavbar .menu-btn__lines, .new-customNavbar .menu-btn__lines::before, .new-customNavbar .menu-btn__lines::after { width: 1.5rem; height: 0.1rem; background: #fff; transition: all 0.4s ease-in-out; } .new-customNavbar .menu-btn__lines::before { transform: translateY(-0.5rem); } .new-customNavbar .menu-btn__lines::after { transform: translateY(0.5rem); } .new-customNavbar .menu-items { display: flex; align-items: center; } .new-customNavbar ul li { list-style: none; transition: 0.3s ease; } .new-customNavbar ul li .arrow { transition: all 0.3s ease-out; } .new-customNavbar ul li a { text-decoration: none; color: #ffffff; text-transform: uppercase; } /* dropdown menu */ .new-customNavbar .dropdown { position: relative; } .new-customNavbar .expand-btn:after { /* content: " \25BE"; */ opacity: 0.4; margin-left: 5px; } .new-customNavbar .dropdown-menu, .menu-right { position: absolute; background: #fff; width: 280px; line-height: 30px; border-radius: 0 0 5px 5px; top: 65px; border-top: 1px solid white; left: 0; opacity: 0; visibility: hidden; transition: all 0.4s ease; -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%); box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%); } .new-customNavbar .menu-right { top: 0; left: 100%; } .new-customNavbar .dropdown-menu,.new-customNavbar .menu-left { left: unset; right: 0; } .navbar .menu-left { left: -100%; } .new-customNavbar .menu-item { display: flex; justify-content: space-between; width: 100%; /* padding: 0.5rem 1.5rem; */ font-size: 14px; } .new-customNavbar .menu-item:hover { color:#e4202d; } .menu-item.first-item { padding: 1rem 1rem; } .new-customNavbar .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; display: block; margin-top: -20px; border: 1px solid #e52b38; margin-right: -70px; } .new-customNavbar .dropdown-right:hover .menu-right { left: 100%; opacity: 1; visibility: visible; } .new-customNavbar .dropdown-right:hover .menu-left { left: -100%; } .new-customNavbar img, .new-customNavbar video { display: block; max-width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; width: 125px; } /* mega menu */ .new-customNavbar .mega-menu { position: absolute; left: 0; width: 100vw; top: 70px; opacity:0; visibility: hidden; transform: translate3d(0px, 0px, 0px); overflow: scroll; /* height: 100%; */ height: 100vh; } .new-customNavbar .mega-menu .content { background: #e9ecef; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; justify-content: space-between; -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%); box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%); } .new-customNavbar .blog .content { grid-template-columns: repeat(3, 1fr); } .new-customNavbar .content .col { display: flex; flex-direction: column; justify-content: space-between; line-height: 3rem; position: relative; } .new-customNavbar .content .col .img-wrapper { display: block; position: relative; width: 100%; overflow: hidden; height: 500px; } /* .new-customNavbar .content .col .img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } */ .new-customNavbar .content .col img { width: 100%; transition: transform 0.3s ease-in-out; } .new-customNavbar .content .col .img-wrapper:hover img { transform: scale(1.1); } .new-customNavbar .content .col .menu-title { line-height: 3rem; position: absolute; /* bottom: 100px; */ left: 70px; top: 200px; z-index: 1; } .new-customNavbar .content .col .menu-title h2 { font-size: 60px; font-weight: bold; font-size: 50px; color: #fff; } .new-customNavbar .content .col .menu-title ul li{ font-size: 15px; color:#fff; } .new-customNavbar .content .col p { line-height: 1.2rem; margin-top: 5px; color: #112f48; } .new-customNavbar .content .col .mega-links { border-left: 1px solid #3c3c3c; } .new-customNavbar .content .col .read-more { font-size: 16px; display: flex; padding-top: 1rem; color: #03a9f4; transition: color 0.3s ease; justify-content: flex-end; padding-right: 10px; } .new-customNavbar .col .mega-links li, .new-customNavbar .col .mega-links li a { padding: 0 1rem; } .new-customNavbar .menu-items li:hover .mega-menu { opacity: 1; visibility: visible; } .new-customNavbar .content .col .read-more:hover { color: #ff5722; } /* container */ /* .container { margin: 100px auto auto; padding: 0 15px; max-width: 1200px; text-align: center; } */ /* .container p { color: #ffffff; } */ /* h1 { font-weight: 700; line-height: 10vw; color: #ffffff; text-transform: uppercase; } */ /* animation menu hamburger */ .new-customNavbar .menu-btn.open .menu-btn__lines { transform: translateX(1rem); background: transparent; } .new-customNavbar .menu-btn.open .menu-btn__lines::before { transform: rotate(45deg) translate(-0.5rem, 0.5rem); background: #fff; } .new-customNavbar .menu-btn.open .menu-btn__lines::after { transform: rotate(-45deg) translate(-0.5rem, -0.5rem); background: #fff; } /* Responsive style */ @media screen and (max-width: 1024px) { .new-customNavbar { padding: 10px 20px; } .new-customNavbar .overflow { overflow: hidden; } .new-customNavbar .overlay { /* position: relative; */ left: 0; right: 0; top: 0; bottom: 0; z-index: 500; /* background-color: rgba(0, 0, 0, 0.6); */ /* opacity: 0; */ } .new-customNavbar .overlay--active { opacity: 1; visibility: visible; } .new-customNavbar .menu-btn { display: flex; margin-left:auto; } .new-customNavbar .menu-items { position: fixed; height: 100%; max-height: initial; overflow-y: auto; /* width: 100%; */ top: 0; left: 0; background: #000000fa; display: block; transform: translateX(-100vh); transition: 0.3s ease-out; padding-bottom: 100px; padding-top: 100px; } .new-customNavbar .menu-items.open { transform: translateY(0); width: 100%; } .new-customNavbar .menu-items li:first-child { margin-top: 20px; } .new-customNavbar .menu-items li a { padding: 10px 1rem; display: block; font-size: 20px; } .new-customNavbar .menu-items .dropdown-right .right-arrow { transform: rotate(90deg); } .new-customNavbar .menu-item.first-item { padding: 1rem 1rem; } .new-customNavbar .content .col .menu-title { line-height: 3rem; left: 70px; top: 200px; z-index: 1024; } /* DROPDOWN, MEGA MENUS */ .new-customNavbar .menu-items .dropdown-menu, .new-customNavbar .menu-items .menu-right, .new-customNavbar .menu-items .mega-menu { position: static; opacity: 1; top: 4rem; visibility: visible; margin-left: -18px; width: auto; max-height: 0; transform: scaleX(0); transform-origin: left; overflow: hidden; transition: all 0.5s ease; } .new-customNavbar .menu-items .dropdown-menu, .new-customNavbar .menu-items .menu-right { padding-left: 1rem; width: 102%; margin-left: -10px; } .new-customNavbar .menu-items .mega-menu .col { padding-left: 1rem; } .new-customNavbar .expand-btn.open + .sample { max-height: 100%; transform: scaleZ(1); } .new-customNavbar .expand-btn.open + .blog.sample { max-height: 100%; transform: scaleZ(1); /* max-width: fit-content; */ height: 100%; } .menu-items.ms-auto.my-auto.open{ padding-left: 1rem; padding-right: 1rem; } .new-customNavbar .sample { border-top: none; } .new-customNavbar .sample li { margin: 0; } .new-customNavbar .sample li:last-child { border-bottom: none; } .new-customNavbar .sample li a { font-size: 1rem; } .new-customNavbar .mega-menu .content { grid-template-columns: auto; padding: 0rem 0rem 0 0rem; display: unset; background-color: transparent; } .new-customNavbar .mega-menu .content .col { width: 100%; padding-top: 1rem; margin-bottom: 0.5rem; } .new-customNavbar .col .mega-links li, .new-customNavbar .col .mega-links li a { padding: 0 0.5rem; } .new-customNavbar .content .col .mega-links { border-left: 0; padding-left: 0.5rem; } .new-customNavbar .col .mega-links li { margin: 0; } } .new-customNavbar .blog .content .col .img-wrapper::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0000000f, #00000066, #000000a8, #000000b5, #000000); transition: all 0.3s; z-index:1; } .new-customNavbar .mega-menu.blog ul li::before{ content: ''; display: inline-block; height: 17px; width: 32px; background-size: cover; background-image: url(/assets/images/arrow-red.svg); background-repeat: no-repeat; /* margin-right: -21px; */ background-position: center center; vertical-align: middle; position: absolute; left: -41px; top: 15px; } .new-customNavbar .mega-menu.blog ul li{ position: relative; } .new-customNavbar .mega-menu.blog p{ font-size: 14px; color: #fff; width: 70%; } .photos-grid-container { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; grid-gap: 0; align-items: start; @media (max-width: 580px) { grid-template-columns: 1fr; } .img-box { border: 10px solid #ffffff; position: relative; } .img-box:hover .transparent-box { background-color: rgba(0, 0, 0, 0.6); } .img-box:hover .caption { transform: translateY(-5px); } /* img { max-width: 100%; display: block; height: auto; } */ .caption { color: white; transition: transform 0.3s ease, opacity 0.3s ease; font-size: 1.5rem; } .transparent-box { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; transition: background-color 0.3s ease; display: flex; justify-content: center; align-items: center; } .main-photo { grid-row: 1; grid-column: 1; } .sub { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 0em; &:nth-child(0) { grid-column: 1; grid-row: 1; } &:nth-child(1) { grid-column: 2; grid-row: 1; } &:nth-child(2) { grid-column: 1; grid-row: 2; } &:nth-child(3) { grid-column: 2; grid-row: 2; } } .new-customNavbar .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; display: block; margin-top: 0px!important; } } .hide-element { border: 0; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .product-perticular01.product-02 img{ object-fit: cover; } #gallery .img-box img { width: 100%; height: 100%; max-height: 500px; background-color: #0f0f0f; } /* new gallary */ .gallaryEffect{ height: 100vh; } #container-custom { position: relative; display: flex; align-items: center; height: 100%; width: 100%; background-color: #1f1f1f; } .slide { position: relative; flex: 1; height: 100%; overflow: hidden; cursor: pointer; transition: all 1s; border: 1px solid #5e5d5d; } .slide.last-viewed .btn-close:after { transition-delay: 0s; } .slide.last-viewed .btn-close:before { transition-delay: 0.1s; } .slide.last-viewed .content .city-info { transition-delay: 0s; } .slide.last-viewed .content .city-info li:nth-of-type(1) { transition-delay: 0.2s; } .slide.last-viewed .content .city-info li:nth-of-type(2) { transition-delay: 0.4s; } .slide.last-viewed .content .city-info li:nth-of-type(3) { transition-delay: 0.6s; } .slide.last-viewed .content .emblem { transition: all 0.5s; transition-delay: 0s; } .slide.last-viewed .content .emblem p{ transition: all 0.5s; transition-delay: 0s; } .slide.last-viewed .image, .slide.active .image { top: 0; left: 0; height: 100%; width: 100%; } .slide.active { cursor: default; } .slide.active .overlay { width: 30%; background-size: 100% 100%; transition: all 1.25s; transition-delay: 1.75s; } .slide.active .content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .slide.active .content .title { width: 25%; opacity: 1; transform: translateY(30px); transition: all 1s; transition-delay: 1.25s; } .slide.active .content .title:after { height: 100%; color: white; overflow: initial; } .slide.active .content .title:before { transform: scaleX(1); transition-delay: 2s; } .slide.active .content .city-info { opacity: 1; } .slide.active .content .city-info li { opacity: 1; transform: translateX(0); } .slide.active .content .emblem { opacity: 0.8; transform: translateY(100px); color: white; left: 50px; line-height: 1.6; } .slide.active .btn-close { cursor: pointer; pointer-events: auto; opacity: 1; padding: 15px; background-color: #e4202d; transition-delay: 2.2s; } .slide.active .btn-close:before, .slide.active .btn-close:after { opacity: 1; } .slide.active .btn-close:after { transform: rotate(45deg) translateX(0px); } .slide.active .btn-close:before { transform: rotate(-45deg) translateX(0px); } .slide.anim-in { transition-delay: 0.5s; } .slide.anim-in .image { top: -20%; left: -140%; height: 140%; width: 140%; -webkit-animation: img-anim-in 1.2s forwards; animation: img-anim-in 1.2s forwards; } .slide.anim-out { flex: 0; cursor: default; transition-delay: 0.5s; } .slide.anim-out .image { top: 0; left: 0; height: 100%; width: 100%; -webkit-animation: img-anim-out 1.2s forwards; animation: img-anim-out 1.2s forwards; } .slide:nth-of-type(1).anim-in .image { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .slide:nth-of-type(1).anim-out .image { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .slide:nth-of-type(2).anim-in .image { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .slide:nth-of-type(2).anim-out .image { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .slide:nth-of-type(3).anim-in .image { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .slide:nth-of-type(3).anim-out .image { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .slide:nth-of-type(4).anim-in .image { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .slide:nth-of-type(4).anim-out .image { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .slide .image { position: absolute; background-size: cover; background-position: center center; pointer-events: none; transition: all 1s; } .slide .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: linear-gradient(rgb(0 0 0 / 43%), rgb(0 0 0)); background-position: 0 0; background-size: 100% 200%; opacity: 1; pointer-events: none; transition: all 0.5s; } .slide .content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; } .slide .content .title { position: absolute; top: 50px; height: 65px; width: 100%; box-sizing: border-box; font-size: 3em; text-align: center; color: #3f3f3f; opacity: 0; pointer-events: none; transition: all 0.5s; } .slide .content .title:after { position: absolute; top: 0; height: 0; width: 100%; display: block; content: attr(data-title); overflow: hidden; color: #fff; transition: all 0.85s; } .slide .content .title:before { position: absolute; bottom: -2px; display: block; content: ""; height: 2px; left: 0; width: 85%; background: white; box-shadow: 0 2px 6px #2f2f2f; transform-origin: left center; transform: scaleX(0); transition: transform 1.25s; } .slide .content .emblem { position: absolute; height: 200px; width: 25%; opacity: 0; transform: translateY(120px); transition: all 1s; transition-delay: 1.75s; background-position: center center; background-repeat: no-repeat; background-size: auto 100%; top: 10%; } .slide .content .city-info { position: absolute; bottom: 30px; right: 30px; padding: 30px 30px 30px 120px; font-size: 1.25em; color: white; text-shadow: 0 1px 4px #0f0f0f; background-image: linear-gradient(90deg, rgba(20, 20, 20, 0), rgba(20, 20, 20, 0.7)); opacity: 0; transition: all 1s; transition-delay: 2s; } .slide .content .city-info li { position: relative; margin-bottom: 5px; text-align: justify; opacity: 0; transform: translateX(-30px); transition: all 0.75s; } .slide .content .city-info li:nth-of-type(1) { transition-delay: 2.7s; } .slide .content .city-info li:nth-of-type(2) { transition-delay: 2.9s; } .slide .content .city-info li:nth-of-type(3) { transition-delay: 3.1s; } .slide .btn-close { position: absolute; z-index: 100; top: 20px; right: 50px; height: 24px; width: 24px; pointer-events: none; opacity: 0; top: 62px; background: none; } .slide .btn-close:before, .slide .btn-close:after { position: absolute; top: 12px; display: block; content: ""; width: 100%; height: 5px; background-color: white; opacity: 0; cursor: pointer; transition: all 0.5s; left: 0; top: 25px; bottom: 19px; } .slide .btn-close:after { transform: rotate(45deg) translateX(-12px); transition-delay: 3s; } .slide .btn-close:before { transform: rotate(-45deg) translateX(12px); transition-delay: 3.2s; } .slide:hover:not(.active):not(.anim-out) .image { transform: scale(1.1); } .slide:hover:not(.active):not(.anim-out) .overlay { opacity: 0.6; } .slide:hover:not(.active):not(.anim-out) .content .title { opacity: 1; transform: translateY(30px); } .slide:hover:not(.active):not(.anim-out) .content .title:after { height: 100%; } #codepen-link { position: absolute; right: 15px; bottom: 15px; height: 40px; width: 40px; z-index: 10; border-radius: 50%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg"); background-position: center center; background-size: cover; opacity: 0.7; transition: all 0.25s; } #codepen-link:hover { opacity: 1; box-shadow: 0 2px 6px #0f0f0f; } @-webkit-keyframes img-anim-in { to { top: 0; left: 0; height: 100%; width: 100%; } } @keyframes img-anim-in { to { top: 0; left: 0; height: 100%; width: 100%; } } @-webkit-keyframes img-anim-out { to { left: -100%; } } @keyframes img-anim-out { to { left: -100%; } } .news-details-sec { background-color: #f7f7fb; } .trand-bg{ /* padding: 48px 48px 56px; */ border-radius: 16px; background-color: #fff; box-shadow: 4px 4px 12px 0 rgba(21, 60, 245, 0.05), 0 2px 6px 0 rgba(5, 21, 46, 0.02); } .news-post-container { padding: 48px 48px 56px; border-radius: 24px; background-color: #fff; box-shadow: 4px 4px 12px 0 rgba(21, 60, 245, 0.05), 0 2px 6px 0 rgba(5, 21, 46, 0.02); } .trand-bg a { font-weight: 500; /* line-height: 1.2; */ color: #343a40; text-decoration: none; } .trand-bg a:hover { color:#e4202d; text-decoration: underline; } .news-details-sec{ text-align: justify; } /* gallary 3 */ .gridywrap div[class*=gridy] { background: #eee; box-shadow: inset 0 0 0 1px #ddd; padding: 15px; float: left; position: relative; } .gridywrap .gridy-1, .gridywrap .gridy-2, .gridywrap .gridy-3 {width: 320px; overflow: hidden;} .gridywrap .gridy-1 {width: 100%;} .gridywrap .gridy-2 {width: 100%;} .gridywrap .gridy-3 {width: 100%;} .gridywrap .gridyhe-1 {height: 320px;} .gridywrap .gridyhe-2 {height: 320px;} @media screen and (min-width: 640px) { .gridywrap .gridyhe-2 {height: 320px;} .gridywrap { width: 100%; } .gridywrap .gridy-1 {width: 50%;} .gridywrap .gridy-2 {width: 50%;} .gridywrap .gridy-3 {width: 100%;} } @media screen and (min-width: 1024px) { .gridywrap .gridy-1 {width: 33.3%;} .gridywrap .gridy-2 {width: 66.6%;} .gridywrap .gridy-3 {width: 100%;} .gridywrap .gridyhe-2 {height: 640px;} } /*styling*/ .gridywrap .gridimg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background-position: center center; background-size: cover; } .gridywrap .gridimg img { width: 100%; } .gridywrap .gridinfo { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.4); text-align: center; transition: all 0.8s; } .gridywrap .gridinfo h3 { font-size: 24px; color: #fff; font-weight: bold; text-transform: uppercase; margin: 130px 0 20px; position: relative; } .gridywrap .gridinfo h3:after { content: ''; width: 25px; border-top: 4px solid #fff; display: block; margin: 0 auto; margin-top: 25px; } .gridywrap .gridinfo .gridmeta { transition-delay: 0.25s; } .gridywrap .gridinfo .gridmeta p { display: inline-block; font-size: 13px; color: #fff; margin-bottom: 15px; } .gridywrap .gridinfo .gridmeta p i { margin-right: 5px; } .gridywrap .gridinfo .gridmeta p.gridwho { margin-left: 25px; } .gridywrap .gridinfo p.gridexerpt { width: 60%; margin: 0 auto; line-height: 22px; margin-bottom: 25px; color: #fff; transition-delay: 0.5s; } .gridywrap .gridinfo * { opacity: 0; transition: all 0.8s; } .gridywrap .gridinfo h3 { opacity: 1; } .gridywrap .gridinfo .grid-btn { color: #fff; text-decoration: none; margin: 0 auto; width: 35px; height: 35px; line-height: 35px; border-radius: 25px; border: 1px solid #fff; display: block; overflow: hidden; } .gridywrap .gridinfo .grid-btn:hover { width: 75px; background: rgba(0,0,0,0.3); } .gridywrap .gridinfo .grid-btn span { opacity: 0; display: none; transition: opacity 0.8s; } .gridywrap .gridinfo .grid-btn:hover span { opacity: 1; display: inline; } .gridywrap .gridinfo .grid-btn:hover i { opacity: 0; display: none; } .gridywrap .gridinfo:hover * { opacity: 0.7; } .gridywrap .gridinfo:hover p { opacity: 1; } .gridywrap .gridinfo:hover { background: rgb(228 32 45 / 84%); } .gridywrap .gridinfo:hover h3 { margin-top: 70px; opacity: 1; } .gallary-3 { /* padding: 100px 0; */ background-color: #1c1c1c; padding-top: 50px; } /* services tabs */ #tabBgs{ background-repeat: no-repeat !important; background-size: cover !important; } .mt-30{margin-top: 30px;} .servicesTabs .tabs--list { display: block; margin: auto; position: relative; background-color: #e9e9e9; border-radius: 8px; margin-left: 0; padding-left: 0; } .servicesTabs .tabs--list li { display: inline-block; vertical-align: middle; width: 25%; position: relative; z-index: 2; } .servicesTabs .tabs--list li a { display: block; padding: 15px 27px 12px; font-size: 16px; line-height: 26px; color: #636363; transition: color ease 0.7s, box-shadow 0.5s; text-align: center; text-decoration: none; } .servicesTabs .tabs--list li a.actived { color: #ffffff; } .servicesTabs .tabs--list li a.actived:hover { box-shadow: none; } .servicesTabs .tabs--list li a:hover { box-shadow: 0 24px 18px -15px rgba(0, 0, 0, 0.09); } .servicesTabs .tabs--list li.moving-tab { display: block; position: absolute; bottom: 0; left: 0; height: 110%; top: -5%; background-color: #e4202d; box-shadow: 0 24px 18px -15px rgba(117, 60, 148, 0.45); transition: left 0.7s, box-shadow 0.5s; z-index: 1; border-radius: 8px; } .servicesTabs .tabs--list li.moving-tab:hover { box-shadow: 0 24px 18px -15px rgba(117, 60, 148, 0.65); } .servicesTabs .tabs--list li.moving-tab--interaction { animation: movingTab 0.4s forwards; transition: left 0.4s cubic-bezier(0.29, 1.42, 0.79, 1); } .servicesTabs .tabs--content { /* text-align: left; */ padding: 0px; } .servicesTabs .tabs--content > li { display: none; } .servicesTabs .tabs--content li.actived { display: block; } .tabs--content img{ width: 100%; max-height: 400px; object-fit: cover; } .services { width: 100%; /* height: 100vh; */ display: flex; align-items: center; justify-content: space-between; } .services > * { flex-grow: 1; } .circle--rotate { border-radius: 50%; border: 4px #e4202d solid; width: 43%; height: 43%; margin: 0 auto 0; position: relative; transform: rotate(0deg); z-index: 0; padding: 0; } .circle--rotate > li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; border-radius: 50%; z-index: 10; visibility: hidden; } .circle--rotate > li .icon { visibility: visible; cursor: pointer; text-align: center; overflow: hidden; font-size: 20px; color: #ffffff; border-radius: 50%; background-color: #000000; height: 10%; width: 10%; margin: -5% auto; transition: all 500ms ease; box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.2); } .circle--rotate > li i { color: #ffffff; font-size: 24px; margin: auto; cursor: pointer; width: 100%; height: 100%; display: table; } .circle--rotate > li i::before { display: table-cell; vertical-align: middle; } .circle--rotate > li img { margin: auto; } .circle--slider { position: relative; } .circle--slider .rotate--circle { margin: 0 auto; } .circle--slider .circle--rotate > li div { position: relative; overflow: visible; background-color:#000000; } .circle--slider .circle--rotate > li div span { transform: rotate(0deg); transition: all 2s; opacity: 0; } .circle--slider .circle--rotate > li.active div { font-size: 26px; background-color: #e4202d; transition: all 1s; } .circle--slider .circle--rotate > li.active div span { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transform: rotate(-45deg); z-index: -1; opacity: 1; } .circle--slider .circle--rotate > li.active div span:before { position: absolute; height: 1px; top: -50%; right: 140%; bottom: 0; margin: auto; content: ""; width: 30%; height: 30%; filter: blur(3px); opacity: 0.7; border: 6px solid #F48E2A; z-index: -1; } .circle--slider .circle--rotate > li.active div span:after { position: absolute; height: 1px; top: 100%; left: 130%; bottom: 0; margin: auto; content: ""; width: 40%; height: 40%; border-radius: 50%; opacity: 0.7; border: 8px solid #FE9290; z-index: 5; } .circle--slider .count2 li:nth-child(2) { transform: rotate(180deg); } .circle--slider .count3 li:nth-child(2) { transform: rotate(120deg); } .circle--slider .count3 li:nth-child(3) { transform: rotate(240deg); } .circle--slider .count4 li:nth-child(2) { transform: rotate(90deg); } .circle--slider .count4 li:nth-child(3) { transform: rotate(180deg); } .circle--slider .count4 li:nth-child(4) { transform: rotate(270deg); } .circle--slider .count5 li:nth-child(2) { transform: rotate(72deg); } .circle--slider .count5 li:nth-child(3) { transform: rotate(144deg); } .circle--slider .count5 li:nth-child(4) { transform: rotate(216deg); } .circle--slider .count5 li:nth-child(5) { transform: rotate(-72deg); } .circle--slider .count6 li:nth-child(2) { transform: rotate(60deg); } .circle--slider .count6 li:nth-child(3) { transform: rotate(120deg); } .circle--slider .count6 li:nth-child(4) { transform: rotate(180deg); } .circle--slider .count6 li:nth-child(5) { transform: rotate(240deg); } .circle--slider .count6 li:nth-child(6) { transform: rotate(-60deg); } .circle--slider .count7 li:nth-child(2) { transform: rotate(51.5deg); } .circle--slider .count7 li:nth-child(3) { transform: rotate(103deg); } .circle--slider .count7 li:nth-child(4) { transform: rotate(154.5deg); } .circle--slider .count7 li:nth-child(5) { transform: rotate(206deg); } .circle--slider .count7 li:nth-child(6) { transform: rotate(-103deg); } .circle--slider .count7 li:nth-child(7) { transform: rotate(-51.5deg); } .circle--slider .count8 li:nth-child(2) { transform: rotate(45deg); } .circle--slider .count8 li:nth-child(3) { transform: rotate(90deg); } .circle--slider .count8 li:nth-child(4) { transform: rotate(135deg); } .circle--slider .count8 li:nth-child(5) { transform: rotate(180deg); } .circle--slider .count8 li:nth-child(6) { transform: rotate(-135deg); } .circle--slider .count8 li:nth-child(7) { transform: rotate(-90deg); } .circle--slider .count8 li:nth-child(8) { transform: rotate(-45deg); } .circle--slider .count9 li:nth-child(2) { transform: rotate(40deg); } .circle--slider .count9 li:nth-child(3) { transform: rotate(80deg); } .circle--slider .count9 li:nth-child(4) { transform: rotate(120deg); } .circle--slider .count9 li:nth-child(5) { transform: rotate(160deg); } .circle--slider .count9 li:nth-child(6) { transform: rotate(-160deg); } .circle--slider .count9 li:nth-child(7) { transform: rotate(-120deg); } .circle--slider .count9 li:nth-child(8) { transform: rotate(-80deg); } .circle--slider .count9 li:nth-child(9) { transform: rotate(-40deg); } .circle--slider .count10 li:nth-child(2) { transform: rotate(36deg); } .circle--slider .count10 li:nth-child(3) { transform: rotate(72deg); } .circle--slider .count10 li:nth-child(4) { transform: rotate(108deg); } .circle--slider .count10 li:nth-child(5) { transform: rotate(144deg); } .circle--slider .count10 li:nth-child(6) { transform: rotate(-180deg); } .circle--slider .count10 li:nth-child(7) { transform: rotate(-144deg); } .circle--slider .count10 li:nth-child(8) { transform: rotate(-108deg); } .circle--slider .count10 li:nth-child(9) { transform: rotate(-72deg); } .circle--slider .count10 li:nth-child(10) { transform: rotate(-36deg); } .circle--slider .animate-wrapper { width: 25%; height: 25%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; } .circle--slider .animate-title { color: #fff; } .circle--slider .animate-img { width: 25%; height: 25%; border-radius: 50%; overflow: hidden; } .circle--slider .animate-img .animate-img__in { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 50%; background-repeat: no-repeat; z-index: 3; transform: rotate3d(0, 0, 0, 0deg) scale(0.85); transition: 0.55s ease-in-out; width: 100%; height: 100%; opacity: 0; background-size: cover; box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.3); } .circle--slider .animate-more { opacity: 0; visibility: hidden; transition: all 0.5s 0.4s; /* min-width: 131px; */ overflow: hidden; text-align: center; z-index: 30; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 15px; /* height: 62px; */ transform: scale(0.8); font-size: 14px; display: flex; justify-content: center; align-items: center; } .circle--slider .animate.active .animate-more { opacity: 1; visibility: visible; transform: scale(0.8); } .circle--slider .animate.active .animate-img .animate-img__in { opacity: 1; transform: scale(1.4); } .circle--slider .prev, .circle--slider .next { position: absolute; top: 0; bottom: 0; margin: auto; display: block; height: 62px; width: 87px; text-align: center; cursor: pointer; } .circle--slider .prev span, .circle--slider .next span { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; text-orientation: upright; font-weight: 700; } .circle--slider .prev { left: 100px; } .circle--slider .next { right: 100px; } .services-inner-section{ background-color:#fff; } .animate-wrapper .animate-img__in::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #0000008f; transition: .5s ease; z-index: -1; border-radius: 50%; } .business-focus{ background-color: #f9f9f9; } /* .business-focus{ padding: 100px 0; } */ .business-focus-bx{ /* background-color: #fff; display: flex; position: relative; padding: 35px; border-radius: 10px; box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15); min-height: 400px; */ } .business-focus-bx img{ position: absolute; right: 0; bottom: -28px; width: 70%; } .business-focus-bx ul li{ font-size: 14px; line-height: 2; } .business-focus h3{ font-size: 30px; margin-bottom: 10px; font-weight: 700; color: #000; text-transform: capitalize; position: relative; margin-top: 20px; } .business-focus-bx h2{ font-size: 25px; margin-bottom: 20px; font-weight: 600; color: #000; text-transform: capitalize; } /* .business-focus-bx h2::after{ height: 4px; display: block; width: 250px; background: #e4202d; border-right: 1px white; content: ''; margin-top: 10px; left: 0; position: absolute; margin-bottom: 10px; } */ .business-focus-bx ul{ padding-left: 18px; } .business-focus img{ width: 100%; max-height: 300px; object-fit: cover; } /* .business-focus-bx::after{ height: 40px; display: block; width: 250px; background: #e4202d; border-right: 1px white; content: ''; margin-top: 10px; left: 0; position: absolute; margin-bottom: 10px; } */ .business-focus-bx ul.double{ columns: 2; -webkit-columns: 2; -moz-columns: 2; } .business-focus-bx ul li{ list-style: none; position: relative; } .business-focus-bx ul li::before { content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #e4202d; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ } .floating-prod-details{ background-image: url(../../assets/images/products/floating-01.jpg); background-position: bottom; background-size: cover; background-repeat: no-repeat; } .gallery-container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; } .gallery-item { flex-basis: 32.7%; margin-bottom: 6px; cursor: pointer; min-height: 480px; position: relative; } .gallery-item .gallery-txt{ position: absolute; padding: 5px; top: 0; } .gallery-item:hover { opacity: 1; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; position: absolute; } .gallery-content { font-size: .8em; } .lightbox { position: fixed; display: none; background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; overflow: auto; top: 0; left: 0; } .lightbox-content { position: relative; width: 70%; height: 70%; margin: 5% auto; } .lightbox-content img { border-radius: 7px; box-shadow: 0 0 3px 0 rgba(225, 225, 225, .25); width: 100%; height: 100%; object-fit: cover; } .lightbox-prev, .lightbox-next { position: absolute; background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 7px; top: 45%; cursor: pointer; } .lightbox-prev { left: 0; } .lightbox-next { right: 0; } .lightbox-prev:hover, .lightbox-next:hover { opacity: .8; } @media (max-width: 767px) { .about-us-section .row .col { flex: auto; display: block; width: 29%; } .gallery-container { width: 100%; } .gallery-item { flex-basis: 49.80%; margin-bottom: 3px; } .lightbox-content { width: 80%; height: 60%; margin: 15% auto; } } @media (max-width: 480px) { .gallery-item { flex-basis: 100%; margin-bottom: 1px; } .lightbox-content { width: 90%; margin: 20% auto; } } @media (min-width: 768px) { .gallery-item:first-child { width: 100%; } .gallery-item:nth-child(n+2) { flex: 1; margin-right: 1%; } .gallery-item:last-child { margin-right: 0; } } @media (min-width: 992px) { .gallery-item:nth-child(-n+2) { flex: none; margin: 0; width: 49.5%; } .gallery-item:first-child { margin-right: 1%; } .gallery-item:nth-child(n+3) { flex: 1; margin-right: 1%; } .gallery-item:last-child { margin-right: 0; } } .gallery-item{ margin-bottom: 20px !important; overflow: hidden; cursor: pointer; transition: transform .2s; } .gallery-item:hover img{ transform: scale(1.5); transition: all 0.55s; } .gallery-item .gallery-txt p{ font-size: 14px; } .gallery-item .gallery-txt p{ display: none; } .gallery-item:hover p{ display: block; transition: all 0.55s; } .gallery-item:hover:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0000000f, #0000001f, #00000030, #00000040, #0000006e); transition: all 0.3s; z-index: 1; } .photo-gallary .section-padding { padding: 100px 0; padding-bottom: 50px; } .speed-npx.product-detail-video .design-combat { width: 40%; left: 0; background-color: #e4202df0; height: 100%; position: absolute; bottom: 50px; padding: 50px; padding-top: 110px; } .speed-npx.product-detail-video .design-combat h2 { color: #fff; font-size: 55px; font-weight: 400; text-align: left; } .section-architech{ background-color: #f1f1f1; } .nicescroll-rails-vr { display: block!important; } .nicescroll-rails-hr{ display: block!important; } .section-architech p,.section-architech ul li{ color: #000; } .section-architech .specification-text{ padding: 100px 0; } .section-architech .specification-text p { font-size: 35px; } .section-architech .specification-text ul li{ line-height: 2; list-style: none; position: relative; font-size: 15px; } .section-architech .specification-text ul li::before { content: ""; width: 45px; height: 60px; background-image: url(../../assets/images/arrow-red.svg); top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; left: -37px; transform: scale(0.5); } .floating-prod-details ul li{ position: relative; list-style: none; line-height: 1.8; } .floating-prod-details ul li::before { content: ""; width: 45px; height: 60px; background-image: url(../../assets/images/arrow-red.svg); top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; left: -37px; transform: scale(0.5); } /* about us */ p.sub-heading{ font-size: 23px; font-weight: 600; line-height: 1.6; width: 90%; position: relative; } .sub-heading img { width: 50px; height: 40px; position: absolute; /* margin-bottom: 5px; */ left: -57px; top: -8px; } .about-team .team-row { /* margin-left: -40px; */ } .about-team .team-wrap { padding: 0 20px; margin-top: 30px; } .about-team .container-fluid { padding: 0 50px; } .about-team .team-img img { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; overflow: hidden; width: 100%; height: 400px; object-fit: cover; } .about-team .team-member, .about-team .team-img { position: relative; overflow: hidden; } .about-team .team-title { margin-top: 20px; font-weight: revert; font-weight: 700; font-size: 20px; margin-bottom: 0; } .about-team .overlay { background-color: rgba(20,20,20,.2); position: absolute; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .about-team .team-details { opacity: 0; position: absolute; top: 50%; left: 0; padding: 5%; overflow: hidden; width: 100%; z-index: 2; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .about-team .team-details p { color: #fff; } .about-team .team-img:hover .team-details { opacity: 1; margin-top: -80px; } .about-team .team-img:hover .overlay { opacity: 1; } .about-team .socials a { display: inline-block; width: 37px; height: 37px; background-color: transparent; } .about-team .socials i { line-height: 37px; color: #616161; font-size: 14px; width: 37px; height: 37px; border-radius: 50%; text-align: center; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .about-team .team-details .socials i { color: #fff; } .about-team .socials a:hover i { color: #fff; background-color: #355c7d; } .about-team .team-member span{ font-size: 14px; color: #727272; text-transform: uppercase; } .about-us-section h2{ text-align: center; font-size: 40px; width: 70%; margin: 0 auto; line-height: 1.5; font-weight: 700; } .aboutUsimg01{ border-radius: 20px; min-height: 200px; } .aboutUsimg04{ min-height: 450px; border-radius: 30px; border-radius: 20px; } .aboutUsimgsm{ border-radius: 20px; } .about-us-section h3{ margin-bottom: 20px; } .aboutMin-200{ min-height: 200px; } .about-Intro{ margin-top: 100px; } .mission-vision { background-color: #E71622; padding: 0; } .mission-vision .col-md-6 { padding: 0; min-height: 400px; } .our-visions{ padding: 120px 70px; height: 100%; width: 98%; min-height: 100%; max-height: 100%; } .our-visions h2 { letter-spacing: -2px; font-weight: 300; font-size: 65px; color: #fff; text-transform: uppercase; } .our-visions p { font-size: 18px; color: #fff; margin-top: 20px; line-height: 1.9; } .sadar-port{ min-height: 500px; } .bg-white{ background-color: #fff; } .port-section{ min-height: 500px; background-color: #e4202d; margin-top: auto; padding: 120px 80px; } .port-section h2{ letter-spacing: -2px; font-weight: 300; font-size: 65px; color: #fff; text-transform: uppercase; } .port-section p{ font-size: 16px; color: #fff; } .stat-number{ color: #fff; } .sadar-counter span{ font-size: 60px; margin-bottom: 0; line-height: 1; font-weight: 300; } .sadar-counter p{ color: #fff; font-size: 20px; letter-spacing: 5.5px; } .sadar-counter img{ width: 80px; margin-right: 20px; } .sadar-counter{ text-align: center; } .ils-compabalites-bx{ display: flex; position: relative; padding: 35px; border-radius: 10px; /* box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15); */ min-height: 100%; } .ils-compabalites-bx h2 { font-size: 18px; margin-bottom: 20px; font-weight: 600; color: #000; text-transform: capitalize; } .ils-compabalites-bx h2::after { height: 3px; display: block; width: 250px; background: #e4202d; border-right: 1px white; content: ''; margin-top: 10px; left: 0; position: absolute; margin-bottom: 10px; } .ils-compabalites-bx ul { padding-left: 18px; } .ils-compabalites-bx::before { background-image: linear-gradient( 135deg, #ffe8e8 10%, #ffffff 100%); border-radius: 15px; bottom: 70px; content: ''; left: -5px; position: absolute; right: 120px; top: 0px; } .ils-compabalites-bx .card__block.card__block--main{ background-color: #fff; border-radius: 15px; box-shadow: 2px 5px 25px rgba(0, 0, 0, .15); padding: 30px 20px; padding-top: 35px; position: relative; z-index: 2; margin-top: 40px; width: 100%; margin-left: 10px; } .ils-compabalites-bx ul li { list-style: none; position: relative; } .ils-compabalites-bx ul li { font-size: 14px; line-height: 2; } .ils-compabalites-bx ul li::before, .ils-facilities-bx ul li::before{ content: ""; width: 45px; height: 60px; background-image: url(../../assets/images/arrow-red.svg); top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; left: -37px; transform: scale(0.4); } .ils-compabalites-bx svg { background-color: hsl(35, 92%, 71%); fill: #000; } .card__element--user-img { background-color: #fff; border-radius: 50%; left: -30px; position: absolute; top: -55px; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; } .ils-compabalites-bx img, .ils-compabalites-bx svg { width: 80px; border-radius: 50%; height: 80px; } .ils-compabalites-bx ul li.iconnone::before{ display: none; } .ils-facilities-bx ul li::marker{ display: none; } .ils-facilities-bx ul li{ position: relative; list-style-type: none; margin-bottom: 5px; } #ils-facilities-points{ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; background-color: #fff; border-radius: 15px; overflow: hidden; } .ils-facilities-bx h2{ font-size: 34px; margin-bottom: 20px; font-weight: 500; color: #000000; } .ils-facilities-bx{ padding: 25px; } .ils-facilities-points-wl .owl-prev.disabled, .ils-facilities-points-wl .owl-next.disabled { background-color: #d8d8d8 !important; } .ils-facilities-points-wl .owl-prev { left: -80px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; } .ils-facilities-points-wl .owl-next { background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff !important; } .ils-facilities-points{ background-color: #f0f0f0; padding: 50px 0; position: relative; } @media (max-width: 1920px){ .ils-facilities-points::after { width: 135px; } } .ils-facilities-points::after { content: ""; width: 180px; height: 100%; background-image: url(../../assets/images/bg/why-bg.jpg); top: 0; right: 0; position: absolute; display: inline-block; background-repeat: no-repeat; background-size: cover; background-position: center center; } .ils-facilities-points-wl.owl-theme .owl-nav { margin-top: 0px; position: absolute; right: 100px; z-index: 1024; bottom: 58px; } .IntegratedLogs-bx{ background-color: #fff; min-height: 160px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 15px; margin-top: 30px; padding: 40px; position: relative; z-index: 1; display: flex; overflow: hidden; } .IntegratedLogs-bx h4 { min-height: 20px; font-size: 22px; font-weight: 600; padding-left: 35px; margin-top: auto; margin-bottom: auto; } .IntegratedLogs-bx h3 { font-size: 25px; font-weight: 700; position: absolute; right: 30px; color: #f9f9f9; top: 50px; } .IntegratedLogs-bx img { width: 80px; height: 80px; } .IntegratedLogs-bx::after{ content: ""; position: absolute; bottom: 0; right: 0; background: #e4202d; width: 10px; height: 100%; } .electrical-engg { background-position: bottom; background-size: contain; background-image: url(../../assets/images/bg/pattern1.png); background-position: center right; background-repeat: no-repeat; position: relative; } .electrical-engg ul li::before { content: ""; width: 45px; height: 60px; background-image: url(../../assets/images/arrow-red.svg); top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; left: -37px; transform: scale(0.5); } .electrical-engg ul li{ position: relative; list-style: none; line-height: 1.8; } .electrical-engg h3,.structural-engg h3{ font-size: 40px; font-weight: 400; text-transform: capitalize; } .electrical-engg::after { content: ""; width: 180px; height: 100%; background-image: url(../../assets/images/bg/why-bg.jpg); top: 0; left: 0; position: absolute; display: inline-block; background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: 1; } .structural-engg::after { content: ""; width: 180px; height: 100%; background-image: url(../../assets/images/bg/why-bg.jpg); top: 0; right: 0; position: absolute; display: inline-block; background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: 1; } .electrical-engg img,.structural-engg img{ position: relative; z-index: 11; } .structural-engg { /* background-image: url(../../assets/images/products/floating-01.jpg); */ background-position: bottom; background-size: cover; background-repeat: no-repeat; position: relative; } .structural-engg ul li::before,.design-engg-naval ul li::after { content: ""; width: 45px; height: 60px; background-image: url(../../assets/images/arrow-red.svg); top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; left: -37px; transform: scale(0.5); } .structural-engg ul li{ position: relative; list-style: none; line-height: 1.8; } .design-engineering .specificationx-bx{ background-color: transparent; } .design-engineering{ background-image: url(../images/design-engg/cruz-structure.jpg); min-height: 800px; background-repeat: no-repeat; background-position: center left; } .design-engg-box { background-color: #f7f7f7; padding: 0; } .design-engg-box .col-md-6 { padding: 0; min-height: 400px; } .design-engg-box .design-engg-naval{ padding: 120px 70px; height: 100%; width: 98%; min-height: 100%; max-height: 100%; background-color: #f4f4f4; } .design-engg-naval{ position: relative; } .design-engg-box .design-engg-naval h2 { letter-spacing: -2px; font-weight: 300; font-size: 55px; position: relative; text-transform: capitalize; } .design-engg-box .design-engg-naval p { font-size: 18px; margin-top: 20px; line-height: 1.9; } .design-engg-box .design-engg-naval ul li { font-size: 18px; list-style: none; margin-top: 20px; line-height: 1.4; position: relative; } .design-engg-naval h2::before{ content: ""; width: 45px; height: 60px; background-image: url(../../assets/images/arrow-red.svg); top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; right: 0; } /* .structural-engg-bx { background-color: #f5f5f5; } */ .structural-engg-bx .structure-bx { padding: 0 1em 1em 1em; text-align: center; } .structural-engg-bx .structural-engg-card { width: 100%; height: 100%; padding: 2em 1.5em; border-radius: 5px; box-shadow: 0 0 35px rgba(0, 0, 0, 0.12); cursor: pointer; transition: 0.5s; position: relative; z-index: 2; overflow: hidden; background: #fff; } .structural-engg-bx .structural-engg-card::after { content: ""; width: 100%; height: 100%; background: linear-gradient(rgb(8 7 12 / 86%), rgb(228 32 45)); position: absolute; left: 0%; top: -98%; z-index: -2; transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99); } .structural-engg-bx h3 { /* font-size: 20px; */ text-transform: capitalize; /* font-weight: 600; */ margin: 2em 0; z-index: 3; } .structural-engg-bx p { color: #575a7b; font-size: 15px; line-height: 1.6; letter-spacing: 0.03em; z-index: 3; } .structural-engg-bx .structure-icon { background-color: #2c7bfe; position: relative; margin: auto; font-size: 30px; height: 2.5em; width: 2.5em; color: #ffffff; border-radius: 50%; display: grid; place-items: center; transition: 0.5s; z-index: 3; } .structural-engg-bx .structural-engg-card:hover:after { top: 0%; } .structural-engg-card .structure-icon { background-color: #ffffff; color: rgb(255, 23, 131); } .structural-engg-bx .structural-engg-card:hover .structure-icon { color: #0dcaf0; } .structural-engg-bx .structural-engg-card:hover h3 { color: #ffffff; } .structural-engg-bx .structural-engg-card:hover p { color: #f0f0f0; } .structure-icon img { height: 45px; } /* product details 4 */ /*USE CSS for Slider*/ .banner-section{ background-color: #fff; } .banner-section .slider-for.slick-initialized .slick-slide{ display: block; border: 2px solid #2f2f2f; padding: 10px; } .banner-section .slick-vertical .slick-slide.slick-current.slick-active.slick-active { display: block; height: auto; border: 1px solid transparent; padding: 10px; border: 2px solid #e4202d; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid #555555; padding: 10px; margin-bottom: 20px; } .slick-slide img{ max-width: 100%; } .vehicle-detail-banner .car-slider-desc { max-width: 180px; margin: 0 auto; } .banner-slider .slider.slider-for { max-width: 84%; padding-right: 35px; } .banner-slider .slider.slider-nav { max-width: 16%; } .banner-slider .slider.slider-for, .banner-slider .slider.slider-nav { width: 100%; float: left; } .banner-slider .slider.slider-nav { height: 610px; overflow: hidden; } .slider-banner-image { height: 610px; } .banner-slider .slider.slider-nav { padding: 20px 0 0; } .slider-nav .slick-slide.thumbnail-image .thumbImg{ max-width: 178px; height: 110px; margin: 0 auto; border: 1px solid #EBEBEB; } .slider-banner-image img, .slider-nav .slick-slide.thumbnail-image .thumbImg img { height: 100%; width:100%; object-fit: cover; } .slick-vertical .slick-slide:active, .slick-vertical .slick-slide:focus, .slick-arrow:hover, .slick-arrow:focus { border:2px solid #e4202d; outline: 0; } .slider-nav .slick-slide.slick-current.thumbnail-image .thumbImg { border: 2px solid #196DB6; } .slider-nav .slick-slide.slick-current span { color: #000; } .slider-nav .slick-slide { text-align: center; width: 207px !important; } .slider-nav .slick-slide span { font-size: 13px; display: block; padding-top: 8px; } .slick-arrow { width: 100%; background-color: transparent; border: 0; background-position: center; background-repeat: no-repeat; font-size: 0; height: 18px; position: absolute; left: 0; right: 0; z-index: 99; } .slick-prev { top: 0; } /* .slick-next { bottom: 0; background-color: #fff; } .slick-prev.slick-arrow { background-image: url(../images/black-up-arrow.png); } .slick-next.slick-arrow { background-image: url(../images/black-down-arrow.png); } */ /*End USE CSS for Slider*/ .product-detail_4{ background: url(../images/products/18M/sea-1547609.png),#f1f1f1; min-height: 200px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; } .product-detail_4 h2{ font-size: 34px; font-weight: 400; text-transform: uppercase; font-weight: 700; } .product-detail_4_intro p{ line-height: 1.7; font-size: 20px; color: black; } .product-detail_4 h2::before { content: "18M IPV"; display: inline-block; margin-right: 5px; position: absolute; rotate: -90deg; left: -233px; font-size: 90px; line-height: 1; top: 128px; color: #e4e4e4; } .product-detail_4 ul{ padding-left: 0; -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; } .product-detail_4 ul li{ margin: 5px; font-size: 18px; line-height: 2; background-color: #e4202d; color: white; list-style: none; padding: 5px 10px } .product-detail_4_ul p{ color: #000000; margin-bottom: 12px; font-weight: 400; text-transform: capitalize; font-size: 28px; font-weight: 600; font-size: 45px; } .products4-video{ min-height: 400px; } .products-details-video4 { background-color: #ffffff80; padding: 22px 35px 41px 35px; background: rgb(255 255 255 / 76%); border-radius: 8px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5.2px); -webkit-backdrop-filter: blur(5.2px); border:1px solid rgb(108 107 107 / 58%); } .products-details-video4 .counter-container{ display: block; } .products-details-video4 .counter-container .counter{ display: flex; border-left: 4px solid rgb(228, 32, 45); margin-bottom: 15px; padding-left: 20px; font-size: 26px; font-weight: 700; color: #000; } .products-details-video4 .counter-container .counter-txt{ text-align: left; margin-top: auto; margin-bottom: auto; margin-left: 20px; } .products-video4-info{ } .products-video4-info p{ position: absolute; bottom: 0; font-size: 50px; color: white; font-weight: 200; } .products-details-video4 h4{margin-bottom: 30px; color: #414141; } .product-breadcums.page-heading { padding: 100px 0px 0px 0px; } .products-details-video4.mar-top{ background: rgb(255 255 255 / 0%); border-radius: 20px 20px 0 0; } .products-details-video4.mar-top h4 { color: #ffffff; } .products-details-video4.mar-top .counter h3{ color: #fff; } .products-details-video4.mar-top .counter h6{ color: #fff; } .section-architech .product-04-sepcification p{ font-size: 16px; } .section-architech .product-04-sepcification { padding: 50px 0; } .product-detail_4 img{ min-height: 500px; object-fit: cover; } .product-detail_4_intro{ background-color: white; /* padding: 43px; */ z-index: 1; position: relative; } .Well-built-point{ background-color: #e7e7e7; padding: 20px 30px; } .Well-built-point p{ font-size: 36px; line-height: 1.5; margin-bottom: 0; font-weight: 600; } .Well-built-point ul li{ margin-bottom: 10px; } .well-build-section{ position: relative; } .well-build-section::after { content: ""; width: 180px; height: 100%; background-image: url(../../assets/images/bg/why-bg.jpg); top: 0; right: 0; position: absolute; display: inline-block; background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: 1; } .Well-built-owl{ position: relative; z-index: 10; } .Well-built-owl-txt{ padding: 30px; background-color: #f1f1f1; min-height: 130px; } .Well-built-owl-txt h2{ font-size: 18px; margin-bottom: 0; } .Well-built-owl .owl-prev { left: -80px; background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; margin-top: 20px; } .Well-built-owl .owl-next { background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff; margin-top: 20px; } .Well-built-owl .owl-next .fa, .Well-built-owl .owl-prev .fa { color: #fff; } .Well-built-owl .owl-prev.disabled, .Well-built-owl .owl-next.disabled { background-color: #f1f1f1 !important; } .Well-built-owl .owl-prev.disabled .fa, .Well-built-owl .owl-next.disabled .fa { color: #000 !important; } .section-architech1{ background-color: #2a2a2a; } .section-architech1 ul li{ background-color: #ec3c47; list-style: none; color: #fff; margin-bottom: 5px; font-weight: 600; overflow: hidden; position: relative; display: flex; } .section-architech1 ul { padding: 0; } .architech1-pr{ padding-right: 50px; z-index: 50 !important; } .section-architech1 ul li span{ font-weight: normal; z-index: 10; position: relative; width: 100%; } .section-architech1 ul li span,.section-architech1 ul li p{ font-size: 14px; padding: 6px 10px; } .section-architech1 ul li::after{ content: " "; background-color: #f0303d; height: 100px; width: 100px; position: absolute; right: -18px; border-radius: 50%; } .section-architech1 .particulars-keys{ margin-bottom: 0; background-color: #dd2734; width: 230px; } .product-5-video::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #003f8acf; transition: .5s ease; z-index: 1; } .product-5-video{ min-height: 80vh; background-position: center; position: relative; } .product-5-video h2{ position: absolute; z-index: 10; text-align: center; font-size: 50px; position: absolute; top: 35%; left: 50%; transform: translate(-50%,-50%); color: #fff; width: 80%; } .product-5-video-wrapper { display: inline-block; position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); z-index: 25; } .product-5-video-wrapper .video-main { position: relative; display: inline-block; } .product-5-video-wrapper .video { height: 50px; width: 50px; line-height: 50px; text-align: center; border-radius: 100%; background: transparent; color: #fff; display: inline-block; background: #000000; z-index: 999; } @keyframes waves { 0% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } 50% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } 100% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } .product-5-video-wrapper .fa-play:before { content: "\f04b"; } .product-5-video-wrapper .waves { position: absolute; width: 150px; height: 150px; background: rgba(0, 0, 0, 0.3); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border-radius: 100%; right: -50px; bottom: -50px; z-index: -1; -webkit-animation: waves 3s ease-in-out infinite; animation: waves 3s ease-in-out infinite; } .product-5-video-wrapper .wave-1 { -webkit-animation-delay: 0s; animation-delay: 0s; } .product-5-video-wrapper .wave-2 { -webkit-animation-delay: 1s; animation-delay: 1s; } .product-5-video-wrapper .wave-3 { -webkit-animation-delay: 2s; animation-delay: 2s; } .product-5-video-wrapper #fade { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); } .product-5-video-wrapper #light { display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 360px; margin-left: -300px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible; } .product-5-video-wrapper #boxclose { float: right; cursor: pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 3px; background: #222222; font-size: 31px; font-weight: bold; display: inline-block; line-height: 0px; padding: 11px 3px; position: absolute; right: 2px; top: 2px; z-index: 1002; opacity: 0.9; } .product-5-video-wrapper .boxclose:before { content: "×"; } .architech1-pr table tr{ color: #fff; padding: 10px; margin-bottom: 20px; border: none; } .architech1-pr table th,.architech1-pr table td{ background-color: #a20b15; font-weight: 600; border: none; padding: 11px; text-transform: capitalize; } .architech1-pr table th{ background-color: #72060e; } .Well-built-point ul li{list-style-type: none; position: relative;} .Well-built-point ul li::before{ content: " "; background-color: #f0303d; height: 8px; width: 8px; position: absolute; left: -19px; border-radius: 50%; top: 8px; } .Well-built-point .list-unstyled li { list-style-type: none; position: relative; display: flex; background-color: #fff; padding: 20px; } .Well-built-point .list-unstyled li .media-body{ margin-top: auto; margin-bottom: auto; } /* .Well-built-point .list-unstyled li::before { display: none; } */ .Well-built-bx img { height: 40px; margin-right: 10px; } .Well-built-bx h5{ font-size: 16px; line-height: 1.5; } /* .Well-built-point .list-unstyled { padding-left: 0; list-style: none; columns: 2; -webkit-columns: 2; -moz-columns: 2; } */ .Well-built-bx { display: flex; background-color: white; padding: 10px 22px; margin-bottom: 10px; min-height: 72px; } .Well-built-bx .media-body{ margin-top: auto; margin-bottom: auto; } .well-2 p { font-size: 28px; } .services-inners{ position:relative; } .services-inners .grid { list-style: none; margin-left: -40px; } .services-inners .gc { box-sizing: border-box; display: inline-block; margin-right: -0.25em; min-height: 1px; padding-left: 40px; vertical-align: top; } .services-inners .gc--1-of-3 { width: 33.33333%; } .services-inners .gc--2-of-3 { width: 66.66666%; } .services-inners .naccs { position: relative; /* max-width: 900px; margin: 100px auto 0; */ } .services-inners .naccs .menu div { padding: 10px 20px 10px 40px; margin-bottom: 10px; color: #fff; background: #e4202d; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); cursor: pointer; position: relative; vertical-align: middle; font-weight: 700; transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); transition: transform .2s; } .services-inners .naccs .menu div:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); transform: scale(1.1); } .services-inners .naccs .menu div span.light { height: 10px; width: 10px; position: absolute; top: 18px; left: 15px; background-color: #fff; border-radius: 100%; transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); } .services-inners .naccs .menu div.active span.light { background-color: #e4202d; left: 0; height: 100%; width: 3px; top: 0; border-radius: 0; } .services-inners .naccs .menu div.active { color: #e4202d; background-color: #323232; } .services-inners ul.nacc { position: relative; height: 0px; list-style: none; margin: 0; padding: 0; transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); } .services-inners ul.nacc li { opacity: 0; transform: translateX(50px); position: absolute; list-style: none; transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); } .services-inners ul.nacc li.active { transition-delay: 0.3s; z-index: 2; opacity: 1; transform: translateX(0px); } .services-inners ul.nacc li p { margin: 0; font-size: 16px; line-height: 1.6; } .services-inners .naccs span{ color: #fff; font-weight: 500; } .services-inners .naccs img{ max-height: 240px; width: 100%; object-fit: cover; border-radius: 5px; } .nacc-content h4{ font-size: 25px; color: #272727; text-transform: capitalize; font-weight: 500; } .services-inners .naccs .menu div::after{ font-family: FontAwesome; content: "\f105"; display: inline-block; padding-right: 3px; vertical-align: middle; right: 12px; position: absolute; } .nacc-txt{ margin-top: 22px; } .services-inners .naccs .menu div::before{ display: inline-block; padding-right: 3px; vertical-align: middle; position: absolute; left: 8px; font-size: 41px; top: -10px; color: #d8d8d814; } .services-inners .naccs .menu div:nth-child(1):before { content: "1"; } .services-inners .naccs .menu div:nth-child(2):before { content: "2"; } .services-inners .naccs .menu div:nth-child(3):before { content: "3"; } .services-inners .naccs .menu div:nth-child(4):before { content: "4"; } .services-inners .naccs .menu div:nth-child(5):before { content: "5"; } .services-inners .naccs .menu div:nth-child(6):before { content: "6"; } .services-inners .naccs .menu div:nth-child(7):before { content: "7"; } .services-inners .naccs .menu div:nth-child(8):before { content: "8"; } /* .business-focus-combact{ max-width: 120%; margin-left: -70px; border: 10px solid white; opacity: 0.95; } .marin-contruct img{ margin-top: -116px; border: 10px solid white; left: -75px; position: relative; opacity: 0.95; } .business-focus img{ max-width: 120%; } .marin-service img{ margin-left: -135px; margin-top: -100px; border: 10px solid white; height: 450px; object-fit: cover; } .marin-width{ width: 140%; margin-left: -75px; margin-top: 50px; } .Ship-Design img{ min-height: 400px; margin-top: -80px; object-fit: cover; border: 10px solid white; } .pt-100{ padding-top: 100px; } */ .services-2{ background-color: #f9f9f9; } .services-bx-inner{ background-color: rgb(255 255 255); padding: 30px; height: 100%; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .services-bx-inner h3{ margin-top: 20px; font-weight: 700; font-size: 34px; } .services-bx-inner img{ width: 100%; object-fit: cover; max-height: 300px; border-radius: 5px; margin-bottom: 10px; } .services-bx-inner ul{ padding-left: 15px; list-style: none; margin-bottom: 0; } .services-bx-inner ul li{ line-height: 1.7; } .services-bx-inner ul li::before{ content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: red; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; } .strategic-partners{ background-color:#f1f1f1; } .partner-holder{ background-color: #fff; min-height: 225px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 15px; margin-top: 30px; padding: 20px; position: relative; min-height: 350px; } .partner-holder > img{ margin-bottom: 20px; height: 50px !important; max-width: fit-content; } .partner-txt p{ font-size: 14px; line-height: 1.6; margin-top: 10px; } .partner-holder .partner-txt img{ width: 25px; height: 25px; } .partner-media img{ width: 40px !important; height: 40px; border-radius: 50%; } .partner-media h3{ font-size: 16px; font-weight: 600; margin-bottom: 0; } .partner-media p{ font-size: 13px; letter-spacing: 1px; color: #979797; margin-bottom: 0; } .success-story-owl .image-wrapper img{ height: 50px; width: auto; margin: 0 auto; } .certificate-title{ background-color: #003F8A; min-height: 100%; display: flex; justify-content: center; align-items: center; padding: 80px; color: #fff; } .certificate-carousel{ padding: 50px; } .certificate-carousel .owl-nav{ position: absolute; top: 45%; left: 0; right: 0; } .certificate-carousel .owl-nav .owl-next { position: absolute; right: 0; top: 50%; } .certificate-carousel .owl-nav .owl-prev { position: absolute; left: 0; top: 50%; } .certificate-carousel .owl-next,.certificate-carousel .owl-nav .owl-prev { background-color: #f32735 !important; width: 50px; height: 50px; border-radius: 50% !important; color: #fff !important; } .certificate-carousel .owl-prev.disabled, .certificate-carousel .owl-next.disabled { background-color: #aeaeae !important; } .counter-container hr{ width: 100%; } .section-architech1 ul li{ transition: transform .2s; } .section-architech1 ul li:hover{ transform: scale(1.05); cursor: pointer; } .ils-facilities-points-wl .owl-nav .owl-prev .fa{ color: #fff; } .recent-jobs .job-item img { height: 65px !important; width: 110px; object-fit: cover; } .job-post-container .jb-detail-img{ background-color: #262626; width: 100px; padding: 10px; height: 130px; width: 220px; } .our-success-story-1 .successstory-data{ position: relative; top: 12%; left: 0px; z-index: 1; padding: 50px; } .our-success-story-1 .successstory-data h3{ color: #000000; font-size: 120px; } .our-success-story.our-success-story-1 img { position: absolute; bottom: -22px; right: -100px; width: 240px; z-index: 1; } .our-success-story.our-success-story-1 img.oddimg { position: absolute; bottom: -22px; right: auto; width: 240px; z-index: 1; left: -100px; } .our-success-story-1 .successstory-data p { font-size: 40px; color: #000; font-weight: 500; } .our-success-story-1 .col-md-6{ background-color:#f1f1f1; } .success-count-1,.success-count-2,.success-count-3,.success-count-4 { position: relative; } .success-count-1::before,.success-count-2::before,.success-count-3::before,.success-count-4::before{ font-size: 200px; left: 50%; transform: translateX(-50%); position: absolute; top: 20%; color: white; z-index: 1; font-weight: 900; opacity: 0.3; font-family: sans-serif; } .success-count-1::before{ content: "1"; } .success-count-2::before{ content: "2"; } .success-count-3::before{ content: "3"; } .success-count-4::before{ content: "4"; } @media (max-width: 1920px) { .defence-sections{ margin-top: 100px; } .our-team-owl .owl-nav { bottom: 50px; left: -440px; } .howwe-Work::after { width: 135px; } } @media (max-width: 1660px) { .our-team-owl .owl-nav { left: -340px; bottom: 12px; } .defence-sections { margin-top: 50px; } } @media (max-width: 1550px) { .defence-sections { margin-top: 0; } } @media (max-width: 1440px) { .owl-videoSlider.owl-theme .owl-nav { bottom: 180px; left: 5%; } .port-section h2 { font-size: 45px; } .port-section { padding: 100px 60px; } .our-services { background-size: contain; } .white-bg { min-height: 510px; } .our-team { height: 355px; } } @media (max-width: 1367px) { .banner-slider .slider.slider-for { max-width: 80%; } .banner-slider .slider.slider-nav { max-width: 20%; } .recent-jobs .job-item h5 { font-size: 16px; } .ils-facilities-bx { padding: 5px; } .ils-facilities-points-wl .owl-item img{ min-height: 550px; width: 100%; height: 100%; object-fit: cover; } .ils-facilities-points-wl.owl-theme .owl-nav { right: 30px; bottom: 10px; } .ils-facilities-points-wl .owl-item img { display: block; width: 100%; height: 100%; object-fit: cover; } } @media (max-width: 1284px) { .job-post-container { padding: 28px 28px 36px; } .design-engg-box .design-engg-naval h2 { font-size: 44px; } .design-engg-naval h2::before{ right: 0; } .design-engg-box .design-engg-naval { padding: 80px 40px; height: 100%; } .success-story-text h4 { font-size: 22px; } .menu-item.first-item { padding: 1rem 0.5rem; } .owl-videoSlider.owl-theme .owl-nav { left: 10%; } .our-product-bx .card .card-media .card-title { left: 12px; padding: 10px; } .our-team-owl .owl-nav { left: -300px; } /* .our-team { height: 340px; } */ .sadar-counter span { font-size: 50px; margin-top: 16px; } .sadar-counter p { font-size: 14px; letter-spacing: 5.5px; } .our-visions p { font-size: 15px; } .our-visions h2 { font-size: 45px; } } @media (max-width: 1200px) { .services-bx-inner h3 { font-size: 24px; } .products-details-video4 h4 { font-size: 18px; } .products-details-video4 { padding: 20px 15px 34px 20px; } .products-details-video4.mar-top .counter h3 { font-size: 16px; } .banner-slider .slider.slider-nav { max-width: 23%; } .banner-slider .slider.slider-for { max-width: 75%; } .electrical-engg h3, .structural-engg h3 { font-size: 26px; } .recent-jobs .job-item img { height: 60px !important; margin-bottom: 15px; text-align: center; } .job-item .row .col-sm-12 { text-align: center; } .IntegratedLogs-bx { padding: 22px; } .IntegratedLogs-bx h4 { font-size: 16px; padding-left: 15px; } .IntegratedLogs-bx h4 { min-height: 20px; font-size: 17px; padding-left: 6px; } .ils-facilities-bx h2 { font-size: 24px; } .ils-compabalites-bx h2 { font-size: 16px; } .ils-compabalites-bx { padding: 10px; } #cssmenu > ul > li > a { padding: 16px 8px; } .velo-slide__title { font-size: 3.5em; } .chairman-message{ padding: 50px 0; } /* .our-team { height: 400px; } */ .success-story-text h4{ font-size: 18px; } .howWork-bx h3{ font-size: 80px; } } @media (max-width: 1024px) { .structural-engg img { width: 150%; } .news-slider .item .cover .header-content h4 { font-size: 32px; } .event-calendar .top-line{ font-size: 24px; } .velo-slides { height: 670px; } .section-title h2 { font-size: 35px; } .our-team-owl .owl-nav { left: -250px; } .our-team .section-title { padding: 25px 10px; display: inline-block; } /* .our-team { height: 350px; } */ .successstory-data h3{ font-size: 80px; } .successstory-data { bottom: 120px; left: 21px; z-index: 1; } .headerMenu .logo img { width: 75px; padding: 0; padding-top: 0px; } } @media (max-width: 992px) { .slider-nav .slick-slide { margin: 10px; border: 1px solid; } .banner-slider .slider.slider-nav { height: 200px; } .architech1-pr { padding-right: 0; } .banner-slider .slider.slider-for, .banner-slider .slider.slider-nav{ float: unset; max-width: 100%; padding-right: 0; } .product-5-video h2{ font-size: 35px; } .product-detail_4_intro p { font-size: 14px; } .Well-built-point p{ font-size: 22px; margin-bottom: 20px; } .structural-engg::after{ display: none; } .structural-engg img { width: 100%; } .event-calendar { width: 100% !important; } .page-heading h1 { font-size: 45px; } .our-team { min-height: 100%; height: 100%; padding: 50px 0; } .our-team-owl .owl-nav { left: auto; right: 40px; /* bottom: -38px; */ top: -100px; /* width: 100%; */ } .headerMenu { min-height: 60px; } .shipyard-sqt, .shipyard-emp { padding: 20px; } .ourmission p { font-size: 14px; } .container, .container-md, .container-sm { max-width: 90%; } .our-services { background-size: cover; padding: 50px 0; } .howWork-bx { min-height: 280px; } .success-story-owl { padding: 0; margin-top: 50px; } .contact-details p { font-size: 14px; } .certificate-title { display: flex; justify-content: flex-start; align-items: self-start; padding: 20px; } } @media (max-width: 768px) { .section-title h2::after{ transform: scale(0.5); } .services-inners .naccs span { font-size: 14px; } .services-2 .section-title h2:after{ right: auto; } .product-breadcums.page-heading { padding: 170px 0px 150px; } .products-details-video4.mar-top { display: none; } .ils-facilities-bx ul li { font-size: 14px; } .ils-compabalites-bx::before { content: ''; left: -5px; right: 50px; } .ils-compabalites-bx ul { padding-left: 8px; } .faq-item .faq-label{ padding-right: 20px; } .electrical-engg::after{ width: 30px; right: 0; left: unset; z-index: 0; } .electrical-engg h3, .structural-engg h3{ font-size: 26px; margin-top: 20px; } .about-us-section .row .col{ } .about-us-section h2 { font-size: 26px; width: 95%; margin: 0 auto; line-height: 1.2; } .port-section { padding: 70px 32px; } .our-visions { /* padding: 65px 35px; */ width: 100%; } .sub-heading img { width: 24px; height: 40px; left: -30px; top: -8px; } p.sub-heading{ width: 100%; } .about-Intro { margin-top: 30px; } .velo-slide__header{ top: 13%; text-align: center; } .velo-slide__text{ width: 100%; max-width: initial; } .velo-slide__title { font-size: 2.5em; } .velo-slide__header .oh{ margin: 0 auto; } .velo-slides-nav { bottom: 8em; transform: translateY(-50%); left: 40%; } .chairman-message img{ margin-top: 50px; } .our-team { min-height: auto; height: unset; } .our-team{ padding: 50px 0; } .our-team .container-fluid { max-width: 90%; } .our-team-owl .owl-nav { left: 0; position: relative; top: 0px; } .howWork-bx { min-height: 260px; } .client-btn { text-align: unset; } .client-list{ margin-top: 50px; } .section-title h2:after{ right: auto; } } @media (max-width: 668px) { .services-bx-inner ul li { line-height: 1.5; font-size: 14px; } .ils-facilities-bx { padding: 22px; } .ils-facilities-points-wl .owl-item img { min-height: 200px; } } @media (max-width: 576px) { .section-title h2:after { content: ""; width: 45px; height: 60px; background-image: url(../../assets/images/arrow-red.svg); top: -27px; position: absolute; display: inline-block; background-repeat: no-repeat; } .nacc-content h4 { font-size: 22px; } .services-inners .gc--2-of-3, .services-inners ul.nacc li.active { min-height: 550px; } .services-inners ul.nacc{ height: 100%; } .services-inners ul.nacc li p{ font-size: 14px; } .section-title{ width: 90%; margin: 0 auto; } .services-bx-inner h3 { font-size: 20px; } .services-bx-inner{ padding: 15px; } .services-inners .gc--1-of-3,.services-inners .gc--2-of-3{ width: 100%; } .product-5-video h2 { font-size: 25px; } .product-5-video { min-height: 34vh; } .Well-built-point ul li { font-size: 14px; } .Well-built-point { padding: 20px; } .Well-built-point p { font-size: 20px; } .post-module .post-content { padding: 15px; } .news-slider .item .cover .header-content h2 { font-weight: 500; font-size: 14px; padding: 5px; } .post-module .post-content .title { font-size: 16px; } .news-slider .item .cover .header-content h4 { font-size: 22px; line-height: 1.8; } .job-details-sec h4 { font-weight: 600; font-size: 16px; } .job-post-container { padding: 15px; } .job-post-container h3 { font-weight: 600; font-size: 18px; margin-bottom: 5px !important; margin-top: 20px; } #ils-facilities-points{ overflow: visible; } .ils-facilities-points-wl.owl-theme .owl-nav { right: auto; bottom: auto; width: 100%; top: 40%; } .IntegratedLogs-bx h4 { padding-left: 25px; font-size: 16px; } .ils-compabalites-bx { padding-top: 30px; } .design-engg-naval h2::before { right: -10px; } .design-engg-box .design-engg-naval h2 { font-size: 34px; } .design-engg-box .design-engg-naval { padding: 50px 25px; } .row.input-container .col-md-7{ margin-bottom: 50px; } .job-item h5 { margin-top: 20px; font-size: 16px; } .pagination.pagination-circle .page-item .page-link { margin-left: -2px; margin-right: -2px; border-radius: 50%; } .custom-btns { padding: 5px 13px; font-size: 14px; } .services-24.section-title p { font-size: 14px; line-height: 1.4; font-weight: 300; } .port-section h2 { font-size: 26px; } .port-section { padding: 20px; min-height: auto; } .sadar-counter span { font-size: 36px; margin-top: 16px; font-weight: 700; } .sadar-port { padding: 100px 0; } .section-title p { font-size: 13px; } .about-team .team-wrap { padding: 0px; margin-top: 0; } .mission-vision .col-md-6 { min-height: 200px; } .our-visions h2 { font-size: 30px; margin-bottom: 0; } .our-visions p { font-size: 14px; margin-top: 10px; margin-bottom: 0; } .our-visions { padding: 25px 21px; width: 100%; } .about-Intro p{ font-size: 14px; } .sub-heading img { width: 20px; height: 40px; left: -24px; } .aboutUsimg04 { min-height: auto; margin-top: -43px; } p.mt-100 { margin-top: 30px; font-size: 14px; } p.sub-heading{ font-size: 16px; } .about-us-section .row .col { flex: auto; width: 48%; } .page-heading p { position: relative; font-size: 14px; } .page-heading h1 { font-size: 30px; } .velo-slides { height: 520px; } .velo-slides-nav { top: 12em; left: 0; bottom: auto; width: 100%; right: auto; position: absolute; transform: unset; } .velo-slides-nav .velo-right{ right: 5px; position: absolute; } .velo-slides-nav .velo-left{ left:5px; position: absolute; } .velo-slide__title { font-size: 2em; } .velo-slides-nav i { font-size: 1.2em; } .velo-slides-nav a{ width: 30px; height: 30px; margin-right: 0; } .shipyard-sqt, .shipyard-emp { padding: 20px; text-align: center; } .yard-count h2, .yard-count span { margin-left: auto; } .yard-count h2{ font-size: 22px; } .section-title h2 { font-size:22px; } .yard-tx { padding: 20px; } .yard-tx p{ margin-bottom: 0; } .our-product-bx{ margin-bottom: 20px; } .ourmission h3{ font-size: 28px; } .defence-section p { font-size: 14px; } .ourmission { padding-bottom: 50px; text-align: center; } .img-bg-who{ margin: 0 auto; } .services-bx { padding: 20px 30px; margin-bottom: 20px; } .services-content { padding: 50px 0; padding-bottom: 0; } .defence-section h2 { font-size: 30px; margin-top: 20px; text-align: center; } .defence-section .defence-text { text-align: center; } .text-right { text-align: center; } .defence-text img{ width: 200px; } } @media (max-width: 414px) { .electrical-engg h3, .structural-engg h3 { font-size: 20px; } .section-padding{ padding: 30px 0; } .news-slider .item .cover .header-content h4 { font-size: 20px; line-height: 1.5; } .event-calendar .detail-container { padding: 13px 18px; } .event-calendar .date1 { font-size: 1.8em; } .event-calendar .title { font-size: 14px; } .ils-facilities-points-wl.owl-theme .owl-nav { top: 20%; } } @media screen and (max-width : 991px) { .banner-slider .slider.slider-for, .banner-slider .slider.slider-nav { max-width: 100%; float: none; } .banner-slider .slider.slider-for { padding-right: 0; } /* .banner-slider .slider.slider-nav { height: auto; } */ .slider-banner-image { height: 500px; } .slider.slider-nav.thumb-image { padding: 10px 30px 0; } .slider-nav .slick-slide span { padding: 5px 0; } .slick-arrow { padding: 0; width: 30px; height: 30px; top: 50%; bottom: 0; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .slick-prev { left: 0; right: unset; } .slick-next { left: unset; right: 0; background-color: transparent; } .vehicle-detail-banner .car-slider-desc { max-width: 340px; } .bid-tag { padding: 10px 0 15px; } .slider.slider-nav.thumb-image { white-space: nowrap; } .thumbnail-image.slick-slide { padding: 0px 5px; min-width: 75px; display: inline-block; float: none; } .owl-videoSlider .item { z-index: 8; position: relative; max-height: 700px; background-color: #111; } .owl-videoSlider.owl-carousel .owl-item img { width: auto; object-fit: cover; } } @media screen and (max-width : 767px) { .slider-banner-image { height: 400px; } .slider.slider-nav.thumb-image { padding: 0px 0px 0; margin: 10px 0px 0; } .slider-nav .slick-slide.thumbnail-image .thumbImg { max-width: 140px; height: 80px; } .slick-prev.slick-arrow { background-position: center 10px; } .slick-next.slick-arrow { background-position: center 10px, center; } .slider-nav .slick-slide span { font-size: 12px; white-space: normal; } } @media screen and (max-width: 580px) { .slider-banner-image { height:340px; } } @media screen and (max-width : 480px) { .slider-banner-image { height:280px; } } /* Media queries */ @media (min-width: 1199px) { .vendor-bg{ position: relative; } .vendor-form{ position: relative; z-index: 2; } .vendor-bg .section-title{ position: relative; z-index: 2; } .vendor-bg::before{ content: ''; display: inline-block; width: 500px; height: 500px; border-radius: 50%; background-color: #fbfbfb; position: absolute; z-index: 0; } .vendor-bg::after{ content: ''; display: inline-block; width: 450px; height: 450px; border-radius: 50%; /* background-color: #ffffff; */ position: absolute; z-index: 0; top: 25px; /* z-index: 2; */ left: 130px; border: 25px solid white; } } @media (min-width: 1920px) { .white-bg { min-height: 670px; } } @media (min-width: 1660px) { .our-team-owl .owl-nav { left: -460px; } } @media (max-width: 1770px) { .owl-videoSlider.owl-theme .owl-nav { left: 13%; } } @media (max-width: 1660px) { .owl-videoSlider.owl-theme .owl-nav { left: 7%; bottom: 170px; } } @media (max-width: 1440px) { } @media (max-width: 1367px) { .owl-videoSlider.owl-theme .owl-nav { left: 8%; } .our-product-bx .card .card-media .card-title span { font-size: 14px; } } @media (max-width: 1284px) { } @media (max-width: 1200px) { .owl-videoSlider.owl-theme .owl-nav { left: 10%; } .services-bx { padding: 20px 20px; } .chairman-message p { font-size: 14px; } .our-team .section-title h2::after { right: initial; } .semi-coma { top: -50px; height: 100px; width: 100px; } } @media (max-width: 1025px) { .owl-videoSlider.owl-theme .owl-nav { left: 3%; } } @media (max-width: 992px) { .success-story-owl .owl-nav { top: -300px; right: 20px; } .chairman-message .col-lg-5 img{ margin-top: 20px; width: 100%; } } @media (max-width: 768px) { .our-product-bx{ margin-bottom: 50px; } .services-bx { margin-bottom: 20px; text-align: center; } .yard-count h2, .yard-count span{ margin-left: 0; margin-top: 5px; } .onhover-effect { margin-bottom: 70px; } .contact-details p { font-size: 20px; margin-bottom: 20px; } } @media (max-width: 667px) {} @media (max-width: 576px) { .new-customNavbar .content .col .menu-title { left: 50px; } .new-customNavbar .content .col .menu-title h2 { font-size: 31px; } .new-customNavbar .content .col .img-wrapper { height: 300px; } .new-customNavbar .content .col .menu-title { top: 100px; } .owl-videoSlider .item .bannerSlider_title{ font-size: 1.3em; } .yard-count h2, .yard-count span { margin-top: 5px; font-size: 16px; } .bg-glassmorphisam { padding: 27px 12px; } /* .section-title h2:after { right: 0; } */ .howwe-Work::after{display: none;} .successstory-data h3 { font-size: 50px; } .mtsm-5{ margin-top: 120px; } .success-story-owl .owl-nav { bottom: -95px; left: 0; top: inherit; } .success-story-text h4 { font-size: 18px; } .theme-bg { padding-top: 60px; margin-top: 80px; } .owl-videoSlider.owl-theme .owl-nav { bottom: 200px; left: 6%; } } @media (max-width: 360px) {} .howWork-bx img{ width: 100px; height: 100px; border-radius: 100px; border: 4px solid #DD2734; } .product-performance{ min-height: 380px; display: flex; justify-content: center; align-items: center; } /* Style the submenu container */ .menu-item { position: relative; } /* Style individual submenu items */ .sub-menu a { display: block; padding: 10px 15px; /* Adjust padding as needed */ text-decoration: none; color: #333; /* Adjust text color as needed */ } /* Style submenu items on hover */ .sub-menu a:hover { background-color: #f0f0f0; /* Add your desired hover background color */ /* Add other hover styles as needed */ } .required-field::after{content:" *" !important;color:red;} .bold-placeholder::placeholder { font-weight: 700; color: #000 !important; } .bold-placeholder1::placeholder { font-weight: 700; color: #000 !important; content:" *" !important; } .form-control-mod{ border-radius: 0; border-bottom: 2px solid #999; } /* Position the submenu below the main menu item */ .sub-menu { display: none; position: absolute; top: 100%; /* Position below the main menu item */ left: 0; background-color: #fff; /* Add your desired background color */ /* Add other styling as needed */ } .a1{ color: #fff; font-weight: 600; text-decoration: none; } /* Customize the modal background color */ .modal.fade { background-color: rgba(0, 0, 0, 0.7); /* Adjust the color and opacity as needed */ } /* Center the modal vertically */ .modal-dialog.modal-dialog-centered { display: flex; align-items: center; justify-content: center; } .modal-content { /* max-width: 75%; max-height: 84%; background-color: rgba(0, 0, 0, 0.7); */ } .lang-span{background: #dfdfdf; border-radius: 33px; color: #000; white-space: nowrap; margin-bottom: 10px; padding: 3px 8px; } .phone-link { text-decoration: none; color: black; } .phone-link:hover { color: #dd2734; } .back-to-top{position:fixed;visibility:hidden;opacity:0;right:15px;bottom:15px;z-index:996;background:#c0242b;width:40px;height:40px;border-radius:4px;transition:all .4s} .back-to-top i{font-size:28px;color:#fff;line-height:0} .back-to-top:hover{background:#f06f54;color:#fff} .back-to-top.active{visibility:visible;opacity:1} .cont:hover { color: #dd2734 !important; } #footer .Social-media :hover { color: black !important; } .breadcrumb-item :hover { color: red !important; } @media screen and (max-width:480px){ .career-detail {display: inherit;} .career-detail-box{text-align: center!important;} .news-details-sec { text-align: left!important; } .modal-body iframe { height: auto!important; } .custom-btns { padding: 5px 15px; font-size: 14px; width: 55%; } .our-product-bx .card { padding-bottom: 80px; height: 100%!important; } .section-title { width: 100%; margin: 0 auto; } .product-section .product-img { width: 100%; float: left; margin-right: 20px; } .breadcrumbs-custom .breadcrumb-item.active { color: #fff; font-weight: 600; text-transform: capitalize; /* margin-left: 8px; */ } .modal-content{ margin-top: -450px!important;} .modal-dialog{max-width: 100%!important; max-height: 0%;} .modal-body video{max-width: 100%; height: 228px!important;} .job-post-container .jb-detail-img { background-color: #262626; width: 100px; padding: 10px; height: 130px; width: 220px; object-fit: cover; } .page-heading h1::before { content: ""; width: 45px; height: 60px; /* background-image: url(../../assets/images/arrow-red.svg); */ top: -15px; position: absolute; display: inline-block; background-repeat: no-repeat; /* right: -33px; */ } .electrical-engg h3 { margin-left: -26px!important; } .electrical-engg ul li { margin-left: -26px!important; } .electrical-engg p { margin-left: -26px!important; } .ils-facilities-points-wl.owl-theme .owl-nav { /* right: -104px; */ bottom: auto; width: 100%; top: 95%; } .our-success-story.our-success-story-1 img.oddimg { position: absolute; bottom: -22px; right: auto; width: 240px; z-index: 1; left: -30px; } } .our-success-story.our-success-story-1 img { position: absolute; bottom: -22px; right: -30px; width: 240px; z-index: 1; } .our-success-story-1 .successstory-data h3 { color: #000000; font-size: 105px; } .our-success-story-1 .successstory-data p { font-size: 32px; color: #000; font-weight: 500; } .electrical-engg::after { width: 30px; right: 0; left: unset; z-index: 0; } /* .section-title h2 { font-size: 18px; } */ /* .section-title h2:after { right: 0; top: -27px; } */ .chairman-img img{height: 685px; width: 100%; object-fit: cover;} .our-team .our-team-bx img{height: 365px; width: 100%;} .certificate-section img{height: 400px; width: 100%;} .strategic-partner p { height: 140px; } .our-team .our-team-bx img{height: 390px;} .our-product-bx .card .card-content .card-desc { color: rgb(255 255 255); font-size: 14px; line-height: 24px; opacity: 1; font-weight: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 2; -webkit-box-orient: vertical; } .new-customNavbar .dropdown-menu .menu-item { color: #000; } .new-customNavbar .menu-item:hover { color: #e4202d; } .ils-facilities-points .item img{ height: 505px; width: 100%; } @media screen and (max-width : 480px) { .how-we-work .section-title { color: #fff; text-align: center; padding-top: 50px; padding-bottom: 50px; padding: 20px !important; } .how-we-work-detail .Integrated-bx { padding-top: 40px; position: relative; display: flex; padding: 0px 0px 25px 0px!important; } } .how-we-work{min-height: 380px; display: flex; justify-content: center; align-items: center;} .how-we-work .section-title { color: #000; text-align: center; padding: 50px; } .how-we-work-detail .Integrated-bx img { width: 50px; height: 50px; } .how-we-work-detail .Integrated-bx h4 { /* min-height: 20px; */ font-size: 16px; font-weight: 500; padding-left: 16px; margin-top: auto; margin-bottom: auto; align-items: left; text-align: left; text-transform: uppercase; } .how-we-work-detail .Integrated-bx { padding: 40px; position: relative; display: flex; } /* loadr css */ .loader{height:100%;width:100%;position:fixed;margin-top:0;top:0;z-index:9999999} .loader .loader-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border:5px solid #ebebec;border-radius:50%;overflow:hidden} .loader .loader-icon{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden} .loader .loader-icon img{max-width:100%;max-height:100%;width:auto;height:100%;display:block;margin-top:0} .loader.orange-color .loader-container:before{border-color:#ff5421} .loader.yellow-color .loader-container:before{border-color:#f4bf00} .loader.purple-color .loader-container:before{border-color:#4e49a1} .loader.green-color .loader-container:before{border-color:#0c8b51} @keyframes loaderspin { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(360deg)} } @-webkit-keyframes loaderspin { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(360deg)} } @keyframes loaderpulse { 0%{transform:scale(1)} 100%{transform:scale(1.2)} } .bg-img-design::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #003c73ed; transition: .5s ease; z-index: -1; } .product-sec{width:100%;} .product-sec-btn{width:20%} .gallery-img-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); z-index: 1000; height: 100%; width: 690px; } @media (max-width: 768px) { .gallery-img-popup { padding: 10px; top: 50%; left: 50%; right: -40%; height: 80%; width: 370px; } }