html { overflow-x: hidden; } /* ========================================= */ /* Technology Stack Section Styling */ /* ========================================= */ .tech-stack-section { background-color: #f9f9f9; } /* Background for Left Menu (Dark Theme) */ .bg-dark-custom { background-color: #2F2103; /* Matches your dark brand color */ color: #fff; min-height: 100%; } /* Tabs Styling */ .tech-tabs .nav-link { color: #fff; /* White text inactive */ padding: 20px 25px; border-radius: 0; font-size: 16px; font-weight: 500; text-align: left; transition: all 0.3s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */ /* Ensure flexbox for arrow positioning */ display: flex; justify-content: space-between; align-items: center; } /* Hide Arrow by default */ .tech-tabs .nav-link .arrow-icon { display: none; font-size: 14px; } /* --- ACTIVE STATE --- */ .tech-tabs .nav-link.active { background-color: #DC9401 !important; /* Golden Active Background */ color: #fff !important; font-weight: 700; border-bottom-color: #DC9401; } /* Show Arrow ONLY on Active */ .tech-tabs .nav-link.active .arrow-icon { display: block; } /* Hover Effect */ .tech-tabs .nav-link:hover:not(.active) { background-color: rgba(255, 255, 255, 0.05); color: #DC9401; padding-left: 30px; /* Slight movement effect */ } /* --- Content Area Styling --- */ .tech-list { display: flex; flex-direction: column; gap: 15px; } .tech-item { display: flex; align-items: center; padding: 15px; background-color: #fff; border: 1px solid #eee; border-radius: 8px; transition: transform 0.2s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); } .tech-item:hover { transform: translateX(5px); border-color: #DC9401; } /* Icon inside content list */ .tech-icon { font-size: 24px; margin-right: 15px; width: 40px; text-align: center; } /* Responsive Fix */ /* @media (max-width: 768px) { .bg-dark-custom { min-height: auto; } */ /* .tech-tabs .nav-link { justify-content: center; Center text on mobile } */ /* .tech-tabs .nav-link .arrow-icon { display: none !important; Hide arrow on mobile } } */ .main_tabs { background-color: #2F2202; padding: 50px 20px; border-radius: 20px 0px 0px 20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; height: 732px; } .tabs_right { background-color: #fff; border-radius: 0px 20px 20px 0px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: 30px; /* height: 100%; */ } .nav-pills .nav-link { color: #fff; background-color: #2F2202; margin-bottom: 15px; border-radius: 10px; text-align: left; padding: 15px 20px; font-size: 16px; font-weight: 500; } .nav-pills .nav-link.active { background-color: #E59F11 !important; color: #fff !important; } .arrow-icon { float: right; display: none; font-size: 18px; font-weight: bold; } .nav-pills .nav-link.active .arrow-icon { display: inline; } .tab-content { padding: 10px; } .tech-box { display: flex; align-items: center; gap: 15px; padding: 15px 20px; background-color: #f8f9fa; border-radius: 10px; margin-bottom: 15px; transition: 0.3s; border: 1px solid #e2e2e2; cursor: pointer; font-size: 1.25rem; } .tech-box:hover { background-color: #fff3e0; border-color: #ffcc80; } .tech-box img { width: 30px; height: 30px; } .tab-pane a { color: #E59F11; font-weight: 500; text-decoration: none; font-size: 1.25rem; } .tab-pane a:hover { text-decoration: underline; } .section-heading h2 { font-size: 38px; font-weight: 700; color: #2F2202; position: relative; display: inline-block; padding-bottom: 10px; margin-bottom: 10px; } .section-heading h2::after { content: ''; position: absolute; width: 60%; height: 4px; background-color: #E59F11; left: 50%; transform: translateX(-50%); bottom: 0; border-radius: 2px; } .section-heading p { color: #666; font-size: 1.25rem; margin-top: 10px; } .section-heading h2 { font-size: 38px; font-weight: 700; color: #2F2202; position: relative; display: inline-block; padding-bottom: 10px; margin-bottom: 10px; } .section-heading h2::after { content: ''; position: absolute; width: 60%; height: 4px; background-color: #E59F11; left: 50%; transform: translateX(-50%); bottom: 0; border-radius: 2px; } .section-heading p { color: #666; font-size: 1.25rem; margin-top: 10px; } .ratings-section .clutch_ img { width: auto; height: 30px; } .ratings-section .review_ img { width: auto; height: 40px; } a { text-decoration: none; } .ratings-section .trust_pilot img { width: auto; height: 40px; } .ratings-section { background-color: #fff; } .rating_box_new { padding: 70px 35px; } .rating-box { background-color: #ffff; /* padding: 51px 35px; */ border-radius: 20px; /* height: 180px; */ /* box-shadow: 0px 5px 26px -16px #000; */ } .clutch_ratting_box { padding: 55px 35px; } .rating-box h4 { font-weight: 600; color: #000; } .rating-box .stars { font-size: 1.6rem; font-weight: 500; } .why-choose-section { background-color: #ffff; } .why-choose-section h2 { color: #DC9401; font-weight: 600; } .section-title { font-weight: 700; color: #1a1a1a; } .section-subtitle { max-width: 800px; margin: 0 auto; color: #555; font-size: 1.25rem; } .feature-box { background-color: #fff; border-radius: 12px; padding: 25px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; text-align: left; height: 100%; transition: all 0.3s ease-in-out; } .feature-box:hover { transform: translateY(-5px); } .feature-box .icon { font-size: 28px; color: #d9a219; /* purple-like */ margin-bottom: 15px; } .feature-box h3 { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; } .feature-box p { /* font-size: 14px; */ color: #555; } .slick-track { display: flex; align-items: center; } .slick-slide { display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px; } .client_logo_6 { width: 102px; } .logo-slider { /* background-color: #DC9401; */ width: 70%; justify-content: center; display: flex; align-items: center; } .logo-slider img { max-width: 100%; height: auto; padding: 2px; object-fit: contain; } .wait-section { padding: 60px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; } .wait-section .main_head { color: #DC9401; ; } .wait-section p { width: 700px; text-align: center; } .cliets-section { color: #000; padding: 90px 30px; /* min-height: 100vh; */ text-align: center; display: flex; flex-direction: column; align-items: center; } .cliets-section h4 { color: #DE9B17; } .cliets-section p { width: 700px; } /* .hero-section { background-image: url("https://coderchaps.ohtechsolutions.com/storage/Services/custom-web-applications/ServiceBanner/servicebanner3.webp"); color: white; padding: 60px 30px; min-height: 100vh; display: flex; align-items: center; background-size: cover; background-repeat: no-repeat; position: relative; } */ /* .hero-section::after { position: absolute; content: ""; background-color: #0009; inset: 0; z-index: 1; } */ .hero-content { z-index: 2; } .form-box { background: #fff; border-radius: 12px; padding: 30px 25px; box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.1); width: 100%; max-width: 420px; } .form-box h4 { font-weight: 700; font-size: 1.5rem; margin-bottom: 25px; color: #314151; } .form-box h4 span { color: #F9B938; } .custom-input { border: none; border-bottom: 2px solid #F9B938; border-radius: 0; margin-bottom: 20px; padding-left: 0; font-size: 14px; } .h3, h3 { font-size: 1.45rem !important; } .custom-input:focus { box-shadow: none; border-bottom: 1px solid #F9B938; } .btn-orange-outline { border: 2px solid #F9B938; background: transparent; background-image: linear-gradient(to bottom, #DC9401, #F9B938); color: #fff; width: 100%; font-weight: 400; border-radius: 30px; padding: 10px 0; white-space: nowrap !important; } .btn { white-space: nowrap !important; } .btn-orange-outline:hover { background-image: linear-gradient(to bottom, #DC9401, #F9B938); color: #000; } .privacy-text { font-size: 12px; margin-top: 15px; text-align: center; color: #314151; } .privacy-text a { color: #F9B938; text-decoration: none; } .input-wrapper { position: relative; } .custom-input { border-bottom: 1px solid #E6A114; border-radius: 0; padding: 5px 0; font-size: 14px; background-color: transparent; position: relative; z-index: 1; } .leading-section { padding: 60px 100px; min-height: 100vh; display: flex; align-items: center; } .leading-right { gap: 70px !important; } .display-6 b { color: #DC9401; font-size: 40px; font-weight: 700; } .display-6 { color: #2F2202; font-size: 26px; } .leading-section .box_1 { position: relative; } .leading-section .box .circle { width: 70px; height: 70px; border-radius: 100%; background-color: #fff; position: absolute; top: -30%; left: 35%; padding-top: 10px; } .leading-section .box_2 { position: relative; } .leading-section .box .circle_2 { width: 70px; height: 70px; border-radius: 100%; background-color: #fff; position: absolute; top: -30%; left: 35%; padding-top: 10px; } .lead { font-size: 1.1rem !important; font-weight: 300; } .leading-section .box_3 { position: relative; } .leading-section .box .circle_3 img, .leading-section .box .circle img, .leading-section .box .circle_2 img, .leading-section .box .circle_4 img { width: auto; height: 50px; } .leading-section .box .circle_3 { width: 70px; height: 70px; border-radius: 100%; background-color: #FFFF; position: absolute; top: -30%; left: 35%; padding-top: 10px; } .leading-section .box_4 { position: relative; } .leading-section .box .circle_4 { width: 70px; height: 70px; border-radius: 100%; background-color: #fff; position: absolute; top: -30%; padding-top: 10px; left: 35%; } .leading-section .box { border-radius: 15px; /* width: auto; */ padding-top: 40px !important; color: #fff; white-space: nowrap; } .leading-section .box_1 { padding: 25px 50px; } .leading-section .box_2 { padding: 25px 30px; } .leading-section .box_1 { background-color: #df9d19; } .leading-section .box_2 { background-color: #2F2202; } .leading-section .box_3 { background-color: #df9d19; padding: 25px 40px; } .leading-section .box_4 { background-color: #2F2202; padding: 25px 50px; } .hero-section textarea { border: 1px solid #E6A114; } textarea:focus { box-shadow: none !important; outline: none !important; border: 1px solid #E6A114 !important; } .cliets-section .client_main { background-color: #2F2202; width: 70%; color: #fff; border-radius: 20px; padding: 25px; padding-top: 40px; padding-bottom: 40px; } .wait-section .wait_main { background-color: #2F2202; width: 70%; color: #fff; border-radius: 20px; padding: 30px; position: relative; padding-top: 56px; padding-bottom: 56px; } .wait-section .wait_main .stop_ { background-color: #fff; color: #d9a219; width: 86px; height: 83px; border-radius: 100%; font-weight: 800; padding-top: 30px; position: absolute; top: -18%; box-shadow: 2px 3px 6px -3px #000; } .hero-section .iti__flag-container { color: #000 !important; } .hero-section label { color: #272626; font-weight: 300 !important; } .hero-section .iti--separate-dial-code .iti__selected-flag { background-color: #fff !important; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 0; } .stat-box { border-radius: 12px; padding: 25px 15px; text-align: center; color: white; display: flex; flex-direction: column; align-items: center; } .stat-box h4 { font-size: 22px; font-weight: bold; margin: 10px 0 5px; } .stat-box p { font-size: 1.25rem; margin: 0; font-weight: bold; white-space: nowrap; } .stat-box img { width: auto; height: 40px; } .stat-box.yellow { background-color: #DC9401; color: #fff; /* padding: 20px 50px; */ } .stat-box.black { background-color: #2B1905; color: #fff; } /* .why-choose-section .col-md-5 { padding-left: 24px !important; } */ .why-choose-section .stat-box { position: relative; width: 277px; padding: 54px 26px; } .why-choose-section .pera_g { padding-right: 4rem; } .why-choose-section .stat-box .icon_box { position: absolute; top: -22%; background-color: #fff; border-radius: 100%; width: 68px; height: 68px; padding-top: 12px; align-items: center; text-align: center; box-shadow: 0px 5px 26px -7px #000; } .hero-section .iti__flag-container { color: #000 !important; } .hero-section label { color: #272626; font-weight: 300 !important; } .hero-section .iti--separate-dial-code .iti__selected-flag { background-color: #fff !important; } .modal-header .form-box { background: transparent !important; box-shadow: none !important; } .modal-backdrop.show { z-index: 1055 !important; } .modal.show { z-index: 1060 !important; } .form-box_modal { padding: 0 !important; } .iti--separate-dial-code .iti__selected-flag { background-color: transparent !important; } .single-box { height: 576px; } .card { position: relative; width: 360px; height: 400px; overflow: hidden; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); cursor: pointer; } .card img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: filter 0.4s ease; } .card-content { position: absolute; width: 100%; height: 100%; z-index: 2; color: #fff; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; transition: all 0.4s ease; background: rgba(0, 0, 0, 0.2); } .card-content h2 { font-size: 20px; margin: 0; transition: opacity 0.3s ease; } .card-content p { opacity: 0; text-align: center; font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.4s ease; width: 100%; padding-left: 23px; padding-right: 23px; } .card:hover img { filter: blur(6px); } .card:hover .card-content { justify-content: center; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px); } .card:hover .card-content h2 { opacity: 0; } .card:hover .card-content p { opacity: 1; } .customer_featured .peragrapgh { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .customer_featured .pera_1 { background-color: #2F2202; color: #fff; width: 50%; border-radius: 20px; padding: 40px 40px; } .display-6 { color: #DC9401; font-weight: 700 !important; font-size: 3rem; } /* 🔻 Media Queries for Responsiveness */ /* @media (max-width: 1200px) { .card { height: 380px; } .card-content h2 { font-size: 18px; } .card-content p { font-size: 15px; } } */ /* @media (max-width: 992px) { .card { height: 360px; } .card-content h2 { font-size: 17px; } .card-content p { font-size: 14px; } } */ /* @media (max-width: 768px) { .customer_featured .pera_1 { width: 100% !important; } .display-6 { color: #DC9401; font-weight: 700 !important; font-size: 1.5rem; } .card { height: 340px; } .card-content h2 { font-size: 16px; } .card-content p { font-size: 13px; } } */ /* @media (max-width: 576px) { .clutch_ratting_box { padding: 0 !important; } .card { height: 320px; } .why-choose-section .col-md-5 { padding-left: 24px !important; } .card-content h2 { font-size: 15px; } .card-content p { font-size: 12px; } } */ /* @media (max-width: 400px) { .card { height: 300px; } .card-content h2 { font-size: 14px; } .card-content p { font-size: 11px; } } */ /* @media (max-width: 280px) { .card { height: 280px; } .card-content h2 { font-size: 12px; } .card-content p { font-size: 10px; } } */ /* Max-width: 1200px */ /* @media (max-width: 1200px) { .client_main h2 { font-size: 28px; text-align: center; } .client_main p { font-size: 16px; text-align: center; padding: 0 20px; width: 100% !important; } .logo-slider { flex-wrap: wrap; gap: 20px; justify-content: center; } .logo-slider div { flex: 1 1 30%; max-width: 120px; display: flex; justify-content: center; } .logo-slider img { max-width: 100%; height: auto; } .wait_main { padding: 0 30px; text-align: center; } .wait_main h2.main_head { font-size: 28px; } .wait_main p { font-size: 16px; width: 100% !important; } .wait_main .btn { font-size: 16px; padding: 10px 25px; } .hero-section h1 { font-size: 36px; } .hero-section p.lead { font-size: 18px; } .section-heading h2 { font-size: 32px; } .main_tabs, .tabs_right { padding: 40px 15px; } .nav-pills .nav-link { font-size: 15px; padding: 12px 18px; } .tech-box { font-size: 15px; padding: 12px 16px; } } /* Max-width: 992px */ /* @media (max-width: 992px) { .client_main h2 { font-size: 24px; } .client_main p { font-size: 15px !important; } .logo-slider div { flex: 1 1 40%; max-width: 100px; } .wait_main h2.main_head { font-size: 24px; } .wait_main p { font-size: 15px !important; } .wait_main .btn { font-size: 15px; padding: 8px 22px; } .hero-section h1 { font-size: 32px; } .hero-section p { font-size: 15px; } .form-box { padding: 25px; } .section-heading h2 { font-size: 28px; } .section-heading p { font-size: 15px; } .main_tabs, .tabs_right { padding: 30px 15px; } .nav-pills .nav-link, .tech-box { font-size: 14px; } .why-choose-section .stat-box { width: 100% !important; height: 100% !important; } .why-choose-section .col-md-5 { padding-left: 0px; } } */ /* Max-width: 768px */ /* @media (max-width: 768px) { .client_main { padding: 0 15px; } .why-choose-section .pera_g { padding-right: 0 !important; } .client_main h2 { font-size: 22px; } .logo-slider div { flex: 1 1 45%; max-width: 90px; } .wait_main { padding: 0 20px; } .wait_main h5 { font-size: 18px; } .wait_main h2.main_head { font-size: 22px; } .wait_main p { font-size: 14px; } .wait_main .btn { font-size: 14px; padding: 8px 20px; } .stats-grid { grid-template-columns: 1fr; padding-top: 50px; } .wait-section .wait_main, .cliets-section .client_main { width: 100% !important; } .hero-section .row { flex-direction: column; } .hero-section .col-md-7, .hero-section .col-md-5 { width: 100%; padding: 0; } .hero-section h1 { font-size: 28px; text-align: center; } .hero-section p { text-align: center; } .hero-section .d-flex.align-items-center { justify-content: center; flex-wrap: wrap; } .form-box { margin-top: 30px; } .main_tabs, .tabs_right { border-radius: 20px; margin-bottom: 20px; padding: 20px; } .section-heading h2 { font-size: 24px; } .section-heading p { font-size: 14px; } .nav-pills .nav-link { font-size: 14px; padding: 10px 15px; } .tech-box { font-size: 13px; gap: 10px; padding: 10px 14px; } .tech-box img { width: 26px; height: 26px; } } */ /* Max-width: 767px */ /* @media (max-width: 767px) { .form-box .row>div { margin-bottom: 15px; width: 100%; } .main_tabs { width: 100% !important; height: 100% !important; } } */ /* Max-width: 576px */ /* @media (max-width: 576px) { .card { position: relative; width: 100%; height: 400px; overflow: hidden; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); cursor: pointer; } .client_main h4, .client_main h2, .client_main p { text-align: center; } .logo-slider { gap: 15px; } .logo-slider div { flex: 1 1 50%; max-width: 80px; } .wait_main h5 { font-size: 17px; } .wait_main h2.main_head { font-size: 20px; } .wait_main p { font-size: 13px; } .wait_main .btn { font-size: 13px; padding: 7px 18px; } .hero-section h1 { font-size: 24px; } .form-box { padding: 20px; } .custom-input, textarea { font-size: 14px; } .btn { font-size: 14px; padding: 8px 16px; } .hero-section .d-flex.align-items-center.gap-3 { gap: 10px; flex-direction: column; } .section-heading h2 { font-size: 22px; } .nav-pills .nav-link { font-size: 13px; padding: 10px 12px; } .tech-box { font-size: 12px; padding: 10px 12px; } } */ /* Max-width: 400px */ /* @media (max-width: 430px) { .stop_ { font-size: 20px; } .single-box { height: 433px !important; } .client_main h2 { font-size: 20px; } .client_main p { font-size: 14px !important; } .logo-slider div { flex: 1 1 100%; max-width: 70px; } .wait_main h2.main_head { font-size: 18px; } .wait_main p { font-size: 14px !important; } .wait_main .btn { font-size: 12px; padding: 6px 16px; } .hero-section h1 { font-size: 20px; } .form-box { padding: 15px; } .btn { font-size: 13px; padding: 8px 14px; } .section-heading h2 { font-size: 20px; } .section-heading p { font-size: 13px; } .nav-pills .nav-link { font-size: 12px; padding: 8px 10px; } .tech-box { font-size: 12px; padding: 8px 10px; gap: 8px; } .tech-box img { width: 24px; height: 24px; } } */ /* Max-width: 300px */ /* @media (max-width: 300px) { .hero-section h1 { font-size: 18px; } .btn { padding: 6px 12px; font-size: 12px; } .form-box { padding: 10px; } .section-heading h2 { font-size: 18px; } .nav-pills .nav-link { font-size: 11px; padding: 6px 8px; } .tech-box { font-size: 11px; padding: 6px 8px; } .tech-box img { width: 20px; height: 20px; } } */ .web_faqs .faq-title { font-size: 36px; font-weight: 700; } .web_faqs .faq-subtitle { font-size: 18px; color: #555; width: 62% !important; } .web_faqs .accordion-button { background-color: #ffffff; font-weight: 500; box-shadow: none !important; transition: background-color 0.3s ease, border 0.3s ease; position: relative; color: #1d1e22; font-size: 18px; border: 1px solid #ddd; /* Default border */ border-radius: 0; } .web_faqs .accordion-button:not(.collapsed) { background-color: #FEF6F3; box-shadow: 0 6px 12px rgba(149, 158, 170, 0.12) !important; border: none; /* Remove border when active */ } .web_faqs .accordion-item:has(.accordion-collapse.show) { box-shadow: 0 6px 12px rgba(149, 158, 170, 0.12); border-radius: 6px; } .web_faqs .accordion-button::after { display: none; /* Hide default Bootstrap arrow */ } .web_faqs .icon-circle { width: 23px; height: 21px; border-radius: 50%; border: 2px solid #000; display: flex; align-items: center; justify-content: center; font-size: 21px; padding-bottom: 3px; font-weight: bold; transition: all 0.3s ease; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); } .web_faqs .accordion-button.collapsed .icon-plus { display: flex; color: #000; font-weight: bold; } .web_faqs .accordion-button:not(.collapsed) .icon-plus { display: none; } .web_faqs .accordion-button.collapsed .icon-minus { display: none; } .web_faqs .accordion-button:not(.collapsed) .icon-minus { display: flex; color: #000; } .web_faqs .accordion-item { border: none; border-bottom: 1px solid #eee; transition: box-shadow 0.3s ease; margin-bottom: 15px; /* Add gap between items */ } .web_faqs .accordion-body { font-size: 16px; background-color: #ffffff; } .web_faqs .accordion-body .faq_link { color: #ECAB11; text-decoration: none; } .web_faqs { background-color: #fff; } .web_faqs .accordion-body { padding-left: 20px; padding-right: 22px; } .web_faqs { /* max-width: 800px; */ margin: auto; background-color: #fff; } .web_faqs .faq-title { font-size: 36px; font-weight: 700; text-align: left; margin-bottom: 10px; } .web_faqs .faq-question .fa-plus, .web_faqs .faq-question .fa-minus { font-size: 13px; padding-top: 4px; } .web_faqs .faq-subtitle { font-size: 18px; color: #555; text-align: left; width: 62%; /* margin: 0 auto 40px; */ } .faq-item { border-bottom: 1px solid #eee; margin-bottom: 15px; transition: box-shadow 0.3s ease; position: relative; } .faq-question { background-color: #ffffff; font-weight: 500; font-size: 18px; padding: 20px; border: 1px solid #ddd; border-radius: 0; position: relative; cursor: pointer; transition: all 0.3s ease; } .faq-item.active .faq-question { background-color: #E59F11; box-shadow: 0 6px 12px rgba(149, 158, 170, 0.12); border: none; } .faq-answer { max-height: 0; overflow: hidden; background-color: #ffffff; padding: 0 20px; font-size: 16px; color: #333; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.active .faq-answer { padding: 20px; max-height: 1000px; } .faq_link { color: #ECAB11; text-decoration: none; } .icon-circle { width: 23px; height: 24px; border-radius: 50%; border: 2px solid #000; display: flex; align-items: center; justify-content: center; font-size: 21px; padding-bottom: 3px; font-weight: bold; transition: all 0.3s ease; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); } .icon-plus, .icon-minus { display: none; font-size: 20px; } .faq-question.collapsed .icon-plus { display: flex; color: #000; } .faq-question:not(.collapsed) .icon-minus { display: flex; color: #000; } .web_faqs { background-color: #fff !important; padding-top: 40px; padding-bottom: 40px; } .single-blog { height: 615px !important; } .faq-item .icon-minus { display: none; } .faq-item.active .icon-plus { display: none; } .faq-item.active .icon-minus { display: flex; } /* Show plus by default, hide minus */ .faq-question .icon-plus { display: flex !important; } .faq-question .icon-minus { display: none !important; } /* When active, reverse the visibility */ .faq-item.active .faq-question .icon-plus { display: none !important; } .faq-item.active .faq-question .icon-minus { display: flex !important; } .web_testimonial .container { max-width: 1000px; margin: 100px auto; } .web_testimonial .testimonial-slider { position: relative; } .web_testimonial .testimonial-card { background-color: white; border-radius: 12px; padding: 30px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); position: relative; } .web_testimonial .user-info { display: flex; align-items: center; margin-bottom: 10px; } .web_testimonial .user-info img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #ddd; margin-right: 15px; } .web_testimonial .user-details h6 { margin: 0; font-weight: bold; } .web_testimonial .user-details small { color: #777; } .country-info { display: flex; align-items: center; margin-bottom: 10px; } .country-info img { width: 24px; margin-right: 10px; } .web_testimonial .rating { font-size: 1.1rem; color: gold; margin-bottom: 15px; } .web_testimonial .testimonial-card p { font-size: 0.95rem; color: #444; line-height: 1.6; } .web_testimonial .slick-prev, .web_testimonial .slick-next { position: absolute !important; top: -28px !important; background: #fff !important; border: 1px solid #ccc !important; border-radius: 50% !important; width: 39px; height: 39px; z-index: 2; display: flex !important; justify-content: center; align-items: center; opacity: 1; } .web_testimonial .slick-prev { right: 55px !important; left: auto !important; } .web_testimonial .slick-next { right: 10px !important; } .web_testimonial .slick-prev::before, .web_testimonial .slick-next::before { font-size: 16px; color: #000; } .case-study-wrapper { display: flex; flex-wrap: wrap; padding-left: 110px; padding-right: 120px; padding-bottom: 50px; padding-top: 50px; border-radius: 22px; } .case-study-wrapper .left-img { flex: 1; min-width: 300px; border-radius: 20px 0 0 20px; } .case-study-wrapper .left-img img { width: 100%; height: 520px; /* 🔧 Fixed height */ object-fit: cover; display: block; border-radius: 20px 0 0 20px; } .case-study-wrapper .right-content { flex: 1; background-color: #FFF8E6; padding: 40px 30px; display: flex; border-radius: 0px 20px 20px 0; flex-direction: column; justify-content: flex-start; /* 🔧 Align content to top */ } .case-study-wrapper .case-study-button { border: 2px solid #DC9401; color: #2C2301; background-color: white; font-weight: 600; padding: 10px 24px; text-decoration: none; display: inline-block; border-radius: 6px; transition: all 0.3s ease; } .case-study-wrapper .case-study-button:hover { background-color: #DC9401; color: white; } .case-study-wrapper .badge-custom { background-color: #F8E5BE; color: #2C2301; font-size: 0.9rem; padding: 6px 12px; border-radius: 4px; display: inline-block; margin-bottom: 10px; width: 16%; } .case-study-wrapper .right-content h4 { color: #2C2301; } .case-study-wrapper .right-content p { color: #3D2D0F; } .case-study-wrapper .right-content b { color: #DC9401; } /* @media (max-width: 768px) { .case-study-wrapper .case-study-wrapper { flex-direction: column; } .case-study-wrapper .left-img img { height: auto; } .case-study-wrapper .left-img, .case-study-wrapper .right-content { width: 100%; } } */ .all-section-tabs { padding-top: 50px; padding-bottom: 50px; } .all-section-tabs .tab-container { display: flex; padding: 50px; gap: 30px; background-color: #2F2202; border-radius: 20px; } .all-section-tabs .tab-nav { flex: 0 0 250px; display: flex; flex-direction: column; gap: 30px; } .all-section-tabs .tab-nav button { background: none; border: none; font-size: 18px; padding: 15px; width: 100%; text-align: left; position: relative; color: #fff; font-weight: 500; transition: all 0.3s; white-space: nowrap; } .all-section-tabs .tab-nav button:hover::after, .all-section-tabs .tab-nav button.active::after { width: 100%; } .all-section-tabs .tab-nav button::after { content: ''; position: absolute; bottom: 10px; left: 0; height: 2px; background-color: #F5A400; width: 0%; transition: width 0.4s ease; } .all-section-tabs .tab-nav button.active { background-color: #F5A400; color: white; border-radius: 10px; } .all-section-tabs .tab-content { flex: 1; background: white; border-radius: 10px; padding: 40px; min-height: 400px !important; position: relative; overflow: hidden; } .all-section-tabs .carousel-card { padding: 30px; border-radius: 10px; text-align: center; background: none !important; height: auto !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin-bottom: 40px; } .all-section-tabs .carousel-card h2 { font-size: 24px; font-weight: 600; margin-bottom: 15px; color: #333; } .all-section-tabs .carousel-card p { font-size: 16px; color: #555; } .all-section-tabs .slick-prev, .all-section-tabs .slick-next { background-color: #DC9401; border: none; border-radius: 50%; width: 40px; height: 40px; color: white; font-size: 20px; line-height: 40px; z-index: 100; position: absolute; bottom: -80px; } .all-section-tabs .slick-prev { left: 42%; } .all-section-tabs .slick-next { right: 42%; } .all-section-tabs .slick-prev:before, .all-section-tabs .slick-next:before { display: none; } .all-section-tabs .custom-dots { text-align: center; margin-top: -10px; position: relative; } .all-section-tabs .custom-dots .dot { display: inline-block; width: 10px; height: 10px; background-color: #ccc; border-radius: 50%; margin: 0 5px; cursor: pointer; transition: background-color 0.3s; } .all-section-tabs .custom-dots .dot.active { background-color: #DC9401; } .all-section-tabs .tab-pane { display: none; } .all-section-tabs .tab-pane.active { display: block; } /* @media (max-width: 768px) { .all-section-tabs .tab-container { flex-direction: column; } .all-section-tabs .slick-prev { left: 35%; } .all-section-tabs .slick-next { right: 35%; } } */ .slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover { color: white !important; background-color: #f5a400 !important; } .all-section-tabs .slick-prev, .all-section-tabs .slick-next { top: 115% !important; } .web_dev_btn:hover { color: #000 !important; } /* Media Queries for Responsiveness */ /* ========================================================================== 2. RESPONSIVE OPTIMIZATION (THE FIX) ========================================================================== */ /* Mobile & Tablet Overrides (max-width: 991px) */ @media (max-width: 991px) { .web_portal_section { flex-direction: column; text-align: center; padding: 40px 5%; } .content { max-width: 100%; flex: 1 1 auto; } .content h1 { font-size: 28px; } .images { flex: 1 1 auto; min-height: auto; margin-top: 30px; } .images img { height: auto !important; width: 100%; max-width: 400px; } .case-study-wrapper { padding: 30px 15px; } .case-study-wrapper .left-img, .case-study-wrapper .right-content { border-radius: 15px; width: 100%; flex: none; } .case-study-wrapper .left-img img { border-radius: 15px 15px 0 0; height: 300px; } .case-study-wrapper .right-content { border-radius: 0 0 15px 15px; } .all-section-tabs .tab-container { flex-direction: column; padding: 20px; } .all-section-tabs .tab-nav { flex: none; width: 100%; } .all-section-tabs .tab-content { padding: 20px; min-height: auto !important; } } /* Specific Mobile Fixes (max-width: 768px) */ @media (max-width: 768px) { .main_tabs { height: auto !important; border-radius: 20px 20px 0 0; padding: 30px 15px; } .tabs_right { border-radius: 0 0 20px 20px; padding: 20px 10px; } .stats-grid { grid-template-columns: 1fr; gap: 30px; } .why-choose-section .stat-box { width: 100% !important; margin: 0 auto; } .section-heading h2 { font-size: 24px; } .display-6 { font-size: 1.8rem; } .portal_scroll { flex-direction: column; padding: 40px 5%; } .portal_scroll .left-section, .portal_scroll .right-section { width: 100%; border: none; padding: 10px 0; } .portal_scroll .card { height: auto !important; } .comparison-table thead th { font-size: 14px; padding: 10px; } .comparison-table tbody td { font-size: 13px; padding: 10px; } .development, .section-wrap, .key_featurs, .different_between, .industries, .why_business { padding: 40px 5% !important; } /* Fixed height issues on blog/cards */ .single-blog, .single-box { height: auto !important; padding-bottom: 20px; } /* Center aligning forms on mobile */ .hero-section .col-md-5 { display: flex; justify-content: center; width: 100%; } .form-box { margin-top: 30px; max-width: 100%; } } /* Extra Small Devices (max-width: 480px) */ @media (max-width: 480px) { .content h1 { font-size: 24px; } .content p { font-size: 16px; } .btn-orange-outline, .btn { width: 100%; white-space: normal !important; } .industry-card { margin-bottom: 10px; } .web_faqs .faq-subtitle { width: 100% !important; } .pc-title { font-size: 1rem; } .pc-text { font-size: 0.85rem; } } /* Animations reset for better mobile performance */ @media (prefers-reduced-motion: reduce) { .content, .images { animation: none; } } /* ========================================================================== PERFECT MOBILE RESPONSIVE FIXES (Based on Screenshots) ========================================================================== */ @media (max-width: 768px) { /* 1. Fix Boxes Overflow & Left Sticking (Image 1, 2, 3) */ .cc-card, .stat-box, .feature-box, .industry-card, .glass-card, .card, .wait_main, .client_main { width: 100% !important; /* Force full width on mobile */ max-width: 100% !important; height: auto !important; /* Height ko auto kiya taake text andar rahe */ min-height: unset !important; margin-left: 0 !important; margin-right: 0 !important; padding: 25px 20px !important; /* Padding for breathing space */ word-wrap: break-word !important; /* Long words break karega */ overflow: visible !important; } /* Padding for sections to prevent left sticking */ section, .container-fluid, .development, .web_portal_section, .why_business, .industries { padding-left: 15px !important; padding-right: 15px !important; } /* 2. Fix Tab Button Text Cutting (Image 4) */ .nav-pills .nav-link, .tech-tabs .nav-link, .all-section-tabs .tab-nav button { white-space: normal !important; /* Text next line pe chala jayega */ word-break: break-word !important; text-align: center !important; width: 100% !important; display: block !important; padding: 15px 10px !important; font-size: 14px !important; line-height: 1.3 !important; } /* 3. Fix Slider Arrows Hiding (Image 5) */ .all-section-tabs .slick-prev, .all-section-tabs .slick-next { bottom: -60px !important; /* Box ke neeche se bahar nikala */ top: auto !important; z-index: 99 !important; /* Sabse upar dikhega */ opacity: 1 !important; visibility: visible !important; } .all-section-tabs .slick-prev { left: 30% !important; } .all-section-tabs .slick-next { right: 30% !important; } .all-section-tabs .tab-content { min-height: auto !important; padding-bottom: 80px !important; /* Arrows ke liye jagah banai */ } /* 4. Fix Hero Form & Buttons */ .form-box { max-width: 100% !important; margin-top: 40px !important; } .btn, .cta-btn, .case-study-button { width: 100% !important; /* Mobile pe buttons full width */ white-space: normal !important; display: block !important; text-align: center; } /* 5. Process Circle & Small Icons Fix */ .main-circle { width: 260px !important; height: 260px !important; margin: 0 auto !important; } .small-circle { width: 45px !important; height: 45px !important; font-size: 16px !important; } /* Fixed Image Heights Removal */ .images img, .left_portal img, .main-section img { height: auto !important; width: 100% !important; max-width: 100% !important; } /* 6. Rating Boxes Fix */ .rating_box_new, .clutch_ratting_box { padding: 20px !important; } } /* Extra small devices fix */ @media (max-width: 480px) { .content h1, .display-6, .main-heading { font-size: 22px !important; } .lead { font-size: 14px !important; } } /* ========================================================================== PIXEL PERFECT MOBILE RESPONSIVE (Fixing all 5 Images) ========================================================================== */ @media (max-width: 768px) { /* 1. Fix Text Overflow in Boxes (Image 1, 2, 3, 7, 8) */ .cc-card, .stat-box, .feature-box, .industry-card, .glass-card, .card, .wait_main, .client_main, .choose-box, .rating-box { width: 100% !important; max-width: 100% !important; height: auto !important; /* Fixed height khatam, ab text bahar nahi niklega */ min-height: unset !important; padding: 35px 20px !important; /* Ander space barhai */ margin-bottom: 20px !important; /* Boxes ke beech gap */ display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; overflow: visible !important; } /* Text inside boxes fix */ .cc-card-text, .pc-text, .lead, p { width: 100% !important; white-space: normal !important; /* Text wrap hoga */ overflow: visible !important; } /* 2. Fix Clumped Buttons/Tabs (Image 4 & 5) */ .nav-pills .nav-link, .tech-tabs .nav-link, .all-section-tabs .tab-nav button, .btn, .cta-btn { margin-bottom: 15px !important; /* Buttons ke darmiyan gap add kiya */ width: 100% !important; display: block !important; white-space: normal !important; /* Lamba text next line pe jayega */ padding: 15px !important; text-align: center !important; border-radius: 10px !important; } /* 3. Fix Slider Arrows & Dots Gap (Edited Image) */ .all-section-tabs .slick-prev, .all-section-tabs .slick-next { bottom: -85px !important; /* Dots se niche move kiya taake gap banay */ top: auto !important; opacity: 1 !important; visibility: visible !important; } .all-section-tabs .slick-prev { left: 25% !important; } .all-section-tabs .slick-next { right: 25% !important; } /* Dots position control */ .all-section-tabs .custom-dots { margin-top: 20px !important; padding-bottom: 40px !important; } .all-section-tabs .tab-content { padding-bottom: 100px !important; /* Arrows ke liye extra jagah */ } /* 4. Fix Content Sticking to Edges (Left/Right) */ section, .container-fluid, .web_portal_section, .why_business, .industries, .development { padding-left: 20px !important; padding-right: 20px !important; } /* 5. Consultation "STOP" Badge Fix (Image 6) */ .wait_main .stop_ { top: -45px !important; /* Position adjust ki */ left: 50% !important; transform: translateX(-50%) !important; width: 70px !important; height: 70px !important; font-size: 16px !important; padding-top: 22px !important; } /* 6. Form Field Spacing */ .form-box .row>div { margin-bottom: 10px !important; } } /* Extra Small (max-width: 480px) */ @media (max-width: 480px) { h1.display-5, .main-heading, .cc-title { font-size: 24px !important; } .lead { font-size: 15px !important; } .stat-box p { font-size: 16px !important; white-space: normal !important; } }
/* ==========================================================================
FINAL PIXEL-PERFECT MOBILE FIXES (CoderChaps)
========================================================================== */
@media (max-width: 768px) {
/* 1. FIXED HEIGHTS & OVERFLOW REMOVAL (Image 1, 2, 3) */
.cc-card,
.stat-box,
.feature-box,
.industry-card,
.glass-card,
.card,
.choose-box,
.rating-box,
.single-box,
.single-blog {
width: 100% !important;
height: auto !important; /* Fixed height khatam, text ab andar rahega */
min-height: unset !important;
padding: 40px 20px !important; /* Breathing space add kiya */
margin-bottom: 25px !important; /* Boxes ke beech perfect gap */
display: block !important;
overflow: visible !important;
}
/* Text break fix taake lafz bahar na niklein */
.cc-card-title, .card-title-custom, h3, h4, h5 {
word-wrap: break-word !important;
white-space: normal !important;
}
/* 2. BUTTONS & TABS GAP FIX (Image 4) */
.nav-pills .nav-link,
.tech-tabs .nav-link,
.all-section-tabs .tab-nav button {
margin-bottom: 12px !important; /* Buttons ke beech gap */
width: 100% !important;
display: block !important;
white-space: normal !important; /* Lamba text wrap hoga */
padding: 15px 10px !important;
text-align: center !important;
line-height: 1.3 !important;
}
/* Hero buttons gap */
.hero-section .d-flex.gap-3 {
gap: 15px !important;
flex-direction: column !important;
}
/* 3. SLIDER ARROWS & DOTS GAP (Image 5 - Edited) */
.all-section-tabs .slick-prev,
.all-section-tabs .slick-next {
bottom: -100px !important; /* Dots se kafi niche rakha taake gap nazar aaye */
top: auto !important;
z-index: 99 !important;
}
/* Arrows ko thoda side par kiya taake wo center mein clump na hon */
.all-section-tabs .slick-prev { left: 20% !important; }
.all-section-tabs .slick-next { right: 20% !important; }
/* Space for arrows below slider */
.all-section-tabs .tab-content {
padding-bottom: 120px !important;
}
/* 4. EDGE STICKING FIX (Prevent content touching screen sides) */
section,
.container-fluid,
.web_portal_section,
.why_business,
.industries,
.development,
.case-study-wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 5. STOP BADGE & TESTIMONIAL BOX FIX */
.wait_main .stop_ {
top: -42px !important;
width: 75px !important;
height: 75px !important;
font-size: 18px !important;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0 !important;
}
.testimonial-card {
position: relative !important; /* Testimonial mobile par overlap nahi karega */
right: 0 !important;
top: 0 !important;
width: 100% !important;
margin-top: 20px !important;
}
/* 6. IMAGE RESPONSIVENESS */
.images img, .left_portal img, .main-section img, .case-study-wrapper .left-img img {
height: auto !important;
width: 100% !important;
border-radius: 15px !important;
}
}
/* For Extra Small Phones (max-width: 400px) */
@media (max-width: 400px) {
.display-5, .main-heading {
font-size: 20px !important;
}
.lead {
font-size: 14px !important;
}
}