/* ============================ CONSOLIDATED MASTER CSS - Common/base rules first (identical across all files) - Then per-file overrides for selectors that differed - To use a file-specific variant, add one of: .custom-web-solution .ecommerce .mobile-app .search-engine .web-portal .website-development .ux-ui-design Example: ... ============================ */ /* ========================= BASE (same in ALL files) ========================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow: -moz-scrollbars-none; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; } .service-container { max-width: 1680px; margin-inline: auto; padding-inline: 30px; background-color: #000000; overflow-x: hidden; } /* Remove all default focus/active highlights across the site */ * { outline: none !important; -webkit-tap-highlight-color: transparent; } button, a { outline: none !important; background: none; -webkit-tap-highlight-color: transparent; } a { all: unset; } body { transition: background-color 0.4s ease; font-family: "Poppins", sans-serif; background-color: #000000; overflow-x: hidden; } .flex { display: flex; align-items: center; justify-content: space-between; } h1, h2, h3, h4 { font-family: "Kalnia", serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; color: #fff7ec; } hr { border: none; height: 0.8px; background-color: black; } /* Loading animation base */ .container-load { width: 100vw; height: 100vh; overflow: hidden; background-color: #ff0c00; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: all 0.5s ease-out; transform: scale(1); opacity: 1; } .container-load.hidden { transform: scale(0.01); opacity: 0.6; pointer-events: none; } .load-ani { width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center; transition: opacity 0.6s ease-out; } .container-load.hidden .load-ani { opacity: 0; } /* text-load-ani.active is identical across files */ .text-load-ani.active { font-family: "Raleway Dots", sans-serif; font-weight: 400; font-style: normal; } /* keyframes identical across files */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0); } } /* Section skeletons and image masks (same in all files) */ .webDev-top-section { padding-top: 160px; padding-bottom: 60px; } .img-webDev-top-section { position: relative; width: 100%; height: 115vh; border-radius: 7px; overflow: hidden; } .img-webDev-top-section img { object-fit: cover; width: 100%; height: 100%; border-radius: 7px; transform: scale(1.4); opacity: 0; } .mask { position: absolute; top: 0; width: 50%; height: 100%; background: #000000; z-index: 2; } .mask-left { left: 0; } .mask-right { right: 0; } .second-webDev-top-section { padding-top: 20px; padding-bottom: 50px; } .paira-second-webDev-top-section p { font-size: 1.7vw; color: #fff7ec; text-align: justify; } .middle-webDev-section { padding-top: 10px; padding-bottom: 30px; } .left-middle-webDev-section { width: 50%; } .heading-left-middle-webDev-section h3 { font-size: 2.5vw; padding-bottom: 20px; font-weight: 600; } /* many files use 1.3vw or 1.4vw for .paira-left-middle... -> handled below as per-file overrides */ /* right / second middle / bottom sections are shared structure */ .right-middle-webDev-section { position: relative; width: 30vw; height: 70vh; border-radius: 7px; overflow: hidden; } .right-middle-webDev-section img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; transform: scale(1.4); opacity: 0; } .second-middle-webDev-section { padding-top: 20px; padding-bottom: 30px; flex-direction: row-reverse; } .left-second-middle-webDev-section { width: 50%; } .right-second-middle-webDev-section { position: relative; width: 30vw; height: 70vh; border-radius: 7px; overflow: hidden; } .right-second-middle-webDev-section img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; transform: scale(1.4); opacity: 0; } .bottom-section { padding-top: 30px; padding-bottom: 30px; } .img-bottom-section { position: relative; width: 100%; height: 90vh; border-radius: 7px; overflow: hidden; } .img-bottom-section img { object-fit: cover; width: 100%; height: 100%; border-radius: 7px; transform: scale(1.4); opacity: 0; } .text-bottom-section p { padding-left: 16vw; } /* company history basic structure (spacing overrides handled per-file) */ .company-history-section { gap: 120px; justify-content: space-between; } .full-detlise-company-history-section { width: 100%; } .full-detlise-company-history-section p { font-size: 1.3vw; text-align: justify; padding-bottom: 10px; color: #fff7ec; } #readMoreBtn { display: none; } /* ================================ PER-FILE OVERRIDES (values that differed) To use any of these, add root class on : ... File slugs: custom-web-solution ecommerce mobile-app search-engine web-portal website-development ux-ui-design ================================= */ /* ---- .text-load-ani p (loading text size differs per file) ---- */ /* fix for all */ .text-load-ani p { /* From: Custom Web Solution */ font-size: 3em; opacity: 0; animation: fadeIn 1.5s ease-in forwards; } /* ---- .heading-webDev-top-section h1 (Search Engine had a smaller h1) ---- */ /* Base already has .heading-webDev-top-section h1 assumed 6vw in base. Override Search Engine which uses 4.5vw. */ /* Search Engine override */ .heading-webDev-top-section h1 { /* From: Search Engine */ font-size: 4.5vw; padding-bottom: 70px; color: #fff7ec; } /* ---- .heading-second-webDev-top-section h2 (some files use 2.8vw, some 3vw) ---- */ /* Base is intentionally left out (varying values). Provide per-file overrides. */ /* fix for all */ .heading-second-webDev-top-section h2 { font-size: 2.8vw; /* From: Custom Web Solution */ padding-bottom: 20px; } /* customWebsol-our-process heading */ .customWebSol-ourprocess{ font-size:2.5vw; padding-bottom: 10px; } /* ---- .paira-left-middle-webDev-section p (1.3vw vs 1.4vw differences) ---- */ /* Fix for all (1.3vw) */ .paira-left-middle-webDev-section p { font-size: 1.3vw; /* From: Custom Web Solution */ color: #fff7ec; text-align: justify; } /* ---- .paira-left-second-middle-webDev-section p (same split, handle per-file) ---- */ /* fix for all (1.3vw) */ .paira-left-second-middle-webDev-section p { font-size: 1.3vw; color: #fff7ec; text-align: justify; } /* ---- .name-company-history-section h4 (margin-top varied a lot) ---- */ /* Because margin-top differs per file, provide overrides */ /* Custom Web Solution (most negative: -170px) */ .custom-web-solution-name-company-history-section h4 { margin-top: -170px; /* From: Custom Web Solution */ font-size: 4vw; padding-bottom: 20px; width: 100%; font-weight: 600; } /* E-commerce */ .ecommerce-name-company-history-section h4 { margin-top: -125px; /* From: E-commerce */ font-size: 4vw; padding-bottom: 20px; width: 100%; font-weight: 600; } /* Mobile App */ .mobile-app-name-company-history-section h4 { margin-top: -140px; /* From: Mobile App */ font-size: 4vw; padding-bottom: 20px; width: 100%; font-weight: 600; } /* Search Engine */ .search-engine-name-company-history-section h4 { margin-top: -130px; /* From: Search Engine */ font-size: 4vw; padding-bottom: 20px; width: 100%; font-weight: 600; } /* Web Portal */ .web-portal-name-company-history-section h4 { margin-top: -105px; /* From: Web Portal */ font-size: 4vw; padding-bottom: 20px; width: 100%; font-weight: 600; } /* Website Development (least negative) */ .website-development-name-company-history-section h4 { margin-top: -70px; /* From: Website Development */ font-size: 4vw; padding-bottom: 20px; width: 100%; font-weight: 600; } /* UX & UI Design */ .ux-ui-design-name-company-history-section h4 { margin-top: -125px; /* From: UX & UI Design */ font-size: 4vw; padding-bottom: 20px; width: 100%; font-weight: 600; } /* ---- .company-history-section padding differences ---- */ /* Some files add padding-bottom:60px or use different padding-top. Provide per-file overrides */ /* Custom Web Solution (padding-top:40px) */ .custom-web-solution-company-history-section { padding-top: 40px; /* gap/justify already in base */ } /* E-commerce (40px) */ .ecommerce-company-history-section { padding-top: 40px; } /* Mobile App (40px) */ .mobile-app-company-history-section { padding-top: 40px; } /* Search Engine (60px top + 60px bottom) */ .search-engine-company-history-section { padding-top: 60px; padding-bottom: 60px; } /* Web Portal (60px top + 60px bottom) */ .web-portal-company-history-section { padding-top: 65px; padding-bottom: 65px; } /* Website Development (40px) */ .website-development-company-history-section { padding-top: 40px; } /* UX & UI Design (40px) */ .ux-ui-design-company-history-section { padding-top: 40px; } /* ---- .text-bottom-section presence / parent block differences ---- Note: earlier some file versions omitted the .text-bottom-section parent block. Here we include per-file parent definitions (if present). */ /* fix for all */ .text-bottom-section { border-top: 1px solid black; margin-top: 30px; padding-top: 20px; width: 35vw; margin-left: 59vw; padding-bottom: 15px; } /* ---- Menu and Footer (only Website Development had full menu + footer) ---- */ /* The complex menu and footer blocks are only present in the Website Development file. We include them scoped under .website-development so they don't interfere when you use other project styles. */ /* Website Development menu (scoped under .website-development) */ .menu-section { position: fixed; top: 0; left: 0; width: 100%; height: 85px; z-index: 1000; padding: 0 30px; display: flex; align-items: center; background: transparent; } .menu-top-right-section { margin-left: 30px; padding-left: 3px; background-color: #fff7ec; border-radius: 1.5px; cursor: pointer; font-size: 0.89em; } .menu-bottom-right-section { display: inline-block; margin-top: 10px; padding-left: 3px; background-color: #fff7ec; border-radius: 1.5px; cursor: pointer; font-size: 0.89em; } .menu-top-right-section p, .menu-bottom-right-section p { color: #fff7ec; } .menu-left-section { margin-top: -30px; cursor: pointer; flex-direction: row-reverse; } .menu-left-section p { font-size: 0.85em; font-weight: 500; font-family: "Poppins", sans-serif; color: #fff7ec; } .all-option-menu-left-section { display: none; position: absolute; overflow: hidden; z-index: 1000; top: -10px; right: 60px; color: #fff7ec; } .menu-left-section:hover .all-option-menu-left-section { display: block; animation: slideDown 0.3s ease-in-out; } @keyframes slideDown { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .option-menu-left-section { display: flex; flex-direction: column; margin-top: 37px; padding-right: 25px; align-items: left; padding-left: 5px; } .option-menu-left-section a { font-size: 0.85em; font-weight: 500; font-family: "Poppins", sans-serif; padding-top: 1px; } /* hover underline pseudo elements for menu (scoped) */ .option-menu-left-section .work { position: relative; display: inline-block; } .option-menu-left-section .work::after { content: ''; position: absolute; top: 19px; left: 0; width: 65%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } .option-menu-left-section .work:hover::after { width: 0; } /* ... similar menu pseudo elements for .about, .services, .contact, .faq ... */ .option-menu-left-section .about::after { content: ''; position: absolute; top: 19px; left: 0; width: 67%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } .option-menu-left-section .about:hover::after { width: 0; } .option-menu-left-section .services::after { content: ''; position: absolute; top: 19px; left: 0; width: 94%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } .option-menu-left-section .services:hover::after { width: 0; } .option-menu-left-section .contact::after { content: ''; position: absolute; top: 19px; left: 0; width: 100%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } .option-menu-left-section .contact:hover::after { width: 0; } .option-menu-left-section .faq::after { content: ''; position: absolute; top: 19px; left: 0; width: 40%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } .option-menu-left-section .faq:hover::after { width: 0; } /* Footer (scoped under .website-development) */ .footer-section { background-image: url('../Images/homeImg/fotterBgImg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; width: 101%; flex-direction: column; } .compony-name-top-footer-section { justify-content: center; align-items: center; text-align: center; } .top-footer-section h3 { font-size: 18vw; padding-bottom: 6vh; padding-top: 6vh; color: #fff7ec; margin: 0; margin-top: -30px; margin-bottom: -20px; justify-content: center; } .middle-footer-section { padding-bottom: 30px; } .left-middle-footer-section { background-color: #fff7ec; flex-direction: column; border-radius: 5px; padding-top: 25px; padding-left: 20px; margin-left: 20px; padding-bottom: 25px; width: 45%; padding-right: 20px; cursor: pointer; transform: background-color 0.5 ease-in; } .left-middle-footer-section:hover { background-color: #ff0c00; } .top-left-middle-footer-section p { font-size: 2.1em; padding-right: 30px; padding-bottom: 30px; width: 80%; line-height: 1.3em; } .left-text-bottom-top-left-middle-footer-section { background-color: #000813; display: inline-block; padding-top: 8px; padding-bottom: 8px; padding-right: 13px; padding-left: 13px; border-radius: 3px; } .middle-arrow { color: #fff7ec; } .right-middle-footer-section { display: flex; justify-content: space-between; align-items: center; justify-content: last baseline; gap: 60px; margin-right: 50px; margin-top: 80px; } .left-right-middle-footer-section p, .right-right-middle-footer-section p { color: #fff7ec; font-size: 0.7em; line-height: 1.8em; margin: 0; cursor: pointer; } .bottom-footer-section { padding-bottom: 5px; } .copyright { color: #fff7ec; font-size: 3em; padding-left: 20px; } .middle-bottom-footer-section { display: flex; justify-content: center; align-items: center; width: 100%; } .middle-bottom-footer-section hr { width: 90%; margin: 0 auto; border: 1px solid #fff7ec; } .right-bottom-footer-section p { color: #fff7ec; font-size: 3em; padding-right: 40px; } .last-footer-section p { color: #76726d; padding-bottom: 10px; font-size: 0.58em; padding-left: 19px; } /* ========================= End of CSS for normal mode ========================= */ /* mobile version */ @media (max-width: 479px) { /* COMMAN CODE FOR ALL PAGES */ .container { max-width: 1180px; margin-inline: auto; padding-inline: 25px; background-color: #000000; overflow-x: hidden; } /* Prevent horizontal scroll */ html, body { overflow-x: hidden; } .container, .container-load, .footer-section, .menu-section { max-width: 100vw; box-sizing: border-box; /* ensures padding doesn't break width */ } .menu-section, .option-menu-left-section, .faq-section, .bottom-section, .footer-section { user-select: none; /* prevents text highlight/selection */ } img { max-width: 100%; height: auto; display: block; } /* loding */ .container-load { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #ff0c00; position: fixed; top: 0; left: 0; z-index: 9999; } .load-ani { width: 90vw; height: 90vh; display: flex; justify-content: center; align-items: center; text-align: center; } .text-load-ani p { font-size: 7vw; /* Scales for small screens */ line-height: 1.2em; text-align: center; } /* menu-section */ .menu-section { position: fixed; top: 0; left: 0; width: 100%; height: 85px; z-index: 1000; padding: 0 25px; display: flex; align-items: center; background: transparent; } .menu-right-section { padding-top: 20px; } .menu-left-section { margin-top: -20px; cursor: pointer; flex-direction: row-reverse; } .menu-left-section p { font-size: 4vw; font-weight: 500; font-family: "Poppins", sans-serif; } .option-menu-left-section { display: flex; flex-direction: column; margin-top: 31px; padding-right: 25px; align-items: left; padding-left: 5px; } .option-menu-left-section a { font-size: 4vw; font-weight: 500; font-family: "Poppins", sans-serif; padding-top: 1px; } /* work */ .option-menu-left-section .work::after { content: ''; position: absolute; top: 22px; left: 0; width: 65%; height: 0.8px; background-color: #fff7ec; transition: width 0.3s ease; } /* about */ .option-menu-left-section .about::after { content: ''; position: absolute; top: 22px; left: 0; width: 74%; height: 0.8px; background-color: #fff7ec; transition: width 0.3s ease; } /* services */ .option-menu-left-section .services::after { content: ''; position: absolute; top: 22px; left: 0; width: 99%; height: 0.8px; background-color: #fff7ec; transition: width 0.3s ease; } /* contact */ .option-menu-left-section .contact::after { content: ''; position: absolute; top: 22px; left: 0; width: 100%; height: 0.8px; background-color: #fff7ec; transition: width 0.3s ease; } /* faq */ .option-menu-left-section .faq::after { content: ''; position: absolute; top: 22px; left: 0; width: 48%; height: 0.8px; background-color: #fff7ec; transition: width 0.3s ease; } .option-menu-left-section .faq:hover::after { width: 0; } /* FOTTER SECTION */ .footer-section { padding: 20px 30px; display: flex; flex-direction: column; align-items: left; gap: 20px; } /* Top footer text */ .top-footer-section .compony-name-top-footer-section h3 { font-size: 16vw; padding-top: 4vh; /* scale with screen height */ padding-bottom: 21vh; /* bigger on tall phones, smaller on short ones */ text-align: center; align-items: center; } /* Middle footer box */ .middle-footer-section { flex-direction: column; align-items: center; gap: 15px; } .left-middle-footer-section, .right-middle-footer-section { width: 100%; display: flex; /* flex-direction: column; */ align-items: center; gap: 10px; text-align: left; margin-right: 0px; } .right-middle-footer-section { display: flex; justify-content: unset; align-items: left; text-align: left; gap: 60px; margin-right: 0px; margin-top: 25px; } .left-middle-footer-section { background-color: #ff0c00; width: 100%; border-radius: 5px; padding-top: 25px; padding-left: 20px; margin-left: 0px; margin-top: 5vh; padding-bottom: 25px; padding-right: 20px; } .left-middle-footer-section a, .right-middle-footer-section a { width: 100%; text-align: left; font-size: 4.5vw; padding: 10px 0; } .top-left-middle-footer-section p { font-size: 1.5em; padding-right: 30px; padding-bottom: 30px; width: 80%; line-height: 1.3em; text-align: left; } .right-text-bottom-top-left-middle-footer-section p { font-size: 0.78em; } /* Bottom footer line & copyright */ .bottom-footer-section { /* flex-direction: column; */ align-items: center; gap: 10px; /* padding:5px; */ } .left-bottom-footer-section, .middle-bottom-footer-section, .right-bottom-footer-section { width: 100%; text-align: center; } .last-footer-section p { font-size: 2.5vw; text-align: left; margin-top: -15px; padding-bottom: 20px; padding-left: 0px; } .copyright { color: #fff7ec; font-size: 9vw; padding-left: 0px; padding-right: 2vw; } .right-bottom-footer-section p { color: #fff7ec; font-size: 8vw; padding-right: 0px; padding-left: 2vw; } .middle-bottom-footer-section hr { margin: 0 auto; border: 1px solid #fff7ec; width: 45vw; } /* FOTTER SECTION END HERE */ /* website dev code page */ /* ===== Top WebDev Section ===== */ .webDev-top-section { padding-top: 180px; /* reduced for mobile */ padding-bottom: 40px; } .heading-webDev-top-section h1 { font-size: 8vw; /* smaller font for mobile */ padding-bottom: 40px; text-align: center; } .img-webDev-top-section { width: 100%; height: 60vh; /* reduced height for mobile */ border-radius: 5px; } .img-webDev-top-section img { transform: scale(1.2); /* slightly smaller zoom */ opacity: 1; } .mask-left, .mask-right { width: 50%; } /* ===== Second WebDev Top Section ===== */ .second-webDev-top-section { padding-top: 20px; padding-bottom: 30px; overflow: hidden; position: relative; } .heading-second-webDev-top-section h2 { font-size: 6vw; padding-bottom: 15px; text-align: left; } .paira-second-webDev-top-section p { font-size: 3.5vw; text-align: justify; padding: 0 15px; } /* Container stacking */ .middle-webDev-section, .second-middle-webDev-section { flex-direction: column-reverse; /* stack text + image vertically */ gap: 20px; padding: 15px; overflow: hidden; position: relative; } /* Left text sections */ .left-middle-webDev-section, .left-second-middle-webDev-section { width: 100%; padding: 0; margin: 0 auto; } .heading-left-middle-webDev-section h3, .heading-left-second-middle-webDev-section h3 { font-size: 5vw; padding-bottom: 10px; text-align: left; } .paira-left-middle-webDev-section p, .paira-left-second-middle-webDev-section p { font-size: 3.5vw; line-height: 1.4em; text-align: justify; } /* Right image sections */ .right-middle-webDev-section, .right-second-middle-webDev-section { width: 100%; height: 320px; /* let height adjust automatically */ border-radius: 5px; overflow: hidden; margin: 0 auto; aspect-ratio: 16/9; /* keeps consistent ratio for most images */ } /* Images */ .right-middle-webDev-section img, .right-second-middle-webDev-section img { width: 100%; height: 100%; object-fit: cover; /* maintain aspect ratio without stretching */ transform: scale(1.2); /* initial zoom for animation */ opacity: 1; display: block; } /* Masks for animation */ .mask-left, .mask-right { width: 50%; } /* Optional: spacing below image */ .right-middle-webDev-section, .right-second-middle-webDev-section { margin-bottom: 15px; } .bottom-section { display: flex; flex-direction: column; align-items: center; padding: 15px 10px; gap: 25px; } /* Image container */ .img-bottom-section { width: 100%; height: 50vh; /* flexible height for mobile */ max-height: 400px; /* prevent overly tall images */ border-radius: 8px; overflow: hidden; position: relative; } .img-bottom-section img { width: 100%; height: 100%; object-fit: cover; /* keep aspect ratio */ transform: scale(1.3); /* slight zoom for better mobile feel */ opacity: 1; display: block; transition: transform 0.5s ease; /* smooth hover/animation effect */ } /* Masks for GSAP animation */ .mask-left, .mask-right { width: 50%; height: 100%; top: 0; } /* company-history-section */ /* ecommers-page */ .ecommerce-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .ecommerce-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; padding-bottom: 10px; } .custom-web-solution-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .custom-web-solution-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .mobile-app-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .mobile-app-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .search-engine-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .search-engine-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .ux-ui-design-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .ux-ui-design-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .web-portal-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .web-portal-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .website-development-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .website-development-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .full-detlise-company-history-section p { font-size: 4.4vw; line-height: 1.6em; text-align: justify; word-break: break-word; hyphens: auto; color: #fff7ec; padding: 0 5px; } /* read now button */ .full-detlise-company-history-section p { font-size: 1em; line-height: 1.5em; text-align: justify; color: #fff7ec; max-height: 100px; /* initially short */ overflow: hidden; transition: max-height 0.5s ease; } .full-detlise-company-history-section p.expanded { max-height: 1000px; /* expand smoothly */ } #readMoreBtn { display: block; margin-top: 10px; background: none; border: none; color: #ff0c00; font-weight: 600; cursor: pointer; } } /* TABLET VERSION */ @media (min-width: 479px) and (max-width: 767px) { .container { max-width: 1180px; margin-inline: auto; padding-inline: 20px; background-color: #000000; overflow-x: hidden; } /* Prevent horizontal scroll */ html, body { overflow-x: hidden; } .container, .container-load, .footer-section, .menu-section { max-width: 100vw; box-sizing: border-box; /* ensures padding doesn't break width */ } img { max-width: 100%; height: auto; display: block; } /* Container Load */ .container-load { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } /* Loading Animation */ .load-ani { width: 80vw; height: 80vh; display: flex; justify-content: center; align-items: center; text-align: center; } /* Loading Text */ .text-load-ani p { font-size: 6vw; /* scale smaller than mobile */ line-height: 1.2; color: #000813; } /* menu-section */ .menu-section { position: fixed; top: 0; left: 0; width: 100%; height: 85px; z-index: 1000; padding: 0 25px; display: flex; align-items: center; background: transparent; } .menu-right-section { padding-top: 20px; } .menu-left-section { margin-top: -20px; cursor: pointer; flex-direction: row-reverse; } .menu-left-section p { font-size: 1.2em; font-weight: 500; font-family: "Poppins", sans-serif; } .option-menu-left-section { display: flex; flex-direction: column; margin-top: 30px; padding-right: 25px; align-items: left; padding-left: 5px; } .option-menu-left-section a { font-size: 1.1em; font-weight: 500; font-family: "Poppins", sans-serif; padding-top: 1px; } /* work */ .option-menu-left-section .work::after { content: ''; position: absolute; top: 24px; left: 0; width: 61%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } /* about */ .option-menu-left-section .about::after { content: ''; position: absolute; top: 24px; left: 0; width: 74%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } /* services */ .option-menu-left-section .services::after { content: ''; position: absolute; top: 24px; left: 0; width: 99%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } /* contact */ .option-menu-left-section .contact::after { content: ''; position: absolute; top: 24px; left: 0; width: 100%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } /* faq */ .option-menu-left-section .faq::after { content: ''; position: absolute; top: 24px; left: 0; width: 48%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } .option-menu-left-section .faq:hover::after { width: 0; } /* MENU SECTION END HERE */ /* FOTTER SECTION START HERE */ /* Footer container */ .footer-section { padding: 20px 30px; display: flex; flex-direction: column; align-items: left; gap: 20px; } /* Top footer text */ .top-footer-section .compony-name-top-footer-section h3 { font-size: 17vw; padding-top: 4vh; padding-bottom: 0; text-align: center; align-items: center; } /* Middle footer box */ .middle-footer-section { flex-direction: column; align-items: center; gap: 15px; } .left-middle-footer-section, .right-middle-footer-section { width: 100%; display: flex; /* flex-direction: column; */ align-items: center; gap: 10px; text-align: left; margin-right: 0px; } .right-middle-footer-section { display: flex; justify-content: unset; align-items: left; text-align: left; gap: 60px; margin-right: 0px; margin-top: 25px; } .left-middle-footer-section { background-color: #ff0c00; width: 100%; border-radius: 5px; padding-top: 15px; padding-left: 15px; margin-left: 0px; margin-top: 5vh; padding-bottom: 10px; padding-right: 15px; } .left-middle-footer-section a, .right-middle-footer-section a { width: 100%; text-align: left; font-size: 4.5vw; padding: 10px 0; } .left-right-middle-footer-section p { color: #fff7ec; font-size: 0.4em !important; line-height: 1.8em; margin: 0; /* background-color: rgb(97, 207, 24); */ cursor: pointer; } .right-right-middle-footer-section p { color: #fff7ec; font-size: 0.4em !important; line-height: 1.8em; margin: 0; /* background-color: rgb(97, 207, 24); */ cursor: pointer; } .top-left-middle-footer-section p { font-size: 0.95em; padding-right: 30px; padding-bottom: 30px; width: 80%; line-height: 1.3em; text-align: left; } .right-text-bottom-top-left-middle-footer-section p { font-size: 0.45em; } /* Bottom footer line & copyright */ .bottom-footer-section { /* flex-direction: column; */ align-items: center; gap: 30px; /* padding:5px; */ } .left-bottom-footer-section, .middle-bottom-footer-section, .right-bottom-footer-section { width: 100%; text-align: left; } .last-footer-section p { font-size: 2vw; text-align: left; margin-top: -15px; padding-bottom: 20px; padding-left: 0px; } .copyright { color: #fff7ec; font-size: 6.5vw; padding-left: 0px; padding-right: 0vw; } .right-bottom-footer-section p { color: #fff7ec; font-size: 5vw; padding-right: 0px; padding-left: 0vw; } .middle-bottom-footer-section hr { margin: 0 auto; border: 1px solid #fff7ec; width: 60vw; margin-left: -60px; } .left-text-bottom-top-left-middle-footer-section { background-color: #000813; display: inline-block; padding-top: 0px; padding-bottom: 3px; padding-right: 12px; padding-left: 12px; border-radius: 3px; } .middle-arrow { color: #fff7ec; font-size: 0.79em; } /* FOTTER SECTION END HERE */ /* website development */ /* ===== Top WebDev Section ===== */ .webDev-top-section { padding-top: 180px; /* reduced for mobile */ padding-bottom: 40px; } .heading-webDev-top-section h1 { font-size: 7vw; /* smaller font for mobile */ padding-bottom: 40px; text-align: left; } .img-webDev-top-section { width: 100%; height: 90vh; /* reduced height for mobile */ border-radius: 5px; } .img-webDev-top-section img { transform: scale(1.2); /* slightly smaller zoom */ opacity: 1; } .mask-left, .mask-right { width: 50%; } /* ===== Second WebDev Top Section ===== */ .second-webDev-top-section { padding-top: 20px; padding-bottom: 30px; overflow: hidden; position: relative; } .heading-second-webDev-top-section h2 { font-size: 1.7em; padding-bottom: 15px; text-align: left; } .paira-second-webDev-top-section p { font-size: 1.1em; text-align: justify; padding: 0 15px; } /* Middle section and 2nd middle section */ .middle-webDev-section, .second-middle-webDev-section { flex-direction: column-reverse; /* stack text + image vertically */ gap: 20px; padding: 15px; overflow: hidden; position: relative; } /* Left text sections */ .left-middle-webDev-section, .left-second-middle-webDev-section { width: 100%; padding: 0; margin: 0 auto; } .heading-left-middle-webDev-section h3, .heading-left-second-middle-webDev-section h3 { font-size: 1.7em; padding-bottom: 10px; text-align: left; } .paira-left-middle-webDev-section p, .paira-left-second-middle-webDev-section p { font-size: 1.1em; line-height: 1.4em; text-align: justify; } /* Right image sections */ .right-middle-webDev-section, .right-second-middle-webDev-section { width: 100%; height: 420px; /* let height adjust automatically */ border-radius: 5px; overflow: hidden; margin: 0 auto; aspect-ratio: 16/9; /* keeps consistent ratio for most images */ } /* Images */ .right-middle-webDev-section img, .right-second-middle-webDev-section img { width: 100%; height: 100%; object-fit: cover; /* maintain aspect ratio without stretching */ transform: scale(1.2); /* initial zoom for animation */ opacity: 1; display: block; } /* Masks for animation */ .mask-left, .mask-right { width: 50%; } /* Optional: spacing below image */ .right-middle-webDev-section, .right-second-middle-webDev-section { margin-bottom: 15px; } .bottom-section { display: flex; flex-direction: column; align-items: center; padding: 15px 10px; gap: 25px; } /* Image container */ .img-bottom-section { width: 100%; height: 90vh; /* flexible height for mobile */ max-height: 400px; /* prevent overly tall images */ border-radius: 8px; overflow: hidden; position: relative; } .img-bottom-section img { width: 100%; height: 100%; object-fit: cover; /* keep aspect ratio */ transform: scale(1.3); /* slight zoom for better mobile feel */ opacity: 1; display: block; transition: transform 0.5s ease; /* smooth hover/animation effect */ } /* Masks for GSAP animation */ .mask-left, .mask-right { width: 50%; height: 100%; top: 0; } /* company-history-section */ .ecommerce-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .ecommerce-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .website-development-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .website-development-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .web-portal-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .web-portal-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .ux-ui-design-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .ux-ui-design-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .search-engine-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .search-engine-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .mobile-app-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .mobile-app-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .custom-web-solution-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .custom-web-solution-name-company-history-section h4 { font-size: 6.5vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .full-detlise-company-history-section p { font-size: 4.4vw; line-height: 1.6em; text-align: justify; word-break: break-word; hyphens: auto; color: #fff7ec; padding: 0 5px; } /* read now button */ .full-detlise-company-history-section p { font-size: 1em; line-height: 1.5em; text-align: justify; color: #fff7ec; max-height: 100px; /* initially short */ overflow: hidden; transition: max-height 0.5s ease; } .full-detlise-company-history-section p.expanded { max-height: 1000px; /* expand smoothly */ } #readMoreBtn { display: block; margin-top: 10px; background: none; border: none; color: #ff0c00; font-weight: 600; cursor: pointer; } } /* MINI LAPTOP VERSION */ @media (min-width: 767px) and (max-width: 991px) { /* COMMAN CODE FOR ALL PAGE */ /* Prevent horizontal scroll */ html, body { overflow-x: hidden; } .container, .container-load, .footer-section, .menu-section { max-width: 100vw; box-sizing: border-box; /* ensures padding doesn't break width */ } img { max-width: 100%; height: auto; display: block; } /* loding */ .container-load { width: 100vw; height: 100vh; } .load-ani { width: 100vw; height: 100vh; justify-content: center; align-items: center; text-align: center; } /* Loading Text */ .text-load-ani p { font-size: 5vw; /* scale smaller than mobile */ line-height: 1.2; color: #000813; } /* menu-section */ .menu-section { position: fixed; top: 0; left: 0; width: 100%; height: 85px; z-index: 1000; padding: 0 25px; display: flex; align-items: center; background: transparent; } .menu-right-section { padding-top: 20px; } .menu-left-section { margin-top: -20px; cursor: pointer; flex-direction: row-reverse; } .menu-left-section p { font-size: 1.2em; font-weight: 500; font-family: "Poppins", sans-serif; } .option-menu-left-section { display: flex; flex-direction: column; margin-top: 30px; padding-right: 25px; align-items: left; padding-left: 5px; } .option-menu-left-section a { font-size: 1.1em; font-weight: 500; font-family: "Poppins", sans-serif; padding-top: 1px; } /* work */ .option-menu-left-section .work::after { content: ''; position: absolute; top: 24px; left: 0; width: 61%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } /* about */ .option-menu-left-section .about::after { content: ''; position: absolute; top: 24px; left: 0; width: 74%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } /* services */ .option-menu-left-section .services::after { content: ''; position: absolute; top: 24px; left: 0; width: 99%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } /* contact */ .option-menu-left-section .contact::after { content: ''; position: absolute; top: 24px; left: 0; width: 100%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } /* faq */ .option-menu-left-section .faq::after { content: ''; position: absolute; top: 24px; left: 0; width: 48%; height: 0.6px; background-color: #fff7ec; transition: width 0.3s ease; } .option-menu-left-section .faq:hover::after { width: 0; } /* MENU SECTION END HERE */ /* FOTTER SECTION START HERE */ /* Footer container */ .footer-section { padding: 20px 30px; display: flex; flex-direction: column; align-items: left; gap: 20px; } /* Top footer text */ .top-footer-section .compony-name-top-footer-section h3 { font-size: 17vw; padding-top: 4vh; padding-bottom: 0; text-align: center; align-items: center; } /* Middle footer box */ .middle-footer-section { flex-direction: column; align-items: center; gap: 15px; } .left-middle-footer-section, .right-middle-footer-section { width: 100%; display: flex; /* flex-direction: column; */ align-items: center; gap: 10px; text-align: left; margin-right: 0px; } .right-middle-footer-section { display: flex; justify-content: unset; align-items: left; text-align: left; gap: 60px; margin-right: 0px; margin-top: 25px; } .left-middle-footer-section { background-color: #ff0c00; width: 100%; border-radius: 5px; padding-top: 15px; padding-left: 15px; margin-left: 0px; margin-top: 5vh; padding-bottom: 10px; padding-right: 15px; } .left-middle-footer-section a, .right-middle-footer-section a { width: 100%; text-align: left; font-size: 4.5vw; padding: 10px 0; } .left-right-middle-footer-section p { color: #fff7ec; font-size: 0.4em !important; line-height: 1.8em; margin: 0; /* background-color: rgb(97, 207, 24); */ cursor: pointer; } .right-right-middle-footer-section p { color: #fff7ec; font-size: 0.4em !important; line-height: 1.8em; margin: 0; /* background-color: rgb(97, 207, 24); */ cursor: pointer; } .top-left-middle-footer-section p { font-size: 0.95em; padding-right: 30px; padding-bottom: 30px; width: 80%; line-height: 1.3em; text-align: left; } .right-text-bottom-top-left-middle-footer-section p { font-size: 0.45em; } /* Bottom footer line & copyright */ .bottom-footer-section { /* flex-direction: column; */ align-items: center; gap: 30px; /* padding:5px; */ } .left-bottom-footer-section, .middle-bottom-footer-section, .right-bottom-footer-section { width: 100%; text-align: left; } .last-footer-section p { font-size: 2vw; text-align: left; margin-top: -15px; padding-bottom: 20px; padding-left: 0px; } .copyright { color: #fff7ec; font-size: 6.5vw; padding-left: 0px; padding-right: 0vw; } .right-bottom-footer-section p { color: #fff7ec; font-size: 5vw; padding-right: 0px; padding-left: 0vw; } .middle-bottom-footer-section hr { margin: 0 auto; border: 1px solid #fff7ec; width: 60vw; margin-left: -60px; } .left-text-bottom-top-left-middle-footer-section { background-color: #000813; display: inline-block; padding-top: 0px; padding-bottom: 3px; padding-right: 12px; padding-left: 12px; border-radius: 3px; } .middle-arrow { color: #fff7ec; font-size: 0.79em; } /* FOTTER SECTION END HERE */ /* website delopment */ /* ===== Top WebDev Section ===== */ .webDev-top-section { padding-top: 190px; /* reduced for mobile */ padding-bottom: 40px; } .heading-webDev-top-section h1 { font-size: 8vw; /* smaller font for mobile */ padding-bottom: 40px; text-align: left; } .img-webDev-top-section { width: 100%; height: 115vh; /* reduced height for mobile */ border-radius: 5px; } .img-webDev-top-section img { transform: scale(1.2); /* slightly smaller zoom */ opacity: 1; } .mask-left, .mask-right { width: 50%; } /* ===== Second WebDev Top Section ===== */ .second-webDev-top-section { padding-top: 20px; padding-bottom: 30px; overflow: hidden; position: relative; } .heading-second-webDev-top-section h2 { font-size: 2em; padding-bottom: 15px; text-align: left; } .paira-second-webDev-top-section p { font-size: 1.4em; text-align: justify; padding: 0 15px; } /* Middle section and 2nd middle section */ .middle-webDev-section, .second-middle-webDev-section { flex-direction: column-reverse; /* stack text + image vertically */ gap: 20px; padding: 15px; overflow: hidden; position: relative; } /* Left text sections */ .left-middle-webDev-section, .left-second-middle-webDev-section { width: 100%; padding: 0; margin: 0 auto; } .heading-left-middle-webDev-section h3, .heading-left-second-middle-webDev-section h3 { font-size: 1.9em; padding-bottom: 10px; text-align: left; } .paira-left-middle-webDev-section p, .paira-left-second-middle-webDev-section p { font-size: 1.1em; line-height: 1.6em; text-align: justify; } /* Right image sections */ .right-middle-webDev-section, .right-second-middle-webDev-section { width: 100%; height: 520px; /* let height adjust automatically */ border-radius: 5px; overflow: hidden; margin: 0 auto; aspect-ratio: 16/9; /* keeps consistent ratio for most images */ } /* Images */ .right-middle-webDev-section img, .right-second-middle-webDev-section img { width: 100%; height: 100%; object-fit: cover; /* maintain aspect ratio without stretching */ transform: scale(1.2); /* initial zoom for animation */ opacity: 1; display: block; } /* Masks for animation */ .mask-left, .mask-right { width: 50%; } /* Optional: spacing below image */ .right-middle-webDev-section, .right-second-middle-webDev-section { margin-bottom: 15px; } .bottom-section { display: flex; flex-direction: column; align-items: center; padding: 15px 10px; gap: 25px; } /* Image container */ .img-bottom-section { width: 100%; height: 90vh; /* flexible height for mobile */ max-height: 530px; /* prevent overly tall images */ border-radius: 8px; overflow: hidden; position: relative; } .img-bottom-section img { width: 100%; height: 100%; object-fit: cover; /* keep aspect ratio */ transform: scale(1.3); /* slight zoom for better mobile feel */ opacity: 1; display: block; transition: transform 0.5s ease; /* smooth hover/animation effect */ } /* Masks for GSAP animation */ .mask-left, .mask-right { width: 50%; height: 100%; top: 0; } /* company-history-section */ .ecommerce-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .ecommerce-name-company-history-section h4 { font-size: 7vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .website-development-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .website-development-name-company-history-section h4 { font-size: 7vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .web-portal-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .web-portal-name-company-history-section h4 { font-size: 7vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .ux-ui-design-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .ux-ui-design-name-company-history-section h4 { font-size: 7vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .search-engine-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .search-engine-name-company-history-section h4 { font-size: 7vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .mobile-app-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .mobile-app-name-company-history-section h4 { font-size: 7vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .custom-web-solution-company-history-section { flex-direction: column; gap: 20px; padding: 20px 0px; padding-bottom: 10px; } .custom-web-solution-name-company-history-section h4 { font-size: 7vw; /* larger heading for mobile */ text-align: left; /* center align for mobile */ margin-top: 0; margin-bottom: 5px; color: #fff7ec; } .full-detlise-company-history-section p { font-size: 4.7vw; line-height: 1.6em; text-align: justify; word-break: break-word; hyphens: auto; color: #fff7ec; padding: 0 5px; } /* read now button */ .full-detlise-company-history-section p { font-size: 1em; line-height: 1.5em; text-align: justify; color: #fff7ec; max-height: 100px; /* initially short */ overflow: hidden; transition: max-height 0.5s ease; } .full-detlise-company-history-section p.expanded { max-height: 1000px; /* expand smoothly */ } #readMoreBtn { display: block; margin-top: 10px; background: none; border: none; color: #ff0c00; font-weight: 600; cursor: pointer; } }