*{ padding: 0%; margin: 0%; box-sizing: border-box; } html{ height: auto; } body{ font-family: "Poppins", sans-serif !important; height: auto; } a{ text-decoration: none !important; } h1, h2, h3, h4, h5, h6{ font-family: "Poppins", sans-serif !important; font-weight: 700; } .container{ max-width: 1300px !important; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{ padding-right: 15px; padding-left: 15px; } figure{ margin: 0px !important; padding: 0px !important; display: block !important; } .image-anime{ position: relative; overflow: hidden; &::after{ content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255,255,255,.3); transform: translate(-50%,-50%) rotate(-45deg); z-index: 1; } &:hover{ &::after{ height: 250%; transition: all 600ms linear; background-color: transparent; } } } .reveal{ position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; visibility: inherit; overflow: hidden; img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform-origin: left; transform-origin: left; } } .active_menu{ color: #cc640b !important; position: relative; &::before{ position: absolute; content: ''; width: 100% !important; height: 2px; bottom: 0%; left: 0%; background-color: #cc640b; } } .section_title{ position: relative; z-index: 5; h3{ display: inline-block; position: relative; font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: #222222; padding-left: 26px; margin-bottom: 15px; &::before{ content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: url(../images/setting.png) no-repeat; background-position: left center; background-size: cover; width: 16px; height: 16px; } } h2{ font-size: 50px; font-weight: 700; line-height: 1.2em; letter-spacing: -0.01em; color: #222222; margin-bottom: 0; text-transform: uppercase; cursor: none; strong{ color: #cc640b; font-weight: 700; } } p{ margin-top: 20px; margin-bottom: 0; color: #81848A; font-size: 20px; } } // /* animate-text */ .char { display: inline-block; opacity: 0; transform: translateX(-80px); } /* Animation trigger */ .animate .char { animation: ltrAnimation 0.6s ease forwards; animation-delay: calc(var(--char-index) * 0.02s); } @keyframes ltrAnimation { to { opacity: 1; transform: translateX(0); } } // animate-text End .btn-default { position: relative; display: inline-block; font-size: 16px; font-weight: 600; line-height: 1em; text-transform: capitalize; color: #222; background-color: #cc640b; border-radius: 10px; padding: 2px 40px 2px 2px; border: none; overflow: hidden; transition: all 0.5s ease-in-out; span { position: relative; display: inline-block; font-size: 16px; font-weight: 600; line-height: 1em; background-color: #fff; color: #222; border-radius: 8px; padding: 15px 20px; z-index: 1; transition: all 0.5s ease-in-out; } &::before { content: ''; position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; background: url(../images/arrow-white.svg) no-repeat center; background-size: 20px; transform: translateY(-50%) rotate(0deg); transition: all 0.4s ease-in-out; z-index: 2; } &::after { content: ''; position: absolute; top: 0; right: 0; width: 0%; height: 100%; background: #222; border-radius: 6px; transition: all 0.5s ease-in-out; z-index: 0; } &:hover { &::after { width: 100%; left: 0; right: auto; } &::before { transform: translateY(-50%) rotate(45deg); } span { background-color: #cc640b; color: #FFF; } } } .topbar{ background: #cc640b; padding: 10px; .contact_detail{ display: flex; justify-content: space-between; align-items: center; ul{ list-style: none; padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; li{ font-size: 16px; color: #FFF; a{ color: inherit; i{ margin-right: 5px; transition: all 0.3s ease; } &:hover{ i{ transform: scale(1.1); } } } } } } } .Custome_navbar{ .heder_logo{ width: 250px; } .navbar-nav{ .nav-item{ margin: auto 10px; .nav-link{ position: relative; color: #383435; font-size: 18px; font-weight: 600; text-transform: uppercase; &::before{ position: absolute; content: ''; height: 2px; width: 0%; bottom: 0%; left: 0%; background-color: #cc640b; transition: all 0.3s ease; } } &:hover{ .nav-link{ color: #cc640b; &::before{ width: 100%; } } } } } } .custom-dropdown { position: relative; .dropdown-menu{ position: absolute; top: 100%; left: 0; background: white; list-style: none; padding: 10px 0; border: none; margin: 0; display: none; min-width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); li{ padding: 5px 20px; a{ text-decoration: none; color: #333; display: block; } i{ text-decoration: none; color: #333; display: block; } &:hover{ background: #cc640b; a{ color: #FFF; } i{ color: #FFF; } } } } .divider{ height: 1px; background: #ddd; margin: 5px 0; } } /* Submenu parent */ .submenu { position: relative; } /* Submenu hidden by default */ .submenu .sub-menu { position: absolute; top: 0; left: 100%; background: #fff; min-width: 350px; list-style: none; padding: 10px 0; display: none; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .submenu .sub-menu li a{ color: #333 !important; } .submenu .sub-menu li:hover a{ color: #FFF !important; } .submenu-toggle { cursor: pointer; transition: 0.3s; } .submenu.open .submenu-toggle { transform: rotate(90deg); } /* Desktop hover */ @media (min-width: 768px) { .custom-dropdown:hover .dropdown-menu { display: block; } .submenu:hover .sub-menu { display: block; } } /* Mobile support */ @media (max-width: 767px) { .submenu.open > .sub-menu { display: block; position: relative; left: 0; top: 0; box-shadow: none; } } .main_banner{ position: relative; background-image: url(../images/bhagyalaxmispringworks-banner.png); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; padding: 120px 0px; overflow: hidden; &::before{ position: absolute; content: ''; height: 100%; width: 100%; left: 0%; top: 0%; background: #22222257; } .sedo_box { position: absolute; width: 900px; height: 100%; right: 0%; top: 0%; // filter: brightness(0.5) invert(1); opacity: 0.9; } .container-fluid{ width: 80% !important; .banner_header{ margin-right: 50px; .section_title{ h2, h1{ font-size: 70px; font-weight: 700; line-height: 1.2em; letter-spacing: -0.01em; color: #FFF; margin-bottom: 40px; cursor: none; span{ color: #cc640b; font-weight: 700; } } p{ color: #FFF; font-size: 20px; } .btn-default{ margin-top: 40px; } } } .right_part{ display: flex; align-items: center; justify-content: center; object-fit: cover; img{ // max-width: 500px; object-fit: cover; } } } } .swiper-pagination-bullet-active { background: #cc640b !important; // opacity: #FFF, 1 !important; border: 5px solid #FFF; width: 15px !important; border-radius: 5px !important; } .swiper-pagination-bullet{ background: #FFF !important; opacity: #FFF, 1 !important; } .slider_dot{ position: absolute; padding-top: 50px; bottom: 7%; left: 50%; } .Welcome_sec{ position: relative; padding: 100px 0; .left_part{ ul{ list-style: none; margin: 0; padding: 0; margin-top: 40px; display: flex; align-items: center; gap: 20px; li{ font-size: 16px; margin-left: 30px; position: relative; &::before{ content: ""; position: absolute; background-image: url(../images/setting.png); background-size: contain; /* ya cover */ background-repeat: no-repeat; height: 20px; width: 20px; left: -30px; top: 50%; transform: translateY(-50%); } } } .btn-default{ margin-top: 40px; } } .right_part{ position: relative; height: 100%; .img_1{ position: absolute; width: 90%; border-radius: 30px; right: -20%; top: 0%; overflow: hidden; } .img_2{ position: absolute; width: 90%; border-radius: 30px; left: 0%; bottom: 5%; border: 10px solid #FFF; overflow: hidden; z-index: 2; } .years_box{ position: absolute; z-index: 2; bottom: 0%; right: -5%; background-color: #cc640b; border-radius: 30px; padding: 30px; text-align: center; border: 10px solid #FFF; h3{ color: #FFF; font-size: 70px; font-weight: 700; } p{ color: #FFF; font-size: 18px; font-weight: 600; margin-bottom: 0px; } } } } .Our_Products{ position: relative; padding: 100px 0; background-image: url(../images/product-background.png); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; &::before{ position: absolute; content: ''; height: 100%; width: 100%; top: 0%; background-color: #4442402a; // z-index: 1; } .section_title{ position: relative; text-align: center; margin-bottom: 40px; h3{ color: #FFF; } h2{ color: #FFF; } } .Product_card { position: relative; background: #FFF; border-radius: 10px; overflow: hidden; padding: 25px; margin: 15px 0px; transition: all 0.4s ease; .image_box { background: #cc650b85; border-radius: 10px; overflow: hidden; figure { display: flex; align-items: center; justify-content: center; img { width: 100%; height: 100%; object-fit: cover; object-position: center; /* 🔥 ye important hai */ display: block; transform-origin: center center; transition: transform 0.5s ease; } } } .contain_box { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; h3 { color: #cc640b; font-size: 20px; width: 70%; margin-bottom: 0; transition: 0.3s; } h2 { color: #cc640b; font-size: 22px; font-weight: 700; margin-bottom: 0; transition: 0.3s; } } /* 🔥 HOVER EFFECT */ &:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 40px rgba(0,0,0,0.15); .image_box figure img { transform: scale(1.1); } .contain_box h3, .contain_box h2 { color: #ff7a1a; /* thoda bright hover color */ } } } .btn-default{ margin-top: 40px; } } .Our_Numbers_sec{ position: relative; padding: 100px 0; .section_title_row{ margin-bottom: 60px; .section_title{ p{ margin-left: 40px; } } } .Counter_card{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 20px; .icon_box{ // background-color: #cc640b; // box-shadow: 0px 0px 3px #cc640b; border-bottom: 2px solid #cc640b; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center; border-radius: 20%; padding: 10px; figure{ img{ // filter: brightness(0) invert(1); filter: brightness(0) saturate(100%) invert(39%) sepia(83%) saturate(749%) hue-rotate(1deg) brightness(92%) contrast(92%); } } } h2{ color: #cc640b; font-weight: 700; font-size: 40px; margin-bottom: 15px; } p{ color: #383435; font-size: 16px; font-weight: 600; } &::before{ position: absolute; content: ''; height: 100%; width: 1px; background-color: #cc650b56; top: 0%; right: -6%; } } } .Our_Certificate{ position: relative; padding: 100px 0; // background-color: #db8e4b; background-image: url(../images/certificate-bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; &::before{ position: absolute; content: ''; height: 100%; width: 100%; top: 0%; left: 0%; // background: #2222228a; } .section_title{ text-align: center; margin-bottom: 60px; h2{ color: #FFF; } h3{ color: #FFF; } } .Certification_card{ .img_box{ border-radius: 10px 10px 0px 0px; overflow: hidden; figure{ img{ } } } .content_box{ background: #cc640b; padding: 15px; border-radius: 0px 0px 10px 10px; h3{ color: #FFF; font-size: 20px; font-weight: 700; margin-bottom: 0px; text-align: center; } } } } .Featured_Application{ position: relative; padding: 100px 0; .section_title{ margin-bottom: 60px; p{ margin-left: 60px; } } .row{ display: flex; align-items: stretch; .col-md-3 { display: flex; flex-direction: column; > a { flex: 1; // left single card full height le display: flex; } } } .double_img{ display: flex; flex-direction: column; height: 100%; gap: 30px; a { flex: 1; // dono cards equal height display: flex; } .Featured_card{ position: relative; border-radius: 10px; overflow: hidden; height: 100%; img{ width: 100%; height: 100%; object-fit: cover; } .overlay{ position: absolute; background-color: #cc640b; height: 0%; width: 100%; left: 0%; bottom: 0%; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: all 0.5s ease; h3{ color: #FFF; font-size: 20px; font-weight: 600; text-align: center; } } &:hover{ .overlay{ height: 100%; } } } } .Featured_card{ position: relative; border-radius: 10px; overflow: hidden; .overlay{ position: absolute; background-color: #cc640b; height: 0%; width: 100%; left: 0%; bottom: 0%; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: all 0.5s ease; h3{ color: #FFF; font-size: 20px; font-weight: 600; } } &:hover{ .overlay{ height: 100%; } } } } .Why_Choose_Us{ position: relative; padding: 100px 0; background-image: url(../images/why-choose-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; &::before{ position: absolute; content: ''; height: 100%; width: 100%; top: 0%; left: 0%; background-color: #0000008f; } .left_part{ .section_title{ h3{ color: #FFF; } h2{ color: #FFF; } p{ color: #FFF; } img{ margin-top: 40px; } } } .right_part{ margin-left: 60px; .custome_step_card{ position: relative; padding: 20px; display: flex; align-items: center; gap: 30px; .image_box{ position: relative; background: #cc640b; border-radius: 50%; overflow: hidden; height: 100px; width: 100px; padding: 20px; display: flex; align-items: center; justify-content: center; img{ position: relative; width: 100%; filter: brightness(0) invert(1); } } .contain_box{ width: 75%; h3{ position: relative; color: #cc640b; font-size: 26px; font-weight: 700; margin-bottom: 20px; // text-shadow: 0px 5px 15px #ffffffb7; &::after{ position: absolute; content: ''; width: 100%; height: 1px; bottom: -10px; left: 0%; background: #cc650b93; } } p{ color: #FFF; font-size: 16px; margin-bottom: 0px; } } } } } .global_presence{ position: relative; padding: 100px 0; .section_title{ margin-bottom: 60px; } img{ position: relative; z-index: 5; } } // footer.main-footer { // padding: 0 0 30px; // // background-color: #f9f3ea; // background-image: url(../images/why-choose-bg.jpg); // background-size: cover; // background-position: center; // background-repeat: no-repeat; // position: relative; // z-index: 2; // &::before{ // position: absolute; // content: ''; // height: 100%; // width: 100%; // top: 0%; // left: 0%; // background-color: #fffefe8f; // } // &::after { // content: ""; // position: absolute; // inset: 0; // background: url(../images/footer-bg.png) no-repeat; // opacity: 0.05; // z-index: -1; // } // .footer-contact { // border-bottom: 1px solid #ffffff77; // margin-bottom: 50px; // padding: 60px 0 30px; // position: relative; // .footer-contact-box { // display: flex; // flex-wrap: wrap; // align-items: center; // .contact-icon-box { // width: 70px; // height: 70px; // border-radius: 50%; // display: flex; // align-items: center; // justify-content: center; // background: #cc640b; // margin-right: 15px; // img { // width: 100%; // max-width: 35px; // } // } // .footer-contact-info { // width: calc(100% - 110px); // h3 { // color: #FFF; // font-size: 23px; // font-weight: 700; // line-height: 150%; // } // p { // margin-bottom: 0; // color: #FFF; // font-size: 1rem; // text-align: left; // & + p { // margin-top: 0; // } // } // a { // color: #c02222; // font-weight: 500; // font-size: 16px; // } // } // } // } // .mega-footer { // position: relative; // .footer-about { // figure { // margin-bottom: 30px !important; // background: #FFF; // width: 294px; // border-radius: 10px; // } // iframe { // height: 300px; // } // p { // color: #FFF; // font-size: 1rem; // } // } // .footer-social-links { // ul { // padding: 0; // margin: 10px 0 0; // list-style: none; // li { // display: inline-block; // margin-right: 10px; // a { // color: #cc640b; // } // } // } // } // .footer-links { // padding-left: 20px; // h2 { // color: #FFF; // font-size: 23px; // font-weight: 700; // margin-bottom: 20px; // } // ul { // list-style: none; // padding: 0; // margin: 0; // li { // position: relative; // margin-bottom: 10px; // a { // display: inline-block; // padding-left: 16px; // color: #FFF; // font-size: 1rem; // &::before { // content: ""; // position: absolute; // left: 0; // top: 50%; // width: 6px; // height: 6px; // border-radius: 50%; // background: #cc640b; // transform: translateY(-50%); // } // &:hover { // color: #cc640b; // } // } // } // } // } // } // .footer-copyright { // border-top: 1px solid #ffffffbe; // padding-top: 20px; // margin-top: 20px; // position: relative; // .footer-copyright-text { // text-align: center; // p { // margin-bottom: 0; // color: #FFF; // & + p { // margin-top: 5px; // } // .footer-icon { // vertical-align: middle; // width: 25px; // filter: brightness(0) invert(1); // } // } // a { // color: #fff; // font-size: 1rem; // } // } // } // } // /* Animations (outside footer) */ // .updown-anim { // animation: updownanim 3s infinite alternate; // } // @keyframes updownanim { // 0% { transform: translateY(0); } // 100% { transform: translateY(-20px); } // } // .lr-anim { // animation: lranim 3s infinite alternate; // } // @keyframes lranim { // 0% { transform: translateX(0); } // 100% { transform: translateX(20px); } // } .Map_Sec{ position: relative; overflow: hidden; .mapGrid{ iframe{ width: 100%; height: 500px; } } .footer_top_img{ position: absolute; width: 100%; bottom: 0%; left: 0%; height: 350px; } } .footer_top_image{ position: absolute; bottom: 0%; left: 0%; width: 500px; z-index: 6; img{ width: 100%; } } .main-footer { padding: 0; background-color: #003b84; background-image: url(../images/why-choose-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; position: relative; z-index: 10; &::before{ position: absolute; content: ''; height: 100%; width: 100%; top: 0%; left: 0%; background-color: #0000008f; } } // .main-footer::before { // /* width: 100%; */ // width: calc(100% + 32px); // height: 190px; // content: ""; // /* background: url(../images/home/footer-top.png) no-repeat center top; */ // background: url(../images/foot-bg.png) no-repeat center top; // background-size: cover; // content: ""; // position: absolute; // top: -144px; // right: -32px; // } .footer-box { position: relative; padding: 70px 0 0; z-index: 1; } .Footer_Map{ height: 300px; iframe{ width: 100%; height: 100%; margin-bottom: 0; object-fit: cover; } } .main-footer .footer-logo img { width: 260px; background: #FFF; border-radius: 10px; } .main-footer .footer-header { border-bottom: 1px solid #ffffff30; margin-bottom: 40px; padding-bottom: 25px; } .footer-social-links { display: flex; align-items: center; justify-content: end; gap: 20px; } .footer-social-link-title h3 { font-size: 20px; text-transform: capitalize; color: #fff; } .footer-social-links ul { list-style: none; margin: 0; padding: 0; } .footer-social-links ul li { display: inline-flex; margin-right: 10px; } .footer-social-links ul li:last-child { margin-right: 0; } .footer-social-links ul li a { display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 50%; height: 36px; width: 36px; transition: all 0.3s ease-in-out; } .footer-social-links ul li a i { font-size: 18px; color: #f68a0a; transition: all 0.3s ease-in-out; } .footer-social-links ul li a:hover { background: #f68a0a; } .footer-social-links ul li a:hover i { color: #fff; } .footer-links h3 { font-size: 25px; text-transform: capitalize; color: #fff; margin-bottom: 20px; } .footer-links ul { list-style: none; margin: 0; padding: 0; overflow: hidden; overflow-x: hidden; overflow-y: auto; max-height: 290px; } .product-scroll-wrap { position: relative; } .product-scroll-wrap ul { list-style: none; margin: 0; padding: 0; max-height: 290px; overflow-y: auto; } .scroll-indicator { position: absolute; top: 5px; right: 0%; transform: translateX(-50%); text-align: center; font-size: 11px; color: #fff; opacity: 0.8; pointer-events: none; } .scroll-indicator span { display: block; margin-bottom: 4px; letter-spacing: 1px; } .scroll-indicator i { display: block; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); margin: auto; animation: scrollBounce 1.4s infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0) rotate(-45deg); } 50% { transform: translateY(6px) rotate(-45deg); } } .footer-links ul::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 1px; background-color: transparent; } .footer-links ul::-webkit-scrollbar { width: 3px; background-color: transparent; } .footer-links ul::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: transparent; } .footer-links ul li { position: relative; list-style: outside none none; margin: 0 0 15px 0; padding: 0 0 0 10px; } .footer-links ul li:before { content: "»"; color: #d3d3d3; font-size: 20px; padding-right: 10px; justify-content: center; align-items: center; } .footer-links ul li:hover { color: #f68a0a; } .footer-links ul li a { color: #fff; line-height: 140%; } .footer-links ul li a:hover { color: #f68a0a; } .footer-links ul li i { margin-right: 10px; } .footer-contact-item { display: flex; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ffffff30; } .footer-contact-item:last-child { margin-bottom: 0; border-bottom: 0; } .footer-contact-item .icon-box { display: flex; align-items: center; justify-content: center; border: 1px solid #cc640b; border-radius: 50%; width: 40px; height: 40px; margin-right: 10px; transition: all 0.3s ease-in-out; } .footer-contact-item:hover .icon-box { border-color: #cc640b; } .footer-contact-item .icon-box i { font-size: 16px; color: #cc640b; } .footer-contact-content { width: calc(100% - 50px); } .footer-contact-content p { color: #fff; margin: 0; } .footer-contact-content p+p { margin-top: 10px; } .footer-latest-news .footer-frame iframe { height: 270px; width: 100%; } .footer-copyright { position: relative; border-top: 1px solid #ffffff30; padding: 25px 0; margin-top: 10px; z-index: 1; text-align: center; } .footer-copyright-text p { color: #fff; margin: 0; } .footer-copyright-text p+p { margin-top: 5px; } .footer-copyright .footer-copyright-text .footer-icon { width: 25px; vertical-align: middle; filter: brightness(0) invert(1); }