.elementor-3799 .elementor-element.elementor-element-435a9d4{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.92;--overlay-mix-blend-mode:darken;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3799 .elementor-element.elementor-element-435a9d4:not(.elementor-motion-effects-element-type-background), .elementor-3799 .elementor-element.elementor-element-435a9d4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A1738;background-position:0px 0px;background-repeat:no-repeat;background-size:cover;}.elementor-3799 .elementor-element.elementor-element-435a9d4::before, .elementor-3799 .elementor-element.elementor-element-435a9d4 > .elementor-background-video-container::before, .elementor-3799 .elementor-element.elementor-element-435a9d4 > .e-con-inner > .elementor-background-video-container::before, .elementor-3799 .elementor-element.elementor-element-435a9d4 > .elementor-background-slideshow::before, .elementor-3799 .elementor-element.elementor-element-435a9d4 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3799 .elementor-element.elementor-element-435a9d4 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0A1738;--background-overlay:'';}.elementor-3799 .elementor-element.elementor-element-19a932e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:00px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3799 .elementor-element.elementor-element-fbfd62f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:4px 4px;--row-gap:4px;--column-gap:4px;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:15px;--padding-right:25px;}.elementor-3799 .elementor-element.elementor-element-fbfd62f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-3799 .elementor-element.elementor-element-f2ad425{--divider-border-style:solid;--divider-color:#FFFFFF75;--divider-border-width:1px;--divider-element-spacing:16px;}.elementor-3799 .elementor-element.elementor-element-f2ad425 > .elementor-widget-container{margin:0% 0% 0% 0%;padding:0px 0px 13px 0px;}.elementor-3799 .elementor-element.elementor-element-f2ad425 .elementor-divider-separator{width:97%;margin:0 auto;margin-left:0;}.elementor-3799 .elementor-element.elementor-element-f2ad425 .elementor-divider{text-align:left;padding-block-start:0px;padding-block-end:0px;}.elementor-3799 .elementor-element.elementor-element-f2ad425 .elementor-divider__text{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:19px;font-weight:400;text-transform:capitalize;letter-spacing:1.8px;-webkit-text-stroke-color:#000;stroke:#000;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3799 .elementor-element.elementor-element-1470603 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 10px 10px 0px;}.elementor-3799 .elementor-element.elementor-element-1470603{text-align:left;}.elementor-3799 .elementor-element.elementor-element-1470603 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:600;text-transform:capitalize;line-height:1.1em;letter-spacing:1.5px;word-spacing:5px;-webkit-text-stroke-width:1px;stroke-width:1px;-webkit-text-stroke-color:#FFFFFF;stroke:#FFFFFF;color:#2651A500;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-3799 .elementor-element.elementor-element-ee656a1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3799 .elementor-element.elementor-element-ee656a1{text-align:left;font-family:"Poppins", Sans-serif;font-size:18px;font-weight:500;line-height:40px;letter-spacing:0.8px;color:#00C0FF;}.elementor-3799 .elementor-element.elementor-element-1ba9e3c > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-3799 .elementor-element.elementor-element-1ba9e3c{text-align:justify;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;line-height:30px;letter-spacing:1px;word-spacing:1px;color:#FFFFFF;}.elementor-3799 .elementor-element.elementor-element-5bbee33{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 14px;--row-gap:0px;--column-gap:14px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:0px;}.elementor-3799 .elementor-element.elementor-element-aef2448{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-3799 .elementor-element.elementor-element-5664ae9 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3799 .elementor-element.elementor-element-5664ae9 img{width:550px;height:228px;object-fit:cover;object-position:center center;border-radius:25px 25px 25px 25px;}.elementor-3799 .elementor-element.elementor-element-1a90e5c > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3799 .elementor-element.elementor-element-1a90e5c img{width:550px;height:228px;object-fit:cover;object-position:center center;border-radius:25px 25px 25px 25px;}.elementor-3799 .elementor-element.elementor-element-52718af{--display:flex;}.elementor-3799 .elementor-element.elementor-element-b3c65e2 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3799 .elementor-element.elementor-element-b3c65e2.elementor-element{--order:99999 /* order end hack */;}.elementor-3799 .elementor-element.elementor-element-b3c65e2 img{width:100%;height:210px;object-fit:cover;object-position:center center;border-radius:25px 25px 25px 25px;}.elementor-3799 .elementor-element.elementor-element-789bf4c{--display:flex;}.elementor-3799 .elementor-element.elementor-element-2a83555{width:100%;max-width:100%;}.elementor-3799 .elementor-element.elementor-element-2a83555 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body.elementor-page-3799{margin:0% 0% 0% 5%;}@media(max-width:1336px){.elementor-3799 .elementor-element.elementor-element-435a9d4:not(.elementor-motion-effects-element-type-background), .elementor-3799 .elementor-element.elementor-element-435a9d4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://pinnacleprime.in/wp-content/uploads/2024/09/our-service-2.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-3799 .elementor-element.elementor-element-435a9d4{--overlay-opacity:0.92;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3799 .elementor-element.elementor-element-19a932e{--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3799 .elementor-element.elementor-element-fbfd62f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-3799 .elementor-element.elementor-element-f2ad425 > .elementor-widget-container{padding:2px 0px 2px 0px;}.elementor-3799 .elementor-element.elementor-element-f2ad425 .elementor-divider__text{font-size:22px;}.elementor-3799 .elementor-element.elementor-element-1470603 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3799 .elementor-element.elementor-element-1470603 .elementor-heading-title{font-size:45px;line-height:1.5em;letter-spacing:1px;}.elementor-3799 .elementor-element.elementor-element-ee656a1 > .elementor-widget-container{margin:-10px 0px 0px 0px;padding:15px 0px 0px 0px;}.elementor-3799 .elementor-element.elementor-element-ee656a1{font-size:16px;line-height:28px;}.elementor-3799 .elementor-element.elementor-element-1ba9e3c > .elementor-widget-container{padding:5px 0px 5px 0px;}.elementor-3799 .elementor-element.elementor-element-1ba9e3c{font-size:13px;line-height:24px;letter-spacing:0.8px;}.elementor-3799 .elementor-element.elementor-element-5bbee33{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-3799 .elementor-element.elementor-element-5664ae9 img{width:100%;height:165px;border-radius:25px 25px 25px 25px;}.elementor-3799 .elementor-element.elementor-element-1a90e5c img{width:100%;height:165px;border-radius:25px 25px 25px 25px;}.elementor-3799 .elementor-element.elementor-element-b3c65e2 img{width:100%;height:165px;border-radius:25px 25px 25px 25px;}.elementor-3799 .elementor-element.elementor-element-2a83555 > .elementor-widget-container{margin:0px 0px 0px 10px;}}@media(max-width:768px){.elementor-3799 .elementor-element.elementor-element-435a9d4{--margin-top:0px;--margin-bottom:0px;--margin-left:014px;--margin-right:0px;}.elementor-3799 .elementor-element.elementor-element-ee656a1 > .elementor-widget-container{margin:0px 0px 010px 0px;}.elementor-3799 .elementor-element.elementor-element-ee656a1{line-height:1.6em;}.elementor-3799 .elementor-element.elementor-element-1ba9e3c{font-size:14px;}.elementor-3799 .elementor-element.elementor-element-5664ae9 img{height:375px;}.elementor-3799 .elementor-element.elementor-element-1a90e5c img{height:375px;}.elementor-3799 .elementor-element.elementor-element-b3c65e2 img{height:375px;}}@media(max-width:480px){.elementor-3799 .elementor-element.elementor-element-435a9d4{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3799 .elementor-element.elementor-element-f2ad425 > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-3799 .elementor-element.elementor-element-f2ad425 .elementor-divider__text{font-size:18px;letter-spacing:1.5px;}.elementor-3799 .elementor-element.elementor-element-1470603 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3799 .elementor-element.elementor-element-1470603 .elementor-heading-title{font-size:40px;letter-spacing:1px;}.elementor-3799 .elementor-element.elementor-element-5bbee33{--min-height:0vh;--margin-top:0px;--margin-bottom:0px;--margin-left:20px;--margin-right:20px;}.elementor-3799 .elementor-element.elementor-element-5664ae9 img{width:95%;height:222px;}.elementor-3799 .elementor-element.elementor-element-1a90e5c img{width:95%;height:222px;}.elementor-3799 .elementor-element.elementor-element-b3c65e2 img{width:95%;height:222px;}body.elementor-page-3799{margin:0% 0% 0% 0%;}}@media(min-width:481px){.elementor-3799 .elementor-element.elementor-element-435a9d4{--content-width:85%;}.elementor-3799 .elementor-element.elementor-element-fbfd62f{--width:55%;}.elementor-3799 .elementor-element.elementor-element-5bbee33{--width:45%;}.elementor-3799 .elementor-element.elementor-element-aef2448{--width:100%;}.elementor-3799 .elementor-element.elementor-element-52718af{--width:90%;}}@media(max-width:1336px) and (min-width:481px){.elementor-3799 .elementor-element.elementor-element-435a9d4{--content-width:90%;}.elementor-3799 .elementor-element.elementor-element-fbfd62f{--width:50%;}.elementor-3799 .elementor-element.elementor-element-5bbee33{--width:50%;}.elementor-3799 .elementor-element.elementor-element-aef2448{--width:100%;}.elementor-3799 .elementor-element.elementor-element-52718af{--width:95%;}}@media(max-width:768px) and (min-width:481px){.elementor-3799 .elementor-element.elementor-element-5bbee33{--width:85vw;}}@media(min-width:1337px){.elementor-3799 .elementor-element.elementor-element-435a9d4:not(.elementor-motion-effects-element-type-background), .elementor-3799 .elementor-element.elementor-element-435a9d4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for html, class: .elementor-element-2a83555 */@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .container { max-width: 1300px; margin: 50px auto; padding: 20px; text-align: center; width: 100%; } /* Categories Section */ .categories { width:100%; display: flex; justify-content: center; gap: 20px; } .category-card { background-color: #0038d1; color: #fafafa; padding: 20px; border-radius: 12px; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; width:350px; } .category-card.active h2 { color: #06C9EB; /* Active color */ } .category-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; } .category-card h2 { font-size: 21px; font-family: "poppins", sans-serif; font-weight: 700; color: white; padding-top: 10px; letter-spacing: 1px; } .category-gap{ margin-left:10px; } /* Category Name Display */ .category-name-display { margin-top: 60px; margin-bottom: 60px; font-size: 45px; font-weight: 800; color: #ffffff; letter-spacing: 1.5px; display: inline-block; overflow: hidden; white-space: nowrap; font-family: "poppins", sans-serif; } .category-name-display span { opacity: 0; animation: fadeIn 1s ease-out forwards; display: inline-block; } /* Animation for the Category Name */ @keyframes fadeIn { 0% { opacity: 0; filter: blur(10px); } 100% { opacity: 1; filter: blur(0px); } } .projects-heading{ background-color: #0038d1; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); font-family: "poppins", sans-serif; font-weight:600; width:25%; color:white; letter-spacing: 1px; font-size:26px; padding:40px 20px 20px 20px; margin-bottom:-105px; border-radius: 12px 12px 0px 0px; } /* Main Content Wrapper */ .content-wrapper { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } /* Left Side - Subcategories Section */ .subcategories-left { width: 25%; padding: 20px 35px 50px 35px; margin-top:85px; background-color: #0038d1; border-radius: 12px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; font-family: "poppins", sans-serif; opacity: 0; transform: translateX(-100%); animation: slideIn 1s ease-out forwards; } .subcategory-item:nth-child(1) { animation-delay: 0.2s; } .subcategory-item:nth-child(2) { animation-delay: 0.4s; } .subcategory-item:nth-child(3) { animation-delay: 0.6s; } .subcategory-item:nth-child(4) { animation-delay: 0.8s; } .subcategory-item:nth-child(5) { animation-delay: 1s; } .subcategory-item:nth-child(6) { animation-delay: 1.2s; } .subcategory-item:nth-child(7) { animation-delay: 1.4s; } .subcategory-item:nth-child(8) { animation-delay: 1.6s; } .subcategory-item:nth-child(9) { animation-delay: 1.8s; } .subcategory-item:nth-child(10) { animation-delay: 2s; } .subcategory-item:nth-child(11) { animation-delay: 2.2s; } .subcategory-item:nth-child(12) { animation-delay: 2.4s; } .subcategory-item:nth-child(13) { animation-delay: 2.6s; } .subcategory-item:nth-child(14) { animation-delay: 2.8s; } .subcategory-item:nth-child(15) { animation-delay: 3s; } .subcategory-item:nth-child(16) { animation-delay: 3.2s; } .subcategory-item:nth-child(17) { animation-delay: 3.4s; } @keyframes slideIn { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideInItem { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } .subcategory-item { font-size: 15px; padding: 10px 0; letter-spacing: 1px; border-bottom: 1px solid #FFFFFF61; color: white; cursor: pointer; transition: all 0.3s ease; font-weight: 500; opacity: 0; transform: translateX(-100%); animation: slideInItem 0.5s ease-out forwards; } .subcategory-item:hover { color: #06C9EB; border-bottom: 1px solid #06C9EB; transform: scale(1.05); } .subcategory-item.active { color: #06C9EB; border-bottom: 1px solid #06C9EB; font-weight: bold; } .project-main-title{ font-family: "poppins", sans-serif; font-size:19px; margin-top: 0; color:black; display: flex; font-weight: 600; letter-spacing: 0.8px; margin-bottom: 5px; } /* Right Side - Project Details Section */ .project-right { width: 73%; padding: 40px; background-color: #ffffff; border-radius: 12px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; height: 100%; box-sizing: border-box; } .project-title { font-size: 30px; color:#0030b3; display: flex; font-weight: 700; letter-spacing: 1px; font-family: "poppins", sans-serif; border-bottom: 1px solid black; margin-top: 0; padding-top: 0; text-align: left; padding-bottom: 15px; margin-bottom: 10px; } .project-info{ width:100%; display:flex; flex-direction:column; gap:0px; text-align: left; margin-top:0px; justify-content:left; } .client, .architect{ padding: 05px 0px 05px 0px; border-bottom:1px solid #ececec; } .scope{ padding: 05px 0px 05px 0px; } .sub-client, .sub-architect, .sub-scope{ display:flex; align-items:center; justify-content:left; gap: 95px; line-height: 30px; } .sub-client img, .sub-scope img, .sub-architect img{ height: 40px; width: 40px; padding:10px; background-color:#0030b3; border-radius: 50%; color: var(--red); font-weight: bold; font-size: 30px; display: flex; justify-content: center; align-items: center; } .sub-client p{ color:#04257f; font-size: 16px; font-family: "poppins", sans-serif; line-height: 25px; font-weight: 700; padding:0px 0px 0px 0px; transform: translateY(11px); text-align: left; } .sub-architect p { color:#04257f; font-size: 16px; font-family: "poppins", sans-serif; line-height: 25px; font-weight: 700; padding:0px 0px 0px 0px; margin-left: -27px; transform: translateY(12px); text-align: left; } .sub-scope p { color:#04257f; font-size:16px; font-family: "poppins", sans-serif; line-height: 25px; font-weight: 700; padding:0px 0px 0px 0px; transform: translateY(12px); text-align: left; margin-left: -3px; } .sub-client h4{ font-weight: 500; font-size: 17px; color:black; margin-left: -75px; font-family: "poppins", sans-serif; transform: translateY(-6px); } .sub-architect h4{ font-weight: 500; font-size: 17px; color:black; margin-left: -75px; font-family: "poppins", sans-serif; transform: translateY(-6px); } .sub-scope h4{ font-weight: 500; font-size: 17px; color:black; margin-left: -75px; font-family: "poppins", sans-serif; transform: translateY(-6px); } /* Keyframe animation for fade-in and sliding up */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* Apply the animation to the client, architect, scope, and project title */ .client, .architect, .scope, .project-title { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease-out forwards; /* Initial animation */ } .flex { display: flex; justify-content: center; gap: 10px; } .img { width: 1000px; height: 500px; object-fit:cover; transition: opacity 0.5s ease-in-out; opacity: 0; } .mini-img { width: 100px; height: 80px; margin-top: 50px; padding-bottom: 10px; cursor:pointer; transition: all 0.3s ease-in-out; } .mini-img:hover { box-shadow: 0 25px 20px -10px rgba(black, 0.4); transform: translatey(-10px); } /* Responsive Design */ @media (max-width: 1499px) { .container { max-width: 1300px; margin: 50px auto; padding: 5px; text-align: center; width: 100%; } .category-card h2 { font-size: 22px; font-family: "poppins", sans-serif; font-weight: 700; color: white; padding-top: 10px; letter-spacing: 0.8px; } .projects-heading { background-color: #0038d1; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); font-family: "Poppins", sans-serif; font-weight: 700; width: 25%; color: white; font-size: 32px; padding: 25px 20px 20px 20px; margin-bottom: -105px; border-radius: 12px 12px 0px 0px; letter-spacing: 0.8px; } .subcategories-left { width: 25%; padding: 20px 25px 35px 25px; margin-top: 85px; background-color: #0038d1; border-radius: 12px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); display: flex ; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; font-family: "poppins", sans-serif; opacity: 0; transform: translateX(-100%); animation: slideIn 1s ease-out forwards; } } @media (max-width: 1024px) { .subcategories-left { width: 35%; } .project-right { width: 60%; } .categories { flex-direction: column; align-items: center; } .category-card { width: 90%; margin-bottom: 20px; } .projects-heading{ width:35%; } .image-gallery { grid-template-columns: repeat(2, 1fr); } .mini-img { width: 60px; height: 80px; margin-top: 40px; padding-bottom: 10px; } } @media (max-width: 768px) { .subcategories-left { width: 70%; margin-left:78px; } .project-right { width: 100%; margin-top: 30px; } .projects-heading{ width:50%; margin-left: 150px } .categories { flex-direction: column; align-items: center; } .category-card { width: 90%; margin-bottom: 20px; } .image-gallery { grid-template-columns: 1fr; } } @media (max-width: 480px) { .container { width: 100%; } .category-card img { height: 150px; } .category-name-display { margin-top: 20px; margin-bottom: 20px; } .projects-heading{ width:100%; margin-left: -5px; } .project-title { font-size: 32px; } .subcategories-left { width: 100%; margin-left:-5px; } .project-main-title{ padding-bottom: 25px; } .category-card { width: 80%; margin-bottom: 20px; } .category-name-display { font-size: 32px; } .mini-img { width: 30px; height: 80px; margin-top: 40px; padding-bottom: 10px; } .sub-client, .sub-architect, .sub-scope{ display:flex; flex-direction:column; align-items:center; justify-content:left; gap:10px; line-height: 30px; } .sub-client img, .sub-scope img, .sub-architect img{ margin-top: 20px; } .sub-client p{ text-align: center; } .sub-architect p { text-align: center; } .sub-scope p { text-align: center; } .sub-client h4{ margin-left: -5px; } .sub-architect h4{ margin-left: -5px; } .sub-scope h4{ margin-left: -5px; } .category-name-display { font-size: 26px; } }/* End custom CSS *//* End custom CSS *//* End custom CSS */