@font-face { font-family: "Josefin Sans"; src: url(../fonts/JosefinSans-Bold.woff2) format("woff2"), url(../fonts/JosefinSans-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url(../fonts/JosefinSans-SemiBold.woff2) format("woff2"), url(../fonts/JosefinSans-SemiBold.woff) format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url(../fonts/JosefinSans-Medium.woff2) format("woff2"), url(../fonts/JosefinSans-Medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url(../fonts/JosefinSans-Thin.woff2) format("woff2"), url(../fonts/JosefinSans-Thin.woff) format("woff"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url(../fonts/JosefinSans-Light.woff2) format("woff2"), url(../fonts/JosefinSans-Light.woff) format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url(../fonts/JosefinSans-Regular.woff2) format("woff2"), url(../fonts/JosefinSans-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; } :root { --brand-orange: #ef8645; --brand-red: #e94149; --brand-pink: #d93159; --brand-purple: #722858; --brand-dark: #3f276a; --gradient-primary: linear-gradient(to right, #e94149, #ef8645); --gradient-purple: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); --header-bg: rgba(0,0,0,0.55); --header-height: 80px; --text-dark: #222; --text-muted: #555; } body { margin: 0 auto; padding: 0; font-family: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 500; overflow-x: hidden; color: var(--text-dark); line-height: 1.5; } img { max-width: 100%; height: auto; } /* iOS: avoid input zoom-on-focus by ensuring font-size >= 16px on mobile */ @media (max-width: 600px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea { font-size: 16px; } } /* Focus visibility for keyboard navigation (skip mouse clicks) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--brand-pink); outline-offset: 2px; } .btn-default, a, h1, h2, h3, h4, h5, h6, label, li, p, span, textarea, ul { margin: 0; padding: 0; } * { margin: 0; padding: 0; } button { outline: 0 !important; cursor: pointer !important; } a:hover { text-decoration: none; } a:focus { text-decoration: none; } li { list-style: none; } .center { display: block; margin: 0 auto; float: none; } body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background-color: #ef8645; border-radius: 0; } body::-webkit-scrollbar-thumb { background-color: #fff; border-radius: 25px; } .padding-left { padding-left: 0; } .padding-right { padding-right: 0; } .top-bar { padding: 10px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.3s ease; } .top-bar.scrolled { background: rgba(0,0,0,0.85); } /* Fixed header overlays banners (which already have padding-top:80px). For pages with NO banner at top, add .has-no-banner to . */ body.has-no-banner { padding-top: 90px; } .cunstom-nav ul { display: flex; justify-content: space-between; margin-top: 15px; } .cunstom-nav ul { align-items: center; } .top-logo img{ max-height: 60px; } .top-bar .fixedcta img{ max-height:50px; } .cunstom-nav ul li { font-size: 19px; font-weight: 500; position: relative; text-transform: capitalize; line-height: 23px; } .modal-body { background-image: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); padding: 0; } #statusca { margin: 14px 0; } #close { position: absolute; right: -11px; background-image: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); opacity: 1 !important; color: #fff; font-size: 20px; width: 35px; height: 35px; padding: 0; border-radius: 100px; text-align: center; top: -13px; text-shadow: none; } .custom-haeder { padding: 15px 0 10px; background-image: linear-gradient(to right, #89103c, #900f3b, #970f39, #9e1037, #a41134); } .custom-haeder h2 { text-align: center; color: #fff; font-size: 40px; } .custom-haeder h2 span { font-weight: 700; } .modal_custom_from { padding: 30px 20px 20px; } .cunstom-nav ul li a span { display: flex; transition: 0.5s all linear; transform: translateX(81%); font-size: 14px; font-weight: 600; } .cunstom-nav ul li a:hover span { color: #d93159; transition: 0.5s all linear; transform: translateX(0); } .cunstom-nav > ul > li::before { content: ""; width: 0; bottom: -10px; left: 50%; transform: translateX(-50%); height: 3px; background: linear-gradient(90deg, #e94149, #ef8645); border-radius: 3px; position: absolute; transition: width 0.4s ease; } .cunstom-nav > ul > li:hover::before { width: 60%; } .cunstom-nav .sub-menu li::before { display: none; } .cunstom-nav ul li a { color: #fff; } .live-chat-bar ul { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .live-chat-bar ul li { width: 48%; } .live-chat-bar ul li button { width: 100%; padding: 8px 0; font-size: 13px; text-transform: capitalize; border: none; color: #fff; font-weight: 600; } .live-chat-bar ul li:nth-of-type(1) button { background-image: linear-gradient(to right, #e94149, #ef8645); } .live-chat-bar ul li:nth-of-type(2) button { background-image: linear-gradient(to right, #e94149, #ef8645); } .home-banner { min-height: 620px; height: auto; max-height: none; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; padding: 110px 0 70px; position: relative; overflow: hidden; } /* Ensure header row items are vertically centered */ .top-bar .container .row { align-items: center; } .bg-img-html { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .home-banner-text h1 { font-size: 80px; font-weight: 800; color: #fff; line-height: 1; } .bottom-p-text { position: relative; width: 100%; margin: 10px auto 25px; } .bottom-p-text p { color: #fff; font-size: 15px; font-weight: 300; } /* .bottom-p-text:before { content: ""; position: absolute; width: 90%; height: 2px; background: #fff; top: -18px; animation: lifte_and_right 5s linear infinite; } */ .home-banner-text h3 { color: #fff; font-size: 20px; font-weight: 400; letter-spacing: 2px; margin-top: 10px; } .home-banner-text h2 { font-size: 84px; font-weight: 700; color: #ef8645; line-height: 1; margin: 2px 0; } @keyframes lifte_and_right { 0% { transform: translateX(0); } 50% { transform: translateX(30px); } 100% { transform: translateX(0); } } .banner-isquare { position: absolute; top: -40px; right: -90px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .home-banner-text button { width: 230px; padding: 12px; border: none; background-image: linear-gradient(to right, #e94149, #ef8645); font-size: 20px; color: #fff; font-weight: 700; } /* .home-banner:before { content: ""; position: absolute; width: 831px; height: 1133px; right: 0; top: 0; background: url(../images/home-right-pic.png); } */ @keyframes fontbulger { 0% { opacity: 0.5; } 30% { opacity: 0.1; } 100% { opacity: 1; } } .fast-circale { width: 500px; height: 500px; border-radius: 100%; background-image: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); position: absolute; top: -170px; right: 0; display: flex; justify-content: center; align-items: center; animation-name: background_color; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear; opacity: 0.6; } @keyframes background_color { 0% { background-image: linear-gradient(to right top, #e94149, #080104, #ef8645); } 33% { background-image: linear-gradient(to right, #f40000, #ffffff, #e94149); } 66% { background-image: linear-gradient(to bottom, #e94149, #ef8645, #f4005b); } 100% { background-image: linear-gradient(to bottom, #f4005b, #e94149, #ef8645); } } .home-one-pic { position: absolute; right: -30px; top: -190px; animation: pulse 1.5s linear infinite; } .home-two-pic { position: absolute; top: -60px; left: 0; animation: pulse 1.5s linear infinite; } @keyframes pulse { 25% { transform: scale(0.95); } 75% { transform: scale(1); } } .home-three-pic { position: absolute; bottom: -60px; right: 0; left: 30px; margin: 0 auto; display: block; width: 100%; text-align: center; animation: pulse 1.5s linear infinite; } .fast-circale img { animation-name: spin; animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: linear; } .banner-isquare2 { position: absolute; right: 30px; bottom: -80px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .home-logo-section { margin-bottom: 50px; } .home-page-logo { position: absolute; bottom: 40px; left: 0; width: 100%; } .home-page-logo ul { display: flex; justify-content: space-between; align-items: center; } .help-bg { background-image: url(../images/help-bg.jpg); padding: 55px 45px 0; height: 680px; display: flex; align-items: center; position: relative; } .help-bg img { animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .help-done { position: absolute; bottom: -80px; left: 100px; } .help-tab-section h3 { font-size: 36px; color: #071126; font-weight: 400; margin-bottom: 60px; } .home-page-logo ul li { width: 160px; height: 130px; background: #fff; border-radius: 0; display: flex; justify-content: flex-end; align-items: center; padding: 22px; border: 1px solid #8c0f3b; } .tab { overflow: hidden; margin-bottom: 30px; } .portfolio img { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0; border-radius: 16px; width: 100%; margin-bottom: 30px; object-fit: cover; height: 280px; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; cursor: pointer; background: #fff; } .portfolio img:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 50px rgba(233, 65, 73, 0.18), 0 0 0 2px rgba(239, 134, 69, 0.3); border-color: transparent; } .tab button { background-color: inherit; float: left; border: none; outline: 0; cursor: pointer; padding: 0px 0px 0px; transition: 0.3s; font-size: 16px; border-radius: 100px; font-weight: 400; color: #b3b3b3; text-transform: capitalize; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: rgb(205 46 83 / 0.1); color: #d73057; } .tabcontent { display: none; border-top: none; } .topright { float: right; cursor: pointer; font-size: 28px; } .custom-home-tab { padding: 35px 20px; background: #fff; width: 130%; margin-bottom: 80px; box-shadow: 3px 0 24px rgb(17 18 38 / 0.1); } .help-tab-section { position: relative; left: -195px; top: 45px; } .home-page-logo-section p { font-size: 19px; color: #071126; font-weight: 300; line-height: 22px; margin-bottom: 30px; } .home-page-logo-section img { border: 2px solid #f2f3f4; } .help-red button { width: 100%; padding: 10px 0; font-size: 17px; font-weight: 700; background-image: linear-gradient(to right, #8d103b, #950f39, #9d0e37, #a50f34, #ac1130); text-transform: uppercase; border: none; color: #fff; } .help-gren button { width: 100%; padding: 10px 0; font-size: 17px; font-weight: 700; text-transform: uppercase; border: none; background-image: linear-gradient(to right, #a4e2a9, #9de3af, #96e5b5, #8ee6bb, #87e7c2); color: #fff; } .floating { animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .floating-opp { animation-name: floating-opp; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { from { transform: translate(0, 0); } 65% { transform: translate(0, 15px); } to { transform: translate(0, 0); } } @keyframes floating-opp { from { transform: translate(0, 0); } 65% { transform: translate(0, -15px); } to { transform: translate(0, 0); } } .ready-section { background: url(../images/ready-bg.png); height: 730px; background-position: 10%; background-size: cover; display: flex; justify-content: center; align-items: center; position: relative; } .ready-section:before { content: ""; background: url(../images/ready-right-pic.png); width: 681px; left: 0; position: absolute; top: -56px; height: 990px; } .get-circal { width: 300px; height: 300px; background-image: linear-gradient(to right, #a4e2a9, #9de3af, #96e5b5, #8ee6bb, #87e7c2); border-radius: 100%; display: flex; justify-content: center; align-items: center; text-align: center; flex-wrap: wrap; animation: anim 5s infinite; position: relative; } @keyframes anim { 0% { top: 0; background-image: linear-gradient(to right, #a4e2a9, #9de3af, #96e5b5, #8ee6bb, #87e7c2); } 25% { top: 100px; background-image: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); } 50% { top: 100px; background-image: linear-gradient(to bottom, #e0db96, #e3d58b, #e7ce81, #ebc778, #efbf70); } 85% { top: 180px; background-image: linear-gradient(to bottom, #37286d, #672775, #932373, #b92269, #d83059); } 100% { top: 0; color: #fff; background-image: linear-gradient(to right, #a4e2a9, #9de3af, #96e5b5, #8ee6bb, #87e7c2); } } .get-circal h3 { font-size: 48px; font-weight: 700; color: #000; line-height: 60px; } .get-circal h3 span { font-size: 90px; color: #fff; text-shadow: 5px 0 7px rgb(0 0 0 / 0.2); } .boy-pic { position: absolute; bottom: -97px; z-index: -1; left: -90px; animation: lifte_and_right 5s linear infinite; } .readyto-text h3 { font-size: 69px; color: #5cc69d; font-weight: 700; line-height: 70px; } .readyto-text h3 span { color: #000; } .ready-chats ul { display: flex; justify-content: space-between; margin-top: 50px; } .ready-chats ul li { display: flex; align-items: center; animation: pulse 1.5s linear infinite; } .ready-icon i { font-size: 22px; color: #5cc69d; padding-right: 12px; } .ready-chats ul li h4 { font-size: 22px; font-weight: 700; } .ready-img ul li { margin-bottom: 50px; } .ready-img ul li:nth-child(3) { margin-bottom: 0; } .we-help-organizations-section { margin-bottom: 70px; } .pkg-section { padding: 0 0 90px; } .fast-pkg-text { text-align: center; margin-bottom: 60px; position: relative; } .fast-pkg-text h2 { color: #071126; font-size: 45px; font-weight: 400; } .fast-pkg-text h3 { color: #071126; font-size: 45px; font-weight: 400; margin-bottom: 15px; } .fast-pkg-text h3 span { color: #d12f58; font-weight: 700; } .fast-pkg-text p { font-weight: 300; color: #071126; font-size: 25px; position: relative; } .fast-pkg-text p:before { content: ""; position: absolute; background: #071126; width: 412px; height: 2px; } .fast-pkg-text p:before { content: ""; position: absolute; background: #071126; width: 412px; height: 2px; bottom: -30px; left: 0; right: 0; margin: 0 auto; animation: lifte_and_right 5s linear infinite; } .pkg-tab .nav.nav-tabs { border-bottom: none; } .pkg-tab .nav.nav-tabs a { font-size: 16px; color: #c9cbcf; font-weight: 700; display: flex; justify-content: center; align-items: center; transition: all 0.35s; text-align: center; margin: 0 auto; text-transform: uppercase; border-bottom: 4px solid transparent; } .pkg-tab .nav.nav-tabs a.active { background: 0 0; color: #87e7c2; border: none; border-bottom: 4px solid #87e7c2; } .pkg-tab .nav-tabs .nav-link:focus, .pkg-tab .nav-tabs .nav-link:hover { border: none; } .pkg_box { padding: 0 0 20px; background-color: #fff; box-shadow: 5px 0 32px rgb(33 88 67 / 20%); position: relative; flex-wrap: wrap; flex-direction: column; justify-content: space-between; } .pkg-circal { position: absolute; right: -150px; top: 20px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .fast-pric-section ul { display: flex; justify-content: space-between; align-items: center; } .red-price-img { background-image: url(../images/price-cat-bg.png); height: 142px; width: 200px; display: flex; justify-content: center; align-items: center; position: absolute; left: -30px; top: 17px; flex-wrap: wrap; background-size: cover; padding: 20px 0 0; } .red-price-img h2 { font-size: 60px; text-align: center; color: #fff; font-weight: 700; width: 100%; display: grid; line-height: 45px; animation: pulse 1.5s linear infinite; } .red-price-img h2 span { font-size: 20px; font-weight: 400; text-decoration: line-through; } .fast-pric-section ul li h4 { font-size: 35px; color: #8f103a; font-weight: 700; } .pkg_box ul li h5 { font-size: 22px; color: #0c0c0e; font-weight: 300; } .deteals ul { margin: 10px 0 10px; } .deteals ul li:before { content: ""; background: url(../images/pkg-check.png); position: absolute; left: 0; width: 13px; height: 13px; color: #0331e4; } .deteals ul li { position: relative; padding-left: 20px; display: flex; align-items: center; font-size: 13px; color: #0c0c0e; line-height: 27px; font-weight: 400; text-transform: capitalize; } .pkg_box h6 { text-align: center; font-size: 19px; color: #8a103c; font-weight: 700; } .pkg_box button { font-weight: 700; width: 190px; padding: 12px 0; color: #fff; border: none; font-size: 16px; background-image: linear-gradient(to right, #e94149, #ef8645); display: block; margin: 20px auto 15px; text-transform: capitalize; } .pkg-caht-iocn ul { display: flex; justify-content: center; align-items: x; } .pkg-caht-iocn ul li i { font-size: 35px; color: #bbbdc1; padding: 0 20px 0; } .below-price-img { background-image: url(../images/price-cat-bg_2.png); height: 142px; width: 200px; display: flex; justify-content: center; align-items: center; position: absolute; left: -25px; top: 17px; flex-wrap: wrap; padding: 20px 0 0; background-size: cover; } .below-price-img h2 { font-size: 60px; text-align: center; color: #fff; font-weight: 700; width: 100%; display: grid; line-height: 45px; animation: pulse 1.5s linear infinite; } .below-price-img h2 span { font-size: 20px; font-weight: 400; text-decoration: line-through; } .yaloow-price-img { background-image: url(../images/price-cat-bg_3.png); height: 142px; width: 200px; display: flex; justify-content: center; align-items: center; position: absolute; left: -25px; top: 17px; flex-wrap: wrap; padding: 20px 0 0; background-size: cover; } .yaloow-price-img h2 { font-size: 60px; text-align: center; color: #fff; font-weight: 700; width: 100%; display: grid; line-height: 45px; animation: pulse 1.5s linear infinite; } .yaloow-price-img h2 span { font-size: 20px; font-weight: 400; text-decoration: line-through; } .perfect-text h3 { font-size: 34px; color: #071126; font-weight: 600; line-height: 40px; margin-bottom: 30px; } .perfect-text h4 { font-size: 26px; color: #071126; font-weight: 300; margin-bottom: 40px; } .perfect-text h4 span { color: #d12f58; font-weight: 700; } .perfect-text h5 { font-size: 20px; color: #071126; font-weight: 300; margin-bottom: 40px; } .perfect-text h6 { font-size: 20px; color: #071126; font-weight: 300; } .perfect-text h6 span { color: #4fbf94; font-weight: 700; } .perfect-text button { width: 230px; padding: 14px 0; border: none; font-size: 20px; font-weight: 700; color: #fff; margin: 70px 0 30px; background-image: linear-gradient(to right, #89103c, #900f3b, #970f39, #9e1037, #a41134); text-transform: uppercase; } .perfect-text ul { display: flex; } .perfect-text ul li i { font-size: 30px; color: #bbbdc1; padding: 0 15px; } .perfect-bg { background: url(../images/startup_bg.png); height: 100%; width: 100%; background-size: cover; background-position: 100% 0; position: relative; } .startup-dote { position: absolute; left: 50px; top: 0; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; z-index: -1; } .startup-bg-sircal { width: 250px; height: 250px; background-image: linear-gradient(to bottom, #fda83b, #fe9a38, #fe8c37, #fe7d38, #fd6e3b); border-radius: 100%; right: -15px; position: absolute; animation-name: background_color_two; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear; top: -80px; display: flex; justify-content: center; align-items: center; padding: 40px 0 0; } @keyframes background_color_two { 0% { background-image: linear-gradient(to bottom, #fda83b, #fe9a38, #fe8c37, #fe7d38, #fd6e3b); } 33% { background-image: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); } 66% { background-image: linear-gradient(to bottom, #8ddcb7, #97e2c0, #a1e9c9, #abefd1, #b5f5da); } 100% { background-image: linear-gradient(to bottom, #37286d, #672775, #932373, #b92269, #d83059); } } .startup-bg-sircal h3 { font-size: 80px; color: #fff; font-weight: 700; line-height: 50px; } .startup-bg-sircal h3 span { display: block; width: 100%; font-size: 26px; text-align: center; font-weight: 400; text-decoration: line-through; } .girld { position: absolute; left: -40px; bottom: 80px; animation: lifte_and_right 5s linear infinite; z-index: 9; } .bottom-box ul li { width: 50%; padding: 25px 20px; } .bottom-box ul li:nth-child(1) { background-image: linear-gradient(to left, #04def5, #00deec, #00dfe3, #0bded8, #25decd); text-align: left; } .perfect_box-one h3 { font-size: 16px; text-transform: uppercase; font-weight: 700; margin: 15px 0; color: #fff; } .perfect_box-one h3 span { display: block; } .perfect_box-one p { font-size: 16px; color: #fff; font-weight: 300; } .bottom-box ul li:nth-child(2) { background-color: #fff; box-shadow: 3px 0 24px rgb(0 0 0 / 0.1); } .bottom-box ul { display: flex; } .bottom-box { position: absolute; left: 0; bottom: -413px; } .perfect_two_box h3 { font-size: 16px; color: #071126; text-align: left; font-weight: 700; margin: 15px 0; } .perfect_two_box p { text-align: left; font-size: 15px; color: #071126; font-weight: 300; } .perfect-section { margin: 0 0 390px; } .power-section { background: url(../images/power-banner.png); background-size: 100% 100%; height: 530px; display: flex; justify-content: center; align-items: center; position: relative; } .power-fast-text h2 { font-size: 26px; font-weight: 700; color: #071126; } .power-fast-text h3 { font-size: 30px; color: #ef8645; font-weight: 700; padding-left: 95px; } .mony-bak img { animation: lifte_and_right 5s linear infinite; } .mony-back-box { background-color: #fff; box-shadow: 3px 0 24px rgb(0 0 0 / 0.1); padding: 25px 20px; margin: -190px 0; } .mony-back-box p { font-size: 13px; font-weight: 500; color: #071126; line-height: 26px; text-align: center; } .mony-back-iocn ul { display: flex; justify-content: space-between; } .mony-back-iocn ul li { width: 20%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: column; } .mony-back-iocn ul li h5 { font-size: 13px; color: #0c0c0e; font-weight: 300; text-align: center; } .mony-back-iocn ul li img { display: block; margin: 0 auto 25px; } .mony-back-iocn ul li h5 span { display: block; } .power-isqure { position: absolute; top: -50px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .logo-masion-section { padding: 120px 0 32px; position: relative; } .logo-mintion-text h2 { text-align: center; font-size: 25px; font-weight: 300; color: #071126; margin-bottom: 20px; } .logo-mintion-text h3 { text-align: center; font-size: 40px; font-weight: 400; color: #071126; line-height: 40px; } .logo-mintion-text h3 span { display: block; } .logo-mintion-text h3 strong { color: #ef8645; } .logo-mintion-text { margin-bottom: 100px; } .testimonial-section { position: relative; margin-top: 190px; } .testimonial-cical { width: 450px; height: 450px; background-image: linear-gradient(to right, #e94149, #ef8645); border-radius: 100%; animation-name: background_color_three; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear; position: relative; } @keyframes background_color_three { 0% { background-image: linear-gradient(to right, #e94149, #ef8645); } /* 33% { background-image: linear-gradient(to bottom, #fda83b, #fe9a38, #fe8c37, #fe7d38, #fd6e3b); } */ 66% { background-image: linear-gradient(to right top, #ef8645); } 100% { background-image: linear-gradient(to bottom, #e94149); } } .testimonial-cical h4 { position: absolute; top: 80px; left: 70px; width: 280px; color: #fff; font-size: 22px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); z-index: 2; } .testimonial-cical h4 span { color: #fff8e7; font-weight: 700; } .logomin_isquare { position: absolute; top: 230px; left: 60px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .one-three-de img { max-width: 190px; } .fast-arows { position: absolute; top: 150px; right: 10px; } .two-three-de img { max-width: 190px; margin: 120px 20px 0; } .one-three-de h3 { font-size: 25px; margin-top: 30px; color: #071126; } .one-three-de h3 span { color: #ef8645; font-weight: 700; } .two-three-de h3 { font-size: 25px; margin-top: 30px; color: #071126; text-align: center; } .two-three-de h3 span { color: #ef8645; font-weight: 700; } .two-arows { position: absolute; top: 135px; right: -50px; } .three-three-de img { width: 190px; display: block; margin: 0 auto; } .three-three-de h3 { font-size: 25px; margin-top: 20px; color: #071126; text-align: center; } .three-three-de h3 span { color: #ef8645; font-weight: 700; } .four-three-de img { width: 190px; display: block; margin: 150px auto 0; } .four-three-de h3 { font-size: 25px; margin-top: 20px; color: #071126; text-align: center; } .four-three-de h3 span { color: #ef8645; font-weight: 700; } .fast-arows img, .three-arows img, .two-arows img { max-width: 115px; animation: lifte_and_right 5s linear infinite; } .three-arows { position: absolute; top: 121px; right: -42px; } .get-stared-section { background: url(../images/get-started.png); height: 750px; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center; position: relative; margin: 80px 0 0; } .get-text h3 { font-size: 35px; color: #fff; font-weight: 600; margin-bottom: 15px; } .get-text h3 span { display: block; color: #d12f58; } .caounter_div h2 { color: #fff; font-size: 60px; font-weight: 700; } .caounter_div p { color: #fff; font-size: 20px; font-weight: 300; } .caounter_div { line-height: 2px; } .mr-bottom { margin-bottom: 40px; } .get-started-now img { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; display: block; animation: lifte_and_right 5s linear infinite; } .get-order-logo h3 { font-size: 35px; color: #fff; font-weight: 300; } .get-order-logo ul { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; } .get-order-logo ul li img { animation: pulse 1.5s linear infinite; } .tast--isquare img { position: absolute; left: 190px; right: 0; margin: 0 auto; top: -160px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .test_box { background-color: #fff; padding: 10px 40px 15px; box-shadow: 3px 0 24px rgb(0 0 0 / 0.1); } .test_box p { font-size: 17px; color: #0c0c0e; font-weight: 300; margin-bottom: 15px; } .testimonial-slider { margin-top: 210px; position: relative; left: -35px; } .test_box h4 { font-size: 16px; color: #d93b25; font-weight: 400; } .test_box img { width: 70px !important; height: 70px !important; border-radius: 100px; display: block; margin: 0 auto 10px; } .two-isqure { position: absolute; right: -120px; top: 30px; } .testimonial-slider .owl-carousel .owl-nav.disabled { display: block; margin: 0 auto; float: none; text-align: center; margin-top: 30px; } .footer-logo-section { margin: 120px 0 20px; } .footer-logo-section ul { display: flex; justify-content: space-between; align-items: center; } .footer { background: linear-gradient(180deg, #1a0d0a 0%, #2a1810 50%, #1a0d0a 100%); padding: 70px 0 50px; height: auto; background-position: center; background-size: cover; display: block; position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, #e94149 25%, #ef8645 75%, transparent 100%); } .foooter-fast-line-link ul { margin: 24px 0 32px; } .foooter-fast-line-link ul li { font-size: 15px; font-weight: 400; line-height: 2; } .foooter-fast-line-link ul li a { color: rgba(255, 255, 255, 0.75); transition: color 0.3s ease, padding-left 0.3s ease; } .foooter-fast-line-link ul li a:hover { color: #ef8645; padding-left: 6px; } .foooter-fast-line a img { max-width: 200px; margin-bottom: 8px; } .ssl_logo { margin-top: 20px; } .ssl_logo ul { display: flex; justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; } .ssl_logo ul li img { max-width: 60px; height: auto; filter: brightness(0.95); transition: filter 0.3s ease; } .ssl_logo ul li:hover img { filter: brightness(1.1); } .footer-form h3 { font-size: 32px; color: #fff; font-weight: 700; text-transform: uppercase; margin-bottom: 24px; letter-spacing: 0.5px; } .footer-form h3 span { display: block; font-size: 14px; color: #ef8645; font-weight: 600; letter-spacing: 3px; margin-top: 6px; } .footer-form input { width: 100%; padding: 10px 20px; background: 0 0; border: none; border-bottom: 1px solid #fff; margin-bottom: 5px; color: #fff; font-size: 18px; font-weight: 300; } .footer-form input::placeholder { color: #fff; } .footer-form button, .footer-form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 200px; height: 52px; padding: 0 32px; font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; border: none; border-radius: 50px; margin-top: 30px; cursor: pointer; box-shadow: 0 8px 24px rgba(233, 65, 73, 0.35); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .footer-form button:hover, .footer-form input[type="submit"]:hover { transform: translateY(-3px); background: linear-gradient(135deg, #d93159 0%, #ef8645 100%); box-shadow: 0 14px 36px rgba(239, 134, 69, 0.5); color: #fff; } .footer-form button:active, .footer-form input[type="submit"]:active { transform: translateY(-1px); } /* ---------- Form status messages (success / error) ---------- */ .form-status { margin-top: 18px; padding: 14px 18px; border-radius: 12px; font-size: 13px; line-height: 1.5; font-weight: 500; word-wrap: break-word; overflow-wrap: break-word; animation: formStatusIn 0.4s ease; display: flex; align-items: flex-start; gap: 10px; } .form-status::before { flex-shrink: 0; font-size: 16px; line-height: 1.4; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .form-status-error { background: rgba(220, 38, 38, 0.12); color: #fecaca; border: 1px solid rgba(220, 38, 38, 0.35); } .form-status-error::before { content: "!"; background: #dc2626; color: #fff; } .form-status-success { background: rgba(34, 197, 94, 0.12); color: #bbf7d0; border: 1px solid rgba(34, 197, 94, 0.35); } .form-status-success::before { content: "✓"; background: #22c55e; color: #fff; } @keyframes formStatusIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Inline field errors (used by JS validation) */ .footer-form-error, .form-ready-error, .logo-name-error, .activate-form { font-size: 12px; color: #ef8645; margin-top: -8px; margin-bottom: 8px; min-height: 14px; line-height: 1.3; word-wrap: break-word; } /* Highlight invalid fields */ .footer-form input.invalid, .footer-form textarea.invalid, .from-filde input.invalid, .from-filde textarea.invalid, .from-filde-pop input.invalid, .from-filde-pop textarea.invalid { border-color: #dc2626 !important; background-color: rgba(220, 38, 38, 0.04); } .download_bg-text { background: linear-gradient(135deg, rgba(233,65,73,0.18), rgba(239,134,69,0.12)); border: 1px solid rgba(239, 134, 69, 0.25); padding: 60px 24px 28px; border-radius: 18px; position: relative; margin-bottom: 32px; text-align: center; } .download_bg-text img { position: absolute; top: -45px; left: 0; right: 0; margin: 0 auto; width: 70px; height: auto; } .download_bg-text h2 { text-align: center; font-size: 14px; text-transform: uppercase; color: #fff; font-weight: 700; letter-spacing: 2px; margin-bottom: 18px; } .download_bg input { padding: 6px 15px; font-size: 14px; font-weight: 300; color: #717478; border: none; width: 75%; } .download_bg { display: flex; } .download_bg button { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 46px; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; border: none; padding: 0 24px; background: #fff; color: #9e3051; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; } .download_bg button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; box-shadow: 0 12px 30px rgba(233, 65, 73, 0.4); } .footer-chat ul li { display: flex; align-items: flex-start; gap: 14px; line-height: 1.5; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-chat ul li:last-child { border-bottom: none; } .footer-chat ul li h4 { font-size: 14px; color: #fff; font-weight: 500; margin: 0; line-height: 1.5; } .ready-icon { width: 38px; height: 38px; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(233, 65, 73, 0.3); } .ready-icon i {color: #fff;font-size: 15px;padding: 0px;} .col-center { width: 100%; display: block; margin: 0 auto; } .pymint h4 { font-size: 12px; color: rgba(255, 255, 255, 0.65); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; } .pymint { margin: 28px 0; display: block; } .pymint ul { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .pymint ul li { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 4px; } .pymint ul li img { max-height: 22px; width: auto; } .social_icon ul { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .social_icon ul li { transition: transform 0.3s ease; } .social_icon ul li:hover { transform: translateY(-4px); } .social_icon ul li img { max-width: 38px; height: auto; } .copy-right { padding: 18px 0; background: #0d0604; border-top: 1px solid rgba(255, 255, 255, 0.06); } .copy-right ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 0; } .copy-right ul li { padding: 0 18px; position: relative; } .copy-right ul li a { color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 400; transition: color 0.3s ease; } .copy-right ul li a:hover { color: #ef8645; } .copy-right ul li p { color: rgba(255, 255, 255, 0.7); font-size: 14px; margin-bottom: 0; font-weight: 400; } .copy-right ul li p a { color: #ef8645; font-weight: 500; } .copy-right ul li:before { content: ""; position: absolute; width: 1px; height: 14px; background: rgba(255, 255, 255, 0.15); right: 0; top: 50%; transform: translateY(-50%); } .copy-right ul li:last-child:before, .copy-right ul li:nth-child(3):before { content: none; } @media (max-width: 768px) { .copy-right ul { flex-direction: column; gap: 6px; } .copy-right ul li:before { display: none; } .copy-right ul li { padding: 0; } } .disply-none { display: none; } .home-banner-text h2 span { font-weight: 700; } .index-laptop img { max-width: inherit; position: absolute; left: -70px; top: -80px; } .index-tablit img { top: -160px; position: absolute; right: -80px; animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .design--fast-tet ul li { font-size: 30px; font-weight: 300; color: #071126; padding: 0 15px 0; position: relative; } .design--fast-tet ul { display: flex; justify-content: center; margin-bottom: 20px; } .design--fast-tet ul li:before { width: 6px; height: 6px; content: ""; position: absolute; background-color: #000; right: 0; border-radius: 100px; top: 40%; transform: translate(50%, 50%); } .design--fast-tet ul li:nth-child(3):before { content: none; } .design--fast-tet h3 { text-align: center; font-size: 45px; color: #071126; font-weight: 400; } .design--fast-tet h3 span { color: #d12f58; font-weight: 700; } .design--fast-tet { margin-bottom: 100px; } .link-iocn ul li img { margin: 0 auto 30px; display: block; } .link-iocn ul li p { font-size: 30px; color: #000; font-weight: 300; text-align: center; } .link-iocn ul { display: flex; justify-content: space-between; align-items: center; } .index-design-section { padding: 0 0 150px; } .index-contact-banner { background: url(../images/index_contact_banner.png); height: 622px; background-position: 100% 100%; background-size: cover; position: relative; display: flex; justify-content: center; align-items: center; margin-top: 60px; } .circul-contact { width: 90px; height: 90px; background-color: #000; right: 50px; top: 30px; border-radius: 100%; background-image: linear-gradient(to right top, #e94149, #ef8645); position: absolute; animation-name: background_color; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear; } .contact-fast-mobile img { position: absolute; bottom: -205px; left: 0; z-index: 2; animation: lifte_and_right 5s linear infinite; } .index-contact-text h3 { font-size: 31px; color: #fff; text-transform: uppercase; font-weight: 700; } .contact-two-mobile img { position: absolute; bottom: -177px; right: 0; z-index: 1; } .index-contact-text-circual img { position: absolute; top: -80px; bottom: 0; left: 0; right: 0; margin: 0 auto; display: block; text-align: center; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .index-contact-text { position: relative; } .index-contact-text p { font-size: 10px; color: #fff; font-weight: 300; } .abtect-bg { padding: 40px 30px; background-color: #fff; display: block; margin-bottom: 40px; z-index: 9; box-shadow: 3px 0 24px rgb(17 18 38 / 0.1); width: 46%; position: absolute; right: 70px; top: -183px; } .abtect-section { position: relative; margin: 0 0 110px; } .android-icon ul { display: flex; justify-content: space-between; align-items: center; } .android-icon ul li h3 { font-size: 30px; color: #d12f58; font-weight: 700; } .android-icon ul li h4 { font-size: 19px; color: #071126; font-weight: 400; } .android-icon ul li img { display: block; margin: 0 auto; } .android-icon ul li p { text-align: center; font-size: 15px; color: #262b32; text-transform: capitalize; } .slide-isqure img { position: absolute; left: -40px; } .logomines_isquare_2 img { position: absolute; right: 60px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .portfolio { padding: 50px 0 60px; text-align: center; background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); position: relative; } .portfolio-text { max-width: 880px; margin: 0 auto 40px; position: relative; } .portfolio-text::before { content: "OUR PORTFOLIO"; display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 4px; color: #ef8645; padding: 8px 18px; background: linear-gradient(135deg, rgba(233,65,73,0.08), rgba(239,134,69,0.08)); border-radius: 30px; margin-bottom: 20px; border: 1px solid rgba(239, 134, 69, 0.25); } .portfolio-text h2 { font-size: 44px; color: #1a1a2e; font-weight: 800; line-height: 1.15; letter-spacing: -1px; margin-bottom: 14px; } .portfolio-text h3 { font-size: 22px; color: #555; font-weight: 400; margin-bottom: 24px; line-height: 1.45; position: relative; } .portfolio-text h3::after { content: ""; display: block; width: 70px; height: 4px; margin: 24px auto 0; background: linear-gradient(90deg, #e94149, #ef8645); border-radius: 4px; } .portfolio-text h3 span { color: transparent; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); -webkit-background-clip: text; background-clip: text; font-weight: 700; } .portfolio-text p { font-size: 16px; color: #5a5a6e; font-weight: 400; line-height: 1.75; max-width: 780px; margin: 0 auto 16px; } .portfolio-text p:last-child { margin-bottom: 0; } @media (max-width: 991px) { .portfolio-text h2 { font-size: 34px; } .portfolio-text h3 { font-size: 18px; } .portfolio-text p { font-size: 15px; } } @media (max-width: 600px) { .portfolio { padding: 60px 0 70px; } .portfolio-text h2 { font-size: 26px; } .portfolio-text h3 { font-size: 16px; margin-bottom: 22px; } .portfolio-text::before { font-size: 11px; letter-spacing: 3px; padding: 6px 14px; } } #tile-1 .tab-pane { padding: 15px; height: 80px; } #tile-1 .nav-tabs { position: relative; border: none !important; background-color: transparent; } #tile-1 .nav-tabs li { margin: 0 !important; } #tile-1 .nav-tabs li a { position: relative; margin-right: 0 !important; padding: 12px 5px !important; font-size: 15px; border: none !important; color: #0c0c0e; font-weight: 400; } #tile-1 .nav-tabs a:hover { background-color: #fff !important; border: none; } #tile-1 .slider { display: inline-block; width: 30px; height: 4px; border-radius: 3px; background-color: #a31135; position: absolute; z-index: 1200; bottom: 0; transition: all 0.4s linear; } #tile-1 .nav-tabs .active { background-color: transparent !important; border: none !important; color: #991039 !important; } .portfolio .tab-content { margin-top: 50px; } .inner .portfolio .tab-content img { margin-bottom: 20px; width: 100%; height: 94%; } .pkg_img img { position: absolute; right: -60px; max-width: inherit; } .phone_img img { position: absolute; right: 0; top: -60px; } .contant-section { padding: 50px 0; position: relative; } .contant-section h3 { font-size: 34px; font-weight: 700; width: 100%; text-transform: uppercase; color: #392572; margin-bottom: 10px; } .contant-section p { color: #545252; font-size: 19px; font-weight: 400; } .right-number h2:before { content: ""; width: 25px; height: 2px; position: absolute; background: #db0b5f; bottom: -5px; } .right-number h2 { font-size: 21px; color: #8b103c; font-weight: 600; position: relative; margin-bottom: 14px; } .right-number p { font-size: 15px; font-weight: 400; margin-bottom: 10px } .right-number p a { color: #000; } .to-70 { margin-top: 80px; } .from-filde input { width: 100%; padding: 12px; background: #ebeaec; border: 1px dashed #e1095d; font-size: 16px; color: #000; margin-bottom: 20px; } .from-filde input::placeholder { color: #000; } .from-filde textarea::placeholder { color: #000; } .from-filde textarea { width: 100%; padding: 12px; background: #ebeaec; border: 1px dashed #e1095d; font-size: 16px; color: #000; margin-bottom: 20px; resize: none; height: 170px; } .from-filde button { width: 200px; padding: 12px 0; border: none; background-image: linear-gradient(to right, #89103c, #900f3b, #970f39, #9e1037, #a41134); color: #fff; font-weight: 700; text-transform: uppercase; font-size: 20px; } .contact-circul img { position: absolute; right: 100px; top: 190px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .contact-circul-2 img { position: absolute; left: 50px; top: 0; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .servie-laptop img { position: absolute; top: -80px; left: 0; right: 0; margin: 0 auto; } .image-column { position: absolute; left: 0; top: 50%; } .bg-pos-l { background-position: left; } .bg-contain { background-size: contain; } .service_fast-section { margin: 0 0 0; position: relative; } .service-circul img { position: absolute; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .servce-circal-2 img { position: absolute; bottom: 0; left: 70px; animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .service-text h3 { font-size: 30px; text-transform: uppercase; margin-bottom: 15px; font-weight: 700; } .service-text p { font-size: 14px; line-height: 25px; color: #000; margin-bottom: 20px; font-weight: 400; text-align: justify; } .service-text { margin-top: 101px; } .service-box-border { width: 100px; height: 100px; border-radius: 100px; background-image: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); position: absolute; right: 30px; top: 30px; z-index: -1; } .about-text { margin: 110px 0 0; } .about-text h2 { font-size: 40px; margin-bottom: 40px; text-transform: capitalize; font-weight: 700; color: #91103a; } .about-text h3 { font-size: 28px; font-weight: 600; margin-bottom: 5px; color: #000; } .about-text p { line-height: 28px; font-size: 18px; font-weight: 300; color: #000; margin-bottom: 50px; } .about-img-col { position: relative; } .about-img-col:before { position: absolute; content: ""; background-image: url(../images/about-right-pic.png); background-repeat: no-repeat; width: 100%; height: 100%; z-index: -1; top: 0; } .about-img-col-inner img { margin-top: 90px; } .studay-section-updat { background: url(../images/exceptional-banner.jpg); padding: 90px 0; background-size: cover; background-position: center; background-attachment: fixed; margin-top: 150px; } .client-bar ul li .clients-pic img { padding-right: 15px; } .client-bar ul li .clients-text h3 { font-size: 25px; color: #f8bc54; font-weight: 700; } .client-bar ul li .clients-text p { font-size: 15px; color: #fff; } .client-bar ul li { display: flex; align-items: center; } .md-none { display: none; } .cunstom-nav ul li .sub-menu { position: absolute; background-image: linear-gradient(to right, #e94149, #ef8645); top: 20px; left: 0; width: 170px; display: block; opacity: 0; visibility: hidden; transform: translateY(-40px); transition: all 0.35s; z-index: 99; padding: 15px 10px; border-radius: 0 10px; } .cunstom-nav ul li:hover .sub-menu { transform: translateY(-4px); opacity: 1; visibility: visible; } .sub-menu li { line-height: 35px !important; } .textsection { padding-top: 10%; padding: 58px 0; } .orderf { padding-bottom: 5%; } .privacyterm-banner { background: url(../images/sercive-project-bg.png); height: 200px; width: 100%; background-position: center; background-size: cover; background-attachment: fixed; } .textsection h4 { font-size: 35px; color: #d93159; font-weight: 600; margin-bottom: 20px; } .textsection p { font-size: 18px; color: #5a5959; line-height: 33px; margin-bottom: 10px; } .ready-chats h4 button { border: none; background: 0 0; } .deteals ul { overflow: auto; } .deteals ul::-webkit-scrollbar { width: 8px; } .deteals ul::-webkit-scrollbar-track { background: #fcc312; border-radius: 0; } .deteals ul::-webkit-scrollbar-thumb { background-color: #2897f0; border-radius: 25px; } .deteals ul h4 { text-align: left; padding: 15px 0 0; font-size: 16px; font-weight: 700; } #status { color: #fff; } #button121 { width: 100px; height: 100px; position: fixed; bottom: 0; left: 20px; right: 0; z-index: 1; padding-top: 25px; } #abouta1 { margin-top: 11%; left: 94% !important; } .bluephone { height: 50px; width: 50px; } /* ===== Ready to Start Modal — modernized ===== */ .custom-modal .modal-dialog { max-width: 580px; } .custom-modal .modal-content { background: #fff; border: none; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); } .custom-modal .modal-header { padding: 40px 30px 50px; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); display: block; border-bottom: none; position: relative; text-align: center; margin-bottom: -20px; border-radius: 0 0 50% 50% / 0 0 30px 30px; } .custom-modal .modal-header h5 { width: 100%; text-align: center; font-size: 28px; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 6px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .modal-header p { text-align: center; color: rgba(255, 255, 255, 0.92); font-size: 15px; font-weight: 400; letter-spacing: 0.5px; margin: 0; } .custom-modal .modal-body { padding: 36px 30px 30px; background: #fff; } .custom-modal .modal-header .close { position: absolute; right: 16px; top: 16px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 1 !important; color: #fff; font-size: 22px; width: 36px; height: 36px; padding: 0; border-radius: 50%; text-align: center; text-shadow: none; border: 1px solid rgba(255, 255, 255, 0.4); transition: transform 0.3s ease, background 0.3s ease; line-height: 1; } .custom-modal .modal-header .close:hover { background: rgba(255, 255, 255, 0.95); color: #e94149; transform: rotate(90deg); } .custom-modal .modal-body input, .custom-modal .modal-body textarea { width: 100%; padding: 12px 16px; margin-bottom: 4px; font-size: 14px; color: #1a1a2e; background: #fafafa; border: 1px solid #e5e7eb !important; border-radius: 10px; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; box-shadow: none !important; } /* Suppress native :invalid red border/glow on required empty fields */ .custom-modal .modal-body input:invalid:not(.invalid), .custom-modal .modal-body textarea:invalid:not(.invalid) { border-color: #e5e7eb !important; box-shadow: none !important; } .custom-modal .modal-body input::placeholder, .custom-modal .modal-body textarea::placeholder { color: #9ca3af; } .custom-modal .modal-body input:focus, .custom-modal .modal-body textarea:focus { background: #fff; border-color: #ef8645; box-shadow: 0 0 0 3px rgba(239, 134, 69, 0.15); outline: none; } .custom-modal .modal-body textarea { height: 110px; resize: vertical; min-height: 90px; } .custom-modal .modal-body .from-filde { margin-bottom: 14px; } .custom-modal .modal-body .submit-wrap { text-align: center; margin-top: 10px; } .custom-modal .modal-body .ready-submit-btn, .modal-body button.ready-submit-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-width: 220px; height: 52px; padding: 0 32px; border: none; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 50px; cursor: pointer; box-shadow: 0 8px 24px rgba(233, 65, 73, 0.35); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; margin: 6px auto 0; } .custom-modal .modal-body .ready-submit-btn:hover, .modal-body button.ready-submit-btn:hover { transform: translateY(-3px); background: linear-gradient(135deg, #d93159 0%, #ef8645 100%); box-shadow: 0 14px 36px rgba(239, 134, 69, 0.5); } .custom-modal .modal-body .ready-submit-btn i { transition: transform 0.3s ease; } .custom-modal .modal-body .ready-submit-btn:hover i { transform: translateX(4px); } /* Field error inside ready modal */ .custom-modal .form-ready-error { font-size: 12px; color: #dc2626; margin: 4px 0 0; min-height: 14px; line-height: 1.3; } .custom-modal .modal-body input.invalid, .custom-modal .modal-body textarea.invalid { border-color: #dc2626 !important; background: rgba(220, 38, 38, 0.04); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important; } @media (max-width: 600px) { .custom-modal .modal-header { padding: 28px 20px 22px; } .custom-modal .modal-header h5 { font-size: 22px; letter-spacing: 1px; } .custom-modal .modal-body { padding: 28px 20px 24px; } .custom-modal .modal-body .ready-submit-btn { min-width: 180px; height: 46px; font-size: 13px; } } .map-section { border: 2px solid #e10952; border-radius: 10px; } .top_none_logo.footer-logo-section { margin: 20px 0 80px; } .delivering_section h2 { font-size: 46px; color: #8d103c; font-weight: 800; text-transform: capitalize; margin-bottom: 40px; } .delivering_section p { font-size: 17px; line-height: 28px; color: #3c3b3b; font-weight: 400; } .delivering_section h3 { font-size: 18px; line-height: 28px; font-weight: 700; color: #000; } .about_section_end_box { margin: 130px 0 50px; } .about_end_box img { display: block; margin: 0 auto 30px; } .about_end_box h3 { font-size: 17px; text-align: center; font-weight: 700; text-transform: uppercase; color: #8c103c; margin-bottom: 15px; } .about_end_box p { text-align: center; font-size: 14px; line-height: 22px; color: #383737; font-weight: 500; } .about_end_box { border: 3px solid #773585; padding: 30px 8px; border-radius: 25px 0; } .about_new_custom_page { margin: 100px 0 0; } .round-animation img { position: absolute; right: 0; top: 0; } .type-of-websites { background: url(../images/types-of-branding.jpg); background-position: center; background-size: cover; margin: 150px 0 0; padding: 70px 0; } .type-of-websites h2 { text-align: center; color: #fff; font-size: 45px; text-transform: capitalize; font-weight: 700; } .type-of-websites h3 { text-align: center; color: #fff; font-size: 20px; margin: 10px 0 50px; } .box_type { background: #fff; width: 100%; padding: 25px 10px; text-align: center; } .box_type h4 { color: #3a2571; font-size: 22px; font-weight: 700; margin-bottom: 10px; } .box_type p { font-size: 13px; line-height: 20px; color: #444343; } .service-text img { margin-bottom: 25px; } .about_fast-section { margin: 70px 0 0; position: relative; } .animtion-cart img { width: 100%; margin-top: 50px; } .fixedcta { position: fixed; z-index: 999; right: 0; top: 300px; } .fixedcta img { animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .border_50_of { top: -170px; animation: pulse 1.5s linear infinite; position: absolute; left: 50%; } .service-text ul li { list-style: decimal; font-size: 17px; margin-bottom: 22px; } .not-transparent { background-color: rgb(0 0 0 / 85%); position: fixed; padding: 6px 0; transition-duration: 0.5s; border-bottom: 1px solid #fca72d; box-shadow: 0 0 10px rgb(252 171 51 / 52%); } .not-transparent .cunstom-nav ul { margin-top: 21px; transition-duration: 0.5s; } .not-transparent img { width: 70%; transition-duration: 0.5s; } .not-transparent .live-chat-bar ul { margin-top: 14px; transition-duration: 0.5s; } .second-header ul { display: flex; justify-content: space-between; margin-top: 30px; } .second-header ul li { font-size: 15px; font-weight: 400; position: relative; text-transform: capitalize; line-height: 23px; } .second-header ul li a { color: #fff; } .second-header { display: none; visibility: hidden; position: fixed; width: 100%; padding: 7px 0; background-color: rgb(0 0 0 / 85%); } .second-header.sticky-header { display: block; visibility: visible; transition: all 0.75s linear; top: -100px; transform: translateY(100px); z-index: 9999; border-bottom: 1px solid #fca72d; box-shadow: 0 0 10px #fcab33; } .second-header.sticky-header ul { margin-top: 16px; } .header-row-hidden { display: none; } .logo-packages h3 { font-size: 40px; font-weight: 700; color: #2b2b2b; position: relative; margin: 60px 0; } .logo-packages h3:before { content: ""; position: absolute; width: 250px; height: 2px; background: #000; bottom: -10px; } .logo-packages h3:before { content: ""; position: absolute; width: 250px; height: 2px; background: #da0a5f; bottom: -10px; } .head-pkg { background-image: linear-gradient(to right top, #e94149, #ef8645); padding: 40px 0 70px; text-align: center; position: relative; } .head-pkg h4 { font-size: 60px; color: #fff; font-weight: 600; line-height: 1.1; white-space: nowrap; } .head-pkg h4 small { font-size: 24px; font-weight: 500; opacity: 0.95; margin-left: 2px; letter-spacing: 0.5px; vertical-align: baseline; } .head-pkg h4 span { display: block; font-size: 18px; font-weight: 400; text-decoration: line-through; margin-top: 4px; white-space: normal; opacity: 0.9; } @media (max-width: 1195px) { .head-pkg h4 { font-size: 48px; } .head-pkg h4 small { font-size: 20px; } } @media (max-width: 991px) { .head-pkg h4 { font-size: 42px; } .head-pkg h4 small { font-size: 18px; } } @media (max-width: 500px) { .head-pkg h4 { font-size: 44px; } .head-pkg h4 small { font-size: 19px; } } .head-pkg:before { content: ""; background-image: url(../images/pakg-pattern.png); position: absolute; bottom: 0; background-position: bottom; background-repeat: no-repeat; background-size: contain; height: 100%; width: 100%; left: 0; } .deteals h5 { text-align: center; font-size: 30px; font-weight: 700; color: #060606; text-transform: uppercase; } .deteals h5 span { display: block; font-size: 15px; font-weight: 400; color: #3e3c3c; } .deteals { padding: 0 10px; } .special-offer-head { background-image: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); padding: 15px 20px; display: flex; align-items: center; } .special-offer { margin: 70px 0; } .special-offer-head h3 { color: #fff; font-size: 37px; font-weight: 700; padding-right: 25px; } .special-offer-head h4 { font-size: 35px; color: #fff; } .special-offer-body { background: #fff; padding: 30px 20px; box-shadow: 5px 0 32px rgb(33 88 67 / 20%); } .special-offer-body h3 { font-size: 30px; font-weight: 700; color: #4a2768; margin-bottom: 30px; border-bottom: 2px solid #5e2662; display: inline-block; } .special-offer-body h4 { font-size: 25px; color: #000; margin: 15px 0; font-weight: 600; } .special-offer-body ul li { position: relative; padding-left: 20px; display: flex; align-items: center; font-size: 14px; color: #0c0c0e; line-height: 27px; font-weight: 400; } .special-offer-body ul li:before { content: ""; background: url(../images/pkg-check.png); position: absolute; left: 0; width: 13px; height: 13px; color: #0331e4; top: 5px; } .bast-deal button { background: #773585; width: 200px; margin-top: 30px; padding: 11px; border: none; border-radius: 14px; color: #fff; font-size: 21px; font-weight: 700; } .file ul { display: flex; margin: 7px 0; padding: 0; height: auto; } .file ul li { padding-left: 10px; } .file ul li:before { content: none; } .pkg-order button { width: 100%; padding: 17px; font-size: 35px; transform: rotate(-5deg); margin-top: 30px; text-transform: uppercase; border: none; font-weight: 700; background: #773585; color: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 65%); margin-bottom: 10px; border-radius: 10px; } .hide-color { visibility: hidden; } .logo-packages h6 { font-size: 40px; font-weight: 700; color: #2b2b2b; position: relative; margin: 50px 0 20px; } .logo-packages h6:before { content: ""; position: absolute; width: 250px; height: 2px; background: #da0a5f; bottom: -10px; } .logo-packages p { margin-bottom: 50px; color: #444343; font-size: 20px; } .requirment-fom { background: #fff; padding: 33px 25px; border: 1px solid #000; border-radius: 11px; margin: 10px 0 113px; } .main-heading h2 { margin-bottom: 10px; } .main-heading p { margin-bottom: 7px; } .req-form { padding: 38px 0; } .req-form label { margin-bottom: 7px; font-size: 14px; } .req-form input { width: 100%; padding: 12px; border: 1px dashed #e1095d; font-size: 16px; color: #000; margin-bottom: 20px; } .req-form textarea { width: 100%; resize: none; padding: 12px; border: 1px dashed #e1095d; font-size: 16px; color: #000; margin-bottom: 20px; height: 110px; } .check-box { margin-bottom: 16px; } .req-form h4 { font-size: 17px; margin-bottom: 9px; } .req-form h4 span { color: red; } .req-form-btn button { width: 230px; padding: 12px; border: none; background-image: linear-gradient(to right, #89103c, #900f3b, #970f39, #9e1037, #a41134); font-size: 20px; color: #fff; font-weight: 700; margin-top: 20px; } .check-box input { width: 5%; } .req-form h3 { font-size: 14px; margin: 13px 0; } .requirment-fom h3 { margin: 13px; font-size: 14px; } .requirment-fom h2 { font-size: 28px; padding: 19px 0; } .req-img-box input { width: 7%; } .req-img-box { margin-bottom: 25px; box-shadow: 3px 0 24px rgb(17 18 38 / 10%); padding-bottom: 17px; } .box-img-req img { margin-bottom: 15px; text-align: center; margin: 0 auto; float: none; display: block; } .pkg_banner { background-image: url(../images/new-pkg_banner.jpg); height: 340px; background-size: cover; background-position: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 50px; } .pkg_banner-text { margin-top: 70px; } .pkg_banner-text h1 { font-size: 37px; font-weight: 700; color: #fff; } .pkg_banner-text h2 { font-size: 37px; font-weight: 700; color: #fff; } .requirement_page { height: 350px; margin-bottom: 50px; background-image: linear-gradient(to right top, #722858, #69265d, #5d2662, #502666, #3f276a); text-align: center; padding: 190px 0 0; } .requirement_page h1 { color: #fff; text-transform: uppercase; margin-top: 0; font-size: 50px; font-weight: 700; } .header_navigation .active { color: #ef8645; } /* Active menu item — gradient underline + brand-colored text */ .cunstom-nav ul li.active > a, .cunstom-nav ul li.active > a:hover { color: #ef8645 !important; font-weight: 600; } .cunstom-nav > ul > li.active::before { width: 70%; left: 50%; right: auto; transform: translateX(-50%); box-shadow: 0 2px 8px rgba(233, 65, 73, 0.4); } .cunstom-nav ul li a, .cunstom-nav ul li a:focus, .cunstom-nav ul li a:focus-visible, .cunstom-nav ul li a:active, .cunstom-nav ul li a:visited, .cunstom-nav ul li a:hover { background: transparent !important; background-color: transparent !important; outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; text-decoration: none !important; } .cunstom-nav ul li.active > a, .cunstom-nav ul li.active > a:focus, .cunstom-nav ul li.active > a:hover { background: transparent !important; background-color: transparent !important; } .cunstom-nav ul .sub-menu li.active > a { color: #d93159; } .cunstom-nav ul li a i { font-size: 12px; } .req-body { text-align: center; padding: 24px; } .req-body h2 { color: #fff; font-size: 26px; margin-bottom: 10px; } .req-body h3 { color: #fff; font-size: 20px; margin-bottom: 19px; } .select-req-box label { width: 100%; text-align: center; } .select-req-box { position: relative; } .select-req-box input { position: absolute; left: 20px; bottom: 34px; width: auto; } #tile-1 .slider { display: none; } #statuspo { color: #fff; text-align: center; margin-top: 10px; } .thankyou-section { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .thankyou-section h2 { font-size: 165px; text-transform: uppercase; font-weight: 700; color: #d93159; line-height: 130px; } .thankyou-section h2 span { color: #773585; } .thankyou-section p { color: #4a4949; font-size: 18px; font-weight: 400; } .bg-black-color { background: #000; padding: 7px 0; } .thankyou-section button { width: 250px; padding: 12px; border: none; background-image: linear-gradient(to right, #89103c, #900f3b, #970f39, #9e1037, #a41134); font-size: 20px; color: #fff; font-weight: 700; margin-top: 30px; text-transform: uppercase; } .desktop-500-none { display: none; } .footer-chat ul li h4 a { color: #fff; } .ready-chats ul li h4 a { color: #000; } .other-input { width: 68% !important; border: none !important; border-bottom: 1px solid red !important; margin-left: 13px !important; } .logo-custom-box { padding: 20px; background: #0e192f; border-radius: 14px; border: 1px solid white; } .logo-custom-box h2 { font-size: 17px; text-align: center; color: #fff; margin-bottom: 30px; } .logo-custom-box ul { display: flex; align-items: center; justify-content: space-between; } .logo-custom-box ul li:nth-child(1) { width: 70%; } .logo-custom-box ul li input { padding: 8px 10px; width: 100%; } .logo-custom-box ul li button { padding: 11px 13px; background: transparent; color: #fff; font-size: 13px; border-radius: 0px; border: 1px solid #fff; width: 100%; } .logo-custom h1 { color: #fff; font-size: 36px; text-align: center; margin-bottom: 31px; } .logo-custom-box ul li:nth-child(2) { width: 27%; } .clogo-forms-bar { height: 120px; background: #000; } .clogo-forms { padding: 60px 0; height: 100vh; display: flex; justify-content: center; align-items: center; } .logo-cus-form h2 { text-align: center; font-size: 36px; margin-bottom: 17px; } .logo-cus-form { padding: 0 120px; text-align: center; } .logo-cus-form input { width: 100%; padding: 13px 14px; border: 1px solid #000; border-radius: 8px; margin-bottom: 20px; font-size: 21px; } .logo-cus-form button { width: 230px; padding: 12px; border: none; background-image: linear-gradient(to right, #89103c, #900f3b, #970f39, #9e1037, #a41134); font-size: 20px; color: #fff; font-weight: 700; margin-top: 20px; } .clogo-forms h2 { text-align: center; margin-bottom: 80px; } .industry-box { background: #fff; padding: 12px 9px 5px; box-shadow: 1px 1px 5px rgb(0 0 0 / 40%); text-align: center; border-radius: 10px; margin-bottom: 20px; } .industry-box-text img { width: 50%; margin: 18px 0px; } .industry-box-text h2 { font-size: 14px; } .industry-box label { height: 167px; } .clogo-forms-2{ padding: 60px 0; } .clogo-forms-2 h2 { text-align: center; margin-bottom: 30px; } .p-left-bar { float: left; margin: 0; } .p-right-bar { float: right; margin: 0; } .step-slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.9; -webkit-transition: .2s; transition: opacity .2s; padding: 0; margin-bottom: 15px; } .color-box { background: #fff; padding: 10px 0 0; text-align: center; border-radius: 13px; margin-bottom: 19px; box-shadow: 1px 1px 5px rgb(0 0 0 / 40%); } .color-box img { margin-bottom: 11px; } .color-box h2 { font-size: 19px; margin-bottom: 11px; padding: 0 10px; } .logo-cus-thanku img { border-top-left-radius: 10px; border-top-right-radius: 10px;; } .logo-cus-thanku { border-radius: 10px; background: white; border: 1px solid #80808040; box-shadow: 1px 1px 5px rgb(0 0 0 / 40%); } .c-thanku-box { text-align: center; padding: 24px 15px; } .c-thanku-box h2 { font-size: 23px; margin-bottom: 12px; } .c-thanku-box p { font-size: 15px; text-align: center; margin-bottom: 17px; } .c-thanku-box button{ width: 120px; padding: 8px; border: none; background-image: linear-gradient(to right, #89103c, #900f3b, #970f39, #9e1037, #a41134); font-size: 15px; color: #fff; font-weight: 700; margin-top: 20px; } .home-banner-text { text-align: center; margin-top: 30px; } .portfolio-slider ul li { width: 22%; margin: 10px; display: inline-block; } .portfolio-slider .owl-dot { background: #972d7b !important; width: 11px; height: 11px; border-radius: 100px; margin: 0px 6px 0; transition: all 0.5s; } .portfolio-slider .owl-dot.active { background: #ffc13a !important; width: 20px; transition: all 0.5s; } .portfolio-slider .owl-dots { position: absolute; right: 0; bottom: -40px; left: 0; display: flex !important; justify-content: center; } .cumbo-pkg { background-image: url(../images/combu-pkg.jpg); padding: 80px 0 100px; background-size: cover; background-position: center; background-attachment: fixed; position: relative; } .cumbo-pkg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(140, 70, 30, 0.4) 100%); pointer-events: none; } .cumbo-pkg > .container { position: relative; z-index: 2; } .cumbo-pkg-text { margin-top: 30px; } .cumbo-pkg-text h2 { font-size: 44px; font-weight: 800; line-height: 1.15; margin-bottom: 22px; color: #fff; text-transform: uppercase; letter-spacing: -0.5px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .cumbo-pkg-text p { font-size: 16px; color: rgba(255, 255, 255, 0.92); line-height: 1.75; max-width: 620px; margin-bottom: 30px; } .cumbo-pkg-text button { min-width: 200px; height: 54px; padding: 0 36px; border: 2px solid transparent; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); font-size: 15px; color: #fff; margin-top: 4px; font-weight: 700; letter-spacing: 1.2px; border-radius: 50px; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px rgba(233, 65, 73, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .cumbo-pkg-text button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(239, 134, 69, 0.55); } .cumbo-pkg-text button::after { content: "→"; font-size: 18px; transition: transform 0.3s ease; } .cumbo-pkg-text button:hover::after { transform: translateX(5px); } .cumbo-min-box { background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); padding: 32px 30px 60px; border-radius: 20px; position: relative; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .cumbo-min-box::before { content: ""; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(239, 134, 69, 0.25) 0%, transparent 50%); pointer-events: none; z-index: 0; } .cumbo-min-box > * { position: relative; z-index: 1; } .cumbo-top-text { padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 16px; } .cumbo-top-text h3 { font-size: 13px; font-weight: 700; text-align: left; margin-bottom: 6px; line-height: 1.4; color: #ef8645; text-transform: uppercase; letter-spacing: 2.5px; } .cumbo-top-text p { font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 1.5; } .cumbo-price { display: flex; align-items: flex-start; margin-top: 14px; gap: 12px; } .cumbo-price sup { font-size: 28px; font-weight: 700; position: relative; color: #fff; line-height: 1; margin-top: 14px; opacity: 0.85; } .cumbo-price h4 { font-size: 64px; font-weight: 800; color: #ffffff; line-height: 1; letter-spacing: -2px; margin: 0; } .cumbo-price h5 { color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 500; line-height: 1.3; margin-top: 8px; padding-left: 0; position: relative; text-decoration: line-through; } .cumbo-price h5:before { display: none; } .cumbo-price h5 span { display: block; color: rgba(255, 255, 255, 0.6); font-size: 11px; text-decoration: none; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; } .cumbo-min-box .scrollbar ul { height: 140px; padding-right: 8px; } .cumbo-min-box .scrollbar ul li { font-size: 13px !important; line-height: 1.6 !important; padding-left: 24px !important; margin-bottom: 4px; color: #fff !important; font-weight: 500 !important; } .cumbo-min-box .scrollbar ul li::before { content: "✓" !important; background: transparent !important; color: #ef8645 !important; width: auto !important; height: auto !important; border-radius: 0 !important; top: 0 !important; left: 4px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.6 !important; } .cumbo-min-box .scrollbar p { color: rgba(255, 255, 255, 0.95) !important; font-size: 12px !important; margin-left: 0 !important; margin-top: 14px !important; padding: 10px 14px; background: rgba(239, 134, 69, 0.15); border-left: 3px solid #ef8645; border-radius: 0 8px 8px 0; margin-bottom: 18px !important; } .cumbo-min-box .scrollbar p span { color: #ef8645; font-weight: 700; font-size: 13px; } .cumbo-min-box .actions { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 16px; margin-top: 4px; } .cumbo-min-box .actions ul li { border-right-color: rgba(255, 255, 255, 0.15) !important; padding: 4px 8px; transition: background 0.3s ease; } .cumbo-min-box .actions ul li:hover { background: rgba(239, 134, 69, 0.1); border-radius: 8px; } .cumbo-min-box .actions ul li h3 { font-size: 11px !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.5 !important; } .cumbo-min-box .actions ul li h3 span { color: #fff !important; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; text-transform: none; margin-top: 2px; } .scrollbar ul { margin-left: 0px; float: left; height: 188px; width: 100%; overflow-y: scroll; margin-bottom: 10px; overflow-x: hidden; } .cumbo-min-box .scrollbar ul li { color: #ffffff; } .scrollbar ul li { font-size: 12px; color: #7b7b7b; font-weight: 500; line-height: 23px; position: relative; padding-left: 13px; } .cumbo-min-box .scrollbar ul li:before { background: #ffc13a; } .scrollbar ul li:before { content: ""; position: absolute; left: 0px; width: 5px; height: 5px; background: #b22e86; border-radius: 100%; top: 9px; } .cumbo-min-box .scrollbar p { color: #fff; } .scrollbar p { font-size: 12px; color: #727272; margin-left: 12px; font-weight: 500; margin-bottom: 10px; } .actions { border-top: 1px solid #eeeeee; padding-top: 12px; } .actions ul { display: flex; } .actions ul li { width: 50%; border-right: 2px solid #eeeeee; } .cumbo-min-box button { width: auto; min-width: 220px; padding: 14px 32px; border-radius: 50px; border: none; font-size: 14px; text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px; margin: 0 auto; display: block; position: absolute; bottom: -25px; left: 0; right: 0; color: #fff; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); cursor: pointer; box-shadow: 0 10px 30px rgba(233, 65, 73, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; } .cumbo-min-box button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(239, 134, 69, 0.55); } /* Combo package responsive */ @media (max-width: 991px) { .cumbo-pkg { background-attachment: scroll; padding: 60px 0 80px; } .cumbo-pkg-text h2 { font-size: 32px; } .cumbo-price h4 { font-size: 54px; } .cumbo-min-box { padding: 28px 24px 56px; } } @media (max-width: 600px) { .cumbo-pkg { padding: 50px 0 70px; } .cumbo-pkg-text h2 { font-size: 26px; line-height: 1.2; } .cumbo-pkg-text p { font-size: 14px; } .cumbo-pkg-text button { min-width: 170px; height: 48px; font-size: 13px; } .cumbo-price h4 { font-size: 48px; } .cumbo-price sup { font-size: 22px; margin-top: 10px; } .cumbo-min-box .scrollbar ul { height: 120px; } .cumbo-min-box button { min-width: 180px; font-size: 12px; padding: 12px 24px; } } .actions ul li h3 { font-size: 12px; color: #000000; font-weight: bold; line-height: 22px; text-align: center; } .actions ul li h3 span { display: block; color: #7f7b7b; } .cumbo-min-box .actions ul li h3 span { color: #fff; } .cumbo-min-box .actions ul li h3 { color: #fff; } .actions ul li:nth-child(2) { border: none; } .scrollbar ul::-webkit-scrollbar-thumb { background-color: #fff; border-radius: 25px; } .scrollbar ul::-webkit-scrollbar-track { background-color: #ef8645; border-radius: 25px; } .scrollbar ul::-webkit-scrollbar { width: 8px; } .custom-modal .modal-dialog { max-width: 650px; } .custom-modal1 .modal-content { border: none; background: transparent; } .custom-modal1 .modal-body { background: url(../images/popup-bg.jpg); padding: 0; border-radius: 15px; border: 5px solid #e60404; background-size: cover; } .custom-modal1 .close { position: absolute; right: 5px; opacity: 1 !important; color: #000; font-size: 40px; padding: 0; border-radius: 100px; text-align: center; top: 11px; text-shadow: none; z-index: 9; } .popop-new-bg { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .popop-new-bg img { transform: none; } .popop-new-text { padding: 20px 26px 20px 0; } .popop-new-text h5 { text-transform: uppercase; font-size: 24px; font-weight: 600; color: #ffffff; line-height: 25px; margin-bottom: 20px; } .popop-new-text h5 span { display: block; font-size: 18px; font-weight: 600; font-style: italic; color: #ffd700; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); margin-top: 4px; } .from-filde-pop input { width: 100%; padding: 12px; background: #ffffff; border: 1px dashed #1e2456; font-size: 13px; color: #000; margin-bottom: 12px; border-radius: 8px; } .from-filde-pop textarea { width: 100%; padding: 12px; background: #f9f9f9; border: 1px dashed #1e2456; font-size: 13px; color: #000; margin-bottom: 12px; resize: none; height: 170px; border-radius: 8px; } .from-filde-pop button, .from-filde-pop input[type="submit"] { display: inline-block; min-width: 180px; padding: 12px 32px; margin: 8px auto 0; border: none; background: linear-gradient(135deg, #b21540 0%, #8c103c 100%); color: #fff; font-weight: 700; border-radius: 30px; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(140, 16, 60, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease; } .from-filde-pop button:hover, .from-filde-pop input[type="submit"]:hover { background: linear-gradient(135deg, #d93159 0%, #8c103c 100%); box-shadow: 0 6px 20px rgba(217, 49, 89, 0.5); transform: translateY(-2px); } .from-filde-pop button:active, .from-filde-pop input[type="submit"]:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(140, 16, 60, 0.4); } .custom-modal1 .close { position: absolute; right: 5px; opacity: 1 !important; color: #fff; font-size: 40px; padding: 0; border-radius: 100px; text-align: center; top: 11px; width: 36px; text-shadow: none; z-index: 9; background: none; } p#name-error, p#email-error, p#phone-error, p#message-error { margin-top: -11px; margin-bottom: 10px; color: red; font-size: 12px; display: none; } .custom-modal1 .modal-dialog { max-width: 750px; } .inner-banner { background: url(../images/main-bac.jpg) center/cover no-repeat; min-height: 450px; display: flex; margin-bottom: 0px; justify-content: center; align-items: center; text-align: center; padding: 120px 0 40px; background-attachment: fixed; } @media (max-width: 991px) { .inner-banner { background-attachment: scroll; min-height: 360px; padding: 100px 0 30px; margin-bottom: 50px; } } @media (max-width: 600px) { .inner-banner { min-height: 280px; padding: 90px 0 25px; margin-bottom: 40px; } } .inner-banner-text h1 { font-size: 41px; font-weight: 700; color: #fff; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); letter-spacing: 0.5px; } .inner-banner-text h1 span, .inner-banner-text h1 .accent { background: linear-gradient(90deg, #ef8645, #e94149); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .inner-banner-text { margin-top: 62px; } .showcase-page-section { margin: 60px 0; padding: 0 0 60px; } .showcase-page-section .tab-box { margin: 20px 0; } .showcase-page-section .tabs { display: flex; flex-wrap: wrap; background: #fafafa; padding: 8px; border-radius: 60px; justify-content: center; gap: 4px; border: 1px solid #f0f0f0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 16px rgba(0,0,0,0.04); } .showcase-page-section .tabs__button { padding: 12px 22px; background: transparent; border: none; font-size: 14px; text-align: center; font-weight: 600; color: #1a1a2e; border-radius: 50px; letter-spacing: 0.5px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; position: relative; white-space: nowrap; } .showcase-page-section .tabs__button:hover:not(.tabs__button--active) { background: rgba(233, 65, 73, 0.08); color: #e94149; } .showcase-page-section .tabs__button--active { color: #fff !important; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%) !important; box-shadow: 0 8px 22px rgba(233, 65, 73, 0.35); transform: translateY(-1px); } @media (max-width: 768px) { .showcase-page-section .tabs { border-radius: 18px; padding: 6px; gap: 2px; } .showcase-page-section .tabs__button { flex: 1 1 calc(50% - 4px); font-size: 12px; padding: 10px 12px; } } #loadMore { padding: 10px; text-align: center; font-weight: 500; border-radius: 7px; background-image: linear-gradient(to right top, #972d7b, #cd3c6f, #f1605b, #ff8e45, #ffc13a); color: #fff; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; transition: all 600ms ease-in-out; display: block; margin: 20px auto 0; width: 150px; text-transform: uppercase; font-size: 14px; cursor: pointer; } .showcase-page-section .tab-content { display: none; border-top: none; margin-top: 60px; } .showcase-page-section .tab-content--active { display: block; animation-name: tabsAnim; animation-duration: 1s; } .element-item { display: none; } .logo-inner-baner{ background: url(../images/main-bac.jpg); height: 450px; background-position: center; background-size: cover; display: flex; margin-bottom: 120px; justify-content: center; align-items: center; text-align: center; padding: 80px 0 0; background-attachment: fixed; } .element-item img, .element-item-normal img { border: 1px solid #f0f0f0; border-radius: 16px; margin-bottom: 0; width: 100%; height: 280px; object-fit: cover; background: #fff; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); cursor: pointer; } .element-item, .element-item-normal { margin-bottom: 28px; } .element-item img:hover, .element-item-normal img:hover, .element-item-normal a:hover img { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 50px rgba(233, 65, 73, 0.18), 0 0 0 2px rgba(239, 134, 69, 0.4); border-color: transparent; } .element-item-normal a { display: block; position: relative; border-radius: 16px; overflow: hidden; } /* "Show More" button — match site CTA style */ #loadMore { padding: 0 32px; height: 50px; text-align: center; font-weight: 700; border-radius: 50px; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); background-image: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; border: none; transition: transform 0.3s ease, box-shadow 0.3s ease; display: inline-flex; align-items: center; justify-content: center; margin: 30px auto 0; min-width: 180px; width: auto; text-transform: uppercase; font-size: 13px; letter-spacing: 1.2px; cursor: pointer; box-shadow: 0 8px 24px rgba(233, 65, 73, 0.35); text-decoration: none; } #loadMore:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(239, 134, 69, 0.5); color: #fff; text-decoration: none; } /* Tab content fade animation */ @keyframes tabsAnim { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* Responsive image height */ @media (max-width: 991px) { .element-item img, .element-item-normal img { height: 240px; } } @media (max-width: 600px) { .element-item img, .element-item-normal img { height: 200px; } } .addon-button-box { FLOAT: RIGHT; margin-top: 260px; } .ad-button-box button { width: 137px; padding: 7px 28px; margin: 0 10px; border: none; font-size: 16px; font-weight: 600; background: #ffc13a; border-radius: 7px; } .addon-button-box h2 { margin-bottom: 10px; font-size: 30px; color: #d80d0d; font-weight: 600; } .addon-button-box h2 span { font-size: 32px; } .addon-section { background: url(../images/addon-banner.jpg); height: 100vh; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center; padding: 100px 0 0; } .top-number a { font-size: 13px; text-align: right; display: block; color: #fff; font-weight: 600; } .addons-text h6 { color: #eeeeee; font-size: 30px; font-weight: 700; position: relative; margin-bottom: 28px; position: relative; } .addons-text h2 { color: #fff; font-size: 35px; font-weight: 700; margin-bottom: 30px; } .pic-top-10 { margin-top: 40px; } .addon-dicount-section { padding: 60px 0; } .addon-dicount-text { margin-bottom: 30px; } .addon-dicount-text p { text-align: center; font-size: 35px; text-transform: capitalize; color: #000; font-weight: 600; } .addon-dicount-text p span { position: relative; padding: 0 10px; color: #fff; text-shadow: 0px 2px 10px rgb(0 0 0 / 59%); font-size: 28px; } .addon-dicount-text p span:before { content: ""; position: absolute; background: url(../images/addone_text-bg.png); width: 204px; height: 59px; left: -13px; right: 0; top: -20px; z-index: -1; transform: rotate( 3deg ); } .addron-box { background: #fbfafa; border: #e2e2e2 1px solid; padding: 13px; position: relative; transition-duration: 0.5s; margin-bottom: 30px; } .addron-box-text h3 { font-size: 29px; color: #000; font-weight: 600; margin-bottom: 8px; line-height: 29px; } .addron-box-text p { font-size: 14px; line-height: 15px; color: #000; } .addron-box-text ul li h4 { font-size: 14px; color: #d80d0d; font-weight: 800; } .addron-box-text ul li h4 span { display: block; font-size: 28px; } .addron-box-text ul { display: flex; margin-top: 20px; justify-content: space-between; } .addron-box-text { margin-top: 25px; } .copy-right p { text-align: center; color: #fff; font-size: 15px; } /*logo-order*/ .logo-order{ background-image: url(../images/main-bac.jpg); height: 380px; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center; text-align: center; padding: 80px 0 0; background-attachment: fixed;} .logo-order h2 { font-size: 67px; color: #fff; font-weight: 700; text-transform: uppercase; } .logo-order h3 { font-style: italic; font-size: 45px; color: #d93159; font-weight: 500; margin-bottom: 15px; } .stap-bg { background: #fff; box-shadow: #7979791f 0 0 15px; padding: 23px 30px; margin: 60px 0; } .stap-bg h3 { text-align: center; font-size: 22px; color: #120336; margin-bottom: 30px; } .stap-bg input { width: 100%; padding: 10px; border: #773585 3px solid; background: #fff; color: #000; font-size: 16px; margin-bottom: 20px; } .step-top-area{ width: 100%; padding: 10px 10px 0; border: #773585 3px solid; background: #fff; color: #000; font-size: 16px; margin-bottom: 20px; } .stap-bg label { margin-bottom: 5px; font-size: 11px; color: #2b2b2b; font-weight: 600; } .filde-border{ width: 100%; padding: 10px; border: #ffc13a 3px solid; background: #fff; color: #000; font-size: 16px; } /* The container */ .container-check { display: block; position: relative; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; top: 2px; } .container-check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { left: 0; background-color: #753383; color: #fff; font-size: 13px; padding: 4px 7px; font-weight: 400; text-transform: uppercase; } .container-check:hover input ~ .checkmark { background-color: #ffc13a; } .container-check input:checked ~ .checkmark { background-color: #d93159; color: #ffffff; } .checkmark:after { content: ""; position: absolute; display: none; } .container-check input:checked ~ .checkmark:after { display: block; } .container-check .checkmark:after { left: 10px; top: 11px; width: 0; height: 0; border: solid white; border-width: inherit; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .step-top-area ul { display: flex; justify-content: start; flex-wrap: wrap; align-items: center; } .step-top-area ul li { margin-bottom: 12px; margin-right: 7px; } .stap-bg h4 { margin: 30px 0; font-size: 17px; font-weight: 600; position: relative; padding-left: 11px; color: #1e2456; } .stap-bg h4:before { content: ""; position: absolute; width: 3px; height: 100%; background: #ffc13a; left: 0; } .procend-button button { width: 220px; padding: 10px 0; border: none; background: #b00c3e; color: #fff; font-weight: 600; border-radius: 6px; font-size: 16px; float: right; text-transform: uppercase; } img.loader { width: 30px; height: 30px; display: none; margin-top: -5px !important; } .form-ready-error { margin-top: -11px; margin-bottom: 10px; color: red !important; font-size: 12px !important; display: none; } .footer-form-error { margin-bottom: 10px; color: red; font-size: 12px; display: none; } .success { text-align: center; border: 1px solid #86c586; padding: 17px 20px; background: #d6ecd6; color: black; font-weight: 500; } .success p { position: relative; } .success h1 { position: absolute; top: -12px; right: 0px; font-size: 17px; width: 30px; height: 30px; background: white; color: #48a548; border-radius: 100%; border: 1px solid #86c586; display: flex; align-items: center; justify-content: center; cursor: pointer; } .error-section { text-align: center; border: 1px solid #ea6c58; padding: 17px 20px; background: #f1340924; color: black; font-weight: 500; } .error-section p { position: relative; } .error-section h1 { position: absolute; top: -12px; right: 0px; font-size: 17px; width: 30px; height: 30px; background: white; color: #de1010; border-radius: 100%; border: 1px solid #ea6c58; display: flex; align-items: center; justify-content: center; cursor: pointer; } label.error { color: red; } input.error, select.error, textarea.error { border: 1px solid red; } p.logo-name-error, p.industry-error, p.style-error, p.feel-error { margin-top: -18px; margin-bottom: 10px; color: red; font-size: 12px; display: none; } .logo-order-text h2 { text-align: center; margin: 20px 0 5px; } .logo-order-text p { text-align: center; font-size: 20px; font-weight: 600; } .service-text h2 { text-transform: uppercase; font-weight: 600; } .top-logo a { display: inline-block; } .not-transparent .top-logo { padding-top: 18px; } .from-filde-pop {text-align: center;} /*tabs*/ .tab-right-banner { background: url(../images/cld-ser-img.png) no-repeat; width: 100%; height: 595px; position: relative; margin-top: 20px; } .main-cnt-para { display:none; } .showme-cont .main-cnt-para { display:block; } .mybtn2 { background: #be1e2d; color: #fff; padding: 11px 46px; font-weight: 400; text-align: center; border-radius: 3px; font-family: Poppins,sans-serif; font-size: 20px; margin: 30px 0; } .accordion { background-color: #000000; color: #000000 !important; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin-bottom: 15px; } @media only screen and (max-width: 600px){ .accordion { background-color: #000000; color: #000000 !important; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin-bottom: 15px; } } .accordion.active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .tabs-menu { padding: 0; margin: 0; display: flex; justify-content: center; align-items: center } .tabs-menu li { list-style: none; border-left: 1px solid #d4d4d1; flex: 0 0 25%; border-bottom: 1px solid #d4d4d1; text-align: center; margin: 0 } .tab-content-section { padding: 35px 0 } .tabs-menu li:first-child { border-left: none } .tabs-menu li:last-child { border-right: none!important } .tabs-menu li.current { position: relative; background-color: #fff; z-index: 5; color: #be1e2d } .tabs-menu li a { padding: 10px; color: #000; text-decoration: none } .topwebsite-tab li span { padding: 10px; color: #000; text-decoration: none; display: block } .topwebsite-tab li span { padding: 10px 21%; color: #000; text-decoration: none; font-size: 14px; font-family: Poppins, sans-serif; font-weight: 400; line-height: 18px; } .tab-color strong { color: #000; font-size: 26px; } .tab-color li a { font-size: 13px; padding: 8px 0; font-family: Poppins, sans-serif; font-weight: 400; line-height: 20px; } .tabs-menu li.current a, .tabs-menu li.current a strong { color: #be1e2d } .tab { float: none; margin-bottom: 50px; width: auto; margin-top: -1px } .tab-content { padding: 20px; display: none } .tab-content-2 { padding: 20px; display: none } .tab-content-pricing2 { display: none } #tab-1 { display: block } #tab-1b { display: block } @media (max-width: 812px){ .process .tabs-menu { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .tab-color strong { color: #000; font-size: 12px; } .close-button { color: white; } } /* Ensure tab content is readable regardless of inherited styles */ .tab-content-section, .tab-content-section p, .tab-content, .tab-content .Design-process h2, .tab-content .bold-text, .main-cnt-para, .panel { color: #222 !important; } /* Style for Read More button */ .mybtn2 { display: inline-block; margin-top: 15px; background: transparent; color: #be1e2d; border: 1px solid #be1e2d; padding: 8px 14px; border-radius: 4px; text-decoration: none; } .mybtn2:hover { background: #be1e2d; color: #fff; } /* WhatsApp floating button */ .whatsapp-button { position: fixed; left: 20px; bottom: 20px; width: 60px; height: 60px; z-index: 9999; } .whatsapp-button img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.3s ease; } .whatsapp-button img:hover { transform: scale(1.1); } @media (max-width: 600px) { .whatsapp-button { width: 50px; height: 50px; left: 12px; bottom: 12px; } } /* Reduced motion: disable decorative animations for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================= HOME PAGE PRO UPGRADES — Hero CTAs, Trust Stats, Service Grid ========================================================= */ /* ---------- Hero CTA group (Primary + Secondary buttons) ---------- */ .hero-cta-group { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; margin: 30px auto 0; } .btn-primary-cta, .btn-secondary-cta { min-width: 200px; height: 54px; padding: 0 32px; font-size: 15px; font-weight: 700; letter-spacing: 1.2px; border-radius: 50px; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-sizing: border-box; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .btn-primary-cta { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff !important; border: 2px solid transparent; box-shadow: 0 10px 30px rgba(233, 65, 73, 0.35); } .btn-primary-cta:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(239, 134, 69, 0.5); color: #fff !important; } .btn-primary-cta i { transition: transform 0.3s ease; font-size: 13px; } .btn-primary-cta:hover i { transform: translateX(5px); } .btn-secondary-cta { background: transparent; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .btn-secondary-cta:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; transform: translateY(-3px); color: #fff !important; text-decoration: none; } @media (max-width: 600px) { .btn-primary-cta, .btn-secondary-cta { min-width: 170px; height: 48px; padding: 0 22px; font-size: 13px; letter-spacing: 1px; } } /* ---------- Trust Stats Section ---------- */ .trust-stats-section { padding: 50px 0 40px; background: linear-gradient(135deg, #fff7f0 0%, #fff 50%, #fff0ec 100%); position: relative; overflow: hidden; } .trust-stats-section::before { content: ""; position: absolute; top: -100px; left: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(239, 134, 69, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .trust-stats-section::after { content: ""; position: absolute; bottom: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(233, 65, 73, 0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .trust-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 2; } .trust-stat-item { text-align: center; padding: 30px 20px; background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); border: 1px solid rgba(239, 134, 69, 0.08); transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; } .trust-stat-item:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(233, 65, 73, 0.15); border-color: rgba(233, 65, 73, 0.2); } .trust-stat-icon { width: 64px; height: 64px; margin: 0 auto 18px; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; box-shadow: 0 8px 20px rgba(233, 65, 73, 0.25); } .trust-stat-number { font-size: 48px; font-weight: 800; color: #1a1a2e; line-height: 1; margin-bottom: 8px; letter-spacing: -1px; display: flex; align-items: baseline; justify-content: center; gap: 2px; } .trust-stat-number .trust-plus, .trust-stat-number .rating-decimal { color: #ef8645; font-size: 32px; } .trust-stat-label { font-size: 14px; color: #666; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; } @media (max-width: 991px) { .trust-stats-row { grid-template-columns: repeat(2, 1fr); } .trust-stat-number { font-size: 38px; } } @media (max-width: 500px) { .trust-stats-section { padding: 50px 0; } .trust-stat-item { padding: 24px 16px; } .trust-stat-icon { width: 52px; height: 52px; font-size: 22px; } .trust-stat-number { font-size: 32px; } .trust-stat-label { font-size: 12px; } } /* ---------- Services Grid Section ---------- */ .services-grid-section { padding: 60px 0; background: #fafafa; position: relative; } .services-grid-header { text-align: center; max-width: 700px; margin: 0 auto 40px; } .services-grid-header h2 { font-size: 42px; font-weight: 800; color: #1a1a2e; margin-bottom: 14px; letter-spacing: -1px; } .services-grid-header h2 span { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .services-grid-header p { font-size: 17px; color: #666; line-height: 1.6; } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .service-card { background: #fff; border-radius: 20px; padding: 36px 28px; text-align: left; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; border: 1px solid #eee; display: block; } .service-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(233, 65, 73, 0.15); border-color: rgba(233, 65, 73, 0.2); text-decoration: none; color: inherit; } .service-card:hover::before { transform: scaleX(1); } .service-card-icon { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, rgba(233, 65, 73, 0.1) 0%, rgba(239, 134, 69, 0.1) 100%); color: #e94149; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 22px; transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease; } .service-card:hover .service-card-icon { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; transform: rotate(-6deg) scale(1.05); } .service-card h3 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; } .service-card p { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 18px; } .service-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #e94149; letter-spacing: 0.5px; transition: gap 0.3s ease; } .service-card:hover .service-card-link { gap: 12px; } .service-card-link i { font-size: 12px; transition: transform 0.3s ease; } @media (max-width: 1195px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .services-grid-header h2 { font-size: 32px; } .service-card { padding: 28px 22px; } } @media (max-width: 500px) { .services-grid { grid-template-columns: 1fr; } .services-grid-section { padding: 60px 0; } .services-grid-header { margin-bottom: 40px; } .services-grid-header h2 { font-size: 26px; } .services-grid-header p { font-size: 15px; } } /* ========================================================= MODERN TAB NAVIGATION + ACCORDION (overrides legacy styles) ========================================================= */ .tab-content-section { padding: 50px 0 40px; background: #fff; } /* ---- Tabs Navigation ---- */ .tab-content-section .tabs-menu { display: flex; justify-content: center; align-items: stretch; gap: 0; margin: 0 auto 50px; padding: 8px; max-width: 1100px; background: #fafafa; border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 20px rgba(0,0,0,0.04); flex-wrap: wrap; list-style: none; } .tab-content-section .tabs-menu li { list-style: none; flex: 1 1 0; min-width: 180px; border: none; background: transparent; border-radius: 14px; transition: background 0.35s ease, transform 0.3s ease; position: relative; text-align: center; margin: 0; } .tab-content-section .tabs-menu li:first-child, .tab-content-section .tabs-menu li:last-child { border: none !important; } .tab-content-section .tabs-menu li:hover:not(.current) { background: rgba(233, 65, 73, 0.05); } .tab-content-section .tabs-menu li a { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; color: #1a1a2e; text-decoration: none; transition: color 0.3s ease; height: 100%; justify-content: center; } .tab-content-section .tabs-menu li a strong { font-size: 17px; font-weight: 700; color: #1a1a2e; line-height: 1.25; transition: color 0.3s ease; letter-spacing: -0.2px; } .tab-content-section .tabs-menu li a span { font-size: 12px; color: #888; font-weight: 500; line-height: 1.3; transition: color 0.3s ease; text-transform: none; } .tab-content-section .tabs-menu li.current { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); box-shadow: 0 10px 28px rgba(233, 65, 73, 0.35); transform: translateY(-2px); } .tab-content-section .tabs-menu li.current::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ef8645; } .tab-content-section .tabs-menu li.current a, .tab-content-section .tabs-menu li.current a strong, .tab-content-section .tabs-menu li.current a span { color: #fff !important; } .tab-content-section .tabs-menu li.current a span { opacity: 0.92; } /* ---- Tab content area ---- */ .tab-content-section .tab { margin-top: 20px; margin-bottom: 0; } .tab-content-section .tab-content { padding: 20px 10px 0; animation: tabFadeIn 0.4s ease; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tab-content-section .Design-process h2 { font-size: 32px; font-weight: 700; color: #1a1a2e !important; margin-bottom: 18px; line-height: 1.25; } .tab-content-section .Design-process h2 strong { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; } .tab-content-section .bold-text { font-size: 16px; color: #444 !important; line-height: 1.7; font-weight: 500; margin-bottom: 16px; } .tab-content-section .tab-content > p { color: #555 !important; line-height: 1.7; margin-bottom: 18px; } /* ---- Modernized accordion (Our Redefined Process +, etc.) ---- */ .tab-content-section .accordion { background: #fff !important; color: #1a1a2e !important; cursor: pointer; padding: 18px 56px 18px 22px; width: 100%; border: 1px solid #eee; border-radius: 12px; text-align: left; outline: none; font-size: 15px; font-weight: 600; margin-bottom: 12px; position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; letter-spacing: 0.2px; } .tab-content-section .accordion::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; line-height: 1; transition: transform 0.4s ease, background 0.3s ease; box-shadow: 0 4px 12px rgba(233, 65, 73, 0.25); } .tab-content-section .accordion:hover { background: #fff !important; border-color: rgba(233, 65, 73, 0.3); box-shadow: 0 6px 18px rgba(233, 65, 73, 0.1); color: #e94149 !important; } .tab-content-section .accordion.active { background: linear-gradient(135deg, rgba(233, 65, 73, 0.04) 0%, rgba(239, 134, 69, 0.04) 100%) !important; border-color: rgba(233, 65, 73, 0.4); color: #e94149 !important; box-shadow: 0 6px 18px rgba(233, 65, 73, 0.12); } .tab-content-section .accordion.active::after { content: "−"; transform: translateY(-50%) rotate(180deg); background: #1a1a2e; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .tab-content-section .accordion + .panel { padding: 0 22px; background: transparent !important; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease, margin 0.4s ease; border-radius: 0 0 12px 12px; margin-top: -10px; margin-bottom: 0; } .tab-content-section .accordion.active + .panel { padding: 4px 22px 18px; margin-top: -8px; margin-bottom: 14px; } .tab-content-section .accordion + .panel p { color: #555 !important; font-size: 14px; line-height: 1.7; margin: 0; } /* ---- Read More button polish ---- */ .tab-content-section .mybtn2 { background: transparent; color: #e94149; border: 2px solid #e94149; padding: 10px 24px; border-radius: 30px; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.3s ease; margin-top: 20px; display: inline-block; } .tab-content-section .mybtn2:hover { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(233, 65, 73, 0.3); transform: translateY(-2px); } /* ---- Right side image ---- */ .tab-content-section .tab-right-banner img, .tab-content-section .tab .col-md-7 > img { border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); } /* ---- Responsive ---- */ @media (max-width: 991px) { .tab-content-section .tabs-menu li { min-width: 50%; flex: 1 1 50%; } .tab-content-section .tabs-menu li.current::after { display: none; } .tab-content-section .Design-process h2 { font-size: 26px; } } @media (max-width: 600px) { .tab-content-section { padding: 50px 0; } .tab-content-section .tabs-menu { padding: 6px; border-radius: 14px; } .tab-content-section .tabs-menu li { min-width: 100%; flex: 1 1 100%; } .tab-content-section .tabs-menu li a { padding: 14px 12px; } .tab-content-section .tabs-menu li a strong { font-size: 15px; } .tab-content-section .tabs-menu li a span { font-size: 11px; } .tab-content-section .Design-process h2 { font-size: 22px; } .tab-content-section .accordion { padding: 15px 50px 15px 18px; font-size: 14px; } .tab-content-section .accordion::after { width: 26px; height: 26px; font-size: 18px; right: 14px; } } /* ========================================================= MODERN PRICING CARDS — package boxes ========================================================= */ .four-pakage .pkg_box { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); border: 1px solid #f0f0f0; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; position: relative; height: 100%; margin-top: 30px; } .four-pakage .pkg_box:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(233, 65, 73, 0.15); border-color: rgba(239, 134, 69, 0.3); } /* Featured (most popular) card — slightly elevated by default */ .four-pakage .pkg_box.featured { transform: scale(1.04); box-shadow: 0 20px 60px rgba(233, 65, 73, 0.18); border: 2px solid #ef8645; z-index: 2; } .four-pakage .pkg_box.featured .head-pkg { padding-top: 60px; } .four-pakage .pkg_box.featured:hover { transform: scale(1.04) translateY(-10px); box-shadow: 0 30px 70px rgba(233, 65, 73, 0.25); } /* "Most Popular" ribbon badge */ .pkg-popular-badge { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 100%); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 7px 22px; border-radius: 30px; box-shadow: 0 6px 20px rgba(26, 26, 46, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.5); z-index: 3; white-space: nowrap; } .pkg-popular-badge::before { content: "★ "; color: #fbbf24; margin-right: 2px; } /* Order Now button — modern pill with hover (centered, block-level) */ .four-pakage .pkg_box button, .four-pakage .pkg_box .start-project-btn { font-weight: 700 !important; width: calc(100% - 60px) !important; max-width: 260px !important; height: 50px !important; min-width: 0 !important; padding: 0 24px !important; color: #fff !important; border: none !important; font-size: 14px !important; letter-spacing: 1.2px !important; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%) !important; display: flex !important; align-items: center; justify-content: center; margin: 20px auto 25px !important; text-transform: uppercase; border-radius: 50px !important; cursor: pointer; box-shadow: 0 8px 24px rgba(233, 65, 73, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .four-pakage .pkg_box button:hover, .four-pakage .pkg_box .start-project-btn:hover { transform: translateY(-3px); background: linear-gradient(135deg, #d93159 0%, #ef8645 100%) !important; box-shadow: 0 12px 32px rgba(239, 134, 69, 0.45); color: #fff !important; } /* Featured card button — darker for contrast */ .four-pakage .pkg_box.featured button, .four-pakage .pkg_box.featured .start-project-btn { background: linear-gradient(135deg, #1a1a2e 0%, #3d2766 100%) !important; box-shadow: 0 8px 24px rgba(26, 26, 46, 0.35) !important; } .four-pakage .pkg_box.featured button:hover, .four-pakage .pkg_box.featured .start-project-btn:hover { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%) !important; box-shadow: 0 12px 32px rgba(239, 134, 69, 0.45) !important; } /* Package name */ .four-pakage .package-name { text-align: center; margin: 25px 0 10px; font-size: 26px; font-weight: 800; color: #1a1a2e; text-transform: uppercase; letter-spacing: 1px; } .four-pakage .package-name span { display: block; font-size: 13px; font-weight: 500; color: #888; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; } /* Spacing between cards on desktop */ @media (min-width: 992px) { .four-pakage .logo-packages .row > [class*="col-"] { padding-left: 18px; padding-right: 18px; } } @media (max-width: 991px) { .four-pakage .pkg_box.featured { transform: none; margin-top: 40px; } .four-pakage .pkg_box.featured:hover { transform: translateY(-10px); } } /* ========================================================= UNIFIED BUTTON SYSTEM — consistent across home page ========================================================= */ /* Master modern button style (gradient pill with hover) */ .mybtn2, a.mybtn2, .start-project-btn, .cumbo-pkg-text > button, .cumbo-min-box > button { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-width: 200px; height: 50px; padding: 0 30px; border: none !important; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%) !important; color: #fff !important; font-size: 14px; font-weight: 700 !important; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 50px !important; cursor: pointer; text-decoration: none !important; box-shadow: 0 8px 24px rgba(233, 65, 73, 0.35); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; font-family: inherit; } .mybtn2:hover, a.mybtn2:hover, .start-project-btn:hover, .cumbo-pkg-text > button:hover, .cumbo-min-box > button:hover { transform: translateY(-3px); background: linear-gradient(135deg, #d93159 0%, #ef8645 100%) !important; box-shadow: 0 14px 36px rgba(239, 134, 69, 0.5); color: #fff !important; text-decoration: none !important; } .mybtn2:active, .start-project-btn:active, .cumbo-pkg-text > button:active, .cumbo-min-box > button:active { transform: translateY(-1px); } /* Smaller variant for inline tab buttons (Read More) */ .tab-content-section .mybtn2, .tab-content .mybtn2 { min-width: 160px; height: 44px; font-size: 12px; margin-top: 18px; } /* Mobile sizing */ @media (max-width: 600px) { .mybtn2, a.mybtn2, .start-project-btn, .cumbo-pkg-text > button, .cumbo-min-box > button { min-width: 170px; height: 46px; font-size: 13px; padding: 0 22px; letter-spacing: 1px; } .tab-content-section .mybtn2 { min-width: 140px; height: 40px; font-size: 11px; } } /* ========================================================= CONTACT US PAGE ========================================================= */ .contact-page { padding: 70px 0 80px; background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); } .contact-intro { text-align: center; max-width: 720px; margin: 0 auto 50px; } .contact-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 4px; color: #ef8645; padding: 8px 18px; background: linear-gradient(135deg, rgba(233,65,73,0.08), rgba(239,134,69,0.08)); border-radius: 30px; margin-bottom: 18px; border: 1px solid rgba(239, 134, 69, 0.25); text-transform: uppercase; } .contact-intro h2 { font-size: 42px; font-weight: 800; color: #1a1a2e; margin-bottom: 14px; letter-spacing: -1px; line-height: 1.2; } .contact-intro h2 span { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .contact-intro p { font-size: 16px; color: #5a5a6e; line-height: 1.7; } /* Contact cards grid */ .contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 70px; } .contact-card { background: #fff; border-radius: 18px; padding: 28px 22px; text-align: left; text-decoration: none; color: inherit; border: 1px solid #eee; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; display: block; position: relative; } .contact-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(233, 65, 73, 0.15); border-color: rgba(239, 134, 69, 0.3); text-decoration: none; color: inherit; } .contact-card-static { cursor: default; } .contact-card-static:hover { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,0.05); border-color: #eee; } .contact-card-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, rgba(233,65,73,0.1), rgba(239,134,69,0.1)); color: #e94149; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease; } .contact-card:hover .contact-card-icon { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; transform: rotate(-6deg) scale(1.05); } .contact-card h3 { font-size: 18px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; } .contact-card p { font-size: 13px; color: #6b7280; margin: 0 0 10px; line-height: 1.5; } .contact-card-value { display: block; font-size: 14px; font-weight: 600; color: #e94149; word-break: break-word; line-height: 1.4; } /* Form + Map grid */ .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: stretch; } .contact-form-wrap { background: #fff; border-radius: 20px; padding: 40px 36px; border: 1px solid #f0f0f0; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06); } .contact-form-wrap h3 { font-size: 28px; font-weight: 800; color: #1a1a2e; margin: 14px 0 8px; line-height: 1.2; } .contact-form-sub { font-size: 14px; color: #6b7280; margin: 0 0 24px; line-height: 1.6; } .contact-form-wrap .from-filde { margin-bottom: 14px; position: relative; } .contact-form-wrap input, .contact-form-wrap textarea { width: 100%; padding: 14px 16px; font-size: 14px; color: #1a1a2e; background: #fafafa; border: 1px solid #e5e7eb; border-radius: 10px; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; box-shadow: none; } .contact-form-wrap input::placeholder, .contact-form-wrap textarea::placeholder { color: #9ca3af; } .contact-form-wrap input:focus, .contact-form-wrap textarea:focus { background: #fff; border-color: #ef8645; box-shadow: 0 0 0 3px rgba(239, 134, 69, 0.15); outline: none; } .contact-form-wrap input:invalid:not(.invalid), .contact-form-wrap textarea:invalid:not(.invalid) { border-color: #e5e7eb; box-shadow: none; } .contact-form-wrap input.invalid, .contact-form-wrap textarea.invalid { border-color: #dc2626 !important; background: rgba(220, 38, 38, 0.04); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } .contact-form-wrap textarea { min-height: 130px; resize: vertical; } .contact-form-wrap .form-ready-error { color: #dc2626; font-size: 12px; margin: 4px 0 0; min-height: 14px; line-height: 1.3; } .contact-form-wrap .from-filde button.contact-submit-btn, .contact-submit-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: auto !important; min-width: 220px; height: 52px; padding: 0 32px !important; border: none !important; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%) !important; background-image: linear-gradient(135deg, #e94149 0%, #ef8645 100%) !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 50px !important; cursor: pointer; box-shadow: 0 8px 24px rgba(233, 65, 73, 0.35) !important; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; margin-top: 8px; position: relative; } .contact-form-wrap .from-filde button.contact-submit-btn:hover, .contact-submit-btn:hover { transform: translateY(-3px); background: linear-gradient(135deg, #d93159 0%, #ef8645 100%) !important; background-image: linear-gradient(135deg, #d93159 0%, #ef8645 100%) !important; box-shadow: 0 14px 36px rgba(239, 134, 69, 0.5) !important; } .contact-submit-btn .loader { width: 18px; height: 18px; display: none; } .form-status-inline { margin-top: 12px; font-size: 13px; color: #16a34a; font-weight: 500; } /* Map */ .contact-map-wrap { display: flex; flex-direction: column; gap: 18px; } .contact-map { flex-grow: 1; min-height: 380px; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0; position: relative; } .contact-map iframe { width: 100%; height: 100%; min-height: 380px; display: block; filter: grayscale(15%) contrast(1.05); transition: filter 0.4s ease; } .contact-map:hover iframe { filter: none; } .contact-map-info { display: flex; align-items: flex-start; gap: 14px; background: #fff; border-radius: 14px; padding: 18px 20px; border: 1px solid #f0f0f0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04); } .contact-map-info-icon { width: 42px; height: 42px; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 6px 16px rgba(233, 65, 73, 0.25); } .contact-map-info strong { display: block; color: #1a1a2e; font-size: 15px; font-weight: 700; margin-bottom: 4px; } .contact-map-info p { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.5; } /* Responsive */ @media (max-width: 1195px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .contact-grid { grid-template-columns: 1fr; } .contact-intro h2 { font-size: 32px; } } @media (max-width: 600px) { .contact-page { padding: 50px 0 60px; } .contact-cards { grid-template-columns: 1fr; gap: 14px; } .contact-intro h2 { font-size: 26px; } .contact-form-wrap { padding: 28px 22px; } .contact-submit-btn { min-width: 180px; height: 46px; font-size: 13px; } } /* ========================================================= LOCATIONS PAGE ========================================================= */ .locations-section { padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); } .locations-intro { text-align: center; max-width: 760px; margin: 0 auto 50px; } .locations-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 4px; color: #ef8645; padding: 8px 18px; background: linear-gradient(135deg, rgba(233,65,73,0.08), rgba(239,134,69,0.08)); border-radius: 30px; margin-bottom: 18px; border: 1px solid rgba(239, 134, 69, 0.25); text-transform: uppercase; } .locations-intro h2 { font-size: 42px; font-weight: 800; color: #1a1a2e; margin-bottom: 14px; letter-spacing: -1px; } .locations-intro h2 span { background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .locations-intro p { font-size: 16px; color: #5a5a6e; line-height: 1.7; } /* Grid */ .locations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 60px; } .location-card { background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid #eee; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; display: flex; flex-direction: column; } .location-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(233, 65, 73, 0.15); border-color: rgba(239, 134, 69, 0.3); text-decoration: none; color: inherit; } .location-card-image { height: 160px; background: linear-gradient(135deg, rgba(233, 65, 73, 0.55) 0%, rgba(239, 134, 69, 0.65) 100%), url('../images/main-bac.jpg') center/cover no-repeat; position: relative; display: flex; align-items: flex-end; padding: 16px; } .location-card-tag { background: rgba(255, 255, 255, 0.95); color: #1a1a2e; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 12px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .location-card-body { padding: 22px 20px; flex-grow: 1; display: flex; flex-direction: column; } .location-card-body h3 { font-size: 19px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; letter-spacing: -0.3px; } .location-card-body p { font-size: 13px; color: #6b7280; margin: 0 0 14px; line-height: 1.5; flex-grow: 1; } .location-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #e94149; letter-spacing: 0.5px; transition: gap 0.3s ease; } .location-card:hover .location-card-link { gap: 12px; color: #e94149; } .location-card-link i { font-size: 11px; transition: transform 0.3s ease; } /* CTA at bottom */ .locations-cta { background: linear-gradient(135deg, #1a1a2e 0%, #3d2766 100%); border-radius: 24px; padding: 50px 30px; text-align: center; color: #fff; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(26, 26, 46, 0.25); } .locations-cta::before { content: ""; position: absolute; top: -80px; right: -80px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(239, 134, 69, 0.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .locations-cta::after { content: ""; position: absolute; bottom: -80px; left: -80px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(233, 65, 73, 0.2) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .locations-cta h3 { font-size: 30px; font-weight: 800; margin-bottom: 10px; color: #fff; position: relative; z-index: 2; } .locations-cta p { font-size: 16px; color: rgba(255, 255, 255, 0.85); margin-bottom: 24px; position: relative; z-index: 2; } .locations-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 200px; height: 52px; padding: 0 32px; background: linear-gradient(135deg, #e94149 0%, #ef8645 100%); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 50px; text-decoration: none; box-shadow: 0 10px 30px rgba(233, 65, 73, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; z-index: 2; } .locations-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(239, 134, 69, 0.55); color: #fff; text-decoration: none; } /* Responsive */ @media (max-width: 1195px) { .locations-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .locations-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .locations-intro h2 { font-size: 32px; } .location-card-image { height: 140px; } } @media (max-width: 500px) { .locations-section { padding: 60px 0; } .locations-grid { grid-template-columns: 1fr; } .locations-intro h2 { font-size: 26px; } .locations-cta { padding: 40px 24px; } .locations-cta h3 { font-size: 24px; } } .inner-banner-text p { color: #fff; } section.inner-banner.new-index-page p a.btn { color: #fff; background: #ea5448; }