{"version":3,"sources":["bootstrap.css","data:;charset=utf-8,/%20assets/scss/bootstrap.scss%0A/%20ROOT%20ENTRY%20FILE%20%E2%80%93%20compile%20only%20this%0A%0A/*%201%EF%B8%8F%E2%83%A3%20Abstracts%20(global%20tools%20only)%20*/%0A@use%20%22./fonts%22%20as%20*;%0A@use%20%22./variables%22%20as%20*;%0A@use%20%22./color.scss%22%20as%20*;%0A@use%20%22./mixins/mixins%22%20as%20*;%0A@use%20%22./mixins/breakpoint%22%20as%20*;%0A%0A/*%202%EF%B8%8F%E2%83%A3%20Base%20styles%20*/%0A@use%20%22./main%22;%0A@use%20%22./page.scss%22%20as%20*;%0A@use%20%22./variables%22%20as%20*;%20/%20%E2%9C%85%20correct%0A%0A/*%203%EF%B8%8F%E2%83%A3%20Layout%20(NO%20as%20*)%20*/%0A@use%20%22./layout/header%22;%0A@use%20%22./layout/footer%22;%0A@use%20%22./layout/sidebar%22;%0A@use%20%22./layout/404%22%20as%20*;%0A@use%20%22./layout/index%22;%0A@use%20%22./layout/project-archive%22;%0A@use%20%22./layout/testimonial-archive.scss%22;%0A%0A/*%204%EF%B8%8F%E2%83%A3%20ACF%20Blocks%20*/%0A@use%20%22./acf-block-scss/hero-banner.scss%22;%0A@use%20%22./acf-block-scss/worked-with-companies.scss%22;%0A@use%20%22./acf-block-scss/tech-stack.scss%22;%0A@use%20%22./acf-block-scss/experience-section.scss%22;%0A@use%20%22./acf-block-scss/digital-innovation-cta.scss%22;%0A@use%20%22./acf-block-scss/portfolio-hero.scss%22;%0A@use%20%22./acf-block-scss/single-projects.scss%22;%0A@use%20%22./acf-block-scss/about-intro.scss%22;%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/fonts.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/main.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/page.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/layout/header.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/layout/footer.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/layout/sidebar.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/layout/404.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/layout/index.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/layout/project-archive.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/layout/testimonial-archive.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/acf-block-scss/hero-banner.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/acf-block-scss/worked-with-companies.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/acf-block-scss/tech-stack.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/acf-block-scss/experience-section.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/acf-block-scss/digital-innovation-cta.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/acf-block-scss/portfolio-hero.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/acf-block-scss/single-projects.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/acf-block-scss/about-intro.scss"],"names":[],"mappings":"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nwDE;IACE,mBV7UQ;IU8UR,iBAAA;EbqwDJ;Ea9vDM;IACE,aAAA;EbgwDR;Ea9vDQ;IACE,YAAA;IACA,aAAA;EbgwDV;Ea9vDQ;IACE,aAAA;EbgwDV;Ea7vDY;IACE,oBVrVL;EHolET;Ea5vDU;IACE,gBAAA;Eb8vDZ;Ea1vDM;IACE,aAAA;Eb4vDR;Ea1vDQ;IACE,kBVnXC;IUoXD,iBAAA;Eb4vDV;EatvDQ;IACE,aAAA;EbwvDV;EatvDU;IACE,YAAA;IACA,aAAA;EbwvDZ;EatvDU;IACE,aAAA;EbwvDZ;EarvDc;IACE,oBVpXP;EH2mET;EapvDY;IACE,gBAAA;EbsvDd;EalvDQ;IACE,aAAA;EbovDV;EalvDU;IACE,kBVjYJ;IUkYI,iBAAA;EbovDZ;AACF;Aa5uDA;EACE;IACE,wBAAA;IACA,eAAA;IACA,gBAAA;Eb8uDF;Ea5uDE;IACE,mBV7ZQ;IU8ZR,iBAAA;Eb8uDJ;Ea1uDE;IACE,sBAAA;Eb4uDJ;Ea1uDI;IACE,sBAAA;Eb4uDN;EazuDQ;IACE,aAAA;Eb2uDV;EavuDI;IACE,WAAA;EbyuDN;EavuDM;IACE,cAAA;EbyuDR;EavuDM;IACE,aAAA;EbyuDR;EavuDQ;IACE,YAAA;IACA,aAAA;EbyuDV;EavuDQ;IACE,aAAA;EbyuDV;EatuDY;IACE,oBVpbL;EH4pET;EaruDU;IACE,gBAAA;EbuuDZ;EanuDM;IACE,aAAA;EbquDR;EanuDQ;IACE,kBVjcF;IUkcE,iBAAA;EbquDV;EajuDI;IACE,WAAA;EbmuDN;EajuDM;IACE,aAAA;EbmuDR;EahuDQ;IACE,aAAA;EbkuDV;EahuDU;IACE,YAAA;IACA,aAAA;EbkuDZ;EahuDU;IACE,aAAA;EbkuDZ;Ea/tDc;IACE,oBVxdP;EHyrET;Ea9tDY;IACE,gBAAA;EbguDd;Ea5tDQ;IACE,aAAA;Eb8tDV;Ea5tDU;IACE,kBVreJ;IUseI,iBAAA;Eb8tDZ;AACF;AavtDA;EACE;IACE,wBAAA;EbytDF;EavtDE;IACE,eVthBI;IUuhBJ,iBAAA;EbytDJ;EattDE;IACE,eVliBI;EH0vER;EaptDE;IACE,sBAAA;Eb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oBj7HM;IACE,aAAA;EpBm7HR;EoBh7HU;;IAEE,iBjBzeD;EH25IX;EoB76HQ;IACE,sBAAA;EpB+6HV;EoB96HU;IACE,aAAA;EpBg7HZ;EoB96HY;IACE,aAAA;EpBg7Hd;EoB76HU;IACE,aAAA;EpB+6HZ;EoB36HQ;IACE,sBAAA;EpB66HV;EoB36HU;IACE,aAAA;EpB66HZ;EoBj6HM;IACE,eAAA;IACA,sBAAA;EpBm6HR;EoB/5HM;IACE,aAAA;EpBi6HR;AACF;AoB55HA;EACE;IACE,gBAAA;EpB85HF;EoB15HA;IA8DE,wBAAA;EpB+1HF;EoB35HI;IACE,YAAA;EpB65HN;EoB15HM;IACE,aAAA;EpB45HR;EoB15HU;;IAEE,iBjB1iBD;EHs8IX;EoBx5HM;IACE,sBAAA;EpB05HR;EoBx5HQ;IACE,eAAA;EpB05HV;EoBx5HU;IACE,aAAA;EpB05HZ;EoBx5HU;IACE,cAAA;EpB05HZ;EoBx5HU;IACE,aAAA;EpB05HZ;EoBx5HY;;IAEE,iBjB/jBH;EHy9IX;EoBv5HU;IACE,aAAA;EpBy5HZ;EoBv5HY;IACE,iBjBtkBH;EH+9IX;EoBn5HU;IACE,aAAA;EpBq5HZ;EoBn5HY;IACE,iBjBhlBH;EHq+IX;EoBj5HY;IACE,aAAA;EpBm5Hd;EoB14HE;IACE,aAAA;EpB44HJ;EoBr4HM;IACE,ejBrnBA;IiBsnBA,sBAAA;IACA,iBAAA;EpBu4HR;EoBr4HM;IACE,ejBloBA;IiBmoBA,iBAAA;EpBu4HR;EoBp4HI;IACE,yCAAA;EpBs4HN;EoBp4HM;IACE,eAAA;EpBs4HR;EoBp4HQ;IACE,aAAA;EpBs4HV;EoBl4HU;IACE,aAAA;EpBo4HZ;EoBh4HQ;IACE,cAAA;EpBk4HV;AACF;AoB33HA;EAEI;IACE,uBAAA;EpB43HJ;EoBv3HA;IA8FE,wBAAA;EpB4xHF;EoBz3HE;IACE,8BAAA;EpB23HJ;EoBz3HI;IACE,sBAAA;IACA,aAAA;EpB23HN;EoBz3HI;IACE,WAAA;IACA,kBAAA;EpB23HN;EoBz3HM;IACE,aAAA;EpB23HR;EoBx3HM;IACE,aAAA;EpB03HR;EoBv3HU;;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","file":"bootstrap.css","sourcesContent":["@charset \"UTF-8\";\n/* 1️⃣ Abstracts (global tools only) */\n@import url(\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap\");\n@font-face {\n font-family: \"PPSupplySans-Regular\";\n src: url(\"../fonts/PPSupplySans-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplySans-Ultralight\";\n src: url(\"../fonts/PPSupplySans-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplyMono-Ultralight\";\n src: url(\"../fonts/PPSupplyMono-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplyMono-Regular\";\n src: url(\"../fonts/PPSupplyMono-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n/* 2️⃣ Base styles */\n/* 1️⃣ Abstracts (global tools only) */\nhtml,\nbody {\n overflow-x: hidden;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n}\n\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n background-color: #06234f;\n}\n\na {\n color: var(--color-theme);\n}\n\nbutton:focus,\n.btn.focus,\n.btn:focus,\n.btn:hover,\na:focus,\n.btn.active,\n.btn:active,\n.btn:active,\n.btn:active:focus,\na:active:focus,\na:active {\n outline: none;\n}\n\na:hover {\n text-decoration: none;\n}\n\na:active {\n text-decoration: none;\n}\n\nimg {\n object-fit: cover;\n max-width: 100%;\n height: auto;\n}\n\n.text-block {\n position: relative;\n z-index: 5;\n}\n.text-block h4 {\n text-transform: uppercase;\n color: var(--color-theme);\n margin-bottom: 20px;\n}\n.text-block h2 {\n margin-bottom: 15px;\n font-size: 40px;\n color: #fff;\n}\n.text-block h1 {\n margin-bottom: 15px;\n font-size: 60px;\n color: #fff;\n}\n.text-block h3 {\n color: var(--color-theme);\n margin-bottom: 15px;\n}\n.text-block p {\n margin-bottom: 25px;\n color: #cfd7f1;\n font-size: 20px;\n}\n.text-block p strong {\n font-family: var(--font-primary-bold);\n}\n.text-block .btn {\n margin-top: 15px;\n}\n\n.contact-block {\n position: relative;\n z-index: 1;\n background: var(--color-black);\n padding: 50px;\n}\n.contact-block label {\n color: var(--color-white);\n text-transform: uppercase;\n font-size: 11px;\n letter-spacing: 1px;\n width: 100%;\n}\n.contact-block .wpcf7-form-control-wrap {\n margin-bottom: 10px;\n width: 100%;\n display: block;\n}\n.contact-block .wpcf7-text,\n.contact-block .wpcf7-email,\n.contact-block .wpcf7-textarea {\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--color-theme);\n color: var(--color-white);\n font-size: 16px;\n padding: 0px 0 0px 0;\n width: 100%;\n}\n.contact-block .wpcf7-text:focus-visible,\n.contact-block .wpcf7-email:focus-visible,\n.contact-block .wpcf7-textarea:focus-visible {\n box-shadow: none;\n outline: none;\n}\n.contact-block .wpcf7-textarea {\n border: 1px solid var(--color-theme);\n height: 135px;\n padding: 0 5px;\n}\n.contact-block .wpcf7-checkbox {\n border-bottom: none;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item {\n margin-left: 0;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item label {\n text-transform: none;\n font-size: 9px;\n cursor: pointer;\n letter-spacing: 0px;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input {\n position: absolute;\n left: -9999px;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label {\n position: relative;\n padding-left: 30px;\n line-height: 20px;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:after, .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:before {\n border-radius: 50%;\n top: -2px;\n left: 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--color-theme);\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:after {\n border-radius: 50%;\n top: 2px;\n left: 4px;\n width: 8px;\n height: 8px;\n background: var(--color-theme);\n transition: all 0.2s;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input:not(:checked) + .wpcf7-list-item-label:after {\n opacity: 0;\n transform: scale(0.01);\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input:checked + .wpcf7-list-item-label:after {\n opacity: 1;\n transform: scale(1);\n}\n.contact-block .btn-wrap {\n position: relative;\n text-align: right;\n}\n.contact-block .btn-wrap p {\n margin: 0;\n}\n.contact-block .btn-wrap .wpcf7-spinner {\n position: absolute;\n right: 0;\n top: 8px;\n}\n.contact-block .wpcf7-not-valid-tip {\n font-size: 10px;\n text-transform: none;\n letter-spacing: 0;\n}\n\n.home .video-section + .text-section {\n padding-bottom: 55px;\n}\n\n.text-section.section-padding {\n padding-bottom: var(--section-padding-small);\n}\n\n#smooth-wrapper {\n position: relative;\n width: 100%;\n height: 100vh;\n overflow: hidden;\n}\n\n#smooth-content {\n position: relative;\n width: 100%;\n will-change: transform;\n padding-top: 107px;\n /* transform: none !important; */\n}\n\n.layout-wrapper {\n display: flex;\n min-height: 100vh;\n /* Sidebar */\n /* Main Content Wrapper */\n}\n.layout-wrapper .sidebar-wrp {\n width: auto;\n height: 100vh;\n z-index: 100;\n}\n.layout-wrapper .main-content-wrapper {\n flex: 1;\n margin-left: 123px;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: stretch;\n /* Main Content */\n /* Footer */\n}\n.layout-wrapper .main-content-wrapper .main-content {\n flex: 1;\n}\n.layout-wrapper .main-content-wrapper .footer-content {\n margin-top: auto;\n}\n\n.blog-content h1,\n.blogHeadingDetails h1 {\n font-size: clamp(32px, 5vw, 64px);\n color: #64e4cb;\n line-height: normal;\n margin-bottom: 0;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.blog-content h2,\n.blogHeadingDetails h2 {\n font-size: clamp(26px, 4vw, 40px);\n color: #fff;\n line-height: 1.3;\n margin: 24px 0 12px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.blog-content h3,\n.blogHeadingDetails h3 {\n font-size: clamp(22px, 3vw, 30px);\n color: #fff;\n margin: 20px 0 10px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-content h4,\n.blogHeadingDetails h4 {\n font-size: clamp(18px, 2.5vw, 24px);\n color: #fff;\n margin: 16px 0 8px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-content h5,\n.blogHeadingDetails h5 {\n font-size: clamp(16px, 2vw, 20px);\n color: #fff;\n margin: 12px 0 6px;\n}\n.blog-content span,\n.blogHeadingDetails span {\n color: #cfd7f1;\n font-size: clamp(16px, 1.5vw, 20px);\n display: block;\n margin-bottom: 8px;\n}\n.blog-content p,\n.blogHeadingDetails p {\n color: #cfd7f1;\n font-size: clamp(16px, 1.5vw, 20px);\n line-height: 1.5;\n margin-bottom: 20px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-content a,\n.blogHeadingDetails a {\n color: #00e5cc;\n text-decoration: none;\n font-size: inherit;\n}\n.blog-content a:hover,\n.blogHeadingDetails a:hover {\n text-decoration: underline;\n}\n.blog-content ul,\n.blog-content ol,\n.blogHeadingDetails ul,\n.blogHeadingDetails ol {\n margin: 16px 0;\n padding-left: 20px;\n}\n.blog-content ul li,\n.blog-content ol li,\n.blogHeadingDetails ul li,\n.blogHeadingDetails ol li {\n color: #fff;\n font-size: 20px;\n margin-bottom: 6px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-content img,\n.blogHeadingDetails img {\n width: auto;\n height: auto;\n margin: 24px 0;\n}\n.blog-content pre,\n.blogHeadingDetails pre {\n background: #0d1b2a;\n color: #00e5cc;\n padding: 20px;\n border-radius: 12px;\n overflow-x: auto;\n margin: 24px 0;\n font-size: 14px;\n line-height: 1.6;\n}\n.blog-content code,\n.blogHeadingDetails code {\n font-family: \"Courier New\", monospace;\n}\n.blog-content p code,\n.blogHeadingDetails p code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 6px;\n border-radius: 6px;\n color: #00e5cc;\n}\n\n.post-navigation .nav-links {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n width: 100%;\n border-top: 1px solid #64e4cb;\n}\n.post-navigation .nav-links .nav-previous,\n.post-navigation .nav-links .nav-next {\n padding: 20px;\n max-width: 48%;\n}\n.post-navigation .nav-links .nav-previous a,\n.post-navigation .nav-links .nav-next a {\n font-size: 18px;\n color: #64e4cb;\n font-weight: 500 !important;\n font-family: \"Space Grotesk\", sans-serif;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: gap 0.3s ease, opacity 0.3s ease;\n text-decoration: none;\n line-height: 1.4;\n}\n.post-navigation .nav-links .nav-previous a:hover,\n.post-navigation .nav-links .nav-next a:hover {\n gap: 12px;\n opacity: 0.8;\n}\n.post-navigation .nav-links .nav-previous a::before {\n content: \"←\";\n font-size: 40px;\n line-height: 1;\n height: 20px;\n color: #64e4cb;\n display: flex;\n align-items: center;\n align-self: center;\n flex-shrink: 0;\n transition: transform 0.3s ease;\n margin-top: -12px;\n justify-content: center;\n}\n.post-navigation .nav-links .nav-previous a:hover::before {\n transform: translateX(-4px);\n}\n.post-navigation .nav-links .nav-next a::after {\n content: \"→\";\n font-size: 40px;\n line-height: 1;\n height: 20px;\n color: #64e4cb;\n display: flex;\n align-items: center;\n align-self: center;\n flex-shrink: 0;\n transition: transform 0.3s ease;\n margin-top: -12px;\n justify-content: center;\n}\n.post-navigation .nav-links .nav-next a:hover::after {\n transform: translateX(4px);\n}\n.post-navigation .nav-links .nav-next {\n margin-left: auto;\n}\n.post-navigation .nav-links .nav-next a {\n justify-content: flex-end;\n}\n\n.enlighter span {\n display: inline-block;\n font-size: 1.45em;\n}\n\n.enlighter-code {\n overflow: hidden;\n padding: 20px 10px 20px 5px;\n}\n\n@media (max-width: 1200px) {\n .post-navigation .nav-links {\n align-items: center;\n flex-direction: column;\n justify-content: space-between;\n gap: 0px;\n }\n .post-navigation .nav-links .nav-previous,\n .post-navigation .nav-links .nav-next {\n padding: 10px;\n max-width: 100%;\n width: 100%;\n }\n .post-navigation .nav-links .nav-next {\n margin-left: 0;\n }\n .post-navigation .nav-links .nav-next a {\n justify-content: flex-end;\n }\n}\n@media (max-width: 1024px) {\n .layout-wrapper .main-content-wrapper {\n margin-left: 0px;\n width: 100%;\n }\n}\n/* 3️⃣ Layout (NO as *) */\n/* 2️⃣ Base styles */\n/* Homepage specific */\n.homepage-header .site-header {\n position: absolute;\n}\n\n/* Other pages */\n.innerpage-header .site-header {\n position: relative;\n}\n\n.header {\n width: 100%;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 99;\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px); /* Safari support */\n background: rgba(6, 35, 79, 0.85);\n}\n\nheader .nav {\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.nav .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n\n.nav-brand {\n padding: 30px 20px;\n flex-shrink: 0;\n position: relative;\n}\n\n.nav-brand .nav-brand-border-line {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n\n.nav-brand-link {\n width: 84px;\n display: flex;\n height: 32px;\n align-items: center;\n justify-content: center;\n}\n\n.nav-brand-logo {\n object-fit: cover;\n max-width: 100%;\n width: 100%;\n height: auto;\n}\n\n.nav-brand-text {\n color: #64e4cb;\n font-size: 35px;\n line-height: normal;\n margin: 0;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n\n.nav-list {\n display: flex;\n gap: 45px;\n list-style: none;\n padding: 32px 52px;\n width: 100%;\n}\n\n.nav-item .nav-link {\n position: relative;\n color: #cbd5e1;\n text-decoration: none;\n font-size: 1.25rem;\n letter-spacing: 1px;\n font-weight: 500;\n transition: color 0.3s ease;\n font-family: \"PPSupplySans-Ultralight\", sans-serif;\n}\n\n.nav-item .nav-link::before,\n.nav-item .nav-link::after {\n position: absolute;\n opacity: 0;\n transition: all 0.3s ease;\n color: #64e4cb;\n font-size: 1.25rem;\n font-weight: bold;\n line-height: normal;\n top: 0;\n transform: translateX(10px);\n transition: all 0.2s ease;\n}\n\n.nav-item .nav-link::before {\n content: \"\\\\\";\n left: -15px;\n top: -2px;\n transform: translateX(10px);\n}\n\n.nav-item .nav-link::after {\n content: \"\\\\\";\n right: -15px;\n top: -2px;\n transform: translateX(-10px);\n}\n\n.nav-item .nav-link:hover {\n color: #64e4cb;\n font-weight: 400;\n}\n\n.nav-item .nav-link:hover::before,\n.nav-item .nav-link:hover::after {\n opacity: 1;\n transform: translateX(0px);\n transition: all 0.5s ease;\n}\n\n.menu-item-has-children {\n position: relative;\n}\n\n.menu-item-has-children:hover > .sub-menu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}\n\n/* Submenu base */\n.sub-menu {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 280px;\n background: #0b1f3b;\n border: 1px solid #64e4cb;\n padding: 8px 0;\n list-style: none;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.3s ease;\n z-index: 99;\n}\n\n/* Submenu items */\n.sub-menu .nav-link {\n display: block;\n padding: 8px 16px;\n font-size: 1.25rem;\n color: #cbd5e1;\n}\n\n.sub-menu .nav-link:hover {\n color: #64e4cb;\n}\n\n.sub-menu .nav-link:hover::before,\n.sub-menu .nav-link:hover::after {\n opacity: 0;\n}\n\n/* Active (open) state */\n.menu-item-has-children.open > .sub-menu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}\n\n.toggleBtn {\n /* width: 100%; */\n text-align: end;\n margin-right: 20px;\n display: none;\n}\n\n.toggleIcon {\n font-size: 1.875rem;\n display: inline-block;\n font-weight: 500;\n color: #64e4cb;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n transform: rotate(62deg);\n}\n\n.socialLink {\n display: none;\n height: auto;\n gap: 30px;\n align-items: center;\n}\n\n.sidebar-link {\n width: 30px;\n height: 30px;\n}\n\n.sidebar-link img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n@media (max-width: 1024px) {\n body.menu-open {\n overflow: hidden;\n }\n .header {\n position: fixed;\n top: 0;\n }\n .toggleBtn {\n display: block;\n cursor: pointer;\n margin-left: auto;\n position: relative;\n z-index: 9999;\n }\n .socialLink {\n display: flex;\n }\n .nav-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 100%;\n height: 100vh;\n z-index: 1000;\n transition: right 0.3s ease-in-out;\n }\n .nav-menu.open {\n right: 0;\n }\n .nav-list {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 30px;\n list-style: none;\n padding: 45px 30px;\n position: absolute;\n top: 111px;\n left: 0;\n width: 100%;\n min-height: calc(100vh - 111px);\n overflow-y: auto;\n border: 1px solid #64e4cb;\n backdrop-filter: blur(50px);\n -webkit-backdrop-filter: blur(50px); /* Safari support */\n background: rgb(6, 35, 79);\n }\n .nav-item,\n .menu-item-has-children {\n width: 100%;\n }\n .nav-link {\n font-size: 1.5rem;\n font-weight: 600 !important;\n color: #fff;\n text-decoration: none;\n }\n .sub-menu {\n position: static;\n min-width: 100%;\n margin-top: 0;\n max-height: 0;\n overflow: hidden;\n opacity: 1;\n visibility: visible;\n transform: none;\n padding: 0;\n border: 0;\n background: transparent;\n transition: max-height 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease;\n }\n .menu-item-has-children:hover > .sub-menu {\n max-height: 0;\n margin-top: 0;\n padding-top: 0;\n }\n .menu-item-has-children.open > .sub-menu {\n max-height: 240px;\n margin-top: 12px;\n padding-top: 10px;\n border-top: 1px solid rgba(100, 228, 203, 0.35);\n }\n .sub-menu .nav-link {\n padding: 10px 0 10px 18px;\n font-size: 1.25rem;\n }\n}\n@media (max-width: 768px) {\n .nav-brand {\n padding: 20px 22px;\n }\n .nav-list {\n top: 96px;\n min-height: calc(100vh - 96px);\n }\n}\n/* 2️⃣ Base styles */\n.footerContent {\n position: relative;\n display: flex;\n}\n.footerContent .border-bottom-line {\n position: absolute;\n top: unset;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.footerContent .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.footerContent .border-col-line {\n position: absolute;\n top: 0;\n left: 49.95%;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.footerContent .footerLeft {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.footerContent .footerLeft .footerHeadingText {\n padding: 51px 34px;\n}\n.footerContent .footerLeft .footerHeadingText .footerHeading {\n font-size: 2.5rem;\n font-weight: 400;\n line-height: 53px;\n color: #e5f1fd;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.footerContent .footerLeft .footer-left-bottom {\n padding: 34px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n.footerContent .footerLeft .footer-left-bottom .footerMail {\n display: flex;\n gap: 18px;\n align-items: center;\n}\n.footerContent .footerLeft .footer-left-bottom .footerMail .iconmail {\n width: 30px;\n height: 20px;\n}\n.footerContent .footerLeft .footer-left-bottom .footerMail .iconmail img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.footerContent .footerLeft .footer-left-bottom .footerMail .mailText {\n font-size: 1.4375rem;\n color: #ffffff;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: 1.3em;\n}\n.footerContent .footerLeft .footer-left-bottom .getButton {\n background-color: #64e4cb;\n color: #06234f;\n padding: 12px 40px;\n display: inline-block;\n width: fit-content;\n}\n.footerContent .footerLeft .footer-left-bottom .getButton .getBtn {\n font-size: 1.25rem;\n line-height: 28px;\n cursor: pointer;\n font-weight: 500;\n color: #06234f;\n text-decoration: none;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.footerContent .footerLeft .border-bottom-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: unset;\n margin-top: -2px;\n}\n.footerContent .footerRight {\n flex: 1;\n display: flex;\n position: relative;\n}\n.footerContent .footerRight .border-col-line {\n position: absolute;\n top: 0;\n left: 50%;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.footerContent .footerRight-colume-1, .footerContent .footerRight-colume-2 {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 50%;\n}\n.footerContent .footerRight-colume-1 .footerRight-heading, .footerContent .footerRight-colume-2 .footerRight-heading {\n padding: 20px 34px;\n background-color: #64e4cb;\n color: #000000;\n font-size: 1.4375rem;\n font-weight: 600;\n line-height: 29px;\n font-family: \"Space Grotesk\", sans-serif;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-transform: uppercase;\n}\n.footerContent .footerRight-colume-1 .footerRight-links {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0;\n}\n.footerContent .footerRight-colume-2 .footerRight-heading {\n position: relative;\n}\n.footerContent .footerRight-colume-2 .footerRight-heading::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -1px;\n width: 100%;\n height: 100%;\n border-left: 2px solid #06234f;\n pointer-events: none;\n z-index: 1;\n}\n\n.footer-link-list {\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100%;\n}\n.footer-link-list .footerLink {\n color: #ffffff;\n font-size: 1.4375rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: 29px;\n text-decoration: none;\n width: 100%;\n display: flex;\n padding: 20px 30px;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n.footer-link-list .footerLink .footer-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.footer-link-list .footerLink:hover {\n color: #64e4cb;\n font-weight: 600;\n}\n\n.social-list {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n}\n.social-list li .social-link {\n display: flex;\n align-items: center;\n color: #ffffff;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 1.125rem;\n width: 100%;\n position: relative;\n text-decoration: none;\n}\n.social-list li .social-link:hover .text-link {\n color: #64e4cb;\n}\n.social-list li .social-link .icon {\n width: 70px;\n height: 69px;\n border-right: 1px solid #64e4cb;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n flex-shrink: 0;\n}\n.social-list li .social-link .icon img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.social-list li .social-link .text-link {\n padding: 0 10px 0 40px;\n text-decoration: none;\n color: #ffffff;\n font-size: 1.4375rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: 29px;\n width: 100%;\n}\n.social-list li .social-link .footer-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n\n@media (max-width: 1200px) {\n .footerContent .footerLeft .footerHeadingText {\n padding: 34px;\n }\n}\n@media screen and (max-width: 1024px) {\n .footerContent .footerLeft .footerHeadingText {\n padding: 24px;\n }\n .footerContent .footerLeft .footer-left-bottom {\n padding: 24px;\n }\n .footerContent .footerRight-colume-1, .footerContent .footerRight-colume-2 {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 50%;\n }\n .footerContent .footerRight-colume-1 .footerRight-heading, .footerContent .footerRight-colume-2 .footerRight-heading {\n padding: 20px 16px;\n }\n .social-list .text li .social-link .text-link {\n padding: 0 10px 0 24px;\n }\n}\n@media (max-width: 768px) {\n .footerContent {\n flex-direction: column;\n }\n .footerContent .border-col-line {\n display: none;\n }\n .footerContent .footerRight .border-col-line {\n display: block;\n }\n .footerContent .footerLeft .footerHeadingText {\n padding: 20px;\n }\n .footerContent .footerLeft .footerHeadingText .footerHeading {\n font-size: 2rem;\n line-height: 42px;\n }\n .footerContent .footerLeft .footerHeadingText .footer-left-bottom {\n padding: 20px;\n gap: 20px;\n }\n}\n@media screen and (max-width: 576px) {\n .footerContent .footerLeft .footerHeadingText {\n padding: 20px 16px;\n }\n .footerContent .footerLeft .footer-left-bottom {\n padding: 20px 16px;\n gap: 16px;\n }\n .footerContent .footerRight {\n width: 100%;\n flex-direction: column;\n }\n .footerContent .footerRight-colume-1, .footerContent .footerRight-colume-2 {\n width: 100%;\n }\n .footerContent .footerRight .border-col-line {\n display: none;\n }\n .footerContent .footerRight-colume-2 .footerRight-heading {\n position: relative;\n }\n .footerContent .footerRight-colume-2 .footerRight-heading::after {\n content: none;\n display: none;\n }\n}\n/* 2️⃣ Base styles */\n.sidebar {\n display: flex;\n flex-direction: column;\n padding: 50px 46px;\n position: fixed; /* Fix the sidebar */\n top: 94px;\n left: 0;\n height: calc(100vh - 94px);\n gap: 50px;\n align-items: center;\n z-index: 1;\n}\n\n.sidebar .sidebar-border-line {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n\n.sidebar-link {\n width: 32px;\n height: 32px;\n cursor: pointer;\n}\n\n.sidebar-link img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.sidebar-link img:hover {\n filter: brightness(10%) saturate(100%) invert(81%) sepia(25%) saturate(745%) hue-rotate(113deg) brightness(95%) contrast(92%);\n}\n\n.scrollup {\n position: absolute;\n left: 50%;\n bottom: 50px;\n width: 33px;\n height: 32px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n transform: translate(-50%, 12px);\n transition: background-color 0.3s ease, transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;\n}\n.scrollup .arrowIcon {\n width: auto;\n height: 24px;\n}\n.scrollup.is-scrolled {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n transform: translate(-50%, 0);\n}\n\n@media (max-width: 1024px) {\n .sidebar {\n display: none;\n }\n}\n@media screen and (max-width: 991px) {\n .wrapper-card .main-wrapper .page-content {\n margin-bottom: 20px;\n }\n}\n/* 2️⃣ Base styles */\n.main {\n display: flex;\n}\n.main .sidebar-wrp {\n flex-shrink: 0;\n width: auto;\n}\n\n/* Project Archive & Taxonomy Listing Styles */\n/* Filter tabs — extend existing .filterWrapper styles for link-based tabs */\n.filterWrapper .filter-tabs a.tab {\n text-decoration: none;\n color: #ffffff;\n display: inline-block;\n transition: background 0.2s, color 0.2s;\n}\n.filterWrapper .filter-tabs a.tab.active {\n background: #64e4cb;\n color: #06234f;\n font-weight: 600;\n}\n.filterWrapper .filter-tabs a.tab:hover {\n background: #64e4cb;\n color: #06234f;\n}\n\n/* Project card tech tags in footer */\n.projectCards .project-cards {\n /* Logo text fallback */\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .project-tech-tags {\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .project-tech-tags .tech-tag {\n font-size: 14px;\n font-family: \"Space Grotesk\", sans-serif;\n color: #64e4cb;\n padding: 4px 10px;\n border: 1px solid #64e4cb;\n border-radius: 2px;\n font-weight: 400;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo .logo-text {\n font-size: 1.125rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 600;\n color: #64e4cb;\n}\n\n/* Pagination */\n.projects-pagination {\n padding: 40px 24px;\n position: relative;\n}\n.projects-pagination .border-line {\n position: absolute;\n top: 0;\n left: 0;\n background: #64e4cb;\n width: 100%;\n height: 1px;\n}\n.projects-pagination .nav-links {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.projects-pagination .nav-links a,\n.projects-pagination .nav-links span {\n padding: 10px 16px;\n font-size: 1rem;\n font-weight: 500;\n border: 1px solid #64e4cb;\n color: #e5f1fd;\n text-decoration: none;\n transition: background 0.2s, color 0.2s;\n}\n.projects-pagination .nav-links a:hover,\n.projects-pagination .nav-links .current {\n background: #64e4cb;\n color: #06234f;\n}\n\n/* No projects fallback */\n.no-projects {\n padding: 80px 24px;\n text-align: center;\n}\n.no-projects p {\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n color: #cfd7f1;\n}\n\n/* Single project — taxonomy links */\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading a {\n color: #e5f1fd;\n text-decoration: none;\n transition: color 0.2s;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading a:hover {\n color: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info a {\n color: #cfd7f1;\n text-decoration: none;\n transition: color 0.2s;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info a:hover {\n color: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .tech-name {\n text-decoration: none;\n color: #e5f1fd;\n transition: color 0.2s;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .tech-name:hover {\n color: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech a.tech-name {\n text-decoration: none;\n}\n\n/* Related projects */\n.related-projects-section .related-projects-header {\n padding: 24px;\n position: relative;\n}\n.related-projects-section .related-projects-header .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.related-projects-section .related-projects-header .related-projects-heading {\n font-size: 62px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n color: #64e4cb;\n line-height: normal;\n}\n\n/* Editor content within single project */\n.project-editor-content {\n padding: 24px;\n}\n.project-editor-content h1,\n.project-editor-content h2,\n.project-editor-content h3,\n.project-editor-content h4,\n.project-editor-content h5,\n.project-editor-content h6 {\n color: #64e4cb;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n margin-bottom: 12px;\n}\n.project-editor-content p {\n color: #e5f1fd;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 1.125rem;\n line-height: 1.6;\n margin-bottom: 16px;\n}\n.project-editor-content img {\n max-width: 100%;\n height: auto;\n}\n\n.projectCards {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.projectCards .project-cards {\n width: 100%;\n display: flex;\n position: relative;\n}\n.projectCards .project-cards .border-line {\n position: absolute;\n top: -1px;\n left: 0%;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.projectCards .project-cards .project-cards-left {\n width: 40%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n}\n.projectCards .project-cards .project-cards-left .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.projectCards .project-cards .project-cards-left .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.projectCards .project-cards .project-cards-left .project-left-card {\n display: flex;\n flex-direction: column;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header {\n display: flex;\n align-items: center;\n position: relative;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: block;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box {\n background: #64e4cb;\n color: #000;\n font-size: 70px;\n font-weight: 300;\n padding: 20px 16px 4px;\n font-family: \"PPSupplyMono-Ultralight\";\n line-height: 76px;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo {\n padding: 20px;\n width: 100%;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo {\n width: 170px;\n height: 60px;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 1.4375rem;\n font-weight: 600;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text {\n font-size: 2.875rem;\n color: #64e4cb;\n margin-bottom: 6px;\n font-weight: 400;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 56px;\n margin-bottom: 0;\n text-decoration: none;\n display: block;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .logorow {\n padding: 24px 24px 0;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .logorow .logo {\n max-width: 40%;\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 1.4375rem;\n font-weight: 600;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .logorow .logo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .left-content {\n padding: 24px;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text {\n font-size: 36px;\n color: #64e4cb;\n margin-bottom: 6px;\n font-weight: 400;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 46px;\n text-decoration: none;\n display: inline-block;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-info {\n color: #cfd7f1;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 300;\n line-height: 24px;\n}\n.projectCards .project-cards .project-cards-left .project-left-footer {\n padding: 20px;\n position: relative;\n}\n.projectCards .project-cards .project-cards-left .project-left-footer .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.projectCards .project-cards .project-cards-left .project-left-footer .project-category-card {\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #cfd7f1;\n line-height: 30px;\n}\n.projectCards .project-cards .project-cards-right {\n width: 60%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.projectCards .project-cards .project-cards-right .project-image {\n width: 100%;\n height: auto;\n}\n.projectCards .project-cards .project-cards-right .project-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .platform-icons {\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span {\n width: 50px;\n height: 50px;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-fit: cover;\n background-color: transparent;\n border: none;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn {\n background: #64e4cb;\n color: #041b3d;\n border: none;\n cursor: pointer;\n padding: 22px 26px;\n height: 100%;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 1.25rem;\n line-height: normal;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn:hover {\n background: #4fd6be;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon {\n width: 20px;\n height: 20px;\n margin-left: 10px;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon svg {\n width: 100%;\n height: 100%;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n@media (max-width: 1200px) {\n .projectCards .project-cards {\n width: 100%;\n }\n .projectCards .project-cards .project-cards-left {\n width: 50%;\n }\n .projectCards .project-cards .project-cards-left .project-left-card {\n display: flex;\n flex-direction: column;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text {\n font-size: 36px;\n line-height: 44px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text {\n font-size: 2rem;\n line-height: 42px;\n }\n .projectCards .project-cards .project-cards-right {\n width: 50%;\n }\n .related-projects-section .related-projects-header .related-projects-heading {\n font-size: 3.25rem;\n }\n}\n@media (max-width: 1024px) {\n .projectCards .project-cards {\n width: 100%;\n flex-direction: column;\n }\n .projectCards .project-cards .project-cards-left {\n width: 100%;\n }\n .projectCards .project-cards .project-cards-left .border-bottom-line {\n display: block;\n }\n .projectCards .project-cards .project-cards-left .border-right {\n display: none;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box {\n font-size: 62px;\n line-height: 68px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo {\n padding: 16px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text {\n font-size: 1.875rem;\n line-height: 40px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .logorow {\n padding: 20px 20px 0;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .left-content {\n padding: 20px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text {\n font-size: 1.5rem;\n line-height: 34px;\n }\n .projectCards .project-cards .project-cards-left .project-left-footer {\n padding: 20px;\n position: relative;\n }\n .projectCards .project-cards .project-cards-right {\n width: 100%;\n }\n .related-projects-section .related-projects-header .related-projects-heading {\n font-size: 42px;\n }\n}\n@media (max-width: 768px) {\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box {\n font-size: 54px;\n padding: 16px;\n line-height: 64px;\n display: flex;\n align-items: center;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo {\n width: 140px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .logorow {\n padding: 16px 16px 0;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .logorow .logo {\n width: 140px;\n }\n .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span {\n width: 40px;\n height: 40px;\n }\n .related-projects-section .related-projects-header .related-projects-heading {\n font-size: 2rem;\n }\n}\n@media (max-width: 576px) {\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box {\n font-size: 3.25rem;\n line-height: 58px;\n padding: 16px 16px 8px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo {\n padding: 10px 16px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo {\n width: 140px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .logorow {\n padding: 16px 16px 0;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .logorow .logo {\n width: 140px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .left-content {\n padding: 16px;\n }\n .projectCards .project-cards .project-cards-left .project-left-footer {\n padding: 16px;\n }\n .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons {\n padding: 10px;\n }\n}\n/* Responsive */\n@media (max-width: 768px) {\n .projects-pagination {\n padding: 30px 16px;\n }\n .projects-pagination .nav-links {\n flex-wrap: wrap;\n }\n .projects-pagination .nav-links a,\n .projects-pagination .nav-links span {\n padding: 8px 12px;\n font-size: 14px;\n }\n .related-projects-section .related-projects-header {\n padding: 20px;\n }\n .related-projects-section .related-projects-header .related-projects-heading {\n font-size: 1.5rem;\n }\n}\n@media (max-width: 576px) {\n .project-editor-content {\n padding: 16px;\n }\n}\n.testimonialWrapper {\n margin-top: 94px;\n height: 530px;\n width: 100%;\n display: flex;\n padding-left: 170px;\n justify-content: center;\n flex-direction: column;\n position: relative;\n position: relative;\n overflow: hidden;\n}\n.testimonialWrapper .testimonial-bg-canvas {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n z-index: 0;\n pointer-events: none;\n display: block;\n}\n.testimonialWrapper .testimonialHeading,\n.testimonialWrapper .discription,\n.testimonialWrapper .border-line {\n position: relative;\n z-index: 1;\n}\n.testimonialWrapper .testimonialHeading {\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 400 !important;\n font-size: 4rem;\n line-height: 72px;\n color: #64e4cb;\n max-width: 660px;\n margin-bottom: 12px;\n}\n.testimonialWrapper .discription {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 33px;\n color: #ffffff;\n margin-bottom: 0px;\n max-width: 900px;\n}\n.testimonialWrapper .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n\n.testimonial-Content {\n position: relative;\n}\n.testimonial-Content .border-line {\n position: absolute;\n top: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonial-Content .testimonial-row {\n display: flex;\n align-items: stretch;\n position: relative;\n}\n.testimonial-Content .testimonial-row.testimonial-content-reverse {\n flex-direction: row-reverse;\n}\n.testimonial-Content .testimonial-row.testimonial-content-reverse .testimonialCard-right .border-right {\n display: block;\n}\n.testimonial-Content .testimonial-row .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left {\n width: 50%;\n flex-shrink: 0;\n position: relative;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .linkCard {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 1;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .border-bottom-line {\n position: absolute;\n bottom: 1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor {\n display: flex;\n align-items: center;\n height: 130px;\n position: relative;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: block;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage {\n width: 130px;\n height: 130px;\n overflow: hidden;\n flex-shrink: 0;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails {\n width: 100%;\n height: 100%;\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo {\n display: flex;\n flex-direction: column;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.875rem;\n font-weight: 400;\n color: #64e4cb;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: normal;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition {\n font-size: 1.25rem;\n font-weight: 400;\n color: #cfd7f1;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n line-height: normal;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 170px;\n width: auto;\n height: 100%;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent {\n padding: 34px;\n}\n.testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent .testimonialText {\n font-size: 1.4375rem;\n font-weight: 300;\n line-height: 30px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right {\n width: 50%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .border-left {\n position: absolute;\n top: 0;\n left: -1px;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .border-right {\n position: absolute;\n top: 0;\n right: 0px;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n display: none;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .linkCard {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 1;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards:last-child {\n border-bottom: none;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor {\n display: flex;\n align-items: center;\n height: 130px;\n position: relative;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: block;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage {\n width: 130px;\n height: 130px;\n overflow: hidden;\n flex-shrink: 0;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails {\n width: 100%;\n height: 100%;\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo {\n display: flex;\n flex-direction: column;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.875rem;\n font-weight: 400;\n color: #64e4cb;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition {\n font-size: 1.25rem;\n font-weight: 400;\n color: #cfd7f1;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 170px;\n width: auto;\n height: 100%;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent {\n padding: 34px;\n}\n.testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent .testimonialText {\n font-size: 1.4375rem;\n font-weight: 300;\n line-height: 30px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n}\n\n@media (max-width: 1200px) {\n .testimonialWrapper {\n padding-left: 125px;\n padding-right: 20px;\n }\n .testimonialWrapper .testimonialHeading {\n font-size: 54px;\n line-height: 64px;\n }\n .testimonialWrapper .discription {\n font-size: 1.25rem;\n line-height: 28px;\n }\n}\n@media (max-width: 1024px) {\n .testimonialWrapper {\n height: 485px;\n padding-left: 80px;\n }\n .testimonialWrapper .testimonialHeading {\n font-size: 2.875rem;\n line-height: 52px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor {\n height: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage {\n width: 100px;\n height: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails {\n padding: 20px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 150px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent {\n padding: 24px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent .testimonialText {\n font-size: 1.25rem;\n line-height: 26px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor {\n height: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage {\n width: 100px;\n height: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails {\n padding: 20px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 150px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent {\n padding: 24px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent .testimonialText {\n font-size: 1.25rem;\n line-height: 26px;\n }\n}\n@media (max-width: 768px) {\n .testimonialWrapper {\n height: 456px !important;\n padding: 0 20px;\n margin-top: 72px;\n }\n .testimonialWrapper .testimonialHeading {\n font-size: 2.875rem;\n line-height: 52px;\n }\n .testimonial-Content .testimonial-row {\n flex-direction: column;\n }\n .testimonial-Content .testimonial-row.testimonial-content-reverse {\n flex-direction: column;\n }\n .testimonial-Content .testimonial-row.testimonial-content-reverse .testimonialCard-right .border-right {\n display: none;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left {\n width: 100%;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .border-bottom-line {\n display: block;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor {\n height: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage {\n width: 100px;\n height: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails {\n padding: 20px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 150px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent {\n padding: 20px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent .testimonialText {\n font-size: 1.25rem;\n line-height: 26px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right {\n width: 100%;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .border-left {\n display: none;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor {\n height: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage {\n width: 100px;\n height: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails {\n padding: 20px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 150px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent {\n padding: 20px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent .testimonialText {\n font-size: 1.25rem;\n line-height: 26px;\n }\n}\n@media (max-width: 576px) {\n .testimonialWrapper {\n height: 456px !important;\n }\n .testimonialWrapper .testimonialHeading {\n font-size: 34px;\n line-height: 42px;\n }\n .testimonialWrapper .discription {\n font-size: 18px;\n }\n .testimonial-Content .testimonial-row {\n flex-direction: column;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left {\n width: 100%;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .border-bottom-line {\n display: block;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor {\n height: 82px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage {\n width: 82px;\n height: 82px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails {\n padding: 16px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.25rem;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition {\n font-size: 1rem;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent {\n padding: 16px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right {\n width: 100%;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .border-left {\n display: none;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor {\n height: 82px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage {\n width: 82px;\n height: 82px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails {\n padding: 16px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.25rem;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition {\n font-size: 1rem;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 100px;\n }\n .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent {\n padding: 16px;\n }\n}\n/* 4️⃣ ACF Blocks */\n/* 2️⃣ Base styles */\n/* Add Block CSS Here */\n.bannerWrapper {\n margin-top: 94px;\n width: 100%;\n height: 698px;\n display: flex;\n padding-left: 170px;\n justify-content: space-between;\n position: relative;\n}\n.bannerWrapper .banner-left {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n z-index: 20;\n}\n.bannerWrapper .border-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n.bannerWrapper .bannerSubHeading {\n font-size: 1.4375rem;\n color: #64e4cb;\n font-weight: 500;\n line-height: 30px;\n margin-bottom: 10px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n display: block;\n}\n.bannerWrapper .bannerHeading {\n font-size: 64px;\n color: #dddddd;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 74px;\n margin-bottom: 10px;\n}\n.bannerWrapper .bannerHeading .subdetails {\n color: #64e4cb;\n font-size: 1.4375rem;\n font-weight: 500;\n margin-left: 3px;\n line-height: 30px;\n display: inline-block;\n}\n.bannerWrapper .button-row {\n position: relative;\n}\n.bannerWrapper .button-row .hero-button-border {\n position: absolute;\n width: 170px;\n height: 1px;\n background-color: #64e4cb;\n left: -170px;\n top: 52px;\n z-index: -1;\n}\n.bannerWrapper .touchbutton {\n width: fit-content !important;\n padding: 22px 38px 22px 51px;\n background-color: #64e4cb;\n border: 1px solid #64e4cb;\n font-size: 1.125rem;\n color: #000000;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n display: flex;\n align-items: center;\n line-height: normal;\n gap: 14px;\n margin-top: 20px;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n cursor: pointer;\n text-decoration: none;\n}\n.bannerWrapper .touchbutton img {\n width: 16px;\n height: 15px;\n object-fit: cover;\n}\n\n/* DOT GRID */\n#dot-grid {\n position: absolute;\n inset: 0;\n z-index: 1;\n background-image: radial-gradient(circle, rgba(100, 228, 203, 0.11) 1px, transparent 1px);\n background-size: 28px 28px;\n pointer-events: none;\n -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0) 100%);\n mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0) 100%);\n}\n\n/* CANVAS */\n.banner-right {\n width: 43%;\n position: absolute;\n overflow: hidden;\n min-height: 80%;\n top: 60px;\n right: 20px;\n}\n.banner-right .globe-stage {\n position: absolute;\n inset: 0;\n}\n\n#globe-canvas {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n}\n\n#tech-nodes {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 20;\n}\n\n.tech-node {\n position: absolute;\n /* Centered offset — set ONCE, never mutated by JS */\n transform: translate(-18px, -18px);\n pointer-events: none;\n /* No CSS transition — opacity updated directly each frame */\n will-change: left, top, opacity;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n}\n\n.tech-icon {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(5, 18, 48, 0.92);\n border: 2px solid;\n transform: translate3d(0, 0, 0); /* force GPU rasterisation at 1:1 */\n}\n\n.tech-icon svg {\n width: 18px;\n height: 18px;\n display: block;\n shape-rendering: geometricPrecision;\n}\n\n@keyframes scrollLogos {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n}\n@keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(22px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@media (max-width: 1200px) {\n .bannerWrapper {\n padding-left: 125px;\n }\n .bannerWrapper .button-row .hero-button-border {\n width: 125px;\n left: -125px;\n }\n .banner-right {\n top: 85px;\n right: 0px;\n }\n}\n@media (max-width: 1024px) {\n .bannerWrapper {\n padding-left: 80px !important;\n height: 655px;\n align-items: center;\n }\n .bannerWrapper .bannerHeading {\n font-size: 3.25rem;\n line-height: 64px;\n }\n}\n@media (max-width: 768px) {\n .bannerWrapper {\n flex-direction: column;\n padding-left: 20px !important;\n height: 600px;\n margin-top: 72px;\n }\n .bannerWrapper .bannerHeading {\n font-size: 2.875rem;\n line-height: 56px;\n }\n .bannerWrapper .banner-right {\n display: none;\n }\n}\n@media (max-width: 576px) {\n .bannerWrapper {\n padding-left: 20px;\n height: 575px;\n }\n .bannerWrapper .bannerHeading {\n font-size: 2.75rem;\n line-height: 48px;\n }\n .bannerWrapper .bannerHeading .subdetails {\n display: block;\n margin: 8px 0 2px;\n }\n .bannerWrapper .touchbutton {\n padding: 18px 30px 18px 41px;\n }\n}\n/* Add Block CSS Here */\n@keyframes marquee-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n@keyframes marquee-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n.worked-with-companies {\n position: relative;\n overflow: hidden;\n}\n.worked-with-companies .border-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n.worked-with-companies .logoWrapper {\n display: flex;\n align-items: stretch;\n}\n.worked-with-companies .logoWrapper .logos-Heading {\n max-width: 292px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n position: relative;\n}\n.worked-with-companies .logoWrapper .logos-Heading .logosTitle {\n font-size: 2.875rem;\n color: #cfd7f1;\n text-transform: uppercase;\n font-weight: 300;\n line-height: 56px;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.worked-with-companies .logoWrapper .logos-Heading .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.worked-with-companies .logoWrapper .logos-Heading .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.worked-with-companies .logoWrapper .logosRow {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n}\n.worked-with-companies .logoWrapper .logosRow .border-bottom-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n flex-shrink: 0;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup {\n display: flex;\n width: 100%;\n overflow: hidden;\n height: 103px;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup:hover .logosTrack {\n animation-play-state: paused;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup[data-row=odd] .logosTrack {\n animation: marquee-left 35s linear infinite;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup[data-row=even] .logosTrack {\n animation: marquee-left 35s linear infinite;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup .logosTrack {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n height: 100%;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup .logos {\n width: 200px;\n flex-shrink: 0;\n height: 100%;\n padding: 18px 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup .logos .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: repeating-linear-gradient(to bottom, #64e4cb 0px, #64e4cb 6px, transparent 6px, transparent 12px);\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup .logos img {\n width: 100%;\n height: 100%;\n max-height: 50px;\n object-fit: contain;\n}\n\n@media (max-width: 1200px) {\n .worked-with-companies .logoWrapper .logos-Heading .logosTitle {\n font-size: 2rem;\n line-height: 44px;\n }\n .worked-with-companies .logoWrapper .logosRow .logosGroup {\n height: 63px;\n }\n}\n@media (max-width: 1024px) {\n .worked-with-companies .logoWrapper .logos-Heading {\n padding: 16px;\n }\n .worked-with-companies .logoWrapper .logos-Heading .logosTitle {\n font-size: 1.5rem;\n line-height: 32px;\n }\n .worked-with-companies .logoWrapper .logosRow .logosGroup {\n height: 53px;\n }\n}\n@media (max-width: 768px) {\n .worked-with-companies .logoWrapper {\n display: flex;\n flex-direction: column;\n }\n .worked-with-companies .logoWrapper .logos-Heading {\n max-width: 100%;\n justify-content: flex-start;\n }\n .worked-with-companies .logoWrapper .logos-Heading .border-right {\n display: none;\n }\n .worked-with-companies .logoWrapper .logos-Heading .border-bottom-line {\n display: block;\n }\n .worked-with-companies .logoWrapper .logosRow .logosGroup .logos {\n max-width: 250px;\n width: 100%;\n max-height: 60px;\n height: 60px;\n padding: 12px;\n }\n}\n@media (max-width: 576px) {\n .worked-with-companies .logoWrapper .logosRow .logosGroup .logos {\n max-width: 200px;\n padding: 15px;\n }\n}\n.techStackSection {\n width: 100%;\n position: relative;\n /* Tech Stack Header */\n /* Tech Stack Cards */\n}\n.techStackSection .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n /* z-index: 2; */\n}\n.techStackSection #border-line {\n z-index: 2;\n}\n.techStackSection .techStackHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n /* position: sticky;\n top: 107px; */\n z-index: 1;\n background: #06234f;\n position: relative;\n}\n.techStackSection .techStackHeader .techStackTitle {\n font-size: 5rem;\n font-weight: 500;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: #e5f1fd;\n}\n.techStackSection .techStackHeader .border-line-text {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.techStackSection .techStackCards {\n display: flex;\n flex-direction: column;\n}\n.techStackSection .techStackCards .techStackCard {\n background-color: #06234f;\n position: relative;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackCardHeader {\n border-bottom: 1px solid #64e4cb;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackNumber {\n color: #64e4cb !important;\n /* -webkit-text-stroke: 2px $color-primary-dark; */\n font-weight: 500 !important;\n text-shadow: 1px 0 0 #06234f, 2px 0 0 #06234f, 0 2px 0 #06234f, 0 -2px 0 #06234f, 0px 2px 0 #06234f, -2px 0px 0 #06234f, 0px -2px 0 #06234f, 0px 2px 0 #06234f;\n font-family: \"PPSupplySans-Regular\", sans-serif !important;\n border-bottom: none;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackContent {\n max-height: 1000px; /* Adjust based on your content height */\n opacity: 1;\n transform: translateY(0);\n padding: 35px 45px; /* Restore full padding when open */\n transition: all 0.6s ease-out;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackToggle img {\n transform: rotate(1deg) !important;\n transition: transform 0.3s ease !important;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackHeading {\n font-family: \"Orbitron\", sans-serif;\n font-weight: 700;\n letter-spacing: 1px;\n color: #00e6e6;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader {\n display: flex;\n align-items: center;\n width: 100%;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader:last-child .techStackNumber {\n border-bottom: none;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber {\n background-color: #64e4cb;\n color: #222222;\n width: 123px;\n height: 123px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 70px;\n font-weight: 300;\n font-family: \"PPSupplyMono-Ultralight\";\n border-bottom: 1px dashed #222222;\n transition: all 0.4s ease;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist {\n display: flex;\n flex-direction: column;\n padding: 20px;\n width: 100%;\n height: 123px;\n justify-content: space-between;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory {\n color: #64e4cb;\n font-size: 1.875rem;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin: 0;\n line-height: 36px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons {\n display: flex;\n align-items: center;\n gap: 40px;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon {\n height: 40px;\n width: 45px;\n object-fit: contain;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle {\n color: #00ffff;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.25rem;\n width: 123px;\n height: 123px;\n flex-shrink: 0;\n /* border-left: 1px dashed $color-primary; */\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle img {\n width: auto;\n height: 25px;\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle .border-left-dashed {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: repeating-linear-gradient(to top, #64e4cb 0, #64e4cb 4px, transparent 4px, transparent 8px);\n}\n.techStackSection .techStackCards .techStackCard .techStackContent {\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n transform: translateY(-20px);\n transition: all 0.5s ease-in-out;\n padding: 0 45px;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackHeading {\n font-size: 1.4375rem;\n font-weight: 500;\n line-height: 1.3em;\n color: #64e4cb;\n font-family: \"PPSupplyMono-Regular\";\n margin-bottom: 18px;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackDescription {\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 1.25rem;\n font-weight: 400;\n line-height: 1.6;\n margin-bottom: 25px;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns {\n display: flex;\n padding-top: 35px;\n gap: 40px;\n /* border-top: 1px dashed #767676; */\n position: relative;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine-row {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(to right, #767676, #767676 6px, transparent 6px, transparent 12px);\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine {\n position: absolute;\n top: 35px;\n left: 50%;\n width: 1px;\n transform-origin: left;\n height: 270px;\n background: repeating-linear-gradient(to bottom, #767676, #767676 6px, transparent 6px, transparent 12px);\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn {\n width: 50%;\n color: #ffffff;\n position: relative;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackColumnTitle {\n font-size: 1.4375rem;\n font-weight: 500;\n line-height: 1.3em;\n color: #64e4cb;\n font-family: \"PPSupplyMono-Regular\";\n margin-bottom: 18px;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li {\n margin-bottom: 10px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 1.25rem;\n font-weight: 300;\n position: relative;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li::before {\n content: \"//\";\n color: #64e4cb;\n margin-right: 8px;\n font-weight: 300;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn {\n padding-left: 35px;\n}\n\n@media (max-width: 1200px) {\n .techStackSection .techStackHeader {\n padding: 55px;\n }\n .techStackSection .techStackHeader .techStackTitle {\n font-size: 4rem;\n }\n}\n@media (max-width: 1024px) {\n .techStackSection .techStackHeader {\n padding: 50px 40px;\n }\n .techStackSection .techStackHeader .techStackTitle {\n font-size: 55px;\n line-height: 1em;\n }\n}\n@media (max-width: 768px) {\n .techStackSection .techStackHeader {\n padding: 50px 20px 46px;\n position: relative;\n top: 0;\n }\n .techStackSection .techStackHeader .techStackTitle {\n font-size: 55px;\n line-height: 1em;\n }\n .techStackSection .techStackCards .techStackCard {\n position: relative;\n top: 0;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber {\n width: 80px;\n height: 90px;\n font-size: 55px;\n padding-top: 10px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist {\n padding: 12px 16px;\n height: 90px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory {\n font-size: 1.4375rem;\n line-height: 30px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons {\n gap: 20px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon {\n height: 30px;\n width: 35px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle {\n width: 80px;\n height: 90px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns {\n flex-direction: column;\n padding-top: 25px;\n gap: 30px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine {\n display: none;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn {\n width: 100%;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn {\n padding-left: 0px;\n }\n}\n@media (max-width: 576px) {\n .techStackSection .techStackHeader {\n padding: 38px 20px 36px;\n }\n .techStackSection .techStackHeader .techStackTitle {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .techStackSection .techStackCards .techStackCard.open .techStackContent {\n padding: 25px 20px;\n max-height: 1200px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber {\n width: 74px;\n height: 90px;\n font-size: 2.75rem;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist {\n padding: 12px;\n height: 90px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory {\n font-size: 1.4375rem;\n line-height: 30px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons {\n gap: 12px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon {\n height: 24px;\n width: 34px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle {\n width: 74px;\n height: 90px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle img {\n height: 20px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackHeading {\n font-size: 1.25rem;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackDescription {\n font-size: 1.125rem;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns {\n flex-direction: column;\n padding-top: 25px;\n gap: 24px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine {\n display: none;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn {\n width: 100%;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackColumnTitle {\n font-size: 1.25rem;\n margin-bottom: 16px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li {\n margin-bottom: 10px;\n font-size: 1.125rem;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn {\n padding-left: 0px;\n }\n}\n.experienceSection {\n width: 100%;\n position: relative;\n}\n.experienceSection .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.experienceSection .experienceHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n position: relative;\n}\n.experienceSection .experienceHeader .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.experienceSection .experienceHeader .experienceTitle {\n font-size: 5rem;\n font-weight: 500;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: #e5f1fd;\n}\n.experienceSection .experienceStats {\n display: flex;\n justify-content: space-between;\n padding: 0 150px 0px;\n gap: 40px;\n}\n.experienceSection .experienceStats .statBox {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.experienceSection .experienceStats .statBox.activeStat .connector {\n display: block;\n}\n.experienceSection .experienceStats .statBox.activeStat .connector-right {\n display: block;\n}\n.experienceSection .experienceStats .statBox.activeStat .bottom-line {\n display: block;\n height: 104px;\n}\n.experienceSection .experienceStats .statBox.activeStat .statNumber {\n color: #64e4cb !important;\n text-shadow: none !important;\n transform: scale(1.05);\n transition: 0.3s ease;\n}\n.experienceSection .experienceStats .statBox.activeStat .statLabel {\n color: #64e4cb;\n}\n.experienceSection .experienceStats .statBox .line {\n width: 1px;\n height: 65px;\n background-color: #64e4cb;\n}\n.experienceSection .experienceStats .statBox .line-dashed {\n width: 1px;\n position: relative;\n height: 104px;\n margin: 28px 0 0;\n}\n.experienceSection .experienceStats .statBox .connector {\n position: relative;\n width: 1px; /* total width */\n height: 132px; /* total height */\n display: none;\n}\n.experienceSection .experienceStats .statBox .connector .connector-dashed {\n position: absolute;\n top: 28px;\n left: 0px; /* vertical line position */\n width: 1px;\n height: 171px; /* vertical part */\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n z-index: -1;\n}\n.experienceSection .experienceStats .statBox .connector .connector-left-dashed {\n position: absolute;\n top: 201px; /* horizontal line position */\n left: 0px; /* where corner bends */\n width: 148px; /* horizontal length */\n height: 1px;\n background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n z-index: 1;\n}\n.experienceSection .experienceStats .statBox .connector-right {\n position: relative;\n width: 1px; /* total width */\n height: 132px; /* total height */\n display: none;\n}\n.experienceSection .experienceStats .statBox .connector-right .connector-dashed {\n position: absolute;\n top: 28px;\n left: 0px; /* vertical line position */\n width: 1px;\n height: 171px; /* vertical part */\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n z-index: -1;\n}\n.experienceSection .experienceStats .statBox .connector-right .connector-right-dashed {\n position: absolute;\n top: 201px;\n right: 0px;\n width: 148px;\n height: 1px;\n background: repeating-linear-gradient(to left, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n z-index: 1;\n}\n.experienceSection .experienceStats .statBox .bottom-line {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n width: 1px;\n height: 0;\n transition: height 0.35s ease;\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n}\n.experienceSection .experienceStats .statBox .statNumber {\n font-size: 130px;\n font-weight: 500;\n line-height: 130px;\n color: #06234f;\n margin: 35px 0 14px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n /* -webkit-text-stroke: 1px $color-primary; */\n text-shadow: 2px 0 0 #64e4cb, -2px 0 0 #64e4cb, 0 2px 0 #64e4cb, 0 -2px 0 #64e4cb, 2px 2px 0 #64e4cb, -2px -2px 0 #64e4cb, 2px -2px 0 #64e4cb, -2px 2px 0 #64e4cb;\n height: 106px;\n cursor: pointer;\n width: 136px; /* Fixed width to accommodate largest number */\n text-align: center; /* Center the numbers within the fixed width */\n display: inline-block;\n}\n.experienceSection .experienceStats .statBox .statLabel {\n font-size: 1.25rem;\n line-height: 1.3em;\n margin-bottom: 10px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 300;\n text-align: center;\n width: min-content;\n}\n.experienceSection .experienceStats .statBox .statNumberOutline {\n color: #06234f;\n text-shadow: 2px 0 0 #64e4cb, -2px 0 0 #64e4cb, 0 2px 0 #64e4cb, 0 -2px 0 #64e4cb, 2px 2px 0 #64e4cb, -2px -2px 0 #64e4cb, 2px -2px 0 #64e4cb, -2px 2px 0 #64e4cb;\n}\n.experienceSection .experienceStats .statBox .statNumberOutline:hover {\n color: #64e4cb;\n text-shadow: none;\n transition: all 0.3s ease;\n}\n.experienceSection .experienceDescription {\n padding: 28px;\n margin: 0 auto;\n margin-bottom: 70px;\n color: #64e4cb;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n max-width: 1080px;\n border: 1px solid #64e4cb;\n background-color: #06234f;\n position: relative;\n z-index: 2;\n}\n.experienceSection .highlightText,\n.experienceSection div {\n display: inline-block;\n width: fit-content;\n margin-bottom: 0px;\n font-size: 2rem;\n line-height: 1.3em;\n color: #64e4cb;\n word-spacing: 4px;\n}\n.experienceSection div {\n display: block;\n width: auto;\n}\n.experienceSection .knowMoreBtn {\n background-color: #64e4cb;\n color: #06234f;\n padding: 6px 10px 0px;\n display: inline-block;\n font-size: 1.875rem;\n line-height: 36px;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n cursor: pointer;\n text-decoration: none;\n position: absolute;\n bottom: 0;\n width: max-content;\n right: 0;\n}\n.experienceSection .knowMoreBtn:hover {\n background-color: #64e4cb;\n color: #06234f;\n}\n\n@media (max-width: 1200px) {\n .experienceSection .experienceHeader {\n padding: 55px;\n }\n .experienceSection .experienceHeader .experienceTitle {\n font-size: 4rem;\n }\n .experienceSection .experienceStats {\n padding: 0 70px 0px;\n }\n .experienceSection .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n }\n}\n@media (max-width: 1024px) {\n .experienceSection .experienceHeader {\n padding: 50px 40px;\n }\n .experienceSection .experienceHeader .experienceTitle {\n font-size: 55px;\n line-height: 1em;\n }\n .experienceSection .experienceStats {\n padding: 0 40px 0px;\n }\n .experienceSection .experienceStats .statBox .statNumber {\n font-size: 110px;\n line-height: 120px;\n margin: 26px 0 10px;\n }\n .experienceSection .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n }\n .experienceSection .experienceDescription .highlightText {\n max-width: 806px;\n }\n .experienceSection .experienceDescription .knowMoreBtn {\n display: block;\n width: fit-content;\n }\n}\n@media (max-width: 768px) {\n .experienceSection .experienceHeader {\n padding: 50px 20px 46px;\n }\n .experienceSection .experienceHeader .experienceTitle {\n font-size: 55px;\n line-height: 1em;\n }\n .experienceSection .experienceStats {\n padding: 0 20px 0px;\n gap: 25px;\n }\n .experienceSection .experienceStats .statBox .statNumber {\n font-size: 70px;\n line-height: 80px;\n height: 72px;\n margin: 26px 0 10px;\n width: 80px;\n }\n .experienceSection .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n }\n .experienceSection .experienceDescription .highlightText {\n max-width: 530px;\n }\n}\n@media (max-width: 576px) {\n .experienceSection .experienceHeader {\n padding: 38px 20px 36px;\n }\n .experienceSection .experienceHeader .experienceTitle {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .experienceSection .experienceStats {\n flex-wrap: wrap;\n margin-bottom: 20px;\n margin-top: 15px;\n }\n .experienceSection .experienceStats .statBox {\n width: calc(50% - 20px);\n }\n .experienceSection .experienceStats .statBox.activeStat .connector-right {\n display: none;\n }\n .experienceSection .experienceStats .statBox.activeStat .connector {\n display: none;\n }\n .experienceSection .experienceStats .statBox .bottom-line {\n display: none;\n }\n .experienceSection .experienceStats .statBox .line-dashed {\n display: none;\n }\n .experienceSection .experienceStats .statBox .line {\n display: none;\n }\n .experienceSection .experienceStats .statBox .statNumber {\n font-size: 70px;\n line-height: 80px;\n height: 72px;\n margin: 26px 0 10px;\n }\n .experienceSection .experienceDescription {\n padding: 20px;\n margin: 0 20px 40px;\n }\n .experienceSection .experienceDescription .highlightText,\n .experienceSection .experienceDescription div,\n .experienceSection .experienceDescription .knowMoreBtn {\n font-size: 1.5rem;\n line-height: 30px;\n }\n}\n/* Add Block CSS Here */\n.digitalProductSection {\n padding: 0px 120px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n position: relative;\n}\n.digitalProductSection .border-bottom-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.digitalProductSection .contentWrapper {\n margin: 0 auto;\n text-align: center;\n padding: 50px 0 0px;\n}\n.digitalProductSection .contentWrapper .border-left-dashed {\n position: absolute;\n top: 0;\n left: 120px;\n width: 1px;\n height: 100%;\n --dash-length: 5px;\n --gap-length: 5px;\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--gap-length)));\n}\n.digitalProductSection .contentWrapper .border-right-dashed {\n position: absolute;\n top: 0;\n right: 120px;\n width: 1px;\n height: 100%;\n --dash-length: 5px;\n --gap-length: 5px;\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--gap-length)));\n}\n.digitalProductSection .contentWrapper .productSectionHeading .heading {\n color: #64e4cb;\n font-size: 3.25rem;\n letter-spacing: 2px;\n font-weight: 500;\n line-height: normal;\n font-family: \"PPSupplyMono-Regular\";\n max-width: 700px;\n margin: 0 auto 40px;\n}\n.digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed {\n position: absolute;\n top: 212px;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px);\n z-index: 1;\n}\n.digitalProductSection .contentWrapper .productSectionDescription .description p {\n color: #cfd7f1;\n font-size: 1.5rem;\n line-height: 1.4em;\n font-weight: 400;\n text-align: start;\n font-family: \"Space Grotesk\", sans-serif;\n padding: 55px 55px 55px;\n}\n.digitalProductSection .contentWrapper .productSectionDescription .border-bottom-dashed {\n position: absolute;\n bottom: 116px;\n left: 0;\n width: 100%;\n text-transform: uppercase;\n height: 1px;\n background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px);\n z-index: 2;\n}\n.digitalProductSection .contentWrapper .buttonGroup {\n display: flex;\n width: 100%;\n gap: 30px;\n padding: 10px;\n position: relative;\n}\n.digitalProductSection .contentWrapper .buttonGroup .border-dashed {\n position: absolute;\n top: 2px;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: repeating-linear-gradient(to bottom, #64e4cb, #64e4cb 6px, transparent 6px, transparent 12px);\n}\n.digitalProductSection .contentWrapper .buttonGroup .ctaBtn {\n width: 50%;\n font-size: 1.5rem;\n color: #ffffff;\n border: none;\n padding: 32px 24px;\n font-weight: bold;\n line-height: normal;\n cursor: pointer;\n font-family: \"Space Grotesk\", sans-serif;\n text-decoration: none;\n}\n.digitalProductSection .contentWrapper .buttonGroup .ctaBtn.active {\n background-color: #64e4cb;\n color: #06234f;\n}\n.digitalProductSection .contentWrapper .buttonGroup .ctaBtn:hover {\n background-color: #64e4cb;\n color: #06234f;\n}\n\n@media (max-width: 1200px) {\n .digitalProductSection {\n padding: 0px 70px;\n }\n .digitalProductSection .contentWrapper .border-left-dashed {\n left: 70px;\n }\n .digitalProductSection .contentWrapper .border-right-dashed {\n right: 70px;\n }\n}\n@media (max-width: 1024px) {\n .digitalProductSection {\n padding: 0px 40px;\n }\n .digitalProductSection .contentWrapper .border-left-dashed {\n left: 40px;\n }\n .digitalProductSection .contentWrapper .border-right-dashed {\n right: 40px;\n }\n}\n@media (max-width: 768px) {\n .digitalProductSection {\n padding: 0px 26px;\n }\n .digitalProductSection .contentWrapper .border-left-dashed {\n left: 26px;\n }\n .digitalProductSection .contentWrapper .border-right-dashed {\n right: 26px;\n }\n .digitalProductSection .contentWrapper .productSectionHeading .heading {\n font-size: 2.5rem;\n }\n .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed {\n top: 190px;\n }\n .digitalProductSection .contentWrapper .productSectionDescription .description p {\n font-size: 1.4375rem;\n padding: 44px 44px 44px;\n }\n}\n@media (max-width: 576px) {\n .digitalProductSection .contentWrapper {\n padding: 40px 0 10px;\n }\n .digitalProductSection .contentWrapper .border-left-dashed {\n left: 26px;\n }\n .digitalProductSection .contentWrapper .border-right-dashed {\n right: 26px;\n }\n .digitalProductSection .contentWrapper .productSectionHeading .heading {\n font-size: 1.5rem;\n padding: 0 6px;\n margin-bottom: 32px;\n }\n .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed {\n top: 161px;\n }\n .digitalProductSection .contentWrapper .productSectionDescription .description p {\n font-size: 1.25rem;\n padding: 28px;\n text-align: center;\n }\n .digitalProductSection .contentWrapper .productSectionDescription .border-bottom-dashed {\n bottom: 238px;\n }\n .digitalProductSection .contentWrapper .buttonGroup {\n flex-direction: column;\n gap: 24px;\n }\n .digitalProductSection .contentWrapper .buttonGroup .border-dashed {\n top: 51%;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px);\n }\n .digitalProductSection .contentWrapper .buttonGroup .ctaBtn {\n width: 100%;\n font-size: 1.4375rem;\n padding: 32px 20px;\n }\n}\n/* Add Block CSS Here */\n.portfolioWrapper {\n width: 100%;\n display: flex;\n}\n.portfolioWrapper .portfolioDetails {\n width: 40%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n gap: 35px;\n padding: 50px;\n position: sticky;\n flex-shrink: 0;\n}\n.portfolioWrapper .portfolioDetails .detailsHeading {\n color: #e5f1fd;\n font-size: 5rem;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 1.1em;\n margin: 0;\n}\n.portfolioWrapper .portfolioDetails .detailsDescription {\n font-size: 1.875rem;\n color: #64e4cb;\n font-weight: 500;\n line-height: 1.4em;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.portfolioWrapper .portfolioDetails .descriptionText {\n font-size: 1.25rem;\n color: #cfd7f1;\n margin: 0;\n font-weight: 300;\n line-height: 1.3em;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.portfolioWrapper .portfolioInformation {\n width: 60%;\n height: 100%;\n display: flex;\n flex-direction: column;\n scrollbar-width: none;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n /* padding-bottom: 1rem; */\n -webkit-overflow-scrolling: touch;\n position: relative;\n}\n.portfolioWrapper .portfolioInformation .border-divider-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n z-index: 9;\n background: #64e4cb;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider {\n width: 100%;\n scroll-snap-align: start;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard {\n width: 100%;\n /* height: 452px; */\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard .border-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard img {\n width: 100%;\n height: auto;\n object-fit: cover;\n display: block;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo {\n display: flex;\n /* height: 250px; */\n color: #e1e7f5;\n position: relative;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .border-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails {\n flex: 2;\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 0;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .border-col-line {\n position: absolute;\n top: 0;\n right: 0 !important;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 2.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #dddddd;\n line-height: normal;\n margin: 0;\n padding: 22px 20px 35px;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags {\n position: relative;\n -webkit-overflow-scrolling: touch;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper {\n display: flex;\n flex-wrap: nowrap; /* Changed from wrap to nowrap for horizontal scroll */\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink {\n padding: 6px 18px;\n font-size: 1rem;\n color: #ffffff;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: 1.6em;\n text-decoration: none;\n /* border-right: 1px solid $color-primary; */\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* overflow: scroll; */\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .border-col-line {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink:hover {\n background-color: #64e4cb;\n color: #06234f;\n font-weight: 500;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink:hover .linkArrow {\n opacity: 1;\n transform: rotate(320deg) scale(1) translateY(0px);\n /* left: 63%; */\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .linkArrow {\n width: 13px;\n height: 13px;\n position: absolute;\n top: 4px;\n right: 4px;\n transform: rotate(320deg) scale(0.8) translateY(30px);\n opacity: 0;\n transition: all 0.3s ease;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright {\n width: 25%;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n padding: 30px 24px;\n position: relative;\n text-decoration: none;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright img {\n width: 100%;\n height: auto;\n object-fit: cover;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .externalLink {\n display: flex;\n position: absolute;\n justify-content: center;\n bottom: 0;\n right: 0;\n background-color: #64e4cb;\n padding: 10px;\n width: 38px;\n height: 34px;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .externalLink .link-image {\n display: block;\n width: 14px;\n height: 14px;\n transform: rotate(322deg);\n}\n.portfolioWrapper .portfolioInformation .btn-more {\n width: 100%;\n background-color: transparent;\n border: none;\n display: flex;\n text-decoration: none;\n gap: 20px;\n align-items: center;\n font-size: 6rem;\n color: #64e4cb;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n line-height: normal;\n justify-content: center;\n padding: 40px 0 30px;\n height: 160px;\n cursor: pointer;\n}\n.portfolioWrapper .portfolioInformation .btn-more:hover {\n background-color: #64e4cb;\n color: #06234f;\n}\n.portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 68px;\n height: 68px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 12px;\n}\n.portfolioWrapper .portfolioInformation .btn-more .btn-arrow img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n@media (max-width: 1200px) {\n .portfolioWrapper .portfolioDetails {\n padding: 40px;\n gap: 26px;\n }\n .portfolioWrapper .portfolioDetails .detailsHeading {\n font-size: 4rem;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 1.875rem;\n padding: 22px 15px 30px;\n }\n .portfolioWrapper .portfolioInformation .btn-more {\n font-size: 4.75rem;\n height: 150px;\n }\n .portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 55px;\n height: 55px;\n }\n}\n@media (max-width: 1024px) {\n .portfolioWrapper {\n flex-direction: column;\n }\n .portfolioWrapper .portfolioDetails {\n width: 100%;\n padding: 70px 40px;\n gap: 26px;\n position: unset;\n }\n .portfolioWrapper .portfolioDetails .detailsHeading {\n font-size: 3.25rem;\n line-height: 1em;\n }\n .portfolioWrapper .portfolioInformation {\n width: 100%;\n border-top: 1px solid #64e4cb;\n border-left: none;\n }\n .portfolioWrapper .portfolioInformation .border-divider-line {\n display: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 1.875rem;\n padding: 22px 15px 30px;\n }\n .portfolioWrapper .portfolioInformation .btn-more {\n font-size: 4rem;\n height: 150px;\n }\n .portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 48px;\n height: 48px;\n }\n}\n@media (max-width: 768px) {\n .portfolioWrapper .portfolioDetails {\n padding: 55px 20px;\n gap: 22px;\n position: unset;\n }\n .portfolioWrapper .portfolioDetails .detailsHeading {\n font-size: 3.25rem;\n line-height: 1em;\n }\n .portfolioWrapper .portfolioInformation .border-divider-line {\n display: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo {\n flex-direction: column;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails {\n border-right: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .border-col-line {\n display: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 1.875rem;\n padding: 22px 15px 30px;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper {\n flex-wrap: nowrap;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink :last-child {\n border-right: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .border-col-line {\n display: block;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright {\n width: 100%;\n border-top: 1px solid #64e4cb;\n padding: 20px;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .projectlogos {\n width: 200px;\n }\n .portfolioWrapper .portfolioInformation .btn-more {\n font-size: 4rem;\n height: 150px;\n }\n .portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 48px;\n height: 48px;\n }\n}\n@media (max-width: 576px) {\n .portfolioWrapper .portfolioDetails {\n padding: 44px 20px;\n gap: 16px;\n }\n .portfolioWrapper .portfolioDetails .detailsHeading {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .portfolioWrapper .portfolioDetails .detailsDescription {\n font-size: 1.5rem;\n line-height: 1.1em;\n }\n .portfolioWrapper .portfolioDetails .descriptionText {\n font-size: 1.125rem;\n line-height: 1.2em;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 1.875rem;\n padding: 22px 15px 30px;\n }\n .portfolioWrapper .portfolioInformation .btn-more {\n font-size: 4rem;\n gap: 14px;\n height: 140px;\n }\n .portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 44px;\n height: 44px;\n }\n}\n.projectDetailsWrapper {\n margin-top: 94px;\n}\n.projectDetailsWrapper .projectHeadingDetails {\n padding: 70px;\n position: relative;\n}\n.projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle {\n font-size: 4rem;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n color: #64e4cb;\n line-height: normal;\n text-align: left;\n word-break: break-word;\n}\n.projectDetailsWrapper .projectHeadingDetails .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.projectDetailsWrapper .projectLandingImage {\n width: 100%;\n height: auto;\n}\n.projectDetailsWrapper .projectLandingImage img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n.project-overview-wrapper {\n /* project-description */\n}\n.project-overview-wrapper .project-info {\n display: flex;\n align-items: stretch;\n position: relative;\n}\n.project-overview-wrapper .project-info .border-line {\n position: absolute;\n top: 0;\n left: 0;\n bottom: unset;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.project-overview-wrapper .project-info .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.project-overview-wrapper .project-info .project-info-logo {\n width: 400px;\n /* height: 350px; */\n flex-shrink: 0;\n object-fit: contain;\n background-color: rgba(0, 124, 189, 0.4392156863);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.project-overview-wrapper .project-info .project-info-logo img {\n width: 60%;\n height: auto;\n object-fit: cover;\n}\n.project-overview-wrapper .project-info .projectInfoTech {\n width: 100%;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .border-left {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info {\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label,\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n font-size: 1.875rem;\n font-family: \"Space Grotesk\", sans-serif;\n /* font-family: \"PPSupplySans-Regular\", sans-serif; */\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n color: #e5f1fd;\n padding-left: 8px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span {\n width: 40px;\n height: 40px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills {\n max-width: 100%;\n width: 100%;\n height: auto;\n position: relative;\n display: flex;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info {\n padding: 24px;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n display: block;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label,\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading {\n color: #e5f1fd;\n font-size: 1.25rem;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category {\n padding: 24px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n margin-bottom: 6px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n font-size: 1.25rem;\n color: #cfd7f1;\n line-height: normal;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology {\n display: flex;\n width: 100%;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies {\n padding: 24px;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags {\n display: flex;\n flex-wrap: wrap;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .border-top-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 16px;\n font-size: 1rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #e5f1fd;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech:first-of-type .border-col-left {\n opacity: 1;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .border-col-left {\n position: absolute;\n top: 0;\n left: 0 !important;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n opacity: 0;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .border-col-line {\n position: absolute;\n top: 0;\n right: 0 !important;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-description {\n padding: 24px;\n position: relative;\n}\n.project-overview-wrapper .project-description .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.project-overview-wrapper .project-description .project-description-heading {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n color: #64e4cb;\n line-height: normal;\n text-transform: capitalize;\n}\n.project-overview-wrapper .project-description .project-description-info {\n margin-top: 8px;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #e5f1fd;\n line-height: normal;\n}\n\n.brand-section .brand-block .brand-header {\n display: flex;\n align-items: center;\n gap: 24px;\n position: relative;\n}\n.brand-section .brand-block .brand-header .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.brand-section .brand-block .brand-header .brand-number {\n background: #64e4cb;\n color: #000000;\n font-size: 70px;\n font-weight: 300;\n padding: 20px 20px 10px;\n /* font-family: \"Space Grotesk\", sans-serif; */\n font-family: \"PPSupplyMono-Ultralight\";\n line-height: 76px;\n}\n.brand-section .brand-block .brand-header .brand-heading {\n color: #64e4cb;\n font-size: 34px;\n /* font-family: \"Space Grotesk\", sans-serif; */\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n line-height: 40px;\n text-transform: uppercase;\n}\n.brand-section .brand-block:last-child .brand-content .border-bottom-line {\n display: none;\n}\n.brand-section .brand-block .brand-content {\n display: flex;\n align-items: stretch;\n width: 100%;\n position: relative;\n}\n.brand-section .brand-block .brand-content.brand-content-reverse {\n flex-direction: row-reverse;\n}\n.brand-section .brand-block .brand-content .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 2;\n}\n.brand-section .brand-block .brand-content .brand-image {\n width: 100%;\n flex: 1.6;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.brand-section .brand-block .brand-content .brand-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.brand-section .brand-block .brand-content .brand-description {\n max-width: 30%;\n width: 100%;\n flex-shrink: 0;\n padding: 34px;\n display: flex;\n background: rgba(100, 228, 203, 0.2);\n position: relative;\n}\n.brand-section .brand-block .brand-content .brand-description.brand-reverse {\n border-left: 0;\n}\n.brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.brand-section .brand-block .brand-content .brand-description .border-left {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.brand-section .brand-block .brand-content .brand-description .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n display: none;\n}\n.brand-section .brand-block .brand-content .brand-description p {\n color: #cfd7f1;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: normal;\n}\n\n@media (max-width: 1200px) {\n .projectDetailsWrapper .projectHeadingDetails {\n padding: 50px;\n }\n .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle {\n font-size: 48px;\n }\n .brand-section .brand-block .brand-content .brand-description {\n padding: 24px;\n }\n}\n@media (max-width: 1024px) {\n .projectDetailsWrapper .projectHeadingDetails {\n padding: 40px;\n }\n .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle {\n font-size: 2.75rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info {\n padding: 20px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills {\n flex-direction: column;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info {\n padding: 20px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .border-right {\n display: none;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category {\n padding: 20px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology {\n flex-direction: column;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies {\n padding: 20px;\n }\n .brand-section .brand-block .brand-header .brand-number {\n font-size: 60px;\n padding: 16px 16px 6px;\n }\n .brand-section .brand-block .brand-content .brand-description {\n padding: 20px;\n }\n}\n@media (max-width: 768px) {\n .projectDetailsWrapper {\n margin-top: 72px;\n }\n .project-overview-wrapper {\n /* project-description */\n }\n .project-overview-wrapper .project-info .project-info-logo {\n width: 260px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info {\n flex-direction: column;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills {\n max-width: 100%;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-right {\n display: none;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-bottom-line {\n display: block;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech {\n padding: 14px;\n }\n .project-overview-wrapper .project-description {\n padding: 20px;\n }\n .brand-section .brand-block .brand-header .brand-number {\n font-size: 54px;\n padding: 16px 16px 6px;\n line-height: 60px;\n }\n .brand-section .brand-block .brand-header .brand-heading {\n font-size: 28px;\n line-height: 32px;\n }\n .brand-section .brand-block .brand-content {\n flex-direction: column-reverse !important;\n }\n .brand-section .brand-block .brand-content .brand-description {\n max-width: 100%;\n }\n .brand-section .brand-block .brand-content .brand-description .border-left {\n display: none;\n }\n .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right {\n display: none;\n }\n .brand-section .brand-block .brand-content .brand-description .border-bottom-line {\n display: block;\n }\n}\n@media (max-width: 576px) {\n .projectDetailsWrapper .projectHeadingDetails {\n padding: 36px 20px 34px;\n }\n .project-overview-wrapper {\n /* project-description */\n }\n .project-overview-wrapper .project-info {\n flex-direction: column-reverse;\n }\n .project-overview-wrapper .project-info .project-info-logo {\n width: 100% !important;\n height: 160px;\n }\n .project-overview-wrapper .project-info .projectInfoTech {\n width: 100%;\n position: relative;\n }\n .project-overview-wrapper .project-info .projectInfoTech .border-left {\n display: none;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n font-size: 1.25rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span {\n width: 40px;\n height: 40px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info {\n display: flex;\n align-items: stretch;\n position: relative;\n flex-direction: column;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills {\n max-width: 100%;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading {\n font-size: 1.25rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label {\n font-size: 1.25rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info {\n font-size: 1.125rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology {\n display: block;\n width: 100%;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label {\n font-size: 1.25rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech:first-of-type .border-col-left {\n opacity: 0;\n }\n .project-overview-wrapper .project-description {\n padding: 16px;\n }\n .project-overview-wrapper .project-description .project-description-heading {\n font-size: 1.4375rem;\n }\n .project-overview-wrapper .project-description .project-description-info {\n margin-top: 6px;\n font-size: 1.125rem;\n }\n .brand-section .brand-block .brand-header .brand-number {\n font-size: 2.75rem;\n padding: 12px 12px 2px;\n line-height: 54px;\n }\n .brand-section .brand-block .brand-header .brand-heading {\n font-size: 28px;\n line-height: 32px;\n }\n .brand-section .brand-block .brand-content {\n flex-direction: column-reverse !important;\n }\n .brand-section .brand-block .brand-content .brand-description {\n padding: 16px;\n max-width: 100%;\n }\n .brand-section .brand-block .brand-content .brand-description .border-left {\n display: none;\n }\n .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right {\n display: none;\n }\n .brand-section .brand-block .brand-content .brand-description .border-bottom-line {\n display: block;\n }\n .brand-section .brand-block .brand-content .brand-description p {\n font-size: 1.125rem;\n }\n}\n/* Add Block CSS Here */\n.herobanner {\n margin-top: 94px;\n height: auto !important;\n display: flex;\n position: relative;\n min-height: 600px;\n}\n.herobanner .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.herobanner .herobannerleft {\n max-width: 30%;\n width: 100%;\n flex-shrink: 0;\n position: relative;\n}\n.herobanner .herobannerleft .aboutHero {\n max-width: 100%;\n width: 100%;\n}\n.herobanner .herobannerleft .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background-color: #64e4cb;\n}\n.herobanner .herobannerleft .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n display: none;\n}\n.herobanner .herobannerright .heroheading {\n padding: 40px;\n position: relative;\n}\n.herobanner .herobannerright .heroheading .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.herobanner .herobannerright .heroheading .bannerTitle {\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 400 !important;\n font-size: 4rem;\n line-height: 72px;\n color: #64e4cb;\n}\n.herobanner .herobannerright .bannerSubDetail {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 33px;\n color: #ffffff;\n padding: 40px;\n margin-bottom: 0px;\n}\n\n#matrix-face-container {\n font-family: \"Courier New\", monospace;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n min-height: 400px;\n overflow: hidden; /* ← ADD */\n box-sizing: border-box;\n}\n\n.mf-output {\n max-width: 100%;\n overflow: hidden; /* ← ADD: clip overflowing pre */\n margin-top: 16px;\n}\n\n.mf-output pre {\n margin: 0;\n line-height: 1;\n /* font-size set dynamically by JS */\n white-space: pre;\n overflow: hidden;\n}\n\n@media (max-width: 1200px) {\n .herobanner .herobannerright .heroheading {\n padding: 30px;\n }\n .herobanner .herobannerright .heroheading .bannerTitle {\n font-size: 3.25rem;\n line-height: 62px;\n }\n .herobanner .herobannerright .bannerSubDetail {\n font-size: 1.25rem;\n line-height: 28px;\n padding: 30px;\n }\n}\n@media (max-width: 1024px) {\n .herobanner .herobannerleft {\n max-width: 40%;\n }\n .herobanner .herobannerright .heroheading {\n padding: 24px;\n }\n .herobanner .herobannerright .heroheading .bannerTitle {\n font-size: 2.875rem;\n line-height: 52px;\n }\n .herobanner .herobannerright .bannerSubDetail {\n font-size: 1.25rem;\n line-height: 26px;\n padding: 24px;\n }\n}\n@media (max-width: 768px) {\n .herobanner {\n margin-top: 72px;\n flex-direction: column;\n min-height: auto;\n }\n .herobanner .herobannerleft {\n max-width: 100%;\n }\n .herobanner .herobannerleft .border-right {\n display: none;\n }\n .herobanner .herobannerleft .border-bottom-line {\n display: block;\n }\n .herobanner .herobannerright .heroheading {\n padding: 20px;\n }\n .herobanner .herobannerright .heroheading .bannerTitle {\n font-size: 2.875rem;\n line-height: 52px;\n }\n .herobanner .herobannerright .bannerSubDetail {\n font-size: 1.25rem;\n line-height: 26px;\n padding: 20px;\n }\n}","// assets/scss/bootstrap.scss\n// ROOT ENTRY FILE – compile only this\n\n/* 1️⃣ Abstracts (global tools only) */\n@use \"./fonts\" as *;\n@use \"./variables\" as *;\n@use \"./color.scss\" as *;\n@use \"./mixins/mixins\" as *;\n@use \"./mixins/breakpoint\" as *;\n\n/* 2️⃣ Base styles */\n@use \"./main\";\n@use \"./page.scss\" as *;\n@use \"./variables\" as *; // ✅ correct\n\n/* 3️⃣ Layout (NO as *) */\n@use \"./layout/header\";\n@use \"./layout/footer\";\n@use \"./layout/sidebar\";\n@use \"./layout/404\" as *;\n@use \"./layout/index\";\n@use \"./layout/project-archive\";\n@use \"./layout/testimonial-archive.scss\";\n\n/* 4️⃣ ACF Blocks */\n@use \"./acf-block-scss/hero-banner.scss\";\n@use \"./acf-block-scss/worked-with-companies.scss\";\n@use \"./acf-block-scss/tech-stack.scss\";\n@use \"./acf-block-scss/experience-section.scss\";\n@use \"./acf-block-scss/digital-innovation-cta.scss\";\n@use \"./acf-block-scss/portfolio-hero.scss\";\n@use \"./acf-block-scss/single-projects.scss\";\n@use \"./acf-block-scss/about-intro.scss\";\n","// ===============================\n// TYPOGRAPHY SYSTEM - KRUPALPATEL\n// ===============================\n\n// Google Fonts Imports\n@import url(\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap\");\n\n// Local Font Face Declarations\n@font-face {\n font-family: \"PPSupplySans-Regular\";\n src: url(\"../fonts/PPSupplySans-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplySans-Ultralight\";\n src: url(\"../fonts/PPSupplySans-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplyMono-Ultralight\";\n src: url(\"../fonts/PPSupplyMono-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplyMono-Regular\";\n src: url(\"../fonts/PPSupplyMono-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n// ===============================\n// SCSS FONT VARIABLES\n// ===============================\n\n// Primary Font Family Variables (Body Text)\n$font-primary:\n \"PPSupplySans-Regular\",\n \"Manrope\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n sans-serif;\n$font-primary-light: \"PPSupplySans-Ultralight\", \"Manrope\", sans-serif;\n$font-primary-medium: \"Manrope\", sans-serif;\n$font-primary-bold: \"Manrope\", sans-serif;\n\n// Secondary Font Family Variables (Headings)\n$font-secondary: \"Space Grotesk\", \"Manrope\", sans-serif;\n$font-secondary-800: \"Space Grotesk\", sans-serif;\n\n// Monospace Font Family Variables (Code/Technical)\n$font-mono: \"PPSupplyMono-Regular\", \"SF Mono\", \"Monaco\", \"Inconsolata\",\n \"Fira Code\", \"Droid Sans Mono\", \"Courier New\", monospace;\n$font-mono-light: \"PPSupplyMono-Ultralight\", \"SF Mono\", monospace;\n\n// Display Font Family Variables (Special Use)\n$font-display: \"Orbitron\", \"Space Grotesk\", sans-serif;\n\n// Individual Font Names (for specific use cases)\n$font-ppsupply-sans-regular: \"PPSupplySans-Regular\";\n$font-ppsupply-sans-ultralight: \"PPSupplySans-Ultralight\";\n$font-ppsupply-mono-regular: \"PPSupplyMono-Regular\";\n$font-ppsupply-mono-ultralight: \"PPSupplyMono-Ultralight\";\n$font-manrope: \"Manrope\";\n$font-space-grotesk: \"Space Grotesk\";\n$font-orbitron: \"Orbitron\";\n\n// Line Height Variables\n$line-height-none: 1;\n$line-height-tight: 1.2;\n$line-height-snug: 1.3;\n$line-height-normal: 1.5;\n$line-height-relaxed: 1.75;\n$line-height-loose: 2;\n\n// Letter Spacing Variables\n$letter-spacing-tighter: -0.05em;\n$letter-spacing-tight: -0.025em;\n$letter-spacing-normal: 0em;\n$letter-spacing-wide: 0.025em;\n$letter-spacing-wider: 0.05em;\n$letter-spacing-widest: 0.1em;\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","@use \"./fonts.scss\" as *;\n@use \"./variables.scss\" as *;\n@use \"./typography.scss\" as *;\n@use \"./mixins/breakpoint.scss\" as *;\n@use \"./mixins/mixins.scss\" as *;\n@use \"./color.scss\" as *;\n\nhtml,\nbody {\n overflow-x: hidden;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n}\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n background-color: $color-primary-dark;\n\n // min-height: 100vh;\n // height: 100vh;\n}\na {\n color: var(--color-theme);\n}\nbutton:focus,\n.btn.focus,\n.btn:focus,\n.btn:hover,\na:focus,\n.btn.active,\n.btn:active,\n.btn:active,\n.btn:active:focus,\na:active:focus,\na:active {\n outline: none;\n}\na:hover {\n text-decoration: none;\n}\na:active {\n text-decoration: none;\n}\nimg {\n object-fit: cover;\n max-width: 100%;\n height: auto;\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n","// @mixin breakpoint($size) {\n// @media only screen and (max-width: $size + px) {\n// @content;\n// }\n// }\n.text-block {\n position: relative;\n z-index: 5;\n h4 {\n text-transform: uppercase;\n color: var(--color-theme);\n margin-bottom: 20px;\n // @include breakpoint(767) {\n // margin-bottom: 15px;\n // }\n }\n h2 {\n margin-bottom: 15px;\n font-size: 40px;\n color: #fff;\n // @include breakpoint(767) {\n // margin-bottom: 24px;\n // }\n }\n h1 {\n margin-bottom: 15px;\n font-size: 60px;\n color: #fff;\n // @include breakpoint(767) {\n // margin-bottom: 24px;\n // }\n }\n h3 {\n color: var(--color-theme);\n margin-bottom: 15px;\n // @include breakpoint(767) {\n // margin-bottom: 24px;\n // }\n }\n p {\n margin-bottom: 25px;\n color: #cfd7f1;\n font-size: 20px;\n // @include breakpoint(767) {\n // margin-bottom: 20px;\n // }\n strong {\n font-family: var(--font-primary-bold);\n }\n }\n .btn {\n margin-top: 15px;\n // @include breakpoint(767) {\n // margin-top: 10px;\n // }\n }\n}\n.contact-block {\n position: relative;\n z-index: 1;\n background: var(--color-black);\n padding: 50px;\n // @include breakpoint(991) {\n // padding: 30px;\n // }\n label {\n color: var(--color-white);\n text-transform: uppercase;\n font-size: 11px;\n letter-spacing: 1px;\n width: 100%;\n }\n .wpcf7-form-control-wrap {\n margin-bottom: 10px;\n width: 100%;\n display: block;\n }\n .wpcf7-text,\n .wpcf7-email,\n .wpcf7-textarea {\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--color-theme);\n color: var(--color-white);\n font-size: 16px;\n padding: 0px 0 0px 0;\n width: 100%;\n &:focus-visible {\n box-shadow: none;\n outline: none;\n }\n }\n .wpcf7-textarea {\n border: 1px solid var(--color-theme);\n height: 135px;\n padding: 0 5px;\n }\n .wpcf7-checkbox {\n border-bottom: none;\n .wpcf7-list-item {\n margin-left: 0;\n label {\n text-transform: none;\n font-size: 9px;\n cursor: pointer;\n letter-spacing: 0px;\n }\n input {\n position: absolute;\n left: -9999px;\n & + .wpcf7-list-item-label {\n position: relative;\n padding-left: 30px;\n line-height: 20px;\n &:after,\n &:before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n }\n &:before {\n border-radius: 50%;\n top: -2px;\n left: 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--color-theme);\n }\n &:after {\n border-radius: 50%;\n top: 2px;\n left: 4px;\n width: 8px;\n height: 8px;\n background: var(--color-theme);\n transition: all 0.2s;\n }\n }\n }\n input:not(:checked) {\n & + .wpcf7-list-item-label {\n &:after {\n opacity: 0;\n transform: scale(0.01);\n }\n }\n }\n input:checked {\n & + .wpcf7-list-item-label {\n &:after {\n opacity: 1;\n transform: scale(1);\n }\n }\n }\n }\n }\n .btn-wrap {\n position: relative;\n text-align: right;\n // @include breakpoint(767) {\n // text-align: center;\n // }\n p {\n margin: 0;\n }\n .wpcf7-spinner {\n position: absolute;\n right: 0;\n top: 8px;\n }\n }\n .wpcf7-not-valid-tip {\n font-size: 10px;\n text-transform: none;\n letter-spacing: 0;\n }\n}\n.home {\n .video-section + .text-section {\n padding-bottom: 55px;\n }\n}\n.text-section.section-padding {\n padding-bottom: var(--section-padding-small);\n}\n\n#smooth-wrapper {\n position: relative; // ← Keep as relative\n width: 100%;\n height: 100vh; // ← ADD: Required for ScrollSmoother\n overflow: hidden;\n}\n\n#smooth-content {\n position: relative;\n width: 100%;\n will-change: transform;\n padding-top: 107px;\n /* transform: none !important; */\n}\n\n.layout-wrapper {\n display: flex;\n min-height: 100vh;\n\n /* Sidebar */\n .sidebar-wrp {\n width: auto;\n height: 100vh;\n z-index: 100;\n }\n\n /* Main Content Wrapper */\n .main-content-wrapper {\n flex: 1;\n margin-left: 123px;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: stretch;\n\n /* Main Content */\n .main-content {\n flex: 1;\n }\n /* Footer */\n .footer-content {\n margin-top: auto;\n }\n }\n}\n\n.blog-content,\n.blogHeadingDetails {\n // Typography scale (fluid)\n h1 {\n font-size: clamp(32px, 5vw, 64px);\n color: #64e4cb;\n line-height: normal;\n margin-bottom: 0;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n\n h2 {\n font-size: clamp(26px, 4vw, 40px);\n color: #fff;\n line-height: 1.3;\n margin: 24px 0 12px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n\n h3 {\n font-size: clamp(22px, 3vw, 30px);\n color: #fff;\n margin: 20px 0 10px;\n font-family: \"Space Grotesk\", sans-serif;\n }\n\n h4 {\n font-size: clamp(18px, 2.5vw, 24px);\n color: #fff;\n margin: 16px 0 8px;\n font-family: \"Space Grotesk\", sans-serif;\n }\n\n h5 {\n font-size: clamp(16px, 2vw, 20px);\n color: #fff;\n margin: 12px 0 6px;\n }\n\n span {\n color: #cfd7f1;\n font-size: clamp(16px, 1.5vw, 20px);\n display: block;\n margin-bottom: 8px;\n }\n\n p {\n color: #cfd7f1;\n font-size: clamp(16px, 1.5vw, 20px);\n line-height: 1.5;\n margin-bottom: 20px;\n font-family: \"Space Grotesk\", sans-serif;\n }\n\n a {\n color: #00e5cc;\n text-decoration: none;\n font-size: inherit;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n ul,\n ol {\n margin: 16px 0;\n padding-left: 20px;\n\n li {\n color: #fff;\n font-size: 20px;\n margin-bottom: 6px;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n\n img {\n width: auto;\n height: auto;\n margin: 24px 0;\n }\n\n pre {\n background: #0d1b2a;\n color: #00e5cc;\n padding: 20px;\n border-radius: 12px;\n overflow-x: auto;\n margin: 24px 0;\n font-size: 14px;\n line-height: 1.6;\n }\n\n code {\n font-family: \"Courier New\", monospace;\n }\n\n // Inline code\n p code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 6px;\n border-radius: 6px;\n color: #00e5cc;\n }\n}\n\n// post-navigation\n.post-navigation {\n .nav-links {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n width: 100%;\n border-top: 1px solid #64e4cb;\n\n .nav-previous,\n .nav-next {\n padding: 20px;\n max-width: 48%;\n\n a {\n font-size: 18px;\n color: #64e4cb;\n font-weight: 500 !important;\n font-family: \"Space Grotesk\", sans-serif;\n display: flex;\n align-items: center;\n gap: 6px;\n transition:\n gap 0.3s ease,\n opacity 0.3s ease;\n text-decoration: none;\n line-height: 1.4;\n\n &:hover {\n gap: 12px;\n opacity: 0.8;\n }\n }\n }\n\n // ← Arrow BEFORE the text for Previous\n .nav-previous a::before {\n content: \"←\";\n font-size: 40px; // bigger arrow\n line-height: 1;\n height: 20px;\n color: #64e4cb;\n display: flex;\n align-items: center;\n align-self: center; // force vertical center\n flex-shrink: 0;\n transition: transform 0.3s ease;\n margin-top: -12px;\n justify-content: center; // optical alignment fix\n }\n\n .nav-previous a:hover::before {\n transform: translateX(-4px);\n }\n\n // → Arrow AFTER the text for Next\n .nav-next a::after {\n content: \"→\";\n font-size: 40px; // bigger arrow\n line-height: 1;\n height: 20px;\n color: #64e4cb;\n display: flex;\n align-items: center;\n align-self: center; // force vertical center\n flex-shrink: 0;\n transition: transform 0.3s ease;\n margin-top: -12px;\n justify-content: center; // optical alignment fix\n }\n\n .nav-next a:hover::after {\n transform: translateX(4px);\n }\n\n // Right-align the Next link\n .nav-next {\n margin-left: auto;\n\n a {\n justify-content: flex-end;\n }\n }\n }\n}\n.enlighter span {\n display: inline-block;\n font-size: 1.45em;\n}\n.enlighter-code {\n overflow: hidden;\n padding: 20px 10px 20px 5px;\n}\n@media (max-width: 1200px) {\n .post-navigation {\n .nav-links {\n align-items: center;\n flex-direction: column;\n justify-content: space-between;\n gap: 0px;\n\n .nav-previous,\n .nav-next {\n padding: 10px;\n max-width: 100%;\n width: 100%;\n }\n\n // On mobile stack: Previous on left, Next on right-aligned\n .nav-next {\n margin-left: 0;\n\n a {\n justify-content: flex-end;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .layout-wrapper {\n .main-content-wrapper {\n margin-left: 0px;\n width: 100%;\n }\n }\n}\n","@use \"./../main.scss\" as *;\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n/* Homepage specific */\n.homepage-header .site-header {\n position: absolute;\n}\n\n/* Other pages */\n.innerpage-header .site-header {\n position: relative;\n}\n\n.header {\n width: 100%;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 99;\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px); /* Safari support */\n background: rgba(6, 35, 79, 0.85);\n}\nheader .nav {\n display: flex;\n align-items: center;\n position: relative;\n}\n.nav .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n}\n.nav-brand {\n padding: 30px 20px;\n flex-shrink: 0;\n position: relative;\n}\n.nav-brand .nav-brand-border-line {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n}\n\n.nav-brand-link {\n width: 84px;\n display: flex;\n height: 32px;\n align-items: center;\n justify-content: center;\n}\n\n.nav-brand-logo {\n object-fit: cover;\n max-width: 100%;\n width: 100%;\n height: auto;\n}\n.nav-brand-text {\n color: $color-primary;\n font-size: 35px;\n line-height: normal;\n margin: 0;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n\n.nav-list {\n display: flex;\n gap: 45px;\n list-style: none;\n padding: 32px 52px;\n width: 100%;\n}\n.nav-item .nav-link {\n position: relative;\n color: #cbd5e1;\n text-decoration: none;\n font-size: $heading-sm;\n letter-spacing: 1px;\n font-weight: $font-weight-medium;\n transition: color 0.3s ease;\n font-family: \"PPSupplySans-Ultralight\", sans-serif;\n}\n\n.nav-item .nav-link::before,\n.nav-item .nav-link::after {\n position: absolute;\n opacity: 0;\n transition: all 0.3s ease;\n color: $color-primary;\n font-size: $heading-sm;\n font-weight: bold;\n line-height: normal;\n top: 0;\n transform: translateX(10px);\n transition: all 0.2s ease;\n}\n\n.nav-item .nav-link::before {\n content: \"\\\\\";\n left: -15px;\n top: -2px;\n transform: translateX(10px);\n}\n\n.nav-item .nav-link::after {\n content: \"\\\\\";\n right: -15px;\n top: -2px;\n transform: translateX(-10px);\n}\n\n.nav-item .nav-link:hover {\n color: $color-primary;\n font-weight: 400;\n}\n\n.nav-item .nav-link:hover::before,\n.nav-item .nav-link:hover::after {\n opacity: 1;\n transform: translateX(0px);\n transition: all 0.5s ease;\n}\n\n.menu-item-has-children {\n position: relative;\n}\n\n.menu-item-has-children:hover > .sub-menu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}\n\n/* Submenu base */\n.sub-menu {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 280px;\n background: #0b1f3b;\n border: 1px solid $color-primary;\n padding: 8px 0;\n list-style: none;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.3s ease;\n z-index: 99;\n}\n\n/* Submenu items */\n.sub-menu .nav-link {\n display: block;\n padding: 8px 16px;\n font-size: $heading-sm;\n color: #cbd5e1;\n}\n\n.sub-menu .nav-link:hover {\n color: $color-primary;\n}\n\n.sub-menu .nav-link:hover::before,\n.sub-menu .nav-link:hover::after {\n opacity: 0;\n}\n\n/* Active (open) state */\n.menu-item-has-children.open > .sub-menu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}\n\n.toggleBtn {\n /* width: 100%; */\n text-align: end;\n margin-right: 20px;\n display: none;\n}\n.toggleIcon {\n font-size: $heading-lg;\n display: inline-block;\n font-weight: $font-weight-medium;\n color: $color-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n transform: rotate(62deg);\n}\n.socialLink {\n display: none;\n height: auto;\n gap: 30px;\n align-items: center;\n}\n\n.sidebar-link {\n width: 30px;\n height: 30px;\n}\n.sidebar-link img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n@media (max-width: 1024px) {\n body.menu-open {\n overflow: hidden;\n }\n\n .header {\n position: fixed;\n top: 0;\n }\n .toggleBtn {\n display: block;\n cursor: pointer;\n margin-left: auto;\n position: relative;\n z-index: 9999;\n }\n .socialLink {\n display: flex;\n }\n .nav-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 100%;\n height: 100vh;\n z-index: 1000;\n transition: right 0.3s ease-in-out;\n }\n\n .nav-menu.open {\n right: 0;\n }\n\n .nav-list {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 30px;\n list-style: none;\n padding: 45px 30px;\n position: absolute;\n top: 111px;\n left: 0;\n width: 100%;\n min-height: calc(100vh - 111px);\n overflow-y: auto;\n border: 1px solid $color-primary;\n backdrop-filter: blur(50px);\n -webkit-backdrop-filter: blur(50px); /* Safari support */\n background: rgba(6, 35, 79, 1);\n }\n\n .nav-item,\n .menu-item-has-children {\n width: 100%;\n }\n\n .nav-link {\n font-size: $heading-md;\n font-weight: $font-weight-semibold !important;\n color: #fff;\n text-decoration: none;\n }\n\n .sub-menu {\n position: static;\n min-width: 100%;\n margin-top: 0;\n max-height: 0;\n overflow: hidden;\n opacity: 1;\n visibility: visible;\n transform: none;\n padding: 0;\n border: 0;\n background: transparent;\n transition:\n max-height 0.3s ease,\n margin-top 0.3s ease,\n padding-top 0.3s ease;\n }\n\n .menu-item-has-children:hover > .sub-menu {\n max-height: 0;\n margin-top: 0;\n padding-top: 0;\n }\n\n .menu-item-has-children.open > .sub-menu {\n max-height: 240px;\n margin-top: 12px;\n padding-top: 10px;\n border-top: 1px solid rgba($color-primary, 0.35);\n }\n\n .sub-menu .nav-link {\n padding: 10px 0 10px 18px;\n font-size: $heading-sm;\n }\n}\n@media (max-width: 768px) {\n .nav-brand {\n padding: 20px 22px;\n }\n .nav-list {\n top: 96px;\n min-height: calc(100vh - 96px);\n }\n}\n","@use \"./../main.scss\" as *;\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.footerContent {\n position: relative;\n display: flex;\n\n .border-bottom-line {\n position: absolute;\n top: unset;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .border-col-line {\n position: absolute;\n top: 0;\n left: 49.95%;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n .footerLeft {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .footerHeadingText {\n padding: 51px 34px;\n\n .footerHeading {\n font-size: $heading-2xl;\n font-weight: $font-weight-normal;\n line-height: 53px;\n color: $text-dark-primary;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n }\n\n .footer-left-bottom {\n padding: 34px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n\n .footerMail {\n display: flex;\n gap: 18px;\n align-items: center;\n\n .iconmail {\n width: 30px;\n height: 20px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n\n .mailText {\n font-size: $text-xxl;\n color: $white;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: 1.3em;\n }\n }\n\n .getButton {\n background-color: $color-primary;\n color: $color-primary-dark;\n padding: 12px 40px;\n display: inline-block;\n width: fit-content;\n\n .getBtn {\n font-size: $text-xl;\n line-height: 28px;\n cursor: pointer;\n font-weight: $font-weight-medium;\n color: $color-primary-dark;\n text-decoration: none;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n }\n\n .border-bottom-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: unset;\n margin-top: -2px;\n }\n }\n\n .footerRight {\n flex: 1;\n display: flex;\n position: relative;\n\n .border-col-line {\n position: absolute;\n top: 0;\n left: 50%;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n &-colume-1,\n &-colume-2 {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 50%;\n\n .footerRight-heading {\n padding: 20px 34px;\n background-color: $color-primary;\n color: $black;\n font-size: $text-xxl;\n font-weight: $font-weight-semibold;\n line-height: 29px;\n font-family: \"Space Grotesk\", sans-serif;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-transform: uppercase;\n }\n }\n\n &-colume-1 {\n .footerRight-links {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0;\n }\n }\n\n &-colume-2 {\n .footerRight-heading {\n position: relative;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -1px;\n width: 100%;\n height: 100%;\n border-left: 2px solid $color-primary-dark;\n pointer-events: none;\n z-index: 1;\n }\n }\n }\n }\n}\n\n.footer-link-list {\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100%;\n\n .footerLink {\n color: $white;\n font-size: $text-xxl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: 29px;\n text-decoration: none;\n width: 100%;\n display: flex;\n padding: 20px 30px;\n\n align-items: center;\n justify-content: center;\n position: relative;\n\n .footer-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n &:hover {\n color: $color-primary;\n font-weight: 600;\n }\n }\n}\n\n.social-list {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n\n li {\n .social-link {\n display: flex;\n align-items: center;\n color: $white;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $text-lg;\n width: 100%;\n position: relative;\n text-decoration: none;\n\n &:hover {\n .text-link {\n color: $color-primary;\n }\n }\n\n .icon {\n width: 70px;\n height: 69px;\n border-right: 1px solid $color-primary;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n flex-shrink: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n .text-link {\n padding: 0 10px 0 40px;\n text-decoration: none;\n color: $white;\n font-size: $text-xxl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: 29px;\n width: 100%;\n }\n\n .footer-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n .footerContent {\n .footerLeft {\n .footerHeadingText {\n padding: 34px;\n }\n }\n }\n}\n\n@media screen and (max-width: 1024px) {\n .footerContent {\n .footerLeft {\n .footerHeadingText {\n padding: 24px;\n }\n .footer-left-bottom {\n padding: 24px;\n }\n }\n .footerRight {\n &-colume-1,\n &-colume-2 {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 50%;\n\n .footerRight-heading {\n padding: 20px 16px;\n }\n }\n }\n }\n\n .social-list .text {\n li {\n .social-link {\n .text-link {\n padding: 0 10px 0 24px;\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .footerContent {\n flex-direction: column;\n\n .border-col-line {\n display: none;\n }\n\n .footerRight {\n .border-col-line {\n display: block;\n }\n }\n .footerLeft {\n .footerHeadingText {\n padding: 20px;\n }\n .footerHeadingText {\n .footerHeading {\n font-size: $heading-xl;\n line-height: 42px;\n }\n .footer-left-bottom {\n padding: 20px;\n gap: 20px;\n }\n }\n }\n }\n}\n\n@media screen and (max-width: 576px) {\n .footerContent {\n .footerLeft {\n .footerHeadingText {\n padding: 20px 16px;\n }\n .footer-left-bottom {\n padding: 20px 16px;\n gap: 16px;\n }\n }\n .footerRight {\n width: 100%;\n flex-direction: column;\n\n &-colume-1,\n &-colume-2 {\n width: 100%;\n }\n .border-col-line {\n display: none;\n }\n\n &-colume-2 {\n .footerRight-heading {\n position: relative;\n\n &::after {\n content: none;\n display: none;\n }\n }\n }\n }\n }\n}\n","@use \"./../main.scss\" as *;\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.sidebar {\n display: flex;\n flex-direction: column;\n padding: 50px 46px;\n position: fixed; /* Fix the sidebar */\n top: 94px;\n left: 0;\n height: calc(100vh - 94px);\n gap: 50px;\n align-items: center;\n z-index: 1;\n}\n.sidebar .sidebar-border-line {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n}\n\n.sidebar-link {\n width: 32px;\n height: 32px;\n cursor: pointer;\n}\n\n.sidebar-link img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.sidebar-link img:hover {\n filter: brightness(10%) saturate(100%) invert(81%) sepia(25%) saturate(745%)\n hue-rotate(113deg) brightness(95%) contrast(92%);\n}\n\n.scrollup {\n position: absolute;\n left: 50%;\n bottom: 50px;\n width: 33px;\n height: 32px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n transform: translate(-50%, 12px);\n transition:\n background-color 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease,\n opacity 0.3s ease;\n\n .arrowIcon {\n width: auto;\n height: 24px;\n }\n\n &.is-scrolled {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n transform: translate(-50%, 0);\n }\n}\n\n@media (max-width: 1024px) {\n .sidebar {\n display: none;\n }\n}\n","// .wrapper-card {\n// text-align: center;\n// justify-content: center;\n// align-items: center;\n// min-height: 100vh;\n// display: flex;\n// position: relative;\n// overflow: hidden;\n// background-color: #fff;\n\n// .main-wrapper {\n// max-width: 800px;\n// width: 100%;\n// margin: 0 auto;\n// text-align: center;\n// justify-content: center;\n// flex-direction: column;\n// align-items: center;\n// min-height: 100vh;\n// display: flex;\n\n// .page-title {\n// font-family: \"General Sans\", sans-serif;\n// margin-bottom: 8px;\n// line-height: 144px;\n// }\n// .page-content {\n// margin-bottom: 32px;\n// font-size: $heading-sm;\n// font-family: \"Roboto Mono\", monospace;\n// color: $text-dark-primary;\n// font-weight: 400;\n// line-height: 20px;\n// text-transform: uppercase;\n// }\n// .btn {\n// display: flex;\n// align-items: center;\n// justify-content: center;\n// border: 1px solid #e8eded;\n// background-color: #103e3a;\n// color: #ffffff;\n// padding: 12px 16px;\n// border-radius: 8px;\n// text-align: center;\n// text-decoration: none;\n// font-size: 15px;\n// font-family: \"Inter\", sans-serif;\n// font-weight: 400;\n// line-height: 15px;\n// width: max-content;\n// position: relative;\n// overflow: hidden; // Important for hiding the transition\n\n// .btnshow,\n// .btnhover {\n// display: block;\n// transition: transform 0.3s ease;\n// width: 100%;\n// text-align: center;\n// }\n\n// .btnhover {\n// position: absolute;\n// top: 0;\n// left: 0;\n// right: 0;\n// bottom: 0;\n// display: flex;\n// align-items: center;\n// justify-content: center;\n// transform: translateY(100%);\n// }\n\n// &:hover {\n// .btnshow {\n// transform: translateY(-200%);\n// }\n\n// .btnhover {\n// transform: translateY(0%);\n// }\n// }\n// }\n// }\n// }\n@media screen and (max-width: 991px) {\n .wrapper-card {\n .main-wrapper {\n .page-content {\n margin-bottom: 20px;\n }\n }\n }\n}\n","@use \"./../main.scss\" as *;\n\n.main {\n display: flex;\n\n .sidebar-wrp {\n flex-shrink: 0;\n width: auto;\n }\n}\n","/* Project Archive & Taxonomy Listing Styles */\n\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n/* Filter tabs — extend existing .filterWrapper styles for link-based tabs */\n.filterWrapper {\n .filter-tabs {\n a.tab {\n text-decoration: none;\n color: $white;\n display: inline-block;\n transition:\n background 0.2s,\n color 0.2s;\n\n &.active {\n background: $color-primary;\n color: $color-primary-dark;\n font-weight: $font-weight-semibold;\n }\n &:hover {\n background: $color-primary;\n color: $color-primary-dark;\n }\n }\n }\n}\n\n/* Project card tech tags in footer */\n.projectCards {\n .project-cards {\n .project-cards-right {\n .project-footer-right {\n .project-tech-tags {\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n\n .tech-tag {\n font-size: 14px;\n font-family: \"Space Grotesk\", sans-serif;\n color: $color-primary;\n padding: 4px 10px;\n border: 1px solid $color-primary;\n border-radius: 2px;\n font-weight: $font-weight-normal;\n }\n }\n }\n }\n\n /* Logo text fallback */\n .project-cards-left {\n .project-left-card {\n .project-header {\n .project-logo {\n .logo {\n .logo-text {\n font-size: $heading-xs;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-semibold;\n color: $color-primary;\n }\n }\n }\n }\n }\n }\n }\n}\n\n/* Pagination */\n.projects-pagination {\n padding: 40px 24px;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n background: $color-primary;\n width: 100%;\n height: 1px;\n }\n\n .nav-links {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-family: \"Space Grotesk\", sans-serif;\n\n a,\n span {\n padding: 10px 16px;\n font-size: $text-base;\n font-weight: $font-weight-medium;\n border: 1px solid $color-primary;\n color: $text-dark-primary;\n text-decoration: none;\n transition:\n background 0.2s,\n color 0.2s;\n }\n a:hover,\n .current {\n background: $color-primary;\n color: $color-primary-dark;\n }\n }\n}\n\n/* No projects fallback */\n.no-projects {\n padding: 80px 24px;\n text-align: center;\n\n p {\n font-size: $text-xl;\n font-family: \"Space Grotesk\", sans-serif;\n color: $text-dark-light;\n }\n}\n\n/* Single project — taxonomy links */\n.project-overview-wrapper {\n .project-info {\n .projectInfoTech {\n .project-technology-info {\n .project-skills {\n .project-skills-info {\n .project-skills-heading a {\n color: $text-dark-primary;\n text-decoration: none;\n transition: color 0.2s;\n\n &:hover {\n color: $color-primary;\n }\n }\n }\n .project-category {\n .project-category-info a {\n color: $text-dark-light;\n text-decoration: none;\n transition: color 0.2s;\n\n &:hover {\n color: $color-primary;\n }\n }\n }\n }\n .project-technology {\n .tech-tags {\n .tech {\n .tech-name {\n text-decoration: none;\n color: $text-dark-primary;\n transition: color 0.2s;\n\n &:hover {\n color: $color-primary;\n }\n }\n\n a.tech-name {\n text-decoration: none;\n }\n }\n }\n }\n }\n }\n }\n}\n\n/* Related projects */\n.related-projects-section {\n // margin-top: 40px;\n\n .related-projects-header {\n padding: 24px;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .related-projects-heading {\n font-size: 62px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n color: $color-primary;\n line-height: normal;\n }\n }\n}\n\n/* Editor content within single project */\n.project-editor-content {\n padding: 24px;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: $color-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n margin-bottom: 12px;\n }\n\n p {\n color: $text-dark-primary;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $heading-xs;\n line-height: 1.6;\n margin-bottom: 16px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n }\n}\n\n// ================================== PortFolio Showcase scss ====================================== //\n.projectCards {\n display: flex;\n flex-direction: column;\n width: 100%;\n\n .project-cards {\n width: 100%;\n display: flex;\n position: relative;\n\n .border-line {\n position: absolute;\n top: -1px;\n left: 0%;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .project-cards-left {\n width: 40%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .project-left-card {\n display: flex;\n flex-direction: column;\n\n .project-header {\n display: flex;\n align-items: center;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: block;\n }\n .index-box {\n background: $color-primary;\n color: #000;\n font-size: $font-70;\n font-weight: $font-weight-light;\n padding: 20px 16px 4px;\n font-family: \"PPSupplyMono-Ultralight\";\n line-height: 76px;\n }\n .project-logo {\n padding: 20px;\n width: 100%;\n\n .logo {\n width: 170px;\n height: 60px;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: $text-xxl;\n font-weight: $font-weight-semibold;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n }\n .project-heading-text {\n font-size: $heading-4xl;\n color: $color-primary;\n margin-bottom: 6px;\n font-weight: $font-weight-normal;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 56px;\n margin-bottom: 0;\n text-decoration: none;\n display: block;\n }\n }\n\n .logorow {\n padding: 24px 24px 0;\n\n .logo {\n max-width: 40%;\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: $text-xxl;\n font-weight: $font-weight-semibold;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n }\n\n .left-content {\n padding: 24px;\n\n .project-heading-text {\n font-size: 36px;\n color: $color-primary;\n margin-bottom: 6px;\n font-weight: $font-weight-normal;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 46px;\n text-decoration: none;\n display: inline-block;\n }\n .project-heading-info {\n color: $text-dark-light;\n font-size: $text-xl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-light;\n line-height: 24px;\n }\n }\n }\n .project-left-footer {\n padding: 20px;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .project-category-card {\n font-size: $text-xl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $text-dark-light;\n line-height: 30px;\n }\n }\n }\n .project-cards-right {\n width: 60%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n .project-image {\n width: 100%;\n height: auto;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .project-footer-right {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .platform-icons {\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n width: 50px;\n height: 50px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-fit: cover;\n background-color: transparent;\n border: none;\n }\n }\n }\n .details-btn {\n background: $color-primary;\n color: #041b3d;\n border: none;\n cursor: pointer;\n padding: 22px 26px;\n height: 100%;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $heading-sm;\n line-height: normal;\n font-weight: $font-weight-medium;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n\n &:hover {\n background: #4fd6be;\n }\n\n .arrow-icon {\n width: 20px;\n height: 20px;\n margin-left: 10px;\n\n svg {\n width: 100%;\n height: 100%;\n }\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 1200px) {\n .projectCards {\n .project-cards {\n width: 100%;\n\n .project-cards-left {\n width: 50%;\n\n .project-left-card {\n display: flex;\n flex-direction: column;\n\n .project-header {\n .project-heading-text {\n font-size: 36px;\n line-height: 44px;\n }\n }\n\n .left-content {\n .project-heading-text {\n font-size: $heading-xl;\n line-height: 42px;\n }\n }\n }\n }\n .project-cards-right {\n width: 50%;\n }\n }\n }\n\n .related-projects-section {\n .related-projects-header {\n .related-projects-heading {\n font-size: $heading-5xl;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .projectCards {\n .project-cards {\n width: 100%;\n flex-direction: column;\n .project-cards-left {\n width: 100%;\n\n .border-bottom-line {\n display: block;\n }\n .border-right {\n display: none;\n }\n .project-left-card {\n .project-header {\n .index-box {\n font-size: 62px;\n line-height: 68px;\n }\n .project-logo {\n padding: 16px;\n }\n .project-heading-text {\n font-size: $heading-lg;\n line-height: 40px;\n }\n }\n .logorow {\n padding: 20px 20px 0;\n }\n .left-content {\n padding: 20px;\n\n .project-heading-text {\n font-size: $heading-md;\n line-height: 34px;\n }\n }\n }\n .project-left-footer {\n padding: 20px;\n position: relative;\n }\n }\n .project-cards-right {\n width: 100%;\n }\n }\n }\n .related-projects-section {\n .related-projects-header {\n .related-projects-heading {\n font-size: 42px;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .projectCards {\n .project-cards {\n .project-cards-left {\n .project-left-card {\n .project-header {\n .index-box {\n font-size: 54px;\n padding: 16px;\n line-height: 64px;\n display: flex;\n align-items: center;\n }\n\n .project-logo {\n .logo {\n width: 140px;\n }\n }\n }\n .logorow {\n padding: 16px 16px 0;\n\n .logo {\n width: 140px;\n }\n }\n }\n }\n .project-cards-right {\n .project-footer-right {\n .platform-icons {\n span {\n width: 40px;\n height: 40px;\n }\n }\n }\n }\n }\n }\n .related-projects-section {\n .related-projects-header {\n .related-projects-heading {\n font-size: $heading-xl;\n }\n }\n }\n}\n@media (max-width: 576px) {\n .projectCards {\n .project-cards {\n .project-cards-left {\n .project-left-card {\n .project-header {\n .index-box {\n font-size: $heading-5xl;\n line-height: 58px;\n padding: 16px 16px 8px;\n }\n .project-logo {\n padding: 10px 16px;\n\n .logo {\n width: 140px;\n }\n }\n }\n .logorow {\n padding: 16px 16px 0;\n\n .logo {\n width: 140px;\n }\n }\n .left-content {\n padding: 16px;\n }\n }\n .project-left-footer {\n padding: 16px;\n }\n }\n .project-cards-right {\n .project-footer-right {\n .platform-icons {\n padding: 10px;\n }\n }\n }\n }\n }\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .projects-pagination {\n padding: 30px 16px;\n\n .nav-links {\n flex-wrap: wrap;\n\n a,\n span {\n padding: 8px 12px;\n font-size: 14px;\n }\n }\n }\n\n .related-projects-section {\n .related-projects-header {\n padding: 20px;\n\n .related-projects-heading {\n font-size: $heading-md;\n }\n }\n }\n}\n\n@media (max-width: 576px) {\n .project-editor-content {\n padding: 16px;\n }\n}\n","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.testimonialWrapper {\n margin-top: 94px;\n height: 530px;\n width: 100%;\n display: flex;\n padding-left: 170px;\n justify-content: center;\n flex-direction: column;\n position: relative;\n position: relative; // ✅ canvas anchors here\n overflow: hidden; // ✅ clip canvas to bounds\n\n // --- Canvas background ---\n .testimonial-bg-canvas {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n z-index: 0;\n pointer-events: none; // remove if you want ripple clicks\n display: block;\n }\n\n // --- Keep text above canvas ---\n .testimonialHeading,\n .discription,\n .border-line {\n position: relative;\n z-index: 1;\n }\n\n .testimonialHeading {\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 400 !important;\n font-size: $heading-6xl;\n line-height: 72px;\n color: $color-primary;\n max-width: 660px;\n margin-bottom: 12px;\n }\n .discription {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n font-size: $heading-md;\n line-height: 33px;\n color: $white;\n margin-bottom: 0px;\n max-width: 900px;\n }\n\n .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n}\n\n.testimonial-Content {\n position: relative;\n\n .border-line {\n position: absolute;\n top: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .testimonial-row {\n display: flex;\n align-items: stretch;\n position: relative;\n\n &.testimonial-content-reverse {\n flex-direction: row-reverse;\n\n .testimonialCard-right {\n .border-right {\n display: block;\n }\n }\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .testimonialCard-left {\n width: 50%;\n flex-shrink: 0;\n position: relative;\n\n .linkCard {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 1;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n\n .testimonialAuthor {\n display: flex;\n align-items: center;\n height: 130px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: block;\n }\n\n .authorImage {\n width: 130px;\n height: 130px;\n overflow: hidden;\n flex-shrink: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .authorInfoDetails {\n width: 100%;\n height: 100%;\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n\n .authorInfo {\n display: flex;\n flex-direction: column;\n\n .authorName {\n font-size: $heading-lg;\n font-weight: $font-weight-normal;\n color: $color-primary;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: normal;\n }\n .authorPosition {\n font-size: $heading-sm;\n font-weight: $font-weight-normal;\n color: $text-dark-light;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n line-height: normal;\n }\n }\n .authorCompanyLogo {\n max-width: 170px;\n width: auto;\n height: 100%;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n }\n }\n .testimonialContent {\n padding: 34px;\n\n .testimonialText {\n font-size: $text-xxl;\n font-weight: $font-weight-light;\n line-height: 30px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n }\n }\n }\n .testimonialCard-right {\n width: 50%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .border-left {\n position: absolute;\n top: 0;\n left: -1px;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .border-right {\n position: absolute;\n top: 0;\n right: 0px;\n width: 1px;\n height: 100%;\n background: $color-primary;\n display: none;\n }\n\n .testimonialCards {\n display: flex;\n flex-direction: column;\n position: relative;\n\n .linkCard {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 1;\n }\n\n &:last-child {\n border-bottom: none;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .testimonialAuthor {\n display: flex;\n align-items: center;\n height: 130px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: block;\n }\n\n .authorImage {\n width: 130px;\n height: 130px;\n overflow: hidden;\n flex-shrink: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .authorInfoDetails {\n width: 100%;\n height: 100%;\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n\n .authorInfo {\n display: flex;\n flex-direction: column;\n\n .authorName {\n font-size: $heading-lg;\n font-weight: $font-weight-normal;\n color: $color-primary;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .authorPosition {\n font-size: $text-xl;\n font-weight: $font-weight-normal;\n color: $text-dark-light;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n .authorCompanyLogo {\n max-width: 170px;\n width: auto;\n height: 100%;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n }\n }\n .testimonialContent {\n padding: 34px;\n\n .testimonialText {\n font-size: $text-xxl;\n font-weight: $font-weight-light;\n line-height: 30px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n .testimonialWrapper {\n padding-left: 125px;\n padding-right: 20px;\n\n .testimonialHeading {\n font-size: $font-54;\n line-height: 64px;\n }\n .discription {\n font-size: $heading-sm;\n line-height: 28px;\n }\n }\n}\n@media (max-width: 1024px) {\n .testimonialWrapper {\n height: 485px;\n padding-left: 80px;\n\n .testimonialHeading {\n font-size: $heading-4xl;\n line-height: 52px;\n }\n }\n\n .testimonial-Content {\n .testimonial-row {\n .testimonialCard-left {\n .testimonialAuthor {\n height: 100px;\n\n .authorImage {\n width: 100px;\n height: 100px;\n }\n .authorInfoDetails {\n padding: 20px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n }\n .authorCompanyLogo {\n max-width: 150px;\n }\n }\n }\n .testimonialContent {\n padding: 24px;\n\n .testimonialText {\n font-size: $heading-sm;\n line-height: 26px;\n }\n }\n }\n .testimonialCard-right {\n .testimonialCards {\n .testimonialAuthor {\n height: 100px;\n\n .authorImage {\n width: 100px;\n height: 100px;\n }\n .authorInfoDetails {\n padding: 20px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n }\n .authorCompanyLogo {\n max-width: 150px;\n }\n }\n }\n .testimonialContent {\n padding: 24px;\n\n .testimonialText {\n font-size: $text-xl;\n line-height: 26px;\n }\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 768px) {\n .testimonialWrapper {\n height: 456px !important;\n padding: 0 20px;\n margin-top: 72px;\n\n .testimonialHeading {\n font-size: $heading-4xl;\n line-height: 52px;\n }\n }\n .testimonial-Content {\n .testimonial-row {\n flex-direction: column;\n\n &.testimonial-content-reverse {\n flex-direction: column;\n\n .testimonialCard-right {\n .border-right {\n display: none;\n }\n }\n }\n .testimonialCard-left {\n width: 100%;\n\n .border-bottom-line {\n display: block;\n }\n .testimonialAuthor {\n height: 100px;\n\n .authorImage {\n width: 100px;\n height: 100px;\n }\n .authorInfoDetails {\n padding: 20px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n }\n .authorCompanyLogo {\n max-width: 150px;\n }\n }\n }\n .testimonialContent {\n padding: 20px;\n\n .testimonialText {\n font-size: $text-xl;\n line-height: 26px;\n }\n }\n }\n .testimonialCard-right {\n width: 100%;\n\n .border-left {\n display: none;\n }\n .testimonialCards {\n .testimonialAuthor {\n height: 100px;\n\n .authorImage {\n width: 100px;\n height: 100px;\n }\n .authorInfoDetails {\n padding: 20px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n }\n .authorCompanyLogo {\n max-width: 150px;\n }\n }\n }\n .testimonialContent {\n padding: 20px;\n\n .testimonialText {\n font-size: $text-xl;\n line-height: 26px;\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .testimonialWrapper {\n height: 456px !important;\n\n .testimonialHeading {\n font-size: $font-34;\n line-height: 42px;\n }\n\n .discription {\n font-size: $font-18;\n }\n }\n .testimonial-Content {\n .testimonial-row {\n flex-direction: column;\n .testimonialCard-left {\n width: 100%;\n\n .border-bottom-line {\n display: block;\n }\n .testimonialAuthor {\n height: 82px;\n\n .authorImage {\n width: 82px;\n height: 82px;\n }\n .authorInfoDetails {\n padding: 16px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xl;\n }\n .authorPosition {\n font-size: $text-base;\n }\n }\n .authorCompanyLogo {\n max-width: 100px;\n }\n }\n }\n .testimonialContent {\n padding: 16px;\n }\n }\n .testimonialCard-right {\n width: 100%;\n\n .border-left {\n display: none;\n }\n .testimonialCards {\n .testimonialAuthor {\n height: 82px;\n\n .authorImage {\n width: 82px;\n height: 82px;\n }\n .authorInfoDetails {\n padding: 16px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xl;\n }\n .authorPosition {\n font-size: $text-base;\n }\n }\n .authorCompanyLogo {\n max-width: 100px;\n }\n }\n }\n .testimonialContent {\n padding: 16px;\n }\n }\n }\n }\n }\n}\n","@use \"./../main.scss\" as *;\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n/* Add Block CSS Here */\n.bannerWrapper {\n margin-top: 94px;\n width: 100%;\n height: 698px;\n display: flex;\n padding-left: 170px;\n justify-content: space-between;\n position: relative;\n\n .banner-left {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n z-index: 20;\n }\n\n .border-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n\n .bannerSubHeading {\n font-size: $text-xxl;\n color: $color-primary;\n font-weight: $font-weight-medium;\n line-height: 30px;\n margin-bottom: 10px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n display: block;\n }\n .bannerHeading {\n font-size: 64px;\n color: $text-color;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 74px;\n margin-bottom: 10px;\n\n .subdetails {\n color: $color-primary;\n font-size: $text-xxl;\n font-weight: $font-weight-medium;\n margin-left: 3px;\n line-height: 30px;\n display: inline-block;\n }\n }\n .button-row {\n position: relative;\n\n .hero-button-border {\n position: absolute;\n width: 170px;\n height: 1px;\n background-color: $color-primary;\n left: -170px;\n top: 52px;\n z-index: -1;\n }\n }\n\n .touchbutton {\n width: fit-content !important;\n padding: 22px 38px 22px 51px;\n background-color: $color-primary;\n border: 1px solid $color-primary;\n font-size: $text-lg;\n color: $black;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n display: flex;\n align-items: center;\n line-height: normal;\n gap: 14px;\n margin-top: 20px;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n cursor: pointer;\n text-decoration: none;\n\n img {\n width: 16px;\n height: 15px;\n object-fit: cover;\n }\n }\n}\n/* DOT GRID */\n#dot-grid {\n position: absolute;\n inset: 0;\n z-index: 1;\n background-image: radial-gradient(\n circle,\n rgba(100, 228, 203, 0.11) 1px,\n transparent 1px\n );\n background-size: 28px 28px;\n pointer-events: none;\n -webkit-mask-image: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.65) 0%,\n rgba(0, 0, 0, 0.65) 48%,\n rgba(0, 0, 0, 0) 100%\n );\n mask-image: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.65) 0%,\n rgba(0, 0, 0, 0.65) 48%,\n rgba(0, 0, 0, 0) 100%\n );\n}\n/* CANVAS */\n.banner-right {\n width: 43%;\n position: absolute;\n overflow: hidden;\n min-height: 80%;\n top: 60px;\n right: 20px;\n\n .globe-stage {\n position: absolute;\n inset: 0;\n }\n}\n\n#globe-canvas {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n}\n\n#tech-nodes {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 20;\n}\n\n.tech-node {\n position: absolute;\n /* Centered offset — set ONCE, never mutated by JS */\n transform: translate(-18px, -18px);\n pointer-events: none;\n /* No CSS transition — opacity updated directly each frame */\n will-change: left, top, opacity;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n}\n\n.tech-icon {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(5, 18, 48, 0.92);\n border: 2px solid;\n transform: translate3d(0, 0, 0); /* force GPU rasterisation at 1:1 */\n}\n\n.tech-icon svg {\n width: 18px;\n height: 18px;\n display: block;\n shape-rendering: geometricPrecision;\n}\n\n@keyframes scrollLogos {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n}\n@keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(22px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 1200px) {\n .bannerWrapper {\n padding-left: 125px;\n\n .button-row {\n .hero-button-border {\n width: 125px;\n left: -125px;\n }\n }\n }\n .banner-right {\n top: 85px;\n right: 0px;\n }\n}\n@media (max-width: 1024px) {\n .bannerWrapper {\n padding-left: 80px !important;\n height: 655px;\n align-items: center;\n\n .bannerHeading {\n font-size: $heading-5xl;\n line-height: 64px;\n }\n }\n}\n@media (max-width: 768px) {\n .bannerWrapper {\n flex-direction: column;\n padding-left: 20px !important;\n height: 600px;\n margin-top: 72px;\n\n // .banner-left,\n // .banner-right {\n // width: 100%;\n // }\n\n // .banner-left {\n // padding-left: 0;\n // padding-right: 20px;\n // padding-top: 70px;\n // min-height: 0;\n // }\n\n // .banner-left::before {\n // top: 70px;\n // }\n\n .bannerHeading {\n font-size: $heading-4xl;\n line-height: 56px;\n }\n\n .banner-right {\n display: none;\n }\n }\n}\n@media (max-width: 576px) {\n .bannerWrapper {\n padding-left: 20px;\n height: 575px;\n\n .bannerHeading {\n font-size: $heading-3xl;\n line-height: 48px;\n\n .subdetails {\n display: block;\n margin: 8px 0 2px;\n }\n }\n .touchbutton {\n padding: 18px 30px 18px 41px;\n }\n }\n}\n","/* Add Block CSS Here */\n\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n@keyframes marquee-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes marquee-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n.worked-with-companies {\n position: relative;\n overflow: hidden;\n\n .border-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n\n .logoWrapper {\n display: flex;\n align-items: stretch;\n\n .logos-Heading {\n max-width: 292px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n position: relative;\n\n .logosTitle {\n font-size: $heading-4xl;\n color: $text-dark-light;\n text-transform: uppercase;\n font-weight: $font-weight-light;\n line-height: 56px;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n }\n\n .logosRow {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n\n .border-bottom-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n flex-shrink: 0;\n }\n\n .logosGroup {\n display: flex;\n width: 100%;\n overflow: hidden;\n height: 103px; // fixed row height — adjust to match your design\n\n &:hover .logosTrack {\n animation-play-state: paused;\n }\n\n // Row 1 — scrolls LEFT, normal speed\n &[data-row=\"odd\"] .logosTrack {\n animation: marquee-left 35s linear infinite;\n }\n\n // Row 2 — scrolls RIGHT, slightly different speed\n &[data-row=\"even\"] .logosTrack {\n animation: marquee-left 35s linear infinite;\n }\n\n .logosTrack {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n height: 100%;\n }\n\n .logos {\n width: 200px;\n flex-shrink: 0;\n height: 100%;\n padding: 18px 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0px,\n $color-primary 6px,\n transparent 6px,\n transparent 12px\n );\n }\n\n img {\n width: 100%;\n height: 100%;\n max-height: 50px;\n object-fit: contain;\n }\n }\n }\n }\n }\n}\n@media (max-width: 1200px) {\n .worked-with-companies {\n .logoWrapper {\n .logos-Heading {\n .logosTitle {\n font-size: $heading-xl;\n line-height: 44px;\n }\n }\n .logosRow {\n .logosGroup {\n height: 63px;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .worked-with-companies {\n .logoWrapper {\n .logos-Heading {\n padding: 16px;\n .logosTitle {\n font-size: $heading-md;\n line-height: 32px;\n }\n }\n .logosRow {\n .logosGroup {\n height: 53px;\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .worked-with-companies {\n .logoWrapper {\n display: flex;\n flex-direction: column;\n .logos-Heading {\n max-width: 100%;\n justify-content: flex-start;\n\n .border-right {\n display: none;\n }\n\n .border-bottom-line {\n display: block;\n }\n }\n\n .logosRow {\n .logosGroup {\n .logos {\n max-width: 250px;\n width: 100%;\n max-height: 60px;\n height: 60px;\n padding: 12px;\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .worked-with-companies {\n .logoWrapper {\n .logosRow {\n .logosGroup {\n .logos {\n max-width: 200px;\n padding: 15px;\n }\n }\n }\n }\n }\n}\n","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.techStackSection {\n width: 100%;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n /* z-index: 2; */\n }\n #border-line {\n z-index: 2;\n }\n\n /* Tech Stack Header */\n .techStackHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n /* position: sticky;\n top: 107px; */\n z-index: 1;\n background: $color-primary-dark;\n position: relative;\n\n .techStackTitle {\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: $text-dark-primary;\n }\n .border-line-text {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n }\n\n /* Tech Stack Cards */\n .techStackCards {\n display: flex;\n flex-direction: column;\n\n .techStackCard {\n background-color: $color-primary-dark;\n position: relative;\n\n &.open {\n .techStackCardHeader {\n border-bottom: 1px solid $color-primary;\n }\n .techStackNumber {\n color: $color-primary !important;\n /* -webkit-text-stroke: 2px $color-primary-dark; */\n font-weight: 500 !important;\n text-shadow:\n 1px 0 0 $color-primary-dark,\n 2px 0 0 $color-primary-dark,\n 0 2px 0 $color-primary-dark,\n 0 -2px 0 $color-primary-dark,\n 0px 2px 0 $color-primary-dark,\n -2px 0px 0 $color-primary-dark,\n 0px -2px 0 $color-primary-dark,\n 0px 2px 0 $color-primary-dark;\n font-family: \"PPSupplySans-Regular\", sans-serif !important;\n border-bottom: none;\n }\n .techStackContent {\n max-height: 1000px; /* Adjust based on your content height */\n opacity: 1;\n transform: translateY(0);\n padding: 35px 45px; /* Restore full padding when open */\n transition: all 0.6s ease-out;\n }\n .techStackToggle {\n img {\n transform: rotate(1deg) !important;\n transition: transform 0.3s ease !important;\n }\n }\n .techStackHeading {\n font-family: \"Orbitron\", sans-serif;\n font-weight: 700;\n letter-spacing: 1px;\n color: #00e6e6;\n }\n }\n .techStackCardHeader {\n display: flex;\n align-items: center;\n width: 100%;\n cursor: pointer;\n transition: all 0.3s ease;\n\n &:last-child {\n .techStackNumber {\n border-bottom: none;\n }\n }\n\n .techStackNumber {\n background-color: $color-primary;\n color: #222222;\n width: 123px;\n height: 123px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 70px;\n font-weight: $font-weight-light;\n font-family: \"PPSupplyMono-Ultralight\";\n border-bottom: 1px dashed #222222;\n transition: all 0.4s ease;\n }\n .technologist {\n display: flex;\n flex-direction: column;\n padding: 20px;\n width: 100%;\n height: 123px;\n justify-content: space-between;\n\n .techStackCategory {\n color: $color-primary;\n font-size: $heading-lg;\n font-weight: $font-weight-medium;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin: 0;\n line-height: 36px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .techStackIcons {\n display: flex;\n align-items: center;\n gap: 40px;\n\n .techStackIcon {\n height: 40px;\n width: 45px;\n object-fit: contain;\n }\n }\n }\n .techStackToggle {\n color: #00ffff;\n background: none;\n border: none;\n cursor: pointer;\n font-size: $heading-sm;\n width: 123px;\n height: 123px;\n flex-shrink: 0;\n /* border-left: 1px dashed $color-primary; */\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: auto;\n height: 25px;\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n }\n\n .border-left-dashed {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: repeating-linear-gradient(\n to top,\n $color-primary 0,\n $color-primary 4px,\n transparent 4px,\n transparent 8px\n );\n }\n }\n }\n .techStackContent {\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n transform: translateY(-20px);\n transition: all 0.5s ease-in-out;\n padding: 0 45px;\n\n .techStackHeading {\n font-size: $text-xxl;\n font-weight: $font-weight-medium;\n line-height: 1.3em;\n color: $color-primary;\n font-family: \"PPSupplyMono-Regular\";\n margin-bottom: 18px;\n }\n .techStackDescription {\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $heading-sm;\n font-weight: $font-weight-normal;\n line-height: 1.6;\n margin-bottom: 25px;\n }\n .techStackColumns {\n display: flex;\n padding-top: 35px;\n gap: 40px;\n /* border-top: 1px dashed #767676; */\n position: relative;\n\n .tech-borderLine-row {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n #767676,\n #767676 6px,\n transparent 6px,\n transparent 12px\n );\n }\n .tech-borderLine {\n position: absolute;\n top: 35px;\n left: 50%;\n width: 1px;\n transform-origin: left;\n height: 270px;\n background: repeating-linear-gradient(\n to bottom,\n #767676,\n #767676 6px,\n transparent 6px,\n transparent 12px\n );\n }\n .techStackColumn {\n width: 50%;\n color: $white;\n position: relative;\n\n .techStackColumnTitle {\n font-size: $text-xxl;\n font-weight: $font-weight-medium;\n line-height: 1.3em;\n color: $color-primary;\n font-family: \"PPSupplyMono-Regular\";\n margin-bottom: 18px;\n }\n .techStackList {\n list-style: none;\n padding: 0;\n margin: 0;\n\n li {\n margin-bottom: 10px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $heading-sm;\n font-weight: $font-weight-light;\n position: relative;\n\n &::before {\n content: \"//\";\n color: $color-primary;\n margin-right: 8px;\n font-weight: $font-weight-light;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n }\n }\n\n &.rightColumn {\n padding-left: 35px;\n }\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n .techStackSection {\n .techStackHeader {\n padding: 55px;\n\n .techStackTitle {\n font-size: $heading-6xl;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .techStackSection {\n .techStackHeader {\n padding: 50px 40px;\n\n .techStackTitle {\n font-size: 55px;\n line-height: 1em;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .techStackSection {\n .techStackHeader {\n padding: 50px 20px 46px;\n position: relative;\n top: 0;\n\n .techStackTitle {\n font-size: 55px;\n line-height: 1em;\n }\n }\n .techStackCards {\n .techStackCard {\n position: relative;\n top: 0;\n .techStackCardHeader {\n .techStackNumber {\n width: 80px;\n height: 90px;\n font-size: 55px;\n padding-top: 10px;\n }\n .technologist {\n padding: 12px 16px;\n height: 90px;\n\n .techStackCategory {\n font-size: $text-xxl;\n line-height: 30px;\n }\n\n .techStackIcons {\n gap: 20px;\n\n .techStackIcon {\n height: 30px;\n width: 35px;\n }\n }\n }\n .techStackToggle {\n width: 80px;\n height: 90px;\n }\n }\n .techStackContent {\n .techStackColumns {\n flex-direction: column;\n padding-top: 25px;\n gap: 30px;\n\n .tech-borderLine {\n display: none;\n }\n .techStackColumn {\n width: 100%;\n\n &.rightColumn {\n padding-left: 0px;\n }\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .techStackSection {\n .techStackHeader {\n padding: 38px 20px 36px;\n\n .techStackTitle {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n }\n .techStackCards {\n .techStackCard {\n &.open {\n .techStackContent {\n padding: 25px 20px;\n max-height: 1200px;\n }\n }\n .techStackCardHeader {\n .techStackNumber {\n width: 74px;\n height: 90px;\n font-size: $heading-3xl;\n }\n .technologist {\n padding: 12px;\n height: 90px;\n\n .techStackCategory {\n font-size: $text-xxl;\n line-height: 30px;\n }\n\n .techStackIcons {\n gap: 12px;\n\n .techStackIcon {\n height: 24px;\n width: 34px;\n }\n }\n }\n .techStackToggle {\n width: 74px;\n height: 90px;\n\n img {\n height: 20px;\n }\n }\n }\n .techStackContent {\n .techStackHeading {\n font-size: $heading-sm;\n }\n .techStackDescription {\n font-size: $text-lg;\n }\n .techStackColumns {\n flex-direction: column;\n padding-top: 25px;\n gap: 24px;\n\n .tech-borderLine {\n display: none;\n }\n .techStackColumn {\n width: 100%;\n\n .techStackColumnTitle {\n font-size: $heading-sm;\n margin-bottom: 16px;\n }\n .techStackList {\n li {\n margin-bottom: 10px;\n font-size: $text-lg;\n }\n }\n\n &.rightColumn {\n padding-left: 0px;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.experienceSection {\n width: 100%;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .experienceHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .experienceTitle {\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: $text-dark-primary;\n }\n }\n\n .experienceStats {\n display: flex;\n justify-content: space-between;\n padding: 0 150px 0px;\n gap: 40px;\n\n .statBox {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n &.activeStat {\n .connector {\n display: block;\n }\n .connector-right {\n display: block;\n }\n\n .bottom-line {\n display: block;\n height: 104px;\n }\n\n .statNumber {\n color: $color-primary !important;\n text-shadow: none !important;\n transform: scale(1.05);\n transition: 0.3s ease;\n }\n .statLabel {\n color: $color-primary;\n }\n }\n\n .line {\n width: 1px;\n height: 65px;\n background-color: $color-primary;\n }\n .line-dashed {\n width: 1px;\n position: relative;\n height: 104px;\n margin: 28px 0 0;\n }\n .connector {\n position: relative;\n width: 1px; /* total width */\n height: 132px; /* total height */\n display: none;\n\n .connector-dashed {\n position: absolute;\n top: 28px;\n left: 0px; /* vertical line position */\n width: 1px;\n height: 171px; /* vertical part */\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n z-index: -1;\n }\n .connector-left-dashed {\n position: absolute;\n top: 201px; /* horizontal line position */\n left: 0px; /* where corner bends */\n width: 148px; /* horizontal length */\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n z-index: 1;\n }\n }\n .connector-right {\n position: relative;\n width: 1px; /* total width */\n height: 132px; /* total height */\n display: none;\n\n .connector-dashed {\n position: absolute;\n top: 28px;\n left: 0px; /* vertical line position */\n width: 1px;\n height: 171px; /* vertical part */\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n z-index: -1;\n }\n .connector-right-dashed {\n position: absolute;\n top: 201px;\n right: 0px;\n width: 148px;\n height: 1px;\n background: repeating-linear-gradient(\n to left,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n z-index: 1;\n }\n }\n .bottom-line {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n width: 1px;\n height: 0;\n transition: height 0.35s ease;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n }\n .statNumber {\n font-size: 130px;\n font-weight: $font-weight-medium;\n line-height: 130px;\n color: $color-primary-dark;\n margin: 35px 0 14px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n /* -webkit-text-stroke: 1px $color-primary; */\n text-shadow:\n 2px 0 0 $color-primary,\n -2px 0 0 $color-primary,\n 0 2px 0 $color-primary,\n 0 -2px 0 $color-primary,\n 2px 2px 0 $color-primary,\n -2px -2px 0 $color-primary,\n 2px -2px 0 $color-primary,\n -2px 2px 0 $color-primary;\n height: 106px;\n cursor: pointer;\n width: 136px; /* Fixed width to accommodate largest number */\n text-align: center; /* Center the numbers within the fixed width */\n display: inline-block;\n }\n .statLabel {\n font-size: $heading-sm;\n line-height: 1.3em;\n margin-bottom: 10px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-light;\n text-align: center;\n width: min-content;\n }\n .statNumberOutline {\n color: $color-primary-dark;\n text-shadow:\n 2px 0 0 $color-primary,\n -2px 0 0 $color-primary,\n 0 2px 0 $color-primary,\n 0 -2px 0 $color-primary,\n 2px 2px 0 $color-primary,\n -2px -2px 0 $color-primary,\n 2px -2px 0 $color-primary,\n -2px 2px 0 $color-primary;\n\n &:hover {\n color: $color-primary;\n text-shadow: none;\n transition: all 0.3s ease;\n }\n }\n }\n }\n .experienceDescription {\n padding: 28px;\n margin: 0 auto;\n margin-bottom: 70px;\n color: $color-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n max-width: 1080px;\n border: 1px solid $color-primary;\n background-color: $color-primary-dark;\n position: relative;\n z-index: 2;\n }\n .highlightText,\n div {\n display: inline-block;\n width: fit-content;\n margin-bottom: 0px;\n font-size: $heading-xl;\n line-height: 1.3em;\n color: $color-primary;\n word-spacing: 4px;\n }\n\n div {\n display: block;\n width: auto;\n }\n .knowMoreBtn {\n background-color: $color-primary;\n color: $color-primary-dark;\n padding: 6px 10px 0px;\n display: inline-block;\n font-size: $heading-lg;\n line-height: 36px;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n cursor: pointer;\n text-decoration: none;\n position: absolute;\n bottom: 0;\n width: max-content;\n right: 0;\n\n &:hover {\n background-color: $color-primary;\n color: $color-primary-dark;\n }\n }\n}\n\n@media (max-width: 1200px) {\n .experienceSection {\n .experienceHeader {\n padding: 55px;\n\n .experienceTitle {\n font-size: $heading-6xl;\n }\n }\n .experienceStats {\n padding: 0 70px 0px;\n }\n .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n }\n }\n}\n@media (max-width: 1024px) {\n .experienceSection {\n .experienceHeader {\n padding: 50px 40px;\n\n .experienceTitle {\n font-size: 55px;\n line-height: 1em;\n }\n }\n\n .experienceStats {\n padding: 0 40px 0px;\n\n .statBox {\n .statNumber {\n font-size: 110px;\n line-height: 120px;\n margin: 26px 0 10px;\n }\n }\n }\n .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n\n .highlightText {\n max-width: 806px;\n }\n .knowMoreBtn {\n display: block;\n width: fit-content;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .experienceSection {\n .experienceHeader {\n padding: 50px 20px 46px;\n\n .experienceTitle {\n font-size: 55px;\n line-height: 1em;\n }\n }\n\n .experienceStats {\n padding: 0 20px 0px;\n gap: 25px;\n\n .statBox {\n .statNumber {\n font-size: 70px;\n line-height: 80px;\n height: 72px;\n margin: 26px 0 10px;\n width: 80px;\n }\n }\n }\n .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n\n .highlightText {\n max-width: 530px;\n }\n }\n }\n}\n@media (max-width: 576px) {\n .experienceSection {\n .experienceHeader {\n padding: 38px 20px 36px;\n\n .experienceTitle {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n }\n\n .experienceStats {\n flex-wrap: wrap;\n margin-bottom: 20px;\n margin-top: 15px;\n\n .statBox {\n width: calc(100% / 2 - 20px);\n\n &.activeStat {\n .connector-right {\n display: none;\n }\n .connector {\n display: none;\n }\n }\n .bottom-line {\n display: none;\n }\n .line-dashed {\n display: none;\n }\n .line {\n display: none;\n }\n .statNumber {\n font-size: 70px;\n line-height: 80px;\n height: 72px;\n margin: 26px 0 10px;\n }\n }\n }\n .experienceDescription {\n padding: 20px;\n margin: 0 20px 40px;\n\n .highlightText,\n div,\n .knowMoreBtn {\n font-size: $heading-md;\n line-height: 30px;\n }\n }\n }\n}\n","/* Add Block CSS Here */\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.digitalProductSection {\n padding: 0px 120px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .contentWrapper {\n margin: 0 auto;\n text-align: center;\n padding: 50px 0 0px;\n\n .border-left-dashed {\n position: absolute;\n top: 0;\n left: 120px;\n width: 1px;\n height: 100%;\n --dash-length: 5px;\n --gap-length: 5px;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary var(--dash-length),\n transparent var(--dash-length),\n transparent calc(var(--dash-length) + var(--gap-length))\n );\n }\n .border-right-dashed {\n position: absolute;\n top: 0;\n right: 120px;\n width: 1px;\n height: 100%;\n --dash-length: 5px;\n --gap-length: 5px;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary var(--dash-length),\n transparent var(--dash-length),\n transparent calc(var(--dash-length) + var(--gap-length))\n );\n }\n\n .productSectionHeading {\n .heading {\n color: $color-primary;\n font-size: $heading-5xl;\n letter-spacing: 2px;\n font-weight: $font-weight-medium;\n line-height: normal;\n font-family: \"PPSupplyMono-Regular\";\n max-width: 700px;\n margin: 0 auto 40px;\n }\n .border-bottom-dashed {\n position: absolute;\n top: 212px;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n $color-primary 0,\n $color-primary 5px,\n transparent 5px,\n transparent 10px\n );\n z-index: 1;\n }\n }\n .productSectionDescription {\n .description {\n p {\n color: $text-dark-light;\n font-size: $heading-md;\n line-height: 1.4em;\n font-weight: $font-weight-normal;\n text-align: start;\n font-family: \"Space Grotesk\", sans-serif;\n padding: 55px 55px 55px;\n }\n }\n .border-bottom-dashed {\n position: absolute;\n bottom: 116px;\n left: 0;\n width: 100%;\n text-transform: uppercase;\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n $color-primary 0,\n $color-primary 5px,\n transparent 5px,\n transparent 10px\n );\n z-index: 2;\n }\n }\n .buttonGroup {\n display: flex;\n width: 100%;\n gap: 30px;\n padding: 10px;\n position: relative;\n\n .border-dashed {\n position: absolute;\n top: 2px;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary,\n $color-primary 6px,\n transparent 6px,\n transparent 12px\n );\n }\n .ctaBtn {\n width: 50%;\n font-size: $heading-md;\n color: $white;\n border: none;\n padding: 32px 24px;\n font-weight: bold;\n line-height: normal;\n cursor: pointer;\n font-family: \"Space Grotesk\", sans-serif;\n text-decoration: none;\n\n &.active {\n background-color: $color-primary;\n color: $color-primary-dark;\n }\n &:hover {\n background-color: $color-primary;\n color: $color-primary-dark;\n }\n }\n }\n }\n}\n@media (max-width: 1200px) {\n .digitalProductSection {\n padding: 0px 70px;\n\n .contentWrapper {\n .border-left-dashed {\n left: 70px;\n }\n .border-right-dashed {\n right: 70px;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .digitalProductSection {\n padding: 0px 40px;\n\n .contentWrapper {\n .border-left-dashed {\n left: 40px;\n }\n .border-right-dashed {\n right: 40px;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .digitalProductSection {\n padding: 0px 26px;\n\n .contentWrapper {\n .border-left-dashed {\n left: 26px;\n }\n .border-right-dashed {\n right: 26px;\n }\n\n .productSectionHeading {\n .heading {\n font-size: $heading-2xl;\n }\n .border-bottom-dashed {\n top: 190px;\n }\n }\n .productSectionDescription {\n .description {\n p {\n font-size: $text-xxl;\n padding: 44px 44px 44px;\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .digitalProductSection {\n .contentWrapper {\n padding: 40px 0 10px;\n .border-left-dashed {\n left: 26px;\n }\n .border-right-dashed {\n right: 26px;\n }\n\n .productSectionHeading {\n .heading {\n font-size: $heading-md;\n padding: 0 6px;\n margin-bottom: 32px;\n }\n .border-bottom-dashed {\n top: 161px;\n }\n }\n .productSectionDescription {\n .description {\n p {\n font-size: $heading-sm;\n padding: 28px;\n text-align: center;\n }\n }\n .border-bottom-dashed {\n bottom: 238px;\n }\n }\n .buttonGroup {\n flex-direction: column;\n gap: 24px;\n\n .border-dashed {\n top: 51%;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n $color-primary 0,\n $color-primary 5px,\n transparent 5px,\n transparent 10px\n );\n }\n .ctaBtn {\n width: 100%;\n font-size: $text-xxl;\n padding: 32px 20px;\n }\n }\n }\n }\n}\n","/* Add Block CSS Here */\n\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.portfolioWrapper {\n width: 100%;\n display: flex;\n\n .portfolioDetails {\n width: 40%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n gap: 35px;\n padding: 50px;\n position: sticky;\n flex-shrink: 0;\n\n .detailsHeading {\n color: $text-dark-primary;\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 1.1em;\n margin: 0;\n }\n .detailsDescription {\n font-size: $heading-lg;\n color: $color-primary;\n font-weight: $font-weight-medium;\n line-height: 1.4em;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .descriptionText {\n font-size: $heading-sm;\n color: #cfd7f1;\n margin: 0;\n font-weight: $font-weight-light;\n line-height: 1.3em;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n .portfolioInformation {\n width: 60%;\n height: 100%;\n display: flex;\n flex-direction: column;\n scrollbar-width: none;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n /* padding-bottom: 1rem; */\n -webkit-overflow-scrolling: touch;\n position: relative;\n\n .border-divider-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n z-index: 9;\n background: $color-primary;\n }\n\n .portfolioSlider {\n width: 100%;\n scroll-snap-align: start;\n\n .imagesCard {\n width: 100%;\n /* height: 452px; */\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n\n .border-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n img {\n width: 100%;\n height: auto;\n object-fit: cover;\n display: block;\n }\n }\n .projectInfo {\n display: flex;\n /* height: 250px; */\n color: #e1e7f5;\n position: relative;\n\n .border-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n\n .projectDetails {\n flex: 2;\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 0;\n\n .border-col-line {\n position: absolute;\n top: 0;\n right: 0 !important;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .projectIntroduction {\n font-size: $heading-2xl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: #dddddd;\n line-height: normal;\n margin: 0;\n padding: 22px 20px 35px;\n }\n .tags {\n position: relative;\n -webkit-overflow-scrolling: touch;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .tags-wrapper {\n display: flex;\n flex-wrap: nowrap; /* Changed from wrap to nowrap for horizontal scroll */\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n\n .tagsLink {\n padding: 6px 18px;\n font-size: $text-base;\n color: $white;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: 1.6em;\n text-decoration: none;\n /* border-right: 1px solid $color-primary; */\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* overflow: scroll; */\n\n .border-col-line {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n &:hover {\n background-color: $color-primary;\n color: #06234f;\n font-weight: 500;\n\n .linkArrow {\n opacity: 1;\n transform: rotate(320deg) scale(1) translateY(0px);\n /* left: 63%; */\n }\n }\n .linkArrow {\n width: 13px;\n height: 13px;\n position: absolute;\n top: 4px;\n right: 4px;\n transform: rotate(320deg) scale(0.8) translateY(30px);\n opacity: 0;\n transition: all 0.3s ease;\n }\n }\n }\n }\n }\n .projectright {\n width: 25%;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n padding: 30px 24px;\n position: relative;\n text-decoration: none;\n\n img {\n width: 100%;\n height: auto;\n object-fit: cover;\n }\n\n .externalLink {\n display: flex;\n position: absolute;\n justify-content: center;\n bottom: 0;\n right: 0;\n background-color: $color-primary;\n padding: 10px;\n width: 38px;\n height: 34px;\n\n .link-image {\n display: block;\n width: 14px;\n height: 14px;\n transform: rotate(322deg);\n }\n }\n }\n }\n }\n .btn-more {\n width: 100%;\n background-color: transparent;\n border: none;\n display: flex;\n text-decoration: none;\n gap: 20px;\n align-items: center;\n font-size: $heading-9xl;\n color: $color-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n line-height: normal;\n justify-content: center;\n padding: 40px 0 30px;\n height: 160px;\n cursor: pointer;\n\n &:hover {\n background-color: $color-primary;\n color: #06234f;\n }\n\n .btn-arrow {\n width: 68px;\n height: 68px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 12px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n .portfolioWrapper {\n .portfolioDetails {\n padding: 40px;\n gap: 26px;\n\n .detailsHeading {\n font-size: $heading-6xl;\n }\n }\n .portfolioInformation {\n .portfolioSlider {\n .projectInfo {\n .projectDetails {\n .projectIntroduction {\n font-size: $heading-lg;\n padding: 22px 15px 30px;\n }\n }\n }\n }\n .btn-more {\n font-size: $heading-7xl;\n height: 150px;\n\n .btn-arrow {\n width: 55px;\n height: 55px;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .portfolioWrapper {\n flex-direction: column;\n .portfolioDetails {\n width: 100%;\n padding: 70px 40px;\n gap: 26px;\n position: unset;\n\n .detailsHeading {\n font-size: $heading-5xl;\n line-height: 1em;\n }\n }\n .portfolioInformation {\n width: 100%;\n border-top: 1px solid $color-primary;\n border-left: none;\n\n .border-divider-line {\n display: none;\n }\n .portfolioSlider {\n .projectInfo {\n .projectDetails {\n .projectIntroduction {\n font-size: $heading-lg;\n padding: 22px 15px 30px;\n }\n }\n }\n }\n .btn-more {\n font-size: $heading-6xl;\n height: 150px;\n\n .btn-arrow {\n width: 48px;\n height: 48px;\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .portfolioWrapper {\n .portfolioDetails {\n padding: 55px 20px;\n gap: 22px;\n position: unset;\n\n .detailsHeading {\n font-size: $heading-5xl;\n line-height: 1em;\n }\n }\n .portfolioInformation {\n .border-divider-line {\n display: none;\n }\n .portfolioSlider {\n .projectInfo {\n flex-direction: column;\n .projectDetails {\n border-right: none;\n\n .border-col-line {\n display: none;\n }\n .projectIntroduction {\n font-size: $heading-lg;\n padding: 22px 15px 30px;\n }\n .tags {\n .tags-wrapper {\n flex-wrap: nowrap;\n\n .tagsLink {\n :last-child {\n border-right: none;\n }\n .border-col-line {\n display: block;\n }\n }\n }\n }\n }\n .projectright {\n width: 100%;\n border-top: 1px solid $color-primary;\n padding: 20px;\n\n .projectlogos {\n width: 200px;\n }\n }\n }\n }\n .btn-more {\n font-size: $heading-6xl;\n height: 150px;\n\n .btn-arrow {\n width: 48px;\n height: 48px;\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .portfolioWrapper {\n .portfolioDetails {\n padding: 44px 20px;\n gap: 16px;\n\n .detailsHeading {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n .detailsDescription {\n font-size: $heading-md;\n line-height: 1.1em;\n }\n .descriptionText {\n font-size: $heading-xs;\n line-height: 1.2em;\n }\n }\n .portfolioInformation {\n .portfolioSlider {\n .projectInfo {\n .projectDetails {\n .projectIntroduction {\n font-size: $heading-lg;\n padding: 22px 15px 30px;\n }\n }\n }\n }\n .btn-more {\n font-size: $heading-6xl;\n gap: 14px;\n height: 140px;\n\n .btn-arrow {\n width: 44px;\n height: 44px;\n }\n }\n }\n }\n}\n","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n// ============ Project Detilas Hero ================ //\n.projectDetailsWrapper {\n margin-top: 94px;\n\n .projectHeadingDetails {\n padding: 70px;\n position: relative;\n .projectHeadingTitle {\n font-size: $heading-6xl;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n color: $color-primary;\n line-height: normal;\n text-align: left;\n word-break: break-word;\n }\n .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n }\n .projectLandingImage {\n width: 100%;\n height: auto;\n\n img {\n width: 100%;\n height: auto;\n display: block;\n }\n }\n}\n\n// ================= Project Details Overview ===============//\n\n.project-overview-wrapper {\n .project-info {\n display: flex;\n align-items: stretch;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n bottom: unset;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n .project-info-logo {\n width: 400px;\n /* height: 350px; */\n flex-shrink: 0;\n object-fit: contain;\n background-color: #007cbd70;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 60%;\n height: auto;\n object-fit: cover;\n }\n }\n .projectInfoTech {\n width: 100%;\n position: relative;\n\n .border-left {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .project-company-Info {\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .project-company-name {\n .project-company-label,\n .project-company-heading {\n font-size: $heading-lg;\n font-family: \"Space Grotesk\", sans-serif;\n /* font-family: \"PPSupplySans-Regular\", sans-serif; */\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n }\n .project-company-heading {\n color: $text-dark-primary;\n padding-left: 8px;\n }\n }\n .platform-icons {\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n width: 40px;\n height: 40px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n .project-technology-info {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .project-skills {\n max-width: 100%;\n width: 100%;\n height: auto;\n position: relative;\n display: flex;\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n .project-skills-info {\n padding: 24px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n display: block;\n }\n\n .project-skills-label,\n .project-skills-heading {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n }\n .project-skills-heading {\n color: $text-dark-primary;\n font-size: $heading-sm;\n }\n }\n .project-category {\n padding: 24px;\n\n .project-category-label {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n margin-bottom: 6px;\n }\n .project-category-info {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n font-size: $heading-sm;\n color: $text-dark-light;\n line-height: normal;\n }\n }\n }\n\n .project-technology {\n display: flex;\n width: 100%;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n\n .project-technologies {\n padding: 24px;\n position: relative;\n\n .project-technology-label {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n }\n }\n .tech-tags {\n display: flex;\n flex-wrap: wrap;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .border-top-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .tech {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 16px;\n font-size: $text-base;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $text-dark-primary;\n position: relative;\n\n &:first-of-type {\n .border-col-left {\n opacity: 1;\n }\n }\n\n .border-col-left {\n position: absolute;\n top: 0;\n left: 0 !important;\n width: 1px;\n height: 100%;\n background: $color-primary;\n opacity: 0;\n }\n\n .border-col-line {\n position: absolute;\n top: 0;\n right: 0 !important;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n }\n }\n }\n }\n }\n }\n\n /* project-description */\n\n .project-description {\n padding: 24px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n .project-description-heading {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n color: $color-primary;\n line-height: normal;\n text-transform: capitalize;\n }\n .project-description-info {\n margin-top: 8px;\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $text-dark-primary;\n line-height: normal;\n }\n }\n}\n\n// ====================== Project Showcase Pages ==================== //\n.brand-section {\n .brand-block {\n .brand-header {\n display: flex;\n align-items: center;\n gap: 24px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .brand-number {\n background: $color-primary;\n color: $black;\n font-size: $font-70;\n font-weight: $font-weight-light;\n padding: 20px 20px 10px;\n /* font-family: \"Space Grotesk\", sans-serif; */\n font-family: \"PPSupplyMono-Ultralight\";\n line-height: 76px;\n }\n .brand-heading {\n color: $color-primary;\n font-size: $font-34;\n /* font-family: \"Space Grotesk\", sans-serif; */\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n line-height: 40px;\n text-transform: uppercase;\n }\n }\n &:last-child {\n .brand-content {\n .border-bottom-line {\n display: none;\n }\n }\n }\n .brand-content {\n display: flex;\n align-items: stretch;\n width: 100%;\n position: relative;\n\n &.brand-content-reverse {\n flex-direction: row-reverse;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 2;\n }\n .brand-image {\n width: 100%;\n flex: 1.6;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .brand-description {\n max-width: 30%;\n width: 100%;\n flex-shrink: 0;\n padding: 34px;\n display: flex;\n background: $bg-tranparent;\n position: relative;\n\n &.brand-reverse {\n border-left: 0;\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n }\n\n .border-left {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n display: none;\n }\n p {\n color: $text-dark-light;\n font-size: $text-xl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: normal;\n }\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n .projectDetailsWrapper {\n .projectHeadingDetails {\n padding: 50px;\n\n .projectHeadingTitle {\n font-size: $font-48;\n }\n }\n }\n\n // Project Showcase //\n .brand-section {\n .brand-block {\n .brand-content {\n .brand-description {\n padding: 24px;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .projectDetailsWrapper {\n .projectHeadingDetails {\n padding: 40px;\n\n .projectHeadingTitle {\n font-size: $heading-3xl;\n }\n }\n }\n\n // project overviwe //\n .project-overview-wrapper {\n .project-info {\n .projectInfoTech {\n .project-company-Info {\n padding: 20px;\n\n .project-company-name {\n .project-company-label,\n .project-company-heading {\n font-size: $heading-md;\n }\n }\n }\n .project-technology-info {\n .project-skills {\n flex-direction: column;\n .project-skills-info {\n padding: 20px;\n\n .border-right {\n display: none;\n }\n }\n .project-category {\n padding: 20px;\n }\n }\n\n .project-technology {\n flex-direction: column;\n\n .project-technologies {\n padding: 20px;\n }\n }\n }\n }\n }\n }\n\n // Project Showcase //\n .brand-section {\n .brand-block {\n .brand-header {\n .brand-number {\n font-size: 60px;\n padding: 16px 16px 6px;\n }\n }\n .brand-content {\n .brand-description {\n padding: 20px;\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .projectDetailsWrapper {\n margin-top: 72px;\n }\n\n // project overviwe//\n .project-overview-wrapper {\n .project-info {\n .project-info-logo {\n width: 260px;\n }\n .projectInfoTech {\n .project-company-Info {\n padding: 16px;\n .project-company-name {\n .project-company-label,\n .project-company-heading {\n font-size: $heading-md;\n }\n }\n }\n .project-technology-info {\n flex-direction: column;\n\n .project-skills {\n max-width: 100%;\n\n .border-right {\n display: none;\n }\n .border-bottom-line {\n display: block;\n }\n .project-skills-info {\n padding: 16px;\n\n .project-skills-label,\n .project-skills-heading {\n font-size: $heading-md;\n }\n }\n .project-category {\n padding: 16px;\n\n .project-category-label {\n font-size: $heading-md;\n }\n }\n }\n\n .project-technology {\n .project-technologies {\n padding: 16px;\n\n .project-technology-label {\n font-size: $heading-md;\n }\n }\n .tech-tags {\n .tech {\n padding: 14px;\n }\n }\n }\n }\n }\n }\n\n /* project-description */\n .project-description {\n padding: 20px;\n }\n }\n // Project Showcase //\n .brand-section {\n .brand-block {\n .brand-header {\n .brand-number {\n font-size: $font-54;\n padding: 16px 16px 6px;\n line-height: 60px;\n }\n .brand-heading {\n font-size: $font-28;\n line-height: 32px;\n }\n }\n .brand-content {\n flex-direction: column-reverse !important;\n\n .brand-description {\n max-width: 100%;\n\n .border-left {\n display: none;\n }\n\n &.brand-reverse {\n .border-right {\n display: none;\n }\n }\n\n .border-bottom-line {\n display: block;\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 576px) {\n .projectDetailsWrapper {\n .projectHeadingDetails {\n padding: 36px 20px 34px;\n }\n }\n\n // Project Overviwe\n .project-overview-wrapper {\n .project-info {\n flex-direction: column-reverse;\n\n .project-info-logo {\n width: 100% !important;\n height: 160px;\n }\n .projectInfoTech {\n width: 100%;\n position: relative;\n\n .border-left {\n display: none;\n }\n\n .project-company-Info {\n padding: 16px;\n\n .project-company-name {\n .project-company-label,\n .project-company-heading {\n font-size: $heading-sm;\n }\n }\n .platform-icons {\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n width: 40px;\n height: 40px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n .project-technology-info {\n display: flex;\n align-items: stretch;\n position: relative;\n flex-direction: column;\n\n .project-skills {\n max-width: 100%;\n\n .project-skills-info {\n padding: 16px;\n\n .project-skills-label,\n .project-skills-heading {\n font-size: $heading-sm;\n }\n }\n .project-category {\n .project-category-label {\n font-size: $heading-sm;\n }\n .project-category-info {\n font-size: $heading-xs;\n }\n }\n }\n\n .project-technology {\n display: block;\n width: 100%;\n\n .project-technologies {\n padding: 16px;\n\n .project-technology-label {\n font-size: $heading-sm;\n }\n }\n .tech-tags {\n .tech {\n &:first-of-type {\n .border-col-left {\n opacity: 0;\n }\n }\n }\n }\n }\n }\n }\n }\n\n /* project-description */\n .project-description {\n padding: 16px;\n\n .project-description-heading {\n font-size: $text-xxl;\n }\n .project-description-info {\n margin-top: 6px;\n font-size: $heading-xs;\n }\n }\n }\n\n // Project Showcase //\n .brand-section {\n .brand-block {\n .brand-header {\n .brand-number {\n font-size: $heading-3xl;\n padding: 12px 12px 2px;\n line-height: 54px;\n }\n .brand-heading {\n font-size: $font-28;\n line-height: 32px;\n }\n }\n .brand-content {\n flex-direction: column-reverse !important;\n .brand-description {\n padding: 16px;\n max-width: 100%;\n\n .border-left {\n display: none;\n }\n\n &.brand-reverse {\n .border-right {\n display: none;\n }\n }\n\n .border-bottom-line {\n display: block;\n }\n p {\n font-size: $heading-xs;\n }\n }\n }\n }\n }\n}\n","/* Add Block CSS Here */\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.herobanner {\n margin-top: 94px;\n height: auto !important;\n display: flex;\n position: relative;\n min-height: 600px;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n .herobannerleft {\n max-width: 30%;\n width: 100%;\n flex-shrink: 0;\n position: relative;\n\n .aboutHero {\n max-width: 100%;\n width: 100%;\n }\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background-color: $color-primary;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n display: none;\n }\n }\n .herobannerright {\n .heroheading {\n padding: 40px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n .bannerTitle {\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-normal !important;\n font-size: $heading-6xl;\n line-height: 72px;\n color: $color-primary;\n }\n }\n .bannerSubDetail {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n font-size: $heading-md;\n line-height: 33px;\n color: $white;\n padding: 40px;\n margin-bottom: 0px;\n }\n }\n}\n\n#matrix-face-container {\n font-family: \"Courier New\", monospace;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n min-height: 400px;\n overflow: hidden; /* ← ADD */\n box-sizing: border-box;\n}\n\n.mf-output {\n // width: 100%;\n max-width: 100%;\n overflow: hidden; /* ← ADD: clip overflowing pre */\n margin-top: 16px;\n}\n\n.mf-output pre {\n margin: 0;\n line-height: 1;\n /* font-size set dynamically by JS */\n white-space: pre;\n overflow: hidden;\n}\n\n@media (max-width: 1200px) {\n .herobanner {\n .herobannerright {\n .heroheading {\n padding: 30px;\n\n .bannerTitle {\n font-size: $heading-5xl;\n line-height: 62px;\n }\n }\n .bannerSubDetail {\n font-size: $heading-sm;\n line-height: 28px;\n padding: 30px;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .herobanner {\n .herobannerleft {\n max-width: 40%;\n }\n .herobannerright {\n .heroheading {\n padding: 24px;\n\n .bannerTitle {\n font-size: $heading-4xl;\n line-height: 52px;\n }\n }\n .bannerSubDetail {\n font-size: $heading-sm;\n line-height: 26px;\n padding: 24px;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .herobanner {\n margin-top: 72px;\n flex-direction: column;\n min-height: auto;\n\n .herobannerleft {\n max-width: 100%;\n\n .border-right {\n display: none;\n }\n\n .border-bottom-line {\n display: block;\n }\n }\n .herobannerright {\n .heroheading {\n padding: 20px;\n\n .bannerTitle {\n font-size: $heading-4xl;\n line-height: 52px;\n }\n }\n .bannerSubDetail {\n font-size: $heading-sm;\n line-height: 26px;\n padding: 20px;\n }\n }\n }\n}\n"]} @charset "UTF-8"; /* 1️⃣ Abstracts (global tools only) */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap"); @font-face { font-family: "PPSupplySans-Regular"; src: url("../fonts/PPSupplySans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplySans-Ultralight"; src: url("../fonts/PPSupplySans-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplyMono-Ultralight"; src: url("../fonts/PPSupplyMono-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplyMono-Regular"; src: url("../fonts/PPSupplyMono-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } /* 2️⃣ Base styles */ /* 1️⃣ Abstracts (global tools only) */ html, body { overflow-x: hidden; } * { box-sizing: border-box; margin: 0; } body { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 16px; font-weight: 400; line-height: 1.5; background-color: #06234f; } a { color: var(--color-theme); } button:focus, .btn.focus, .btn:focus, .btn:hover, a:focus, .btn.active, .btn:active, .btn:active, .btn:active:focus, a:active:focus, a:active { outline: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } img { -o-object-fit: cover; object-fit: cover; max-width: 100%; height: auto; } .text-block { position: relative; z-index: 5; } .text-block h4 { text-transform: uppercase; color: var(--color-theme); margin-bottom: 20px; } .text-block h2 { margin-bottom: 15px; font-size: 40px; color: #fff; } .text-block h1 { margin-bottom: 15px; font-size: 60px; color: #fff; } .text-block h3 { color: var(--color-theme); margin-bottom: 15px; } .text-block p { margin-bottom: 25px; color: #cfd7f1; font-size: 20px; } .text-block p strong { font-family: var(--font-primary-bold); } .text-block .btn { margin-top: 15px; } .contact-block { position: relative; z-index: 1; background: var(--color-black); padding: 50px; } .contact-block label { color: var(--color-white); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; width: 100%; } .contact-block .wpcf7-form-control-wrap { margin-bottom: 10px; width: 100%; display: block; } .contact-block .wpcf7-text, .contact-block .wpcf7-email, .contact-block .wpcf7-textarea { background: transparent; border: none; border-bottom: 1px solid var(--color-theme); color: var(--color-white); font-size: 16px; padding: 0px 0 0px 0; width: 100%; } .contact-block .wpcf7-text:focus-visible, .contact-block .wpcf7-email:focus-visible, .contact-block .wpcf7-textarea:focus-visible { box-shadow: none; outline: none; } .contact-block .wpcf7-textarea { border: 1px solid var(--color-theme); height: 135px; padding: 0 5px; } .contact-block .wpcf7-checkbox { border-bottom: none; } .contact-block .wpcf7-checkbox .wpcf7-list-item { margin-left: 0; } .contact-block .wpcf7-checkbox .wpcf7-list-item label { text-transform: none; font-size: 9px; cursor: pointer; letter-spacing: 0px; } .contact-block .wpcf7-checkbox .wpcf7-list-item input { position: absolute; left: -9999px; } .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label { position: relative; padding-left: 30px; line-height: 20px; } .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:after, .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:before { content: ""; position: absolute; box-sizing: border-box; } .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:before { border-radius: 50%; top: -2px; left: 0; width: 16px; height: 16px; border: 1px solid var(--color-theme); } .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:after { border-radius: 50%; top: 2px; left: 4px; width: 8px; height: 8px; background: var(--color-theme); transition: all 0.2s; } .contact-block .wpcf7-checkbox .wpcf7-list-item input:not(:checked) + .wpcf7-list-item-label:after { opacity: 0; transform: scale(0.01); } .contact-block .wpcf7-checkbox .wpcf7-list-item input:checked + .wpcf7-list-item-label:after { opacity: 1; transform: scale(1); } .contact-block .btn-wrap { position: relative; text-align: right; } .contact-block .btn-wrap p { margin: 0; } .contact-block .btn-wrap .wpcf7-spinner { position: absolute; right: 0; top: 8px; } .contact-block .wpcf7-not-valid-tip { font-size: 10px; text-transform: none; letter-spacing: 0; } .home .video-section + .text-section { padding-bottom: 55px; } .text-section.section-padding { padding-bottom: var(--section-padding-small); } #smooth-wrapper { position: relative; width: 100%; height: 100vh; overflow: hidden; } #smooth-content { position: relative; width: 100%; will-change: transform; padding-top: 107px; /* transform: none !important; */ } .layout-wrapper { display: flex; min-height: 100vh; /* Sidebar */ /* Main Content Wrapper */ } .layout-wrapper .sidebar-wrp { width: auto; height: 100vh; z-index: 100; } .layout-wrapper .main-content-wrapper { flex: 1; margin-left: 123px; display: flex; flex-direction: column; min-height: 100vh; width: -webkit-fill-available; width: -moz-available; width: stretch; /* Main Content */ /* Footer */ } .layout-wrapper .main-content-wrapper .main-content { flex: 1; } .layout-wrapper .main-content-wrapper .footer-content { margin-top: auto; } .blog-content h1, .blogHeadingDetails h1 { font-size: clamp(32px, 5vw, 64px); color: #64e4cb; line-height: normal; margin-bottom: 0; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; } .blog-content h2, .blogHeadingDetails h2 { font-size: clamp(26px, 4vw, 40px); color: #fff; line-height: 1.3; margin: 24px 0 12px; font-family: "PPSupplySans-Regular", sans-serif; } .blog-content h3, .blogHeadingDetails h3 { font-size: clamp(22px, 3vw, 30px); color: #fff; margin: 20px 0 10px; font-family: "Space Grotesk", sans-serif; } .blog-content h4, .blogHeadingDetails h4 { font-size: clamp(18px, 2.5vw, 24px); color: #fff; margin: 16px 0 8px; font-family: "Space Grotesk", sans-serif; } .blog-content h5, .blogHeadingDetails h5 { font-size: clamp(16px, 2vw, 20px); color: #fff; margin: 12px 0 6px; } .blog-content span, .blogHeadingDetails span { color: #cfd7f1; font-size: clamp(16px, 1.5vw, 20px); display: block; margin-bottom: 8px; } .blog-content p, .blogHeadingDetails p { color: #cfd7f1; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; margin-bottom: 20px; font-family: "Space Grotesk", sans-serif; } .blog-content a, .blogHeadingDetails a { color: #00e5cc; text-decoration: none; font-size: inherit; } .blog-content a:hover, .blogHeadingDetails a:hover { text-decoration: underline; } .blog-content ul, .blog-content ol, .blogHeadingDetails ul, .blogHeadingDetails ol { margin: 16px 0; padding-left: 20px; } .blog-content ul li, .blog-content ol li, .blogHeadingDetails ul li, .blogHeadingDetails ol li { color: #fff; font-size: 20px; margin-bottom: 6px; font-family: "Space Grotesk", sans-serif; } .blog-content img, .blogHeadingDetails img { width: auto; height: auto; margin: 24px 0; } .blog-content pre, .blogHeadingDetails pre { background: #0d1b2a; color: #00e5cc; padding: 20px; border-radius: 12px; overflow-x: auto; margin: 24px 0; font-size: 14px; line-height: 1.6; } .blog-content code, .blogHeadingDetails code { font-family: "Courier New", monospace; } .blog-content p code, .blogHeadingDetails p code { background: rgba(255, 255, 255, 0.1); padding: 2px 6px; border-radius: 6px; color: #00e5cc; } .post-navigation .nav-links { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border-top: 1px solid #64e4cb; } .post-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-next { padding: 20px; max-width: 48%; } .post-navigation .nav-links .nav-previous a, .post-navigation .nav-links .nav-next a { font-size: 18px; color: #64e4cb; font-weight: 500 !important; font-family: "Space Grotesk", sans-serif; display: flex; align-items: center; gap: 6px; transition: gap 0.3s ease, opacity 0.3s ease; text-decoration: none; line-height: 1.4; } .post-navigation .nav-links .nav-previous a:hover, .post-navigation .nav-links .nav-next a:hover { gap: 12px; opacity: 0.8; } .post-navigation .nav-links .nav-previous a::before { content: "←"; font-size: 40px; line-height: 1; height: 20px; color: #64e4cb; display: flex; align-items: center; align-self: center; flex-shrink: 0; transition: transform 0.3s ease; margin-top: -12px; justify-content: center; } .post-navigation .nav-links .nav-previous a:hover::before { transform: translateX(-4px); } .post-navigation .nav-links .nav-next a::after { content: "→"; font-size: 40px; line-height: 1; height: 20px; color: #64e4cb; display: flex; align-items: center; align-self: center; flex-shrink: 0; transition: transform 0.3s ease; margin-top: -12px; justify-content: center; } .post-navigation .nav-links .nav-next a:hover::after { transform: translateX(4px); } .post-navigation .nav-links .nav-next { margin-left: auto; } .post-navigation .nav-links .nav-next a { justify-content: flex-end; } .enlighter span { display: inline-block; font-size: 1.45em; } .enlighter-code { overflow: hidden; padding: 20px 10px 20px 5px; } @media (max-width: 1200px) { .post-navigation .nav-links { align-items: center; flex-direction: column; justify-content: space-between; gap: 0px; } .post-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-next { padding: 10px; max-width: 100%; width: 100%; } .post-navigation .nav-links .nav-next { margin-left: 0; } .post-navigation .nav-links .nav-next a { justify-content: flex-end; } } @media (max-width: 1024px) { .layout-wrapper .main-content-wrapper { margin-left: 0px; width: 100%; } } /* 3️⃣ Layout (NO as *) */ /* 2️⃣ Base styles */ /* Homepage specific */ .homepage-header .site-header { position: absolute; } /* Other pages */ .innerpage-header .site-header { position: relative; } .header { width: 100%; position: fixed; top: 0; left: 0; z-index: 99; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* Safari support */ background: rgba(6, 35, 79, 0.85); } header .nav { display: flex; align-items: center; position: relative; } .nav .border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .nav-brand { padding: 30px 20px; flex-shrink: 0; position: relative; } .nav-brand .nav-brand-border-line { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .nav-brand-link { width: 84px; display: flex; height: 32px; align-items: center; justify-content: center; } .nav-brand-logo { -o-object-fit: cover; object-fit: cover; max-width: 100%; width: 100%; height: auto; } .nav-brand-text { color: #64e4cb; font-size: 35px; line-height: normal; margin: 0; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; } .nav-list { display: flex; gap: 45px; list-style: none; padding: 32px 52px; width: 100%; } .nav-item .nav-link { position: relative; color: #cbd5e1; text-decoration: none; font-size: 1.25rem; letter-spacing: 1px; font-weight: 500; transition: color 0.3s ease; font-family: "PPSupplySans-Ultralight", sans-serif; } .nav-item .nav-link::before, .nav-item .nav-link::after { position: absolute; opacity: 0; transition: all 0.3s ease; color: #64e4cb; font-size: 1.25rem; font-weight: bold; line-height: normal; top: 0; transform: translateX(10px); transition: all 0.2s ease; } .nav-item .nav-link::before { content: "\\"; left: -15px; top: -2px; transform: translateX(10px); } .nav-item .nav-link::after { content: "\\"; right: -15px; top: -2px; transform: translateX(-10px); } .nav-item .nav-link:hover { color: #64e4cb; font-weight: 400; } .nav-item .nav-link:hover::before, .nav-item .nav-link:hover::after { opacity: 1; transform: translateX(0px); transition: all 0.5s ease; } .menu-item-has-children { position: relative; } .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Submenu base */ .sub-menu { position: absolute; top: 100%; left: 0; min-width: 280px; background: #0b1f3b; border: 1px solid #64e4cb; padding: 8px 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 99; } /* Submenu items */ .sub-menu .nav-link { display: block; padding: 8px 16px; font-size: 1.25rem; color: #cbd5e1; } .sub-menu .nav-link:hover { color: #64e4cb; } .sub-menu .nav-link:hover::before, .sub-menu .nav-link:hover::after { opacity: 0; } /* Active (open) state */ .menu-item-has-children.open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .toggleBtn { /* width: 100%; */ text-align: end; margin-right: 20px; display: none; } .toggleIcon { font-size: 1.875rem; display: inline-block; font-weight: 500; color: #64e4cb; font-family: "PPSupplySans-Regular", sans-serif; transform: rotate(62deg); } .socialLink { display: none; height: auto; gap: 30px; align-items: center; } .sidebar-link { width: 30px; height: 30px; } .sidebar-link img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1024px) { body.menu-open { overflow: hidden; } .header { position: fixed; top: 0; } .toggleBtn { display: block; cursor: pointer; margin-left: auto; position: relative; z-index: 9999; } .socialLink { display: flex; } .nav-menu { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; z-index: 1000; transition: right 0.3s ease-in-out; } .nav-menu.open { right: 0; } .nav-list { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; list-style: none; padding: 45px 30px; position: absolute; top: 111px; left: 0; width: 100%; min-height: calc(100vh - 111px); overflow-y: auto; border: 1px solid #64e4cb; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); /* Safari support */ background: rgb(6, 35, 79); } .nav-item, .menu-item-has-children { width: 100%; } .nav-link { font-size: 1.5rem; font-weight: 600 !important; color: #fff; text-decoration: none; } .sub-menu { position: static; min-width: 100%; margin-top: 0; max-height: 0; overflow: hidden; opacity: 1; visibility: visible; transform: none; padding: 0; border: 0; background: transparent; transition: max-height 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease; } .menu-item-has-children:hover > .sub-menu { max-height: 0; margin-top: 0; padding-top: 0; } .menu-item-has-children.open > .sub-menu { max-height: 240px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(100, 228, 203, 0.35); } .sub-menu .nav-link { padding: 10px 0 10px 18px; font-size: 1.25rem; } } @media (max-width: 768px) { .nav-brand { padding: 20px 22px; } .nav-list { top: 96px; min-height: calc(100vh - 96px); } } /* 2️⃣ Base styles */ .footerContent { position: relative; display: flex; } .footerContent .border-bottom-line { position: absolute; top: unset; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .footerContent .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .footerContent .border-col-line { position: absolute; top: 0; left: 49.95%; width: 1px; height: 100%; background: #64e4cb; } .footerContent .footerLeft { flex: 1; display: flex; flex-direction: column; position: relative; } .footerContent .footerLeft .footerHeadingText { padding: 51px 34px; } .footerContent .footerLeft .footerHeadingText .footerHeading { font-size: 2.5rem; font-weight: 400; line-height: 53px; color: #e5f1fd; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .footerContent .footerLeft .footer-left-bottom { padding: 34px; display: flex; flex-direction: column; gap: 24px; } .footerContent .footerLeft .footer-left-bottom .footerMail { display: flex; gap: 18px; align-items: center; } .footerContent .footerLeft .footer-left-bottom .footerMail .iconmail { width: 30px; height: 20px; } .footerContent .footerLeft .footer-left-bottom .footerMail .iconmail img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .footerContent .footerLeft .footer-left-bottom .footerMail .mailText { font-size: 1.4375rem; color: #ffffff; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: 1.3em; } .footerContent .footerLeft .footer-left-bottom .getButton { background-color: #64e4cb; color: #06234f; padding: 12px 40px; display: inline-block; width: -moz-fit-content; width: fit-content; } .footerContent .footerLeft .footer-left-bottom .getButton .getBtn { font-size: 1.25rem; line-height: 28px; cursor: pointer; font-weight: 500; color: #06234f; text-decoration: none; font-family: "Space Grotesk", sans-serif; } .footerContent .footerLeft .border-bottom-line { width: 100%; height: 1px; background: #64e4cb; position: unset; margin-top: -2px; } .footerContent .footerRight { flex: 1; display: flex; position: relative; } .footerContent .footerRight .border-col-line { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #64e4cb; } .footerContent .footerRight-colume-1, .footerContent .footerRight-colume-2 { display: flex; flex-direction: column; align-items: center; width: 50%; } .footerContent .footerRight-colume-1 .footerRight-heading, .footerContent .footerRight-colume-2 .footerRight-heading { padding: 20px 34px; background-color: #64e4cb; color: #000000; font-size: 1.4375rem; font-weight: 600; line-height: 29px; font-family: "Space Grotesk", sans-serif; width: 100%; display: flex; justify-content: center; align-items: center; text-transform: uppercase; } .footerContent .footerRight-colume-1 .footerRight-links { display: flex; flex-direction: column; width: 100%; padding: 0; } .footerContent .footerRight-colume-2 .footerRight-heading { position: relative; } .footerContent .footerRight-colume-2 .footerRight-heading::after { content: ""; position: absolute; top: 0; left: -1px; width: 100%; height: 100%; border-left: 2px solid #06234f; pointer-events: none; z-index: 1; } .footer-link-list { list-style: none; padding: 0; margin: 0; width: 100%; } .footer-link-list .footerLink { color: #ffffff; font-size: 1.4375rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: 29px; text-decoration: none; width: 100%; display: flex; padding: 20px 30px; align-items: center; justify-content: center; position: relative; } .footer-link-list .footerLink .footer-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .footer-link-list .footerLink:hover { color: #64e4cb; font-weight: 600; } .social-list { list-style: none; margin: 0; padding: 0; width: 100%; } .social-list li .social-link { display: flex; align-items: center; color: #ffffff; font-family: "Space Grotesk", sans-serif; font-size: 1.125rem; width: 100%; position: relative; text-decoration: none; } .social-list li .social-link:hover .text-link { color: #64e4cb; } .social-list li .social-link .icon { width: 70px; height: 69px; border-right: 1px solid #64e4cb; display: flex; align-items: center; justify-content: center; padding: 20px; flex-shrink: 0; } .social-list li .social-link .icon img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .social-list li .social-link .text-link { padding: 0 10px 0 40px; text-decoration: none; color: #ffffff; font-size: 1.4375rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: 29px; width: 100%; } .social-list li .social-link .footer-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } @media (max-width: 1200px) { .footerContent .footerLeft .footerHeadingText { padding: 34px; } } @media screen and (max-width: 1024px) { .footerContent .footerLeft .footerHeadingText { padding: 24px; } .footerContent .footerLeft .footer-left-bottom { padding: 24px; } .footerContent .footerRight-colume-1, .footerContent .footerRight-colume-2 { display: flex; flex-direction: column; align-items: center; width: 50%; } .footerContent .footerRight-colume-1 .footerRight-heading, .footerContent .footerRight-colume-2 .footerRight-heading { padding: 20px 16px; } .social-list .text li .social-link .text-link { padding: 0 10px 0 24px; } } @media (max-width: 768px) { .footerContent { flex-direction: column; } .footerContent .border-col-line { display: none; } .footerContent .footerRight .border-col-line { display: block; } .footerContent .footerLeft .footerHeadingText { padding: 20px; } .footerContent .footerLeft .footerHeadingText .footerHeading { font-size: 2rem; line-height: 42px; } .footerContent .footerLeft .footerHeadingText .footer-left-bottom { padding: 20px; gap: 20px; } } @media screen and (max-width: 576px) { .footerContent .footerLeft .footerHeadingText { padding: 20px 16px; } .footerContent .footerLeft .footer-left-bottom { padding: 20px 16px; gap: 16px; } .footerContent .footerRight { width: 100%; flex-direction: column; } .footerContent .footerRight-colume-1, .footerContent .footerRight-colume-2 { width: 100%; } .footerContent .footerRight .border-col-line { display: none; } .footerContent .footerRight-colume-2 .footerRight-heading { position: relative; } .footerContent .footerRight-colume-2 .footerRight-heading::after { content: none; display: none; } } /* 2️⃣ Base styles */ .sidebar { display: flex; flex-direction: column; padding: 50px 46px; position: fixed; /* Fix the sidebar */ top: 94px; left: 0; height: calc(100vh - 94px); gap: 50px; align-items: center; z-index: 1; } .sidebar .sidebar-border-line { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .sidebar-link { width: 32px; height: 32px; cursor: pointer; } .sidebar-link img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .sidebar-link img:hover { filter: brightness(10%) saturate(100%) invert(81%) sepia(25%) saturate(745%) hue-rotate(113deg) brightness(95%) contrast(92%); } .scrollup { position: absolute; left: 50%; bottom: 50px; width: 33px; height: 32px; padding: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; visibility: hidden; transform: translate(-50%, 12px); transition: background-color 0.3s ease, transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease; } .scrollup .arrowIcon { width: auto; height: 24px; } .scrollup.is-scrolled { opacity: 1; pointer-events: auto; visibility: visible; transform: translate(-50%, 0); } @media (max-width: 1024px) { .sidebar { display: none; } } @media screen and (max-width: 991px) { .wrapper-card .main-wrapper .page-content { margin-bottom: 20px; } } /* 2️⃣ Base styles */ .main { display: flex; } .main .sidebar-wrp { flex-shrink: 0; width: auto; } /* Project Archive & Taxonomy Listing Styles */ /* Filter tabs — extend existing .filterWrapper styles for link-based tabs */ .filterWrapper .filter-tabs a.tab { text-decoration: none; color: #ffffff; display: inline-block; transition: background 0.2s, color 0.2s; } .filterWrapper .filter-tabs a.tab.active { background: #64e4cb; color: #06234f; font-weight: 600; } .filterWrapper .filter-tabs a.tab:hover { background: #64e4cb; color: #06234f; } /* Project card tech tags in footer */ .projectCards .project-cards { /* Logo text fallback */ } .projectCards .project-cards .project-cards-right .project-footer-right .project-tech-tags { padding: 10px 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .projectCards .project-cards .project-cards-right .project-footer-right .project-tech-tags .tech-tag { font-size: 14px; font-family: "Space Grotesk", sans-serif; color: #64e4cb; padding: 4px 10px; border: 1px solid #64e4cb; border-radius: 2px; font-weight: 400; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo .logo-text { font-size: 1.125rem; font-family: "Space Grotesk", sans-serif; font-weight: 600; color: #64e4cb; } /* Pagination */ .projects-pagination { padding: 40px 24px; position: relative; } .projects-pagination .border-line { position: absolute; top: 0; left: 0; background: #64e4cb; width: 100%; height: 1px; } .projects-pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: "Space Grotesk", sans-serif; } .projects-pagination .nav-links a, .projects-pagination .nav-links span { padding: 10px 16px; font-size: 1rem; font-weight: 500; border: 1px solid #64e4cb; color: #e5f1fd; text-decoration: none; transition: background 0.2s, color 0.2s; } .projects-pagination .nav-links a:hover, .projects-pagination .nav-links .current { background: #64e4cb; color: #06234f; } /* No projects fallback */ .no-projects { padding: 80px 24px; text-align: center; } .no-projects p { font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; color: #cfd7f1; } /* Single project — taxonomy links */ .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading a { color: #e5f1fd; text-decoration: none; transition: color 0.2s; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading a:hover { color: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info a { color: #cfd7f1; text-decoration: none; transition: color 0.2s; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info a:hover { color: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .tech-name { text-decoration: none; color: #e5f1fd; transition: color 0.2s; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .tech-name:hover { color: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech a.tech-name { text-decoration: none; } /* Related projects */ .related-projects-section .related-projects-header { padding: 24px; position: relative; } .related-projects-section .related-projects-header .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .related-projects-section .related-projects-header .related-projects-heading { font-size: 62px; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; color: #64e4cb; line-height: normal; } /* Editor content within single project */ .project-editor-content { padding: 24px; } .project-editor-content h1, .project-editor-content h2, .project-editor-content h3, .project-editor-content h4, .project-editor-content h5, .project-editor-content h6 { color: #64e4cb; font-family: "PPSupplySans-Regular", sans-serif; margin-bottom: 12px; } .project-editor-content p { color: #e5f1fd; font-family: "Space Grotesk", sans-serif; font-size: 1.125rem; line-height: 1.6; margin-bottom: 16px; } .project-editor-content img { max-width: 100%; height: auto; } .projectCards { display: flex; flex-direction: column; width: 100%; } .projectCards .project-cards { width: 100%; display: flex; position: relative; } .projectCards .project-cards .border-line { position: absolute; top: -1px; left: 0%; width: 100%; height: 1px; background: #64e4cb; } .projectCards .project-cards .project-cards-left { width: 40%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .projectCards .project-cards .project-cards-left .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .projectCards .project-cards .project-cards-left .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .projectCards .project-cards .project-cards-left .project-left-card { display: flex; flex-direction: column; } .projectCards .project-cards .project-cards-left .project-left-card .project-header { display: flex; align-items: center; position: relative; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; display: block; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box { background: #64e4cb; color: #000; font-size: 70px; font-weight: 300; padding: 20px 16px 4px; font-family: "PPSupplyMono-Ultralight"; line-height: 76px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo { padding: 20px; width: 100%; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo { width: 170px; height: 60px; display: flex; align-items: center; gap: 10px; font-size: 1.4375rem; font-weight: 600; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text { font-size: 2.875rem; color: #64e4cb; margin-bottom: 6px; font-weight: 400; font-family: "PPSupplySans-Regular", sans-serif; line-height: 56px; margin-bottom: 0; text-decoration: none; display: block; } .projectCards .project-cards .project-cards-left .project-left-card .logorow { padding: 24px 24px 0; } .projectCards .project-cards .project-cards-left .project-left-card .logorow .logo { max-width: 40%; width: 100%; height: auto; display: flex; align-items: center; gap: 10px; font-size: 1.4375rem; font-weight: 600; } .projectCards .project-cards .project-cards-left .project-left-card .logorow .logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .projectCards .project-cards .project-cards-left .project-left-card .left-content { padding: 24px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text { font-size: 36px; color: #64e4cb; margin-bottom: 6px; font-weight: 400; font-family: "PPSupplySans-Regular", sans-serif; line-height: 46px; text-decoration: none; display: inline-block; } .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-info { color: #cfd7f1; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 300; line-height: 24px; } .projectCards .project-cards .project-cards-left .project-left-footer { padding: 20px; position: relative; } .projectCards .project-cards .project-cards-left .project-left-footer .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .projectCards .project-cards .project-cards-left .project-left-footer .project-category-card { font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #cfd7f1; line-height: 30px; } .projectCards .project-cards .project-cards-right { width: 60%; display: flex; flex-direction: column; justify-content: space-between; } .projectCards .project-cards .project-cards-right .project-image { width: 100%; height: auto; } .projectCards .project-cards .project-cards-right .project-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .projectCards .project-cards .project-cards-right .project-footer-right { display: flex; align-items: center; justify-content: space-between; position: relative; } .projectCards .project-cards .project-cards-right .project-footer-right .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons { padding: 10px 15px; display: flex; align-items: center; gap: 8px; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span { width: 50px; height: 50px; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; object-fit: cover; background-color: transparent; border: none; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn { background: #64e4cb; color: #041b3d; border: none; cursor: pointer; padding: 22px 26px; height: 100%; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; line-height: normal; font-weight: 500; display: flex; align-items: center; justify-content: center; text-decoration: none; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn:hover { background: #4fd6be; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon { width: 20px; height: 20px; margin-left: 10px; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon svg { width: 100%; height: 100%; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1200px) { .projectCards .project-cards { width: 100%; } .projectCards .project-cards .project-cards-left { width: 50%; } .projectCards .project-cards .project-cards-left .project-left-card { display: flex; flex-direction: column; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text { font-size: 36px; line-height: 44px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text { font-size: 2rem; line-height: 42px; } .projectCards .project-cards .project-cards-right { width: 50%; } .related-projects-section .related-projects-header .related-projects-heading { font-size: 3.25rem; } } @media (max-width: 1024px) { .projectCards .project-cards { width: 100%; flex-direction: column; } .projectCards .project-cards .project-cards-left { width: 100%; } .projectCards .project-cards .project-cards-left .border-bottom-line { display: block; } .projectCards .project-cards .project-cards-left .border-right { display: none; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box { font-size: 62px; line-height: 68px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo { padding: 16px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text { font-size: 1.875rem; line-height: 40px; } .projectCards .project-cards .project-cards-left .project-left-card .logorow { padding: 20px 20px 0; } .projectCards .project-cards .project-cards-left .project-left-card .left-content { padding: 20px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text { font-size: 1.5rem; line-height: 34px; } .projectCards .project-cards .project-cards-left .project-left-footer { padding: 20px; position: relative; } .projectCards .project-cards .project-cards-right { width: 100%; } .related-projects-section .related-projects-header .related-projects-heading { font-size: 42px; } } @media (max-width: 768px) { .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box { font-size: 54px; padding: 16px; line-height: 64px; display: flex; align-items: center; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo { width: 140px; } .projectCards .project-cards .project-cards-left .project-left-card .logorow { padding: 16px 16px 0; } .projectCards .project-cards .project-cards-left .project-left-card .logorow .logo { width: 140px; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span { width: 40px; height: 40px; } .related-projects-section .related-projects-header .related-projects-heading { font-size: 2rem; } } @media (max-width: 576px) { .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box { font-size: 3.25rem; line-height: 58px; padding: 16px 16px 8px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo { padding: 10px 16px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo { width: 140px; } .projectCards .project-cards .project-cards-left .project-left-card .logorow { padding: 16px 16px 0; } .projectCards .project-cards .project-cards-left .project-left-card .logorow .logo { width: 140px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content { padding: 16px; } .projectCards .project-cards .project-cards-left .project-left-footer { padding: 16px; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons { padding: 10px; } } /* Responsive */ @media (max-width: 768px) { .projects-pagination { padding: 30px 16px; } .projects-pagination .nav-links { flex-wrap: wrap; } .projects-pagination .nav-links a, .projects-pagination .nav-links span { padding: 8px 12px; font-size: 14px; } .related-projects-section .related-projects-header { padding: 20px; } .related-projects-section .related-projects-header .related-projects-heading { font-size: 1.5rem; } } @media (max-width: 576px) { .project-editor-content { padding: 16px; } } .testimonialWrapper { margin-top: 94px; height: 530px; width: 100%; display: flex; padding-left: 170px; justify-content: center; flex-direction: column; position: relative; position: relative; overflow: hidden; } .testimonialWrapper .testimonial-bg-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 0; pointer-events: none; display: block; } .testimonialWrapper .testimonialHeading, .testimonialWrapper .discription, .testimonialWrapper .border-line { position: relative; z-index: 1; } .testimonialWrapper .testimonialHeading { font-family: "PPSupplySans-Regular", sans-serif; font-weight: 400 !important; font-size: 4rem; line-height: 72px; color: #64e4cb; max-width: 660px; margin-bottom: 12px; } .testimonialWrapper .discription { font-family: "Space Grotesk", sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 33px; color: #ffffff; margin-bottom: 0px; max-width: 900px; } .testimonialWrapper .border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonial-Content { position: relative; } .testimonial-Content .border-line { position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonial-Content .testimonial-row { display: flex; align-items: stretch; position: relative; } .testimonial-Content .testimonial-row.testimonial-content-reverse { flex-direction: row-reverse; } .testimonial-Content .testimonial-row.testimonial-content-reverse .testimonialCard-right .border-right { display: block; } .testimonial-Content .testimonial-row .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonial-Content .testimonial-row .testimonialCard-left { width: 50%; flex-shrink: 0; position: relative; } .testimonial-Content .testimonial-row .testimonialCard-left .linkCard { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .testimonial-Content .testimonial-row .testimonialCard-left .border-bottom-line { position: absolute; bottom: 1px; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor { display: flex; align-items: center; height: 130px; position: relative; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .border-bottom-line { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; display: block; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage { width: 130px; height: 130px; overflow: hidden; flex-shrink: 0; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails { width: 100%; height: 100%; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo { display: flex; flex-direction: column; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.875rem; font-weight: 400; color: #64e4cb; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; line-height: normal; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition { font-size: 1.25rem; font-weight: 400; color: #cfd7f1; margin: 0; font-family: "Space Grotesk", sans-serif; line-height: normal; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 170px; width: auto; height: 100%; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent { padding: 34px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent .testimonialText { font-size: 1.4375rem; font-weight: 300; line-height: 30px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; margin: 0; } .testimonial-Content .testimonial-row .testimonialCard-right { width: 50%; flex-shrink: 0; display: flex; flex-direction: column; position: relative; } .testimonial-Content .testimonial-row .testimonialCard-right .border-left { position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background: #64e4cb; } .testimonial-Content .testimonial-row .testimonialCard-right .border-right { position: absolute; top: 0; right: 0px; width: 1px; height: 100%; background: #64e4cb; display: none; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards { display: flex; flex-direction: column; position: relative; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .linkCard { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards:last-child { border-bottom: none; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .border-bottom-line { position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor { display: flex; align-items: center; height: 130px; position: relative; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .border-bottom-line { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; display: block; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage { width: 130px; height: 130px; overflow: hidden; flex-shrink: 0; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails { width: 100%; height: 100%; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo { display: flex; flex-direction: column; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.875rem; font-weight: 400; color: #64e4cb; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition { font-size: 1.25rem; font-weight: 400; color: #cfd7f1; margin: 0; font-family: "Space Grotesk", sans-serif; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 170px; width: auto; height: 100%; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent { padding: 34px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent .testimonialText { font-size: 1.4375rem; font-weight: 300; line-height: 30px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; margin: 0; } @media (max-width: 1200px) { .testimonialWrapper { padding-left: 125px; padding-right: 20px; } .testimonialWrapper .testimonialHeading { font-size: 54px; line-height: 64px; } .testimonialWrapper .discription { font-size: 1.25rem; line-height: 28px; } } @media (max-width: 1024px) { .testimonialWrapper { height: 485px; padding-left: 80px; } .testimonialWrapper .testimonialHeading { font-size: 2.875rem; line-height: 52px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor { height: 100px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage { width: 100px; height: 100px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails { padding: 20px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.4375rem; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 150px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent { padding: 24px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent .testimonialText { font-size: 1.25rem; line-height: 26px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor { height: 100px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage { width: 100px; height: 100px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails { padding: 20px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.4375rem; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 150px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent { padding: 24px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent .testimonialText { font-size: 1.25rem; line-height: 26px; } } @media (max-width: 768px) { .testimonialWrapper { height: 456px !important; padding: 0 20px; margin-top: 72px; } .testimonialWrapper .testimonialHeading { font-size: 2.875rem; line-height: 52px; } .testimonial-Content .testimonial-row { flex-direction: column; } .testimonial-Content .testimonial-row.testimonial-content-reverse { flex-direction: column; } .testimonial-Content .testimonial-row.testimonial-content-reverse .testimonialCard-right .border-right { display: none; } .testimonial-Content .testimonial-row .testimonialCard-left { width: 100%; } .testimonial-Content .testimonial-row .testimonialCard-left .border-bottom-line { display: block; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor { height: 100px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage { width: 100px; height: 100px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails { padding: 20px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.4375rem; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 150px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent { padding: 20px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent .testimonialText { font-size: 1.25rem; line-height: 26px; } .testimonial-Content .testimonial-row .testimonialCard-right { width: 100%; } .testimonial-Content .testimonial-row .testimonialCard-right .border-left { display: none; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor { height: 100px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage { width: 100px; height: 100px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails { padding: 20px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.4375rem; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 150px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent { padding: 20px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent .testimonialText { font-size: 1.25rem; line-height: 26px; } } @media (max-width: 576px) { .testimonialWrapper { height: 456px !important; } .testimonialWrapper .testimonialHeading { font-size: 34px; line-height: 42px; } .testimonialWrapper .discription { font-size: 18px; } .testimonial-Content .testimonial-row { flex-direction: column; } .testimonial-Content .testimonial-row .testimonialCard-left { width: 100%; } .testimonial-Content .testimonial-row .testimonialCard-left .border-bottom-line { display: block; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor { height: 82px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorImage { width: 82px; height: 82px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails { padding: 16px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.25rem; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition { font-size: 1rem; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 100px; } .testimonial-Content .testimonial-row .testimonialCard-left .testimonialContent { padding: 16px; } .testimonial-Content .testimonial-row .testimonialCard-right { width: 100%; } .testimonial-Content .testimonial-row .testimonialCard-right .border-left { display: none; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor { height: 82px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage { width: 82px; height: 82px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails { padding: 16px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.25rem; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition { font-size: 1rem; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 100px; } .testimonial-Content .testimonial-row .testimonialCard-right .testimonialCards .testimonialContent { padding: 16px; } } /* 4️⃣ ACF Blocks */ /* 2️⃣ Base styles */ /* Add Block CSS Here */ .bannerWrapper { margin-top: 94px; width: 100%; height: 698px; display: flex; padding-left: 170px; justify-content: space-between; position: relative; } .bannerWrapper .banner-left { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 20; } .bannerWrapper .border-line { width: 100%; height: 1px; background: #64e4cb; position: absolute; bottom: 0; left: 0; } .bannerWrapper .bannerSubHeading { font-size: 1.4375rem; color: #64e4cb; font-weight: 500; line-height: 30px; margin-bottom: 10px; font-family: "PPSupplySans-Regular", sans-serif; display: block; } .bannerWrapper .bannerHeading { font-size: 64px; color: #dddddd; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; line-height: 74px; margin-bottom: 10px; } .bannerWrapper .bannerHeading .subdetails { color: #64e4cb; font-size: 1.4375rem; font-weight: 500; margin-left: 3px; line-height: 30px; display: inline-block; } .bannerWrapper .button-row { position: relative; } .bannerWrapper .button-row .hero-button-border { position: absolute; width: 170px; height: 1px; background-color: #64e4cb; left: -170px; top: 52px; z-index: -1; } .bannerWrapper .touchbutton { width: -moz-fit-content !important; width: fit-content !important; padding: 22px 38px 22px 51px; background-color: #64e4cb; border: 1px solid #64e4cb; font-size: 1.125rem; color: #000000; font-family: "PPSupplySans-Regular", sans-serif; display: flex; align-items: center; line-height: normal; gap: 14px; margin-top: 20px; position: relative; overflow: hidden; white-space: nowrap; cursor: pointer; text-decoration: none; } .bannerWrapper .touchbutton img { width: 16px; height: 15px; -o-object-fit: cover; object-fit: cover; } /* DOT GRID */ #dot-grid { position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(circle, rgba(100, 228, 203, 0.11) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0) 100%); } /* CANVAS */ .banner-right { width: 43%; position: absolute; overflow: hidden; min-height: 80%; top: 60px; right: 20px; } .banner-right .globe-stage { position: absolute; inset: 0; } #globe-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } #tech-nodes { position: absolute; inset: 0; pointer-events: none; z-index: 20; } .tech-node { position: absolute; /* Centered offset — set ONCE, never mutated by JS */ transform: translate(-18px, -18px); pointer-events: none; /* No CSS transition — opacity updated directly each frame */ will-change: left, top, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .tech-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(5, 18, 48, 0.92); border: 2px solid; transform: translate3d(0, 0, 0); /* force GPU rasterisation at 1:1 */ } .tech-icon svg { width: 18px; height: 18px; display: block; shape-rendering: geometricPrecision; } @keyframes scrollLogos { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1200px) { .bannerWrapper { padding-left: 125px; } .bannerWrapper .button-row .hero-button-border { width: 125px; left: -125px; } .banner-right { top: 85px; right: 0px; } } @media (max-width: 1024px) { .bannerWrapper { padding-left: 80px !important; height: 655px; align-items: center; } .bannerWrapper .bannerHeading { font-size: 3.25rem; line-height: 64px; } } @media (max-width: 768px) { .bannerWrapper { flex-direction: column; padding-left: 20px !important; height: 600px; margin-top: 72px; } .bannerWrapper .bannerHeading { font-size: 2.875rem; line-height: 56px; } .bannerWrapper .banner-right { display: none; } } @media (max-width: 576px) { .bannerWrapper { padding-left: 20px; height: 575px; } .bannerWrapper .bannerHeading { font-size: 2.75rem; line-height: 48px; } .bannerWrapper .bannerHeading .subdetails { display: block; margin: 8px 0 2px; } .bannerWrapper .touchbutton { padding: 18px 30px 18px 41px; } } /* Add Block CSS Here */ @keyframes marquee-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .worked-with-companies { position: relative; overflow: hidden; } .worked-with-companies .border-line { width: 100%; height: 1px; background: #64e4cb; position: absolute; bottom: 0; left: 0; } .worked-with-companies .logoWrapper { display: flex; align-items: stretch; } .worked-with-companies .logoWrapper .logos-Heading { max-width: 292px; display: flex; justify-content: center; align-items: center; padding: 20px; position: relative; } .worked-with-companies .logoWrapper .logos-Heading .logosTitle { font-size: 2.875rem; color: #cfd7f1; text-transform: uppercase; font-weight: 300; line-height: 56px; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .worked-with-companies .logoWrapper .logos-Heading .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .worked-with-companies .logoWrapper .logos-Heading .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .worked-with-companies .logoWrapper .logosRow { display: flex; flex-direction: column; width: 100%; overflow: hidden; } .worked-with-companies .logoWrapper .logosRow .border-bottom-line { width: 100%; height: 1px; background: #64e4cb; flex-shrink: 0; } .worked-with-companies .logoWrapper .logosRow .logosGroup { display: flex; width: 100%; overflow: hidden; height: 103px; } .worked-with-companies .logoWrapper .logosRow .logosGroup:hover .logosTrack { animation-play-state: paused; } .worked-with-companies .logoWrapper .logosRow .logosGroup[data-row=odd] .logosTrack { animation: marquee-left 35s linear infinite; } .worked-with-companies .logoWrapper .logosRow .logosGroup[data-row=even] .logosTrack { animation: marquee-left 35s linear infinite; } .worked-with-companies .logoWrapper .logosRow .logosGroup .logosTrack { display: flex; flex-shrink: 0; align-items: center; height: 100%; } .worked-with-companies .logoWrapper .logosRow .logosGroup .logos { width: 200px; flex-shrink: 0; height: 100%; padding: 18px 22px; display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; } .worked-with-companies .logoWrapper .logosRow .logosGroup .logos .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: repeating-linear-gradient(to bottom, #64e4cb 0px, #64e4cb 6px, transparent 6px, transparent 12px); } .worked-with-companies .logoWrapper .logosRow .logosGroup .logos img { width: 100%; height: 100%; max-height: 50px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 1200px) { .worked-with-companies .logoWrapper .logos-Heading .logosTitle { font-size: 2rem; line-height: 44px; } .worked-with-companies .logoWrapper .logosRow .logosGroup { height: 63px; } } @media (max-width: 1024px) { .worked-with-companies .logoWrapper .logos-Heading { padding: 16px; } .worked-with-companies .logoWrapper .logos-Heading .logosTitle { font-size: 1.5rem; line-height: 32px; } .worked-with-companies .logoWrapper .logosRow .logosGroup { height: 53px; } } @media (max-width: 768px) { .worked-with-companies .logoWrapper { display: flex; flex-direction: column; } .worked-with-companies .logoWrapper .logos-Heading { max-width: 100%; justify-content: flex-start; } .worked-with-companies .logoWrapper .logos-Heading .border-right { display: none; } .worked-with-companies .logoWrapper .logos-Heading .border-bottom-line { display: block; } .worked-with-companies .logoWrapper .logosRow .logosGroup .logos { max-width: 250px; width: 100%; max-height: 60px; height: 60px; padding: 12px; } } @media (max-width: 576px) { .worked-with-companies .logoWrapper .logosRow .logosGroup .logos { max-width: 200px; padding: 15px; } } .techStackSection { width: 100%; position: relative; /* Tech Stack Header */ /* Tech Stack Cards */ } .techStackSection .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; /* z-index: 2; */ } .techStackSection #border-line { z-index: 2; } .techStackSection .techStackHeader { display: flex; align-items: center; padding: 70px; /* position: sticky; top: 107px; */ z-index: 1; background: #06234f; position: relative; } .techStackSection .techStackHeader .techStackTitle { font-size: 5rem; font-weight: 500; margin: 0; display: flex; line-height: 1.2em; align-items: center; font-family: "PPSupplySans-Regular", sans-serif; color: #e5f1fd; } .techStackSection .techStackHeader .border-line-text { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .techStackSection .techStackCards { display: flex; flex-direction: column; } .techStackSection .techStackCards .techStackCard { background-color: #06234f; position: relative; } .techStackSection .techStackCards .techStackCard.open .techStackCardHeader { border-bottom: 1px solid #64e4cb; } .techStackSection .techStackCards .techStackCard.open .techStackNumber { color: #64e4cb !important; /* -webkit-text-stroke: 2px $color-primary-dark; */ font-weight: 500 !important; text-shadow: 1px 0 0 #06234f, 2px 0 0 #06234f, 0 2px 0 #06234f, 0 -2px 0 #06234f, 0px 2px 0 #06234f, -2px 0px 0 #06234f, 0px -2px 0 #06234f, 0px 2px 0 #06234f; font-family: "PPSupplySans-Regular", sans-serif !important; border-bottom: none; } .techStackSection .techStackCards .techStackCard.open .techStackContent { max-height: 1000px; /* Adjust based on your content height */ opacity: 1; transform: translateY(0); padding: 35px 45px; /* Restore full padding when open */ transition: all 0.6s ease-out; } .techStackSection .techStackCards .techStackCard.open .techStackToggle img { transform: rotate(1deg) !important; transition: transform 0.3s ease !important; } .techStackSection .techStackCards .techStackCard.open .techStackHeading { font-family: "Orbitron", sans-serif; font-weight: 700; letter-spacing: 1px; color: #00e6e6; } .techStackSection .techStackCards .techStackCard .techStackCardHeader { display: flex; align-items: center; width: 100%; cursor: pointer; transition: all 0.3s ease; } .techStackSection .techStackCards .techStackCard .techStackCardHeader:last-child .techStackNumber { border-bottom: none; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber { background-color: #64e4cb; color: #222222; width: 123px; height: 123px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 70px; font-weight: 300; font-family: "PPSupplyMono-Ultralight"; border-bottom: 1px dashed #222222; transition: all 0.4s ease; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist { display: flex; flex-direction: column; padding: 20px; width: 100%; height: 123px; justify-content: space-between; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory { color: #64e4cb; font-size: 1.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin: 0; line-height: 36px; font-family: "PPSupplySans-Regular", sans-serif; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons { display: flex; align-items: center; gap: 40px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon { height: 40px; width: 45px; -o-object-fit: contain; object-fit: contain; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle { color: #00ffff; background: none; border: none; cursor: pointer; font-size: 1.25rem; width: 123px; height: 123px; flex-shrink: 0; /* border-left: 1px dashed $color-primary; */ position: relative; display: flex; align-items: center; justify-content: center; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle img { width: auto; height: 25px; transform: rotate(180deg); transition: transform 0.3s ease; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle .border-left-dashed { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: repeating-linear-gradient(to top, #64e4cb 0, #64e4cb 4px, transparent 4px, transparent 8px); } .techStackSection .techStackCards .techStackCard .techStackContent { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-20px); transition: all 0.5s ease-in-out; padding: 0 45px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackHeading { font-size: 1.4375rem; font-weight: 500; line-height: 1.3em; color: #64e4cb; font-family: "PPSupplyMono-Regular"; margin-bottom: 18px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackDescription { color: #cfd7f1; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; font-weight: 400; line-height: 1.6; margin-bottom: 25px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns { display: flex; padding-top: 35px; gap: 40px; /* border-top: 1px dashed #767676; */ position: relative; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine-row { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: repeating-linear-gradient(to right, #767676, #767676 6px, transparent 6px, transparent 12px); } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine { position: absolute; top: 35px; left: 50%; width: 1px; transform-origin: left; height: 270px; background: repeating-linear-gradient(to bottom, #767676, #767676 6px, transparent 6px, transparent 12px); } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn { width: 50%; color: #ffffff; position: relative; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackColumnTitle { font-size: 1.4375rem; font-weight: 500; line-height: 1.3em; color: #64e4cb; font-family: "PPSupplyMono-Regular"; margin-bottom: 18px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList { list-style: none; padding: 0; margin: 0; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li { margin-bottom: 10px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; font-weight: 300; position: relative; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li::before { content: "//"; color: #64e4cb; margin-right: 8px; font-weight: 300; font-family: "PPSupplySans-Regular", sans-serif; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn { padding-left: 35px; } @media (max-width: 1200px) { .techStackSection .techStackHeader { padding: 55px; } .techStackSection .techStackHeader .techStackTitle { font-size: 4rem; } } @media (max-width: 1024px) { .techStackSection .techStackHeader { padding: 50px 40px; } .techStackSection .techStackHeader .techStackTitle { font-size: 55px; line-height: 1em; } } @media (max-width: 768px) { .techStackSection .techStackHeader { padding: 50px 20px 46px; position: relative; top: 0; } .techStackSection .techStackHeader .techStackTitle { font-size: 55px; line-height: 1em; } .techStackSection .techStackCards .techStackCard { position: relative; top: 0; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber { width: 80px; height: 90px; font-size: 55px; padding-top: 10px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist { padding: 12px 16px; height: 90px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory { font-size: 1.4375rem; line-height: 30px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons { gap: 20px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon { height: 30px; width: 35px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle { width: 80px; height: 90px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns { flex-direction: column; padding-top: 25px; gap: 30px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine { display: none; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn { width: 100%; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn { padding-left: 0px; } } @media (max-width: 576px) { .techStackSection .techStackHeader { padding: 38px 20px 36px; } .techStackSection .techStackHeader .techStackTitle { font-size: 2.75rem; line-height: 1em; } .techStackSection .techStackCards .techStackCard.open .techStackContent { padding: 25px 20px; max-height: 1200px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber { width: 74px; height: 90px; font-size: 2.75rem; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist { padding: 12px; height: 90px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory { font-size: 1.4375rem; line-height: 30px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons { gap: 12px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon { height: 24px; width: 34px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle { width: 74px; height: 90px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle img { height: 20px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackHeading { font-size: 1.25rem; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackDescription { font-size: 1.125rem; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns { flex-direction: column; padding-top: 25px; gap: 24px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine { display: none; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn { width: 100%; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackColumnTitle { font-size: 1.25rem; margin-bottom: 16px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li { margin-bottom: 10px; font-size: 1.125rem; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn { padding-left: 0px; } } .experienceSection { width: 100%; position: relative; } .experienceSection .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .experienceSection .experienceHeader { display: flex; align-items: center; padding: 70px; position: relative; } .experienceSection .experienceHeader .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .experienceSection .experienceHeader .experienceTitle { font-size: 5rem; font-weight: 500; margin: 0; display: flex; line-height: 1.2em; align-items: center; font-family: "PPSupplySans-Regular", sans-serif; color: #e5f1fd; } .experienceSection .experienceStats { display: flex; justify-content: space-between; padding: 0 150px 0px; gap: 40px; } .experienceSection .experienceStats .statBox { position: relative; display: flex; flex-direction: column; align-items: center; } .experienceSection .experienceStats .statBox.activeStat .connector { display: block; } .experienceSection .experienceStats .statBox.activeStat .connector-right { display: block; } .experienceSection .experienceStats .statBox.activeStat .bottom-line { display: block; height: 104px; } .experienceSection .experienceStats .statBox.activeStat .statNumber { color: #64e4cb !important; text-shadow: none !important; transform: scale(1.05); transition: 0.3s ease; } .experienceSection .experienceStats .statBox.activeStat .statLabel { color: #64e4cb; } .experienceSection .experienceStats .statBox .line { width: 1px; height: 65px; background-color: #64e4cb; } .experienceSection .experienceStats .statBox .line-dashed { width: 1px; position: relative; height: 104px; margin: 28px 0 0; } .experienceSection .experienceStats .statBox .connector { position: relative; width: 1px; /* total width */ height: 132px; /* total height */ display: none; } .experienceSection .experienceStats .statBox .connector .connector-dashed { position: absolute; top: 28px; left: 0px; /* vertical line position */ width: 1px; height: 171px; /* vertical part */ background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); z-index: -1; } .experienceSection .experienceStats .statBox .connector .connector-left-dashed { position: absolute; top: 201px; /* horizontal line position */ left: 0px; /* where corner bends */ width: 148px; /* horizontal length */ height: 1px; background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); z-index: 1; } .experienceSection .experienceStats .statBox .connector-right { position: relative; width: 1px; /* total width */ height: 132px; /* total height */ display: none; } .experienceSection .experienceStats .statBox .connector-right .connector-dashed { position: absolute; top: 28px; left: 0px; /* vertical line position */ width: 1px; height: 171px; /* vertical part */ background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); z-index: -1; } .experienceSection .experienceStats .statBox .connector-right .connector-right-dashed { position: absolute; top: 201px; right: 0px; width: 148px; height: 1px; background: repeating-linear-gradient(to left, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); z-index: 1; } .experienceSection .experienceStats .statBox .bottom-line { position: absolute; top: 0; left: 0; display: none; width: 1px; height: 0; transition: height 0.35s ease; background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); } .experienceSection .experienceStats .statBox .statNumber { font-size: 130px; font-weight: 500; line-height: 130px; color: #06234f; margin: 35px 0 14px; font-family: "PPSupplySans-Regular", sans-serif; /* -webkit-text-stroke: 1px $color-primary; */ text-shadow: 2px 0 0 #64e4cb, -2px 0 0 #64e4cb, 0 2px 0 #64e4cb, 0 -2px 0 #64e4cb, 2px 2px 0 #64e4cb, -2px -2px 0 #64e4cb, 2px -2px 0 #64e4cb, -2px 2px 0 #64e4cb; height: 106px; cursor: pointer; width: 136px; /* Fixed width to accommodate largest number */ text-align: center; /* Center the numbers within the fixed width */ display: inline-block; } .experienceSection .experienceStats .statBox .statLabel { font-size: 1.25rem; line-height: 1.3em; margin-bottom: 10px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; font-weight: 300; text-align: center; width: -moz-min-content; width: min-content; } .experienceSection .experienceStats .statBox .statNumberOutline { color: #06234f; text-shadow: 2px 0 0 #64e4cb, -2px 0 0 #64e4cb, 0 2px 0 #64e4cb, 0 -2px 0 #64e4cb, 2px 2px 0 #64e4cb, -2px -2px 0 #64e4cb, 2px -2px 0 #64e4cb, -2px 2px 0 #64e4cb; } .experienceSection .experienceStats .statBox .statNumberOutline:hover { color: #64e4cb; text-shadow: none; transition: all 0.3s ease; } .experienceSection .experienceDescription { padding: 28px; margin: 0 auto; margin-bottom: 70px; color: #64e4cb; font-family: "PPSupplySans-Regular", sans-serif; max-width: 1080px; border: 1px solid #64e4cb; background-color: #06234f; position: relative; z-index: 2; } .experienceSection .highlightText, .experienceSection div { display: inline-block; width: -moz-fit-content; width: fit-content; margin-bottom: 0px; font-size: 2rem; line-height: 1.3em; color: #64e4cb; word-spacing: 4px; } .experienceSection div { display: block; width: auto; } .experienceSection .knowMoreBtn { background-color: #64e4cb; color: #06234f; padding: 6px 10px 0px; display: inline-block; font-size: 1.875rem; line-height: 36px; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; cursor: pointer; text-decoration: none; position: absolute; bottom: 0; width: -moz-max-content; width: max-content; right: 0; } .experienceSection .knowMoreBtn:hover { background-color: #64e4cb; color: #06234f; } @media (max-width: 1200px) { .experienceSection .experienceHeader { padding: 55px; } .experienceSection .experienceHeader .experienceTitle { font-size: 4rem; } .experienceSection .experienceStats { padding: 0 70px 0px; } .experienceSection .experienceDescription { padding: 28px; margin: 0 20px 70px; } } @media (max-width: 1024px) { .experienceSection .experienceHeader { padding: 50px 40px; } .experienceSection .experienceHeader .experienceTitle { font-size: 55px; line-height: 1em; } .experienceSection .experienceStats { padding: 0 40px 0px; } .experienceSection .experienceStats .statBox .statNumber { font-size: 110px; line-height: 120px; margin: 26px 0 10px; } .experienceSection .experienceDescription { padding: 28px; margin: 0 20px 70px; } .experienceSection .experienceDescription .highlightText { max-width: 806px; } .experienceSection .experienceDescription .knowMoreBtn { display: block; width: -moz-fit-content; width: fit-content; } } @media (max-width: 768px) { .experienceSection .experienceHeader { padding: 50px 20px 46px; } .experienceSection .experienceHeader .experienceTitle { font-size: 55px; line-height: 1em; } .experienceSection .experienceStats { padding: 0 20px 0px; gap: 25px; } .experienceSection .experienceStats .statBox .statNumber { font-size: 70px; line-height: 80px; height: 72px; margin: 26px 0 10px; width: 80px; } .experienceSection .experienceDescription { padding: 28px; margin: 0 20px 70px; } .experienceSection .experienceDescription .highlightText { max-width: 530px; } } @media (max-width: 576px) { .experienceSection .experienceHeader { padding: 38px 20px 36px; } .experienceSection .experienceHeader .experienceTitle { font-size: 2.75rem; line-height: 1em; } .experienceSection .experienceStats { flex-wrap: wrap; margin-bottom: 20px; margin-top: 15px; } .experienceSection .experienceStats .statBox { width: calc(50% - 20px); } .experienceSection .experienceStats .statBox.activeStat .connector-right { display: none; } .experienceSection .experienceStats .statBox.activeStat .connector { display: none; } .experienceSection .experienceStats .statBox .bottom-line { display: none; } .experienceSection .experienceStats .statBox .line-dashed { display: none; } .experienceSection .experienceStats .statBox .line { display: none; } .experienceSection .experienceStats .statBox .statNumber { font-size: 70px; line-height: 80px; height: 72px; margin: 26px 0 10px; } .experienceSection .experienceDescription { padding: 20px; margin: 0 20px 40px; } .experienceSection .experienceDescription .highlightText, .experienceSection .experienceDescription div, .experienceSection .experienceDescription .knowMoreBtn { font-size: 1.5rem; line-height: 30px; } } /* Add Block CSS Here */ .digitalProductSection { padding: 0px 120px; font-family: "PPSupplySans-Regular", sans-serif; position: relative; } .digitalProductSection .border-bottom-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .digitalProductSection .contentWrapper { margin: 0 auto; text-align: center; padding: 50px 0 0px; } .digitalProductSection .contentWrapper .border-left-dashed { position: absolute; top: 0; left: 120px; width: 1px; height: 100%; --dash-length: 5px; --gap-length: 5px; background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--gap-length))); } .digitalProductSection .contentWrapper .border-right-dashed { position: absolute; top: 0; right: 120px; width: 1px; height: 100%; --dash-length: 5px; --gap-length: 5px; background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--gap-length))); } .digitalProductSection .contentWrapper .productSectionHeading .heading { color: #64e4cb; font-size: 3.25rem; letter-spacing: 2px; font-weight: 500; line-height: normal; font-family: "PPSupplyMono-Regular"; max-width: 700px; margin: 0 auto 40px; } .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed { position: absolute; top: 212px; left: 0; width: 100%; height: 1px; background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px); z-index: 1; } .digitalProductSection .contentWrapper .productSectionDescription .description p { color: #cfd7f1; font-size: 1.5rem; line-height: 1.4em; font-weight: 400; text-align: start; font-family: "Space Grotesk", sans-serif; padding: 55px 55px 55px; } .digitalProductSection .contentWrapper .productSectionDescription .border-bottom-dashed { position: absolute; bottom: 116px; left: 0; width: 100%; text-transform: uppercase; height: 1px; background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px); z-index: 2; } .digitalProductSection .contentWrapper .buttonGroup { display: flex; width: 100%; gap: 30px; padding: 10px; position: relative; } .digitalProductSection .contentWrapper .buttonGroup .border-dashed { position: absolute; top: 2px; bottom: 0; left: 50%; width: 1px; background: repeating-linear-gradient(to bottom, #64e4cb, #64e4cb 6px, transparent 6px, transparent 12px); } .digitalProductSection .contentWrapper .buttonGroup .ctaBtn { width: 50%; font-size: 1.5rem; color: #ffffff; border: none; padding: 32px 24px; font-weight: bold; line-height: normal; cursor: pointer; font-family: "Space Grotesk", sans-serif; text-decoration: none; } .digitalProductSection .contentWrapper .buttonGroup .ctaBtn.active { background-color: #64e4cb; color: #06234f; } .digitalProductSection .contentWrapper .buttonGroup .ctaBtn:hover { background-color: #64e4cb; color: #06234f; } @media (max-width: 1200px) { .digitalProductSection { padding: 0px 70px; } .digitalProductSection .contentWrapper .border-left-dashed { left: 70px; } .digitalProductSection .contentWrapper .border-right-dashed { right: 70px; } } @media (max-width: 1024px) { .digitalProductSection { padding: 0px 40px; } .digitalProductSection .contentWrapper .border-left-dashed { left: 40px; } .digitalProductSection .contentWrapper .border-right-dashed { right: 40px; } } @media (max-width: 768px) { .digitalProductSection { padding: 0px 26px; } .digitalProductSection .contentWrapper .border-left-dashed { left: 26px; } .digitalProductSection .contentWrapper .border-right-dashed { right: 26px; } .digitalProductSection .contentWrapper .productSectionHeading .heading { font-size: 2.5rem; } .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed { top: 190px; } .digitalProductSection .contentWrapper .productSectionDescription .description p { font-size: 1.4375rem; padding: 44px 44px 44px; } } @media (max-width: 576px) { .digitalProductSection .contentWrapper { padding: 40px 0 10px; } .digitalProductSection .contentWrapper .border-left-dashed { left: 26px; } .digitalProductSection .contentWrapper .border-right-dashed { right: 26px; } .digitalProductSection .contentWrapper .productSectionHeading .heading { font-size: 1.5rem; padding: 0 6px; margin-bottom: 32px; } .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed { top: 161px; } .digitalProductSection .contentWrapper .productSectionDescription .description p { font-size: 1.25rem; padding: 28px; text-align: center; } .digitalProductSection .contentWrapper .productSectionDescription .border-bottom-dashed { bottom: 238px; } .digitalProductSection .contentWrapper .buttonGroup { flex-direction: column; gap: 24px; } .digitalProductSection .contentWrapper .buttonGroup .border-dashed { top: 51%; left: 0; width: 100%; height: 1px; background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px); } .digitalProductSection .contentWrapper .buttonGroup .ctaBtn { width: 100%; font-size: 1.4375rem; padding: 32px 20px; } } /* Add Block CSS Here */ .portfolioWrapper { width: 100%; display: flex; } .portfolioWrapper .portfolioDetails { width: 40%; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 35px; padding: 50px; position: sticky; flex-shrink: 0; } .portfolioWrapper .portfolioDetails .detailsHeading { color: #e5f1fd; font-size: 5rem; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; line-height: 1.1em; margin: 0; } .portfolioWrapper .portfolioDetails .detailsDescription { font-size: 1.875rem; color: #64e4cb; font-weight: 500; line-height: 1.4em; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .portfolioWrapper .portfolioDetails .descriptionText { font-size: 1.25rem; color: #cfd7f1; margin: 0; font-weight: 300; line-height: 1.3em; font-family: "Space Grotesk", sans-serif; } .portfolioWrapper .portfolioInformation { width: 60%; height: 100%; display: flex; flex-direction: column; scrollbar-width: none; overflow-x: auto; scroll-snap-type: x mandatory; /* padding-bottom: 1rem; */ -webkit-overflow-scrolling: touch; position: relative; } .portfolioWrapper .portfolioInformation .border-divider-line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; z-index: 9; background: #64e4cb; } .portfolioWrapper .portfolioInformation .portfolioSlider { width: 100%; scroll-snap-align: start; } .portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard { width: 100%; /* height: 452px; */ display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard .border-line { width: 100%; height: 1px; background: #64e4cb; position: absolute; bottom: 0; left: 0; } .portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; display: block; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo { display: flex; /* height: 250px; */ color: #e1e7f5; position: relative; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .border-line { width: 100%; height: 1px; background: #64e4cb; position: absolute; bottom: 0; left: 0; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails { flex: 2; display: flex; flex-direction: column; position: relative; min-width: 0; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .border-col-line { position: absolute; top: 0; right: 0 !important; width: 1px; height: 100%; background: #64e4cb; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 2.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #dddddd; line-height: normal; margin: 0; padding: 22px 20px 35px; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags { position: relative; -webkit-overflow-scrolling: touch; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper { display: flex; flex-wrap: nowrap; /* Changed from wrap to nowrap for horizontal scroll */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink { padding: 6px 18px; font-size: 1rem; color: #ffffff; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: 1.6em; text-decoration: none; /* border-right: 1px solid $color-primary; */ position: relative; display: inline-flex; align-items: center; justify-content: center; /* overflow: scroll; */ } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .border-col-line { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink:hover { background-color: #64e4cb; color: #06234f; font-weight: 500; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink:hover .linkArrow { opacity: 1; transform: rotate(320deg) scale(1) translateY(0px); /* left: 63%; */ } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .linkArrow { width: 13px; height: 13px; position: absolute; top: 4px; right: 4px; transform: rotate(320deg) scale(0.8) translateY(30px); opacity: 0; transition: all 0.3s ease; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright { width: 25%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 30px 24px; position: relative; text-decoration: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .externalLink { display: flex; position: absolute; justify-content: center; bottom: 0; right: 0; background-color: #64e4cb; padding: 10px; width: 38px; height: 34px; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .externalLink .link-image { display: block; width: 14px; height: 14px; transform: rotate(322deg); } .portfolioWrapper .portfolioInformation .btn-more { width: 100%; background-color: transparent; border: none; display: flex; text-decoration: none; gap: 20px; align-items: center; font-size: 6rem; color: #64e4cb; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; line-height: normal; justify-content: center; padding: 40px 0 30px; height: 160px; cursor: pointer; } .portfolioWrapper .portfolioInformation .btn-more:hover { background-color: #64e4cb; color: #06234f; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 68px; height: 68px; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1200px) { .portfolioWrapper .portfolioDetails { padding: 40px; gap: 26px; } .portfolioWrapper .portfolioDetails .detailsHeading { font-size: 4rem; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 1.875rem; padding: 22px 15px 30px; } .portfolioWrapper .portfolioInformation .btn-more { font-size: 4.75rem; height: 150px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 55px; height: 55px; } } @media (max-width: 1024px) { .portfolioWrapper { flex-direction: column; } .portfolioWrapper .portfolioDetails { width: 100%; padding: 70px 40px; gap: 26px; position: unset; } .portfolioWrapper .portfolioDetails .detailsHeading { font-size: 3.25rem; line-height: 1em; } .portfolioWrapper .portfolioInformation { width: 100%; border-top: 1px solid #64e4cb; border-left: none; } .portfolioWrapper .portfolioInformation .border-divider-line { display: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 1.875rem; padding: 22px 15px 30px; } .portfolioWrapper .portfolioInformation .btn-more { font-size: 4rem; height: 150px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 48px; height: 48px; } } @media (max-width: 768px) { .portfolioWrapper .portfolioDetails { padding: 55px 20px; gap: 22px; position: unset; } .portfolioWrapper .portfolioDetails .detailsHeading { font-size: 3.25rem; line-height: 1em; } .portfolioWrapper .portfolioInformation .border-divider-line { display: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo { flex-direction: column; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails { border-right: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .border-col-line { display: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 1.875rem; padding: 22px 15px 30px; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper { flex-wrap: nowrap; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink :last-child { border-right: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .border-col-line { display: block; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright { width: 100%; border-top: 1px solid #64e4cb; padding: 20px; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .projectlogos { width: 200px; } .portfolioWrapper .portfolioInformation .btn-more { font-size: 4rem; height: 150px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 48px; height: 48px; } } @media (max-width: 576px) { .portfolioWrapper .portfolioDetails { padding: 44px 20px; gap: 16px; } .portfolioWrapper .portfolioDetails .detailsHeading { font-size: 2.75rem; line-height: 1em; } .portfolioWrapper .portfolioDetails .detailsDescription { font-size: 1.5rem; line-height: 1.1em; } .portfolioWrapper .portfolioDetails .descriptionText { font-size: 1.125rem; line-height: 1.2em; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 1.875rem; padding: 22px 15px 30px; } .portfolioWrapper .portfolioInformation .btn-more { font-size: 4rem; gap: 14px; height: 140px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 44px; height: 44px; } } .projectDetailsWrapper { margin-top: 94px; } .projectDetailsWrapper .projectHeadingDetails { padding: 70px; position: relative; } .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle { font-size: 4rem; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; color: #64e4cb; line-height: normal; text-align: left; word-break: break-word; } .projectDetailsWrapper .projectHeadingDetails .border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .projectDetailsWrapper .projectLandingImage { width: 100%; height: auto; } .projectDetailsWrapper .projectLandingImage img { width: 100%; height: auto; display: block; } .project-overview-wrapper { /* project-description */ } .project-overview-wrapper .project-info { display: flex; align-items: stretch; position: relative; } .project-overview-wrapper .project-info .border-line { position: absolute; top: 0; left: 0; bottom: unset; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .project-overview-wrapper .project-info .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .project-overview-wrapper .project-info .project-info-logo { width: 400px; /* height: 350px; */ flex-shrink: 0; -o-object-fit: contain; object-fit: contain; background-color: rgba(0, 124, 189, 0.4392156863); display: flex; align-items: center; justify-content: center; } .project-overview-wrapper .project-info .project-info-logo img { width: 60%; height: auto; -o-object-fit: cover; object-fit: cover; } .project-overview-wrapper .project-info .projectInfoTech { width: 100%; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .border-left { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info { padding: 24px; display: flex; align-items: center; justify-content: space-between; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label, .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { font-size: 1.875rem; font-family: "Space Grotesk", sans-serif; /* font-family: "PPSupplySans-Regular", sans-serif; */ font-weight: 400; color: #64e4cb; line-height: normal; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { color: #e5f1fd; padding-left: 8px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons { display: flex; align-items: center; gap: 8px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span { width: 40px; height: 40px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info { display: flex; flex-direction: column; align-items: stretch; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills { max-width: 100%; width: 100%; height: auto; position: relative; display: flex; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info { padding: 24px; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; display: block; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label, .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #64e4cb; line-height: normal; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading { color: #e5f1fd; font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category { padding: 24px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #64e4cb; line-height: normal; margin-bottom: 6px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info { font-family: "Space Grotesk", sans-serif; font-weight: 400; font-size: 1.25rem; color: #cfd7f1; line-height: normal; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology { display: flex; width: 100%; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies { padding: 24px; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #64e4cb; line-height: normal; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags { display: flex; flex-wrap: wrap; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .border-top-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech { display: flex; align-items: center; flex-shrink: 0; padding: 16px; font-size: 1rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #e5f1fd; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech:first-of-type .border-col-left { opacity: 1; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .border-col-left { position: absolute; top: 0; left: 0 !important; width: 1px; height: 100%; background: #64e4cb; opacity: 0; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .border-col-line { position: absolute; top: 0; right: 0 !important; width: 1px; height: 100%; background: #64e4cb; } .project-overview-wrapper .project-description { padding: 24px; position: relative; } .project-overview-wrapper .project-description .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .project-overview-wrapper .project-description .project-description-heading { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; color: #64e4cb; line-height: normal; text-transform: capitalize; } .project-overview-wrapper .project-description .project-description-info { margin-top: 8px; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #e5f1fd; line-height: normal; } .brand-section .brand-block .brand-header { display: flex; align-items: center; gap: 24px; position: relative; } .brand-section .brand-block .brand-header .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .brand-section .brand-block .brand-header .brand-number { background: #64e4cb; color: #000000; font-size: 70px; font-weight: 300; padding: 20px 20px 10px; /* font-family: "Space Grotesk", sans-serif; */ font-family: "PPSupplyMono-Ultralight"; line-height: 76px; } .brand-section .brand-block .brand-header .brand-heading { color: #64e4cb; font-size: 34px; /* font-family: "Space Grotesk", sans-serif; */ font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; line-height: 40px; text-transform: uppercase; } .brand-section .brand-block:last-child .brand-content .border-bottom-line { display: none; } .brand-section .brand-block .brand-content { display: flex; align-items: stretch; width: 100%; position: relative; } .brand-section .brand-block .brand-content.brand-content-reverse { flex-direction: row-reverse; } .brand-section .brand-block .brand-content .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 2; } .brand-section .brand-block .brand-content .brand-image { width: 100%; flex: 1.6; display: flex; align-items: center; justify-content: center; } .brand-section .brand-block .brand-content .brand-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .brand-section .brand-block .brand-content .brand-description { max-width: 30%; width: 100%; flex-shrink: 0; padding: 34px; display: flex; background: rgba(100, 228, 203, 0.2); position: relative; } .brand-section .brand-block .brand-content .brand-description.brand-reverse { border-left: 0; } .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .brand-section .brand-block .brand-content .brand-description .border-left { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #64e4cb; } .brand-section .brand-block .brand-content .brand-description .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; display: none; } .brand-section .brand-block .brand-content .brand-description p { color: #cfd7f1; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: normal; } @media (max-width: 1200px) { .projectDetailsWrapper .projectHeadingDetails { padding: 50px; } .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle { font-size: 48px; } .brand-section .brand-block .brand-content .brand-description { padding: 24px; } } @media (max-width: 1024px) { .projectDetailsWrapper .projectHeadingDetails { padding: 40px; } .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle { font-size: 2.75rem; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info { padding: 20px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label, .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills { flex-direction: column; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info { padding: 20px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .border-right { display: none; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category { padding: 20px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology { flex-direction: column; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies { padding: 20px; } .brand-section .brand-block .brand-header .brand-number { font-size: 60px; padding: 16px 16px 6px; } .brand-section .brand-block .brand-content .brand-description { padding: 20px; } } @media (max-width: 768px) { .projectDetailsWrapper { margin-top: 72px; } .project-overview-wrapper { /* project-description */ } .project-overview-wrapper .project-info .project-info-logo { width: 260px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label, .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info { flex-direction: column; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills { max-width: 100%; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-right { display: none; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-bottom-line { display: block; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label, .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech { padding: 14px; } .project-overview-wrapper .project-description { padding: 20px; } .brand-section .brand-block .brand-header .brand-number { font-size: 54px; padding: 16px 16px 6px; line-height: 60px; } .brand-section .brand-block .brand-header .brand-heading { font-size: 28px; line-height: 32px; } .brand-section .brand-block .brand-content { flex-direction: column-reverse !important; } .brand-section .brand-block .brand-content .brand-description { max-width: 100%; } .brand-section .brand-block .brand-content .brand-description .border-left { display: none; } .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right { display: none; } .brand-section .brand-block .brand-content .brand-description .border-bottom-line { display: block; } } @media (max-width: 576px) { .projectDetailsWrapper .projectHeadingDetails { padding: 36px 20px 34px; } .project-overview-wrapper { /* project-description */ } .project-overview-wrapper .project-info { flex-direction: column-reverse; } .project-overview-wrapper .project-info .project-info-logo { width: 100% !important; height: 160px; } .project-overview-wrapper .project-info .projectInfoTech { width: 100%; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .border-left { display: none; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label, .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons { display: flex; align-items: center; gap: 8px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span { width: 40px; height: 40px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info { display: flex; align-items: stretch; position: relative; flex-direction: column; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills { max-width: 100%; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label, .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading { font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label { font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info { font-size: 1.125rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology { display: block; width: 100%; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label { font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech:first-of-type .border-col-left { opacity: 0; } .project-overview-wrapper .project-description { padding: 16px; } .project-overview-wrapper .project-description .project-description-heading { font-size: 1.4375rem; } .project-overview-wrapper .project-description .project-description-info { margin-top: 6px; font-size: 1.125rem; } .brand-section .brand-block .brand-header .brand-number { font-size: 2.75rem; padding: 12px 12px 2px; line-height: 54px; } .brand-section .brand-block .brand-header .brand-heading { font-size: 28px; line-height: 32px; } .brand-section .brand-block .brand-content { flex-direction: column-reverse !important; } .brand-section .brand-block .brand-content .brand-description { padding: 16px; max-width: 100%; } .brand-section .brand-block .brand-content .brand-description .border-left { display: none; } .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right { display: none; } .brand-section .brand-block .brand-content .brand-description .border-bottom-line { display: block; } .brand-section .brand-block .brand-content .brand-description p { font-size: 1.125rem; } } /* Add Block CSS Here */ .herobanner { margin-top: 94px; height: auto !important; display: flex; position: relative; min-height: 600px; } .herobanner .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .herobanner .herobannerleft { max-width: 30%; width: 100%; flex-shrink: 0; position: relative; } .herobanner .herobannerleft .aboutHero { max-width: 100%; width: 100%; } .herobanner .herobannerleft .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #64e4cb; } .herobanner .herobannerleft .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; display: none; } .herobanner .herobannerright .heroheading { padding: 40px; position: relative; } .herobanner .herobannerright .heroheading .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .herobanner .herobannerright .heroheading .bannerTitle { font-family: "PPSupplySans-Regular", sans-serif; font-weight: 400 !important; font-size: 4rem; line-height: 72px; color: #64e4cb; } .herobanner .herobannerright .bannerSubDetail { font-family: "Space Grotesk", sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 33px; color: #ffffff; padding: 40px; margin-bottom: 0px; } #matrix-face-container { font-family: "Courier New", monospace; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 400px; overflow: hidden; /* ← ADD */ box-sizing: border-box; } .mf-output { max-width: 100%; overflow: hidden; /* ← ADD: clip overflowing pre */ margin-top: 16px; } .mf-output pre { margin: 0; line-height: 1; /* font-size set dynamically by JS */ white-space: pre; overflow: hidden; } @media (max-width: 1200px) { .herobanner .herobannerright .heroheading { padding: 30px; } .herobanner .herobannerright .heroheading .bannerTitle { font-size: 3.25rem; line-height: 62px; } .herobanner .herobannerright .bannerSubDetail { font-size: 1.25rem; line-height: 28px; padding: 30px; } } @media (max-width: 1024px) { .herobanner .herobannerleft { max-width: 40%; } .herobanner .herobannerright .heroheading { padding: 24px; } .herobanner .herobannerright .heroheading .bannerTitle { font-size: 2.875rem; line-height: 52px; } .herobanner .herobannerright .bannerSubDetail { font-size: 1.25rem; line-height: 26px; padding: 24px; } } @media (max-width: 768px) { .herobanner { margin-top: 72px; flex-direction: column; min-height: auto; } .herobanner .herobannerleft { max-width: 100%; } .herobanner .herobannerleft .border-right { display: none; } .herobanner .herobannerleft .border-bottom-line { display: block; } .herobanner .herobannerright .heroheading { padding: 20px; } .herobanner .herobannerright .heroheading .bannerTitle { font-size: 2.875rem; line-height: 52px; } .herobanner .herobannerright .bannerSubDetail { font-size: 1.25rem; line-height: 26px; padding: 20px; } } /*# sourceMappingURL=bootstrap.css.map */ {"version":3,"sources":["data:;charset=utf-8,/%20.editor-styles-wrapper%20%7B%0A/%20%20%20h1%20%7B%0A/%20%20%20%20%20@apply%20font-poppinmedium%20text-%5B1.6875rem%5D%20lg:text-%5B3.25rem%5D%20leading-tight%20text-black;%0A/%20%20%20%7D%0A/%20%7D%0A/%20.wp-core-ui%20.quicktags-toolbar%20%7B%0A/%20%20%20.ed_button%20%7B%0A/%20%20%20%20%20@apply%20min-w-%5Bauto%5D;%0A/%20%20%20%7D%0A/%20%7D%0A/%20.wp-block%20%7B%0A/%20%20%20@apply%20max-w-%5B71.25rem%5D%20my-0;%0A/%20%20%20.animation__fade%20%7B%0A/%20%20%20%20%20@apply%20opacity-100%20translate-y-0%20ease-in-out%20duration-500;%0A/%20%20%20%7D%0A/%20%20%20.button:not(.ed_button)%20%7B%0A/%20%20%20%20%20@apply%20border-0%20text-xs%20md:text-base%20relative%20flex%20items-center%20bg-primary%20text-white%20min-w-%5B5rem%5D%20pl-4%20py-2.5%20pr-12%20font-poppinregular%20justify-between%20leading-none%20rounded-md%20sm:rounded-%5B.625rem%5D;%0A/%20%20%20%20%20&:hover%20%7B%0A/%20%20%20%20%20%20%20@apply%20bg-green%20text-white;%0A/%20%20%20%20%20%20%20span%20%7B%0A/%20%20%20%20%20%20%20%20%20@apply%20translate-x-%5B.375rem%5D;%0A/%20%20%20%20%20%20%20%7D%0A/%20%20%20%20%20%7D%0A/%20%20%20%20%20span%20%7B%0A/%20%20%20%20%20%20%20@apply%20absolute%20right-%5B.875rem%5D%20translate-x-0%20ml-2%20w-6%20h-6%20bg-white%20bg-opacity-20%20rounded-full%20flex%20items-center%20justify-center%20transition-all%20duration-700%20ease-in-expo;%0A/%20%20%20%20%20%7D%0A/%20%20%20%20%20&.acf-repeater-add-row%20%7B%0A/%20%20%20%20%20%20%20@apply%20py-2%20px-4%20bg-%5B%23f6f7f7%5D%20hover:bg-primary;%0A/%20%20%20%20%20%7D%0A/%20%20%20%7D%0A%0Ahtml%20:where(.wp-block)%7B%0A%20%20%20%20width:%2094%25;%0A%20%20%20%20max-width:%2094%25;%0A%7D%0A.block-editor__container%20.ratio%20%3E%20img%7B%0A%20%20%20%20height:%20100%25;%0A%7D%0A.images-slider-section%7B%0A%20%20%20%20.slick-list%7B%0A%20%20%20%20%20%20%20%20.slide%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%200%205px;%0A%20%20%20%20%20%20%20%20%20%20%20%20picture%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&::before%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding-top:%2070%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20content:%20%22%22;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20img%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D","admin.css"],"names":[],"mappings":"AA+BA;EACI,UAAA;EACA,cAAA;AC9BJ;;ADgCA;EACI,YAAA;AC7BJ;;ADiCQ;EACI,cAAA;AC9BZ;AD+BY;EACI,kBAAA;EACA,WAAA;EACA,gBAAA;AC7BhB;AD8BgB;EACI,cAAA;EACA,gBAAA;EACA,WAAA;AC5BpB;AD8BgB;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;AC5BpB","file":"admin.css","sourcesContent":["// .editor-styles-wrapper {\n// h1 {\n// @apply font-poppinmedium text-[1.6875rem] lg:text-[3.25rem] leading-tight text-black;\n// }\n// }\n// .wp-core-ui .quicktags-toolbar {\n// .ed_button {\n// @apply min-w-[auto];\n// }\n// }\n// .wp-block {\n// @apply max-w-[71.25rem] my-0;\n// .animation__fade {\n// @apply opacity-100 translate-y-0 ease-in-out duration-500;\n// }\n// .button:not(.ed_button) {\n// @apply border-0 text-xs md:text-base relative flex items-center bg-primary text-white min-w-[5rem] pl-4 py-2.5 pr-12 font-poppinregular justify-between leading-none rounded-md sm:rounded-[.625rem];\n// &:hover {\n// @apply bg-green text-white;\n// span {\n// @apply translate-x-[.375rem];\n// }\n// }\n// span {\n// @apply absolute right-[.875rem] translate-x-0 ml-2 w-6 h-6 bg-white bg-opacity-20 rounded-full flex items-center justify-center transition-all duration-700 ease-in-expo;\n// }\n// &.acf-repeater-add-row {\n// @apply py-2 px-4 bg-[#f6f7f7] hover:bg-primary;\n// }\n// }\n\nhtml :where(.wp-block){\n width: 94%;\n max-width: 94%;\n}\n.block-editor__container .ratio > img{\n height: 100%;\n}\n.images-slider-section{\n .slick-list{\n .slide{\n padding: 0 5px;\n picture{\n position: relative;\n width: 100%;\n overflow: hidden;\n &::before{\n display: block;\n padding-top: 70%;\n content: \"\";\n }\n img{\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n }\n }\n }\n}","html :where(.wp-block) {\n width: 94%;\n max-width: 94%;\n}\n\n.block-editor__container .ratio > img {\n height: 100%;\n}\n\n.images-slider-section .slick-list .slide {\n padding: 0 5px;\n}\n.images-slider-section .slick-list .slide picture {\n position: relative;\n width: 100%;\n overflow: hidden;\n}\n.images-slider-section .slick-list .slide picture::before {\n display: block;\n padding-top: 70%;\n content: \"\";\n}\n.images-slider-section .slick-list .slide picture img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}"]} html :where(.wp-block) { width: 94%; max-width: 94%; } .block-editor__container .ratio > img { height: 100%; } .images-slider-section .slick-list .slide { padding: 0 5px; } .images-slider-section .slick-list .slide picture { position: relative; width: 100%; overflow: hidden; } .images-slider-section .slick-list .slide picture::before { display: block; padding-top: 70%; content: ""; } .images-slider-section .slick-list .slide picture img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*# sourceMappingURL=admin.css.map */ {"version":3,"sources":[],"names":[],"mappings":"","file":"color.css","sourcesContent":[]} /*# sourceMappingURL=color.css.map */ {"version":3,"sources":["data:;charset=utf-8,/%20===============================%0A/%20TYPOGRAPHY%20SYSTEM%20-%20KRUPALPATEL%0A/%20===============================%0A%0A/%20Google%20Fonts%20Imports%0A@import%20url(%22https:/fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap%22);%0A@import%20url(%22https:/fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap%22);%0A%0A/%20Local%20Font%20Face%20Declarations%0A@font-face%20%7B%0A%20%20font-family:%20%22PPSupplySans-Regular%22;%0A%20%20src:%20url(%22../fonts/PPSupplySans-Regular.otf%22)%20format(%22opentype%22);%0A%20%20font-weight:%20400;%0A%20%20font-style:%20normal;%0A%20%20font-display:%20swap;%0A%7D%0A%0A@font-face%20%7B%0A%20%20font-family:%20%22PPSupplySans-Ultralight%22;%0A%20%20src:%20url(%22../fonts/PPSupplySans-Ultralight.otf%22)%20format(%22opentype%22);%0A%20%20font-weight:%20200;%0A%20%20font-style:%20normal;%0A%20%20font-display:%20swap;%0A%7D%0A%0A@font-face%20%7B%0A%20%20font-family:%20%22PPSupplyMono-Ultralight%22;%0A%20%20src:%20url(%22../fonts/PPSupplyMono-Ultralight.otf%22)%20format(%22opentype%22);%0A%20%20font-weight:%20200;%0A%20%20font-style:%20normal;%0A%20%20font-display:%20swap;%0A%7D%0A%0A@font-face%20%7B%0A%20%20font-family:%20%22PPSupplyMono-Regular%22;%0A%20%20src:%20url(%22../fonts/PPSupplyMono-Regular.otf%22)%20format(%22opentype%22);%0A%20%20font-weight:%20400;%0A%20%20font-style:%20normal;%0A%20%20font-display:%20swap;%0A%7D%0A%0A/%20===============================%0A/%20SCSS%20FONT%20VARIABLES%0A/%20===============================%0A%0A/%20Primary%20Font%20Family%20Variables%20(Body%20Text)%0A$font-primary:%0A%20%20%22PPSupplySans-Regular%22,%0A%20%20%22Manrope%22,%0A%20%20-apple-system,%0A%20%20BlinkMacSystemFont,%0A%20%20%22Segoe%20UI%22,%0A%20%20Roboto,%0A%20%20Oxygen,%0A%20%20Ubuntu,%0A%20%20Cantarell,%0A%20%20sans-serif;%0A$font-primary-light:%20%22PPSupplySans-Ultralight%22,%20%22Manrope%22,%20sans-serif;%0A$font-primary-medium:%20%22Manrope%22,%20sans-serif;%0A$font-primary-bold:%20%22Manrope%22,%20sans-serif;%0A%0A/%20Secondary%20Font%20Family%20Variables%20(Headings)%0A$font-secondary:%20%22Space%20Grotesk%22,%20%22Manrope%22,%20sans-serif;%0A$font-secondary-800:%20%22Space%20Grotesk%22,%20sans-serif;%0A%0A/%20Monospace%20Font%20Family%20Variables%20(Code/Technical)%0A$font-mono:%20%22PPSupplyMono-Regular%22,%20%22SF%20Mono%22,%20%22Monaco%22,%20%22Inconsolata%22,%0A%20%20%22Fira%20Code%22,%20%22Droid%20Sans%20Mono%22,%20%22Courier%20New%22,%20monospace;%0A$font-mono-light:%20%22PPSupplyMono-Ultralight%22,%20%22SF%20Mono%22,%20monospace;%0A%0A/%20Display%20Font%20Family%20Variables%20(Special%20Use)%0A$font-display:%20%22Orbitron%22,%20%22Space%20Grotesk%22,%20sans-serif;%0A%0A/%20Individual%20Font%20Names%20(for%20specific%20use%20cases)%0A$font-ppsupply-sans-regular:%20%22PPSupplySans-Regular%22;%0A$font-ppsupply-sans-ultralight:%20%22PPSupplySans-Ultralight%22;%0A$font-ppsupply-mono-regular:%20%22PPSupplyMono-Regular%22;%0A$font-ppsupply-mono-ultralight:%20%22PPSupplyMono-Ultralight%22;%0A$font-manrope:%20%22Manrope%22;%0A$font-space-grotesk:%20%22Space%20Grotesk%22;%0A$font-orbitron:%20%22Orbitron%22;%0A%0A/%20Line%20Height%20Variables%0A$line-height-none:%201;%0A$line-height-tight:%201.2;%0A$line-height-snug:%201.3;%0A$line-height-normal:%201.5;%0A$line-height-relaxed:%201.75;%0A$line-height-loose:%202;%0A%0A/%20Letter%20Spacing%20Variables%0A$letter-spacing-tighter:%20-0.05em;%0A$letter-spacing-tight:%20-0.025em;%0A$letter-spacing-normal:%200em;%0A$letter-spacing-wide:%200.025em;%0A$letter-spacing-wider:%200.05em;%0A$letter-spacing-widest:%200.1em;%0A","fonts.css"],"names":[],"mappings":"AAKQ,6HAAA;AACA,0FAAA;AAGR;EACE,mCAAA;EACA,gEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACNF;ADSA;EACE,sCAAA;EACA,mEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACPF;ADUA;EACE,sCAAA;EACA,mEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACRF;ADWA;EACE,mCAAA;EACA,gEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACTF","file":"fonts.css","sourcesContent":["// ===============================\n// TYPOGRAPHY SYSTEM - KRUPALPATEL\n// ===============================\n\n// Google Fonts Imports\n@import url(\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap\");\n\n// Local Font Face Declarations\n@font-face {\n font-family: \"PPSupplySans-Regular\";\n src: url(\"../fonts/PPSupplySans-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplySans-Ultralight\";\n src: url(\"../fonts/PPSupplySans-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplyMono-Ultralight\";\n src: url(\"../fonts/PPSupplyMono-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplyMono-Regular\";\n src: url(\"../fonts/PPSupplyMono-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n// ===============================\n// SCSS FONT VARIABLES\n// ===============================\n\n// Primary Font Family Variables (Body Text)\n$font-primary:\n \"PPSupplySans-Regular\",\n \"Manrope\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n sans-serif;\n$font-primary-light: \"PPSupplySans-Ultralight\", \"Manrope\", sans-serif;\n$font-primary-medium: \"Manrope\", sans-serif;\n$font-primary-bold: \"Manrope\", sans-serif;\n\n// Secondary Font Family Variables (Headings)\n$font-secondary: \"Space Grotesk\", \"Manrope\", sans-serif;\n$font-secondary-800: \"Space Grotesk\", sans-serif;\n\n// Monospace Font Family Variables (Code/Technical)\n$font-mono: \"PPSupplyMono-Regular\", \"SF Mono\", \"Monaco\", \"Inconsolata\",\n \"Fira Code\", \"Droid Sans Mono\", \"Courier New\", monospace;\n$font-mono-light: \"PPSupplyMono-Ultralight\", \"SF Mono\", monospace;\n\n// Display Font Family Variables (Special Use)\n$font-display: \"Orbitron\", \"Space Grotesk\", sans-serif;\n\n// Individual Font Names (for specific use cases)\n$font-ppsupply-sans-regular: \"PPSupplySans-Regular\";\n$font-ppsupply-sans-ultralight: \"PPSupplySans-Ultralight\";\n$font-ppsupply-mono-regular: \"PPSupplyMono-Regular\";\n$font-ppsupply-mono-ultralight: \"PPSupplyMono-Ultralight\";\n$font-manrope: \"Manrope\";\n$font-space-grotesk: \"Space Grotesk\";\n$font-orbitron: \"Orbitron\";\n\n// Line Height Variables\n$line-height-none: 1;\n$line-height-tight: 1.2;\n$line-height-snug: 1.3;\n$line-height-normal: 1.5;\n$line-height-relaxed: 1.75;\n$line-height-loose: 2;\n\n// Letter Spacing Variables\n$letter-spacing-tighter: -0.05em;\n$letter-spacing-tight: -0.025em;\n$letter-spacing-normal: 0em;\n$letter-spacing-wide: 0.025em;\n$letter-spacing-wider: 0.05em;\n$letter-spacing-widest: 0.1em;\n","@import url(\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap\");\n@font-face {\n font-family: \"PPSupplySans-Regular\";\n src: url(\"../fonts/PPSupplySans-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplySans-Ultralight\";\n src: url(\"../fonts/PPSupplySans-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplyMono-Ultralight\";\n src: url(\"../fonts/PPSupplyMono-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplyMono-Regular\";\n src: url(\"../fonts/PPSupplyMono-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}"]} @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap"); @font-face { font-family: "PPSupplySans-Regular"; src: url("../fonts/PPSupplySans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplySans-Ultralight"; src: url("../fonts/PPSupplySans-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplyMono-Ultralight"; src: url("../fonts/PPSupplyMono-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplyMono-Regular"; src: url("../fonts/PPSupplyMono-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /*# sourceMappingURL=fonts.css.map */ {"version":3,"sources":["file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/fonts.scss","main.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","data:;charset=utf-8,@use%20%22./fonts.scss%22%20as%20*;%0A@use%20%22./variables.scss%22%20as%20*;%0A@use%20%22./typography.scss%22%20as%20*;%0A@use%20%22./mixins/breakpoint.scss%22%20as%20*;%0A@use%20%22./mixins/mixins.scss%22%20as%20*;%0A@use%20%22./color.scss%22%20as%20*;%0A%0Ahtml,%0Abody%20%7B%0A%20%20overflow-x:%20hidden;%0A%7D%0A%0A*%20%7B%0A%20%20box-sizing:%20border-box;%0A%20%20margin:%200;%0A%7D%0Abody%20%7B%0A%20%20margin:%200;%0A%20%20padding:%200;%0A%20%20width:%20100%25;%0A%20%20height:%20100%25;%0A%20%20font-size:%2016px;%0A%20%20font-weight:%20400;%0A%20%20line-height:%201.5;%0A%20%20background-color:%20$color-primary-dark;%0A%0A%20%20/%20min-height:%20100vh;%0A%20%20/%20height:%20100vh;%0A%7D%0Aa%20%7B%0A%20%20color:%20var(--color-theme);%0A%7D%0Abutton:focus,%0A.btn.focus,%0A.btn:focus,%0A.btn:hover,%0Aa:focus,%0A.btn.active,%0A.btn:active,%0A.btn:active,%0A.btn:active:focus,%0Aa:active:focus,%0Aa:active%20%7B%0A%20%20outline:%20none;%0A%7D%0Aa:hover%20%7B%0A%20%20text-decoration:%20none;%0A%7D%0Aa:active%20%7B%0A%20%20text-decoration:%20none;%0A%7D%0Aimg%20%7B%0A%20%20object-fit:%20cover;%0A%20%20max-width:%20100%25;%0A%20%20height:%20auto;%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"AAKQ,6HAAA;AACA,0FAAA;AAGR;EACE,mCAAA;EACA,gEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACNF;ADSA;EACE,sCAAA;EACA,mEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACPF;ADUA;EACE,sCAAA;EACA,mEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACRF;ADWA;EACE,mCAAA;EACA,gEAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACTF;ACakB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;AD3BF;;AC8BA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;AD3BF;;AC8BA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;AD3BF;;AC8BA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;AD3BF;;AC8BA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;AD3BF;;AC8BA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;AD3BF;;AC8BA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;AD3BF;;AC8BA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;AD3BF;;AC8BA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;AD3BF;;AE1FA;;EAEE,kBAAA;AF6FF;;AE1FA;EACE,sBAAA;EACA,SAAA;AF6FF;;AE3FA;EACE,SAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,yBCtBmB;AHoHrB;;AEzFA;EACE,yBAAA;AF4FF;;AE1FA;;;;;;;;;;;EAWE,aAAA;AF6FF;;AE3FA;EACE,qBAAA;AF8FF;;AE5FA;EACE,qBAAA;AF+FF;;AE7FA;EACE,oBAAA;KAAA,iBAAA;EACA,eAAA;EACA,YAAA;AFgGF","file":"main.css","sourcesContent":["// ===============================\n// TYPOGRAPHY SYSTEM - KRUPALPATEL\n// ===============================\n\n// Google Fonts Imports\n@import url(\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap\");\n\n// Local Font Face Declarations\n@font-face {\n font-family: \"PPSupplySans-Regular\";\n src: url(\"../fonts/PPSupplySans-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplySans-Ultralight\";\n src: url(\"../fonts/PPSupplySans-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplyMono-Ultralight\";\n src: url(\"../fonts/PPSupplyMono-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplyMono-Regular\";\n src: url(\"../fonts/PPSupplyMono-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n// ===============================\n// SCSS FONT VARIABLES\n// ===============================\n\n// Primary Font Family Variables (Body Text)\n$font-primary:\n \"PPSupplySans-Regular\",\n \"Manrope\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n sans-serif;\n$font-primary-light: \"PPSupplySans-Ultralight\", \"Manrope\", sans-serif;\n$font-primary-medium: \"Manrope\", sans-serif;\n$font-primary-bold: \"Manrope\", sans-serif;\n\n// Secondary Font Family Variables (Headings)\n$font-secondary: \"Space Grotesk\", \"Manrope\", sans-serif;\n$font-secondary-800: \"Space Grotesk\", sans-serif;\n\n// Monospace Font Family Variables (Code/Technical)\n$font-mono: \"PPSupplyMono-Regular\", \"SF Mono\", \"Monaco\", \"Inconsolata\",\n \"Fira Code\", \"Droid Sans Mono\", \"Courier New\", monospace;\n$font-mono-light: \"PPSupplyMono-Ultralight\", \"SF Mono\", monospace;\n\n// Display Font Family Variables (Special Use)\n$font-display: \"Orbitron\", \"Space Grotesk\", sans-serif;\n\n// Individual Font Names (for specific use cases)\n$font-ppsupply-sans-regular: \"PPSupplySans-Regular\";\n$font-ppsupply-sans-ultralight: \"PPSupplySans-Ultralight\";\n$font-ppsupply-mono-regular: \"PPSupplyMono-Regular\";\n$font-ppsupply-mono-ultralight: \"PPSupplyMono-Ultralight\";\n$font-manrope: \"Manrope\";\n$font-space-grotesk: \"Space Grotesk\";\n$font-orbitron: \"Orbitron\";\n\n// Line Height Variables\n$line-height-none: 1;\n$line-height-tight: 1.2;\n$line-height-snug: 1.3;\n$line-height-normal: 1.5;\n$line-height-relaxed: 1.75;\n$line-height-loose: 2;\n\n// Letter Spacing Variables\n$letter-spacing-tighter: -0.05em;\n$letter-spacing-tight: -0.025em;\n$letter-spacing-normal: 0em;\n$letter-spacing-wide: 0.025em;\n$letter-spacing-wider: 0.05em;\n$letter-spacing-widest: 0.1em;\n","@import url(\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap\");\n@font-face {\n font-family: \"PPSupplySans-Regular\";\n src: url(\"../fonts/PPSupplySans-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplySans-Ultralight\";\n src: url(\"../fonts/PPSupplySans-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplyMono-Ultralight\";\n src: url(\"../fonts/PPSupplyMono-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplyMono-Regular\";\n src: url(\"../fonts/PPSupplyMono-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\nhtml,\nbody {\n overflow-x: hidden;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n}\n\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n background-color: #06234f;\n}\n\na {\n color: var(--color-theme);\n}\n\nbutton:focus,\n.btn.focus,\n.btn:focus,\n.btn:hover,\na:focus,\n.btn.active,\n.btn:active,\n.btn:active,\n.btn:active:focus,\na:active:focus,\na:active {\n outline: none;\n}\n\na:hover {\n text-decoration: none;\n}\n\na:active {\n text-decoration: none;\n}\n\nimg {\n object-fit: cover;\n max-width: 100%;\n height: auto;\n}","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","@use \"./fonts.scss\" as *;\n@use \"./variables.scss\" as *;\n@use \"./typography.scss\" as *;\n@use \"./mixins/breakpoint.scss\" as *;\n@use \"./mixins/mixins.scss\" as *;\n@use \"./color.scss\" as *;\n\nhtml,\nbody {\n overflow-x: hidden;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n}\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n background-color: $color-primary-dark;\n\n // min-height: 100vh;\n // height: 100vh;\n}\na {\n color: var(--color-theme);\n}\nbutton:focus,\n.btn.focus,\n.btn:focus,\n.btn:hover,\na:focus,\n.btn.active,\n.btn:active,\n.btn:active,\n.btn:active:focus,\na:active:focus,\na:active {\n outline: none;\n}\na:hover {\n text-decoration: none;\n}\na:active {\n text-decoration: none;\n}\nimg {\n object-fit: cover;\n max-width: 100%;\n height: auto;\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap"); @font-face { font-family: "PPSupplySans-Regular"; src: url("../fonts/PPSupplySans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplySans-Ultralight"; src: url("../fonts/PPSupplySans-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplyMono-Ultralight"; src: url("../fonts/PPSupplyMono-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplyMono-Regular"; src: url("../fonts/PPSupplyMono-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } html, body { overflow-x: hidden; } * { box-sizing: border-box; margin: 0; } body { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 16px; font-weight: 400; line-height: 1.5; background-color: #06234f; } a { color: var(--color-theme); } button:focus, .btn.focus, .btn:focus, .btn:hover, a:focus, .btn.active, .btn:active, .btn:active, .btn:active:focus, a:active:focus, a:active { outline: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } img { -o-object-fit: cover; object-fit: cover; max-width: 100%; height: auto; } /*# sourceMappingURL=main.css.map */ {"version":3,"sources":["page.css","data:;charset=utf-8,/%20@mixin%20breakpoint($size)%20%7B%0A/%20%20%20@media%20only%20screen%20and%20(max-width:%20$size%20+%20px)%20%7B%0A/%20%20%20%20%20@content;%0A/%20%20%20%7D%0A/%20%7D%0A.text-block%20%7B%0A%20%20position:%20relative;%0A%20%20z-index:%205;%0A%20%20h4%20%7B%0A%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20color:%20var(--color-theme);%0A%20%20%20%20margin-bottom:%2020px;%0A%20%20%20%20/%20@include%20breakpoint(767)%20%7B%0A%20%20%20%20/%20%20%20margin-bottom:%2015px;%0A%20%20%20%20/%20%7D%0A%20%20%7D%0A%20%20h2%20%7B%0A%20%20%20%20margin-bottom:%2015px;%0A%20%20%20%20font-size:%2040px;%0A%20%20%20%20color:%20%23fff;%0A%20%20%20%20/%20@include%20breakpoint(767)%20%7B%0A%20%20%20%20/%20%20%20margin-bottom:%2024px;%0A%20%20%20%20/%20%7D%0A%20%20%7D%0A%20%20h1%20%7B%0A%20%20%20%20margin-bottom:%2015px;%0A%20%20%20%20font-size:%2060px;%0A%20%20%20%20color:%20%23fff;%0A%20%20%20%20/%20@include%20breakpoint(767)%20%7B%0A%20%20%20%20/%20%20%20margin-bottom:%2024px;%0A%20%20%20%20/%20%7D%0A%20%20%7D%0A%20%20h3%20%7B%0A%20%20%20%20color:%20var(--color-theme);%0A%20%20%20%20margin-bottom:%2015px;%0A%20%20%20%20/%20@include%20breakpoint(767)%20%7B%0A%20%20%20%20/%20%20%20margin-bottom:%2024px;%0A%20%20%20%20/%20%7D%0A%20%20%7D%0A%20%20p%20%7B%0A%20%20%20%20margin-bottom:%2025px;%0A%20%20%20%20color:%20%23cfd7f1;%0A%20%20%20%20font-size:%2020px;%0A%20%20%20%20/%20@include%20breakpoint(767)%20%7B%0A%20%20%20%20/%20%20%20margin-bottom:%2020px;%0A%20%20%20%20/%20%7D%0A%20%20%20%20strong%20%7B%0A%20%20%20%20%20%20font-family:%20var(--font-primary-bold);%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.btn%20%7B%0A%20%20%20%20margin-top:%2015px;%0A%20%20%20%20/%20@include%20breakpoint(767)%20%7B%0A%20%20%20%20/%20%20%20margin-top:%2010px;%0A%20%20%20%20/%20%7D%0A%20%20%7D%0A%7D%0A.contact-block%20%7B%0A%20%20position:%20relative;%0A%20%20z-index:%201;%0A%20%20background:%20var(--color-black);%0A%20%20padding:%2050px;%0A%20%20/%20%20%20@include%20breakpoint(991)%20%7B%0A%20%20/%20%20%20%20%20padding:%2030px;%0A%20%20/%20%20%20%7D%0A%20%20label%20%7B%0A%20%20%20%20color:%20var(--color-white);%0A%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20font-size:%2011px;%0A%20%20%20%20letter-spacing:%201px;%0A%20%20%20%20width:%20100%25;%0A%20%20%7D%0A%20%20.wpcf7-form-control-wrap%20%7B%0A%20%20%20%20margin-bottom:%2010px;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20display:%20block;%0A%20%20%7D%0A%20%20.wpcf7-text,%0A%20%20.wpcf7-email,%0A%20%20.wpcf7-textarea%20%7B%0A%20%20%20%20background:%20transparent;%0A%20%20%20%20border:%20none;%0A%20%20%20%20border-bottom:%201px%20solid%20var(--color-theme);%0A%20%20%20%20color:%20var(--color-white);%0A%20%20%20%20font-size:%2016px;%0A%20%20%20%20padding:%200px%200%200px%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20&:focus-visible%20%7B%0A%20%20%20%20%20%20box-shadow:%20none;%0A%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.wpcf7-textarea%20%7B%0A%20%20%20%20border:%201px%20solid%20var(--color-theme);%0A%20%20%20%20height:%20135px;%0A%20%20%20%20padding:%200%205px;%0A%20%20%7D%0A%20%20.wpcf7-checkbox%20%7B%0A%20%20%20%20border-bottom:%20none;%0A%20%20%20%20.wpcf7-list-item%20%7B%0A%20%20%20%20%20%20margin-left:%200;%0A%20%20%20%20%20%20label%20%7B%0A%20%20%20%20%20%20%20%20text-transform:%20none;%0A%20%20%20%20%20%20%20%20font-size:%209px;%0A%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20letter-spacing:%200px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20input%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20left:%20-9999px;%0A%20%20%20%20%20%20%20%20&%20+%20.wpcf7-list-item-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20padding-left:%2030px;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2020px;%0A%20%20%20%20%20%20%20%20%20%20&:after,%0A%20%20%20%20%20%20%20%20%20%20&:before%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content:%20%22%22;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing:%20border-box;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20&:before%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%20-2px;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20border:%201px%20solid%20var(--color-theme);%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20&:after%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%202px;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%204px;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%208px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%208px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20var(--color-theme);%0A%20%20%20%20%20%20%20%20%20%20%20%20transition:%20all%200.2s;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20input:not(:checked)%20%7B%0A%20%20%20%20%20%20%20%20&%20+%20.wpcf7-list-item-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20&:after%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(0.01);%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20input:checked%20%7B%0A%20%20%20%20%20%20%20%20&%20+%20.wpcf7-list-item-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20&:after%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(1);%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.btn-wrap%20%7B%0A%20%20%20%20position:%20relative;%0A%20%20%20%20text-align:%20right;%0A%20%20%20%20/%20@include%20breakpoint(767)%20%7B%0A%20%20%20%20/%20%20%20text-align:%20center;%0A%20%20%20%20/%20%7D%0A%20%20%20%20p%20%7B%0A%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%7D%0A%20%20%20%20.wpcf7-spinner%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20top:%208px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.wpcf7-not-valid-tip%20%7B%0A%20%20%20%20font-size:%2010px;%0A%20%20%20%20text-transform:%20none;%0A%20%20%20%20letter-spacing:%200;%0A%20%20%7D%0A%7D%0A.home%20%7B%0A%20%20.video-section%20+%20.text-section%20%7B%0A%20%20%20%20padding-bottom:%2055px;%0A%20%20%7D%0A%7D%0A.text-section.section-padding%20%7B%0A%20%20padding-bottom:%20var(--section-padding-small);%0A%7D%0A%0A%23smooth-wrapper%20%7B%0A%20%20position:%20relative;%20/%20%E2%86%90%20Keep%20as%20relative%0A%20%20width:%20100%25;%0A%20%20height:%20100vh;%20/%20%E2%86%90%20ADD:%20Required%20for%20ScrollSmoother%0A%20%20overflow:%20hidden;%0A%7D%0A%0A%23smooth-content%20%7B%0A%20%20position:%20relative;%0A%20%20width:%20100%25;%0A%20%20will-change:%20transform;%0A%20%20padding-top:%20107px;%0A%20%20/*%20transform:%20none%20!important;%20*/%0A%7D%0A%0A.layout-wrapper%20%7B%0A%20%20display:%20flex;%0A%20%20min-height:%20100vh;%0A%0A%20%20/*%20Sidebar%20*/%0A%20%20.sidebar-wrp%20%7B%0A%20%20%20%20width:%20auto;%0A%20%20%20%20height:%20100vh;%0A%20%20%20%20z-index:%20100;%0A%20%20%7D%0A%0A%20%20/*%20Main%20Content%20Wrapper%20*/%0A%20%20.main-content-wrapper%20%7B%0A%20%20%20%20flex:%201;%0A%20%20%20%20margin-left:%20123px;%0A%20%20%20%20display:%20flex;%0A%20%20%20%20flex-direction:%20column;%0A%20%20%20%20min-height:%20100vh;%0A%20%20%20%20width:%20stretch;%0A%0A%20%20%20%20/*%20Main%20Content%20*/%0A%20%20%20%20.main-content%20%7B%0A%20%20%20%20%20%20flex:%201;%0A%20%20%20%20%7D%0A%20%20%20%20/*%20Footer%20*/%0A%20%20%20%20.footer-content%20%7B%0A%20%20%20%20%20%20margin-top:%20auto;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A.blog-content,%0A.blogHeadingDetails%20%7B%0A%20%20/%20Typography%20scale%20(fluid)%0A%20%20h1%20%7B%0A%20%20%20%20font-size:%20clamp(32px,%205vw,%2064px);%0A%20%20%20%20color:%20%2364e4cb;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20margin-bottom:%200;%0A%20%20%20%20font-weight:%20500;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%7D%0A%0A%20%20h2%20%7B%0A%20%20%20%20font-size:%20clamp(26px,%204vw,%2040px);%0A%20%20%20%20color:%20%23fff;%0A%20%20%20%20line-height:%201.3;%0A%20%20%20%20margin:%2024px%200%2012px;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%7D%0A%0A%20%20h3%20%7B%0A%20%20%20%20font-size:%20clamp(22px,%203vw,%2030px);%0A%20%20%20%20color:%20%23fff;%0A%20%20%20%20margin:%2020px%200%2010px;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%7D%0A%0A%20%20h4%20%7B%0A%20%20%20%20font-size:%20clamp(18px,%202.5vw,%2024px);%0A%20%20%20%20color:%20%23fff;%0A%20%20%20%20margin:%2016px%200%208px;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%7D%0A%0A%20%20h5%20%7B%0A%20%20%20%20font-size:%20clamp(16px,%202vw,%2020px);%0A%20%20%20%20color:%20%23fff;%0A%20%20%20%20margin:%2012px%200%206px;%0A%20%20%7D%0A%0A%20%20span%20%7B%0A%20%20%20%20color:%20%23cfd7f1;%0A%20%20%20%20font-size:%20clamp(16px,%201.5vw,%2020px);%0A%20%20%20%20display:%20block;%0A%20%20%20%20margin-bottom:%208px;%0A%20%20%7D%0A%0A%20%20p%20%7B%0A%20%20%20%20color:%20%23cfd7f1;%0A%20%20%20%20font-size:%20clamp(16px,%201.5vw,%2020px);%0A%20%20%20%20line-height:%201.5;%0A%20%20%20%20margin-bottom:%2020px;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%7D%0A%0A%20%20a%20%7B%0A%20%20%20%20color:%20%2300e5cc;%0A%20%20%20%20text-decoration:%20none;%0A%20%20%20%20font-size:%20inherit;%0A%0A%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20text-decoration:%20underline;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20ul,%0A%20%20ol%20%7B%0A%20%20%20%20margin:%2016px%200;%0A%20%20%20%20padding-left:%2020px;%0A%0A%20%20%20%20li%20%7B%0A%20%20%20%20%20%20color:%20%23fff;%0A%20%20%20%20%20%20font-size:%2020px;%0A%20%20%20%20%20%20margin-bottom:%206px;%0A%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20img%20%7B%0A%20%20%20%20width:%20auto;%0A%20%20%20%20height:%20auto;%0A%20%20%20%20margin:%2024px%200;%0A%20%20%7D%0A%0A%20%20pre%20%7B%0A%20%20%20%20background:%20%230d1b2a;%0A%20%20%20%20color:%20%2300e5cc;%0A%20%20%20%20padding:%2020px;%0A%20%20%20%20border-radius:%2012px;%0A%20%20%20%20overflow-x:%20auto;%0A%20%20%20%20margin:%2024px%200;%0A%20%20%20%20font-size:%2014px;%0A%20%20%20%20line-height:%201.6;%0A%20%20%7D%0A%0A%20%20code%20%7B%0A%20%20%20%20font-family:%20%22Courier%20New%22,%20monospace;%0A%20%20%7D%0A%0A%20%20/%20Inline%20code%0A%20%20p%20code%20%7B%0A%20%20%20%20background:%20rgba(255,%20255,%20255,%200.1);%0A%20%20%20%20padding:%202px%206px;%0A%20%20%20%20border-radius:%206px;%0A%20%20%20%20color:%20%2300e5cc;%0A%20%20%7D%0A%7D%0A%0A/%20post-navigation%0A.post-navigation%20%7B%0A%20%20.nav-links%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20gap:%2010px;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20border-top:%201px%20solid%20%2364e4cb;%0A%0A%20%20%20%20.nav-previous,%0A%20%20%20%20.nav-next%20%7B%0A%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20max-width:%2048%25;%0A%0A%20%20%20%20%20%20a%20%7B%0A%20%20%20%20%20%20%20%20font-size:%2018px;%0A%20%20%20%20%20%20%20%20color:%20%2364e4cb;%0A%20%20%20%20%20%20%20%20font-weight:%20500%20!important;%0A%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%206px;%0A%20%20%20%20%20%20%20%20transition:%0A%20%20%20%20%20%20%20%20%20%20gap%200.3s%20ease,%0A%20%20%20%20%20%20%20%20%20%20opacity%200.3s%20ease;%0A%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20line-height:%201.4;%0A%0A%20%20%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%20%20%20%20%20%20%20%20%20%20opacity:%200.8;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20/%20%E2%86%90%20Arrow%20BEFORE%20the%20text%20for%20Previous%0A%20%20%20%20.nav-previous%20a::before%20%7B%0A%20%20%20%20%20%20content:%20%22%E2%86%90%22;%0A%20%20%20%20%20%20font-size:%2040px;%20/%20bigger%20arrow%0A%20%20%20%20%20%20line-height:%201;%0A%20%20%20%20%20%20height:%2020px;%0A%20%20%20%20%20%20color:%20%2364e4cb;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20align-self:%20center;%20/%20force%20vertical%20center%0A%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20transition:%20transform%200.3s%20ease;%0A%20%20%20%20%20%20margin-top:%20-12px;%0A%20%20%20%20%20%20justify-content:%20center;%20/%20optical%20alignment%20fix%0A%20%20%20%20%7D%0A%0A%20%20%20%20.nav-previous%20a:hover::before%20%7B%0A%20%20%20%20%20%20transform:%20translateX(-4px);%0A%20%20%20%20%7D%0A%0A%20%20%20%20/%20%E2%86%92%20Arrow%20AFTER%20the%20text%20for%20Next%0A%20%20%20%20.nav-next%20a::after%20%7B%0A%20%20%20%20%20%20content:%20%22%E2%86%92%22;%0A%20%20%20%20%20%20font-size:%2040px;%20/%20bigger%20arrow%0A%20%20%20%20%20%20line-height:%201;%0A%20%20%20%20%20%20height:%2020px;%0A%20%20%20%20%20%20color:%20%2364e4cb;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20align-self:%20center;%20/%20force%20vertical%20center%0A%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20transition:%20transform%200.3s%20ease;%0A%20%20%20%20%20%20margin-top:%20-12px;%0A%20%20%20%20%20%20justify-content:%20center;%20/%20optical%20alignment%20fix%0A%20%20%20%20%7D%0A%0A%20%20%20%20.nav-next%20a:hover::after%20%7B%0A%20%20%20%20%20%20transform:%20translateX(4px);%0A%20%20%20%20%7D%0A%0A%20%20%20%20/%20Right-align%20the%20Next%20link%0A%20%20%20%20.nav-next%20%7B%0A%20%20%20%20%20%20margin-left:%20auto;%0A%0A%20%20%20%20%20%20a%20%7B%0A%20%20%20%20%20%20%20%20justify-content:%20flex-end;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A.enlighter%20span%20%7B%0A%20%20display:%20inline-block;%0A%20%20font-size:%201.45em;%0A%7D%0A.enlighter-code%20%7B%0A%20%20overflow:%20hidden;%0A%20%20padding:%2020px%2010px%2020px%205px;%0A%7D%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.post-navigation%20%7B%0A%20%20%20%20.nav-links%20%7B%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20%20%20gap:%200px;%0A%0A%20%20%20%20%20%20.nav-previous,%0A%20%20%20%20%20%20.nav-next%20%7B%0A%20%20%20%20%20%20%20%20padding:%2010px;%0A%20%20%20%20%20%20%20%20max-width:%20100%25;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20/%20On%20mobile%20stack:%20Previous%20on%20left,%20Next%20on%20right-aligned%0A%20%20%20%20%20%20.nav-next%20%7B%0A%20%20%20%20%20%20%20%20margin-left:%200;%0A%0A%20%20%20%20%20%20%20%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20justify-content:%20flex-end;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.layout-wrapper%20%7B%0A%20%20%20%20.main-content-wrapper%20%7B%0A%20%20%20%20%20%20margin-left:%200px;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"],"names":[],"mappings":"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","file":"page.css","sourcesContent":["@charset \"UTF-8\";\n.text-block {\n position: relative;\n z-index: 5;\n}\n.text-block h4 {\n text-transform: uppercase;\n color: var(--color-theme);\n margin-bottom: 20px;\n}\n.text-block h2 {\n margin-bottom: 15px;\n font-size: 40px;\n color: #fff;\n}\n.text-block h1 {\n margin-bottom: 15px;\n font-size: 60px;\n color: #fff;\n}\n.text-block h3 {\n color: var(--color-theme);\n margin-bottom: 15px;\n}\n.text-block p {\n margin-bottom: 25px;\n color: #cfd7f1;\n font-size: 20px;\n}\n.text-block p strong {\n font-family: var(--font-primary-bold);\n}\n.text-block .btn {\n margin-top: 15px;\n}\n\n.contact-block {\n position: relative;\n z-index: 1;\n background: var(--color-black);\n padding: 50px;\n}\n.contact-block label {\n color: var(--color-white);\n text-transform: uppercase;\n font-size: 11px;\n letter-spacing: 1px;\n width: 100%;\n}\n.contact-block .wpcf7-form-control-wrap {\n margin-bottom: 10px;\n width: 100%;\n display: block;\n}\n.contact-block .wpcf7-text,\n.contact-block .wpcf7-email,\n.contact-block .wpcf7-textarea {\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--color-theme);\n color: var(--color-white);\n font-size: 16px;\n padding: 0px 0 0px 0;\n width: 100%;\n}\n.contact-block .wpcf7-text:focus-visible,\n.contact-block .wpcf7-email:focus-visible,\n.contact-block .wpcf7-textarea:focus-visible {\n box-shadow: none;\n outline: none;\n}\n.contact-block .wpcf7-textarea {\n border: 1px solid var(--color-theme);\n height: 135px;\n padding: 0 5px;\n}\n.contact-block .wpcf7-checkbox {\n border-bottom: none;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item {\n margin-left: 0;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item label {\n text-transform: none;\n font-size: 9px;\n cursor: pointer;\n letter-spacing: 0px;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input {\n position: absolute;\n left: -9999px;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label {\n position: relative;\n padding-left: 30px;\n line-height: 20px;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:after, .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:before {\n border-radius: 50%;\n top: -2px;\n left: 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--color-theme);\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:after {\n border-radius: 50%;\n top: 2px;\n left: 4px;\n width: 8px;\n height: 8px;\n background: var(--color-theme);\n transition: all 0.2s;\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input:not(:checked) + .wpcf7-list-item-label:after {\n opacity: 0;\n transform: scale(0.01);\n}\n.contact-block .wpcf7-checkbox .wpcf7-list-item input:checked + .wpcf7-list-item-label:after {\n opacity: 1;\n transform: scale(1);\n}\n.contact-block .btn-wrap {\n position: relative;\n text-align: right;\n}\n.contact-block .btn-wrap p {\n margin: 0;\n}\n.contact-block .btn-wrap .wpcf7-spinner {\n position: absolute;\n right: 0;\n top: 8px;\n}\n.contact-block .wpcf7-not-valid-tip {\n font-size: 10px;\n text-transform: none;\n letter-spacing: 0;\n}\n\n.home .video-section + .text-section {\n padding-bottom: 55px;\n}\n\n.text-section.section-padding {\n padding-bottom: var(--section-padding-small);\n}\n\n#smooth-wrapper {\n position: relative;\n width: 100%;\n height: 100vh;\n overflow: hidden;\n}\n\n#smooth-content {\n position: relative;\n width: 100%;\n will-change: transform;\n padding-top: 107px;\n /* transform: none !important; */\n}\n\n.layout-wrapper {\n display: flex;\n min-height: 100vh;\n /* Sidebar */\n /* Main Content Wrapper */\n}\n.layout-wrapper .sidebar-wrp {\n width: auto;\n height: 100vh;\n z-index: 100;\n}\n.layout-wrapper .main-content-wrapper {\n flex: 1;\n margin-left: 123px;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: stretch;\n /* Main Content */\n /* Footer */\n}\n.layout-wrapper .main-content-wrapper .main-content {\n flex: 1;\n}\n.layout-wrapper .main-content-wrapper .footer-content {\n margin-top: auto;\n}\n\n.blog-content h1,\n.blogHeadingDetails h1 {\n font-size: clamp(32px, 5vw, 64px);\n color: #64e4cb;\n line-height: normal;\n margin-bottom: 0;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.blog-content h2,\n.blogHeadingDetails h2 {\n font-size: clamp(26px, 4vw, 40px);\n color: #fff;\n line-height: 1.3;\n margin: 24px 0 12px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.blog-content h3,\n.blogHeadingDetails h3 {\n font-size: clamp(22px, 3vw, 30px);\n color: #fff;\n margin: 20px 0 10px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-content h4,\n.blogHeadingDetails h4 {\n font-size: clamp(18px, 2.5vw, 24px);\n color: #fff;\n margin: 16px 0 8px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-content h5,\n.blogHeadingDetails h5 {\n font-size: clamp(16px, 2vw, 20px);\n color: #fff;\n margin: 12px 0 6px;\n}\n.blog-content span,\n.blogHeadingDetails span {\n color: #cfd7f1;\n font-size: clamp(16px, 1.5vw, 20px);\n display: block;\n margin-bottom: 8px;\n}\n.blog-content p,\n.blogHeadingDetails p {\n color: #cfd7f1;\n font-size: clamp(16px, 1.5vw, 20px);\n line-height: 1.5;\n margin-bottom: 20px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-content a,\n.blogHeadingDetails a {\n color: #00e5cc;\n text-decoration: none;\n font-size: inherit;\n}\n.blog-content a:hover,\n.blogHeadingDetails a:hover {\n text-decoration: underline;\n}\n.blog-content ul,\n.blog-content ol,\n.blogHeadingDetails ul,\n.blogHeadingDetails ol {\n margin: 16px 0;\n padding-left: 20px;\n}\n.blog-content ul li,\n.blog-content ol li,\n.blogHeadingDetails ul li,\n.blogHeadingDetails ol li {\n color: #fff;\n font-size: 20px;\n margin-bottom: 6px;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-content img,\n.blogHeadingDetails img {\n width: auto;\n height: auto;\n margin: 24px 0;\n}\n.blog-content pre,\n.blogHeadingDetails pre {\n background: #0d1b2a;\n color: #00e5cc;\n padding: 20px;\n border-radius: 12px;\n overflow-x: auto;\n margin: 24px 0;\n font-size: 14px;\n line-height: 1.6;\n}\n.blog-content code,\n.blogHeadingDetails code {\n font-family: \"Courier New\", monospace;\n}\n.blog-content p code,\n.blogHeadingDetails p code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 6px;\n border-radius: 6px;\n color: #00e5cc;\n}\n\n.post-navigation .nav-links {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n width: 100%;\n border-top: 1px solid #64e4cb;\n}\n.post-navigation .nav-links .nav-previous,\n.post-navigation .nav-links .nav-next {\n padding: 20px;\n max-width: 48%;\n}\n.post-navigation .nav-links .nav-previous a,\n.post-navigation .nav-links .nav-next a {\n font-size: 18px;\n color: #64e4cb;\n font-weight: 500 !important;\n font-family: \"Space Grotesk\", sans-serif;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: gap 0.3s ease, opacity 0.3s ease;\n text-decoration: none;\n line-height: 1.4;\n}\n.post-navigation .nav-links .nav-previous a:hover,\n.post-navigation .nav-links .nav-next a:hover {\n gap: 12px;\n opacity: 0.8;\n}\n.post-navigation .nav-links .nav-previous a::before {\n content: \"←\";\n font-size: 40px;\n line-height: 1;\n height: 20px;\n color: #64e4cb;\n display: flex;\n align-items: center;\n align-self: center;\n flex-shrink: 0;\n transition: transform 0.3s ease;\n margin-top: -12px;\n justify-content: center;\n}\n.post-navigation .nav-links .nav-previous a:hover::before {\n transform: translateX(-4px);\n}\n.post-navigation .nav-links .nav-next a::after {\n content: \"→\";\n font-size: 40px;\n line-height: 1;\n height: 20px;\n color: #64e4cb;\n display: flex;\n align-items: center;\n align-self: center;\n flex-shrink: 0;\n transition: transform 0.3s ease;\n margin-top: -12px;\n justify-content: center;\n}\n.post-navigation .nav-links .nav-next a:hover::after {\n transform: translateX(4px);\n}\n.post-navigation .nav-links .nav-next {\n margin-left: auto;\n}\n.post-navigation .nav-links .nav-next a {\n justify-content: flex-end;\n}\n\n.enlighter span {\n display: inline-block;\n font-size: 1.45em;\n}\n\n.enlighter-code {\n overflow: hidden;\n padding: 20px 10px 20px 5px;\n}\n\n@media (max-width: 1200px) {\n .post-navigation .nav-links {\n align-items: center;\n flex-direction: column;\n justify-content: space-between;\n gap: 0px;\n }\n .post-navigation .nav-links .nav-previous,\n .post-navigation .nav-links .nav-next {\n padding: 10px;\n max-width: 100%;\n width: 100%;\n }\n .post-navigation .nav-links .nav-next {\n margin-left: 0;\n }\n .post-navigation .nav-links .nav-next a {\n justify-content: flex-end;\n }\n}\n@media (max-width: 1024px) {\n .layout-wrapper .main-content-wrapper {\n margin-left: 0px;\n width: 100%;\n }\n}","// @mixin breakpoint($size) {\n// @media only screen and (max-width: $size + px) {\n// @content;\n// }\n// }\n.text-block {\n position: relative;\n z-index: 5;\n h4 {\n text-transform: uppercase;\n color: var(--color-theme);\n margin-bottom: 20px;\n // @include breakpoint(767) {\n // margin-bottom: 15px;\n // }\n }\n h2 {\n margin-bottom: 15px;\n font-size: 40px;\n color: #fff;\n // @include breakpoint(767) {\n // margin-bottom: 24px;\n // }\n }\n h1 {\n margin-bottom: 15px;\n font-size: 60px;\n color: #fff;\n // @include breakpoint(767) {\n // margin-bottom: 24px;\n // }\n }\n h3 {\n color: var(--color-theme);\n margin-bottom: 15px;\n // @include breakpoint(767) {\n // margin-bottom: 24px;\n // }\n }\n p {\n margin-bottom: 25px;\n color: #cfd7f1;\n font-size: 20px;\n // @include breakpoint(767) {\n // margin-bottom: 20px;\n // }\n strong {\n font-family: var(--font-primary-bold);\n }\n }\n .btn {\n margin-top: 15px;\n // @include breakpoint(767) {\n // margin-top: 10px;\n // }\n }\n}\n.contact-block {\n position: relative;\n z-index: 1;\n background: var(--color-black);\n padding: 50px;\n // @include breakpoint(991) {\n // padding: 30px;\n // }\n label {\n color: var(--color-white);\n text-transform: uppercase;\n font-size: 11px;\n letter-spacing: 1px;\n width: 100%;\n }\n .wpcf7-form-control-wrap {\n margin-bottom: 10px;\n width: 100%;\n display: block;\n }\n .wpcf7-text,\n .wpcf7-email,\n .wpcf7-textarea {\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--color-theme);\n color: var(--color-white);\n font-size: 16px;\n padding: 0px 0 0px 0;\n width: 100%;\n &:focus-visible {\n box-shadow: none;\n outline: none;\n }\n }\n .wpcf7-textarea {\n border: 1px solid var(--color-theme);\n height: 135px;\n padding: 0 5px;\n }\n .wpcf7-checkbox {\n border-bottom: none;\n .wpcf7-list-item {\n margin-left: 0;\n label {\n text-transform: none;\n font-size: 9px;\n cursor: pointer;\n letter-spacing: 0px;\n }\n input {\n position: absolute;\n left: -9999px;\n & + .wpcf7-list-item-label {\n position: relative;\n padding-left: 30px;\n line-height: 20px;\n &:after,\n &:before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n }\n &:before {\n border-radius: 50%;\n top: -2px;\n left: 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--color-theme);\n }\n &:after {\n border-radius: 50%;\n top: 2px;\n left: 4px;\n width: 8px;\n height: 8px;\n background: var(--color-theme);\n transition: all 0.2s;\n }\n }\n }\n input:not(:checked) {\n & + .wpcf7-list-item-label {\n &:after {\n opacity: 0;\n transform: scale(0.01);\n }\n }\n }\n input:checked {\n & + .wpcf7-list-item-label {\n &:after {\n opacity: 1;\n transform: scale(1);\n }\n }\n }\n }\n }\n .btn-wrap {\n position: relative;\n text-align: right;\n // @include breakpoint(767) {\n // text-align: center;\n // }\n p {\n margin: 0;\n }\n .wpcf7-spinner {\n position: absolute;\n right: 0;\n top: 8px;\n }\n }\n .wpcf7-not-valid-tip {\n font-size: 10px;\n text-transform: none;\n letter-spacing: 0;\n }\n}\n.home {\n .video-section + .text-section {\n padding-bottom: 55px;\n }\n}\n.text-section.section-padding {\n padding-bottom: var(--section-padding-small);\n}\n\n#smooth-wrapper {\n position: relative; // ← Keep as relative\n width: 100%;\n height: 100vh; // ← ADD: Required for ScrollSmoother\n overflow: hidden;\n}\n\n#smooth-content {\n position: relative;\n width: 100%;\n will-change: transform;\n padding-top: 107px;\n /* transform: none !important; */\n}\n\n.layout-wrapper {\n display: flex;\n min-height: 100vh;\n\n /* Sidebar */\n .sidebar-wrp {\n width: auto;\n height: 100vh;\n z-index: 100;\n }\n\n /* Main Content Wrapper */\n .main-content-wrapper {\n flex: 1;\n margin-left: 123px;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: stretch;\n\n /* Main Content */\n .main-content {\n flex: 1;\n }\n /* Footer */\n .footer-content {\n margin-top: auto;\n }\n }\n}\n\n.blog-content,\n.blogHeadingDetails {\n // Typography scale (fluid)\n h1 {\n font-size: clamp(32px, 5vw, 64px);\n color: #64e4cb;\n line-height: normal;\n margin-bottom: 0;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n\n h2 {\n font-size: clamp(26px, 4vw, 40px);\n color: #fff;\n line-height: 1.3;\n margin: 24px 0 12px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n\n h3 {\n font-size: clamp(22px, 3vw, 30px);\n color: #fff;\n margin: 20px 0 10px;\n font-family: \"Space Grotesk\", sans-serif;\n }\n\n h4 {\n font-size: clamp(18px, 2.5vw, 24px);\n color: #fff;\n margin: 16px 0 8px;\n font-family: \"Space Grotesk\", sans-serif;\n }\n\n h5 {\n font-size: clamp(16px, 2vw, 20px);\n color: #fff;\n margin: 12px 0 6px;\n }\n\n span {\n color: #cfd7f1;\n font-size: clamp(16px, 1.5vw, 20px);\n display: block;\n margin-bottom: 8px;\n }\n\n p {\n color: #cfd7f1;\n font-size: clamp(16px, 1.5vw, 20px);\n line-height: 1.5;\n margin-bottom: 20px;\n font-family: \"Space Grotesk\", sans-serif;\n }\n\n a {\n color: #00e5cc;\n text-decoration: none;\n font-size: inherit;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n ul,\n ol {\n margin: 16px 0;\n padding-left: 20px;\n\n li {\n color: #fff;\n font-size: 20px;\n margin-bottom: 6px;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n\n img {\n width: auto;\n height: auto;\n margin: 24px 0;\n }\n\n pre {\n background: #0d1b2a;\n color: #00e5cc;\n padding: 20px;\n border-radius: 12px;\n overflow-x: auto;\n margin: 24px 0;\n font-size: 14px;\n line-height: 1.6;\n }\n\n code {\n font-family: \"Courier New\", monospace;\n }\n\n // Inline code\n p code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 6px;\n border-radius: 6px;\n color: #00e5cc;\n }\n}\n\n// post-navigation\n.post-navigation {\n .nav-links {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n width: 100%;\n border-top: 1px solid #64e4cb;\n\n .nav-previous,\n .nav-next {\n padding: 20px;\n max-width: 48%;\n\n a {\n font-size: 18px;\n color: #64e4cb;\n font-weight: 500 !important;\n font-family: \"Space Grotesk\", sans-serif;\n display: flex;\n align-items: center;\n gap: 6px;\n transition:\n gap 0.3s ease,\n opacity 0.3s ease;\n text-decoration: none;\n line-height: 1.4;\n\n &:hover {\n gap: 12px;\n opacity: 0.8;\n }\n }\n }\n\n // ← Arrow BEFORE the text for Previous\n .nav-previous a::before {\n content: \"←\";\n font-size: 40px; // bigger arrow\n line-height: 1;\n height: 20px;\n color: #64e4cb;\n display: flex;\n align-items: center;\n align-self: center; // force vertical center\n flex-shrink: 0;\n transition: transform 0.3s ease;\n margin-top: -12px;\n justify-content: center; // optical alignment fix\n }\n\n .nav-previous a:hover::before {\n transform: translateX(-4px);\n }\n\n // → Arrow AFTER the text for Next\n .nav-next a::after {\n content: \"→\";\n font-size: 40px; // bigger arrow\n line-height: 1;\n height: 20px;\n color: #64e4cb;\n display: flex;\n align-items: center;\n align-self: center; // force vertical center\n flex-shrink: 0;\n transition: transform 0.3s ease;\n margin-top: -12px;\n justify-content: center; // optical alignment fix\n }\n\n .nav-next a:hover::after {\n transform: translateX(4px);\n }\n\n // Right-align the Next link\n .nav-next {\n margin-left: auto;\n\n a {\n justify-content: flex-end;\n }\n }\n }\n}\n.enlighter span {\n display: inline-block;\n font-size: 1.45em;\n}\n.enlighter-code {\n overflow: hidden;\n padding: 20px 10px 20px 5px;\n}\n@media (max-width: 1200px) {\n .post-navigation {\n .nav-links {\n align-items: center;\n flex-direction: column;\n justify-content: space-between;\n gap: 0px;\n\n .nav-previous,\n .nav-next {\n padding: 10px;\n max-width: 100%;\n width: 100%;\n }\n\n // On mobile stack: Previous on left, Next on right-aligned\n .nav-next {\n margin-left: 0;\n\n a {\n justify-content: flex-end;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .layout-wrapper {\n .main-content-wrapper {\n margin-left: 0px;\n width: 100%;\n }\n }\n}\n"]} @charset "UTF-8"; .text-block { position: relative; z-index: 5; } .text-block h4 { text-transform: uppercase; color: var(--color-theme); margin-bottom: 20px; } .text-block h2 { margin-bottom: 15px; font-size: 40px; color: #fff; } .text-block h1 { margin-bottom: 15px; font-size: 60px; color: #fff; } .text-block h3 { color: var(--color-theme); margin-bottom: 15px; } .text-block p { margin-bottom: 25px; color: #cfd7f1; font-size: 20px; } .text-block p strong { font-family: var(--font-primary-bold); } .text-block .btn { margin-top: 15px; } .contact-block { position: relative; z-index: 1; background: var(--color-black); padding: 50px; } .contact-block label { color: var(--color-white); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; width: 100%; } .contact-block .wpcf7-form-control-wrap { margin-bottom: 10px; width: 100%; display: block; } .contact-block .wpcf7-text, .contact-block .wpcf7-email, .contact-block .wpcf7-textarea { background: transparent; border: none; border-bottom: 1px solid var(--color-theme); color: var(--color-white); font-size: 16px; padding: 0px 0 0px 0; width: 100%; } .contact-block .wpcf7-text:focus-visible, .contact-block .wpcf7-email:focus-visible, .contact-block .wpcf7-textarea:focus-visible { box-shadow: none; outline: none; } .contact-block .wpcf7-textarea { border: 1px solid var(--color-theme); height: 135px; padding: 0 5px; } .contact-block .wpcf7-checkbox { border-bottom: none; } .contact-block .wpcf7-checkbox .wpcf7-list-item { margin-left: 0; } .contact-block .wpcf7-checkbox .wpcf7-list-item label { text-transform: none; font-size: 9px; cursor: pointer; letter-spacing: 0px; } .contact-block .wpcf7-checkbox .wpcf7-list-item input { position: absolute; left: -9999px; } .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label { position: relative; padding-left: 30px; line-height: 20px; } .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:after, .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:before { content: ""; position: absolute; box-sizing: border-box; } .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:before { border-radius: 50%; top: -2px; left: 0; width: 16px; height: 16px; border: 1px solid var(--color-theme); } .contact-block .wpcf7-checkbox .wpcf7-list-item input + .wpcf7-list-item-label:after { border-radius: 50%; top: 2px; left: 4px; width: 8px; height: 8px; background: var(--color-theme); transition: all 0.2s; } .contact-block .wpcf7-checkbox .wpcf7-list-item input:not(:checked) + .wpcf7-list-item-label:after { opacity: 0; transform: scale(0.01); } .contact-block .wpcf7-checkbox .wpcf7-list-item input:checked + .wpcf7-list-item-label:after { opacity: 1; transform: scale(1); } .contact-block .btn-wrap { position: relative; text-align: right; } .contact-block .btn-wrap p { margin: 0; } .contact-block .btn-wrap .wpcf7-spinner { position: absolute; right: 0; top: 8px; } .contact-block .wpcf7-not-valid-tip { font-size: 10px; text-transform: none; letter-spacing: 0; } .home .video-section + .text-section { padding-bottom: 55px; } .text-section.section-padding { padding-bottom: var(--section-padding-small); } #smooth-wrapper { position: relative; width: 100%; height: 100vh; overflow: hidden; } #smooth-content { position: relative; width: 100%; will-change: transform; padding-top: 107px; /* transform: none !important; */ } .layout-wrapper { display: flex; min-height: 100vh; /* Sidebar */ /* Main Content Wrapper */ } .layout-wrapper .sidebar-wrp { width: auto; height: 100vh; z-index: 100; } .layout-wrapper .main-content-wrapper { flex: 1; margin-left: 123px; display: flex; flex-direction: column; min-height: 100vh; width: -webkit-fill-available; width: -moz-available; width: stretch; /* Main Content */ /* Footer */ } .layout-wrapper .main-content-wrapper .main-content { flex: 1; } .layout-wrapper .main-content-wrapper .footer-content { margin-top: auto; } .blog-content h1, .blogHeadingDetails h1 { font-size: clamp(32px, 5vw, 64px); color: #64e4cb; line-height: normal; margin-bottom: 0; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; } .blog-content h2, .blogHeadingDetails h2 { font-size: clamp(26px, 4vw, 40px); color: #fff; line-height: 1.3; margin: 24px 0 12px; font-family: "PPSupplySans-Regular", sans-serif; } .blog-content h3, .blogHeadingDetails h3 { font-size: clamp(22px, 3vw, 30px); color: #fff; margin: 20px 0 10px; font-family: "Space Grotesk", sans-serif; } .blog-content h4, .blogHeadingDetails h4 { font-size: clamp(18px, 2.5vw, 24px); color: #fff; margin: 16px 0 8px; font-family: "Space Grotesk", sans-serif; } .blog-content h5, .blogHeadingDetails h5 { font-size: clamp(16px, 2vw, 20px); color: #fff; margin: 12px 0 6px; } .blog-content span, .blogHeadingDetails span { color: #cfd7f1; font-size: clamp(16px, 1.5vw, 20px); display: block; margin-bottom: 8px; } .blog-content p, .blogHeadingDetails p { color: #cfd7f1; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; margin-bottom: 20px; font-family: "Space Grotesk", sans-serif; } .blog-content a, .blogHeadingDetails a { color: #00e5cc; text-decoration: none; font-size: inherit; } .blog-content a:hover, .blogHeadingDetails a:hover { text-decoration: underline; } .blog-content ul, .blog-content ol, .blogHeadingDetails ul, .blogHeadingDetails ol { margin: 16px 0; padding-left: 20px; } .blog-content ul li, .blog-content ol li, .blogHeadingDetails ul li, .blogHeadingDetails ol li { color: #fff; font-size: 20px; margin-bottom: 6px; font-family: "Space Grotesk", sans-serif; } .blog-content img, .blogHeadingDetails img { width: auto; height: auto; margin: 24px 0; } .blog-content pre, .blogHeadingDetails pre { background: #0d1b2a; color: #00e5cc; padding: 20px; border-radius: 12px; overflow-x: auto; margin: 24px 0; font-size: 14px; line-height: 1.6; } .blog-content code, .blogHeadingDetails code { font-family: "Courier New", monospace; } .blog-content p code, .blogHeadingDetails p code { background: rgba(255, 255, 255, 0.1); padding: 2px 6px; border-radius: 6px; color: #00e5cc; } .post-navigation .nav-links { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border-top: 1px solid #64e4cb; } .post-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-next { padding: 20px; max-width: 48%; } .post-navigation .nav-links .nav-previous a, .post-navigation .nav-links .nav-next a { font-size: 18px; color: #64e4cb; font-weight: 500 !important; font-family: "Space Grotesk", sans-serif; display: flex; align-items: center; gap: 6px; transition: gap 0.3s ease, opacity 0.3s ease; text-decoration: none; line-height: 1.4; } .post-navigation .nav-links .nav-previous a:hover, .post-navigation .nav-links .nav-next a:hover { gap: 12px; opacity: 0.8; } .post-navigation .nav-links .nav-previous a::before { content: "←"; font-size: 40px; line-height: 1; height: 20px; color: #64e4cb; display: flex; align-items: center; align-self: center; flex-shrink: 0; transition: transform 0.3s ease; margin-top: -12px; justify-content: center; } .post-navigation .nav-links .nav-previous a:hover::before { transform: translateX(-4px); } .post-navigation .nav-links .nav-next a::after { content: "→"; font-size: 40px; line-height: 1; height: 20px; color: #64e4cb; display: flex; align-items: center; align-self: center; flex-shrink: 0; transition: transform 0.3s ease; margin-top: -12px; justify-content: center; } .post-navigation .nav-links .nav-next a:hover::after { transform: translateX(4px); } .post-navigation .nav-links .nav-next { margin-left: auto; } .post-navigation .nav-links .nav-next a { justify-content: flex-end; } .enlighter span { display: inline-block; font-size: 1.45em; } .enlighter-code { overflow: hidden; padding: 20px 10px 20px 5px; } @media (max-width: 1200px) { .post-navigation .nav-links { align-items: center; flex-direction: column; justify-content: space-between; gap: 0px; } .post-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-next { padding: 10px; max-width: 100%; width: 100%; } .post-navigation .nav-links .nav-next { margin-left: 0; } .post-navigation .nav-links .nav-next a { justify-content: flex-end; } } @media (max-width: 1024px) { .layout-wrapper .main-content-wrapper { margin-left: 0px; width: 100%; } } /*# sourceMappingURL=page.css.map */ {"version":3,"sources":["file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","typography.css"],"names":[],"mappings":"AA0CkB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACzDF;;AD4DA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACzDF;;AD4DA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;ACzDF;;AD4DA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;ACzDF;;AD4DA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;ACzDF;;AD4DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;ACzDF;;AD4DA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACzDF;;AD4DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACzDF;;AD4DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACzDF","file":"typography.css","sourcesContent":["// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}"]} /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } /*# sourceMappingURL=typography.css.map */ {"version":3,"sources":["data:;charset=utf-8,/%20Base%20Font%20Scale%0A$font-16:%2016px;%20/%0A$font-18:%2018px;%20/%0A$font-20:%2020px;%20/%0A$font-23:%2023px;%20/%0A$font-24:%2024px;%20/%0A$font-28:%2028px;%20/%0A$font-30:%2030px;%20/%0A$font-32:%2032px;%20/%0A$font-34:%2034px;%20/%0A$font-40:%2040px;%20/%0A$font-44:%2044px;%20/%0A$font-48:%2048px;%20/%0A$font-50:%2050px;%20/%0A$font-54:%2054px;%20/%0A$font-64:%2064px;%20/%0A$font-70:%2070px;%20/%0A$font-76:%2076px;%20/%0A$font-80:%2080px;%20/%0A$font-96:%2096px;%20/%0A$font-113:%20113px;%20/%0A%0A/%20==============================%0A/%20HEADING%20FONT%20SIZES%0A/%20==============================%0A%0A$heading-xs:%201.125rem;%20/%2018px%0A$heading-sm:%201.25rem;%20/%2020px%0A$heading-md:%201.5rem;%20/%2024px%0A$heading-lg:%201.875rem;%20/%2030px%0A$heading-xl:%202rem;%20/%2032px%0A$heading-2xl:%202.5rem;%20/%2040px%0A$heading-3xl:%202.75rem;%20/%2044px%0A$heading-4xl:%202.875rem;%20/%2046px%0A$heading-5xl:%203.25rem;%20/%2052px%0A$heading-6xl:%204rem;%20/%2064px%0A$heading-7xl:%204.75rem;%20/%2076px%0A$heading-8xl:%205rem;%20/%2080px%0A$heading-9xl:%206rem;%20/%2096px%0A$heading-10xl:%207.0625rem;%20/%20113px%0A%0A/%20Text%0A$text-base:%201rem;%20/*%2016px%20*/%0A$text-lg:%201.125rem;%20/*%2018px%20*/%0A$text-xl:%201.25rem;%20/*%2020px%20*/%0A$text-xxl:%201.4375rem;%20/*%2023px%20*/%0A%0A/%20Font%20Weight%20Variables%0A$font-weight-thin:%20100;%0A$font-weight-extra-light:%20200;%0A$font-weight-light:%20300;%0A$font-weight-normal:%20400;%0A$font-weight-medium:%20500;%0A$font-weight-semibold:%20600;%0A$font-weight-bold:%20700;%0A$font-weight-extra-bold:%20800;%0A$font-weight-black:%20900;%0A%0A/*%20Line%20Heights%20*/%0A$line-height-tight:%201.2;%0A$line-height-normal:%201.3;%0A$line-height-relaxed:%201.75;%0A%0A/*%20===================%20TYPOGRAPHY%20CLASSES%20===================%20*/%0A.heading-xl%20%7B%0A%20%20font-size:%20var(--font-size-5xl);%0A%20%20font-weight:%20var(--font-weight-bold);%0A%20%20line-height:%20var(--line-height-tight);%0A%20%20color:%20var(--color-black);%0A%7D%0A%0A.heading-lg%20%7B%0A%20%20font-size:%20var(--font-size-4xl);%0A%20%20font-weight:%20var(--font-weight-bold);%0A%20%20line-height:%20var(--line-height-tight);%0A%20%20color:%20var(--color-black);%0A%7D%0A%0A.heading-md%20%7B%0A%20%20font-size:%20var(--font-size-3xl);%0A%20%20font-weight:%20var(--font-weight-semibold);%0A%20%20line-height:%20var(--line-height-tight);%0A%20%20color:%20var(--color-black);%0A%7D%0A%0A.heading-sm%20%7B%0A%20%20font-size:%20var(--font-size-2xl);%0A%20%20font-weight:%20var(--font-weight-semibold);%0A%20%20line-height:%20var(--line-height-normal);%0A%20%20color:%20var(--color-black);%0A%7D%0A%0A.heading-h1%20%7B%0A%20%20font-size:%20var(--font-size-xl);%0A%20%20font-weight:%20var(--font-weight-semibold);%0A%20%20line-height:%20var(--line-height-normal);%0A%20%20color:%20var(--color-dark-gray);%0A%7D%0A%0A.heading-h2%20%7B%0A%20%20font-size:%20var(--font-size-lg);%0A%20%20font-weight:%20var(--font-weight-medium);%0A%20%20line-height:%20var(--line-height-normal);%0A%20%20color:%20var(--color-dark-gray);%0A%7D%0A%0A.text-body%20%7B%0A%20%20font-size:%20var(--font-size-base);%0A%20%20font-weight:%20var(--font-weight-normal);%0A%20%20line-height:%20var(--line-height-normal);%0A%20%20color:%20var(--color-gray);%0A%7D%0A%0A.text-small%20%7B%0A%20%20font-size:%20var(--font-size-sm);%0A%20%20font-weight:%20var(--font-weight-normal);%0A%20%20line-height:%20var(--line-height-normal);%0A%20%20color:%20var(--color-gray);%0A%7D%0A%0A.text-xs%20%7B%0A%20%20font-size:%20var(--font-size-xs);%0A%20%20font-weight:%20var(--font-weight-normal);%0A%20%20line-height:%20var(--line-height-normal);%0A%20%20color:%20var(--color-gray);%0A%7D%0A","variables.css"],"names":[],"mappings":"AA0CkB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACzDF;;AD4DA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACzDF;;AD4DA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;ACzDF;;AD4DA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;ACzDF;;AD4DA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;ACzDF;;AD4DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;ACzDF;;AD4DA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACzDF;;AD4DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACzDF;;AD4DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACzDF","file":"variables.css","sourcesContent":["// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}"]} /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } /*# sourceMappingURL=variables.css.map */ {"version":3,"sources":["about-intro.css","data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A.herobanner%20%7B%0A%20%20margin-top:%2094px;%0A%20%20height:%20auto%20!important;%0A%20%20display:%20flex;%0A%20%20position:%20relative;%0A%20%20min-height:%20600px;%0A%0A%20%20.border-bottom-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background-color:%20$color-primary;%0A%20%20%7D%0A%20%20.herobannerleft%20%7B%0A%20%20%20%20max-width:%2030%25;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20flex-shrink:%200;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.aboutHero%20%7B%0A%20%20%20%20%20%20max-width:%20100%25;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%7D%0A%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.herobannerright%20%7B%0A%20%20%20%20.heroheading%20%7B%0A%20%20%20%20%20%20padding:%2040px;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal%20!important;%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%20%20line-height:%2072px;%0A%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.bannerSubDetail%20%7B%0A%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20line-height:%2033px;%0A%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20padding:%2040px;%0A%20%20%20%20%20%20margin-bottom:%200px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A%23matrix-face-container%20%7B%0A%20%20font-family:%20%22Courier%20New%22,%20monospace;%0A%20%20display:%20flex;%0A%20%20flex-direction:%20column;%0A%20%20align-items:%20center;%0A%20%20width:%20100%25;%0A%20%20min-height:%20400px;%0A%20%20overflow:%20hidden;%20/*%20%E2%86%90%20ADD%20*/%0A%20%20box-sizing:%20border-box;%0A%7D%0A%0A.mf-output%20%7B%0A%20%20/%20width:%20100%25;%0A%20%20max-width:%20100%25;%0A%20%20overflow:%20hidden;%20/*%20%E2%86%90%20ADD:%20clip%20overflowing%20pre%20*/%0A%20%20margin-top:%2016px;%0A%7D%0A%0A.mf-output%20pre%20%7B%0A%20%20margin:%200;%0A%20%20line-height:%201;%0A%20%20/*%20font-size%20set%20dynamically%20by%20JS%20*/%0A%20%20white-space:%20pre;%0A%20%20overflow:%20hidden;%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.herobanner%20%7B%0A%20%20%20%20.herobannerright%20%7B%0A%20%20%20%20%20%20.heroheading%20%7B%0A%20%20%20%20%20%20%20%20padding:%2030px;%0A%0A%20%20%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-5xl;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2062px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bannerSubDetail%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20line-height:%2028px;%0A%20%20%20%20%20%20%20%20padding:%2030px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.herobanner%20%7B%0A%20%20%20%20.herobannerleft%20%7B%0A%20%20%20%20%20%20max-width:%2040%25;%0A%20%20%20%20%7D%0A%20%20%20%20.herobannerright%20%7B%0A%20%20%20%20%20%20.heroheading%20%7B%0A%20%20%20%20%20%20%20%20padding:%2024px;%0A%0A%20%20%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-4xl;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2052px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bannerSubDetail%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20line-height:%2026px;%0A%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.herobanner%20%7B%0A%20%20%20%20margin-top:%2072px;%0A%20%20%20%20flex-direction:%20column;%0A%20%20%20%20min-height:%20auto;%0A%0A%20%20%20%20.herobannerleft%20%7B%0A%20%20%20%20%20%20max-width:%20100%25;%0A%0A%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.herobannerright%20%7B%0A%20%20%20%20%20%20.heroheading%20%7B%0A%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-4xl;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2052px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bannerSubDetail%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20line-height:%2026px;%0A%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,uBAAA;AC0CkB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;AFvDF;;AE0DA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;AFvDF;;AE0DA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;AFvDF;;AE0DA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;AFvDF;;AE0DA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;AFvDF;;AE0DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;AFvDF;;AE0DA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;AFvDF;;AE0DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;AFvDF;;AE0DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;AFvDF;;ACjEA;EACE,gBAAA;EACA,uBAAA;EACA,aAAA;EACA,kBAAA;EACA,iBAAA;ADoEF;AClEE;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,yBEhBY;AHoFhB;AClEE;EACE,cAAA;EACA,WAAA;EACA,cAAA;EACA,kBAAA;ADoEJ;AClEI;EACE,eAAA;EACA,WAAA;ADoEN;ACjEI;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,yBEnCU;AHsGhB;ACjEI;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,yBE3CU;EF4CV,aAAA;ADmEN;AC/DI;EACE,aAAA;EACA,kBAAA;ADiEN;AC/DM;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,yBE1DQ;AH2HhB;AC/DM;EACE,+CAAA;EACA,2BAAA;EACA,eC7BM;ED8BN,iBAAA;EACA,cEjEQ;AHkIhB;AC9DI;EACE,wCAAA;EACA,gBCpBe;EDqBf,iBC5CO;ED6CP,iBAAA;EACA,cEvEE;EFwEF,aAAA;EACA,kBAAA;ADgEN;;AC3DA;EACE,qCAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,iBAAA;EACA,gBAAA,EAAA,UAAA;EACA,sBAAA;AD8DF;;AC3DA;EAEE,eAAA;EACA,gBAAA,EAAA,gCAAA;EACA,gBAAA;AD6DF;;AC1DA;EACE,SAAA;EACA,cAAA;EACA,oCAAA;EACA,gBAAA;EACA,gBAAA;AD6DF;;AC1DA;EAGM;IACE,aAAA;ED2DN;ECzDM;IACE,kBChFI;IDiFJ,iBAAA;ED2DR;ECxDI;IACE,kBC5FK;ID6FL,iBAAA;IACA,aAAA;ED0DN;AACF;ACtDA;EAEI;IACE,cAAA;EDuDJ;ECpDI;IACE,aAAA;EDsDN;ECpDM;IACE,mBCvGI;IDwGJ,iBAAA;EDsDR;ECnDI;IACE,kBClHK;IDmHL,iBAAA;IACA,aAAA;EDqDN;AACF;ACjDA;EACE;IACE,gBAAA;IACA,sBAAA;IACA,gBAAA;EDmDF;ECjDE;IACE,eAAA;EDmDJ;ECjDI;IACE,aAAA;EDmDN;EChDI;IACE,cAAA;EDkDN;EC9CI;IACE,aAAA;EDgDN;EC9CM;IACE,mBCzII;ID0IJ,iBAAA;EDgDR;EC7CI;IACE,kBCpJK;IDqJL,iBAAA;IACA,aAAA;ED+CN;AACF","file":"about-intro.css","sourcesContent":["@charset \"UTF-8\";\n/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.herobanner {\n margin-top: 94px;\n height: auto !important;\n display: flex;\n position: relative;\n min-height: 600px;\n}\n.herobanner .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.herobanner .herobannerleft {\n max-width: 30%;\n width: 100%;\n flex-shrink: 0;\n position: relative;\n}\n.herobanner .herobannerleft .aboutHero {\n max-width: 100%;\n width: 100%;\n}\n.herobanner .herobannerleft .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background-color: #64e4cb;\n}\n.herobanner .herobannerleft .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n display: none;\n}\n.herobanner .herobannerright .heroheading {\n padding: 40px;\n position: relative;\n}\n.herobanner .herobannerright .heroheading .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.herobanner .herobannerright .heroheading .bannerTitle {\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 400 !important;\n font-size: 4rem;\n line-height: 72px;\n color: #64e4cb;\n}\n.herobanner .herobannerright .bannerSubDetail {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 33px;\n color: #ffffff;\n padding: 40px;\n margin-bottom: 0px;\n}\n\n#matrix-face-container {\n font-family: \"Courier New\", monospace;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n min-height: 400px;\n overflow: hidden; /* ← ADD */\n box-sizing: border-box;\n}\n\n.mf-output {\n max-width: 100%;\n overflow: hidden; /* ← ADD: clip overflowing pre */\n margin-top: 16px;\n}\n\n.mf-output pre {\n margin: 0;\n line-height: 1;\n /* font-size set dynamically by JS */\n white-space: pre;\n overflow: hidden;\n}\n\n@media (max-width: 1200px) {\n .herobanner .herobannerright .heroheading {\n padding: 30px;\n }\n .herobanner .herobannerright .heroheading .bannerTitle {\n font-size: 3.25rem;\n line-height: 62px;\n }\n .herobanner .herobannerright .bannerSubDetail {\n font-size: 1.25rem;\n line-height: 28px;\n padding: 30px;\n }\n}\n@media (max-width: 1024px) {\n .herobanner .herobannerleft {\n max-width: 40%;\n }\n .herobanner .herobannerright .heroheading {\n padding: 24px;\n }\n .herobanner .herobannerright .heroheading .bannerTitle {\n font-size: 2.875rem;\n line-height: 52px;\n }\n .herobanner .herobannerright .bannerSubDetail {\n font-size: 1.25rem;\n line-height: 26px;\n padding: 24px;\n }\n}\n@media (max-width: 768px) {\n .herobanner {\n margin-top: 72px;\n flex-direction: column;\n min-height: auto;\n }\n .herobanner .herobannerleft {\n max-width: 100%;\n }\n .herobanner .herobannerleft .border-right {\n display: none;\n }\n .herobanner .herobannerleft .border-bottom-line {\n display: block;\n }\n .herobanner .herobannerright .heroheading {\n padding: 20px;\n }\n .herobanner .herobannerright .heroheading .bannerTitle {\n font-size: 2.875rem;\n line-height: 52px;\n }\n .herobanner .herobannerright .bannerSubDetail {\n font-size: 1.25rem;\n line-height: 26px;\n padding: 20px;\n }\n}","/* Add Block CSS Here */\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.herobanner {\n margin-top: 94px;\n height: auto !important;\n display: flex;\n position: relative;\n min-height: 600px;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n .herobannerleft {\n max-width: 30%;\n width: 100%;\n flex-shrink: 0;\n position: relative;\n\n .aboutHero {\n max-width: 100%;\n width: 100%;\n }\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background-color: $color-primary;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n display: none;\n }\n }\n .herobannerright {\n .heroheading {\n padding: 40px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n .bannerTitle {\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-normal !important;\n font-size: $heading-6xl;\n line-height: 72px;\n color: $color-primary;\n }\n }\n .bannerSubDetail {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n font-size: $heading-md;\n line-height: 33px;\n color: $white;\n padding: 40px;\n margin-bottom: 0px;\n }\n }\n}\n\n#matrix-face-container {\n font-family: \"Courier New\", monospace;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n min-height: 400px;\n overflow: hidden; /* ← ADD */\n box-sizing: border-box;\n}\n\n.mf-output {\n // width: 100%;\n max-width: 100%;\n overflow: hidden; /* ← ADD: clip overflowing pre */\n margin-top: 16px;\n}\n\n.mf-output pre {\n margin: 0;\n line-height: 1;\n /* font-size set dynamically by JS */\n white-space: pre;\n overflow: hidden;\n}\n\n@media (max-width: 1200px) {\n .herobanner {\n .herobannerright {\n .heroheading {\n padding: 30px;\n\n .bannerTitle {\n font-size: $heading-5xl;\n line-height: 62px;\n }\n }\n .bannerSubDetail {\n font-size: $heading-sm;\n line-height: 28px;\n padding: 30px;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .herobanner {\n .herobannerleft {\n max-width: 40%;\n }\n .herobannerright {\n .heroheading {\n padding: 24px;\n\n .bannerTitle {\n font-size: $heading-4xl;\n line-height: 52px;\n }\n }\n .bannerSubDetail {\n font-size: $heading-sm;\n line-height: 26px;\n padding: 24px;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .herobanner {\n margin-top: 72px;\n flex-direction: column;\n min-height: auto;\n\n .herobannerleft {\n max-width: 100%;\n\n .border-right {\n display: none;\n }\n\n .border-bottom-line {\n display: block;\n }\n }\n .herobannerright {\n .heroheading {\n padding: 20px;\n\n .bannerTitle {\n font-size: $heading-4xl;\n line-height: 52px;\n }\n }\n .bannerSubDetail {\n font-size: $heading-sm;\n line-height: 26px;\n padding: 20px;\n }\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} @charset "UTF-8"; /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .herobanner { margin-top: 94px; height: auto !important; display: flex; position: relative; min-height: 600px; } .herobanner .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .herobanner .herobannerleft { max-width: 30%; width: 100%; flex-shrink: 0; position: relative; } .herobanner .herobannerleft .aboutHero { max-width: 100%; width: 100%; } .herobanner .herobannerleft .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #64e4cb; } .herobanner .herobannerleft .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; display: none; } .herobanner .herobannerright .heroheading { padding: 40px; position: relative; } .herobanner .herobannerright .heroheading .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .herobanner .herobannerright .heroheading .bannerTitle { font-family: "PPSupplySans-Regular", sans-serif; font-weight: 400 !important; font-size: 4rem; line-height: 72px; color: #64e4cb; } .herobanner .herobannerright .bannerSubDetail { font-family: "Space Grotesk", sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 33px; color: #ffffff; padding: 40px; margin-bottom: 0px; } #matrix-face-container { font-family: "Courier New", monospace; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 400px; overflow: hidden; /* ← ADD */ box-sizing: border-box; } .mf-output { max-width: 100%; overflow: hidden; /* ← ADD: clip overflowing pre */ margin-top: 16px; } .mf-output pre { margin: 0; line-height: 1; /* font-size set dynamically by JS */ white-space: pre; overflow: hidden; } @media (max-width: 1200px) { .herobanner .herobannerright .heroheading { padding: 30px; } .herobanner .herobannerright .heroheading .bannerTitle { font-size: 3.25rem; line-height: 62px; } .herobanner .herobannerright .bannerSubDetail { font-size: 1.25rem; line-height: 28px; padding: 30px; } } @media (max-width: 1024px) { .herobanner .herobannerleft { max-width: 40%; } .herobanner .herobannerright .heroheading { padding: 24px; } .herobanner .herobannerright .heroheading .bannerTitle { font-size: 2.875rem; line-height: 52px; } .herobanner .herobannerright .bannerSubDetail { font-size: 1.25rem; line-height: 26px; padding: 24px; } } @media (max-width: 768px) { .herobanner { margin-top: 72px; flex-direction: column; min-height: auto; } .herobanner .herobannerleft { max-width: 100%; } .herobanner .herobannerleft .border-right { display: none; } .herobanner .herobannerleft .border-bottom-line { display: block; } .herobanner .herobannerright .heroheading { padding: 20px; } .herobanner .herobannerright .heroheading .bannerTitle { font-size: 2.875rem; line-height: 52px; } .herobanner .herobannerright .bannerSubDetail { font-size: 1.25rem; line-height: 26px; padding: 20px; } } /*# sourceMappingURL=about-intro.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A.mainBanner%20%7B%0A%20%20margin-top:%2094px;%0A%0A%20%20.contactBanner%20%7B%0A%20%20%20%20display:%20block;%0A%0A%20%20%20%20.contactheading%20%7B%0A%20%20%20%20%20%20padding:%2070px;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-8xl;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20line-height:%201.2em;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.formWrapper%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20.contactDetails%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.contactText%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20line-height:%201.4em;%0A%20%20%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.contactInfo%20%7B%0A%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.contactlabel%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20margin-bottom:%208px;%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.contactrow%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20.contactlocation%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%201.4em;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.contactIcon%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2028px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2028px;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20inline-block;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-right:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20vertical-align:%20middle;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.contactForm%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20flex-shrink:%200;%0A%0A%20%20%20%20%20%20.form-Block%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20.input-Row%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.form-Input%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex:%201;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20auto;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.input,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20input%5Btype=%22text%22%5D,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20input%5Btype=%22email%22%5D,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20input%5Btype=%22tel%22%5D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2062px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%200%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20transparent;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-primary;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&::placeholder%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20rgba(229,%20241,%20253,%200.7);%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&:focus%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.form-Input%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%0A%20%20%20%20%20%20%20%20%20%20.textarea%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20150px;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20transparent;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-primary;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20&::placeholder%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20rgba(229,%20241,%20253,%200.7);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20&:focus%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.submitBtn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2060px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20400;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$black;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20/%20Reset%20CF7%20defaults%0A%20%20%20%20%20%20.wpcf7%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20flex:%201;%0A%20%20%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A.wpcf7%20%7B%0A%20%20width:%20100%25;%0A%0A%20%20p%20%7B%0A%20%20%20%20margin:%200;%0A%20%20%7D%0A%7D%0A%0A/%20CF7%20Validation%20wrapper%0A.wpcf7-form-control-wrap%20%7B%0A%20%20width:%20100%25;%0A%20%20height:%20auto;%0A%20%20position:%20relative;%0A%20%20display:%20block;%0A%7D%0A%0A/%20Hide%20default%20validation%20messages%0A.wpcf7-not-valid-tip%20%7B%0A%20%20display:%20none;%0A%7D%0A%0A/%20Response%20messages%0A.wpcf7-response-output%20%7B%0A%20%20margin:%2020px%200%200;%0A%20%20padding:%2015px;%0A%20%20border-radius:%204px;%0A%20%20font-size:%20$text-base;%0A%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20border:%20none;%0A%0A%20%20&.wpcf7-validation-errors%20%7B%0A%20%20%20%20background-color:%20rgba(255,%2087,%2087,%200.1);%0A%20%20%20%20color:%20$error;%0A%20%20%20%20border-left:%204px%20solid%20$error;%0A%20%20%7D%0A%0A%20%20&.wpcf7-mail-sent-ok%20%7B%0A%20%20%20%20background-color:%20rgba(100,%20228,%20203,%200.1);%0A%20%20%20%20color:%20$color-primary;%0A%20%20%20%20border-left:%204px%20solid%20$color-primary;%0A%20%20%7D%0A%0A%20%20&.wpcf7-mail-sent-ng%20%7B%0A%20%20%20%20background-color:%20rgba(255,%2087,%2087,%200.1);%0A%20%20%20%20color:%20$error;%0A%20%20%20%20border-left:%204px%20solid%20$error;%0A%20%20%7D%0A%7D%0A%0A/%20Loading/submitting%20state%0A.wpcf7%20form.submitting%20.submitBtn%20%7B%0A%20%20opacity:%200.6;%0A%20%20pointer-events:%20none;%0A%7D%0A%0A/%20Spinner%0A.wpcf7%20form.submitting%20.submitBtn::after%20%7B%0A%20%20content:%20%22%22;%0A%20%20display:%20inline-block;%0A%20%20width:%2016px;%0A%20%20height:%2016px;%0A%20%20margin-left:%2010px;%0A%20%20border:%202px%20solid%20transparent;%0A%20%20border-top-color:%20$black;%0A%20%20border-radius:%2050%25;%0A%20%20animation:%20spin%200.6s%20linear%20infinite;%0A%7D%0A%0A@keyframes%20spin%20%7B%0A%20%20to%20%7B%0A%20%20%20%20transform:%20rotate(360deg);%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.mainBanner%20%7B%0A%20%20%20%20.contactBanner%20%7B%0A%20%20%20%20%20%20.contactheading%20%7B%0A%20%20%20%20%20%20%20%20padding:%2050px;%0A%0A%20%20%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.mainBanner%20%7B%0A%20%20%20%20.contactBanner%20%7B%0A%20%20%20%20%20%20.contactheading%20%7B%0A%20%20%20%20%20%20%20%20padding:%2050px%2040px;%0A%0A%20%20%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-5xl;%0A%20%20%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.mainBanner%20%7B%0A%20%20%20%20margin-top:%2072px;%0A%20%20%20%20.contactBanner%20%7B%0A%20%20%20%20%20%20.contactheading%20%7B%0A%20%20%20%20%20%20%20%20padding:%2050px%2020px%2046px;%0A%0A%20%20%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-5xl;%0A%20%20%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.formWrapper%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20.contactDetails%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20column-reverse;%0A%0A%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.contactText%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20line-height:%201.3em;%0A%20%20%20%20%20%20%20%20%20%20padding:%2020px%2020px%2010px;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.contactInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20padding:%2010px%2020px%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20.contactlabel%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.contactrow%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20.contactlocation%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.contactIcon%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2025px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2024px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-right:%208px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.mainBanner%20%7B%0A%20%20%20%20.contactBanner%20%7B%0A%20%20%20%20%20%20.contactheading%20%7B%0A%20%20%20%20%20%20%20%20padding:%2038px%2020px%2036px;%0A%0A%20%20%20%20%20%20%20%20.bannerTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.formWrapper%20%7B%0A%20%20%20%20%20%20.contactForm%20%7B%0A%20%20%20%20%20%20%20%20.form-Block%20%7B%0A%20%20%20%20%20%20%20%20%20%20.input-Row%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","contact-form-section.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"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","file":"contact-form-section.css","sourcesContent":["/* Add Block CSS Here */\n\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.mainBanner {\n margin-top: 94px;\n\n .contactBanner {\n display: block;\n\n .contactheading {\n padding: 70px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n .bannerTitle {\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: $text-dark-primary;\n }\n }\n }\n .formWrapper {\n display: flex;\n flex-direction: column;\n\n .contactDetails {\n width: 100%;\n flex-shrink: 0;\n display: flex;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n .border-right {\n width: 1px;\n height: auto;\n background-color: $color-primary;\n }\n .contactText {\n font-size: $text-xxl;\n font-weight: $font-weight-light;\n line-height: 1.4em;\n color: $text-dark-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n padding: 24px;\n }\n\n .contactInfo {\n width: 50%;\n flex-shrink: 0;\n padding: 24px;\n position: relative;\n\n .contactlabel {\n font-size: $text-xxl;\n font-weight: $font-weight-medium;\n margin-bottom: 8px;\n display: block;\n color: $color-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .contactrow {\n display: flex;\n .contactlocation {\n font-size: $text-xxl;\n font-weight: $font-weight-light;\n line-height: 1.4em;\n color: $text-dark-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .contactIcon {\n width: 28px;\n height: 28px;\n display: inline-block;\n margin-right: 16px;\n vertical-align: middle;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n }\n }\n }\n .contactForm {\n width: 100%;\n flex-shrink: 0;\n\n .form-Block {\n display: flex;\n flex-direction: column;\n\n .input-Row {\n display: flex;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n\n p {\n .form-Input {\n flex: 1;\n position: relative;\n display: block;\n height: auto;\n\n .input,\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"] {\n width: 100%;\n height: 62px;\n padding: 0 16px;\n font-size: $heading-sm;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n border: none;\n background-color: transparent;\n color: $text-dark-primary;\n\n &::placeholder {\n color: rgba(229, 241, 253, 0.7);\n }\n &:focus {\n outline: none;\n }\n }\n }\n }\n .border-right {\n width: 1px;\n height: auto;\n background-color: $color-primary;\n }\n }\n .form-Input {\n width: 100%;\n height: auto;\n display: block;\n\n .textarea {\n width: 100%;\n height: 150px;\n padding: 16px;\n font-size: $heading-sm;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n border: none;\n background-color: transparent;\n color: $text-dark-primary;\n\n &::placeholder {\n color: rgba(229, 241, 253, 0.7);\n }\n &:focus {\n outline: none;\n }\n }\n .submitBtn {\n width: 100%;\n height: 60px;\n background-color: $color-primary;\n border: none;\n font-weight: 400;\n color: $black;\n font-size: $heading-sm;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n cursor: pointer;\n }\n }\n }\n\n // Reset CF7 defaults\n .wpcf7 {\n width: 100%;\n\n p {\n margin: 0;\n flex: 1;\n height: auto;\n }\n }\n }\n }\n}\n\n.wpcf7 {\n width: 100%;\n\n p {\n margin: 0;\n }\n}\n\n// CF7 Validation wrapper\n.wpcf7-form-control-wrap {\n width: 100%;\n height: auto;\n position: relative;\n display: block;\n}\n\n// Hide default validation messages\n.wpcf7-not-valid-tip {\n display: none;\n}\n\n// Response messages\n.wpcf7-response-output {\n margin: 20px 0 0;\n padding: 15px;\n border-radius: 4px;\n font-size: $text-base;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n border: none;\n\n &.wpcf7-validation-errors {\n background-color: rgba(255, 87, 87, 0.1);\n color: $error;\n border-left: 4px solid $error;\n }\n\n &.wpcf7-mail-sent-ok {\n background-color: rgba(100, 228, 203, 0.1);\n color: $color-primary;\n border-left: 4px solid $color-primary;\n }\n\n &.wpcf7-mail-sent-ng {\n background-color: rgba(255, 87, 87, 0.1);\n color: $error;\n border-left: 4px solid $error;\n }\n}\n\n// Loading/submitting state\n.wpcf7 form.submitting .submitBtn {\n opacity: 0.6;\n pointer-events: none;\n}\n\n// Spinner\n.wpcf7 form.submitting .submitBtn::after {\n content: \"\";\n display: inline-block;\n width: 16px;\n height: 16px;\n margin-left: 10px;\n border: 2px solid transparent;\n border-top-color: $black;\n border-radius: 50%;\n animation: spin 0.6s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@media (max-width: 1200px) {\n .mainBanner {\n .contactBanner {\n .contactheading {\n padding: 50px;\n\n .bannerTitle {\n font-size: $heading-6xl;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .mainBanner {\n .contactBanner {\n .contactheading {\n padding: 50px 40px;\n\n .bannerTitle {\n font-size: $heading-5xl;\n line-height: 1em;\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .mainBanner {\n margin-top: 72px;\n .contactBanner {\n .contactheading {\n padding: 50px 20px 46px;\n\n .bannerTitle {\n font-size: $heading-5xl;\n line-height: 1em;\n }\n }\n }\n .formWrapper {\n display: flex;\n flex-direction: column;\n\n .contactDetails {\n flex-direction: column-reverse;\n\n .border-right {\n display: none;\n }\n .contactText {\n font-size: $heading-sm;\n line-height: 1.3em;\n padding: 20px 20px 10px;\n }\n\n .contactInfo {\n width: 100%;\n padding: 10px 20px 20px;\n\n .contactlabel {\n font-size: $heading-sm;\n }\n .contactrow {\n display: flex;\n .contactlocation {\n font-size: $heading-sm;\n }\n .contactIcon {\n width: 25px;\n height: 24px;\n margin-right: 8px;\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .mainBanner {\n .contactBanner {\n .contactheading {\n padding: 38px 20px 36px;\n\n .bannerTitle {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n }\n }\n .formWrapper {\n .contactForm {\n .form-Block {\n .input-Row {\n display: flex;\n flex-direction: column;\n }\n }\n }\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.mainBanner {\n margin-top: 94px;\n}\n.mainBanner .contactBanner {\n display: block;\n}\n.mainBanner .contactBanner .contactheading {\n padding: 70px;\n position: relative;\n}\n.mainBanner .contactBanner .contactheading .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.mainBanner .contactBanner .contactheading .bannerTitle {\n font-size: 5rem;\n font-weight: 500;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: #e5f1fd;\n}\n.mainBanner .formWrapper {\n display: flex;\n flex-direction: column;\n}\n.mainBanner .formWrapper .contactDetails {\n width: 100%;\n flex-shrink: 0;\n display: flex;\n position: relative;\n}\n.mainBanner .formWrapper .contactDetails .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.mainBanner .formWrapper .contactDetails .border-right {\n width: 1px;\n height: auto;\n background-color: #64e4cb;\n}\n.mainBanner .formWrapper .contactDetails .contactText {\n font-size: 1.4375rem;\n font-weight: 300;\n line-height: 1.4em;\n color: #e5f1fd;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n padding: 24px;\n}\n.mainBanner .formWrapper .contactDetails .contactInfo {\n width: 50%;\n flex-shrink: 0;\n padding: 24px;\n position: relative;\n}\n.mainBanner .formWrapper .contactDetails .contactInfo .contactlabel {\n font-size: 1.4375rem;\n font-weight: 500;\n margin-bottom: 8px;\n display: block;\n color: #64e4cb;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.mainBanner .formWrapper .contactDetails .contactInfo .contactrow {\n display: flex;\n}\n.mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactlocation {\n font-size: 1.4375rem;\n font-weight: 300;\n line-height: 1.4em;\n color: #e5f1fd;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactIcon {\n width: 28px;\n height: 28px;\n display: inline-block;\n margin-right: 16px;\n vertical-align: middle;\n}\n.mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactIcon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.mainBanner .formWrapper .contactForm {\n width: 100%;\n flex-shrink: 0;\n}\n.mainBanner .formWrapper .contactForm .form-Block {\n display: flex;\n flex-direction: column;\n}\n.mainBanner .formWrapper .contactForm .form-Block .input-Row {\n display: flex;\n position: relative;\n}\n.mainBanner .formWrapper .contactForm .form-Block .input-Row .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input {\n flex: 1;\n position: relative;\n display: block;\n height: auto;\n}\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input .input,\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=text],\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=email],\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=tel] {\n width: 100%;\n height: 62px;\n padding: 0 16px;\n font-size: 1.25rem;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n border: none;\n background-color: transparent;\n color: #e5f1fd;\n}\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input .input::placeholder,\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=text]::placeholder,\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=email]::placeholder,\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=tel]::placeholder {\n color: rgba(229, 241, 253, 0.7);\n}\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input .input:focus,\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=text]:focus,\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=email]:focus,\n.mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=tel]:focus {\n outline: none;\n}\n.mainBanner .formWrapper .contactForm .form-Block .input-Row .border-right {\n width: 1px;\n height: auto;\n background-color: #64e4cb;\n}\n.mainBanner .formWrapper .contactForm .form-Block .form-Input {\n width: 100%;\n height: auto;\n display: block;\n}\n.mainBanner .formWrapper .contactForm .form-Block .form-Input .textarea {\n width: 100%;\n height: 150px;\n padding: 16px;\n font-size: 1.25rem;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n border: none;\n background-color: transparent;\n color: #e5f1fd;\n}\n.mainBanner .formWrapper .contactForm .form-Block .form-Input .textarea::placeholder {\n color: rgba(229, 241, 253, 0.7);\n}\n.mainBanner .formWrapper .contactForm .form-Block .form-Input .textarea:focus {\n outline: none;\n}\n.mainBanner .formWrapper .contactForm .form-Block .form-Input .submitBtn {\n width: 100%;\n height: 60px;\n background-color: #64e4cb;\n border: none;\n font-weight: 400;\n color: #000000;\n font-size: 1.25rem;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n cursor: pointer;\n}\n.mainBanner .formWrapper .contactForm .wpcf7 {\n width: 100%;\n}\n.mainBanner .formWrapper .contactForm .wpcf7 p {\n margin: 0;\n flex: 1;\n height: auto;\n}\n\n.wpcf7 {\n width: 100%;\n}\n.wpcf7 p {\n margin: 0;\n}\n\n.wpcf7-form-control-wrap {\n width: 100%;\n height: auto;\n position: relative;\n display: block;\n}\n\n.wpcf7-not-valid-tip {\n display: none;\n}\n\n.wpcf7-response-output {\n margin: 20px 0 0;\n padding: 15px;\n border-radius: 4px;\n font-size: 1rem;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n border: none;\n}\n.wpcf7-response-output.wpcf7-validation-errors {\n background-color: rgba(255, 87, 87, 0.1);\n color: #ff5757;\n border-left: 4px solid #ff5757;\n}\n.wpcf7-response-output.wpcf7-mail-sent-ok {\n background-color: rgba(100, 228, 203, 0.1);\n color: #64e4cb;\n border-left: 4px solid #64e4cb;\n}\n.wpcf7-response-output.wpcf7-mail-sent-ng {\n background-color: rgba(255, 87, 87, 0.1);\n color: #ff5757;\n border-left: 4px solid #ff5757;\n}\n\n.wpcf7 form.submitting .submitBtn {\n opacity: 0.6;\n pointer-events: none;\n}\n\n.wpcf7 form.submitting .submitBtn::after {\n content: \"\";\n display: inline-block;\n width: 16px;\n height: 16px;\n margin-left: 10px;\n border: 2px solid transparent;\n border-top-color: #000000;\n border-radius: 50%;\n animation: spin 0.6s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@media (max-width: 1200px) {\n .mainBanner .contactBanner .contactheading {\n padding: 50px;\n }\n .mainBanner .contactBanner .contactheading .bannerTitle {\n font-size: 4rem;\n }\n}\n@media (max-width: 1024px) {\n .mainBanner .contactBanner .contactheading {\n padding: 50px 40px;\n }\n .mainBanner .contactBanner .contactheading .bannerTitle {\n font-size: 3.25rem;\n line-height: 1em;\n }\n}\n@media (max-width: 768px) {\n .mainBanner {\n margin-top: 72px;\n }\n .mainBanner .contactBanner .contactheading {\n padding: 50px 20px 46px;\n }\n .mainBanner .contactBanner .contactheading .bannerTitle {\n font-size: 3.25rem;\n line-height: 1em;\n }\n .mainBanner .formWrapper {\n display: flex;\n flex-direction: column;\n }\n .mainBanner .formWrapper .contactDetails {\n flex-direction: column-reverse;\n }\n .mainBanner .formWrapper .contactDetails .border-right {\n display: none;\n }\n .mainBanner .formWrapper .contactDetails .contactText {\n font-size: 1.25rem;\n line-height: 1.3em;\n padding: 20px 20px 10px;\n }\n .mainBanner .formWrapper .contactDetails .contactInfo {\n width: 100%;\n padding: 10px 20px 20px;\n }\n .mainBanner .formWrapper .contactDetails .contactInfo .contactlabel {\n font-size: 1.25rem;\n }\n .mainBanner .formWrapper .contactDetails .contactInfo .contactrow {\n display: flex;\n }\n .mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactlocation {\n font-size: 1.25rem;\n }\n .mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactIcon {\n width: 25px;\n height: 24px;\n margin-right: 8px;\n }\n}\n@media (max-width: 576px) {\n .mainBanner .contactBanner .contactheading {\n padding: 38px 20px 36px;\n }\n .mainBanner .contactBanner .contactheading .bannerTitle {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .mainBanner .formWrapper .contactForm .form-Block .input-Row {\n display: flex;\n flex-direction: column;\n }\n}","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .mainBanner { margin-top: 94px; } .mainBanner .contactBanner { display: block; } .mainBanner .contactBanner .contactheading { padding: 70px; position: relative; } .mainBanner .contactBanner .contactheading .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .mainBanner .contactBanner .contactheading .bannerTitle { font-size: 5rem; font-weight: 500; margin: 0; display: flex; line-height: 1.2em; align-items: center; font-family: "PPSupplySans-Regular", sans-serif; color: #e5f1fd; } .mainBanner .formWrapper { display: flex; flex-direction: column; } .mainBanner .formWrapper .contactDetails { width: 100%; flex-shrink: 0; display: flex; position: relative; } .mainBanner .formWrapper .contactDetails .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .mainBanner .formWrapper .contactDetails .border-right { width: 1px; height: auto; background-color: #64e4cb; } .mainBanner .formWrapper .contactDetails .contactText { font-size: 1.4375rem; font-weight: 300; line-height: 1.4em; color: #e5f1fd; font-family: "PPSupplySans-Regular", sans-serif; padding: 24px; } .mainBanner .formWrapper .contactDetails .contactInfo { width: 50%; flex-shrink: 0; padding: 24px; position: relative; } .mainBanner .formWrapper .contactDetails .contactInfo .contactlabel { font-size: 1.4375rem; font-weight: 500; margin-bottom: 8px; display: block; color: #64e4cb; font-family: "PPSupplySans-Regular", sans-serif; } .mainBanner .formWrapper .contactDetails .contactInfo .contactrow { display: flex; } .mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactlocation { font-size: 1.4375rem; font-weight: 300; line-height: 1.4em; color: #e5f1fd; font-family: "PPSupplySans-Regular", sans-serif; } .mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactIcon { width: 28px; height: 28px; display: inline-block; margin-right: 16px; vertical-align: middle; } .mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactIcon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .mainBanner .formWrapper .contactForm { width: 100%; flex-shrink: 0; } .mainBanner .formWrapper .contactForm .form-Block { display: flex; flex-direction: column; } .mainBanner .formWrapper .contactForm .form-Block .input-Row { display: flex; position: relative; } .mainBanner .formWrapper .contactForm .form-Block .input-Row .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input { flex: 1; position: relative; display: block; height: auto; } .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input .input, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=text], .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=email], .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=tel] { width: 100%; height: 62px; padding: 0 16px; font-size: 1.25rem; font-family: "PPSupplySans-Regular", sans-serif; border: none; background-color: transparent; color: #e5f1fd; } .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input .input::-moz-placeholder, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=text]::-moz-placeholder, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=email]::-moz-placeholder, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=tel]::-moz-placeholder { color: rgba(229, 241, 253, 0.7); } .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input .input::placeholder, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=text]::placeholder, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=email]::placeholder, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=tel]::placeholder { color: rgba(229, 241, 253, 0.7); } .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input .input:focus, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=text]:focus, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=email]:focus, .mainBanner .formWrapper .contactForm .form-Block .input-Row p .form-Input input[type=tel]:focus { outline: none; } .mainBanner .formWrapper .contactForm .form-Block .input-Row .border-right { width: 1px; height: auto; background-color: #64e4cb; } .mainBanner .formWrapper .contactForm .form-Block .form-Input { width: 100%; height: auto; display: block; } .mainBanner .formWrapper .contactForm .form-Block .form-Input .textarea { width: 100%; height: 150px; padding: 16px; font-size: 1.25rem; font-family: "PPSupplySans-Regular", sans-serif; border: none; background-color: transparent; color: #e5f1fd; } .mainBanner .formWrapper .contactForm .form-Block .form-Input .textarea::-moz-placeholder { color: rgba(229, 241, 253, 0.7); } .mainBanner .formWrapper .contactForm .form-Block .form-Input .textarea::placeholder { color: rgba(229, 241, 253, 0.7); } .mainBanner .formWrapper .contactForm .form-Block .form-Input .textarea:focus { outline: none; } .mainBanner .formWrapper .contactForm .form-Block .form-Input .submitBtn { width: 100%; height: 60px; background-color: #64e4cb; border: none; font-weight: 400; color: #000000; font-size: 1.25rem; font-family: "PPSupplySans-Regular", sans-serif; cursor: pointer; } .mainBanner .formWrapper .contactForm .wpcf7 { width: 100%; } .mainBanner .formWrapper .contactForm .wpcf7 p { margin: 0; flex: 1; height: auto; } .wpcf7 { width: 100%; } .wpcf7 p { margin: 0; } .wpcf7-form-control-wrap { width: 100%; height: auto; position: relative; display: block; } .wpcf7-not-valid-tip { display: none; } .wpcf7-response-output { margin: 20px 0 0; padding: 15px; border-radius: 4px; font-size: 1rem; font-family: "PPSupplySans-Regular", sans-serif; border: none; } .wpcf7-response-output.wpcf7-validation-errors { background-color: rgba(255, 87, 87, 0.1); color: #ff5757; border-left: 4px solid #ff5757; } .wpcf7-response-output.wpcf7-mail-sent-ok { background-color: rgba(100, 228, 203, 0.1); color: #64e4cb; border-left: 4px solid #64e4cb; } .wpcf7-response-output.wpcf7-mail-sent-ng { background-color: rgba(255, 87, 87, 0.1); color: #ff5757; border-left: 4px solid #ff5757; } .wpcf7 form.submitting .submitBtn { opacity: 0.6; pointer-events: none; } .wpcf7 form.submitting .submitBtn::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; border: 2px solid transparent; border-top-color: #000000; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1200px) { .mainBanner .contactBanner .contactheading { padding: 50px; } .mainBanner .contactBanner .contactheading .bannerTitle { font-size: 4rem; } } @media (max-width: 1024px) { .mainBanner .contactBanner .contactheading { padding: 50px 40px; } .mainBanner .contactBanner .contactheading .bannerTitle { font-size: 3.25rem; line-height: 1em; } } @media (max-width: 768px) { .mainBanner { margin-top: 72px; } .mainBanner .contactBanner .contactheading { padding: 50px 20px 46px; } .mainBanner .contactBanner .contactheading .bannerTitle { font-size: 3.25rem; line-height: 1em; } .mainBanner .formWrapper { display: flex; flex-direction: column; } .mainBanner .formWrapper .contactDetails { flex-direction: column-reverse; } .mainBanner .formWrapper .contactDetails .border-right { display: none; } .mainBanner .formWrapper .contactDetails .contactText { font-size: 1.25rem; line-height: 1.3em; padding: 20px 20px 10px; } .mainBanner .formWrapper .contactDetails .contactInfo { width: 100%; padding: 10px 20px 20px; } .mainBanner .formWrapper .contactDetails .contactInfo .contactlabel { font-size: 1.25rem; } .mainBanner .formWrapper .contactDetails .contactInfo .contactrow { display: flex; } .mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactlocation { font-size: 1.25rem; } .mainBanner .formWrapper .contactDetails .contactInfo .contactrow .contactIcon { width: 25px; height: 24px; margin-right: 8px; } } @media (max-width: 576px) { .mainBanner .contactBanner .contactheading { padding: 38px 20px 36px; } .mainBanner .contactBanner .contactheading .bannerTitle { font-size: 2.75rem; line-height: 1em; } .mainBanner .formWrapper .contactForm .form-Block .input-Row { display: flex; flex-direction: column; } } /*# sourceMappingURL=contact-form-section.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A.digitalProductSection%20%7B%0A%20%20padding:%200px%20120px;%0A%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20position:%20relative;%0A%0A%20%20.border-bottom-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20top:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%20%20.contentWrapper%20%7B%0A%20%20%20%20margin:%200%20auto;%0A%20%20%20%20text-align:%20center;%0A%20%20%20%20padding:%2050px%200%200px;%0A%0A%20%20%20%20.border-left-dashed%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20left:%20120px;%0A%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20--dash-length:%205px;%0A%20%20%20%20%20%20--gap-length:%205px;%0A%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20to%20bottom,%0A%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20$color-primary%20var(--dash-length),%0A%20%20%20%20%20%20%20%20transparent%20var(--dash-length),%0A%20%20%20%20%20%20%20%20transparent%20calc(var(--dash-length)%20+%20var(--gap-length))%0A%20%20%20%20%20%20);%0A%20%20%20%20%7D%0A%20%20%20%20.border-right-dashed%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20right:%20120px;%0A%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20--dash-length:%205px;%0A%20%20%20%20%20%20--gap-length:%205px;%0A%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20to%20bottom,%0A%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20$color-primary%20var(--dash-length),%0A%20%20%20%20%20%20%20%20transparent%20var(--dash-length),%0A%20%20%20%20%20%20%20%20transparent%20calc(var(--dash-length)%20+%20var(--gap-length))%0A%20%20%20%20%20%20);%0A%20%20%20%20%7D%0A%0A%20%20%20%20.productSectionHeading%20%7B%0A%20%20%20%20%20%20.heading%20%7B%0A%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20font-size:%20$heading-5xl;%0A%20%20%20%20%20%20%20%20letter-spacing:%202px;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplyMono-Regular%22;%0A%20%20%20%20%20%20%20%20max-width:%20700px;%0A%20%20%20%20%20%20%20%20margin:%200%20auto%2040px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-bottom-dashed%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%20212px;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20to%20right,%0A%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20$color-primary%205px,%0A%20%20%20%20%20%20%20%20%20%20transparent%205px,%0A%20%20%20%20%20%20%20%20%20%20transparent%2010px%0A%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.productSectionDescription%20%7B%0A%20%20%20%20%20%20.description%20%7B%0A%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20line-height:%201.4em;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20text-align:%20start;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20padding:%2055px%2055px%2055px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-bottom-dashed%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20bottom:%20116px;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20to%20right,%0A%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20$color-primary%205px,%0A%20%20%20%20%20%20%20%20%20%20transparent%205px,%0A%20%20%20%20%20%20%20%20%20%20transparent%2010px%0A%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20z-index:%202;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.buttonGroup%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20gap:%2030px;%0A%20%20%20%20%20%20padding:%2010px;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-dashed%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%202px;%0A%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20left:%2050%25;%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20to%20bottom,%0A%20%20%20%20%20%20%20%20%20%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%20$color-primary%206px,%0A%20%20%20%20%20%20%20%20%20%20transparent%206px,%0A%20%20%20%20%20%20%20%20%20%20transparent%2012px%0A%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.ctaBtn%20%7B%0A%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20padding:%2032px%2024px;%0A%20%20%20%20%20%20%20%20font-weight:%20bold;%0A%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%0A%20%20%20%20%20%20%20%20&.active%20%7B%0A%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary-dark;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary-dark;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.digitalProductSection%20%7B%0A%20%20%20%20padding:%200px%2070px;%0A%0A%20%20%20%20.contentWrapper%20%7B%0A%20%20%20%20%20%20.border-left-dashed%20%7B%0A%20%20%20%20%20%20%20%20left:%2070px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-right-dashed%20%7B%0A%20%20%20%20%20%20%20%20right:%2070px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.digitalProductSection%20%7B%0A%20%20%20%20padding:%200px%2040px;%0A%0A%20%20%20%20.contentWrapper%20%7B%0A%20%20%20%20%20%20.border-left-dashed%20%7B%0A%20%20%20%20%20%20%20%20left:%2040px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-right-dashed%20%7B%0A%20%20%20%20%20%20%20%20right:%2040px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.digitalProductSection%20%7B%0A%20%20%20%20padding:%200px%2026px;%0A%0A%20%20%20%20.contentWrapper%20%7B%0A%20%20%20%20%20%20.border-left-dashed%20%7B%0A%20%20%20%20%20%20%20%20left:%2026px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-right-dashed%20%7B%0A%20%20%20%20%20%20%20%20right:%2026px;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.productSectionHeading%20%7B%0A%20%20%20%20%20%20%20%20.heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-2xl;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.border-bottom-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20top:%20190px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.productSectionDescription%20%7B%0A%20%20%20%20%20%20%20%20.description%20%7B%0A%20%20%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2044px%2044px%2044px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.digitalProductSection%20%7B%0A%20%20%20%20.contentWrapper%20%7B%0A%20%20%20%20%20%20padding:%2040px%200%2010px;%0A%20%20%20%20%20%20.border-left-dashed%20%7B%0A%20%20%20%20%20%20%20%20left:%2026px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-right-dashed%20%7B%0A%20%20%20%20%20%20%20%20right:%2026px;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.productSectionHeading%20%7B%0A%20%20%20%20%20%20%20%20.heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20padding:%200%206px;%0A%20%20%20%20%20%20%20%20%20%20margin-bottom:%2032px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.border-bottom-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20top:%20161px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.productSectionDescription%20%7B%0A%20%20%20%20%20%20%20%20.description%20%7B%0A%20%20%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2028px;%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align:%20center;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.border-bottom-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20bottom:%20238px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.buttonGroup%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20gap:%2024px;%0A%0A%20%20%20%20%20%20%20%20.border-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20top:%2051%25;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20right,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%205px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%205px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%2010px%0A%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.ctaBtn%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20padding:%2032px%2020px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","digital-innovation-cta.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"AAAA,uBAAA;AC0CkB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AFhEA;EACE,kBAAA;EACA,+CAAA;EACA,kBAAA;AEmEF;AFjEE;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBGdY;ADiFhB;AFjEE;EACE,cAAA;EACA,kBAAA;EACA,mBAAA;AEmEJ;AFjEI;EACE,kBAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,iLAAA;AEmEN;AF3DI;EACE,kBAAA;EACA,MAAA;EACA,YAAA;EACA,UAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,iLAAA;AE6DN;AFnDM;EACE,cGxDQ;EHyDR,kBCxBM;EDyBN,mBAAA;EACA,gBCRa;EDSb,mBAAA;EACA,mCAAA;EACA,gBAAA;EACA,mBAAA;AEqDR;AFnDM;EACE,kBAAA;EACA,UAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,0GAAA;EAOA,UAAA;AE+CR;AF1CQ;EACE,cG9EQ;EH+ER,iBC1DG;ED2DH,kBAAA;EACA,gBCrCW;EDsCX,iBAAA;EACA,wCAAA;EACA,uBAAA;AE4CV;AFzCM;EACE,kBAAA;EACA,aAAA;EACA,OAAA;EACA,WAAA;EACA,yBAAA;EACA,WAAA;EACA,0GAAA;EAOA,UAAA;AEqCR;AFlCI;EACE,aAAA;EACA,WAAA;EACA,SAAA;EACA,aAAA;EACA,kBAAA;AEoCN;AFlCM;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,SAAA;EACA,UAAA;EACA,yGAAA;AEoCR;AF5BM;EACE,UAAA;EACA,iBC1GK;ED2GL,cGpIA;EHqIA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,eAAA;EACA,wCAAA;EACA,qBAAA;AE8BR;AF5BQ;EACE,yBGhJM;EHiJN,cGhJW;AD8KrB;AF5BQ;EACE,yBGpJM;EHqJN,cGpJW;ADkLrB;;AFxBA;EACE;IACE,iBAAA;EE2BF;EFxBI;IACE,UAAA;EE0BN;EFxBI;IACE,WAAA;EE0BN;AACF;AFtBA;EACE;IACE,iBAAA;EEwBF;EFrBI;IACE,UAAA;EEuBN;EFrBI;IACE,WAAA;EEuBN;AACF;AFnBA;EACE;IACE,iBAAA;EEqBF;EFlBI;IACE,UAAA;EEoBN;EFlBI;IACE,WAAA;EEoBN;EFhBM;IACE,iBCvKI;ECyLZ;EFhBM;IACE,UAAA;EEkBR;EFbQ;IACE,oBClKD;IDmKC,uBAAA;EEeV;AACF;AFTA;EAEI;IACE,oBAAA;EEUJ;EFTI;IACE,UAAA;EEWN;EFTI;IACE,WAAA;EEWN;EFPM;IACE,iBCxMG;IDyMH,cAAA;IACA,mBAAA;EESR;EFPM;IACE,UAAA;EESR;EFJQ;IACE,kBCpNC;IDqND,aAAA;IACA,kBAAA;EEMV;EFHM;IACE,aAAA;EEKR;EFFI;IACE,sBAAA;IACA,SAAA;EEIN;EFFM;IACE,QAAA;IACA,OAAA;IACA,WAAA;IACA,WAAA;IACA,0GAAA;EEIR;EFIM;IACE,WAAA;IACA,oBC9NC;ID+ND,kBAAA;EEFR;AACF","file":"digital-innovation-cta.css","sourcesContent":["/* Add Block CSS Here */\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.digitalProductSection {\n padding: 0px 120px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .contentWrapper {\n margin: 0 auto;\n text-align: center;\n padding: 50px 0 0px;\n\n .border-left-dashed {\n position: absolute;\n top: 0;\n left: 120px;\n width: 1px;\n height: 100%;\n --dash-length: 5px;\n --gap-length: 5px;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary var(--dash-length),\n transparent var(--dash-length),\n transparent calc(var(--dash-length) + var(--gap-length))\n );\n }\n .border-right-dashed {\n position: absolute;\n top: 0;\n right: 120px;\n width: 1px;\n height: 100%;\n --dash-length: 5px;\n --gap-length: 5px;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary var(--dash-length),\n transparent var(--dash-length),\n transparent calc(var(--dash-length) + var(--gap-length))\n );\n }\n\n .productSectionHeading {\n .heading {\n color: $color-primary;\n font-size: $heading-5xl;\n letter-spacing: 2px;\n font-weight: $font-weight-medium;\n line-height: normal;\n font-family: \"PPSupplyMono-Regular\";\n max-width: 700px;\n margin: 0 auto 40px;\n }\n .border-bottom-dashed {\n position: absolute;\n top: 212px;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n $color-primary 0,\n $color-primary 5px,\n transparent 5px,\n transparent 10px\n );\n z-index: 1;\n }\n }\n .productSectionDescription {\n .description {\n p {\n color: $text-dark-light;\n font-size: $heading-md;\n line-height: 1.4em;\n font-weight: $font-weight-normal;\n text-align: start;\n font-family: \"Space Grotesk\", sans-serif;\n padding: 55px 55px 55px;\n }\n }\n .border-bottom-dashed {\n position: absolute;\n bottom: 116px;\n left: 0;\n width: 100%;\n text-transform: uppercase;\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n $color-primary 0,\n $color-primary 5px,\n transparent 5px,\n transparent 10px\n );\n z-index: 2;\n }\n }\n .buttonGroup {\n display: flex;\n width: 100%;\n gap: 30px;\n padding: 10px;\n position: relative;\n\n .border-dashed {\n position: absolute;\n top: 2px;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary,\n $color-primary 6px,\n transparent 6px,\n transparent 12px\n );\n }\n .ctaBtn {\n width: 50%;\n font-size: $heading-md;\n color: $white;\n border: none;\n padding: 32px 24px;\n font-weight: bold;\n line-height: normal;\n cursor: pointer;\n font-family: \"Space Grotesk\", sans-serif;\n text-decoration: none;\n\n &.active {\n background-color: $color-primary;\n color: $color-primary-dark;\n }\n &:hover {\n background-color: $color-primary;\n color: $color-primary-dark;\n }\n }\n }\n }\n}\n@media (max-width: 1200px) {\n .digitalProductSection {\n padding: 0px 70px;\n\n .contentWrapper {\n .border-left-dashed {\n left: 70px;\n }\n .border-right-dashed {\n right: 70px;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .digitalProductSection {\n padding: 0px 40px;\n\n .contentWrapper {\n .border-left-dashed {\n left: 40px;\n }\n .border-right-dashed {\n right: 40px;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .digitalProductSection {\n padding: 0px 26px;\n\n .contentWrapper {\n .border-left-dashed {\n left: 26px;\n }\n .border-right-dashed {\n right: 26px;\n }\n\n .productSectionHeading {\n .heading {\n font-size: $heading-2xl;\n }\n .border-bottom-dashed {\n top: 190px;\n }\n }\n .productSectionDescription {\n .description {\n p {\n font-size: $text-xxl;\n padding: 44px 44px 44px;\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .digitalProductSection {\n .contentWrapper {\n padding: 40px 0 10px;\n .border-left-dashed {\n left: 26px;\n }\n .border-right-dashed {\n right: 26px;\n }\n\n .productSectionHeading {\n .heading {\n font-size: $heading-md;\n padding: 0 6px;\n margin-bottom: 32px;\n }\n .border-bottom-dashed {\n top: 161px;\n }\n }\n .productSectionDescription {\n .description {\n p {\n font-size: $heading-sm;\n padding: 28px;\n text-align: center;\n }\n }\n .border-bottom-dashed {\n bottom: 238px;\n }\n }\n .buttonGroup {\n flex-direction: column;\n gap: 24px;\n\n .border-dashed {\n top: 51%;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n $color-primary 0,\n $color-primary 5px,\n transparent 5px,\n transparent 10px\n );\n }\n .ctaBtn {\n width: 100%;\n font-size: $text-xxl;\n padding: 32px 20px;\n }\n }\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.digitalProductSection {\n padding: 0px 120px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n position: relative;\n}\n.digitalProductSection .border-bottom-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.digitalProductSection .contentWrapper {\n margin: 0 auto;\n text-align: center;\n padding: 50px 0 0px;\n}\n.digitalProductSection .contentWrapper .border-left-dashed {\n position: absolute;\n top: 0;\n left: 120px;\n width: 1px;\n height: 100%;\n --dash-length: 5px;\n --gap-length: 5px;\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--gap-length)));\n}\n.digitalProductSection .contentWrapper .border-right-dashed {\n position: absolute;\n top: 0;\n right: 120px;\n width: 1px;\n height: 100%;\n --dash-length: 5px;\n --gap-length: 5px;\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--gap-length)));\n}\n.digitalProductSection .contentWrapper .productSectionHeading .heading {\n color: #64e4cb;\n font-size: 3.25rem;\n letter-spacing: 2px;\n font-weight: 500;\n line-height: normal;\n font-family: \"PPSupplyMono-Regular\";\n max-width: 700px;\n margin: 0 auto 40px;\n}\n.digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed {\n position: absolute;\n top: 212px;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px);\n z-index: 1;\n}\n.digitalProductSection .contentWrapper .productSectionDescription .description p {\n color: #cfd7f1;\n font-size: 1.5rem;\n line-height: 1.4em;\n font-weight: 400;\n text-align: start;\n font-family: \"Space Grotesk\", sans-serif;\n padding: 55px 55px 55px;\n}\n.digitalProductSection .contentWrapper .productSectionDescription .border-bottom-dashed {\n position: absolute;\n bottom: 116px;\n left: 0;\n width: 100%;\n text-transform: uppercase;\n height: 1px;\n background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px);\n z-index: 2;\n}\n.digitalProductSection .contentWrapper .buttonGroup {\n display: flex;\n width: 100%;\n gap: 30px;\n padding: 10px;\n position: relative;\n}\n.digitalProductSection .contentWrapper .buttonGroup .border-dashed {\n position: absolute;\n top: 2px;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: repeating-linear-gradient(to bottom, #64e4cb, #64e4cb 6px, transparent 6px, transparent 12px);\n}\n.digitalProductSection .contentWrapper .buttonGroup .ctaBtn {\n width: 50%;\n font-size: 1.5rem;\n color: #ffffff;\n border: none;\n padding: 32px 24px;\n font-weight: bold;\n line-height: normal;\n cursor: pointer;\n font-family: \"Space Grotesk\", sans-serif;\n text-decoration: none;\n}\n.digitalProductSection .contentWrapper .buttonGroup .ctaBtn.active {\n background-color: #64e4cb;\n color: #06234f;\n}\n.digitalProductSection .contentWrapper .buttonGroup .ctaBtn:hover {\n background-color: #64e4cb;\n color: #06234f;\n}\n\n@media (max-width: 1200px) {\n .digitalProductSection {\n padding: 0px 70px;\n }\n .digitalProductSection .contentWrapper .border-left-dashed {\n left: 70px;\n }\n .digitalProductSection .contentWrapper .border-right-dashed {\n right: 70px;\n }\n}\n@media (max-width: 1024px) {\n .digitalProductSection {\n padding: 0px 40px;\n }\n .digitalProductSection .contentWrapper .border-left-dashed {\n left: 40px;\n }\n .digitalProductSection .contentWrapper .border-right-dashed {\n right: 40px;\n }\n}\n@media (max-width: 768px) {\n .digitalProductSection {\n padding: 0px 26px;\n }\n .digitalProductSection .contentWrapper .border-left-dashed {\n left: 26px;\n }\n .digitalProductSection .contentWrapper .border-right-dashed {\n right: 26px;\n }\n .digitalProductSection .contentWrapper .productSectionHeading .heading {\n font-size: 2.5rem;\n }\n .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed {\n top: 190px;\n }\n .digitalProductSection .contentWrapper .productSectionDescription .description p {\n font-size: 1.4375rem;\n padding: 44px 44px 44px;\n }\n}\n@media (max-width: 576px) {\n .digitalProductSection .contentWrapper {\n padding: 40px 0 10px;\n }\n .digitalProductSection .contentWrapper .border-left-dashed {\n left: 26px;\n }\n .digitalProductSection .contentWrapper .border-right-dashed {\n right: 26px;\n }\n .digitalProductSection .contentWrapper .productSectionHeading .heading {\n font-size: 1.5rem;\n padding: 0 6px;\n margin-bottom: 32px;\n }\n .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed {\n top: 161px;\n }\n .digitalProductSection .contentWrapper .productSectionDescription .description p {\n font-size: 1.25rem;\n padding: 28px;\n text-align: center;\n }\n .digitalProductSection .contentWrapper .productSectionDescription .border-bottom-dashed {\n bottom: 238px;\n }\n .digitalProductSection .contentWrapper .buttonGroup {\n flex-direction: column;\n gap: 24px;\n }\n .digitalProductSection .contentWrapper .buttonGroup .border-dashed {\n top: 51%;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px);\n }\n .digitalProductSection .contentWrapper .buttonGroup .ctaBtn {\n width: 100%;\n font-size: 1.4375rem;\n padding: 32px 20px;\n }\n}","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .digitalProductSection { padding: 0px 120px; font-family: "PPSupplySans-Regular", sans-serif; position: relative; } .digitalProductSection .border-bottom-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .digitalProductSection .contentWrapper { margin: 0 auto; text-align: center; padding: 50px 0 0px; } .digitalProductSection .contentWrapper .border-left-dashed { position: absolute; top: 0; left: 120px; width: 1px; height: 100%; --dash-length: 5px; --gap-length: 5px; background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--gap-length))); } .digitalProductSection .contentWrapper .border-right-dashed { position: absolute; top: 0; right: 120px; width: 1px; height: 100%; --dash-length: 5px; --gap-length: 5px; background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--gap-length))); } .digitalProductSection .contentWrapper .productSectionHeading .heading { color: #64e4cb; font-size: 3.25rem; letter-spacing: 2px; font-weight: 500; line-height: normal; font-family: "PPSupplyMono-Regular"; max-width: 700px; margin: 0 auto 40px; } .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed { position: absolute; top: 212px; left: 0; width: 100%; height: 1px; background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px); z-index: 1; } .digitalProductSection .contentWrapper .productSectionDescription .description p { color: #cfd7f1; font-size: 1.5rem; line-height: 1.4em; font-weight: 400; text-align: start; font-family: "Space Grotesk", sans-serif; padding: 55px 55px 55px; } .digitalProductSection .contentWrapper .productSectionDescription .border-bottom-dashed { position: absolute; bottom: 116px; left: 0; width: 100%; text-transform: uppercase; height: 1px; background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px); z-index: 2; } .digitalProductSection .contentWrapper .buttonGroup { display: flex; width: 100%; gap: 30px; padding: 10px; position: relative; } .digitalProductSection .contentWrapper .buttonGroup .border-dashed { position: absolute; top: 2px; bottom: 0; left: 50%; width: 1px; background: repeating-linear-gradient(to bottom, #64e4cb, #64e4cb 6px, transparent 6px, transparent 12px); } .digitalProductSection .contentWrapper .buttonGroup .ctaBtn { width: 50%; font-size: 1.5rem; color: #ffffff; border: none; padding: 32px 24px; font-weight: bold; line-height: normal; cursor: pointer; font-family: "Space Grotesk", sans-serif; text-decoration: none; } .digitalProductSection .contentWrapper .buttonGroup .ctaBtn.active { background-color: #64e4cb; color: #06234f; } .digitalProductSection .contentWrapper .buttonGroup .ctaBtn:hover { background-color: #64e4cb; color: #06234f; } @media (max-width: 1200px) { .digitalProductSection { padding: 0px 70px; } .digitalProductSection .contentWrapper .border-left-dashed { left: 70px; } .digitalProductSection .contentWrapper .border-right-dashed { right: 70px; } } @media (max-width: 1024px) { .digitalProductSection { padding: 0px 40px; } .digitalProductSection .contentWrapper .border-left-dashed { left: 40px; } .digitalProductSection .contentWrapper .border-right-dashed { right: 40px; } } @media (max-width: 768px) { .digitalProductSection { padding: 0px 26px; } .digitalProductSection .contentWrapper .border-left-dashed { left: 26px; } .digitalProductSection .contentWrapper .border-right-dashed { right: 26px; } .digitalProductSection .contentWrapper .productSectionHeading .heading { font-size: 2.5rem; } .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed { top: 190px; } .digitalProductSection .contentWrapper .productSectionDescription .description p { font-size: 1.4375rem; padding: 44px 44px 44px; } } @media (max-width: 576px) { .digitalProductSection .contentWrapper { padding: 40px 0 10px; } .digitalProductSection .contentWrapper .border-left-dashed { left: 26px; } .digitalProductSection .contentWrapper .border-right-dashed { right: 26px; } .digitalProductSection .contentWrapper .productSectionHeading .heading { font-size: 1.5rem; padding: 0 6px; margin-bottom: 32px; } .digitalProductSection .contentWrapper .productSectionHeading .border-bottom-dashed { top: 161px; } .digitalProductSection .contentWrapper .productSectionDescription .description p { font-size: 1.25rem; padding: 28px; text-align: center; } .digitalProductSection .contentWrapper .productSectionDescription .border-bottom-dashed { bottom: 238px; } .digitalProductSection .contentWrapper .buttonGroup { flex-direction: column; gap: 24px; } .digitalProductSection .contentWrapper .buttonGroup .border-dashed { top: 51%; left: 0; width: 100%; height: 1px; background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 5px, transparent 5px, transparent 10px); } .digitalProductSection .contentWrapper .buttonGroup .ctaBtn { width: 100%; font-size: 1.4375rem; padding: 32px 20px; } } /*# sourceMappingURL=digital-innovation-cta.css.map */ {"version":3,"sources":["file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","experience-section.css","variables.scss%22%20as%20*;%0A%0A.experienceSection%20%7B%0A%20%20width:%20100%25;%0A%20%20position:%20relative;%0A%0A%20%20.border-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20top:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%0A%20%20.experienceHeader%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20padding:%2070px;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.experienceTitle%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-8xl;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20line-height:%201.2em;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20.experienceStats%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20padding:%200%20150px%200px;%0A%20%20%20%20gap:%2040px;%0A%0A%20%20%20%20.statBox%20%7B%0A%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20align-items:%20center;%0A%0A%20%20%20%20%20%20&.activeStat%20%7B%0A%20%20%20%20%20%20%20%20.connector%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.connector-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20height:%20104px;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.statNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary%20!important;%0A%20%20%20%20%20%20%20%20%20%20text-shadow:%20none%20!important;%0A%20%20%20%20%20%20%20%20%20%20transform:%20scale(1.05);%0A%20%20%20%20%20%20%20%20%20%20transition:%200.3s%20ease;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.statLabel%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.line%20%7B%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20height:%2065px;%0A%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.line-dashed%20%7B%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20height:%20104px;%0A%20%20%20%20%20%20%20%20margin:%2028px%200%200;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.connector%20%7B%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20width:%201px;%20/*%20total%20width%20*/%0A%20%20%20%20%20%20%20%20height:%20132px;%20/*%20total%20height%20*/%0A%20%20%20%20%20%20%20%20display:%20none;%0A%0A%20%20%20%20%20%20%20%20.connector-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%2028px;%0A%20%20%20%20%20%20%20%20%20%20left:%200px;%20/*%20vertical%20line%20position%20*/%0A%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20height:%20171px;%20/*%20vertical%20part%20*/%0A%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20bottom,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%208px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%208px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%2014px%0A%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%20%20z-index:%20-1;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.connector-left-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%20201px;%20/*%20horizontal%20line%20position%20*/%0A%20%20%20%20%20%20%20%20%20%20left:%200px;%20/*%20where%20corner%20bends%20*/%0A%20%20%20%20%20%20%20%20%20%20width:%20148px;%20/*%20horizontal%20length%20*/%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20right,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%208px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%208px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%2014px%0A%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.connector-right%20%7B%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20width:%201px;%20/*%20total%20width%20*/%0A%20%20%20%20%20%20%20%20height:%20132px;%20/*%20total%20height%20*/%0A%20%20%20%20%20%20%20%20display:%20none;%0A%0A%20%20%20%20%20%20%20%20.connector-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%2028px;%0A%20%20%20%20%20%20%20%20%20%20left:%200px;%20/*%20vertical%20line%20position%20*/%0A%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20height:%20171px;%20/*%20vertical%20part%20*/%0A%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20bottom,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%208px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%208px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%2014px%0A%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%20%20z-index:%20-1;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.connector-right-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%20201px;%0A%20%20%20%20%20%20%20%20%20%20right:%200px;%0A%20%20%20%20%20%20%20%20%20%20width:%20148px;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20left,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%208px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%208px,%0A%20%20%20%20%20%20%20%20%20%20%20%20transparent%2014px%0A%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bottom-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20height:%200;%0A%20%20%20%20%20%20%20%20transition:%20height%200.35s%20ease;%0A%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20to%20bottom,%0A%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20$color-primary%208px,%0A%20%20%20%20%20%20%20%20%20%20transparent%208px,%0A%20%20%20%20%20%20%20%20%20%20transparent%2014px%0A%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.statNumber%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20130px;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20line-height:%20130px;%0A%20%20%20%20%20%20%20%20color:%20$color-primary-dark;%0A%20%20%20%20%20%20%20%20margin:%2035px%200%2014px;%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20/*%20-webkit-text-stroke:%201px%20$color-primary;%20*/%0A%20%20%20%20%20%20%20%20text-shadow:%0A%20%20%20%20%20%20%20%20%20%202px%200%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%20-2px%200%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%200%202px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%200%20-2px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%202px%202px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%20-2px%20-2px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%202px%20-2px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%20-2px%202px%200%20$color-primary;%0A%20%20%20%20%20%20%20%20height:%20106px;%0A%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20width:%20136px;%20/*%20Fixed%20width%20to%20accommodate%20largest%20number%20*/%0A%20%20%20%20%20%20%20%20text-align:%20center;%20/*%20Center%20the%20numbers%20within%20the%20fixed%20width%20*/%0A%20%20%20%20%20%20%20%20display:%20inline-block;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.statLabel%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20line-height:%201.3em;%0A%20%20%20%20%20%20%20%20margin-bottom:%2010px;%0A%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20text-align:%20center;%0A%20%20%20%20%20%20%20%20width:%20min-content;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.statNumberOutline%20%7B%0A%20%20%20%20%20%20%20%20color:%20$color-primary-dark;%0A%20%20%20%20%20%20%20%20text-shadow:%0A%20%20%20%20%20%20%20%20%20%202px%200%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%20-2px%200%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%200%202px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%200%20-2px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%202px%202px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%20-2px%20-2px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%202px%20-2px%200%20$color-primary,%0A%20%20%20%20%20%20%20%20%20%20-2px%202px%200%20$color-primary;%0A%0A%20%20%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20text-shadow:%20none;%0A%20%20%20%20%20%20%20%20%20%20transition:%20all%200.3s%20ease;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.experienceDescription%20%7B%0A%20%20%20%20padding:%2028px;%0A%20%20%20%20margin:%200%20auto;%0A%20%20%20%20margin-bottom:%2070px;%0A%20%20%20%20color:%20$color-primary;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20max-width:%201080px;%0A%20%20%20%20border:%201px%20solid%20$color-primary;%0A%20%20%20%20background-color:%20$color-primary-dark;%0A%20%20%20%20position:%20relative;%0A%20%20%20%20z-index:%202;%0A%20%20%7D%0A%20%20.highlightText,%0A%20%20div%20%7B%0A%20%20%20%20display:%20inline-block;%0A%20%20%20%20width:%20fit-content;%0A%20%20%20%20margin-bottom:%200px;%0A%20%20%20%20font-size:%20$heading-xl;%0A%20%20%20%20line-height:%201.3em;%0A%20%20%20%20color:%20$color-primary;%0A%20%20%20%20word-spacing:%204px;%0A%20%20%7D%0A%0A%20%20div%20%7B%0A%20%20%20%20display:%20block;%0A%20%20%20%20width:%20auto;%0A%20%20%7D%0A%20%20.knowMoreBtn%20%7B%0A%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20color:%20$color-primary-dark;%0A%20%20%20%20padding:%206px%2010px%200px;%0A%20%20%20%20display:%20inline-block;%0A%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20line-height:%2036px;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20cursor:%20pointer;%0A%20%20%20%20text-decoration:%20none;%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20width:%20max-content;%0A%20%20%20%20right:%200;%0A%0A%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20color:%20$color-primary-dark;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.experienceSection%20%7B%0A%20%20%20%20.experienceHeader%20%7B%0A%20%20%20%20%20%20padding:%2055px;%0A%0A%20%20%20%20%20%20.experienceTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.experienceStats%20%7B%0A%20%20%20%20%20%20padding:%200%2070px%200px;%0A%20%20%20%20%7D%0A%20%20%20%20.experienceDescription%20%7B%0A%20%20%20%20%20%20padding:%2028px;%0A%20%20%20%20%20%20margin:%200%2020px%2070px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.experienceSection%20%7B%0A%20%20%20%20.experienceHeader%20%7B%0A%20%20%20%20%20%20padding:%2050px%2040px;%0A%0A%20%20%20%20%20%20.experienceTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%2055px;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20.experienceStats%20%7B%0A%20%20%20%20%20%20padding:%200%2040px%200px;%0A%0A%20%20%20%20%20%20.statBox%20%7B%0A%20%20%20%20%20%20%20%20.statNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20110px;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20120px;%0A%20%20%20%20%20%20%20%20%20%20margin:%2026px%200%2010px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.experienceDescription%20%7B%0A%20%20%20%20%20%20padding:%2028px;%0A%20%20%20%20%20%20margin:%200%2020px%2070px;%0A%0A%20%20%20%20%20%20.highlightText%20%7B%0A%20%20%20%20%20%20%20%20max-width:%20806px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.knowMoreBtn%20%7B%0A%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20width:%20fit-content;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.experienceSection%20%7B%0A%20%20%20%20.experienceHeader%20%7B%0A%20%20%20%20%20%20padding:%2050px%2020px%2046px;%0A%0A%20%20%20%20%20%20.experienceTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%2055px;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20.experienceStats%20%7B%0A%20%20%20%20%20%20padding:%200%2020px%200px;%0A%20%20%20%20%20%20gap:%2025px;%0A%0A%20%20%20%20%20%20.statBox%20%7B%0A%20%20%20%20%20%20%20%20.statNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%2070px;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2080px;%0A%20%20%20%20%20%20%20%20%20%20height:%2072px;%0A%20%20%20%20%20%20%20%20%20%20margin:%2026px%200%2010px;%0A%20%20%20%20%20%20%20%20%20%20width:%2080px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.experienceDescription%20%7B%0A%20%20%20%20%20%20padding:%2028px;%0A%20%20%20%20%20%20margin:%200%2020px%2070px;%0A%0A%20%20%20%20%20%20.highlightText%20%7B%0A%20%20%20%20%20%20%20%20max-width:%20530px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.experienceSection%20%7B%0A%20%20%20%20.experienceHeader%20%7B%0A%20%20%20%20%20%20padding:%2038px%2020px%2036px;%0A%0A%20%20%20%20%20%20.experienceTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20.experienceStats%20%7B%0A%20%20%20%20%20%20flex-wrap:%20wrap;%0A%20%20%20%20%20%20margin-bottom:%2020px;%0A%20%20%20%20%20%20margin-top:%2015px;%0A%0A%20%20%20%20%20%20.statBox%20%7B%0A%20%20%20%20%20%20%20%20width:%20calc(100%25%20/%202%20-%2020px);%0A%0A%20%20%20%20%20%20%20%20&.activeStat%20%7B%0A%20%20%20%20%20%20%20%20%20%20.connector-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.connector%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.line-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.line%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.statNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%2070px;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2080px;%0A%20%20%20%20%20%20%20%20%20%20height:%2072px;%0A%20%20%20%20%20%20%20%20%20%20margin:%2026px%200%2010px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.experienceDescription%20%7B%0A%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20margin:%200%2020px%2040px;%0A%0A%20%20%20%20%20%20.highlightText,%0A%20%20%20%20%20%20div,%0A%20%20%20%20%20%20.knowMoreBtn%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"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","file":"experience-section.css","sourcesContent":["// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.experienceSection {\n width: 100%;\n position: relative;\n}\n.experienceSection .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.experienceSection .experienceHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n position: relative;\n}\n.experienceSection .experienceHeader .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.experienceSection .experienceHeader .experienceTitle {\n font-size: 5rem;\n font-weight: 500;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: #e5f1fd;\n}\n.experienceSection .experienceStats {\n display: flex;\n justify-content: space-between;\n padding: 0 150px 0px;\n gap: 40px;\n}\n.experienceSection .experienceStats .statBox {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.experienceSection .experienceStats .statBox.activeStat .connector {\n display: block;\n}\n.experienceSection .experienceStats .statBox.activeStat .connector-right {\n display: block;\n}\n.experienceSection .experienceStats .statBox.activeStat .bottom-line {\n display: block;\n height: 104px;\n}\n.experienceSection .experienceStats .statBox.activeStat .statNumber {\n color: #64e4cb !important;\n text-shadow: none !important;\n transform: scale(1.05);\n transition: 0.3s ease;\n}\n.experienceSection .experienceStats .statBox.activeStat .statLabel {\n color: #64e4cb;\n}\n.experienceSection .experienceStats .statBox .line {\n width: 1px;\n height: 65px;\n background-color: #64e4cb;\n}\n.experienceSection .experienceStats .statBox .line-dashed {\n width: 1px;\n position: relative;\n height: 104px;\n margin: 28px 0 0;\n}\n.experienceSection .experienceStats .statBox .connector {\n position: relative;\n width: 1px; /* total width */\n height: 132px; /* total height */\n display: none;\n}\n.experienceSection .experienceStats .statBox .connector .connector-dashed {\n position: absolute;\n top: 28px;\n left: 0px; /* vertical line position */\n width: 1px;\n height: 171px; /* vertical part */\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n z-index: -1;\n}\n.experienceSection .experienceStats .statBox .connector .connector-left-dashed {\n position: absolute;\n top: 201px; /* horizontal line position */\n left: 0px; /* where corner bends */\n width: 148px; /* horizontal length */\n height: 1px;\n background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n z-index: 1;\n}\n.experienceSection .experienceStats .statBox .connector-right {\n position: relative;\n width: 1px; /* total width */\n height: 132px; /* total height */\n display: none;\n}\n.experienceSection .experienceStats .statBox .connector-right .connector-dashed {\n position: absolute;\n top: 28px;\n left: 0px; /* vertical line position */\n width: 1px;\n height: 171px; /* vertical part */\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n z-index: -1;\n}\n.experienceSection .experienceStats .statBox .connector-right .connector-right-dashed {\n position: absolute;\n top: 201px;\n right: 0px;\n width: 148px;\n height: 1px;\n background: repeating-linear-gradient(to left, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n z-index: 1;\n}\n.experienceSection .experienceStats .statBox .bottom-line {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n width: 1px;\n height: 0;\n transition: height 0.35s ease;\n background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px);\n}\n.experienceSection .experienceStats .statBox .statNumber {\n font-size: 130px;\n font-weight: 500;\n line-height: 130px;\n color: #06234f;\n margin: 35px 0 14px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n /* -webkit-text-stroke: 1px $color-primary; */\n text-shadow: 2px 0 0 #64e4cb, -2px 0 0 #64e4cb, 0 2px 0 #64e4cb, 0 -2px 0 #64e4cb, 2px 2px 0 #64e4cb, -2px -2px 0 #64e4cb, 2px -2px 0 #64e4cb, -2px 2px 0 #64e4cb;\n height: 106px;\n cursor: pointer;\n width: 136px; /* Fixed width to accommodate largest number */\n text-align: center; /* Center the numbers within the fixed width */\n display: inline-block;\n}\n.experienceSection .experienceStats .statBox .statLabel {\n font-size: 1.25rem;\n line-height: 1.3em;\n margin-bottom: 10px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 300;\n text-align: center;\n width: min-content;\n}\n.experienceSection .experienceStats .statBox .statNumberOutline {\n color: #06234f;\n text-shadow: 2px 0 0 #64e4cb, -2px 0 0 #64e4cb, 0 2px 0 #64e4cb, 0 -2px 0 #64e4cb, 2px 2px 0 #64e4cb, -2px -2px 0 #64e4cb, 2px -2px 0 #64e4cb, -2px 2px 0 #64e4cb;\n}\n.experienceSection .experienceStats .statBox .statNumberOutline:hover {\n color: #64e4cb;\n text-shadow: none;\n transition: all 0.3s ease;\n}\n.experienceSection .experienceDescription {\n padding: 28px;\n margin: 0 auto;\n margin-bottom: 70px;\n color: #64e4cb;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n max-width: 1080px;\n border: 1px solid #64e4cb;\n background-color: #06234f;\n position: relative;\n z-index: 2;\n}\n.experienceSection .highlightText,\n.experienceSection div {\n display: inline-block;\n width: fit-content;\n margin-bottom: 0px;\n font-size: 2rem;\n line-height: 1.3em;\n color: #64e4cb;\n word-spacing: 4px;\n}\n.experienceSection div {\n display: block;\n width: auto;\n}\n.experienceSection .knowMoreBtn {\n background-color: #64e4cb;\n color: #06234f;\n padding: 6px 10px 0px;\n display: inline-block;\n font-size: 1.875rem;\n line-height: 36px;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n cursor: pointer;\n text-decoration: none;\n position: absolute;\n bottom: 0;\n width: max-content;\n right: 0;\n}\n.experienceSection .knowMoreBtn:hover {\n background-color: #64e4cb;\n color: #06234f;\n}\n\n@media (max-width: 1200px) {\n .experienceSection .experienceHeader {\n padding: 55px;\n }\n .experienceSection .experienceHeader .experienceTitle {\n font-size: 4rem;\n }\n .experienceSection .experienceStats {\n padding: 0 70px 0px;\n }\n .experienceSection .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n }\n}\n@media (max-width: 1024px) {\n .experienceSection .experienceHeader {\n padding: 50px 40px;\n }\n .experienceSection .experienceHeader .experienceTitle {\n font-size: 55px;\n line-height: 1em;\n }\n .experienceSection .experienceStats {\n padding: 0 40px 0px;\n }\n .experienceSection .experienceStats .statBox .statNumber {\n font-size: 110px;\n line-height: 120px;\n margin: 26px 0 10px;\n }\n .experienceSection .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n }\n .experienceSection .experienceDescription .highlightText {\n max-width: 806px;\n }\n .experienceSection .experienceDescription .knowMoreBtn {\n display: block;\n width: fit-content;\n }\n}\n@media (max-width: 768px) {\n .experienceSection .experienceHeader {\n padding: 50px 20px 46px;\n }\n .experienceSection .experienceHeader .experienceTitle {\n font-size: 55px;\n line-height: 1em;\n }\n .experienceSection .experienceStats {\n padding: 0 20px 0px;\n gap: 25px;\n }\n .experienceSection .experienceStats .statBox .statNumber {\n font-size: 70px;\n line-height: 80px;\n height: 72px;\n margin: 26px 0 10px;\n width: 80px;\n }\n .experienceSection .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n }\n .experienceSection .experienceDescription .highlightText {\n max-width: 530px;\n }\n}\n@media (max-width: 576px) {\n .experienceSection .experienceHeader {\n padding: 38px 20px 36px;\n }\n .experienceSection .experienceHeader .experienceTitle {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .experienceSection .experienceStats {\n flex-wrap: wrap;\n margin-bottom: 20px;\n margin-top: 15px;\n }\n .experienceSection .experienceStats .statBox {\n width: calc(50% - 20px);\n }\n .experienceSection .experienceStats .statBox.activeStat .connector-right {\n display: none;\n }\n .experienceSection .experienceStats .statBox.activeStat .connector {\n display: none;\n }\n .experienceSection .experienceStats .statBox .bottom-line {\n display: none;\n }\n .experienceSection .experienceStats .statBox .line-dashed {\n display: none;\n }\n .experienceSection .experienceStats .statBox .line {\n display: none;\n }\n .experienceSection .experienceStats .statBox .statNumber {\n font-size: 70px;\n line-height: 80px;\n height: 72px;\n margin: 26px 0 10px;\n }\n .experienceSection .experienceDescription {\n padding: 20px;\n margin: 0 20px 40px;\n }\n .experienceSection .experienceDescription .highlightText,\n .experienceSection .experienceDescription div,\n .experienceSection .experienceDescription .knowMoreBtn {\n font-size: 1.5rem;\n line-height: 30px;\n }\n}","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.experienceSection {\n width: 100%;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .experienceHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .experienceTitle {\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: $text-dark-primary;\n }\n }\n\n .experienceStats {\n display: flex;\n justify-content: space-between;\n padding: 0 150px 0px;\n gap: 40px;\n\n .statBox {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n &.activeStat {\n .connector {\n display: block;\n }\n .connector-right {\n display: block;\n }\n\n .bottom-line {\n display: block;\n height: 104px;\n }\n\n .statNumber {\n color: $color-primary !important;\n text-shadow: none !important;\n transform: scale(1.05);\n transition: 0.3s ease;\n }\n .statLabel {\n color: $color-primary;\n }\n }\n\n .line {\n width: 1px;\n height: 65px;\n background-color: $color-primary;\n }\n .line-dashed {\n width: 1px;\n position: relative;\n height: 104px;\n margin: 28px 0 0;\n }\n .connector {\n position: relative;\n width: 1px; /* total width */\n height: 132px; /* total height */\n display: none;\n\n .connector-dashed {\n position: absolute;\n top: 28px;\n left: 0px; /* vertical line position */\n width: 1px;\n height: 171px; /* vertical part */\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n z-index: -1;\n }\n .connector-left-dashed {\n position: absolute;\n top: 201px; /* horizontal line position */\n left: 0px; /* where corner bends */\n width: 148px; /* horizontal length */\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n z-index: 1;\n }\n }\n .connector-right {\n position: relative;\n width: 1px; /* total width */\n height: 132px; /* total height */\n display: none;\n\n .connector-dashed {\n position: absolute;\n top: 28px;\n left: 0px; /* vertical line position */\n width: 1px;\n height: 171px; /* vertical part */\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n z-index: -1;\n }\n .connector-right-dashed {\n position: absolute;\n top: 201px;\n right: 0px;\n width: 148px;\n height: 1px;\n background: repeating-linear-gradient(\n to left,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n z-index: 1;\n }\n }\n .bottom-line {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n width: 1px;\n height: 0;\n transition: height 0.35s ease;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0,\n $color-primary 8px,\n transparent 8px,\n transparent 14px\n );\n }\n .statNumber {\n font-size: 130px;\n font-weight: $font-weight-medium;\n line-height: 130px;\n color: $color-primary-dark;\n margin: 35px 0 14px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n /* -webkit-text-stroke: 1px $color-primary; */\n text-shadow:\n 2px 0 0 $color-primary,\n -2px 0 0 $color-primary,\n 0 2px 0 $color-primary,\n 0 -2px 0 $color-primary,\n 2px 2px 0 $color-primary,\n -2px -2px 0 $color-primary,\n 2px -2px 0 $color-primary,\n -2px 2px 0 $color-primary;\n height: 106px;\n cursor: pointer;\n width: 136px; /* Fixed width to accommodate largest number */\n text-align: center; /* Center the numbers within the fixed width */\n display: inline-block;\n }\n .statLabel {\n font-size: $heading-sm;\n line-height: 1.3em;\n margin-bottom: 10px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-light;\n text-align: center;\n width: min-content;\n }\n .statNumberOutline {\n color: $color-primary-dark;\n text-shadow:\n 2px 0 0 $color-primary,\n -2px 0 0 $color-primary,\n 0 2px 0 $color-primary,\n 0 -2px 0 $color-primary,\n 2px 2px 0 $color-primary,\n -2px -2px 0 $color-primary,\n 2px -2px 0 $color-primary,\n -2px 2px 0 $color-primary;\n\n &:hover {\n color: $color-primary;\n text-shadow: none;\n transition: all 0.3s ease;\n }\n }\n }\n }\n .experienceDescription {\n padding: 28px;\n margin: 0 auto;\n margin-bottom: 70px;\n color: $color-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n max-width: 1080px;\n border: 1px solid $color-primary;\n background-color: $color-primary-dark;\n position: relative;\n z-index: 2;\n }\n .highlightText,\n div {\n display: inline-block;\n width: fit-content;\n margin-bottom: 0px;\n font-size: $heading-xl;\n line-height: 1.3em;\n color: $color-primary;\n word-spacing: 4px;\n }\n\n div {\n display: block;\n width: auto;\n }\n .knowMoreBtn {\n background-color: $color-primary;\n color: $color-primary-dark;\n padding: 6px 10px 0px;\n display: inline-block;\n font-size: $heading-lg;\n line-height: 36px;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n cursor: pointer;\n text-decoration: none;\n position: absolute;\n bottom: 0;\n width: max-content;\n right: 0;\n\n &:hover {\n background-color: $color-primary;\n color: $color-primary-dark;\n }\n }\n}\n\n@media (max-width: 1200px) {\n .experienceSection {\n .experienceHeader {\n padding: 55px;\n\n .experienceTitle {\n font-size: $heading-6xl;\n }\n }\n .experienceStats {\n padding: 0 70px 0px;\n }\n .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n }\n }\n}\n@media (max-width: 1024px) {\n .experienceSection {\n .experienceHeader {\n padding: 50px 40px;\n\n .experienceTitle {\n font-size: 55px;\n line-height: 1em;\n }\n }\n\n .experienceStats {\n padding: 0 40px 0px;\n\n .statBox {\n .statNumber {\n font-size: 110px;\n line-height: 120px;\n margin: 26px 0 10px;\n }\n }\n }\n .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n\n .highlightText {\n max-width: 806px;\n }\n .knowMoreBtn {\n display: block;\n width: fit-content;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .experienceSection {\n .experienceHeader {\n padding: 50px 20px 46px;\n\n .experienceTitle {\n font-size: 55px;\n line-height: 1em;\n }\n }\n\n .experienceStats {\n padding: 0 20px 0px;\n gap: 25px;\n\n .statBox {\n .statNumber {\n font-size: 70px;\n line-height: 80px;\n height: 72px;\n margin: 26px 0 10px;\n width: 80px;\n }\n }\n }\n .experienceDescription {\n padding: 28px;\n margin: 0 20px 70px;\n\n .highlightText {\n max-width: 530px;\n }\n }\n }\n}\n@media (max-width: 576px) {\n .experienceSection {\n .experienceHeader {\n padding: 38px 20px 36px;\n\n .experienceTitle {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n }\n\n .experienceStats {\n flex-wrap: wrap;\n margin-bottom: 20px;\n margin-top: 15px;\n\n .statBox {\n width: calc(100% / 2 - 20px);\n\n &.activeStat {\n .connector-right {\n display: none;\n }\n .connector {\n display: none;\n }\n }\n .bottom-line {\n display: none;\n }\n .line-dashed {\n display: none;\n }\n .line {\n display: none;\n }\n .statNumber {\n font-size: 70px;\n line-height: 80px;\n height: 72px;\n margin: 26px 0 10px;\n }\n }\n }\n .experienceDescription {\n padding: 20px;\n margin: 0 20px 40px;\n\n .highlightText,\n div,\n .knowMoreBtn {\n font-size: $heading-md;\n line-height: 30px;\n }\n }\n }\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .experienceSection { width: 100%; position: relative; } .experienceSection .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .experienceSection .experienceHeader { display: flex; align-items: center; padding: 70px; position: relative; } .experienceSection .experienceHeader .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .experienceSection .experienceHeader .experienceTitle { font-size: 5rem; font-weight: 500; margin: 0; display: flex; line-height: 1.2em; align-items: center; font-family: "PPSupplySans-Regular", sans-serif; color: #e5f1fd; } .experienceSection .experienceStats { display: flex; justify-content: space-between; padding: 0 150px 0px; gap: 40px; } .experienceSection .experienceStats .statBox { position: relative; display: flex; flex-direction: column; align-items: center; } .experienceSection .experienceStats .statBox.activeStat .connector { display: block; } .experienceSection .experienceStats .statBox.activeStat .connector-right { display: block; } .experienceSection .experienceStats .statBox.activeStat .bottom-line { display: block; height: 104px; } .experienceSection .experienceStats .statBox.activeStat .statNumber { color: #64e4cb !important; text-shadow: none !important; transform: scale(1.05); transition: 0.3s ease; } .experienceSection .experienceStats .statBox.activeStat .statLabel { color: #64e4cb; } .experienceSection .experienceStats .statBox .line { width: 1px; height: 65px; background-color: #64e4cb; } .experienceSection .experienceStats .statBox .line-dashed { width: 1px; position: relative; height: 104px; margin: 28px 0 0; } .experienceSection .experienceStats .statBox .connector { position: relative; width: 1px; /* total width */ height: 132px; /* total height */ display: none; } .experienceSection .experienceStats .statBox .connector .connector-dashed { position: absolute; top: 28px; left: 0px; /* vertical line position */ width: 1px; height: 171px; /* vertical part */ background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); z-index: -1; } .experienceSection .experienceStats .statBox .connector .connector-left-dashed { position: absolute; top: 201px; /* horizontal line position */ left: 0px; /* where corner bends */ width: 148px; /* horizontal length */ height: 1px; background: repeating-linear-gradient(to right, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); z-index: 1; } .experienceSection .experienceStats .statBox .connector-right { position: relative; width: 1px; /* total width */ height: 132px; /* total height */ display: none; } .experienceSection .experienceStats .statBox .connector-right .connector-dashed { position: absolute; top: 28px; left: 0px; /* vertical line position */ width: 1px; height: 171px; /* vertical part */ background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); z-index: -1; } .experienceSection .experienceStats .statBox .connector-right .connector-right-dashed { position: absolute; top: 201px; right: 0px; width: 148px; height: 1px; background: repeating-linear-gradient(to left, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); z-index: 1; } .experienceSection .experienceStats .statBox .bottom-line { position: absolute; top: 0; left: 0; display: none; width: 1px; height: 0; transition: height 0.35s ease; background: repeating-linear-gradient(to bottom, #64e4cb 0, #64e4cb 8px, transparent 8px, transparent 14px); } .experienceSection .experienceStats .statBox .statNumber { font-size: 130px; font-weight: 500; line-height: 130px; color: #06234f; margin: 35px 0 14px; font-family: "PPSupplySans-Regular", sans-serif; /* -webkit-text-stroke: 1px $color-primary; */ text-shadow: 2px 0 0 #64e4cb, -2px 0 0 #64e4cb, 0 2px 0 #64e4cb, 0 -2px 0 #64e4cb, 2px 2px 0 #64e4cb, -2px -2px 0 #64e4cb, 2px -2px 0 #64e4cb, -2px 2px 0 #64e4cb; height: 106px; cursor: pointer; width: 136px; /* Fixed width to accommodate largest number */ text-align: center; /* Center the numbers within the fixed width */ display: inline-block; } .experienceSection .experienceStats .statBox .statLabel { font-size: 1.25rem; line-height: 1.3em; margin-bottom: 10px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; font-weight: 300; text-align: center; width: -moz-min-content; width: min-content; } .experienceSection .experienceStats .statBox .statNumberOutline { color: #06234f; text-shadow: 2px 0 0 #64e4cb, -2px 0 0 #64e4cb, 0 2px 0 #64e4cb, 0 -2px 0 #64e4cb, 2px 2px 0 #64e4cb, -2px -2px 0 #64e4cb, 2px -2px 0 #64e4cb, -2px 2px 0 #64e4cb; } .experienceSection .experienceStats .statBox .statNumberOutline:hover { color: #64e4cb; text-shadow: none; transition: all 0.3s ease; } .experienceSection .experienceDescription { padding: 28px; margin: 0 auto; margin-bottom: 70px; color: #64e4cb; font-family: "PPSupplySans-Regular", sans-serif; max-width: 1080px; border: 1px solid #64e4cb; background-color: #06234f; position: relative; z-index: 2; } .experienceSection .highlightText, .experienceSection div { display: inline-block; width: -moz-fit-content; width: fit-content; margin-bottom: 0px; font-size: 2rem; line-height: 1.3em; color: #64e4cb; word-spacing: 4px; } .experienceSection div { display: block; width: auto; } .experienceSection .knowMoreBtn { background-color: #64e4cb; color: #06234f; padding: 6px 10px 0px; display: inline-block; font-size: 1.875rem; line-height: 36px; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; cursor: pointer; text-decoration: none; position: absolute; bottom: 0; width: -moz-max-content; width: max-content; right: 0; } .experienceSection .knowMoreBtn:hover { background-color: #64e4cb; color: #06234f; } @media (max-width: 1200px) { .experienceSection .experienceHeader { padding: 55px; } .experienceSection .experienceHeader .experienceTitle { font-size: 4rem; } .experienceSection .experienceStats { padding: 0 70px 0px; } .experienceSection .experienceDescription { padding: 28px; margin: 0 20px 70px; } } @media (max-width: 1024px) { .experienceSection .experienceHeader { padding: 50px 40px; } .experienceSection .experienceHeader .experienceTitle { font-size: 55px; line-height: 1em; } .experienceSection .experienceStats { padding: 0 40px 0px; } .experienceSection .experienceStats .statBox .statNumber { font-size: 110px; line-height: 120px; margin: 26px 0 10px; } .experienceSection .experienceDescription { padding: 28px; margin: 0 20px 70px; } .experienceSection .experienceDescription .highlightText { max-width: 806px; } .experienceSection .experienceDescription .knowMoreBtn { display: block; width: -moz-fit-content; width: fit-content; } } @media (max-width: 768px) { .experienceSection .experienceHeader { padding: 50px 20px 46px; } .experienceSection .experienceHeader .experienceTitle { font-size: 55px; line-height: 1em; } .experienceSection .experienceStats { padding: 0 20px 0px; gap: 25px; } .experienceSection .experienceStats .statBox .statNumber { font-size: 70px; line-height: 80px; height: 72px; margin: 26px 0 10px; width: 80px; } .experienceSection .experienceDescription { padding: 28px; margin: 0 20px 70px; } .experienceSection .experienceDescription .highlightText { max-width: 530px; } } @media (max-width: 576px) { .experienceSection .experienceHeader { padding: 38px 20px 36px; } .experienceSection .experienceHeader .experienceTitle { font-size: 2.75rem; line-height: 1em; } .experienceSection .experienceStats { flex-wrap: wrap; margin-bottom: 20px; margin-top: 15px; } .experienceSection .experienceStats .statBox { width: calc(50% - 20px); } .experienceSection .experienceStats .statBox.activeStat .connector-right { display: none; } .experienceSection .experienceStats .statBox.activeStat .connector { display: none; } .experienceSection .experienceStats .statBox .bottom-line { display: none; } .experienceSection .experienceStats .statBox .line-dashed { display: none; } .experienceSection .experienceStats .statBox .line { display: none; } .experienceSection .experienceStats .statBox .statNumber { font-size: 70px; line-height: 80px; height: 72px; margin: 26px 0 10px; } .experienceSection .experienceDescription { padding: 20px; margin: 0 20px 40px; } .experienceSection .experienceDescription .highlightText, .experienceSection .experienceDescription div, .experienceSection .experienceDescription .knowMoreBtn { font-size: 1.5rem; line-height: 30px; } } /*# sourceMappingURL=experience-section.css.map */ {"version":3,"sources":["file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","experience-timeline.css","variables.scss%22%20as%20*;%0A%0A/*%20Add%20Block%20CSS%20Here%20*/%0A.experienceBlock%20%7B%0A%20%20position:%20relative;%0A%0A%20%20.experienceheading%20%7B%0A%20%20%20%20padding:%2070px;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-8xl;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20line-height:%201.2em;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20.experience-detail-block%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20position:%20relative;%0A%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20.experience-cards%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20scroll-snap-align:%20start;%0A%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20&.active%20%7B%0A%20%20%20%20%20%20%20%20background-color:%20$bg-tranparent;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.experience-card%20%7B%0A%20%20%20%20%20%20%20%20padding:%2035px;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20gap:%2016px;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20transition:%20background-color%200.3s%20ease;%0A%0A%20%20%20%20%20%20%20%20&.active%20%7B%0A%20%20%20%20%20%20%20%20%20%20background-color:%20rgba(100,%20228,%20203,%200.3);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20%20%20background-color:%20rgba(100,%20228,%20203,%200.1);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&:last-child%20%7B%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.experience-year%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.experience-heading-block%20%7B%0A%20%20%20%20%20%20%20%20%20%20.experience-card-title%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%204px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.websiteLink%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.experienceDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.experience-card-detail%20%7B%0A%20%20%20%20%20%20position:%20sticky;%0A%20%20%20%20%20%20top:%200px;%0A%20%20%20%20%20%20padding:%2070px;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20gap:%2030px;%0A%20%20%20%20%20%20background:%20inherit;%0A%0A%20%20%20%20%20%20.card-details-heading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$font-48;%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.experience-details%20%7B%0A%20%20%20%20%20%20%20%20.experienceLink%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.experience-yearText%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xl;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20margin-top:%208px;%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.details-description%20%7B%0A%20%20%20%20%20%20%20%20.overViewLable%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20margin-bottom:%208px;%0A%20%20%20%20%20%20%20%20%20%20display:%20inline-block;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.details-overview%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A/%20Modal%20Styles%0A.modal-overlay%20%7B%0A%20%20position:%20fixed;%0A%20%20top:%200;%0A%20%20left:%200;%0A%20%20width:%20100%25;%0A%20%20height:%20100%25;%0A%20%20background:%20rgba(0,%200,%200,%200.7);%0A%20%20z-index:%20998;%0A%20%20opacity:%200;%0A%20%20visibility:%20hidden;%0A%20%20transition:%0A%20%20%20%20opacity%200.3s%20ease,%0A%20%20%20%20visibility%200.3s%20ease;%0A%20%20display:%20none;%0A%0A%20%20&.active%20%7B%0A%20%20%20%20opacity:%201;%0A%20%20%20%20visibility:%20visible;%0A%20%20%7D%0A%7D%0A%0A.modal-content%20%7B%0A%20%20position:%20fixed;%0A%20%20bottom:%200;%0A%20%20left:%200;%0A%20%20right:%200;%0A%20%20background:%20$color-primary-dark;%0A%20%20border-radius:%200px;%0A%20%20padding:%2020px;%0A%20%20max-height:%2080vh;%0A%20%20overflow-y:%20auto;%0A%20%20z-index:%20999;%0A%20%20transform:%20translateY(100%25);%0A%20%20transition:%20transform%200.3s%20ease;%0A%20%20display:%20none;%0A%0A%20%20&.active%20%7B%0A%20%20%20%20transform:%20translateY(0);%0A%20%20%7D%0A%0A%20%20.modal-drag-handle%20%7B%0A%20%20%20%20width:%2040px;%0A%20%20%20%20height:%204px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%20%20border-radius:%202px;%0A%20%20%20%20margin:%200%20auto%2015px;%0A%20%20%7D%0A%0A%20%20.modal-header%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20justify-content:%20flex-end;%0A%20%20%20%20margin-bottom:%2015px;%0A%0A%20%20%20%20.modal-close%20%7B%0A%20%20%20%20%20%20background:%20none;%0A%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20font-size:%20$heading-xl;%0A%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20padding:%200;%0A%20%20%20%20%20%20width:%2035px;%0A%20%20%20%20%20%20height:%2035px;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20transition:%0A%20%20%20%20%20%20%20%20color%200.2s%20ease,%0A%20%20%20%20%20%20%20%20transform%200.2s%20ease;%0A%0A%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20transform:%20scale(1.1);%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20%23modalBody%20%7B%0A%20%20%20%20.card-details-heading%20%7B%0A%20%20%20%20%20%20font-size:%20$font-28;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20line-height:%201.2;%0A%20%20%20%20%20%20margin:%200%200%2020px%200;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.experience-details%20%7B%0A%20%20%20%20%20%20margin-bottom:%2025px;%0A%0A%20%20%20%20%20%20.experienceLink%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$text-base;%0A%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20margin-bottom:%208px;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.experience-yearText%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20.details-description%20%7B%0A%20%20%20%20%20%20.overViewLable%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20margin-bottom:%2010px;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.details-overview%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$text-base;%0A%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20line-height:%201.5;%0A%0A%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20margin:%200%200%201em%200;%0A%0A%20%20%20%20%20%20%20%20%20%20&:last-child%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20/*%20Add%20Block%20CSS%20Here%20*/%0A%20%20.experienceBlock%20%7B%0A%20%20%20%20.experienceheading%20%7B%0A%20%20%20%20%20%20padding:%2050px;%0A%0A%20%20%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20.experience-detail-block%20%7B%0A%20%20%20%20%20%20.experience-cards%20%7B%0A%20%20%20%20%20%20%20%20.experience-card%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2025px;%0A%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.experience-card-detail%20%7B%0A%20%20%20%20%20%20%20%20padding:%2050px;%0A%20%20%20%20%20%20%20%20gap:%2024px;%0A%0A%20%20%20%20%20%20%20%20.card-details-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-2xl;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.details-description%20%7B%0A%20%20%20%20%20%20%20%20%20%20.details-overview%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20/*%20Add%20Block%20CSS%20Here%20*/%0A%20%20.experienceBlock%20%7B%0A%20%20%20%20.experienceheading%20%7B%0A%20%20%20%20%20%20padding:%2040px;%0A%0A%20%20%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$font-54;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20.experience-detail-block%20%7B%0A%20%20%20%20%20%20.experience-cards%20%7B%0A%20%20%20%20%20%20%20%20.experience-card%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.experience-card-detail%20%7B%0A%20%20%20%20%20%20%20%20padding:%2040px;%0A%20%20%20%20%20%20%20%20gap:%2020px;%0A%0A%20%20%20%20%20%20%20%20.card-details-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$font-34;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.experience-details%20%7B%0A%20%20%20%20%20%20%20%20%20%20.experience-yearText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$font-28;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.experienceBlock%20%7B%0A%20%20%20%20.experienceheading%20%7B%0A%20%20%20%20%20%20padding:%2050px%2020px%2046px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.experience-detail-block%20%7B%0A%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20.experience-cards%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.experience-card%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20%20%20transition:%20background-color%200.3s%20ease;%0A%0A%20%20%20%20%20%20%20%20%20%20.experience-year%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.experience-heading-block%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.experience-card-title%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.websiteLink%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-base%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.experienceDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xs%20!important;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.experience-card-detail%20%7B%0A%20%20%20%20%20%20%20%20display:%20none%20!important;%0A%0A%20%20%20%20%20%20%20%20.card-details-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$font-48;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.experience-details%20%7B%0A%20%20%20%20%20%20%20%20%20%20.experienceLink%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-base%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%208px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.experience-yearText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm%20!important;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.details-description%20%7B%0A%20%20%20%20%20%20%20%20%20%20.overViewLable%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xs%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%2010px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.details-overview%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-base%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%201.5;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20/%20Show%20modal%20on%20mobile/tablet%0A%20%20.modal-overlay%20%7B%0A%20%20%20%20display:%20block;%0A%20%20%7D%0A%0A%20%20.modal-content%20%7B%0A%20%20%20%20display:%20block;%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.experienceBlock%20%7B%0A%20%20%20%20.experienceheading%20%7B%0A%20%20%20%20%20%20padding:%2038px%2020px%2036px;%0A%0A%20%20%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.modal-content%20%7B%0A%20%20%20%20%23modalBody%20%7B%0A%20%20%20%20%20%20.card-details-heading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.experience-details%20%7B%0A%20%20%20%20%20%20%20%20.experienceLink%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%2014px;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.experience-yearText%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.details-description%20%7B%0A%20%20%20%20%20%20%20%20.overViewLable%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$text-base;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.details-overview%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%2014px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"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A;EDCN;ECAM;IACE,aAAA;EDER;ECCM;IACE,aAAA;IACA,eAAA;IACA,sCAAA;EDCR;ECCQ;IACE,kBF7XC;IE8XD,wCAAA;IACA,gBFtWS;IEuWT,cCxZJ;EFyZN;ECEU;IACE,6BAAA;EDAZ;ECEU;IACE,0BAAA;EDAZ;ECGQ;IACE,8BAAA;EDDV;ECKI;IACE,wBAAA;EDHN;ECKM;IACE,eFlaA;IEmaA,+CAAA;IACA,gBF5XW;IE6XX,cC9aF;ID+aE,mBAAA;EDHR;ECMQ;IACE,0BAAA;IACA,cAAA;IACA,kBAAA;EDJV;ECMQ;IACE,6BAAA;EDJV;ECQQ;IACE,8BAAA;IACA,cAAA;IACA,mBAAA;EDNV;ECQQ;IACE,0BAAA;IACA,gBAAA;EDNV;ECaA;IACE,cAAA;EDXF;ECcA;IACE,cAAA;EDZF;AACF;ACcA;EAEI;IACE,uBAAA;EDbJ;ECeI;IACE,kBF3bM;IE4bN,gBAAA;EDbN;ECmBI;IACE,iBFvcK;ECsbX;ECqBM;IACE,eAAA;EDnBR;ECsBM;IACE,mBFldG;EC8bX;ECyBM;IACE,eFxcE;ECibV;EC0BM;IACE,eAAA;EDxBR;AACF","file":"experience-timeline.css","sourcesContent":["// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n/* Add Block CSS Here */\n.experienceBlock {\n position: relative;\n}\n.experienceBlock .experienceheading {\n padding: 70px;\n position: relative;\n}\n.experienceBlock .experienceheading .techStackTitle {\n font-size: 5rem;\n font-weight: 500;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: #e5f1fd;\n}\n.experienceBlock .experienceheading .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.experienceBlock .experience-detail-block {\n display: flex;\n position: relative;\n width: 100%;\n}\n.experienceBlock .experience-detail-block .experience-cards {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n width: 50%;\n scroll-snap-align: start;\n height: 100%;\n position: relative;\n}\n.experienceBlock .experience-detail-block .experience-cards.active {\n background-color: rgba(100, 228, 203, 0.2);\n}\n.experienceBlock .experience-detail-block .experience-cards .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background-color: #64e4cb;\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card {\n padding: 35px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n position: relative;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card.active {\n background-color: rgba(100, 228, 203, 0.3);\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card:hover {\n background-color: rgba(100, 228, 203, 0.1);\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card:last-child .border-bottom-line {\n display: none;\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: #64e4cb;\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card .experience-year {\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n color: #ffffff;\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card .experience-heading-block .experience-card-title {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n line-height: normal;\n color: #64e4cb;\n margin-bottom: 4px;\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card .experience-heading-block .websiteLink {\n font-size: 1.125rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #ffffff;\n line-height: normal;\n}\n.experienceBlock .experience-detail-block .experience-cards .experience-card .experienceDetails {\n font-size: 1.4375rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #ffffff;\n line-height: normal;\n}\n.experienceBlock .experience-detail-block .experience-card-detail {\n position: sticky;\n top: 0px;\n padding: 70px;\n display: flex;\n flex-direction: column;\n gap: 30px;\n background: inherit;\n}\n.experienceBlock .experience-detail-block .experience-card-detail .card-details-heading {\n font-size: 48px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n color: #ffffff;\n line-height: normal;\n}\n.experienceBlock .experience-detail-block .experience-card-detail .experience-details .experienceLink {\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n text-decoration: none;\n}\n.experienceBlock .experience-detail-block .experience-card-detail .experience-details .experience-yearText {\n font-size: 2rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n color: #ffffff;\n line-height: normal;\n margin-top: 8px;\n display: block;\n}\n.experienceBlock .experience-detail-block .experience-card-detail .details-description .overViewLable {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n color: #64e4cb;\n line-height: normal;\n margin-bottom: 8px;\n display: inline-block;\n}\n.experienceBlock .experience-detail-block .experience-card-detail .details-description .details-overview {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #ffffff;\n line-height: normal;\n}\n\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.7);\n z-index: 998;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n display: none;\n}\n.modal-overlay.active {\n opacity: 1;\n visibility: visible;\n}\n\n.modal-content {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #06234f;\n border-radius: 0px;\n padding: 20px;\n max-height: 80vh;\n overflow-y: auto;\n z-index: 999;\n transform: translateY(100%);\n transition: transform 0.3s ease;\n display: none;\n}\n.modal-content.active {\n transform: translateY(0);\n}\n.modal-content .modal-drag-handle {\n width: 40px;\n height: 4px;\n background: #64e4cb;\n border-radius: 2px;\n margin: 0 auto 15px;\n}\n.modal-content .modal-header {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 15px;\n}\n.modal-content .modal-header .modal-close {\n background: none;\n border: none;\n color: #64e4cb;\n font-size: 2rem;\n cursor: pointer;\n padding: 0;\n width: 35px;\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.2s ease, transform 0.2s ease;\n}\n.modal-content .modal-header .modal-close:hover {\n color: #ffffff;\n transform: scale(1.1);\n}\n.modal-content #modalBody .card-details-heading {\n font-size: 28px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n color: #ffffff;\n line-height: 1.2;\n margin: 0 0 20px 0;\n}\n.modal-content #modalBody .experience-details {\n margin-bottom: 25px;\n}\n.modal-content #modalBody .experience-details .experienceLink {\n font-size: 1rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n text-decoration: none;\n display: block;\n margin-bottom: 8px;\n}\n.modal-content #modalBody .experience-details .experience-yearText {\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n color: #ffffff;\n line-height: normal;\n display: block;\n}\n.modal-content #modalBody .details-description .overViewLable {\n font-size: 1.125rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n color: #64e4cb;\n line-height: normal;\n display: block;\n margin-bottom: 10px;\n}\n.modal-content #modalBody .details-description .details-overview {\n font-size: 1rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #ffffff;\n line-height: 1.5;\n}\n.modal-content #modalBody .details-description .details-overview p {\n margin: 0 0 1em 0;\n}\n.modal-content #modalBody .details-description .details-overview p:last-child {\n margin-bottom: 0;\n}\n\n@media (max-width: 1200px) {\n /* Add Block CSS Here */\n .experienceBlock .experienceheading {\n padding: 50px;\n }\n .experienceBlock .experienceheading .techStackTitle {\n font-size: 4rem;\n }\n .experienceBlock .experience-detail-block .experience-cards .experience-card {\n padding: 25px;\n gap: 12px;\n }\n .experienceBlock .experience-detail-block .experience-card-detail {\n padding: 50px;\n gap: 24px;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .card-details-heading {\n font-size: 2.5rem;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .details-description .details-overview {\n font-size: 1.25rem;\n }\n}\n@media (max-width: 1024px) {\n /* Add Block CSS Here */\n .experienceBlock .experienceheading {\n padding: 40px;\n }\n .experienceBlock .experienceheading .techStackTitle {\n font-size: 54px;\n line-height: 1em;\n }\n .experienceBlock .experience-detail-block .experience-cards .experience-card {\n padding: 20px;\n gap: 12px;\n }\n .experienceBlock .experience-detail-block .experience-card-detail {\n padding: 40px;\n gap: 20px;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .card-details-heading {\n font-size: 34px;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .experience-details .experience-yearText {\n font-size: 28px;\n }\n}\n@media (max-width: 768px) {\n .experienceBlock .experienceheading {\n padding: 50px 20px 46px;\n }\n .experienceBlock .experience-detail-block {\n flex-direction: column;\n }\n .experienceBlock .experience-detail-block .experience-cards {\n width: 100%;\n }\n .experienceBlock .experience-detail-block .experience-cards .border-right {\n display: none;\n }\n .experienceBlock .experience-detail-block .experience-cards .experience-card {\n padding: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-year {\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n color: #ffffff;\n }\n .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-heading-block .experience-card-title {\n font-size: 1.25rem !important;\n }\n .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-heading-block .websiteLink {\n font-size: 1rem !important;\n }\n .experienceBlock .experience-detail-block .experience-cards .experience-card .experienceDetails {\n font-size: 1.125rem !important;\n }\n .experienceBlock .experience-detail-block .experience-card-detail {\n display: none !important;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .card-details-heading {\n font-size: 48px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n color: #ffffff;\n line-height: normal;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .experience-details .experienceLink {\n font-size: 1rem !important;\n display: block;\n margin-bottom: 8px;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .experience-details .experience-yearText {\n font-size: 1.25rem !important;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .details-description .overViewLable {\n font-size: 1.125rem !important;\n display: block;\n margin-bottom: 10px;\n }\n .experienceBlock .experience-detail-block .experience-card-detail .details-description .details-overview {\n font-size: 1rem !important;\n line-height: 1.5;\n }\n .modal-overlay {\n display: block;\n }\n .modal-content {\n display: block;\n }\n}\n@media (max-width: 576px) {\n .experienceBlock .experienceheading {\n padding: 38px 20px 36px;\n }\n .experienceBlock .experienceheading .techStackTitle {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .modal-content #modalBody .card-details-heading {\n font-size: 1.5rem;\n }\n .modal-content #modalBody .experience-details .experienceLink {\n font-size: 14px;\n }\n .modal-content #modalBody .experience-details .experience-yearText {\n font-size: 1.125rem;\n }\n .modal-content #modalBody .details-description .overViewLable {\n font-size: 1rem;\n }\n .modal-content #modalBody .details-description .details-overview {\n font-size: 14px;\n }\n}","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n/* Add Block CSS Here */\n.experienceBlock {\n position: relative;\n\n .experienceheading {\n padding: 70px;\n position: relative;\n\n .techStackTitle {\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: $text-dark-primary;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n }\n\n .experience-detail-block {\n display: flex;\n position: relative;\n width: 100%;\n\n .experience-cards {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n width: 50%;\n scroll-snap-align: start;\n height: 100%;\n position: relative;\n\n &.active {\n background-color: $bg-tranparent;\n }\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background-color: $color-primary;\n }\n .experience-card {\n padding: 35px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n position: relative;\n cursor: pointer;\n transition: background-color 0.3s ease;\n\n &.active {\n background-color: rgba(100, 228, 203, 0.3);\n }\n\n &:hover {\n background-color: rgba(100, 228, 203, 0.1);\n }\n &:last-child {\n .border-bottom-line {\n display: none;\n }\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: $color-primary;\n }\n .experience-year {\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n color: $white;\n }\n .experience-heading-block {\n .experience-card-title {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n line-height: normal;\n color: $color-primary;\n margin-bottom: 4px;\n }\n .websiteLink {\n font-size: $text-lg;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $white;\n line-height: normal;\n }\n }\n .experienceDetails {\n font-size: $text-xxl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $white;\n line-height: normal;\n }\n }\n }\n .experience-card-detail {\n position: sticky;\n top: 0px;\n padding: 70px;\n display: flex;\n flex-direction: column;\n gap: 30px;\n background: inherit;\n\n .card-details-heading {\n font-size: $font-48;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n color: $white;\n line-height: normal;\n }\n .experience-details {\n .experienceLink {\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n text-decoration: none;\n }\n .experience-yearText {\n font-size: $heading-xl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n color: $white;\n line-height: normal;\n margin-top: 8px;\n display: block;\n }\n }\n .details-description {\n .overViewLable {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n color: $color-primary;\n line-height: normal;\n margin-bottom: 8px;\n display: inline-block;\n }\n .details-overview {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $white;\n line-height: normal;\n }\n }\n }\n }\n}\n// Modal Styles\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.7);\n z-index: 998;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 0.3s ease,\n visibility 0.3s ease;\n display: none;\n\n &.active {\n opacity: 1;\n visibility: visible;\n }\n}\n\n.modal-content {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: $color-primary-dark;\n border-radius: 0px;\n padding: 20px;\n max-height: 80vh;\n overflow-y: auto;\n z-index: 999;\n transform: translateY(100%);\n transition: transform 0.3s ease;\n display: none;\n\n &.active {\n transform: translateY(0);\n }\n\n .modal-drag-handle {\n width: 40px;\n height: 4px;\n background: $color-primary;\n border-radius: 2px;\n margin: 0 auto 15px;\n }\n\n .modal-header {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 15px;\n\n .modal-close {\n background: none;\n border: none;\n color: $color-primary;\n font-size: $heading-xl;\n cursor: pointer;\n padding: 0;\n width: 35px;\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n color 0.2s ease,\n transform 0.2s ease;\n\n &:hover {\n color: $white;\n transform: scale(1.1);\n }\n }\n }\n\n #modalBody {\n .card-details-heading {\n font-size: $font-28;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n color: $white;\n line-height: 1.2;\n margin: 0 0 20px 0;\n }\n\n .experience-details {\n margin-bottom: 25px;\n\n .experienceLink {\n font-size: $text-base;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n text-decoration: none;\n display: block;\n margin-bottom: 8px;\n }\n\n .experience-yearText {\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n color: $white;\n line-height: normal;\n display: block;\n }\n }\n\n .details-description {\n .overViewLable {\n font-size: $heading-xs;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n color: $color-primary;\n line-height: normal;\n display: block;\n margin-bottom: 10px;\n }\n\n .details-overview {\n font-size: $text-base;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $white;\n line-height: 1.5;\n\n p {\n margin: 0 0 1em 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n /* Add Block CSS Here */\n .experienceBlock {\n .experienceheading {\n padding: 50px;\n\n .techStackTitle {\n font-size: $heading-6xl;\n }\n }\n\n .experience-detail-block {\n .experience-cards {\n .experience-card {\n padding: 25px;\n gap: 12px;\n }\n }\n .experience-card-detail {\n padding: 50px;\n gap: 24px;\n\n .card-details-heading {\n font-size: $heading-2xl;\n }\n\n .details-description {\n .details-overview {\n font-size: $heading-sm;\n }\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n /* Add Block CSS Here */\n .experienceBlock {\n .experienceheading {\n padding: 40px;\n\n .techStackTitle {\n font-size: $font-54;\n line-height: 1em;\n }\n }\n\n .experience-detail-block {\n .experience-cards {\n .experience-card {\n padding: 20px;\n gap: 12px;\n }\n }\n .experience-card-detail {\n padding: 40px;\n gap: 20px;\n\n .card-details-heading {\n font-size: $font-34;\n }\n .experience-details {\n .experience-yearText {\n font-size: $font-28;\n }\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .experienceBlock {\n .experienceheading {\n padding: 50px 20px 46px;\n }\n\n .experience-detail-block {\n flex-direction: column;\n\n .experience-cards {\n width: 100%;\n .border-right {\n display: none;\n }\n\n .experience-card {\n padding: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n\n .experience-year {\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n color: $white;\n }\n .experience-heading-block {\n .experience-card-title {\n font-size: $heading-sm !important;\n }\n .websiteLink {\n font-size: $text-base !important;\n }\n }\n .experienceDetails {\n font-size: $heading-xs !important;\n }\n }\n }\n .experience-card-detail {\n display: none !important;\n\n .card-details-heading {\n font-size: $font-48;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n color: $white;\n line-height: normal;\n }\n .experience-details {\n .experienceLink {\n font-size: $text-base !important;\n display: block;\n margin-bottom: 8px;\n }\n .experience-yearText {\n font-size: $heading-sm !important;\n }\n }\n .details-description {\n .overViewLable {\n font-size: $heading-xs !important;\n display: block;\n margin-bottom: 10px;\n }\n .details-overview {\n font-size: $text-base !important;\n line-height: 1.5;\n }\n }\n }\n }\n }\n // Show modal on mobile/tablet\n .modal-overlay {\n display: block;\n }\n\n .modal-content {\n display: block;\n }\n}\n@media (max-width: 576px) {\n .experienceBlock {\n .experienceheading {\n padding: 38px 20px 36px;\n\n .techStackTitle {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n }\n }\n .modal-content {\n #modalBody {\n .card-details-heading {\n font-size: $heading-md;\n }\n\n .experience-details {\n .experienceLink {\n font-size: 14px;\n }\n\n .experience-yearText {\n font-size: $heading-xs;\n }\n }\n\n .details-description {\n .overViewLable {\n font-size: $text-base;\n }\n\n .details-overview {\n font-size: 14px;\n }\n }\n }\n }\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } /* Add Block CSS Here */ .experienceBlock { position: relative; } .experienceBlock .experienceheading { padding: 70px; position: relative; } .experienceBlock .experienceheading .techStackTitle { font-size: 5rem; font-weight: 500; margin: 0; display: flex; line-height: 1.2em; align-items: center; font-family: "PPSupplySans-Regular", sans-serif; color: #e5f1fd; } .experienceBlock .experienceheading .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .experienceBlock .experience-detail-block { display: flex; position: relative; width: 100%; } .experienceBlock .experience-detail-block .experience-cards { display: flex; flex-direction: column; flex-shrink: 0; width: 50%; scroll-snap-align: start; height: 100%; position: relative; } .experienceBlock .experience-detail-block .experience-cards.active { background-color: rgba(100, 228, 203, 0.2); } .experienceBlock .experience-detail-block .experience-cards .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #64e4cb; } .experienceBlock .experience-detail-block .experience-cards .experience-card { padding: 35px; display: flex; flex-direction: column; gap: 16px; position: relative; cursor: pointer; transition: background-color 0.3s ease; } .experienceBlock .experience-detail-block .experience-cards .experience-card.active { background-color: rgba(100, 228, 203, 0.3); } .experienceBlock .experience-detail-block .experience-cards .experience-card:hover { background-color: rgba(100, 228, 203, 0.1); } .experienceBlock .experience-detail-block .experience-cards .experience-card:last-child .border-bottom-line { display: none; } .experienceBlock .experience-detail-block .experience-cards .experience-card .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #64e4cb; } .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-year { font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; color: #ffffff; } .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-heading-block .experience-card-title { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; line-height: normal; color: #64e4cb; margin-bottom: 4px; } .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-heading-block .websiteLink { font-size: 1.125rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #ffffff; line-height: normal; } .experienceBlock .experience-detail-block .experience-cards .experience-card .experienceDetails { font-size: 1.4375rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #ffffff; line-height: normal; } .experienceBlock .experience-detail-block .experience-card-detail { position: sticky; top: 0px; padding: 70px; display: flex; flex-direction: column; gap: 30px; background: inherit; } .experienceBlock .experience-detail-block .experience-card-detail .card-details-heading { font-size: 48px; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; color: #ffffff; line-height: normal; } .experienceBlock .experience-detail-block .experience-card-detail .experience-details .experienceLink { font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #64e4cb; line-height: normal; text-decoration: none; } .experienceBlock .experience-detail-block .experience-card-detail .experience-details .experience-yearText { font-size: 2rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; color: #ffffff; line-height: normal; margin-top: 8px; display: block; } .experienceBlock .experience-detail-block .experience-card-detail .details-description .overViewLable { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; color: #64e4cb; line-height: normal; margin-bottom: 8px; display: inline-block; } .experienceBlock .experience-detail-block .experience-card-detail .details-description .details-overview { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #ffffff; line-height: normal; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; display: none; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { position: fixed; bottom: 0; left: 0; right: 0; background: #06234f; border-radius: 0px; padding: 20px; max-height: 80vh; overflow-y: auto; z-index: 999; transform: translateY(100%); transition: transform 0.3s ease; display: none; } .modal-content.active { transform: translateY(0); } .modal-content .modal-drag-handle { width: 40px; height: 4px; background: #64e4cb; border-radius: 2px; margin: 0 auto 15px; } .modal-content .modal-header { display: flex; justify-content: flex-end; margin-bottom: 15px; } .modal-content .modal-header .modal-close { background: none; border: none; color: #64e4cb; font-size: 2rem; cursor: pointer; padding: 0; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease, transform 0.2s ease; } .modal-content .modal-header .modal-close:hover { color: #ffffff; transform: scale(1.1); } .modal-content #modalBody .card-details-heading { font-size: 28px; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; color: #ffffff; line-height: 1.2; margin: 0 0 20px 0; } .modal-content #modalBody .experience-details { margin-bottom: 25px; } .modal-content #modalBody .experience-details .experienceLink { font-size: 1rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #64e4cb; line-height: normal; text-decoration: none; display: block; margin-bottom: 8px; } .modal-content #modalBody .experience-details .experience-yearText { font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; color: #ffffff; line-height: normal; display: block; } .modal-content #modalBody .details-description .overViewLable { font-size: 1.125rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; color: #64e4cb; line-height: normal; display: block; margin-bottom: 10px; } .modal-content #modalBody .details-description .details-overview { font-size: 1rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #ffffff; line-height: 1.5; } .modal-content #modalBody .details-description .details-overview p { margin: 0 0 1em 0; } .modal-content #modalBody .details-description .details-overview p:last-child { margin-bottom: 0; } @media (max-width: 1200px) { /* Add Block CSS Here */ .experienceBlock .experienceheading { padding: 50px; } .experienceBlock .experienceheading .techStackTitle { font-size: 4rem; } .experienceBlock .experience-detail-block .experience-cards .experience-card { padding: 25px; gap: 12px; } .experienceBlock .experience-detail-block .experience-card-detail { padding: 50px; gap: 24px; } .experienceBlock .experience-detail-block .experience-card-detail .card-details-heading { font-size: 2.5rem; } .experienceBlock .experience-detail-block .experience-card-detail .details-description .details-overview { font-size: 1.25rem; } } @media (max-width: 1024px) { /* Add Block CSS Here */ .experienceBlock .experienceheading { padding: 40px; } .experienceBlock .experienceheading .techStackTitle { font-size: 54px; line-height: 1em; } .experienceBlock .experience-detail-block .experience-cards .experience-card { padding: 20px; gap: 12px; } .experienceBlock .experience-detail-block .experience-card-detail { padding: 40px; gap: 20px; } .experienceBlock .experience-detail-block .experience-card-detail .card-details-heading { font-size: 34px; } .experienceBlock .experience-detail-block .experience-card-detail .experience-details .experience-yearText { font-size: 28px; } } @media (max-width: 768px) { .experienceBlock .experienceheading { padding: 50px 20px 46px; } .experienceBlock .experience-detail-block { flex-direction: column; } .experienceBlock .experience-detail-block .experience-cards { width: 100%; } .experienceBlock .experience-detail-block .experience-cards .border-right { display: none; } .experienceBlock .experience-detail-block .experience-cards .experience-card { padding: 20px; cursor: pointer; transition: background-color 0.3s ease; } .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-year { font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; color: #ffffff; } .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-heading-block .experience-card-title { font-size: 1.25rem !important; } .experienceBlock .experience-detail-block .experience-cards .experience-card .experience-heading-block .websiteLink { font-size: 1rem !important; } .experienceBlock .experience-detail-block .experience-cards .experience-card .experienceDetails { font-size: 1.125rem !important; } .experienceBlock .experience-detail-block .experience-card-detail { display: none !important; } .experienceBlock .experience-detail-block .experience-card-detail .card-details-heading { font-size: 48px; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; color: #ffffff; line-height: normal; } .experienceBlock .experience-detail-block .experience-card-detail .experience-details .experienceLink { font-size: 1rem !important; display: block; margin-bottom: 8px; } .experienceBlock .experience-detail-block .experience-card-detail .experience-details .experience-yearText { font-size: 1.25rem !important; } .experienceBlock .experience-detail-block .experience-card-detail .details-description .overViewLable { font-size: 1.125rem !important; display: block; margin-bottom: 10px; } .experienceBlock .experience-detail-block .experience-card-detail .details-description .details-overview { font-size: 1rem !important; line-height: 1.5; } .modal-overlay { display: block; } .modal-content { display: block; } } @media (max-width: 576px) { .experienceBlock .experienceheading { padding: 38px 20px 36px; } .experienceBlock .experienceheading .techStackTitle { font-size: 2.75rem; line-height: 1em; } .modal-content #modalBody .card-details-heading { font-size: 1.5rem; } .modal-content #modalBody .experience-details .experienceLink { font-size: 14px; } .modal-content #modalBody .experience-details .experience-yearText { font-size: 1.125rem; } .modal-content #modalBody .details-description .overViewLable { font-size: 1rem; } .modal-content #modalBody .details-description .details-overview { font-size: 14px; } } /*# sourceMappingURL=experience-timeline.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/"],"names":[],"mappings":"AAAA,uBAAA","file":"hero-banner-container.css","sourcesContent":["/* Add Block CSS Here */"]} /* Add Block CSS Here */ /*# sourceMappingURL=hero-banner-container.css.map */ {"version":3,"sources":["data:;charset=utf-8,.bannerWrapper%20%7B%0A%20%20/%20background-color:%20$text-dark-primary;%0A%20%20/%20color:%20$white;%0A%20%20/%20flex-direction:%20row;%0A%20%20/%20min-height:%20100vh;%0A%20%20/%20padding-top:%2090px;%0A%20%20/%20display:%20flex;%0A%20%20/%20overflow-y:%20hidden;%0A%0A%20%20.container-fluid%20%7B%0A%20%20%20%20padding:%200;%0A%20%20%7D%0A%0A%20%20.bannerContainer%20%7B%0A%20%20%20%20display:%20grid;%0A%20%20%20%20flex:%201;%0A%20%20%20%20grid-template-columns:%201fr%201fr;%0A%20%20%20%20grid-auto-columns:%201fr;%0A%20%20%20%20height:%20100%25;%0A%0A%20%20%20%20.bannerLeftSide%20%7B%0A%20%20%20%20%20%20z-index:%207;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20padding:%206rem;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20gap:%2016px;%0A%0A%20%20%20%20%20%20/%20@include%20breakpoint(1400)%20%7B%0A%20%20%20%20%20%20/%20%20%20padding:%2064px;%0A%20%20%20%20%20%20/%20%7D%0A%0A%20%20%20%20%20%20.bannerLabel%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%2012px;%0A%0A%20%20%20%20%20%20%20%20/%20@include%20breakpoint(991)%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20flex-wrap:%20wrap;%0A%20%20%20%20%20%20%20%20/%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20/%20%7D%0A%0A%20%20%20%20%20%20%20%20.siteInfoSub%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%206px%208px;%0A%20%20%20%20%20%20%20%20%20%20border-radius:%204px;%0A%20%20%20%20%20%20%20%20%20%20/%20background-color:%20$bg-tranparent;%0A%20%20%20%20%20%20%20%20%20%20/%20border:%201px%20solid%20$border-tranparent;%0A%20%20%20%20%20%20%20%20%20%20width:%20max-content;%0A%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Roboto%20Mono%22,%20monospace;%0A%20%20%20%20%20%20%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20%20%20%20%20%20%20margin-bottom:%208px;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2012px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.siteInfoHeading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%2088px;%0A%20%20%20%20%20%20%20%20font-family:%20%22General%20Sans%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20line-height:%20110%25;%0A%0A%20%20%20%20%20%20%20%20/%20@include%20breakpoint(1400)%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20font-size:%205vw;%0A%20%20%20%20%20%20%20%20/%20%7D%0A%20%20%20%20%20%20%20%20/%20@include%20breakpoint(991)%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20font-size:%2064px;%0A%20%20%20%20%20%20%20%20/%20%20%20text-align:%20center;%0A%20%20%20%20%20%20%20%20/%20%7D%0A%20%20%20%20%20%20%20%20/%20@include%20breakpoint(767)%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20font-size:%2044px;%0A%20%20%20%20%20%20%20%20/%20%20%20line-height:%20120%25;%0A%20%20%20%20%20%20%20%20/%20%7D%0A%20%20%20%20%20%20%20%20/%20@include%20breakpoint(576)%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20font-size:%2036px;%0A%20%20%20%20%20%20%20%20/%20%7D%0A%0A%20%20%20%20%20%20%20%20.span-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.siteInfomation%20%7B%0A%20%20%20%20%20%20%20%20font-family:%20%22Inter%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20line-height:%2033px;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.button-group%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20padding-top:%2016px;%0A%20%20%20%20%20%20%20%20gap:%2016px;%0A%0A%20%20%20%20%20%20%20%20.cta-btn%20%7B%0A%20%20%20%20%20%20%20%20%20%20/%20background-color:%20$bg-tranparent;%0A%20%20%20%20%20%20%20%20%20%20padding:%2012px%2016px;%0A%20%20%20%20%20%20%20%20%20%20/%20border-color:%20$border-tranparent%20!important;%0A%20%20%20%20%20%20%20%20%20%20border-radius:%208px;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Inter%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-size:%2015px;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2015px;%0A%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20400;%0A%20%20%20%20%20%20%20%20%20%20height:%2043px;%0A%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex%20!important;%0A%20%20%20%20%20%20%20%20%20%20/%20@include%20blurBtn;%0A%0A%20%20%20%20%20%20%20%20%20%20.hover-effect%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.bannerRightSide%20%7B%0A%20%20%20%20%20%20margin-top:%20-90px;%0A%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20overflow:%20hidden;%0A%0A%20%20%20%20%20%20.bannerVideo%20%7B%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%0A%20%20%20%20%20%20%20%20.backgroundVideo%20%7B%0A%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.overlay%20%7B%0A%20%20%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%20%20%20%20/%20background-color:%20$text-dark-primary;%0A%20%20%20%20%20%20%20%20opacity:%200.4;%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset:%200%25;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.hero-scroll%20%7B%0A%20%20%20%20%20%20%20%20z-index:%204;%0A%20%20%20%20%20%20%20%20justify-content:%20flex-start;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20/%20display:%20none;%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset:%20auto%200%204rem%204rem;%0A%0A%20%20%20%20%20%20%20%20.hero-link%20%7B%0A%20%20%20%20%20%20%20%20%20%20grid-column-gap:%200.75rem;%0A%20%20%20%20%20%20%20%20%20%20grid-row-gap:%200.75rem;%0A%20%20%20%20%20%20%20%20%20%20flex-wrap:%20nowrap;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20%20%20list-style-type:%20none;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.labelTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Roboto%20Mono%22,%20monospace;%0A%20%20%20%20%20%20%20%20%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.arrowIcon%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20/%20border:%201px%20solid%20$border-tranparent;%0A%20%20%20%20%20%20%20%20%20%20%20%20/%20background-color:%20$bg-tranparent;%0A%20%20%20%20%20%20%20%20%20%20%20%20backdrop-filter:%20blur(2rem);%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20transform-style:%20preserve-3d;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%20118px;%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding-left:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20filter:%20brightness(0)%20saturate(100%25)%20invert(99%25)%20sepia(0%25)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20saturate(733%25)%20hue-rotate(70deg)%20brightness(122%25)%20contrast(100%25);%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transition:%20transform%200.3s%20ease;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.arrowIcon%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20animation:%20animate%202s%20linear%20infinite;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A@keyframes%20animate%20%7B%0A%20%200%25%20%7B%0A%20%20%20%20transform:%20translateY(-50px);%0A%20%20%7D%0A%20%2020%25%20%7B%0A%20%20%20%20transform:%20translateY(0px);%0A%20%20%7D%0A%20%2040%25%20%7B%0A%20%20%20%20transform:%20translateY(0px);%0A%20%20%7D%0A%20%2060%25%20%7B%0A%20%20%20%20transform:%20translateY(0px);%0A%20%20%7D%0A%20%20100%25%20%7B%0A%20%20%20%20transform:%20translateY(100px);%0A%20%20%7D%0A%7D%0A%0A@media%20screen%20and%20(max-width:%20991px)%20%7B%0A%20%20.bannerWrapper%20%7B%0A%20%20%20%20/%20padding-top:%2074px;%0A%0A%20%20%20%20.bannerContainer%20%7B%0A%20%20%20%20%20%20grid-template-columns:%201fr;%0A%0A%20%20%20%20%20%20.bannerLeftSide%20%7B%0A%20%20%20%20%20%20%20%20padding:%2048px;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%0A%20%20%20%20%20%20%20%20.siteInfomation%20%7B%0A%20%20%20%20%20%20%20%20%20%20max-width:%20600px;%0A%20%20%20%20%20%20%20%20%20%20text-align:%20center;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bannerRightSide%20%7B%0A%20%20%20%20%20%20%20%20margin-top:%200px;%0A%20%20%20%20%20%20%20%20height:%2060vw;%0A%0A%20%20%20%20%20%20%20%20.hero-scroll%20%7B%0A%20%20%20%20%20%20%20%20%20%20bottom:%203rem;%0A%20%20%20%20%20%20%20%20%20%20height:%203rem;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20screen%20and%20(max-width:%20768px)%20%7B%0A%20%20.bannerWrapper%20%7B%0A%20%20%20%20/%20padding-top:%2066px;%0A%0A%20%20%20%20.bannerContainer%20%7B%0A%20%20%20%20%20%20.bannerLeftSide%20%7B%0A%20%20%20%20%20%20%20%20padding:%2048px;%0A%0A%20%20%20%20%20%20%20%20.siteInfomation%20%7B%0A%20%20%20%20%20%20%20%20%20%20max-width:%20600px;%0A%20%20%20%20%20%20%20%20%20%20text-align:%20center;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bannerRightSide%20%7B%0A%20%20%20%20%20%20%20%20height:%2065vw;%0A%20%20%20%20%20%20%20%20padding-top:%202rem;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%0A%20%20%20%20%20%20%20%20.hero-scroll%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20screen%20and%20(max-width:%20567px)%20%7B%0A%20%20.bannerWrapper%20%7B%0A%20%20%20%20/%20padding-top:%2066px;%0A%0A%20%20%20%20.bannerContainer%20%7B%0A%20%20%20%20%20%20.bannerLeftSide%20%7B%0A%20%20%20%20%20%20%20%20padding:%2040px%2020px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.bannerRightSide%20%7B%0A%20%20%20%20%20%20%20%20height:%20100vw;%0A%20%20%20%20%20%20%20%20padding-top:%201rem;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","hero-banner-wrapper.css"],"names":[],"mappings":"AASE;EACE,UAAA;ACRJ;ADWE;EACE,aAAA;EACA,OAAA;EACA,8BAAA;EACA,sBAAA;EACA,YAAA;ACTJ;ADWI;EACE,UAAA;EACA,sBAAA;EACA,uBAAA;EACA,aAAA;EACA,aAAA;EACA,kBAAA;EACA,SAAA;ACTN;ADeM;EACE,aAAA;EACA,mBAAA;EACA,SAAA;ACbR;ADoBQ;EACE,gBAAA;EACA,kBAAA;EAGA,uBAAA;EAAA,kBAAA;EACA,SAAA;EACA,qCAAA;EACA,yBAAA;EACA,kBAAA;EACA,iBAAA;ACpBV;ADuBM;EACE,eAAA;EACA,uCAAA;EACA,iBAAA;ACrBR;ADsCQ;EACE,cAAA;ACpCV;ADuCM;EACE,gCAAA;EACA,iBAAA;ACrCR;ADwCM;EACE,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,SAAA;ACtCR;ADwCQ;EAEE,kBAAA;EAEA,kBAAA;EACA,gCAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EACA,gBAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;EACA,wBAAA;ACxCV;AD2CU;EACE,YAAA;ACzCZ;AD8CI;EACE,iBAAA;EACA,kBAAA;EACA,gBAAA;AC5CN;AD8CM;EACE,YAAA;AC5CR;AD8CQ;EACE,oBAAA;KAAA,iBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;AC5CV;AD+CM;EACE,UAAA;EAEA,YAAA;EACA,kBAAA;EACA,SAAA;AC9CR;ADgDM;EACE,UAAA;EACA,2BAAA;EACA,mBAAA;EAEA,kBAAA;EACA,uBAAA;AC/CR;ADiDQ;EACE,wBAAA;EACA,qBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qBAAA;EACA,qBAAA;EACA,aAAA;EACA,kBAAA;AC/CV;ADiDU;EACE,qCAAA;EACA,yBAAA;AC/CZ;ADiDU;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EAGA,2BAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,4BAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,gCAAA;EACA,gBAAA;ACjDZ;ADmDY;EACE,WAAA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;KAAA,mBAAA;EACA,2HAAA;EAEA,+BAAA;AClDd;ADuDY;EACE,qCAAA;ACrDd;;AD8DA;EACE;IACE,4BAAA;EC3DF;ED6DA;IACE,0BAAA;EC3DF;ED6DA;IACE,0BAAA;EC3DF;ED6DA;IACE,0BAAA;EC3DF;ED6DA;IACE,4BAAA;EC3DF;AACF;AD8DA;EAII;IACE,0BAAA;EC/DJ;EDiEI;IACE,aAAA;IACA,mBAAA;EC/DN;EDiEM;IACE,gBAAA;IACA,kBAAA;EC/DR;EDkEI;IACE,eAAA;IACA,YAAA;EChEN;EDkEM;IACE,YAAA;IACA,YAAA;EChER;AACF;ADqEA;EAKM;IACE,aAAA;ECvEN;EDyEM;IACE,gBAAA;IACA,kBAAA;ECvER;ED0EI;IACE,YAAA;IACA,iBAAA;IACA,aAAA;ECxEN;ED0EM;IACE,aAAA;ECxER;AACF;AD6EA;EAKM;IACE,kBAAA;EC/EN;EDiFI;IACE,aAAA;IACA,iBAAA;EC/EN;AACF","file":"hero-banner-wrapper.css","sourcesContent":[".bannerWrapper {\n // background-color: $text-dark-primary;\n // color: $white;\n // flex-direction: row;\n // min-height: 100vh;\n // padding-top: 90px;\n // display: flex;\n // overflow-y: hidden;\n\n .container-fluid {\n padding: 0;\n }\n\n .bannerContainer {\n display: grid;\n flex: 1;\n grid-template-columns: 1fr 1fr;\n grid-auto-columns: 1fr;\n height: 100%;\n\n .bannerLeftSide {\n z-index: 7;\n flex-direction: column;\n justify-content: center;\n padding: 6rem;\n display: flex;\n position: relative;\n gap: 16px;\n\n // @include breakpoint(1400) {\n // padding: 64px;\n // }\n\n .bannerLabel {\n display: flex;\n align-items: center;\n gap: 12px;\n\n // @include breakpoint(991) {\n // flex-wrap: wrap;\n // justify-content: center;\n // }\n\n .siteInfoSub {\n padding: 6px 8px;\n border-radius: 4px;\n // background-color: $bg-tranparent;\n // border: 1px solid $border-tranparent;\n width: max-content;\n margin: 0;\n font-family: \"Roboto Mono\", monospace;\n text-transform: uppercase;\n margin-bottom: 8px;\n line-height: 12px;\n }\n }\n .siteInfoHeading {\n font-size: 88px;\n font-family: \"General Sans\", sans-serif;\n line-height: 110%;\n\n // @include breakpoint(1400) {\n // font-size: 5vw;\n // }\n // @include breakpoint(991) {\n // font-size: 64px;\n // text-align: center;\n // }\n // @include breakpoint(767) {\n // font-size: 44px;\n // line-height: 120%;\n // }\n // @include breakpoint(576) {\n // font-size: 36px;\n // }\n\n .span-heading {\n display: block;\n }\n }\n .siteInfomation {\n font-family: \"Inter\", sans-serif;\n line-height: 33px;\n }\n\n .button-group {\n display: flex;\n align-items: center;\n padding-top: 16px;\n gap: 16px;\n\n .cta-btn {\n // background-color: $bg-tranparent;\n padding: 12px 16px;\n // border-color: $border-tranparent !important;\n border-radius: 8px;\n font-family: \"Inter\", sans-serif;\n font-size: 15px;\n line-height: 15px;\n text-decoration: none;\n font-weight: 400;\n height: 43px;\n justify-content: center;\n align-items: center;\n display: flex !important;\n // @include blurBtn;\n\n .hover-effect {\n border: none;\n }\n }\n }\n }\n .bannerRightSide {\n margin-top: -90px;\n position: relative;\n overflow: hidden;\n\n .bannerVideo {\n height: 100%;\n\n .backgroundVideo {\n object-fit: cover;\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n }\n }\n .overlay {\n z-index: 1;\n // background-color: $text-dark-primary;\n opacity: 0.4;\n position: absolute;\n inset: 0%;\n }\n .hero-scroll {\n z-index: 4;\n justify-content: flex-start;\n align-items: center;\n // display: none;\n position: absolute;\n inset: auto 0 4rem 4rem;\n\n .hero-link {\n grid-column-gap: 0.75rem;\n grid-row-gap: 0.75rem;\n flex-wrap: nowrap;\n align-items: center;\n text-decoration: none;\n list-style-type: none;\n display: flex;\n position: relative;\n\n .labelTitle {\n font-family: \"Roboto Mono\", monospace;\n text-transform: uppercase;\n }\n .arrowIcon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n // border: 1px solid $border-tranparent;\n // background-color: $bg-tranparent;\n backdrop-filter: blur(2rem);\n display: flex;\n align-items: center;\n justify-content: center;\n transform-style: preserve-3d;\n position: absolute;\n top: 50%;\n left: 118px;\n transform: translate(-50%, -50%);\n overflow: hidden;\n\n img {\n width: 20px;\n height: 20px;\n padding-left: 1px;\n object-fit: contain;\n filter: brightness(0) saturate(100%) invert(99%) sepia(0%)\n saturate(733%) hue-rotate(70deg) brightness(122%) contrast(100%);\n transition: transform 0.3s ease;\n }\n }\n\n &:hover {\n .arrowIcon img {\n animation: animate 2s linear infinite;\n }\n }\n }\n }\n }\n }\n}\n\n@keyframes animate {\n 0% {\n transform: translateY(-50px);\n }\n 20% {\n transform: translateY(0px);\n }\n 40% {\n transform: translateY(0px);\n }\n 60% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(100px);\n }\n}\n\n@media screen and (max-width: 991px) {\n .bannerWrapper {\n // padding-top: 74px;\n\n .bannerContainer {\n grid-template-columns: 1fr;\n\n .bannerLeftSide {\n padding: 48px;\n align-items: center;\n\n .siteInfomation {\n max-width: 600px;\n text-align: center;\n }\n }\n .bannerRightSide {\n margin-top: 0px;\n height: 60vw;\n\n .hero-scroll {\n bottom: 3rem;\n height: 3rem;\n }\n }\n }\n }\n}\n@media screen and (max-width: 768px) {\n .bannerWrapper {\n // padding-top: 66px;\n\n .bannerContainer {\n .bannerLeftSide {\n padding: 48px;\n\n .siteInfomation {\n max-width: 600px;\n text-align: center;\n }\n }\n .bannerRightSide {\n height: 65vw;\n padding-top: 2rem;\n display: flex;\n\n .hero-scroll {\n display: none;\n }\n }\n }\n }\n}\n@media screen and (max-width: 567px) {\n .bannerWrapper {\n // padding-top: 66px;\n\n .bannerContainer {\n .bannerLeftSide {\n padding: 40px 20px;\n }\n .bannerRightSide {\n height: 100vw;\n padding-top: 1rem;\n }\n }\n }\n}\n",".bannerWrapper .container-fluid {\n padding: 0;\n}\n.bannerWrapper .bannerContainer {\n display: grid;\n flex: 1;\n grid-template-columns: 1fr 1fr;\n grid-auto-columns: 1fr;\n height: 100%;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide {\n z-index: 7;\n flex-direction: column;\n justify-content: center;\n padding: 6rem;\n display: flex;\n position: relative;\n gap: 16px;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide .bannerLabel {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide .bannerLabel .siteInfoSub {\n padding: 6px 8px;\n border-radius: 4px;\n width: max-content;\n margin: 0;\n font-family: \"Roboto Mono\", monospace;\n text-transform: uppercase;\n margin-bottom: 8px;\n line-height: 12px;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide .siteInfoHeading {\n font-size: 88px;\n font-family: \"General Sans\", sans-serif;\n line-height: 110%;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide .siteInfoHeading .span-heading {\n display: block;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide .siteInfomation {\n font-family: \"Inter\", sans-serif;\n line-height: 33px;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide .button-group {\n display: flex;\n align-items: center;\n padding-top: 16px;\n gap: 16px;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide .button-group .cta-btn {\n padding: 12px 16px;\n border-radius: 8px;\n font-family: \"Inter\", sans-serif;\n font-size: 15px;\n line-height: 15px;\n text-decoration: none;\n font-weight: 400;\n height: 43px;\n justify-content: center;\n align-items: center;\n display: flex !important;\n}\n.bannerWrapper .bannerContainer .bannerLeftSide .button-group .cta-btn .hover-effect {\n border: none;\n}\n.bannerWrapper .bannerContainer .bannerRightSide {\n margin-top: -90px;\n position: relative;\n overflow: hidden;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .bannerVideo {\n height: 100%;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .bannerVideo .backgroundVideo {\n object-fit: cover;\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .overlay {\n z-index: 1;\n opacity: 0.4;\n position: absolute;\n inset: 0%;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .hero-scroll {\n z-index: 4;\n justify-content: flex-start;\n align-items: center;\n position: absolute;\n inset: auto 0 4rem 4rem;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link {\n grid-column-gap: 0.75rem;\n grid-row-gap: 0.75rem;\n flex-wrap: nowrap;\n align-items: center;\n text-decoration: none;\n list-style-type: none;\n display: flex;\n position: relative;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link .labelTitle {\n font-family: \"Roboto Mono\", monospace;\n text-transform: uppercase;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link .arrowIcon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n backdrop-filter: blur(2rem);\n display: flex;\n align-items: center;\n justify-content: center;\n transform-style: preserve-3d;\n position: absolute;\n top: 50%;\n left: 118px;\n transform: translate(-50%, -50%);\n overflow: hidden;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link .arrowIcon img {\n width: 20px;\n height: 20px;\n padding-left: 1px;\n object-fit: contain;\n filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(733%) hue-rotate(70deg) brightness(122%) contrast(100%);\n transition: transform 0.3s ease;\n}\n.bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link:hover .arrowIcon img {\n animation: animate 2s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: translateY(-50px);\n }\n 20% {\n transform: translateY(0px);\n }\n 40% {\n transform: translateY(0px);\n }\n 60% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(100px);\n }\n}\n@media screen and (max-width: 991px) {\n .bannerWrapper .bannerContainer {\n grid-template-columns: 1fr;\n }\n .bannerWrapper .bannerContainer .bannerLeftSide {\n padding: 48px;\n align-items: center;\n }\n .bannerWrapper .bannerContainer .bannerLeftSide .siteInfomation {\n max-width: 600px;\n text-align: center;\n }\n .bannerWrapper .bannerContainer .bannerRightSide {\n margin-top: 0px;\n height: 60vw;\n }\n .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll {\n bottom: 3rem;\n height: 3rem;\n }\n}\n@media screen and (max-width: 768px) {\n .bannerWrapper .bannerContainer .bannerLeftSide {\n padding: 48px;\n }\n .bannerWrapper .bannerContainer .bannerLeftSide .siteInfomation {\n max-width: 600px;\n text-align: center;\n }\n .bannerWrapper .bannerContainer .bannerRightSide {\n height: 65vw;\n padding-top: 2rem;\n display: flex;\n }\n .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll {\n display: none;\n }\n}\n@media screen and (max-width: 567px) {\n .bannerWrapper .bannerContainer .bannerLeftSide {\n padding: 40px 20px;\n }\n .bannerWrapper .bannerContainer .bannerRightSide {\n height: 100vw;\n padding-top: 1rem;\n }\n}"]} .bannerWrapper .container-fluid { padding: 0; } .bannerWrapper .bannerContainer { display: grid; flex: 1; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; height: 100%; } .bannerWrapper .bannerContainer .bannerLeftSide { z-index: 7; flex-direction: column; justify-content: center; padding: 6rem; display: flex; position: relative; gap: 16px; } .bannerWrapper .bannerContainer .bannerLeftSide .bannerLabel { display: flex; align-items: center; gap: 12px; } .bannerWrapper .bannerContainer .bannerLeftSide .bannerLabel .siteInfoSub { padding: 6px 8px; border-radius: 4px; width: -moz-max-content; width: max-content; margin: 0; font-family: "Roboto Mono", monospace; text-transform: uppercase; margin-bottom: 8px; line-height: 12px; } .bannerWrapper .bannerContainer .bannerLeftSide .siteInfoHeading { font-size: 88px; font-family: "General Sans", sans-serif; line-height: 110%; } .bannerWrapper .bannerContainer .bannerLeftSide .siteInfoHeading .span-heading { display: block; } .bannerWrapper .bannerContainer .bannerLeftSide .siteInfomation { font-family: "Inter", sans-serif; line-height: 33px; } .bannerWrapper .bannerContainer .bannerLeftSide .button-group { display: flex; align-items: center; padding-top: 16px; gap: 16px; } .bannerWrapper .bannerContainer .bannerLeftSide .button-group .cta-btn { padding: 12px 16px; border-radius: 8px; font-family: "Inter", sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; font-weight: 400; height: 43px; justify-content: center; align-items: center; display: flex !important; } .bannerWrapper .bannerContainer .bannerLeftSide .button-group .cta-btn .hover-effect { border: none; } .bannerWrapper .bannerContainer .bannerRightSide { margin-top: -90px; position: relative; overflow: hidden; } .bannerWrapper .bannerContainer .bannerRightSide .bannerVideo { height: 100%; } .bannerWrapper .bannerContainer .bannerRightSide .bannerVideo .backgroundVideo { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; position: relative; overflow: hidden; } .bannerWrapper .bannerContainer .bannerRightSide .overlay { z-index: 1; opacity: 0.4; position: absolute; inset: 0%; } .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll { z-index: 4; justify-content: flex-start; align-items: center; position: absolute; inset: auto 0 4rem 4rem; } .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link { grid-column-gap: 0.75rem; grid-row-gap: 0.75rem; flex-wrap: nowrap; align-items: center; text-decoration: none; list-style-type: none; display: flex; position: relative; } .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link .labelTitle { font-family: "Roboto Mono", monospace; text-transform: uppercase; } .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link .arrowIcon { width: 40px; height: 40px; border-radius: 50%; backdrop-filter: blur(2rem); display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; position: absolute; top: 50%; left: 118px; transform: translate(-50%, -50%); overflow: hidden; } .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link .arrowIcon img { width: 20px; height: 20px; padding-left: 1px; -o-object-fit: contain; object-fit: contain; filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(733%) hue-rotate(70deg) brightness(122%) contrast(100%); transition: transform 0.3s ease; } .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll .hero-link:hover .arrowIcon img { animation: animate 2s linear infinite; } @keyframes animate { 0% { transform: translateY(-50px); } 20% { transform: translateY(0px); } 40% { transform: translateY(0px); } 60% { transform: translateY(0px); } 100% { transform: translateY(100px); } } @media screen and (max-width: 991px) { .bannerWrapper .bannerContainer { grid-template-columns: 1fr; } .bannerWrapper .bannerContainer .bannerLeftSide { padding: 48px; align-items: center; } .bannerWrapper .bannerContainer .bannerLeftSide .siteInfomation { max-width: 600px; text-align: center; } .bannerWrapper .bannerContainer .bannerRightSide { margin-top: 0px; height: 60vw; } .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll { bottom: 3rem; height: 3rem; } } @media screen and (max-width: 768px) { .bannerWrapper .bannerContainer .bannerLeftSide { padding: 48px; } .bannerWrapper .bannerContainer .bannerLeftSide .siteInfomation { max-width: 600px; text-align: center; } .bannerWrapper .bannerContainer .bannerRightSide { height: 65vw; padding-top: 2rem; display: flex; } .bannerWrapper .bannerContainer .bannerRightSide .hero-scroll { display: none; } } @media screen and (max-width: 567px) { .bannerWrapper .bannerContainer .bannerLeftSide { padding: 40px 20px; } .bannerWrapper .bannerContainer .bannerRightSide { height: 100vw; padding-top: 1rem; } } /*# sourceMappingURL=hero-banner-wrapper.css.map */ {"version":3,"sources":["hero-banner.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/fonts.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/main.scss","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss","variables.scss%22%20as%20*;%0A%0A/*%20Add%20Block%20CSS%20Here%20*/%0A.bannerWrapper%20%7B%0A%20%20margin-top:%2094px;%0A%20%20width:%20100%25;%0A%20%20height:%20698px;%0A%20%20display:%20flex;%0A%20%20padding-left:%20170px;%0A%20%20justify-content:%20space-between;%0A%20%20position:%20relative;%0A%0A%20%20.banner-left%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%20100%25;%0A%20%20%20%20display:%20flex;%0A%20%20%20%20flex-direction:%20column;%0A%20%20%20%20justify-content:%20center;%0A%20%20%20%20position:%20relative;%0A%20%20%20%20z-index:%2020;%0A%20%20%7D%0A%0A%20%20.border-line%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20left:%200;%0A%20%20%7D%0A%0A%20%20.bannerSubHeading%20%7B%0A%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20color:%20$color-primary;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20line-height:%2030px;%0A%20%20%20%20margin-bottom:%2010px;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20display:%20block;%0A%20%20%7D%0A%20%20.bannerHeading%20%7B%0A%20%20%20%20font-size:%2064px;%0A%20%20%20%20color:%20$text-color;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20line-height:%2074px;%0A%20%20%20%20margin-bottom:%2010px;%0A%0A%20%20%20%20.subdetails%20%7B%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20margin-left:%203px;%0A%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20display:%20inline-block;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.button-row%20%7B%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.hero-button-border%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20width:%20170px;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20left:%20-170px;%0A%20%20%20%20%20%20top:%2052px;%0A%20%20%20%20%20%20z-index:%20-1;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20.touchbutton%20%7B%0A%20%20%20%20width:%20fit-content%20!important;%0A%20%20%20%20padding:%2022px%2038px%2022px%2051px;%0A%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20border:%201px%20solid%20$color-primary;%0A%20%20%20%20font-size:%20$text-lg;%0A%20%20%20%20color:%20$black;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20gap:%2014px;%0A%20%20%20%20margin-top:%2020px;%0A%20%20%20%20position:%20relative;%0A%20%20%20%20overflow:%20hidden;%0A%20%20%20%20white-space:%20nowrap;%0A%20%20%20%20cursor:%20pointer;%0A%20%20%20%20text-decoration:%20none;%0A%0A%20%20%20%20img%20%7B%0A%20%20%20%20%20%20width:%2016px;%0A%20%20%20%20%20%20height:%2015px;%0A%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A/*%20DOT%20GRID%20*/%0A%23dot-grid%20%7B%0A%20%20position:%20absolute;%0A%20%20inset:%200;%0A%20%20z-index:%201;%0A%20%20background-image:%20radial-gradient(%0A%20%20%20%20circle,%0A%20%20%20%20rgba(100,%20228,%20203,%200.11)%201px,%0A%20%20%20%20transparent%201px%0A%20%20);%0A%20%20background-size:%2028px%2028px;%0A%20%20pointer-events:%20none;%0A%20%20-webkit-mask-image:%20linear-gradient(%0A%20%20%20%20to%20right,%0A%20%20%20%20rgba(0,%200,%200,%200.65)%200%25,%0A%20%20%20%20rgba(0,%200,%200,%200.65)%2048%25,%0A%20%20%20%20rgba(0,%200,%200,%200)%20100%25%0A%20%20);%0A%20%20mask-image:%20linear-gradient(%0A%20%20%20%20to%20right,%0A%20%20%20%20rgba(0,%200,%200,%200.65)%200%25,%0A%20%20%20%20rgba(0,%200,%200,%200.65)%2048%25,%0A%20%20%20%20rgba(0,%200,%200,%200)%20100%25%0A%20%20);%0A%7D%0A/*%20CANVAS%20*/%0A.banner-right%20%7B%0A%20%20width:%2043%25;%0A%20%20position:%20absolute;%0A%20%20overflow:%20hidden;%0A%20%20min-height:%2080%25;%0A%20%20top:%2060px;%0A%20%20right:%2020px;%0A%0A%20%20.globe-stage%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20inset:%200;%0A%20%20%7D%0A%7D%0A%0A%23globe-canvas%20%7B%0A%20%20position:%20absolute;%0A%20%20inset:%200;%0A%20%20width:%20100%25%20!important;%0A%20%20height:%20100%25%20!important;%0A%7D%0A%0A%23tech-nodes%20%7B%0A%20%20position:%20absolute;%0A%20%20inset:%200;%0A%20%20pointer-events:%20none;%0A%20%20z-index:%2020;%0A%7D%0A%0A.tech-node%20%7B%0A%20%20position:%20absolute;%0A%20%20/*%20Centered%20offset%20%E2%80%94%20set%20ONCE,%20never%20mutated%20by%20JS%20*/%0A%20%20transform:%20translate(-18px,%20-18px);%0A%20%20pointer-events:%20none;%0A%20%20/*%20No%20CSS%20transition%20%E2%80%94%20opacity%20updated%20directly%20each%20frame%20*/%0A%20%20will-change:%20left,%20top,%20opacity;%0A%20%20backface-visibility:%20hidden;%0A%20%20-webkit-backface-visibility:%20hidden;%0A%7D%0A%0A.tech-icon%20%7B%0A%20%20width:%2036px;%0A%20%20height:%2036px;%0A%20%20border-radius:%2050%25;%0A%20%20display:%20flex;%0A%20%20align-items:%20center;%0A%20%20justify-content:%20center;%0A%20%20background:%20rgba(5,%2018,%2048,%200.92);%0A%20%20border:%202px%20solid;%0A%20%20transform:%20translate3d(0,%200,%200);%20/*%20force%20GPU%20rasterisation%20at%201:1%20*/%0A%7D%0A%0A.tech-icon%20svg%20%7B%0A%20%20width:%2018px;%0A%20%20height:%2018px;%0A%20%20display:%20block;%0A%20%20shape-rendering:%20geometricPrecision;%0A%7D%0A%0A@keyframes%20scrollLogos%20%7B%0A%20%20from%20%7B%0A%20%20%20%20transform:%20translateX(0);%0A%20%20%7D%0A%20%20to%20%7B%0A%20%20%20%20transform:%20translateX(-50%25);%0A%20%20%7D%0A%7D%0A@keyframes%20fadeUp%20%7B%0A%20%20from%20%7B%0A%20%20%20%20opacity:%200;%0A%20%20%20%20transform:%20translateY(22px);%0A%20%20%7D%0A%20%20to%20%7B%0A%20%20%20%20opacity:%201;%0A%20%20%20%20transform:%20translateY(0);%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.bannerWrapper%20%7B%0A%20%20%20%20padding-left:%20125px;%0A%0A%20%20%20%20.button-row%20%7B%0A%20%20%20%20%20%20.hero-button-border%20%7B%0A%20%20%20%20%20%20%20%20width:%20125px;%0A%20%20%20%20%20%20%20%20left:%20-125px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.banner-right%20%7B%0A%20%20%20%20top:%2085px;%0A%20%20%20%20right:%200px;%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.bannerWrapper%20%7B%0A%20%20%20%20padding-left:%2080px%20!important;%0A%20%20%20%20height:%20655px;%0A%20%20%20%20align-items:%20center;%0A%0A%20%20%20%20.bannerHeading%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-5xl;%0A%20%20%20%20%20%20line-height:%2064px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.bannerWrapper%20%7B%0A%20%20%20%20flex-direction:%20column;%0A%20%20%20%20padding-left:%2020px%20!important;%0A%20%20%20%20height:%20600px;%0A%20%20%20%20margin-top:%2072px;%0A%0A%20%20%20%20/%20.banner-left,%0A%20%20%20%20/%20.banner-right%20%7B%0A%20%20%20%20/%20%20%20width:%20100%25;%0A%20%20%20%20/%20%7D%0A%0A%20%20%20%20/%20.banner-left%20%7B%0A%20%20%20%20/%20%20%20padding-left:%200;%0A%20%20%20%20/%20%20%20padding-right:%2020px;%0A%20%20%20%20/%20%20%20padding-top:%2070px;%0A%20%20%20%20/%20%20%20min-height:%200;%0A%20%20%20%20/%20%7D%0A%0A%20%20%20%20/%20.banner-left::before%20%7B%0A%20%20%20%20/%20%20%20top:%2070px;%0A%20%20%20%20/%20%7D%0A%0A%20%20%20%20.bannerHeading%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-4xl;%0A%20%20%20%20%20%20line-height:%2056px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.banner-right%20%7B%0A%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.bannerWrapper%20%7B%0A%20%20%20%20padding-left:%2020px;%0A%20%20%20%20height:%20575px;%0A%0A%20%20%20%20.bannerHeading%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20line-height:%2048px;%0A%0A%20%20%20%20%20%20.subdetails%20%7B%0A%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20margin:%208px%200%202px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.touchbutton%20%7B%0A%20%20%20%20%20%20padding:%2018px%2030px%2018px%2041px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"],"names":[],"mappings":"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","file":"hero-banner.css","sourcesContent":["@charset \"UTF-8\";\n@import url(\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap\");\n@font-face {\n font-family: \"PPSupplySans-Regular\";\n src: url(\"../fonts/PPSupplySans-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplySans-Ultralight\";\n src: url(\"../fonts/PPSupplySans-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplyMono-Ultralight\";\n src: url(\"../fonts/PPSupplyMono-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"PPSupplyMono-Regular\";\n src: url(\"../fonts/PPSupplyMono-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\nhtml,\nbody {\n overflow-x: hidden;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n}\n\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n background-color: #06234f;\n}\n\na {\n color: var(--color-theme);\n}\n\nbutton:focus,\n.btn.focus,\n.btn:focus,\n.btn:hover,\na:focus,\n.btn.active,\n.btn:active,\n.btn:active,\n.btn:active:focus,\na:active:focus,\na:active {\n outline: none;\n}\n\na:hover {\n text-decoration: none;\n}\n\na:active {\n text-decoration: none;\n}\n\nimg {\n object-fit: cover;\n max-width: 100%;\n height: auto;\n}\n\n/* Add Block CSS Here */\n.bannerWrapper {\n margin-top: 94px;\n width: 100%;\n height: 698px;\n display: flex;\n padding-left: 170px;\n justify-content: space-between;\n position: relative;\n}\n.bannerWrapper .banner-left {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n z-index: 20;\n}\n.bannerWrapper .border-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n.bannerWrapper .bannerSubHeading {\n font-size: 1.4375rem;\n color: #64e4cb;\n font-weight: 500;\n line-height: 30px;\n margin-bottom: 10px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n display: block;\n}\n.bannerWrapper .bannerHeading {\n font-size: 64px;\n color: #dddddd;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 74px;\n margin-bottom: 10px;\n}\n.bannerWrapper .bannerHeading .subdetails {\n color: #64e4cb;\n font-size: 1.4375rem;\n font-weight: 500;\n margin-left: 3px;\n line-height: 30px;\n display: inline-block;\n}\n.bannerWrapper .button-row {\n position: relative;\n}\n.bannerWrapper .button-row .hero-button-border {\n position: absolute;\n width: 170px;\n height: 1px;\n background-color: #64e4cb;\n left: -170px;\n top: 52px;\n z-index: -1;\n}\n.bannerWrapper .touchbutton {\n width: fit-content !important;\n padding: 22px 38px 22px 51px;\n background-color: #64e4cb;\n border: 1px solid #64e4cb;\n font-size: 1.125rem;\n color: #000000;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n display: flex;\n align-items: center;\n line-height: normal;\n gap: 14px;\n margin-top: 20px;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n cursor: pointer;\n text-decoration: none;\n}\n.bannerWrapper .touchbutton img {\n width: 16px;\n height: 15px;\n object-fit: cover;\n}\n\n/* DOT GRID */\n#dot-grid {\n position: absolute;\n inset: 0;\n z-index: 1;\n background-image: radial-gradient(circle, rgba(100, 228, 203, 0.11) 1px, transparent 1px);\n background-size: 28px 28px;\n pointer-events: none;\n -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0) 100%);\n mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0) 100%);\n}\n\n/* CANVAS */\n.banner-right {\n width: 43%;\n position: absolute;\n overflow: hidden;\n min-height: 80%;\n top: 60px;\n right: 20px;\n}\n.banner-right .globe-stage {\n position: absolute;\n inset: 0;\n}\n\n#globe-canvas {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n}\n\n#tech-nodes {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 20;\n}\n\n.tech-node {\n position: absolute;\n /* Centered offset — set ONCE, never mutated by JS */\n transform: translate(-18px, -18px);\n pointer-events: none;\n /* No CSS transition — opacity updated directly each frame */\n will-change: left, top, opacity;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n}\n\n.tech-icon {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(5, 18, 48, 0.92);\n border: 2px solid;\n transform: translate3d(0, 0, 0); /* force GPU rasterisation at 1:1 */\n}\n\n.tech-icon svg {\n width: 18px;\n height: 18px;\n display: block;\n shape-rendering: geometricPrecision;\n}\n\n@keyframes scrollLogos {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n}\n@keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(22px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@media (max-width: 1200px) {\n .bannerWrapper {\n padding-left: 125px;\n }\n .bannerWrapper .button-row .hero-button-border {\n width: 125px;\n left: -125px;\n }\n .banner-right {\n top: 85px;\n right: 0px;\n }\n}\n@media (max-width: 1024px) {\n .bannerWrapper {\n padding-left: 80px !important;\n height: 655px;\n align-items: center;\n }\n .bannerWrapper .bannerHeading {\n font-size: 3.25rem;\n line-height: 64px;\n }\n}\n@media (max-width: 768px) {\n .bannerWrapper {\n flex-direction: column;\n padding-left: 20px !important;\n height: 600px;\n margin-top: 72px;\n }\n .bannerWrapper .bannerHeading {\n font-size: 2.875rem;\n line-height: 56px;\n }\n .bannerWrapper .banner-right {\n display: none;\n }\n}\n@media (max-width: 576px) {\n .bannerWrapper {\n padding-left: 20px;\n height: 575px;\n }\n .bannerWrapper .bannerHeading {\n font-size: 2.75rem;\n line-height: 48px;\n }\n .bannerWrapper .bannerHeading .subdetails {\n display: block;\n margin: 8px 0 2px;\n }\n .bannerWrapper .touchbutton {\n padding: 18px 30px 18px 41px;\n }\n}","// ===============================\n// TYPOGRAPHY SYSTEM - KRUPALPATEL\n// ===============================\n\n// Google Fonts Imports\n@import url(\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap\");\n\n// Local Font Face Declarations\n@font-face {\n font-family: \"PPSupplySans-Regular\";\n src: url(\"../fonts/PPSupplySans-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplySans-Ultralight\";\n src: url(\"../fonts/PPSupplySans-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplyMono-Ultralight\";\n src: url(\"../fonts/PPSupplyMono-Ultralight.otf\") format(\"opentype\");\n font-weight: 200;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"PPSupplyMono-Regular\";\n src: url(\"../fonts/PPSupplyMono-Regular.otf\") format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n// ===============================\n// SCSS FONT VARIABLES\n// ===============================\n\n// Primary Font Family Variables (Body Text)\n$font-primary:\n \"PPSupplySans-Regular\",\n \"Manrope\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n sans-serif;\n$font-primary-light: \"PPSupplySans-Ultralight\", \"Manrope\", sans-serif;\n$font-primary-medium: \"Manrope\", sans-serif;\n$font-primary-bold: \"Manrope\", sans-serif;\n\n// Secondary Font Family Variables (Headings)\n$font-secondary: \"Space Grotesk\", \"Manrope\", sans-serif;\n$font-secondary-800: \"Space Grotesk\", sans-serif;\n\n// Monospace Font Family Variables (Code/Technical)\n$font-mono: \"PPSupplyMono-Regular\", \"SF Mono\", \"Monaco\", \"Inconsolata\",\n \"Fira Code\", \"Droid Sans Mono\", \"Courier New\", monospace;\n$font-mono-light: \"PPSupplyMono-Ultralight\", \"SF Mono\", monospace;\n\n// Display Font Family Variables (Special Use)\n$font-display: \"Orbitron\", \"Space Grotesk\", sans-serif;\n\n// Individual Font Names (for specific use cases)\n$font-ppsupply-sans-regular: \"PPSupplySans-Regular\";\n$font-ppsupply-sans-ultralight: \"PPSupplySans-Ultralight\";\n$font-ppsupply-mono-regular: \"PPSupplyMono-Regular\";\n$font-ppsupply-mono-ultralight: \"PPSupplyMono-Ultralight\";\n$font-manrope: \"Manrope\";\n$font-space-grotesk: \"Space Grotesk\";\n$font-orbitron: \"Orbitron\";\n\n// Line Height Variables\n$line-height-none: 1;\n$line-height-tight: 1.2;\n$line-height-snug: 1.3;\n$line-height-normal: 1.5;\n$line-height-relaxed: 1.75;\n$line-height-loose: 2;\n\n// Letter Spacing Variables\n$letter-spacing-tighter: -0.05em;\n$letter-spacing-tight: -0.025em;\n$letter-spacing-normal: 0em;\n$letter-spacing-wide: 0.025em;\n$letter-spacing-wider: 0.05em;\n$letter-spacing-widest: 0.1em;\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","@use \"./fonts.scss\" as *;\n@use \"./variables.scss\" as *;\n@use \"./typography.scss\" as *;\n@use \"./mixins/breakpoint.scss\" as *;\n@use \"./mixins/mixins.scss\" as *;\n@use \"./color.scss\" as *;\n\nhtml,\nbody {\n overflow-x: hidden;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n}\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n background-color: $color-primary-dark;\n\n // min-height: 100vh;\n // height: 100vh;\n}\na {\n color: var(--color-theme);\n}\nbutton:focus,\n.btn.focus,\n.btn:focus,\n.btn:hover,\na:focus,\n.btn.active,\n.btn:active,\n.btn:active,\n.btn:active:focus,\na:active:focus,\na:active {\n outline: none;\n}\na:hover {\n text-decoration: none;\n}\na:active {\n text-decoration: none;\n}\nimg {\n object-fit: cover;\n max-width: 100%;\n height: auto;\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n","@use \"./../main.scss\" as *;\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n/* Add Block CSS Here */\n.bannerWrapper {\n margin-top: 94px;\n width: 100%;\n height: 698px;\n display: flex;\n padding-left: 170px;\n justify-content: space-between;\n position: relative;\n\n .banner-left {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n z-index: 20;\n }\n\n .border-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n\n .bannerSubHeading {\n font-size: $text-xxl;\n color: $color-primary;\n font-weight: $font-weight-medium;\n line-height: 30px;\n margin-bottom: 10px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n display: block;\n }\n .bannerHeading {\n font-size: 64px;\n color: $text-color;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 74px;\n margin-bottom: 10px;\n\n .subdetails {\n color: $color-primary;\n font-size: $text-xxl;\n font-weight: $font-weight-medium;\n margin-left: 3px;\n line-height: 30px;\n display: inline-block;\n }\n }\n .button-row {\n position: relative;\n\n .hero-button-border {\n position: absolute;\n width: 170px;\n height: 1px;\n background-color: $color-primary;\n left: -170px;\n top: 52px;\n z-index: -1;\n }\n }\n\n .touchbutton {\n width: fit-content !important;\n padding: 22px 38px 22px 51px;\n background-color: $color-primary;\n border: 1px solid $color-primary;\n font-size: $text-lg;\n color: $black;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n display: flex;\n align-items: center;\n line-height: normal;\n gap: 14px;\n margin-top: 20px;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n cursor: pointer;\n text-decoration: none;\n\n img {\n width: 16px;\n height: 15px;\n object-fit: cover;\n }\n }\n}\n/* DOT GRID */\n#dot-grid {\n position: absolute;\n inset: 0;\n z-index: 1;\n background-image: radial-gradient(\n circle,\n rgba(100, 228, 203, 0.11) 1px,\n transparent 1px\n );\n background-size: 28px 28px;\n pointer-events: none;\n -webkit-mask-image: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.65) 0%,\n rgba(0, 0, 0, 0.65) 48%,\n rgba(0, 0, 0, 0) 100%\n );\n mask-image: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.65) 0%,\n rgba(0, 0, 0, 0.65) 48%,\n rgba(0, 0, 0, 0) 100%\n );\n}\n/* CANVAS */\n.banner-right {\n width: 43%;\n position: absolute;\n overflow: hidden;\n min-height: 80%;\n top: 60px;\n right: 20px;\n\n .globe-stage {\n position: absolute;\n inset: 0;\n }\n}\n\n#globe-canvas {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n}\n\n#tech-nodes {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 20;\n}\n\n.tech-node {\n position: absolute;\n /* Centered offset — set ONCE, never mutated by JS */\n transform: translate(-18px, -18px);\n pointer-events: none;\n /* No CSS transition — opacity updated directly each frame */\n will-change: left, top, opacity;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n}\n\n.tech-icon {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(5, 18, 48, 0.92);\n border: 2px solid;\n transform: translate3d(0, 0, 0); /* force GPU rasterisation at 1:1 */\n}\n\n.tech-icon svg {\n width: 18px;\n height: 18px;\n display: block;\n shape-rendering: geometricPrecision;\n}\n\n@keyframes scrollLogos {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n}\n@keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(22px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 1200px) {\n .bannerWrapper {\n padding-left: 125px;\n\n .button-row {\n .hero-button-border {\n width: 125px;\n left: -125px;\n }\n }\n }\n .banner-right {\n top: 85px;\n right: 0px;\n }\n}\n@media (max-width: 1024px) {\n .bannerWrapper {\n padding-left: 80px !important;\n height: 655px;\n align-items: center;\n\n .bannerHeading {\n font-size: $heading-5xl;\n line-height: 64px;\n }\n }\n}\n@media (max-width: 768px) {\n .bannerWrapper {\n flex-direction: column;\n padding-left: 20px !important;\n height: 600px;\n margin-top: 72px;\n\n // .banner-left,\n // .banner-right {\n // width: 100%;\n // }\n\n // .banner-left {\n // padding-left: 0;\n // padding-right: 20px;\n // padding-top: 70px;\n // min-height: 0;\n // }\n\n // .banner-left::before {\n // top: 70px;\n // }\n\n .bannerHeading {\n font-size: $heading-4xl;\n line-height: 56px;\n }\n\n .banner-right {\n display: none;\n }\n }\n}\n@media (max-width: 576px) {\n .bannerWrapper {\n padding-left: 20px;\n height: 575px;\n\n .bannerHeading {\n font-size: $heading-3xl;\n line-height: 48px;\n\n .subdetails {\n display: block;\n margin: 8px 0 2px;\n }\n }\n .touchbutton {\n padding: 18px 30px 18px 41px;\n }\n }\n}\n"]} @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap"); @font-face { font-family: "PPSupplySans-Regular"; src: url("../fonts/PPSupplySans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplySans-Ultralight"; src: url("../fonts/PPSupplySans-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplyMono-Ultralight"; src: url("../fonts/PPSupplyMono-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PPSupplyMono-Regular"; src: url("../fonts/PPSupplyMono-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } html, body { overflow-x: hidden; } * { box-sizing: border-box; margin: 0; } body { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 16px; font-weight: 400; line-height: 1.5; background-color: #06234f; } a { color: var(--color-theme); } button:focus, .btn.focus, .btn:focus, .btn:hover, a:focus, .btn.active, .btn:active, .btn:active, .btn:active:focus, a:active:focus, a:active { outline: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } img { -o-object-fit: cover; object-fit: cover; max-width: 100%; height: auto; } /* Add Block CSS Here */ .bannerWrapper { margin-top: 94px; width: 100%; height: 698px; display: flex; padding-left: 170px; justify-content: space-between; position: relative; } .bannerWrapper .banner-left { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 20; } .bannerWrapper .border-line { width: 100%; height: 1px; background: #64e4cb; position: absolute; bottom: 0; left: 0; } .bannerWrapper .bannerSubHeading { font-size: 1.4375rem; color: #64e4cb; font-weight: 500; line-height: 30px; margin-bottom: 10px; font-family: "PPSupplySans-Regular", sans-serif; display: block; } .bannerWrapper .bannerHeading { font-size: 64px; color: #dddddd; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; line-height: 74px; margin-bottom: 10px; } .bannerWrapper .bannerHeading .subdetails { color: #64e4cb; font-size: 1.4375rem; font-weight: 500; margin-left: 3px; line-height: 30px; display: inline-block; } .bannerWrapper .button-row { position: relative; } .bannerWrapper .button-row .hero-button-border { position: absolute; width: 170px; height: 1px; background-color: #64e4cb; left: -170px; top: 52px; z-index: -1; } .bannerWrapper .touchbutton { width: -moz-fit-content !important; width: fit-content !important; padding: 22px 38px 22px 51px; background-color: #64e4cb; border: 1px solid #64e4cb; font-size: 1.125rem; color: #000000; font-family: "PPSupplySans-Regular", sans-serif; display: flex; align-items: center; line-height: normal; gap: 14px; margin-top: 20px; position: relative; overflow: hidden; white-space: nowrap; cursor: pointer; text-decoration: none; } .bannerWrapper .touchbutton img { width: 16px; height: 15px; -o-object-fit: cover; object-fit: cover; } /* DOT GRID */ #dot-grid { position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(circle, rgba(100, 228, 203, 0.11) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0) 100%); } /* CANVAS */ .banner-right { width: 43%; position: absolute; overflow: hidden; min-height: 80%; top: 60px; right: 20px; } .banner-right .globe-stage { position: absolute; inset: 0; } #globe-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } #tech-nodes { position: absolute; inset: 0; pointer-events: none; z-index: 20; } .tech-node { position: absolute; /* Centered offset — set ONCE, never mutated by JS */ transform: translate(-18px, -18px); pointer-events: none; /* No CSS transition — opacity updated directly each frame */ will-change: left, top, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .tech-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(5, 18, 48, 0.92); border: 2px solid; transform: translate3d(0, 0, 0); /* force GPU rasterisation at 1:1 */ } .tech-icon svg { width: 18px; height: 18px; display: block; shape-rendering: geometricPrecision; } @keyframes scrollLogos { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1200px) { .bannerWrapper { padding-left: 125px; } .bannerWrapper .button-row .hero-button-border { width: 125px; left: -125px; } .banner-right { top: 85px; right: 0px; } } @media (max-width: 1024px) { .bannerWrapper { padding-left: 80px !important; height: 655px; align-items: center; } .bannerWrapper .bannerHeading { font-size: 3.25rem; line-height: 64px; } } @media (max-width: 768px) { .bannerWrapper { flex-direction: column; padding-left: 20px !important; height: 600px; margin-top: 72px; } .bannerWrapper .bannerHeading { font-size: 2.875rem; line-height: 56px; } .bannerWrapper .banner-right { display: none; } } @media (max-width: 576px) { .bannerWrapper { padding-left: 20px; height: 575px; } .bannerWrapper .bannerHeading { font-size: 2.75rem; line-height: 48px; } .bannerWrapper .bannerHeading .subdetails { display: block; margin: 8px 0 2px; } .bannerWrapper .touchbutton { padding: 18px 30px 18px 41px; } } /*# sourceMappingURL=hero-banner.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A.portfolioWrapper%20%7B%0A%20%20width:%20100%25;%0A%20%20display:%20flex;%0A%0A%20%20.portfolioDetails%20%7B%0A%20%20%20%20width:%2040%25;%0A%20%20%20%20height:%20fit-content;%0A%20%20%20%20display:%20flex;%0A%20%20%20%20flex-direction:%20column;%0A%20%20%20%20gap:%2035px;%0A%20%20%20%20padding:%2050px;%0A%20%20%20%20position:%20sticky;%0A%20%20%20%20flex-shrink:%200;%0A%0A%20%20%20%20.detailsHeading%20%7B%0A%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%20%20font-size:%20$heading-8xl;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20line-height:%201.1em;%0A%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%7D%0A%20%20%20%20.detailsDescription%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20line-height:%201.4em;%0A%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%7D%0A%20%20%20%20.descriptionText%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20color:%20%23cfd7f1;%0A%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20line-height:%201.3em;%0A%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.portfolioInformation%20%7B%0A%20%20%20%20width:%2060%25;%0A%20%20%20%20height:%20100%25;%0A%20%20%20%20display:%20flex;%0A%20%20%20%20flex-direction:%20column;%0A%20%20%20%20scrollbar-width:%20none;%0A%20%20%20%20overflow-x:%20auto;%0A%20%20%20%20scroll-snap-type:%20x%20mandatory;%0A%20%20%20%20/*%20padding-bottom:%201rem;%20*/%0A%20%20%20%20-webkit-overflow-scrolling:%20touch;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.border-divider-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20z-index:%209;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.portfolioSlider%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20scroll-snap-align:%20start;%0A%0A%20%20%20%20%20%20.imagesCard%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20/*%20height:%20452px;%20*/%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%0A%20%20%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.projectInfo%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20/*%20height:%20250px;%20*/%0A%20%20%20%20%20%20%20%20color:%20%23e1e7f5;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.projectDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20flex:%202;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20min-width:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-col-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%200%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.projectIntroduction%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-2xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20%23dddddd;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2022px%2020px%2035px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.tags%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20%20%20-webkit-overflow-scrolling:%20touch;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.tags-wrapper%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-wrap:%20nowrap;%20/*%20Changed%20from%20wrap%20to%20nowrap%20for%20horizontal%20scroll%20*/%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20overflow-x:%20auto;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20overflow-y:%20hidden;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20scrollbar-width:%20none;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.tagsLink%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%206px%2018px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-base;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%201.6em;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*%20border-right:%201px%20solid%20$color-primary;%20*/%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20inline-flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*%20overflow:%20scroll;%20*/%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-col-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20%2306234f;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20500;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.linkArrow%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20rotate(320deg)%20scale(1)%20translateY(0px);%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*%20left:%2063%25;%20*/%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.linkArrow%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2013px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2013px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top:%204px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20right:%204px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20rotate(320deg)%20scale(0.8)%20translateY(30px);%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transition:%20all%200.3s%20ease;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.projectright%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%2025%25;%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20padding:%2030px%2024px;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%0A%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.externalLink%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2010px;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2038px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2034px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.link-image%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2014px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2014px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20rotate(322deg);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.btn-more%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20background-color:%20transparent;%0A%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20gap:%2020px;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20font-size:%20$heading-9xl;%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20padding:%2040px%200%2030px;%0A%20%20%20%20%20%20height:%20160px;%0A%20%20%20%20%20%20cursor:%20pointer;%0A%0A%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20color:%20%2306234f;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.btn-arrow%20%7B%0A%20%20%20%20%20%20%20%20width:%2068px;%0A%20%20%20%20%20%20%20%20height:%2068px;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20margin-bottom:%2012px;%0A%0A%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.portfolioWrapper%20%7B%0A%20%20%20%20.portfolioDetails%20%7B%0A%20%20%20%20%20%20padding:%2040px;%0A%20%20%20%20%20%20gap:%2026px;%0A%0A%20%20%20%20%20%20.detailsHeading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.portfolioInformation%20%7B%0A%20%20%20%20%20%20.portfolioSlider%20%7B%0A%20%20%20%20%20%20%20%20.projectInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20.projectDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.projectIntroduction%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2022px%2015px%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.btn-more%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-7xl;%0A%20%20%20%20%20%20%20%20height:%20150px;%0A%0A%20%20%20%20%20%20%20%20.btn-arrow%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%2055px;%0A%20%20%20%20%20%20%20%20%20%20height:%2055px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.portfolioWrapper%20%7B%0A%20%20%20%20flex-direction:%20column;%0A%20%20%20%20.portfolioDetails%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20padding:%2070px%2040px;%0A%20%20%20%20%20%20gap:%2026px;%0A%20%20%20%20%20%20position:%20unset;%0A%0A%20%20%20%20%20%20.detailsHeading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-5xl;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.portfolioInformation%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20border-top:%201px%20solid%20$color-primary;%0A%20%20%20%20%20%20border-left:%20none;%0A%0A%20%20%20%20%20%20.border-divider-line%20%7B%0A%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.portfolioSlider%20%7B%0A%20%20%20%20%20%20%20%20.projectInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20.projectDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.projectIntroduction%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2022px%2015px%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.btn-more%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%20%20height:%20150px;%0A%0A%20%20%20%20%20%20%20%20.btn-arrow%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%2048px;%0A%20%20%20%20%20%20%20%20%20%20height:%2048px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.portfolioWrapper%20%7B%0A%20%20%20%20.portfolioDetails%20%7B%0A%20%20%20%20%20%20padding:%2055px%2020px;%0A%20%20%20%20%20%20gap:%2022px;%0A%20%20%20%20%20%20position:%20unset;%0A%0A%20%20%20%20%20%20.detailsHeading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-5xl;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.portfolioInformation%20%7B%0A%20%20%20%20%20%20.border-divider-line%20%7B%0A%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.portfolioSlider%20%7B%0A%20%20%20%20%20%20%20%20.projectInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20.projectDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-right:%20none;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-col-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.projectIntroduction%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2022px%2015px%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.tags%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.tags-wrapper%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-wrap:%20nowrap;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.tagsLink%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20:last-child%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-right:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-col-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.projectright%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20border-top:%201px%20solid%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.projectlogos%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.btn-more%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%20%20height:%20150px;%0A%0A%20%20%20%20%20%20%20%20.btn-arrow%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%2048px;%0A%20%20%20%20%20%20%20%20%20%20height:%2048px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.portfolioWrapper%20%7B%0A%20%20%20%20.portfolioDetails%20%7B%0A%20%20%20%20%20%20padding:%2044px%2020px;%0A%20%20%20%20%20%20gap:%2016px;%0A%0A%20%20%20%20%20%20.detailsHeading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.detailsDescription%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20line-height:%201.1em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.descriptionText%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%20%20%20%20line-height:%201.2em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.portfolioInformation%20%7B%0A%20%20%20%20%20%20.portfolioSlider%20%7B%0A%20%20%20%20%20%20%20%20.projectInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20.projectDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.projectIntroduction%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2022px%2015px%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.btn-more%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%20%20gap:%2014px;%0A%20%20%20%20%20%20%20%20height:%20140px;%0A%0A%20%20%20%20%20%20%20%20.btn-arrow%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%2044px;%0A%20%20%20%20%20%20%20%20%20%20height:%2044px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","portfolio-hero.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"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","file":"portfolio-hero.css","sourcesContent":["/* Add Block CSS Here */\n\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.portfolioWrapper {\n width: 100%;\n display: flex;\n\n .portfolioDetails {\n width: 40%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n gap: 35px;\n padding: 50px;\n position: sticky;\n flex-shrink: 0;\n\n .detailsHeading {\n color: $text-dark-primary;\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 1.1em;\n margin: 0;\n }\n .detailsDescription {\n font-size: $heading-lg;\n color: $color-primary;\n font-weight: $font-weight-medium;\n line-height: 1.4em;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .descriptionText {\n font-size: $heading-sm;\n color: #cfd7f1;\n margin: 0;\n font-weight: $font-weight-light;\n line-height: 1.3em;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n .portfolioInformation {\n width: 60%;\n height: 100%;\n display: flex;\n flex-direction: column;\n scrollbar-width: none;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n /* padding-bottom: 1rem; */\n -webkit-overflow-scrolling: touch;\n position: relative;\n\n .border-divider-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n z-index: 9;\n background: $color-primary;\n }\n\n .portfolioSlider {\n width: 100%;\n scroll-snap-align: start;\n\n .imagesCard {\n width: 100%;\n /* height: 452px; */\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n\n .border-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n img {\n width: 100%;\n height: auto;\n object-fit: cover;\n display: block;\n }\n }\n .projectInfo {\n display: flex;\n /* height: 250px; */\n color: #e1e7f5;\n position: relative;\n\n .border-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n\n .projectDetails {\n flex: 2;\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 0;\n\n .border-col-line {\n position: absolute;\n top: 0;\n right: 0 !important;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .projectIntroduction {\n font-size: $heading-2xl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: #dddddd;\n line-height: normal;\n margin: 0;\n padding: 22px 20px 35px;\n }\n .tags {\n position: relative;\n -webkit-overflow-scrolling: touch;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .tags-wrapper {\n display: flex;\n flex-wrap: nowrap; /* Changed from wrap to nowrap for horizontal scroll */\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n\n .tagsLink {\n padding: 6px 18px;\n font-size: $text-base;\n color: $white;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: 1.6em;\n text-decoration: none;\n /* border-right: 1px solid $color-primary; */\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* overflow: scroll; */\n\n .border-col-line {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n &:hover {\n background-color: $color-primary;\n color: #06234f;\n font-weight: 500;\n\n .linkArrow {\n opacity: 1;\n transform: rotate(320deg) scale(1) translateY(0px);\n /* left: 63%; */\n }\n }\n .linkArrow {\n width: 13px;\n height: 13px;\n position: absolute;\n top: 4px;\n right: 4px;\n transform: rotate(320deg) scale(0.8) translateY(30px);\n opacity: 0;\n transition: all 0.3s ease;\n }\n }\n }\n }\n }\n .projectright {\n width: 25%;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n padding: 30px 24px;\n position: relative;\n text-decoration: none;\n\n img {\n width: 100%;\n height: auto;\n object-fit: cover;\n }\n\n .externalLink {\n display: flex;\n position: absolute;\n justify-content: center;\n bottom: 0;\n right: 0;\n background-color: $color-primary;\n padding: 10px;\n width: 38px;\n height: 34px;\n\n .link-image {\n display: block;\n width: 14px;\n height: 14px;\n transform: rotate(322deg);\n }\n }\n }\n }\n }\n .btn-more {\n width: 100%;\n background-color: transparent;\n border: none;\n display: flex;\n text-decoration: none;\n gap: 20px;\n align-items: center;\n font-size: $heading-9xl;\n color: $color-primary;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n line-height: normal;\n justify-content: center;\n padding: 40px 0 30px;\n height: 160px;\n cursor: pointer;\n\n &:hover {\n background-color: $color-primary;\n color: #06234f;\n }\n\n .btn-arrow {\n width: 68px;\n height: 68px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 12px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n .portfolioWrapper {\n .portfolioDetails {\n padding: 40px;\n gap: 26px;\n\n .detailsHeading {\n font-size: $heading-6xl;\n }\n }\n .portfolioInformation {\n .portfolioSlider {\n .projectInfo {\n .projectDetails {\n .projectIntroduction {\n font-size: $heading-lg;\n padding: 22px 15px 30px;\n }\n }\n }\n }\n .btn-more {\n font-size: $heading-7xl;\n height: 150px;\n\n .btn-arrow {\n width: 55px;\n height: 55px;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .portfolioWrapper {\n flex-direction: column;\n .portfolioDetails {\n width: 100%;\n padding: 70px 40px;\n gap: 26px;\n position: unset;\n\n .detailsHeading {\n font-size: $heading-5xl;\n line-height: 1em;\n }\n }\n .portfolioInformation {\n width: 100%;\n border-top: 1px solid $color-primary;\n border-left: none;\n\n .border-divider-line {\n display: none;\n }\n .portfolioSlider {\n .projectInfo {\n .projectDetails {\n .projectIntroduction {\n font-size: $heading-lg;\n padding: 22px 15px 30px;\n }\n }\n }\n }\n .btn-more {\n font-size: $heading-6xl;\n height: 150px;\n\n .btn-arrow {\n width: 48px;\n height: 48px;\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .portfolioWrapper {\n .portfolioDetails {\n padding: 55px 20px;\n gap: 22px;\n position: unset;\n\n .detailsHeading {\n font-size: $heading-5xl;\n line-height: 1em;\n }\n }\n .portfolioInformation {\n .border-divider-line {\n display: none;\n }\n .portfolioSlider {\n .projectInfo {\n flex-direction: column;\n .projectDetails {\n border-right: none;\n\n .border-col-line {\n display: none;\n }\n .projectIntroduction {\n font-size: $heading-lg;\n padding: 22px 15px 30px;\n }\n .tags {\n .tags-wrapper {\n flex-wrap: nowrap;\n\n .tagsLink {\n :last-child {\n border-right: none;\n }\n .border-col-line {\n display: block;\n }\n }\n }\n }\n }\n .projectright {\n width: 100%;\n border-top: 1px solid $color-primary;\n padding: 20px;\n\n .projectlogos {\n width: 200px;\n }\n }\n }\n }\n .btn-more {\n font-size: $heading-6xl;\n height: 150px;\n\n .btn-arrow {\n width: 48px;\n height: 48px;\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .portfolioWrapper {\n .portfolioDetails {\n padding: 44px 20px;\n gap: 16px;\n\n .detailsHeading {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n .detailsDescription {\n font-size: $heading-md;\n line-height: 1.1em;\n }\n .descriptionText {\n font-size: $heading-xs;\n line-height: 1.2em;\n }\n }\n .portfolioInformation {\n .portfolioSlider {\n .projectInfo {\n .projectDetails {\n .projectIntroduction {\n font-size: $heading-lg;\n padding: 22px 15px 30px;\n }\n }\n }\n }\n .btn-more {\n font-size: $heading-6xl;\n gap: 14px;\n height: 140px;\n\n .btn-arrow {\n width: 44px;\n height: 44px;\n }\n }\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.portfolioWrapper {\n width: 100%;\n display: flex;\n}\n.portfolioWrapper .portfolioDetails {\n width: 40%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n gap: 35px;\n padding: 50px;\n position: sticky;\n flex-shrink: 0;\n}\n.portfolioWrapper .portfolioDetails .detailsHeading {\n color: #e5f1fd;\n font-size: 5rem;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 1.1em;\n margin: 0;\n}\n.portfolioWrapper .portfolioDetails .detailsDescription {\n font-size: 1.875rem;\n color: #64e4cb;\n font-weight: 500;\n line-height: 1.4em;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.portfolioWrapper .portfolioDetails .descriptionText {\n font-size: 1.25rem;\n color: #cfd7f1;\n margin: 0;\n font-weight: 300;\n line-height: 1.3em;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.portfolioWrapper .portfolioInformation {\n width: 60%;\n height: 100%;\n display: flex;\n flex-direction: column;\n scrollbar-width: none;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n /* padding-bottom: 1rem; */\n -webkit-overflow-scrolling: touch;\n position: relative;\n}\n.portfolioWrapper .portfolioInformation .border-divider-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n z-index: 9;\n background: #64e4cb;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider {\n width: 100%;\n scroll-snap-align: start;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard {\n width: 100%;\n /* height: 452px; */\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard .border-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard img {\n width: 100%;\n height: auto;\n object-fit: cover;\n display: block;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo {\n display: flex;\n /* height: 250px; */\n color: #e1e7f5;\n position: relative;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .border-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails {\n flex: 2;\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 0;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .border-col-line {\n position: absolute;\n top: 0;\n right: 0 !important;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 2.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #dddddd;\n line-height: normal;\n margin: 0;\n padding: 22px 20px 35px;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags {\n position: relative;\n -webkit-overflow-scrolling: touch;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper {\n display: flex;\n flex-wrap: nowrap; /* Changed from wrap to nowrap for horizontal scroll */\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink {\n padding: 6px 18px;\n font-size: 1rem;\n color: #ffffff;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: 1.6em;\n text-decoration: none;\n /* border-right: 1px solid $color-primary; */\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* overflow: scroll; */\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .border-col-line {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink:hover {\n background-color: #64e4cb;\n color: #06234f;\n font-weight: 500;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink:hover .linkArrow {\n opacity: 1;\n transform: rotate(320deg) scale(1) translateY(0px);\n /* left: 63%; */\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .linkArrow {\n width: 13px;\n height: 13px;\n position: absolute;\n top: 4px;\n right: 4px;\n transform: rotate(320deg) scale(0.8) translateY(30px);\n opacity: 0;\n transition: all 0.3s ease;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright {\n width: 25%;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n padding: 30px 24px;\n position: relative;\n text-decoration: none;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright img {\n width: 100%;\n height: auto;\n object-fit: cover;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .externalLink {\n display: flex;\n position: absolute;\n justify-content: center;\n bottom: 0;\n right: 0;\n background-color: #64e4cb;\n padding: 10px;\n width: 38px;\n height: 34px;\n}\n.portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .externalLink .link-image {\n display: block;\n width: 14px;\n height: 14px;\n transform: rotate(322deg);\n}\n.portfolioWrapper .portfolioInformation .btn-more {\n width: 100%;\n background-color: transparent;\n border: none;\n display: flex;\n text-decoration: none;\n gap: 20px;\n align-items: center;\n font-size: 6rem;\n color: #64e4cb;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n line-height: normal;\n justify-content: center;\n padding: 40px 0 30px;\n height: 160px;\n cursor: pointer;\n}\n.portfolioWrapper .portfolioInformation .btn-more:hover {\n background-color: #64e4cb;\n color: #06234f;\n}\n.portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 68px;\n height: 68px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 12px;\n}\n.portfolioWrapper .portfolioInformation .btn-more .btn-arrow img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n@media (max-width: 1200px) {\n .portfolioWrapper .portfolioDetails {\n padding: 40px;\n gap: 26px;\n }\n .portfolioWrapper .portfolioDetails .detailsHeading {\n font-size: 4rem;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 1.875rem;\n padding: 22px 15px 30px;\n }\n .portfolioWrapper .portfolioInformation .btn-more {\n font-size: 4.75rem;\n height: 150px;\n }\n .portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 55px;\n height: 55px;\n }\n}\n@media (max-width: 1024px) {\n .portfolioWrapper {\n flex-direction: column;\n }\n .portfolioWrapper .portfolioDetails {\n width: 100%;\n padding: 70px 40px;\n gap: 26px;\n position: unset;\n }\n .portfolioWrapper .portfolioDetails .detailsHeading {\n font-size: 3.25rem;\n line-height: 1em;\n }\n .portfolioWrapper .portfolioInformation {\n width: 100%;\n border-top: 1px solid #64e4cb;\n border-left: none;\n }\n .portfolioWrapper .portfolioInformation .border-divider-line {\n display: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 1.875rem;\n padding: 22px 15px 30px;\n }\n .portfolioWrapper .portfolioInformation .btn-more {\n font-size: 4rem;\n height: 150px;\n }\n .portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 48px;\n height: 48px;\n }\n}\n@media (max-width: 768px) {\n .portfolioWrapper .portfolioDetails {\n padding: 55px 20px;\n gap: 22px;\n position: unset;\n }\n .portfolioWrapper .portfolioDetails .detailsHeading {\n font-size: 3.25rem;\n line-height: 1em;\n }\n .portfolioWrapper .portfolioInformation .border-divider-line {\n display: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo {\n flex-direction: column;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails {\n border-right: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .border-col-line {\n display: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 1.875rem;\n padding: 22px 15px 30px;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper {\n flex-wrap: nowrap;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink :last-child {\n border-right: none;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .border-col-line {\n display: block;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright {\n width: 100%;\n border-top: 1px solid #64e4cb;\n padding: 20px;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .projectlogos {\n width: 200px;\n }\n .portfolioWrapper .portfolioInformation .btn-more {\n font-size: 4rem;\n height: 150px;\n }\n .portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 48px;\n height: 48px;\n }\n}\n@media (max-width: 576px) {\n .portfolioWrapper .portfolioDetails {\n padding: 44px 20px;\n gap: 16px;\n }\n .portfolioWrapper .portfolioDetails .detailsHeading {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .portfolioWrapper .portfolioDetails .detailsDescription {\n font-size: 1.5rem;\n line-height: 1.1em;\n }\n .portfolioWrapper .portfolioDetails .descriptionText {\n font-size: 1.125rem;\n line-height: 1.2em;\n }\n .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction {\n font-size: 1.875rem;\n padding: 22px 15px 30px;\n }\n .portfolioWrapper .portfolioInformation .btn-more {\n font-size: 4rem;\n gap: 14px;\n height: 140px;\n }\n .portfolioWrapper .portfolioInformation .btn-more .btn-arrow {\n width: 44px;\n height: 44px;\n }\n}","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .portfolioWrapper { width: 100%; display: flex; } .portfolioWrapper .portfolioDetails { width: 40%; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 35px; padding: 50px; position: sticky; flex-shrink: 0; } .portfolioWrapper .portfolioDetails .detailsHeading { color: #e5f1fd; font-size: 5rem; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; line-height: 1.1em; margin: 0; } .portfolioWrapper .portfolioDetails .detailsDescription { font-size: 1.875rem; color: #64e4cb; font-weight: 500; line-height: 1.4em; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .portfolioWrapper .portfolioDetails .descriptionText { font-size: 1.25rem; color: #cfd7f1; margin: 0; font-weight: 300; line-height: 1.3em; font-family: "Space Grotesk", sans-serif; } .portfolioWrapper .portfolioInformation { width: 60%; height: 100%; display: flex; flex-direction: column; scrollbar-width: none; overflow-x: auto; scroll-snap-type: x mandatory; /* padding-bottom: 1rem; */ -webkit-overflow-scrolling: touch; position: relative; } .portfolioWrapper .portfolioInformation .border-divider-line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; z-index: 9; background: #64e4cb; } .portfolioWrapper .portfolioInformation .portfolioSlider { width: 100%; scroll-snap-align: start; } .portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard { width: 100%; /* height: 452px; */ display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard .border-line { width: 100%; height: 1px; background: #64e4cb; position: absolute; bottom: 0; left: 0; } .portfolioWrapper .portfolioInformation .portfolioSlider .imagesCard img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; display: block; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo { display: flex; /* height: 250px; */ color: #e1e7f5; position: relative; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .border-line { width: 100%; height: 1px; background: #64e4cb; position: absolute; bottom: 0; left: 0; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails { flex: 2; display: flex; flex-direction: column; position: relative; min-width: 0; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .border-col-line { position: absolute; top: 0; right: 0 !important; width: 1px; height: 100%; background: #64e4cb; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 2.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #dddddd; line-height: normal; margin: 0; padding: 22px 20px 35px; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags { position: relative; -webkit-overflow-scrolling: touch; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper { display: flex; flex-wrap: nowrap; /* Changed from wrap to nowrap for horizontal scroll */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink { padding: 6px 18px; font-size: 1rem; color: #ffffff; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: 1.6em; text-decoration: none; /* border-right: 1px solid $color-primary; */ position: relative; display: inline-flex; align-items: center; justify-content: center; /* overflow: scroll; */ } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .border-col-line { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink:hover { background-color: #64e4cb; color: #06234f; font-weight: 500; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink:hover .linkArrow { opacity: 1; transform: rotate(320deg) scale(1) translateY(0px); /* left: 63%; */ } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .linkArrow { width: 13px; height: 13px; position: absolute; top: 4px; right: 4px; transform: rotate(320deg) scale(0.8) translateY(30px); opacity: 0; transition: all 0.3s ease; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright { width: 25%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 30px 24px; position: relative; text-decoration: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .externalLink { display: flex; position: absolute; justify-content: center; bottom: 0; right: 0; background-color: #64e4cb; padding: 10px; width: 38px; height: 34px; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .externalLink .link-image { display: block; width: 14px; height: 14px; transform: rotate(322deg); } .portfolioWrapper .portfolioInformation .btn-more { width: 100%; background-color: transparent; border: none; display: flex; text-decoration: none; gap: 20px; align-items: center; font-size: 6rem; color: #64e4cb; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; line-height: normal; justify-content: center; padding: 40px 0 30px; height: 160px; cursor: pointer; } .portfolioWrapper .portfolioInformation .btn-more:hover { background-color: #64e4cb; color: #06234f; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 68px; height: 68px; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1200px) { .portfolioWrapper .portfolioDetails { padding: 40px; gap: 26px; } .portfolioWrapper .portfolioDetails .detailsHeading { font-size: 4rem; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 1.875rem; padding: 22px 15px 30px; } .portfolioWrapper .portfolioInformation .btn-more { font-size: 4.75rem; height: 150px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 55px; height: 55px; } } @media (max-width: 1024px) { .portfolioWrapper { flex-direction: column; } .portfolioWrapper .portfolioDetails { width: 100%; padding: 70px 40px; gap: 26px; position: unset; } .portfolioWrapper .portfolioDetails .detailsHeading { font-size: 3.25rem; line-height: 1em; } .portfolioWrapper .portfolioInformation { width: 100%; border-top: 1px solid #64e4cb; border-left: none; } .portfolioWrapper .portfolioInformation .border-divider-line { display: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 1.875rem; padding: 22px 15px 30px; } .portfolioWrapper .portfolioInformation .btn-more { font-size: 4rem; height: 150px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 48px; height: 48px; } } @media (max-width: 768px) { .portfolioWrapper .portfolioDetails { padding: 55px 20px; gap: 22px; position: unset; } .portfolioWrapper .portfolioDetails .detailsHeading { font-size: 3.25rem; line-height: 1em; } .portfolioWrapper .portfolioInformation .border-divider-line { display: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo { flex-direction: column; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails { border-right: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .border-col-line { display: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 1.875rem; padding: 22px 15px 30px; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper { flex-wrap: nowrap; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink :last-child { border-right: none; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .tags .tags-wrapper .tagsLink .border-col-line { display: block; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright { width: 100%; border-top: 1px solid #64e4cb; padding: 20px; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectright .projectlogos { width: 200px; } .portfolioWrapper .portfolioInformation .btn-more { font-size: 4rem; height: 150px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 48px; height: 48px; } } @media (max-width: 576px) { .portfolioWrapper .portfolioDetails { padding: 44px 20px; gap: 16px; } .portfolioWrapper .portfolioDetails .detailsHeading { font-size: 2.75rem; line-height: 1em; } .portfolioWrapper .portfolioDetails .detailsDescription { font-size: 1.5rem; line-height: 1.1em; } .portfolioWrapper .portfolioDetails .descriptionText { font-size: 1.125rem; line-height: 1.2em; } .portfolioWrapper .portfolioInformation .portfolioSlider .projectInfo .projectDetails .projectIntroduction { font-size: 1.875rem; padding: 22px 15px 30px; } .portfolioWrapper .portfolioInformation .btn-more { font-size: 4rem; gap: 14px; height: 140px; } .portfolioWrapper .portfolioInformation .btn-more .btn-arrow { width: 44px; height: 44px; } } /*# sourceMappingURL=portfolio-hero.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A.projectCards%20%7B%0A%20%20display:%20flex;%0A%20%20flex-direction:%20column;%0A%20%20width:%20100%25;%0A%0A%20%20.project-cards%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20display:%20flex;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20top:%20-1px;%0A%20%20%20%20%20%20left:%200%25;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.project-cards-left%20%7B%0A%20%20%20%20%20%20width:%2040%25;%0A%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-left-card%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20.project-header%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.index-box%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$black;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$font-70;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px%2016px%204px;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplyMono-Ultralight%22;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2076px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.project-logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20170px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2060px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20gap:%2010px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$font-23;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-semibold;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.project-heading-text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-4xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%206px;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2056px;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20/%20.logorow%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20/%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20/%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20/%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20/%20%20%20.logo%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20width:%20170px;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20height:%2060px;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20gap:%2010px;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20font-size:%2022px;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20font-weight:%20600;%0A%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20%20%20/%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20/%20%20%20%7D%0A%20%20%20%20%20%20%20%20/%20%7D%0A%0A%20%20%20%20%20%20%20%20.left-content%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%0A%20%20%20%20%20%20%20%20%20%20.project-heading-text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2036px;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%206px;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20400;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2046px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.project-heading-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2024px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-left-footer%20%7B%0A%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.project-category-card%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.project-cards-right%20%7B%0A%20%20%20%20%20%20width:%2060%25;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20justify-content:%20space-between;%0A%0A%20%20%20%20%20%20.project-image%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%20auto;%0A%0A%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-footer-right%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.platform-icons%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2010px%2015px;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20gap:%208px;%0A%0A%20%20%20%20%20%20%20%20%20%20span%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2050px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2050px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20transparent;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.details-btn%20%7B%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20color:%20%23041b3d;%0A%20%20%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20%20%20padding:%2022px%2026px;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%0A%20%20%20%20%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20%234fd6be;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.arrow-icon%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-left:%2010px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20svg%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.projectCards%20%7B%0A%20%20%20%20.project-cards%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20.project-cards-left%20%7B%0A%20%20%20%20%20%20%20%20width:%2050%25;%0A%0A%20%20%20%20%20%20%20%20.project-left-card%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20.project-header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-heading-text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$font-34;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2042px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.left-content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-heading-text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2042px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-cards-right%20%7B%0A%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.projectCards%20%7B%0A%20%20%20%20.project-cards%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20.project-cards-left%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.project-left-card%20%7B%0A%20%20%20%20%20%20%20%20%20%20.project-header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.index-box%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2068px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-heading-text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20/%20.logorow%20%7B%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20/%20%7D%0A%20%20%20%20%20%20%20%20%20%20.left-content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-heading-text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2034px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.project-left-footer%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-cards-right%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.projectCards%20%7B%0A%20%20%20%20.project-cards%20%7B%0A%20%20%20%20%20%20.project-cards-left%20%7B%0A%20%20%20%20%20%20%20%20.project-left-card%20%7B%0A%20%20%20%20%20%20%20%20%20%20.project-header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.index-box%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$font-54;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2064px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20140px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20/%20.logorow%20%7B%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20.logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20%20%20width:%20140px;%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20/%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-cards-right%20%7B%0A%20%20%20%20%20%20%20%20.project-footer-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20.platform-icons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20span%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.projectCards%20%7B%0A%20%20%20%20.project-cards%20%7B%0A%20%20%20%20%20%20.project-cards-left%20%7B%0A%20%20%20%20%20%20%20%20.project-left-card%20%7B%0A%20%20%20%20%20%20%20%20%20%20.project-header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.index-box%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-5xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2058px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px%2016px%208px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2010px%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20140px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20/%20.logorow%20%7B%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20.logo%20%7B%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20%20%20width:%20140px;%0A%20%20%20%20%20%20%20%20%20%20/%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20/%20%7D%0A%20%20%20%20%20%20%20%20%20%20.left-content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.project-left-footer%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-cards-right%20%7B%0A%20%20%20%20%20%20%20%20.project-footer-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20.platform-icons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2010px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","portfolio-showcase.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"AAAA,uBAAA;AC0CkB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AFhEA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;AEmEF;AFjEE;EACE,WAAA;EACA,aAAA;EACA,kBAAA;AEmEJ;AFjEI;EACE,kBAAA;EACA,SAAA;EACA,QAAA;EACA,WAAA;EACA,WAAA;EACA,mBGnBU;ADsFhB;AFhEI;EACE,UAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;EACA,kBAAA;AEkEN;AFhEM;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBGpCQ;EHqCR,aAAA;AEkER;AFhEM;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,mBG7CQ;AD+GhB;AFhEM;EACE,aAAA;EACA,sBAAA;AEkER;AFhEQ;EACE,aAAA;EACA,mBAAA;EACA,kBAAA;AEkEV;AFhEU;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBG9DI;EH+DJ,cAAA;AEkEZ;AFhEU;EACE,mBGlEI;EHmEJ,cGhEJ;EHiEI,eCrDF;EDsDE,gBCpBQ;EDqBR,sBAAA;EACA,sCAAA;EACA,iBAAA;AEkEZ;AFhEU;EACE,aAAA;EACA,WAAA;AEkEZ;AFhEY;EACE,YAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,SAAA;EACA,eCjFJ;EDkFI,gBCjCS;ACmGvB;AFhEc;EACE,WAAA;EACA,YAAA;EACA,sBAAA;KAAA,mBAAA;AEkEhB;AF9DU;EACE,mBC/DE;EDgEF,cGhGI;EHiGJ,kBAAA;EACA,gBChDS;EDiDT,+CAAA;EACA,iBAAA;EACA,gBAAA;AEgEZ;AF7BQ;EACE,aAAA;AE+BV;AF7BU;EACE,eAAA;EACA,cG7II;EH8IJ,kBAAA;EACA,gBAAA;EACA,+CAAA;EACA,iBAAA;AE+BZ;AF7BU;EACE,cG9IM;EH+IN,kBC3HC;ED4HD,wCAAA;EACA,gBCtGQ;EDuGR,iBAAA;AE+BZ;AF3BM;EACE,aAAA;EACA,kBAAA;AE6BR;AF3BQ;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBGtKM;ADmMhB;AF3BQ;EACE,kBC/IG;EDgJH,wCAAA;EACA,gBCzHW;ED0HX,cGtKQ;EHuKR,iBAAA;AE6BV;AFzBI;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;AE2BN;AFzBM;EACE,WAAA;EACA,YAAA;AE2BR;AFzBQ;EACE,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;AE2BV;AFxBM;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,kBAAA;AE0BR;AFxBQ;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBG7MM;ADuOhB;AFxBQ;EACE,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AE0BV;AFxBU;EACE,WAAA;EACA,YAAA;AE0BZ;AFxBY;EACE,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,6BAAA;EACA,YAAA;AE0Bd;AFtBQ;EACE,mBGnOM;EHoON,cAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,wCAAA;EACA,kBChNG;EDiNH,mBAAA;EACA,gBCzLW;ED0LX,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,qBAAA;AEwBV;AFtBU;EACE,mBAAA;AEwBZ;AFrBU;EACE,WAAA;EACA,YAAA;EACA,iBAAA;AEuBZ;AFrBY;EACE,WAAA;EACA,YAAA;AEuBd;AFrBY;EACE,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;AEuBd;;AFfA;EAEI;IACE,WAAA;EEiBJ;EFfI;IACE,UAAA;EEiBN;EFfM;IACE,aAAA;IACA,sBAAA;EEiBR;EFdU;IACE,eChRJ;IDiRI,iBAAA;EEgBZ;EFXU;IACE,eClQD;IDmQC,iBAAA;EEaZ;EFRI;IACE,UAAA;EEUN;AACF;AFNA;EAEI;IACE,WAAA;IACA,sBAAA;EEOJ;EFNI;IACE,WAAA;EEQN;EFNM;IACE,cAAA;EEQR;EFNM;IACE,aAAA;EEQR;EFJU;IACE,eC1RA;ID2RA,iBAAA;EEMZ;EFJU;IACE,aAAA;EEMZ;EFJU;IACE,mBCvSD;IDwSC,iBAAA;EEMZ;EFAQ;IACE,aAAA;EEEV;EFAU;IACE,iBCnTD;IDoTC,iBAAA;EEEZ;EFEM;IACE,aAAA;IACA,kBAAA;EEAR;EFGI;IACE,WAAA;EEDN;AACF;AFKA;EAMY;IACE,eCxVJ;IDyVI,aAAA;IACA,iBAAA;IACA,aAAA;IACA,mBAAA;EERZ;EFYY;IACE,YAAA;EEVd;EF0BU;IACE,WAAA;IACA,YAAA;EExBZ;AACF;AF+BA;EAMY;IACE,kBC9WA;ID+WA,iBAAA;IACA,sBAAA;EElCZ;EFoCU;IACE,kBAAA;EElCZ;EFoCY;IACE,YAAA;EElCd;EF6CQ;IACE,aAAA;EE3CV;EF8CM;IACE,aAAA;EE5CR;EFiDQ;IACE,aAAA;EE/CV;AACF","file":"portfolio-showcase.css","sourcesContent":["/* Add Block CSS Here */\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.projectCards {\n display: flex;\n flex-direction: column;\n width: 100%;\n\n .project-cards {\n width: 100%;\n display: flex;\n position: relative;\n\n .border-line {\n position: absolute;\n top: -1px;\n left: 0%;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .project-cards-left {\n width: 40%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .project-left-card {\n display: flex;\n flex-direction: column;\n\n .project-header {\n display: flex;\n align-items: center;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: block;\n }\n .index-box {\n background: $color-primary;\n color: $black;\n font-size: $font-70;\n font-weight: $font-weight-light;\n padding: 20px 16px 4px;\n font-family: \"PPSupplyMono-Ultralight\";\n line-height: 76px;\n }\n .project-logo {\n padding: 20px;\n width: 100%;\n\n .logo {\n width: 170px;\n height: 60px;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: $font-23;\n font-weight: $font-weight-semibold;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n }\n .project-heading-text {\n font-size: $heading-4xl;\n color: $color-primary;\n margin-bottom: 6px;\n font-weight: $font-weight-normal;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 56px;\n margin-bottom: 0;\n }\n }\n\n // .logorow {\n // padding: 24px;\n // position: relative;\n\n // .border-bottom-line {\n // position: absolute;\n // bottom: 0;\n // left: 0;\n // width: 100%;\n // height: 1px;\n // background: $color-primary;\n // display: block;\n // }\n\n // .logo {\n // width: 170px;\n // height: 60px;\n // display: flex;\n // align-items: center;\n // gap: 10px;\n // font-size: 22px;\n // font-weight: 600;\n\n // img {\n // width: 100%;\n // height: 100%;\n // object-fit: contain;\n // }\n // }\n // }\n\n .left-content {\n padding: 24px;\n\n .project-heading-text {\n font-size: 36px;\n color: $color-primary;\n margin-bottom: 6px;\n font-weight: 400;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 46px;\n }\n .project-heading-info {\n color: $text-dark-light;\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-light;\n line-height: 24px;\n }\n }\n }\n .project-left-footer {\n padding: 20px;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .project-category-card {\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $text-dark-light;\n line-height: 30px;\n }\n }\n }\n .project-cards-right {\n width: 60%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n .project-image {\n width: 100%;\n height: auto;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .project-footer-right {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .platform-icons {\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n width: 50px;\n height: 50px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n background-color: transparent;\n border: none;\n }\n }\n }\n .details-btn {\n background: $color-primary;\n color: #041b3d;\n border: none;\n cursor: pointer;\n padding: 22px 26px;\n height: 100%;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $heading-sm;\n line-height: normal;\n font-weight: $font-weight-medium;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n\n &:hover {\n background: #4fd6be;\n }\n\n .arrow-icon {\n width: 20px;\n height: 20px;\n margin-left: 10px;\n\n svg {\n width: 100%;\n height: 100%;\n }\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 1200px) {\n .projectCards {\n .project-cards {\n width: 100%;\n\n .project-cards-left {\n width: 50%;\n\n .project-left-card {\n display: flex;\n flex-direction: column;\n\n .project-header {\n .project-heading-text {\n font-size: $font-34;\n line-height: 42px;\n }\n }\n\n .left-content {\n .project-heading-text {\n font-size: $heading-xl;\n line-height: 42px;\n }\n }\n }\n }\n .project-cards-right {\n width: 50%;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .projectCards {\n .project-cards {\n width: 100%;\n flex-direction: column;\n .project-cards-left {\n width: 100%;\n\n .border-bottom-line {\n display: block;\n }\n .border-right {\n display: none;\n }\n .project-left-card {\n .project-header {\n .index-box {\n font-size: $heading-6xl;\n line-height: 68px;\n }\n .project-logo {\n padding: 16px;\n }\n .project-heading-text {\n font-size: $heading-lg;\n line-height: 40px;\n }\n }\n // .logorow {\n // padding: 20px;\n // }\n .left-content {\n padding: 20px;\n\n .project-heading-text {\n font-size: $heading-md;\n line-height: 34px;\n }\n }\n }\n .project-left-footer {\n padding: 20px;\n position: relative;\n }\n }\n .project-cards-right {\n width: 100%;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .projectCards {\n .project-cards {\n .project-cards-left {\n .project-left-card {\n .project-header {\n .index-box {\n font-size: $font-54;\n padding: 16px;\n line-height: 64px;\n display: flex;\n align-items: center;\n }\n\n .project-logo {\n .logo {\n width: 140px;\n }\n }\n }\n // .logorow {\n // padding: 16px;\n\n // .logo {\n // width: 140px;\n // }\n // }\n }\n }\n .project-cards-right {\n .project-footer-right {\n .platform-icons {\n span {\n width: 40px;\n height: 40px;\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .projectCards {\n .project-cards {\n .project-cards-left {\n .project-left-card {\n .project-header {\n .index-box {\n font-size: $heading-5xl;\n line-height: 58px;\n padding: 16px 16px 8px;\n }\n .project-logo {\n padding: 10px 16px;\n\n .logo {\n width: 140px;\n }\n }\n }\n // .logorow {\n // padding: 16px;\n\n // .logo {\n // width: 140px;\n // }\n // }\n .left-content {\n padding: 16px;\n }\n }\n .project-left-footer {\n padding: 16px;\n }\n }\n .project-cards-right {\n .project-footer-right {\n .platform-icons {\n padding: 10px;\n }\n }\n }\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.projectCards {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.projectCards .project-cards {\n width: 100%;\n display: flex;\n position: relative;\n}\n.projectCards .project-cards .border-line {\n position: absolute;\n top: -1px;\n left: 0%;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.projectCards .project-cards .project-cards-left {\n width: 40%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n}\n.projectCards .project-cards .project-cards-left .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.projectCards .project-cards .project-cards-left .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.projectCards .project-cards .project-cards-left .project-left-card {\n display: flex;\n flex-direction: column;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header {\n display: flex;\n align-items: center;\n position: relative;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: block;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box {\n background: #64e4cb;\n color: #000000;\n font-size: 70px;\n font-weight: 300;\n padding: 20px 16px 4px;\n font-family: \"PPSupplyMono-Ultralight\";\n line-height: 76px;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo {\n padding: 20px;\n width: 100%;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo {\n width: 170px;\n height: 60px;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 23px;\n font-weight: 600;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text {\n font-size: 2.875rem;\n color: #64e4cb;\n margin-bottom: 6px;\n font-weight: 400;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 56px;\n margin-bottom: 0;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .left-content {\n padding: 24px;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text {\n font-size: 36px;\n color: #64e4cb;\n margin-bottom: 6px;\n font-weight: 400;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 46px;\n}\n.projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-info {\n color: #cfd7f1;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 300;\n line-height: 24px;\n}\n.projectCards .project-cards .project-cards-left .project-left-footer {\n padding: 20px;\n position: relative;\n}\n.projectCards .project-cards .project-cards-left .project-left-footer .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.projectCards .project-cards .project-cards-left .project-left-footer .project-category-card {\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #cfd7f1;\n line-height: 30px;\n}\n.projectCards .project-cards .project-cards-right {\n width: 60%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.projectCards .project-cards .project-cards-right .project-image {\n width: 100%;\n height: auto;\n}\n.projectCards .project-cards .project-cards-right .project-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .platform-icons {\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span {\n width: 50px;\n height: 50px;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n background-color: transparent;\n border: none;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn {\n background: #64e4cb;\n color: #041b3d;\n border: none;\n cursor: pointer;\n padding: 22px 26px;\n height: 100%;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 1.25rem;\n line-height: normal;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn:hover {\n background: #4fd6be;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon {\n width: 20px;\n height: 20px;\n margin-left: 10px;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon svg {\n width: 100%;\n height: 100%;\n}\n.projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n@media (max-width: 1200px) {\n .projectCards .project-cards {\n width: 100%;\n }\n .projectCards .project-cards .project-cards-left {\n width: 50%;\n }\n .projectCards .project-cards .project-cards-left .project-left-card {\n display: flex;\n flex-direction: column;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text {\n font-size: 34px;\n line-height: 42px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text {\n font-size: 2rem;\n line-height: 42px;\n }\n .projectCards .project-cards .project-cards-right {\n width: 50%;\n }\n}\n@media (max-width: 1024px) {\n .projectCards .project-cards {\n width: 100%;\n flex-direction: column;\n }\n .projectCards .project-cards .project-cards-left {\n width: 100%;\n }\n .projectCards .project-cards .project-cards-left .border-bottom-line {\n display: block;\n }\n .projectCards .project-cards .project-cards-left .border-right {\n display: none;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box {\n font-size: 4rem;\n line-height: 68px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo {\n padding: 16px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text {\n font-size: 1.875rem;\n line-height: 40px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .left-content {\n padding: 20px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text {\n font-size: 1.5rem;\n line-height: 34px;\n }\n .projectCards .project-cards .project-cards-left .project-left-footer {\n padding: 20px;\n position: relative;\n }\n .projectCards .project-cards .project-cards-right {\n width: 100%;\n }\n}\n@media (max-width: 768px) {\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box {\n font-size: 54px;\n padding: 16px;\n line-height: 64px;\n display: flex;\n align-items: center;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo {\n width: 140px;\n }\n .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span {\n width: 40px;\n height: 40px;\n }\n}\n@media (max-width: 576px) {\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box {\n font-size: 3.25rem;\n line-height: 58px;\n padding: 16px 16px 8px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo {\n padding: 10px 16px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo {\n width: 140px;\n }\n .projectCards .project-cards .project-cards-left .project-left-card .left-content {\n padding: 16px;\n }\n .projectCards .project-cards .project-cards-left .project-left-footer {\n padding: 16px;\n }\n .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons {\n padding: 10px;\n }\n}","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .projectCards { display: flex; flex-direction: column; width: 100%; } .projectCards .project-cards { width: 100%; display: flex; position: relative; } .projectCards .project-cards .border-line { position: absolute; top: -1px; left: 0%; width: 100%; height: 1px; background: #64e4cb; } .projectCards .project-cards .project-cards-left { width: 40%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .projectCards .project-cards .project-cards-left .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .projectCards .project-cards .project-cards-left .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .projectCards .project-cards .project-cards-left .project-left-card { display: flex; flex-direction: column; } .projectCards .project-cards .project-cards-left .project-left-card .project-header { display: flex; align-items: center; position: relative; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; display: block; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box { background: #64e4cb; color: #000000; font-size: 70px; font-weight: 300; padding: 20px 16px 4px; font-family: "PPSupplyMono-Ultralight"; line-height: 76px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo { padding: 20px; width: 100%; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo { width: 170px; height: 60px; display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 600; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text { font-size: 2.875rem; color: #64e4cb; margin-bottom: 6px; font-weight: 400; font-family: "PPSupplySans-Regular", sans-serif; line-height: 56px; margin-bottom: 0; } .projectCards .project-cards .project-cards-left .project-left-card .left-content { padding: 24px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text { font-size: 36px; color: #64e4cb; margin-bottom: 6px; font-weight: 400; font-family: "PPSupplySans-Regular", sans-serif; line-height: 46px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-info { color: #cfd7f1; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 300; line-height: 24px; } .projectCards .project-cards .project-cards-left .project-left-footer { padding: 20px; position: relative; } .projectCards .project-cards .project-cards-left .project-left-footer .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .projectCards .project-cards .project-cards-left .project-left-footer .project-category-card { font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #cfd7f1; line-height: 30px; } .projectCards .project-cards .project-cards-right { width: 60%; display: flex; flex-direction: column; justify-content: space-between; } .projectCards .project-cards .project-cards-right .project-image { width: 100%; height: auto; } .projectCards .project-cards .project-cards-right .project-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .projectCards .project-cards .project-cards-right .project-footer-right { display: flex; align-items: center; justify-content: space-between; position: relative; } .projectCards .project-cards .project-cards-right .project-footer-right .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons { padding: 10px 15px; display: flex; align-items: center; gap: 8px; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span { width: 50px; height: 50px; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background-color: transparent; border: none; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn { background: #64e4cb; color: #041b3d; border: none; cursor: pointer; padding: 22px 26px; height: 100%; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; line-height: normal; font-weight: 500; display: flex; align-items: center; justify-content: center; text-decoration: none; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn:hover { background: #4fd6be; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon { width: 20px; height: 20px; margin-left: 10px; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon svg { width: 100%; height: 100%; } .projectCards .project-cards .project-cards-right .project-footer-right .details-btn .arrow-icon img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1200px) { .projectCards .project-cards { width: 100%; } .projectCards .project-cards .project-cards-left { width: 50%; } .projectCards .project-cards .project-cards-left .project-left-card { display: flex; flex-direction: column; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text { font-size: 34px; line-height: 42px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text { font-size: 2rem; line-height: 42px; } .projectCards .project-cards .project-cards-right { width: 50%; } } @media (max-width: 1024px) { .projectCards .project-cards { width: 100%; flex-direction: column; } .projectCards .project-cards .project-cards-left { width: 100%; } .projectCards .project-cards .project-cards-left .border-bottom-line { display: block; } .projectCards .project-cards .project-cards-left .border-right { display: none; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box { font-size: 4rem; line-height: 68px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo { padding: 16px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-heading-text { font-size: 1.875rem; line-height: 40px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content { padding: 20px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content .project-heading-text { font-size: 1.5rem; line-height: 34px; } .projectCards .project-cards .project-cards-left .project-left-footer { padding: 20px; position: relative; } .projectCards .project-cards .project-cards-right { width: 100%; } } @media (max-width: 768px) { .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box { font-size: 54px; padding: 16px; line-height: 64px; display: flex; align-items: center; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo { width: 140px; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons span { width: 40px; height: 40px; } } @media (max-width: 576px) { .projectCards .project-cards .project-cards-left .project-left-card .project-header .index-box { font-size: 3.25rem; line-height: 58px; padding: 16px 16px 8px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo { padding: 10px 16px; } .projectCards .project-cards .project-cards-left .project-left-card .project-header .project-logo .logo { width: 140px; } .projectCards .project-cards .project-cards-left .project-left-card .left-content { padding: 16px; } .projectCards .project-cards .project-cards-left .project-left-footer { padding: 16px; } .projectCards .project-cards .project-cards-right .project-footer-right .platform-icons { padding: 10px; } } /*# sourceMappingURL=portfolio-showcase.css.map */ {"version":3,"sources":["file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","post-listing.css","variables.scss%22%20as%20*;%0A%0A.blogWrapper%20%7B%0A%20%20margin-top:%2094px;%0A%20%20padding:%2070px;%0A%20%20position:%20relative;%0A%0A%20%20.bannerHeading%20%7B%0A%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20color:%20$color-primary;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20text-align:%20left;%0A%20%20%20%20word-break:%20break-word;%0A%20%20%7D%0A%20%20.border-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%7D%0A.blog-search-form%20%7B%0A%20%20display:%20flex;%0A%20%20align-items:%20center;%0A%20%20justify-content:%20space-between;%0A%20%20position:%20relative;%0A%20%20display:%20none;%0A%20%20opacity:%200;%0A%0A%20%20.border-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%0A%20%20.search-bar%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%20100%25;%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20padding:%2012px%2020px;%0A%20%20%20%20flex:%201;%0A%20%20%20%20gap:%2016px;%0A%20%20%7D%0A%20%20.search-icon%20%7B%0A%20%20%20%20color:%20$color-primary;%0A%20%20%20%20width:%2020px;%0A%20%20%20%20height:%2020px;%0A%20%20%7D%0A%20%20.search-input%20%7B%0A%20%20%20%20background:%20transparent;%0A%20%20%20%20border:%20none;%0A%20%20%20%20outline:%20none;%0A%20%20%20%20color:%20$white;%0A%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20width:%20100%25;%0A%20%20%7D%0A%20%20.search-input::placeholder%20%7B%0A%20%20%20%20color:%20%23aaaaaa;%0A%20%20%7D%0A%0A%20%20/*%20Sort%20*/%0A%20%20.sort-wrapper%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20gap:%208px;%0A%20%20%20%20color:%20$white;%0A%20%20%20%20white-space:%20nowrap;%0A%20%20%20%20padding:%2022px;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20opacity:%200;%0A%20%20%20%20%7D%0A%0A%20%20%20%20label%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.sort-select%20%7B%0A%20%20%20%20background:%20$color-primary-dark;%0A%20%20%20%20border:%20none;%0A%20%20%20%20color:%20$white;%0A%20%20%20%20cursor:%20pointer;%0A%20%20%20%20outline:%20none;%0A%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%0A%20%20%20%20option%20%7B%0A%20%20%20%20%20%20background:%20$color-primary-dark;%0A%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A.filter-tabs%20%7B%0A%20%20width:%20100%25;%0A%20%20display:%20flex;%0A%20%20align-items:%20center;%0A%20%20justify-content:%20flex-start;%0A%20%20overflow-x:%20auto;%20/*%20enable%20horizontal%20scroll%20*/%0A%20%20overflow-y:%20hidden;%0A%20%20white-space:%20nowrap;%20/*%20prevent%20wrap%20*/%0A%20%20scrollbar-width:%20none;%0A%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20position:%20relative;%0A%0A%20%20.border-bottom-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%20%20.tab%20%7B%0A%20%20%20%20display:%20inline-block;%0A%20%20%20%20background:%20transparent;%0A%20%20%20%20color:%20$white;%0A%20%20%20%20border:%20none;%0A%20%20%20%20padding:%2015px%2030px;%0A%20%20%20%20font-size:%20$text-base;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20cursor:%20pointer;%0A%20%20%20%20position:%20relative;%0A%20%20%20%20border-right:%201px%20solid%20$color-primary;%0A%20%20%20%20text-decoration:%20none;%0A%0A%20%20%20%20&.active%20%7B%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20font-weight:%20700;%0A%20%20%20%20%7D%0A%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A.results-count%20%7B%0A%20%20padding:%2013px%2015px;%0A%20%20position:%20relative;%0A%0A%20%20.border-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20top:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%0A%20%20.result-label%20%7B%0A%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20color:%20$color-primary;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20padding-right:%205px;%0A%20%20%7D%0A%20%20.result-tag%20%7B%0A%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20color:%20$white;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20text-decoration:%20none;%0A%20%20%20%20padding:%203px;%0A%20%20%20%20margin-right:%2010px;%0A%20%20%20%20background:%20rgba(100,%20228,%20203,%200.3);%0A%20%20%7D%0A%7D%0A.posts-wrapper%20%7B%0A%20%20.posts-grid%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20.post-card%20%7B%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%200px;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.card-details%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20row;%0A%20%20%20%20%20%20%20%20align-items:%20stretch;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20bottom:%20-1px;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20/*%20Left%20Image%20*/%0A%20%20%20%20%20%20%20%20.post-card-image%20%7B%0A%20%20%20%20%20%20%20%20%20%20max-width:%2040%25;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%0A%20%20%20%20%20%20%20%20%20%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20/*%20Right%20Content%20*/%0A%20%20%20%20%20%20%20%20.post-card-content%20%7B%0A%20%20%20%20%20%20%20%20%20%20flex:%201;%20/%20%E2%9C%85%20THIS%20IS%20THE%20FIX%20-%20takes%20remaining%20width%0A%20%20%20%20%20%20%20%20%20%20min-width:%200;%0A%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20gap:%2016px;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.post-card-title%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.post-card-date%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20letter-spacing:%200.5px;%0A%20%20%20%20%20%20%20%20%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20/*%20Excerpt%20*/%0A%20%20%20%20%20%20%20%20%20%20.post-card-excerpt%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.post-card-excerpt%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.post-card-meta%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%2020px;%0A%20%20%20%20%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20bottom:%20-1px;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.post-card-cats%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$text-base;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2028px;%0A%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20%20%20padding:%2012px%2024px;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.post-card-readmore%20%7B%0A%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary-dark;%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2028px;%0A%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20%20%20padding:%2012px%2024px;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A/%20single%20post%20page%0A.blog-details%20%7B%0A%20%20margin-top:%2094px;%0A%7D%0A.blog-banner,%0A.blogHeadingDetails%20%7B%0A%20%20width:%20100%25;%0A%20%20height:%20100%25;%0A%20%20position:%20relative;%0A%0A%20%20img%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20object-fit:%20cover;%0A%20%20%20%20height:%20auto;%0A%20%20%20%20display:%20block;%0A%20%20%7D%0A%0A%20%20.border-bottom-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%7D%0A.blog-content%20%7B%0A%20%20max-width:%201200px;%0A%20%20width:%20100%25;%0A%20%20margin:%200%20auto;%0A%20%20padding:%2030px%200;%0A%0A%20%20.blog-content-cats%20%7B%0A%20%20%20%20display:%20inline-flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20width:%20fit-content;%0A%20%20%20%20margin-bottom:%2018px;%0A%20%20%20%20color:%20$color-primary;%0A%20%20%20%20font-size:%20clamp(16px,%201.5vw,%2020px);%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20letter-spacing:%200.05em;%0A%20%20%20%20text-transform:%20uppercase;%0A%20%20%7D%0A%0A%20%20.entry-meta%20%7B%0A%20%20%20%20display:%20none;%0A%20%20%20%20opacity:%200;%0A%20%20%7D%0A%7D%0A.blogHeadingDetails%20%7B%0A%20%20padding:%2050px;%0A%20%20position:%20relative;%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.blogWrapper%20%7B%0A%20%20%20%20margin-top:%20107px;%0A%20%20%20%20padding:%2050px;%0A%0A%20%20%20%20.bannerHeading%20%7B%0A%20%20%20%20%20%20font-size:%20$font-48;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.blog-content%20%7B%0A%20%20%20%20max-width:%201024px;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20margin:%200%20auto;%0A%20%20%20%20padding:%2030px%2020px;%0A%20%20%7D%0A%20%20.blogHeadingDetails%20%7B%0A%20%20%20%20padding:%2045px;%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.blogWrapper%20%7B%0A%20%20%20%20margin-top:%20107px;%0A%20%20%20%20padding:%2040px;%0A%0A%20%20%20%20.bannerHeading%20%7B%0A%20%20%20%20%20%20font-size:%2042px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20.blog-search-form%20%7B%0A%20%20%20%20.sort-wrapper%20%7B%0A%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20.posts-wrapper%20%7B%0A%20%20%20%20.posts-grid%20%7B%0A%20%20%20%20%20%20.post-card%20%7B%0A%20%20%20%20%20%20%20%20.card-details%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20/*%20Left%20Image%20*/%0A%20%20%20%20%20%20%20%20%20%20.post-card-image%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.post-card-content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/%20single%20post%20page%0A%20%20.blog-details%20%7B%0A%20%20%20%20margin-top:%2094px;%0A%20%20%7D%0A%20%20.blog-content%20%7B%0A%20%20%20%20max-width:%20768px;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20margin:%200%20auto;%0A%20%20%20%20padding:%2020px%200;%0A%20%20%7D%0A%20%20.blogHeadingDetails%20%7B%0A%20%20%20%20padding:%2040px;%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.blogWrapper%20%7B%0A%20%20%20%20margin-top:%2072px;%0A%0A%20%20%20%20.bannerHeading%20%7B%0A%20%20%20%20%20%20font-size:%2042px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.posts-wrapper%20%7B%0A%20%20%20%20.posts-grid%20%7B%0A%20%20%20%20%20%20.post-card%20%7B%0A%20%20%20%20%20%20%20%20.card-details%20%7B%0A%20%20%20%20%20%20%20%20%20%20.post-card-content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.post-card-title%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2026px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.post-card-meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20.post-card-cats%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2012px%2016px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.blog-search-form%20%7B%0A%20%20%20%20.sort-wrapper%20%7B%0A%20%20%20%20%20%20label%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.sort-select%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/%20single%20post%20page%0A%20%20.blog-details%20%7B%0A%20%20%20%20margin-top:%2072px;%0A%20%20%7D%0A%20%20.blog-content%20%7B%0A%20%20%20%20max-width:%20100%25;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20margin:%200%20auto;%0A%20%20%20%20padding:%2030px%2020px;%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.blogWrapper%20%7B%0A%20%20%20%20padding:%2036px%2020px%2034px;%0A%20%20%7D%0A%20%20.blogHeadingDetails%20%7B%0A%20%20%20%20padding:%2036px%2020px%2034px;%0A%20%20%7D%0A%0A%20%20.blog-search-form%20%7B%0A%20%20%20%20align-items:%20flex-start;%0A%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20.search-bar%20%7B%0A%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20gap:%2012px;%0A%20%20%20%20%7D%0A%20%20%20%20.sort-wrapper%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20opacity:%201;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20.blog-content%20%7B%0A%20%20%20%20max-width:%20100%25;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20margin:%200%20auto;%0A%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20.blog-content-cats%20%7B%0A%20%20%20%20%20%20margin-bottom:%2018px;%0A%20%20%20%20%20%20padding:%207px%2012px;%0A%20%20%20%20%20%20font-size:%2014px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"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","file":"post-listing.css","sourcesContent":["// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.blogWrapper {\n margin-top: 94px;\n padding: 70px;\n position: relative;\n}\n.blogWrapper .bannerHeading {\n font-size: 4rem;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n color: #64e4cb;\n line-height: normal;\n text-align: left;\n word-break: break-word;\n}\n.blogWrapper .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n\n.blog-search-form {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n display: none;\n opacity: 0;\n /* Sort */\n}\n.blog-search-form .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.blog-search-form .search-bar {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 12px 20px;\n flex: 1;\n gap: 16px;\n}\n.blog-search-form .search-icon {\n color: #64e4cb;\n width: 20px;\n height: 20px;\n}\n.blog-search-form .search-input {\n background: transparent;\n border: none;\n outline: none;\n color: #ffffff;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n line-height: normal;\n width: 100%;\n}\n.blog-search-form .search-input::placeholder {\n color: #aaaaaa;\n}\n.blog-search-form .sort-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #ffffff;\n white-space: nowrap;\n padding: 22px;\n position: relative;\n}\n.blog-search-form .sort-wrapper .border-left {\n position: absolute;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.blog-search-form .sort-wrapper .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n opacity: 0;\n}\n.blog-search-form .sort-wrapper label {\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n color: #64e4cb;\n}\n.blog-search-form .sort-select {\n background: #06234f;\n border: none;\n color: #ffffff;\n cursor: pointer;\n outline: none;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.blog-search-form .sort-select option {\n background: #06234f;\n color: #ffffff;\n}\n\n.filter-tabs {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n overflow-x: auto; /* enable horizontal scroll */\n overflow-y: hidden;\n white-space: nowrap; /* prevent wrap */\n scrollbar-width: none;\n font-family: \"Space Grotesk\", sans-serif;\n position: relative;\n}\n.filter-tabs .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.filter-tabs .tab {\n display: inline-block;\n background: transparent;\n color: #ffffff;\n border: none;\n padding: 15px 30px;\n font-size: 1rem;\n line-height: normal;\n font-weight: 500;\n cursor: pointer;\n position: relative;\n border-right: 1px solid #64e4cb;\n text-decoration: none;\n}\n.filter-tabs .tab.active {\n color: #64e4cb;\n font-weight: 700;\n}\n.filter-tabs .tab:hover {\n color: #64e4cb;\n}\n\n.results-count {\n padding: 13px 15px;\n position: relative;\n}\n.results-count .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.results-count .result-label {\n font-size: 1.125rem;\n font-family: \"Space Grotesk\", sans-serif;\n color: #64e4cb;\n font-weight: 500;\n line-height: normal;\n padding-right: 5px;\n}\n.results-count .result-tag {\n font-size: 1.125rem;\n font-family: \"Space Grotesk\", sans-serif;\n color: #ffffff;\n font-weight: 500;\n line-height: normal;\n text-decoration: none;\n padding: 3px;\n margin-right: 10px;\n background: rgba(100, 228, 203, 0.3);\n}\n\n.posts-wrapper .posts-grid {\n display: flex;\n flex-direction: column;\n}\n.posts-wrapper .posts-grid .post-card {\n position: relative;\n}\n.posts-wrapper .posts-grid .post-card .border-line {\n position: absolute;\n top: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.posts-wrapper .posts-grid .post-card .card-details {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n width: 100%;\n position: relative;\n /* Left Image */\n /* Right Content */\n}\n.posts-wrapper .posts-grid .post-card .card-details .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-image {\n max-width: 40%;\n width: 100%;\n flex-shrink: 0;\n overflow: hidden;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-image a {\n display: block;\n height: 100%;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-content {\n flex: 1;\n min-width: 0;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n position: relative;\n /* Excerpt */\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-content .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n opacity: 0;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-content .border-left {\n position: absolute;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-title a {\n color: #64e4cb;\n text-decoration: none;\n font-size: 1.875rem;\n font-weight: 400;\n line-height: normal;\n display: block;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-date {\n color: #cfd7f1;\n font-size: 1.125rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-excerpt {\n color: #cfd7f1;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: normal;\n}\n.posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-excerpt p {\n margin: 0;\n}\n.posts-wrapper .posts-grid .post-card .post-card-meta {\n display: flex;\n align-items: center;\n gap: 20px;\n justify-content: space-between;\n position: relative;\n}\n.posts-wrapper .posts-grid .post-card .post-card-meta .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.posts-wrapper .posts-grid .post-card .post-card-meta .post-card-cats {\n color: #ffffff;\n font-size: 1rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: 28px;\n text-decoration: none;\n padding: 12px 24px;\n position: relative;\n}\n.posts-wrapper .posts-grid .post-card .post-card-meta .post-card-readmore {\n background-color: #64e4cb;\n color: #06234f;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n line-height: 28px;\n text-decoration: none;\n padding: 12px 24px;\n position: relative;\n}\n\n.blog-details {\n margin-top: 94px;\n}\n\n.blog-banner,\n.blogHeadingDetails {\n width: 100%;\n height: 100%;\n position: relative;\n}\n.blog-banner img,\n.blogHeadingDetails img {\n width: 100%;\n object-fit: cover;\n height: auto;\n display: block;\n}\n.blog-banner .border-bottom-line,\n.blogHeadingDetails .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n\n.blog-content {\n max-width: 1200px;\n width: 100%;\n margin: 0 auto;\n padding: 30px 0;\n}\n.blog-content .blog-content-cats {\n display: inline-flex;\n align-items: center;\n width: fit-content;\n margin-bottom: 18px;\n color: #64e4cb;\n font-size: clamp(16px, 1.5vw, 20px);\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n line-height: normal;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n.blog-content .entry-meta {\n display: none;\n opacity: 0;\n}\n\n.blogHeadingDetails {\n padding: 50px;\n position: relative;\n}\n\n@media (max-width: 1200px) {\n .blogWrapper {\n margin-top: 107px;\n padding: 50px;\n }\n .blogWrapper .bannerHeading {\n font-size: 48px;\n }\n .blog-content {\n max-width: 1024px;\n width: 100%;\n margin: 0 auto;\n padding: 30px 20px;\n }\n .blogHeadingDetails {\n padding: 45px;\n }\n}\n@media (max-width: 1024px) {\n .blogWrapper {\n margin-top: 107px;\n padding: 40px;\n }\n .blogWrapper .bannerHeading {\n font-size: 42px;\n }\n .blog-search-form .sort-wrapper {\n padding: 16px;\n }\n .posts-wrapper .posts-grid .post-card .card-details {\n display: flex;\n flex-direction: column;\n /* Left Image */\n }\n .posts-wrapper .posts-grid .post-card .card-details .post-card-image {\n max-width: 100%;\n width: 100%;\n }\n .posts-wrapper .posts-grid .post-card .card-details .post-card-content .border-line {\n opacity: 1;\n }\n .posts-wrapper .posts-grid .post-card .card-details .post-card-content .border-left {\n display: none;\n }\n .blog-details {\n margin-top: 94px;\n }\n .blog-content {\n max-width: 768px;\n width: 100%;\n margin: 0 auto;\n padding: 20px 0;\n }\n .blogHeadingDetails {\n padding: 40px;\n }\n}\n@media (max-width: 768px) {\n .blogWrapper {\n margin-top: 72px;\n }\n .blogWrapper .bannerHeading {\n font-size: 42px;\n }\n .posts-wrapper .posts-grid .post-card .card-details .post-card-content {\n padding: 16px;\n gap: 12px;\n }\n .posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-title a {\n font-size: 26px;\n }\n .posts-wrapper .posts-grid .post-card .post-card-meta .post-card-cats {\n padding: 12px 16px;\n }\n .blog-search-form .sort-wrapper label {\n font-size: 1.125rem;\n }\n .blog-search-form .sort-select {\n font-size: 1.125rem;\n }\n .blog-details {\n margin-top: 72px;\n }\n .blog-content {\n max-width: 100%;\n width: 100%;\n margin: 0 auto;\n padding: 30px 20px;\n }\n}\n@media (max-width: 576px) {\n .blogWrapper {\n padding: 36px 20px 34px;\n }\n .blogHeadingDetails {\n padding: 36px 20px 34px;\n }\n .blog-search-form {\n align-items: flex-start;\n justify-content: space-between;\n flex-direction: column;\n }\n .blog-search-form .search-bar {\n padding: 16px;\n gap: 12px;\n }\n .blog-search-form .sort-wrapper {\n width: 100%;\n }\n .blog-search-form .sort-wrapper .border-left {\n display: none;\n }\n .blog-search-form .sort-wrapper .border-line {\n opacity: 1;\n }\n .blog-content {\n max-width: 100%;\n width: 100%;\n margin: 0 auto;\n padding: 16px;\n }\n .blog-content .blog-content-cats {\n margin-bottom: 18px;\n padding: 7px 12px;\n font-size: 14px;\n }\n}","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.blogWrapper {\n margin-top: 94px;\n padding: 70px;\n position: relative;\n\n .bannerHeading {\n font-size: $heading-6xl;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n color: $color-primary;\n line-height: normal;\n text-align: left;\n word-break: break-word;\n }\n .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n}\n.blog-search-form {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n display: none;\n opacity: 0;\n\n .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .search-bar {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 12px 20px;\n flex: 1;\n gap: 16px;\n }\n .search-icon {\n color: $color-primary;\n width: 20px;\n height: 20px;\n }\n .search-input {\n background: transparent;\n border: none;\n outline: none;\n color: $white;\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n line-height: normal;\n width: 100%;\n }\n .search-input::placeholder {\n color: #aaaaaa;\n }\n\n /* Sort */\n .sort-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n color: $white;\n white-space: nowrap;\n padding: 22px;\n position: relative;\n\n .border-left {\n position: absolute;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n opacity: 0;\n }\n\n label {\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n color: $color-primary;\n }\n }\n .sort-select {\n background: $color-primary-dark;\n border: none;\n color: $white;\n cursor: pointer;\n outline: none;\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n\n option {\n background: $color-primary-dark;\n color: $white;\n }\n }\n}\n\n.filter-tabs {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n overflow-x: auto; /* enable horizontal scroll */\n overflow-y: hidden;\n white-space: nowrap; /* prevent wrap */\n scrollbar-width: none;\n font-family: \"Space Grotesk\", sans-serif;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .tab {\n display: inline-block;\n background: transparent;\n color: $white;\n border: none;\n padding: 15px 30px;\n font-size: $text-base;\n line-height: normal;\n font-weight: $font-weight-medium;\n cursor: pointer;\n position: relative;\n border-right: 1px solid $color-primary;\n text-decoration: none;\n\n &.active {\n color: $color-primary;\n font-weight: 700;\n }\n &:hover {\n color: $color-primary;\n }\n }\n}\n\n.results-count {\n padding: 13px 15px;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .result-label {\n font-size: $heading-xs;\n font-family: \"Space Grotesk\", sans-serif;\n color: $color-primary;\n font-weight: $font-weight-medium;\n line-height: normal;\n padding-right: 5px;\n }\n .result-tag {\n font-size: $heading-xs;\n font-family: \"Space Grotesk\", sans-serif;\n color: $white;\n font-weight: $font-weight-medium;\n line-height: normal;\n text-decoration: none;\n padding: 3px;\n margin-right: 10px;\n background: rgba(100, 228, 203, 0.3);\n }\n}\n.posts-wrapper {\n .posts-grid {\n display: flex;\n flex-direction: column;\n\n .post-card {\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n .card-details {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n width: 100%;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n /* Left Image */\n .post-card-image {\n max-width: 40%;\n width: 100%;\n flex-shrink: 0;\n overflow: hidden;\n\n a {\n display: block;\n height: 100%;\n }\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n }\n /* Right Content */\n .post-card-content {\n flex: 1; // ✅ THIS IS THE FIX - takes remaining width\n min-width: 0;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n opacity: 0;\n }\n\n .border-left {\n position: absolute;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n .post-card-title a {\n color: $color-primary;\n text-decoration: none;\n font-size: $heading-lg;\n font-weight: $font-weight-normal;\n line-height: normal;\n display: block;\n font-family: \"Space Grotesk\", sans-serif;\n }\n .post-card-date {\n color: $text-dark-light;\n font-size: $heading-xs;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n /* Excerpt */\n .post-card-excerpt {\n color: $text-dark-light;\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: normal;\n }\n .post-card-excerpt p {\n margin: 0;\n }\n }\n }\n .post-card-meta {\n display: flex;\n align-items: center;\n gap: 20px;\n justify-content: space-between;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .post-card-cats {\n color: $white;\n font-size: $text-base;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: 28px;\n text-decoration: none;\n padding: 12px 24px;\n position: relative;\n }\n .post-card-readmore {\n background-color: $color-primary;\n color: $color-primary-dark;\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n line-height: 28px;\n text-decoration: none;\n padding: 12px 24px;\n position: relative;\n }\n }\n }\n }\n}\n\n// single post page\n.blog-details {\n margin-top: 94px;\n}\n.blog-banner,\n.blogHeadingDetails {\n width: 100%;\n height: 100%;\n position: relative;\n\n img {\n width: 100%;\n object-fit: cover;\n height: auto;\n display: block;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n}\n.blog-content {\n max-width: 1200px;\n width: 100%;\n margin: 0 auto;\n padding: 30px 0;\n\n .blog-content-cats {\n display: inline-flex;\n align-items: center;\n width: fit-content;\n margin-bottom: 18px;\n color: $color-primary;\n font-size: clamp(16px, 1.5vw, 20px);\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n line-height: normal;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n }\n\n .entry-meta {\n display: none;\n opacity: 0;\n }\n}\n.blogHeadingDetails {\n padding: 50px;\n position: relative;\n}\n\n@media (max-width: 1200px) {\n .blogWrapper {\n margin-top: 107px;\n padding: 50px;\n\n .bannerHeading {\n font-size: $font-48;\n }\n }\n .blog-content {\n max-width: 1024px;\n width: 100%;\n margin: 0 auto;\n padding: 30px 20px;\n }\n .blogHeadingDetails {\n padding: 45px;\n }\n}\n@media (max-width: 1024px) {\n .blogWrapper {\n margin-top: 107px;\n padding: 40px;\n\n .bannerHeading {\n font-size: 42px;\n }\n }\n\n .blog-search-form {\n .sort-wrapper {\n padding: 16px;\n }\n }\n\n .posts-wrapper {\n .posts-grid {\n .post-card {\n .card-details {\n display: flex;\n flex-direction: column;\n\n /* Left Image */\n .post-card-image {\n max-width: 100%;\n width: 100%;\n }\n .post-card-content {\n .border-line {\n opacity: 1;\n }\n .border-left {\n display: none;\n }\n }\n }\n }\n }\n }\n\n // single post page\n .blog-details {\n margin-top: 94px;\n }\n .blog-content {\n max-width: 768px;\n width: 100%;\n margin: 0 auto;\n padding: 20px 0;\n }\n .blogHeadingDetails {\n padding: 40px;\n }\n}\n@media (max-width: 768px) {\n .blogWrapper {\n margin-top: 72px;\n\n .bannerHeading {\n font-size: 42px;\n }\n }\n .posts-wrapper {\n .posts-grid {\n .post-card {\n .card-details {\n .post-card-content {\n padding: 16px;\n gap: 12px;\n\n .post-card-title a {\n font-size: 26px;\n }\n }\n }\n .post-card-meta {\n .post-card-cats {\n padding: 12px 16px;\n }\n }\n }\n }\n }\n .blog-search-form {\n .sort-wrapper {\n label {\n font-size: $heading-xs;\n }\n }\n .sort-select {\n font-size: $heading-xs;\n }\n }\n\n // single post page\n .blog-details {\n margin-top: 72px;\n }\n .blog-content {\n max-width: 100%;\n width: 100%;\n margin: 0 auto;\n padding: 30px 20px;\n }\n}\n@media (max-width: 576px) {\n .blogWrapper {\n padding: 36px 20px 34px;\n }\n .blogHeadingDetails {\n padding: 36px 20px 34px;\n }\n\n .blog-search-form {\n align-items: flex-start;\n justify-content: space-between;\n flex-direction: column;\n\n .search-bar {\n padding: 16px;\n gap: 12px;\n }\n .sort-wrapper {\n width: 100%;\n\n .border-left {\n display: none;\n }\n .border-line {\n opacity: 1;\n }\n }\n }\n\n .blog-content {\n max-width: 100%;\n width: 100%;\n margin: 0 auto;\n padding: 16px;\n\n .blog-content-cats {\n margin-bottom: 18px;\n padding: 7px 12px;\n font-size: 14px;\n }\n }\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .blogWrapper { margin-top: 94px; padding: 70px; position: relative; } .blogWrapper .bannerHeading { font-size: 4rem; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; color: #64e4cb; line-height: normal; text-align: left; word-break: break-word; } .blogWrapper .border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .blog-search-form { display: flex; align-items: center; justify-content: space-between; position: relative; display: none; opacity: 0; /* Sort */ } .blog-search-form .border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .blog-search-form .search-bar { width: 100%; height: 100%; display: flex; align-items: center; padding: 12px 20px; flex: 1; gap: 16px; } .blog-search-form .search-icon { color: #64e4cb; width: 20px; height: 20px; } .blog-search-form .search-input { background: transparent; border: none; outline: none; color: #ffffff; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; line-height: normal; width: 100%; } .blog-search-form .search-input::-moz-placeholder { color: #aaaaaa; } .blog-search-form .search-input::placeholder { color: #aaaaaa; } .blog-search-form .sort-wrapper { display: flex; align-items: center; gap: 8px; color: #ffffff; white-space: nowrap; padding: 22px; position: relative; } .blog-search-form .sort-wrapper .border-left { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #64e4cb; } .blog-search-form .sort-wrapper .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; opacity: 0; } .blog-search-form .sort-wrapper label { font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; color: #64e4cb; } .blog-search-form .sort-select { background: #06234f; border: none; color: #ffffff; cursor: pointer; outline: none; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; } .blog-search-form .sort-select option { background: #06234f; color: #ffffff; } .filter-tabs { width: 100%; display: flex; align-items: center; justify-content: flex-start; overflow-x: auto; /* enable horizontal scroll */ overflow-y: hidden; white-space: nowrap; /* prevent wrap */ scrollbar-width: none; font-family: "Space Grotesk", sans-serif; position: relative; } .filter-tabs .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .filter-tabs .tab { display: inline-block; background: transparent; color: #ffffff; border: none; padding: 15px 30px; font-size: 1rem; line-height: normal; font-weight: 500; cursor: pointer; position: relative; border-right: 1px solid #64e4cb; text-decoration: none; } .filter-tabs .tab.active { color: #64e4cb; font-weight: 700; } .filter-tabs .tab:hover { color: #64e4cb; } .results-count { padding: 13px 15px; position: relative; } .results-count .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .results-count .result-label { font-size: 1.125rem; font-family: "Space Grotesk", sans-serif; color: #64e4cb; font-weight: 500; line-height: normal; padding-right: 5px; } .results-count .result-tag { font-size: 1.125rem; font-family: "Space Grotesk", sans-serif; color: #ffffff; font-weight: 500; line-height: normal; text-decoration: none; padding: 3px; margin-right: 10px; background: rgba(100, 228, 203, 0.3); } .posts-wrapper .posts-grid { display: flex; flex-direction: column; } .posts-wrapper .posts-grid .post-card { position: relative; } .posts-wrapper .posts-grid .post-card .border-line { position: absolute; top: 0px; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .posts-wrapper .posts-grid .post-card .card-details { display: flex; flex-direction: row; align-items: stretch; width: 100%; position: relative; /* Left Image */ /* Right Content */ } .posts-wrapper .posts-grid .post-card .card-details .border-bottom-line { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .posts-wrapper .posts-grid .post-card .card-details .post-card-image { max-width: 40%; width: 100%; flex-shrink: 0; overflow: hidden; } .posts-wrapper .posts-grid .post-card .card-details .post-card-image a { display: block; height: 100%; } .posts-wrapper .posts-grid .post-card .card-details .post-card-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content { flex: 1; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; position: relative; /* Excerpt */ } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; opacity: 0; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .border-left { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #64e4cb; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-title a { color: #64e4cb; text-decoration: none; font-size: 1.875rem; font-weight: 400; line-height: normal; display: block; font-family: "Space Grotesk", sans-serif; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-date { color: #cfd7f1; font-size: 1.125rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-excerpt { color: #cfd7f1; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: normal; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-excerpt p { margin: 0; } .posts-wrapper .posts-grid .post-card .post-card-meta { display: flex; align-items: center; gap: 20px; justify-content: space-between; position: relative; } .posts-wrapper .posts-grid .post-card .post-card-meta .border-bottom-line { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .posts-wrapper .posts-grid .post-card .post-card-meta .post-card-cats { color: #ffffff; font-size: 1rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: 28px; text-decoration: none; padding: 12px 24px; position: relative; } .posts-wrapper .posts-grid .post-card .post-card-meta .post-card-readmore { background-color: #64e4cb; color: #06234f; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; line-height: 28px; text-decoration: none; padding: 12px 24px; position: relative; } .blog-details { margin-top: 94px; } .blog-banner, .blogHeadingDetails { width: 100%; height: 100%; position: relative; } .blog-banner img, .blogHeadingDetails img { width: 100%; -o-object-fit: cover; object-fit: cover; height: auto; display: block; } .blog-banner .border-bottom-line, .blogHeadingDetails .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .blog-content { max-width: 1200px; width: 100%; margin: 0 auto; padding: 30px 0; } .blog-content .blog-content-cats { display: inline-flex; align-items: center; width: -moz-fit-content; width: fit-content; margin-bottom: 18px; color: #64e4cb; font-size: clamp(16px, 1.5vw, 20px); font-family: "Space Grotesk", sans-serif; font-weight: 500; line-height: normal; letter-spacing: 0.05em; text-transform: uppercase; } .blog-content .entry-meta { display: none; opacity: 0; } .blogHeadingDetails { padding: 50px; position: relative; } @media (max-width: 1200px) { .blogWrapper { margin-top: 107px; padding: 50px; } .blogWrapper .bannerHeading { font-size: 48px; } .blog-content { max-width: 1024px; width: 100%; margin: 0 auto; padding: 30px 20px; } .blogHeadingDetails { padding: 45px; } } @media (max-width: 1024px) { .blogWrapper { margin-top: 107px; padding: 40px; } .blogWrapper .bannerHeading { font-size: 42px; } .blog-search-form .sort-wrapper { padding: 16px; } .posts-wrapper .posts-grid .post-card .card-details { display: flex; flex-direction: column; /* Left Image */ } .posts-wrapper .posts-grid .post-card .card-details .post-card-image { max-width: 100%; width: 100%; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .border-line { opacity: 1; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .border-left { display: none; } .blog-details { margin-top: 94px; } .blog-content { max-width: 768px; width: 100%; margin: 0 auto; padding: 20px 0; } .blogHeadingDetails { padding: 40px; } } @media (max-width: 768px) { .blogWrapper { margin-top: 72px; } .blogWrapper .bannerHeading { font-size: 42px; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content { padding: 16px; gap: 12px; } .posts-wrapper .posts-grid .post-card .card-details .post-card-content .post-card-title a { font-size: 26px; } .posts-wrapper .posts-grid .post-card .post-card-meta .post-card-cats { padding: 12px 16px; } .blog-search-form .sort-wrapper label { font-size: 1.125rem; } .blog-search-form .sort-select { font-size: 1.125rem; } .blog-details { margin-top: 72px; } .blog-content { max-width: 100%; width: 100%; margin: 0 auto; padding: 30px 20px; } } @media (max-width: 576px) { .blogWrapper { padding: 36px 20px 34px; } .blogHeadingDetails { padding: 36px 20px 34px; } .blog-search-form { align-items: flex-start; justify-content: space-between; flex-direction: column; } .blog-search-form .search-bar { padding: 16px; gap: 12px; } .blog-search-form .sort-wrapper { width: 100%; } .blog-search-form .sort-wrapper .border-left { display: none; } .blog-search-form .sort-wrapper .border-line { opacity: 1; } .blog-content { max-width: 100%; width: 100%; margin: 0 auto; padding: 16px; } .blog-content .blog-content-cats { margin-bottom: 18px; padding: 7px 12px; font-size: 14px; } } /*# sourceMappingURL=post-listing.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A.filterWrapper%20%7B%0A%20%20.filter-tabs%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20justify-content:%20center;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.tab%20%7B%0A%20%20%20%20%20%20background:%20transparent;%0A%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20padding:%2014px%2030px;%0A%20%20%20%20%20%20font-size:%2015px;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20border-right:%201px%20solid%20$color-primary;%0A%0A%20%20%20%20%20%20&:first-of-type%20%7B%0A%20%20%20%20%20%20%20%20border-left:%201px%20solid%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20&.active%20%7B%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20color:%20%2306244d;%0A%20%20%20%20%20%20%20%20font-weight:%20600;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20color:%20%2306244d;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.projectTitles%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20padding:%2069px%200;%0A%0A%20%20%20%20.work-project-heading%20%7B%0A%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20font-size:%20$heading-8xl;%0A%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20justify-self:%20center;%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.filterWrapper%20%7B%0A%20%20%20%20.projectTitles%20%7B%0A%20%20%20%20%20%20padding:%2058px%200;%0A%0A%20%20%20%20%20%20.work-project-heading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.filterWrapper%20%7B%0A%20%20%20%20.filter-tabs%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20overflow-x:%20auto;%20/*%20enable%20horizontal%20scroll%20*/%0A%20%20%20%20%20%20overflow-y:%20hidden;%0A%20%20%20%20%20%20white-space:%20nowrap;%20/*%20prevent%20wrap%20*/%0A%20%20%20%20%20%20scrollbar-width:%20none;%0A%20%20%20%20%7D%0A%20%20%20%20.projectTitles%20%7B%0A%20%20%20%20%20%20padding:%2046px%200;%0A%0A%20%20%20%20%20%20.work-project-heading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$font-54;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.filterWrapper%20%7B%0A%20%20%20%20.filter-tabs%20%7B%0A%20%20%20%20%20%20justify-content:%20flex-start;%0A%20%20%20%20%7D%0A%20%20%20%20.projectTitles%20%7B%0A%20%20%20%20%20%20padding:%2038px%200;%0A%0A%20%20%20%20%20%20.work-project-heading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%2038px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.filterWrapper%20%7B%0A%20%20%20%20.filter-tabs%20%7B%0A%20%20%20%20%20%20justify-content:%20flex-start;%0A%20%20%20%20%7D%0A%20%20%20%20.projectTitles%20%7B%0A%20%20%20%20%20%20padding:%2030px%200;%0A%0A%20%20%20%20%20%20.work-project-heading%20%7B%0A%20%20%20%20%20%20%20%20text-align:%20center;%0A%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","section-header-filter.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"AAAA,uBAAA;AC0CkB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AF/DE;EACE,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,wCAAA;EACA,kBAAA;AEkEJ;AFhEI;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBGlBU;ADoFhB;AF/DI;EACE,uBAAA;EACA,cGrBE;EHsBF,YAAA;EACA,kBAAA;EACA,eAAA;EACA,gBCwBe;EDvBf,eAAA;EACA,kBAAA;EACA,+BAAA;AEiEN;AF/DM;EACE,8BAAA;AEiER;AF9DM;EACE,mBGrCQ;EHsCR,cAAA;EACA,gBAAA;AEgER;AF9DM;EACE,mBG1CQ;EH2CR,cAAA;AEgER;AF5DE;EACE,WAAA;EACA,eAAA;AE8DJ;AF5DI;EACE,wCAAA;EACA,eCjBQ;EDkBR,gBCJe;EDKf,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,cG1DU;EH2DV,mBAAA;AE8DN;;AF1DA;EAEI;IACE,eAAA;EE4DJ;EF1DI;IACE,eCnCM;EC+FZ;AACF;AFxDA;EAEI;IACE,aAAA;IACA,gBAAA,EAAA,6BAAA;IACA,kBAAA;IACA,mBAAA,EAAA,iBAAA;IACA,qBAAA;EEyDJ;EFvDE;IACE,eAAA;EEyDJ;EFvDI;IACE,eC1EE;ECmIR;AACF;AFrDA;EAEI;IACE,2BAAA;EEsDJ;EFpDE;IACE,eAAA;EEsDJ;EFpDI;IACE,eAAA;EEsDN;AACF;AFlDA;EAEI;IACE,2BAAA;EEmDJ;EFjDE;IACE,eAAA;EEmDJ;EFjDI;IACE,kBAAA;IACA,mBCxFK;EC2IX;AACF","file":"section-header-filter.css","sourcesContent":["/* Add Block CSS Here */\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.filterWrapper {\n .filter-tabs {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: \"Space Grotesk\", sans-serif;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .tab {\n background: transparent;\n color: $white;\n border: none;\n padding: 14px 30px;\n font-size: 15px;\n font-weight: $font-weight-medium;\n cursor: pointer;\n position: relative;\n border-right: 1px solid $color-primary;\n\n &:first-of-type {\n border-left: 1px solid $color-primary;\n }\n\n &.active {\n background: $color-primary;\n color: #06244d;\n font-weight: 600;\n }\n &:hover {\n background: $color-primary;\n color: #06244d;\n }\n }\n }\n .projectTitles {\n width: 100%;\n padding: 69px 0;\n\n .work-project-heading {\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $heading-8xl;\n font-weight: $font-weight-normal;\n display: flex;\n align-items: center;\n justify-self: center;\n color: $color-primary;\n line-height: normal;\n }\n }\n}\n@media (max-width: 1200px) {\n .filterWrapper {\n .projectTitles {\n padding: 58px 0;\n\n .work-project-heading {\n font-size: $heading-6xl;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .filterWrapper {\n .filter-tabs {\n display: flex;\n overflow-x: auto; /* enable horizontal scroll */\n overflow-y: hidden;\n white-space: nowrap; /* prevent wrap */\n scrollbar-width: none;\n }\n .projectTitles {\n padding: 46px 0;\n\n .work-project-heading {\n font-size: $font-54;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .filterWrapper {\n .filter-tabs {\n justify-content: flex-start;\n }\n .projectTitles {\n padding: 38px 0;\n\n .work-project-heading {\n font-size: 38px;\n }\n }\n }\n}\n@media (max-width: 576px) {\n .filterWrapper {\n .filter-tabs {\n justify-content: flex-start;\n }\n .projectTitles {\n padding: 30px 0;\n\n .work-project-heading {\n text-align: center;\n font-size: $heading-lg;\n }\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.filterWrapper .filter-tabs {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: \"Space Grotesk\", sans-serif;\n position: relative;\n}\n.filterWrapper .filter-tabs .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.filterWrapper .filter-tabs .tab {\n background: transparent;\n color: #ffffff;\n border: none;\n padding: 14px 30px;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n position: relative;\n border-right: 1px solid #64e4cb;\n}\n.filterWrapper .filter-tabs .tab:first-of-type {\n border-left: 1px solid #64e4cb;\n}\n.filterWrapper .filter-tabs .tab.active {\n background: #64e4cb;\n color: #06244d;\n font-weight: 600;\n}\n.filterWrapper .filter-tabs .tab:hover {\n background: #64e4cb;\n color: #06244d;\n}\n.filterWrapper .projectTitles {\n width: 100%;\n padding: 69px 0;\n}\n.filterWrapper .projectTitles .work-project-heading {\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 5rem;\n font-weight: 400;\n display: flex;\n align-items: center;\n justify-self: center;\n color: #64e4cb;\n line-height: normal;\n}\n\n@media (max-width: 1200px) {\n .filterWrapper .projectTitles {\n padding: 58px 0;\n }\n .filterWrapper .projectTitles .work-project-heading {\n font-size: 4rem;\n }\n}\n@media (max-width: 1024px) {\n .filterWrapper .filter-tabs {\n display: flex;\n overflow-x: auto; /* enable horizontal scroll */\n overflow-y: hidden;\n white-space: nowrap; /* prevent wrap */\n scrollbar-width: none;\n }\n .filterWrapper .projectTitles {\n padding: 46px 0;\n }\n .filterWrapper .projectTitles .work-project-heading {\n font-size: 54px;\n }\n}\n@media (max-width: 768px) {\n .filterWrapper .filter-tabs {\n justify-content: flex-start;\n }\n .filterWrapper .projectTitles {\n padding: 38px 0;\n }\n .filterWrapper .projectTitles .work-project-heading {\n font-size: 38px;\n }\n}\n@media (max-width: 576px) {\n .filterWrapper .filter-tabs {\n justify-content: flex-start;\n }\n .filterWrapper .projectTitles {\n padding: 30px 0;\n }\n .filterWrapper .projectTitles .work-project-heading {\n text-align: center;\n font-size: 1.875rem;\n }\n}","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .filterWrapper .filter-tabs { width: 100%; display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; position: relative; } .filterWrapper .filter-tabs .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .filterWrapper .filter-tabs .tab { background: transparent; color: #ffffff; border: none; padding: 14px 30px; font-size: 15px; font-weight: 500; cursor: pointer; position: relative; border-right: 1px solid #64e4cb; } .filterWrapper .filter-tabs .tab:first-of-type { border-left: 1px solid #64e4cb; } .filterWrapper .filter-tabs .tab.active { background: #64e4cb; color: #06244d; font-weight: 600; } .filterWrapper .filter-tabs .tab:hover { background: #64e4cb; color: #06244d; } .filterWrapper .projectTitles { width: 100%; padding: 69px 0; } .filterWrapper .projectTitles .work-project-heading { font-family: "Space Grotesk", sans-serif; font-size: 5rem; font-weight: 400; display: flex; align-items: center; justify-self: center; color: #64e4cb; line-height: normal; } @media (max-width: 1200px) { .filterWrapper .projectTitles { padding: 58px 0; } .filterWrapper .projectTitles .work-project-heading { font-size: 4rem; } } @media (max-width: 1024px) { .filterWrapper .filter-tabs { display: flex; overflow-x: auto; /* enable horizontal scroll */ overflow-y: hidden; white-space: nowrap; /* prevent wrap */ scrollbar-width: none; } .filterWrapper .projectTitles { padding: 46px 0; } .filterWrapper .projectTitles .work-project-heading { font-size: 54px; } } @media (max-width: 768px) { .filterWrapper .filter-tabs { justify-content: flex-start; } .filterWrapper .projectTitles { padding: 38px 0; } .filterWrapper .projectTitles .work-project-heading { font-size: 38px; } } @media (max-width: 576px) { .filterWrapper .filter-tabs { justify-content: flex-start; } .filterWrapper .projectTitles { padding: 30px 0; } .filterWrapper .projectTitles .work-project-heading { text-align: center; font-size: 1.875rem; } } /*# sourceMappingURL=section-header-filter.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A.workWrapper%20%7B%0A%20%20margin-top:%2094px;%0A%20%20height:%20530px;%0A%20%20width:%20100%25;%0A%20%20display:%20flex;%0A%20%20padding-left:%20170px;%0A%20%20justify-content:%20center;%0A%20%20flex-direction:%20column;%0A%20%20position:%20relative;%0A%20%20overflow:%20hidden;%20/%20%E2%9C%85%20clip%20canvas%20to%20bounds%0A%0A%20%20/%20---%20Canvas%20background%20---%0A%20%20.testimonial-bg-canvas%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20inset:%200;%0A%20%20%20%20width:%20100%25%20!important;%0A%20%20%20%20height:%20100%25%20!important;%0A%20%20%20%20z-index:%200;%0A%20%20%20%20pointer-events:%20none;%20/%20remove%20if%20you%20want%20ripple%20clicks%0A%20%20%20%20display:%20block;%0A%20%20%7D%0A%0A%20%20/%20---%20Keep%20text%20above%20canvas%20---%0A%20%20.testimonialHeading,%0A%20%20.discription,%0A%20%20.border-line%20%7B%0A%20%20%20%20position:%20relative;%0A%20%20%20%20z-index:%201;%0A%20%20%7D%0A%0A%20%20.workbanner%20%7B%0A%20%20%20%20/%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20/%20font-weight:%20400;%0A%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20color:%20%23dddddd;%0A%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20line-height:%2074px;%0A%20%20%20%20margin-bottom:%2010px;%0A%20%20%20%20display:%20block;%0A%20%20%7D%0A%20%20.workDiscription%20%7B%0A%20%20%20%20font-size:%20$heading-2xl;%0A%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20line-height:%20normal;%0A%20%20%20%20max-width:%20720px;%0A%20%20%7D%0A%0A%20%20.border-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.bannerWrapper%20%7B%0A%20%20%20%20padding-left:%20125px;%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.workWrapper%20%7B%0A%20%20%20%20height:%20485px;%0A%20%20%20%20padding-left:%2080px;%0A%0A%20%20%20%20.workbanner%20%7B%0A%20%20%20%20%20%20font-size:%20$font-54;%0A%20%20%20%20%20%20line-height:%2064px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.workWrapper%20%7B%0A%20%20%20%20height:%20456px%20!important;%0A%20%20%20%20padding:%200%2020px;%0A%20%20%20%20margin-top:%2072px;%0A%0A%20%20%20%20.workbanner%20%7B%0A%20%20%20%20%20%20font-size:%20$font-48;%0A%20%20%20%20%20%20line-height:%2058px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.workDiscription%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-xl;%0A%20%20%20%20%20%20max-width:%20100%25;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.workWrapper%20%7B%0A%20%20%20%20height:%20456px%20!important;%0A%0A%20%20%20%20.workbanner%20%7B%0A%20%20%20%20%20%20font-size:%2042px;%0A%20%20%20%20%20%20line-height:%2046px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.workDiscription%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","section-header-work.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"AAAA,uBAAA;AC0CkB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AFhEA;EACE,gBAAA;EACA,aAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AEmEF;AFhEE;EACE,kBAAA;EACA,QAAA;EACA,sBAAA;EACA,uBAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;AEkEJ;AF9DE;;;EAGE,kBAAA;EACA,UAAA;AEgEJ;AF7DE;EAGE,eCFU;EDGV,cAAA;EACA,gBCaiB;EDZjB,+CAAA;EACA,iBAAA;EACA,mBAAA;EACA,cAAA;AE6DJ;AF3DE;EACE,iBCfU;EDgBV,gBCIiB;EDHjB,wCAAA;EACA,cG1Cc;EH2Cd,mBAAA;EACA,gBAAA;AE6DJ;AF1DE;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBG3DY;ADuHhB;;AFzDA;EACE;IACE,mBAAA;EE4DF;AACF;AF1DA;EACE;IACE,aAAA;IACA,kBAAA;EE4DF;EF1DE;IACE,eC5DI;ID6DJ,iBAAA;EE4DJ;AACF;AFxDA;EACE;IACE,wBAAA;IACA,eAAA;IACA,gBAAA;EE0DF;EFxDE;IACE,eC3EI;ID4EJ,iBAAA;EE0DJ;EFvDE;IACE,eC9DO;ID+DP,eAAA;EEyDJ;AACF;AFtDA;EACE;IACE,wBAAA;EEwDF;EFtDE;IACE,eAAA;IACA,iBAAA;EEwDJ;EFrDE;IACE,iBC/EO;ECsIX;AACF","file":"section-header-work.css","sourcesContent":["/* Add Block CSS Here */\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.workWrapper {\n margin-top: 94px;\n height: 530px;\n width: 100%;\n display: flex;\n padding-left: 170px;\n justify-content: center;\n flex-direction: column;\n position: relative;\n overflow: hidden; // ✅ clip canvas to bounds\n\n // --- Canvas background ---\n .testimonial-bg-canvas {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n z-index: 0;\n pointer-events: none; // remove if you want ripple clicks\n display: block;\n }\n\n // --- Keep text above canvas ---\n .testimonialHeading,\n .discription,\n .border-line {\n position: relative;\n z-index: 1;\n }\n\n .workbanner {\n // font-family: \"Space Grotesk\", sans-serif;\n // font-weight: 400;\n font-size: $heading-6xl;\n color: #dddddd;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 74px;\n margin-bottom: 10px;\n display: block;\n }\n .workDiscription {\n font-size: $heading-2xl;\n font-weight: $font-weight-normal;\n font-family: \"Space Grotesk\", sans-serif;\n color: $text-dark-light;\n line-height: normal;\n max-width: 720px;\n }\n\n .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n}\n@media (max-width: 1200px) {\n .bannerWrapper {\n padding-left: 125px;\n }\n}\n@media (max-width: 1024px) {\n .workWrapper {\n height: 485px;\n padding-left: 80px;\n\n .workbanner {\n font-size: $font-54;\n line-height: 64px;\n }\n }\n}\n\n@media (max-width: 768px) {\n .workWrapper {\n height: 456px !important;\n padding: 0 20px;\n margin-top: 72px;\n\n .workbanner {\n font-size: $font-48;\n line-height: 58px;\n }\n\n .workDiscription {\n font-size: $heading-xl;\n max-width: 100%;\n }\n }\n}\n@media (max-width: 576px) {\n .workWrapper {\n height: 456px !important;\n\n .workbanner {\n font-size: 42px;\n line-height: 46px;\n }\n\n .workDiscription {\n font-size: $heading-md;\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.workWrapper {\n margin-top: 94px;\n height: 530px;\n width: 100%;\n display: flex;\n padding-left: 170px;\n justify-content: center;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n.workWrapper .testimonial-bg-canvas {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n z-index: 0;\n pointer-events: none;\n display: block;\n}\n.workWrapper .testimonialHeading,\n.workWrapper .discription,\n.workWrapper .border-line {\n position: relative;\n z-index: 1;\n}\n.workWrapper .workbanner {\n font-size: 4rem;\n color: #dddddd;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n line-height: 74px;\n margin-bottom: 10px;\n display: block;\n}\n.workWrapper .workDiscription {\n font-size: 2.5rem;\n font-weight: 400;\n font-family: \"Space Grotesk\", sans-serif;\n color: #cfd7f1;\n line-height: normal;\n max-width: 720px;\n}\n.workWrapper .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n\n@media (max-width: 1200px) {\n .bannerWrapper {\n padding-left: 125px;\n }\n}\n@media (max-width: 1024px) {\n .workWrapper {\n height: 485px;\n padding-left: 80px;\n }\n .workWrapper .workbanner {\n font-size: 54px;\n line-height: 64px;\n }\n}\n@media (max-width: 768px) {\n .workWrapper {\n height: 456px !important;\n padding: 0 20px;\n margin-top: 72px;\n }\n .workWrapper .workbanner {\n font-size: 48px;\n line-height: 58px;\n }\n .workWrapper .workDiscription {\n font-size: 2rem;\n max-width: 100%;\n }\n}\n@media (max-width: 576px) {\n .workWrapper {\n height: 456px !important;\n }\n .workWrapper .workbanner {\n font-size: 42px;\n line-height: 46px;\n }\n .workWrapper .workDiscription {\n font-size: 1.5rem;\n }\n}","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .workWrapper { margin-top: 94px; height: 530px; width: 100%; display: flex; padding-left: 170px; justify-content: center; flex-direction: column; position: relative; overflow: hidden; } .workWrapper .testimonial-bg-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 0; pointer-events: none; display: block; } .workWrapper .testimonialHeading, .workWrapper .discription, .workWrapper .border-line { position: relative; z-index: 1; } .workWrapper .workbanner { font-size: 4rem; color: #dddddd; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; line-height: 74px; margin-bottom: 10px; display: block; } .workWrapper .workDiscription { font-size: 2.5rem; font-weight: 400; font-family: "Space Grotesk", sans-serif; color: #cfd7f1; line-height: normal; max-width: 720px; } .workWrapper .border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } @media (max-width: 1200px) { .bannerWrapper { padding-left: 125px; } } @media (max-width: 1024px) { .workWrapper { height: 485px; padding-left: 80px; } .workWrapper .workbanner { font-size: 54px; line-height: 64px; } } @media (max-width: 768px) { .workWrapper { height: 456px !important; padding: 0 20px; margin-top: 72px; } .workWrapper .workbanner { font-size: 48px; line-height: 58px; } .workWrapper .workDiscription { font-size: 2rem; max-width: 100%; } } @media (max-width: 576px) { .workWrapper { height: 456px !important; } .workWrapper .workbanner { font-size: 42px; line-height: 46px; } .workWrapper .workDiscription { font-size: 1.5rem; } } /*# sourceMappingURL=section-header-work.css.map */ {"version":3,"sources":["file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","single-projects.css","variables.scss%22%20as%20*;%0A%0A/%20============%20Project%20Detilas%20Hero%20%20================%20/%0A.projectDetailsWrapper%20%7B%0A%20%20margin-top:%2094px;%0A%0A%20%20.projectHeadingDetails%20%7B%0A%20%20%20%20padding:%2070px;%0A%20%20%20%20position:%20relative;%0A%20%20%20%20.projectHeadingTitle%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20text-align:%20left;%0A%20%20%20%20%20%20word-break:%20break-word;%0A%20%20%20%20%7D%0A%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.projectLandingImage%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%20auto;%0A%0A%20%20%20%20img%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A/%20=================%20Project%20Details%20Overview%20===============/%0A%0A.project-overview-wrapper%20%7B%0A%20%20.project-info%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20stretch;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20bottom:%20unset;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%7D%0A%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%7D%0A%20%20%20%20.project-info-logo%20%7B%0A%20%20%20%20%20%20width:%20400px;%0A%20%20%20%20%20%20/*%20height:%20350px;%20*/%0A%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20background-color:%20%23007cbd70;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20justify-content:%20center;%0A%0A%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20width:%2060%25;%0A%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.projectInfoTech%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-company-Info%20%7B%0A%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20justify-content:%20space-between;%0A%0A%20%20%20%20%20%20%20%20.project-company-name%20%7B%0A%20%20%20%20%20%20%20%20%20%20.project-company-label,%0A%20%20%20%20%20%20%20%20%20%20.project-company-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20/*%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%20*/%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.project-company-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-left:%208px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.platform-icons%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20gap:%208px;%0A%0A%20%20%20%20%20%20%20%20%20%20span%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-technology-info%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20align-items:%20stretch;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.project-skills%20%7B%0A%20%20%20%20%20%20%20%20%20%20max-width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.project-skills-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-label,%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.project-category%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-category-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%206px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-category-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.project-technology%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.project-technologies%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-technology-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.tech-tags%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-wrap:%20wrap;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-top-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.tech%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-base;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20&:first-of-type%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-col-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-col-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20left:%200%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-col-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20right:%200%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/*%20project-description%20*/%0A%0A%20%20.project-description%20%7B%0A%20%20%20%20padding:%2024px;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%7D%0A%20%20%20%20.project-description-heading%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20text-transform:%20capitalize;%0A%20%20%20%20%7D%0A%20%20%20%20.project-description-info%20%7B%0A%20%20%20%20%20%20margin-top:%208px;%0A%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A/%20======================%20Project%20Showcase%20Pages%20%20====================%20/%0A.brand-section%20%7B%0A%20%20.brand-block%20%7B%0A%20%20%20%20.brand-header%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20gap:%2024px;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.brand-number%20%7B%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20color:%20$black;%0A%20%20%20%20%20%20%20%20font-size:%20$font-70;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20padding:%2020px%2020px%2010px;%0A%20%20%20%20%20%20%20%20/*%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%20*/%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplyMono-Ultralight%22;%0A%20%20%20%20%20%20%20%20line-height:%2076px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.brand-heading%20%7B%0A%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20font-size:%20$font-34;%0A%20%20%20%20%20%20%20%20/*%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%20*/%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20line-height:%2040px;%0A%20%20%20%20%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20&:last-child%20%7B%0A%20%20%20%20%20%20.brand-content%20%7B%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.brand-content%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20stretch;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20&.brand-content-reverse%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20row-reverse;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20z-index:%202;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.brand-image%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20flex:%201.6;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20justify-content:%20center;%0A%0A%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.brand-description%20%7B%0A%20%20%20%20%20%20%20%20max-width:%2030%25;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20padding:%2034px;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20background:%20$bg-tranparent;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20&.brand-reverse%20%7B%0A%20%20%20%20%20%20%20%20%20%20border-left:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20z-index:%201;%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xl;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.projectDetailsWrapper%20%7B%0A%20%20%20%20.projectHeadingDetails%20%7B%0A%20%20%20%20%20%20padding:%2050px;%0A%0A%20%20%20%20%20%20.projectHeadingTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$font-48;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/%20%20%20Project%20Showcase%20%20/%0A%20%20.brand-section%20%7B%0A%20%20%20%20.brand-block%20%7B%0A%20%20%20%20%20%20.brand-content%20%7B%0A%20%20%20%20%20%20%20%20.brand-description%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.projectDetailsWrapper%20%7B%0A%20%20%20%20.projectHeadingDetails%20%7B%0A%20%20%20%20%20%20padding:%2040px;%0A%0A%20%20%20%20%20%20.projectHeadingTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/%20%20%20project%20overviwe%20/%0A%20%20.project-overview-wrapper%20%7B%0A%20%20%20%20.project-info%20%7B%0A%20%20%20%20%20%20.projectInfoTech%20%7B%0A%20%20%20%20%20%20%20%20.project-company-Info%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20.project-company-name%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-company-label,%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-company-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.project-technology-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20.project-skills%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-category%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.project-technology%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-technologies%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/%20%20%20Project%20Showcase%20%20/%0A%20%20.brand-section%20%7B%0A%20%20%20%20.brand-block%20%7B%0A%20%20%20%20%20%20.brand-header%20%7B%0A%20%20%20%20%20%20%20%20.brand-number%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%2060px;%0A%20%20%20%20%20%20%20%20%20%20padding:%2016px%2016px%206px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.brand-content%20%7B%0A%20%20%20%20%20%20%20%20.brand-description%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.projectDetailsWrapper%20%7B%0A%20%20%20%20margin-top:%2072px;%0A%20%20%7D%0A%0A%20%20/%20%20%20project%20overviwe/%0A%20%20.project-overview-wrapper%20%7B%0A%20%20%20%20.project-info%20%7B%0A%20%20%20%20%20%20.project-info-logo%20%7B%0A%20%20%20%20%20%20%20%20width:%20260px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.projectInfoTech%20%7B%0A%20%20%20%20%20%20%20%20.project-company-Info%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20.project-company-name%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-company-label,%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-company-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.project-technology-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20.project-skills%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-label,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-category%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-category-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.project-technology%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-technologies%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-technology-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.tech-tags%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.tech%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2014px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20/*%20project-description%20*/%0A%20%20%20%20.project-description%20%7B%0A%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20/%20%20%20Project%20Showcase%20%20/%0A%20%20.brand-section%20%7B%0A%20%20%20%20.brand-block%20%7B%0A%20%20%20%20%20%20.brand-header%20%7B%0A%20%20%20%20%20%20%20%20.brand-number%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$font-54;%0A%20%20%20%20%20%20%20%20%20%20padding:%2016px%2016px%206px;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2060px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.brand-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$font-28;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2032px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.brand-content%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20column-reverse%20!important;%0A%0A%20%20%20%20%20%20%20%20.brand-description%20%7B%0A%20%20%20%20%20%20%20%20%20%20max-width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20&.brand-reverse%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.projectDetailsWrapper%20%7B%0A%20%20%20%20.projectHeadingDetails%20%7B%0A%20%20%20%20%20%20padding:%2036px%2020px%2034px;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/%20%20%20Project%20Overviwe%0A%20%20.project-overview-wrapper%20%7B%0A%20%20%20%20.project-info%20%7B%0A%20%20%20%20%20%20flex-direction:%20column-reverse;%0A%0A%20%20%20%20%20%20.project-info-logo%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25%20!important;%0A%20%20%20%20%20%20%20%20height:%20160px;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.projectInfoTech%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.project-company-Info%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20.project-company-name%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-company-label,%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-company-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.platform-icons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%208px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20span%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.project-technology-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20stretch;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20.project-skills%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-label,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-skills-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-category%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-category-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-category-info%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.project-technology%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.project-technologies%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.project-technology-label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.tech-tags%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.tech%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&:first-of-type%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-col-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20/*%20project-description%20*/%0A%20%20%20%20.project-description%20%7B%0A%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20.project-description-heading%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.project-description-info%20%7B%0A%20%20%20%20%20%20%20%20margin-top:%206px;%0A%20%20%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/%20%20%20Project%20Showcase%20%20/%0A%20%20.brand-section%20%7B%0A%20%20%20%20.brand-block%20%7B%0A%20%20%20%20%20%20.brand-header%20%7B%0A%20%20%20%20%20%20%20%20.brand-number%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%20%20%20%20padding:%2012px%2012px%202px;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2054px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.brand-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$font-28;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2032px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.brand-content%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20column-reverse%20!important;%0A%20%20%20%20%20%20%20%20.brand-description%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20max-width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20&.brand-reverse%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xs;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"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","file":"single-projects.css","sourcesContent":["// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.projectDetailsWrapper {\n margin-top: 94px;\n}\n.projectDetailsWrapper .projectHeadingDetails {\n padding: 70px;\n position: relative;\n}\n.projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle {\n font-size: 4rem;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n color: #64e4cb;\n line-height: normal;\n text-align: left;\n word-break: break-word;\n}\n.projectDetailsWrapper .projectHeadingDetails .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.projectDetailsWrapper .projectLandingImage {\n width: 100%;\n height: auto;\n}\n.projectDetailsWrapper .projectLandingImage img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n.project-overview-wrapper {\n /* project-description */\n}\n.project-overview-wrapper .project-info {\n display: flex;\n align-items: stretch;\n position: relative;\n}\n.project-overview-wrapper .project-info .border-line {\n position: absolute;\n top: 0;\n left: 0;\n bottom: unset;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.project-overview-wrapper .project-info .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.project-overview-wrapper .project-info .project-info-logo {\n width: 400px;\n /* height: 350px; */\n flex-shrink: 0;\n object-fit: contain;\n background-color: rgba(0, 124, 189, 0.4392156863);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.project-overview-wrapper .project-info .project-info-logo img {\n width: 60%;\n height: auto;\n object-fit: cover;\n}\n.project-overview-wrapper .project-info .projectInfoTech {\n width: 100%;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .border-left {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info {\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label,\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n font-size: 1.875rem;\n font-family: \"Space Grotesk\", sans-serif;\n /* font-family: \"PPSupplySans-Regular\", sans-serif; */\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n color: #e5f1fd;\n padding-left: 8px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span {\n width: 40px;\n height: 40px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills {\n max-width: 100%;\n width: 100%;\n height: auto;\n position: relative;\n display: flex;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info {\n padding: 24px;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n display: block;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label,\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading {\n color: #e5f1fd;\n font-size: 1.25rem;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category {\n padding: 24px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n margin-bottom: 6px;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n font-size: 1.25rem;\n color: #cfd7f1;\n line-height: normal;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology {\n display: flex;\n width: 100%;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies {\n padding: 24px;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #64e4cb;\n line-height: normal;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags {\n display: flex;\n flex-wrap: wrap;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .border-top-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 16px;\n font-size: 1rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #e5f1fd;\n position: relative;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech:first-of-type .border-col-left {\n opacity: 1;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .border-col-left {\n position: absolute;\n top: 0;\n left: 0 !important;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n opacity: 0;\n}\n.project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .border-col-line {\n position: absolute;\n top: 0;\n right: 0 !important;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.project-overview-wrapper .project-description {\n padding: 24px;\n position: relative;\n}\n.project-overview-wrapper .project-description .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n}\n.project-overview-wrapper .project-description .project-description-heading {\n font-size: 1.5rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 500;\n color: #64e4cb;\n line-height: normal;\n text-transform: capitalize;\n}\n.project-overview-wrapper .project-description .project-description-info {\n margin-top: 8px;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n color: #e5f1fd;\n line-height: normal;\n}\n\n.brand-section .brand-block .brand-header {\n display: flex;\n align-items: center;\n gap: 24px;\n position: relative;\n}\n.brand-section .brand-block .brand-header .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.brand-section .brand-block .brand-header .brand-number {\n background: #64e4cb;\n color: #000000;\n font-size: 70px;\n font-weight: 300;\n padding: 20px 20px 10px;\n /* font-family: \"Space Grotesk\", sans-serif; */\n font-family: \"PPSupplyMono-Ultralight\";\n line-height: 76px;\n}\n.brand-section .brand-block .brand-header .brand-heading {\n color: #64e4cb;\n font-size: 34px;\n /* font-family: \"Space Grotesk\", sans-serif; */\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: 500;\n line-height: 40px;\n text-transform: uppercase;\n}\n.brand-section .brand-block:last-child .brand-content .border-bottom-line {\n display: none;\n}\n.brand-section .brand-block .brand-content {\n display: flex;\n align-items: stretch;\n width: 100%;\n position: relative;\n}\n.brand-section .brand-block .brand-content.brand-content-reverse {\n flex-direction: row-reverse;\n}\n.brand-section .brand-block .brand-content .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 2;\n}\n.brand-section .brand-block .brand-content .brand-image {\n width: 100%;\n flex: 1.6;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.brand-section .brand-block .brand-content .brand-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.brand-section .brand-block .brand-content .brand-description {\n max-width: 30%;\n width: 100%;\n flex-shrink: 0;\n padding: 34px;\n display: flex;\n background: rgba(100, 228, 203, 0.2);\n position: relative;\n}\n.brand-section .brand-block .brand-content .brand-description.brand-reverse {\n border-left: 0;\n}\n.brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.brand-section .brand-block .brand-content .brand-description .border-left {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.brand-section .brand-block .brand-content .brand-description .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n z-index: 1;\n display: none;\n}\n.brand-section .brand-block .brand-content .brand-description p {\n color: #cfd7f1;\n font-size: 1.25rem;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: 400;\n line-height: normal;\n}\n\n@media (max-width: 1200px) {\n .projectDetailsWrapper .projectHeadingDetails {\n padding: 50px;\n }\n .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle {\n font-size: 48px;\n }\n .brand-section .brand-block .brand-content .brand-description {\n padding: 24px;\n }\n}\n@media (max-width: 1024px) {\n .projectDetailsWrapper .projectHeadingDetails {\n padding: 40px;\n }\n .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle {\n font-size: 2.75rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info {\n padding: 20px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills {\n flex-direction: column;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info {\n padding: 20px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .border-right {\n display: none;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category {\n padding: 20px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology {\n flex-direction: column;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies {\n padding: 20px;\n }\n .brand-section .brand-block .brand-header .brand-number {\n font-size: 60px;\n padding: 16px 16px 6px;\n }\n .brand-section .brand-block .brand-content .brand-description {\n padding: 20px;\n }\n}\n@media (max-width: 768px) {\n .projectDetailsWrapper {\n margin-top: 72px;\n }\n .project-overview-wrapper {\n /* project-description */\n }\n .project-overview-wrapper .project-info .project-info-logo {\n width: 260px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info {\n flex-direction: column;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills {\n max-width: 100%;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-right {\n display: none;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-bottom-line {\n display: block;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label {\n font-size: 1.5rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech {\n padding: 14px;\n }\n .project-overview-wrapper .project-description {\n padding: 20px;\n }\n .brand-section .brand-block .brand-header .brand-number {\n font-size: 54px;\n padding: 16px 16px 6px;\n line-height: 60px;\n }\n .brand-section .brand-block .brand-header .brand-heading {\n font-size: 28px;\n line-height: 32px;\n }\n .brand-section .brand-block .brand-content {\n flex-direction: column-reverse !important;\n }\n .brand-section .brand-block .brand-content .brand-description {\n max-width: 100%;\n }\n .brand-section .brand-block .brand-content .brand-description .border-left {\n display: none;\n }\n .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right {\n display: none;\n }\n .brand-section .brand-block .brand-content .brand-description .border-bottom-line {\n display: block;\n }\n}\n@media (max-width: 576px) {\n .projectDetailsWrapper .projectHeadingDetails {\n padding: 36px 20px 34px;\n }\n .project-overview-wrapper {\n /* project-description */\n }\n .project-overview-wrapper .project-info {\n flex-direction: column-reverse;\n }\n .project-overview-wrapper .project-info .project-info-logo {\n width: 100% !important;\n height: 160px;\n }\n .project-overview-wrapper .project-info .projectInfoTech {\n width: 100%;\n position: relative;\n }\n .project-overview-wrapper .project-info .projectInfoTech .border-left {\n display: none;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading {\n font-size: 1.25rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span {\n width: 40px;\n height: 40px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info {\n display: flex;\n align-items: stretch;\n position: relative;\n flex-direction: column;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills {\n max-width: 100%;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label,\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading {\n font-size: 1.25rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label {\n font-size: 1.25rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info {\n font-size: 1.125rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology {\n display: block;\n width: 100%;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies {\n padding: 16px;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label {\n font-size: 1.25rem;\n }\n .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech:first-of-type .border-col-left {\n opacity: 0;\n }\n .project-overview-wrapper .project-description {\n padding: 16px;\n }\n .project-overview-wrapper .project-description .project-description-heading {\n font-size: 1.4375rem;\n }\n .project-overview-wrapper .project-description .project-description-info {\n margin-top: 6px;\n font-size: 1.125rem;\n }\n .brand-section .brand-block .brand-header .brand-number {\n font-size: 2.75rem;\n padding: 12px 12px 2px;\n line-height: 54px;\n }\n .brand-section .brand-block .brand-header .brand-heading {\n font-size: 28px;\n line-height: 32px;\n }\n .brand-section .brand-block .brand-content {\n flex-direction: column-reverse !important;\n }\n .brand-section .brand-block .brand-content .brand-description {\n padding: 16px;\n max-width: 100%;\n }\n .brand-section .brand-block .brand-content .brand-description .border-left {\n display: none;\n }\n .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right {\n display: none;\n }\n .brand-section .brand-block .brand-content .brand-description .border-bottom-line {\n display: block;\n }\n .brand-section .brand-block .brand-content .brand-description p {\n font-size: 1.125rem;\n }\n}","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n// ============ Project Detilas Hero ================ //\n.projectDetailsWrapper {\n margin-top: 94px;\n\n .projectHeadingDetails {\n padding: 70px;\n position: relative;\n .projectHeadingTitle {\n font-size: $heading-6xl;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n color: $color-primary;\n line-height: normal;\n text-align: left;\n word-break: break-word;\n }\n .border-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n }\n .projectLandingImage {\n width: 100%;\n height: auto;\n\n img {\n width: 100%;\n height: auto;\n display: block;\n }\n }\n}\n\n// ================= Project Details Overview ===============//\n\n.project-overview-wrapper {\n .project-info {\n display: flex;\n align-items: stretch;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n bottom: unset;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n .project-info-logo {\n width: 400px;\n /* height: 350px; */\n flex-shrink: 0;\n object-fit: contain;\n background-color: #007cbd70;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 60%;\n height: auto;\n object-fit: cover;\n }\n }\n .projectInfoTech {\n width: 100%;\n position: relative;\n\n .border-left {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .project-company-Info {\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .project-company-name {\n .project-company-label,\n .project-company-heading {\n font-size: $heading-lg;\n font-family: \"Space Grotesk\", sans-serif;\n /* font-family: \"PPSupplySans-Regular\", sans-serif; */\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n }\n .project-company-heading {\n color: $text-dark-primary;\n padding-left: 8px;\n }\n }\n .platform-icons {\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n width: 40px;\n height: 40px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n .project-technology-info {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .project-skills {\n max-width: 100%;\n width: 100%;\n height: auto;\n position: relative;\n display: flex;\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n .project-skills-info {\n padding: 24px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n display: block;\n }\n\n .project-skills-label,\n .project-skills-heading {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n }\n .project-skills-heading {\n color: $text-dark-primary;\n font-size: $heading-sm;\n }\n }\n .project-category {\n padding: 24px;\n\n .project-category-label {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n margin-bottom: 6px;\n }\n .project-category-info {\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n font-size: $heading-sm;\n color: $text-dark-light;\n line-height: normal;\n }\n }\n }\n\n .project-technology {\n display: flex;\n width: 100%;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n\n .project-technologies {\n padding: 24px;\n position: relative;\n\n .project-technology-label {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $color-primary;\n line-height: normal;\n }\n }\n .tech-tags {\n display: flex;\n flex-wrap: wrap;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .border-top-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .tech {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 16px;\n font-size: $text-base;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $text-dark-primary;\n position: relative;\n\n &:first-of-type {\n .border-col-left {\n opacity: 1;\n }\n }\n\n .border-col-left {\n position: absolute;\n top: 0;\n left: 0 !important;\n width: 1px;\n height: 100%;\n background: $color-primary;\n opacity: 0;\n }\n\n .border-col-line {\n position: absolute;\n top: 0;\n right: 0 !important;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n }\n }\n }\n }\n }\n }\n\n /* project-description */\n\n .project-description {\n padding: 24px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n }\n .project-description-heading {\n font-size: $heading-md;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-medium;\n color: $color-primary;\n line-height: normal;\n text-transform: capitalize;\n }\n .project-description-info {\n margin-top: 8px;\n font-size: $heading-sm;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n color: $text-dark-primary;\n line-height: normal;\n }\n }\n}\n\n// ====================== Project Showcase Pages ==================== //\n.brand-section {\n .brand-block {\n .brand-header {\n display: flex;\n align-items: center;\n gap: 24px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .brand-number {\n background: $color-primary;\n color: $black;\n font-size: $font-70;\n font-weight: $font-weight-light;\n padding: 20px 20px 10px;\n /* font-family: \"Space Grotesk\", sans-serif; */\n font-family: \"PPSupplyMono-Ultralight\";\n line-height: 76px;\n }\n .brand-heading {\n color: $color-primary;\n font-size: $font-34;\n /* font-family: \"Space Grotesk\", sans-serif; */\n font-family: \"PPSupplySans-Regular\", sans-serif;\n font-weight: $font-weight-medium;\n line-height: 40px;\n text-transform: uppercase;\n }\n }\n &:last-child {\n .brand-content {\n .border-bottom-line {\n display: none;\n }\n }\n }\n .brand-content {\n display: flex;\n align-items: stretch;\n width: 100%;\n position: relative;\n\n &.brand-content-reverse {\n flex-direction: row-reverse;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 2;\n }\n .brand-image {\n width: 100%;\n flex: 1.6;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .brand-description {\n max-width: 30%;\n width: 100%;\n flex-shrink: 0;\n padding: 34px;\n display: flex;\n background: $bg-tranparent;\n position: relative;\n\n &.brand-reverse {\n border-left: 0;\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n }\n\n .border-left {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n z-index: 1;\n display: none;\n }\n p {\n color: $text-dark-light;\n font-size: $text-xl;\n font-family: \"Space Grotesk\", sans-serif;\n font-weight: $font-weight-normal;\n line-height: normal;\n }\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n .projectDetailsWrapper {\n .projectHeadingDetails {\n padding: 50px;\n\n .projectHeadingTitle {\n font-size: $font-48;\n }\n }\n }\n\n // Project Showcase //\n .brand-section {\n .brand-block {\n .brand-content {\n .brand-description {\n padding: 24px;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .projectDetailsWrapper {\n .projectHeadingDetails {\n padding: 40px;\n\n .projectHeadingTitle {\n font-size: $heading-3xl;\n }\n }\n }\n\n // project overviwe //\n .project-overview-wrapper {\n .project-info {\n .projectInfoTech {\n .project-company-Info {\n padding: 20px;\n\n .project-company-name {\n .project-company-label,\n .project-company-heading {\n font-size: $heading-md;\n }\n }\n }\n .project-technology-info {\n .project-skills {\n flex-direction: column;\n .project-skills-info {\n padding: 20px;\n\n .border-right {\n display: none;\n }\n }\n .project-category {\n padding: 20px;\n }\n }\n\n .project-technology {\n flex-direction: column;\n\n .project-technologies {\n padding: 20px;\n }\n }\n }\n }\n }\n }\n\n // Project Showcase //\n .brand-section {\n .brand-block {\n .brand-header {\n .brand-number {\n font-size: 60px;\n padding: 16px 16px 6px;\n }\n }\n .brand-content {\n .brand-description {\n padding: 20px;\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .projectDetailsWrapper {\n margin-top: 72px;\n }\n\n // project overviwe//\n .project-overview-wrapper {\n .project-info {\n .project-info-logo {\n width: 260px;\n }\n .projectInfoTech {\n .project-company-Info {\n padding: 16px;\n .project-company-name {\n .project-company-label,\n .project-company-heading {\n font-size: $heading-md;\n }\n }\n }\n .project-technology-info {\n flex-direction: column;\n\n .project-skills {\n max-width: 100%;\n\n .border-right {\n display: none;\n }\n .border-bottom-line {\n display: block;\n }\n .project-skills-info {\n padding: 16px;\n\n .project-skills-label,\n .project-skills-heading {\n font-size: $heading-md;\n }\n }\n .project-category {\n padding: 16px;\n\n .project-category-label {\n font-size: $heading-md;\n }\n }\n }\n\n .project-technology {\n .project-technologies {\n padding: 16px;\n\n .project-technology-label {\n font-size: $heading-md;\n }\n }\n .tech-tags {\n .tech {\n padding: 14px;\n }\n }\n }\n }\n }\n }\n\n /* project-description */\n .project-description {\n padding: 20px;\n }\n }\n // Project Showcase //\n .brand-section {\n .brand-block {\n .brand-header {\n .brand-number {\n font-size: $font-54;\n padding: 16px 16px 6px;\n line-height: 60px;\n }\n .brand-heading {\n font-size: $font-28;\n line-height: 32px;\n }\n }\n .brand-content {\n flex-direction: column-reverse !important;\n\n .brand-description {\n max-width: 100%;\n\n .border-left {\n display: none;\n }\n\n &.brand-reverse {\n .border-right {\n display: none;\n }\n }\n\n .border-bottom-line {\n display: block;\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 576px) {\n .projectDetailsWrapper {\n .projectHeadingDetails {\n padding: 36px 20px 34px;\n }\n }\n\n // Project Overviwe\n .project-overview-wrapper {\n .project-info {\n flex-direction: column-reverse;\n\n .project-info-logo {\n width: 100% !important;\n height: 160px;\n }\n .projectInfoTech {\n width: 100%;\n position: relative;\n\n .border-left {\n display: none;\n }\n\n .project-company-Info {\n padding: 16px;\n\n .project-company-name {\n .project-company-label,\n .project-company-heading {\n font-size: $heading-sm;\n }\n }\n .platform-icons {\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n width: 40px;\n height: 40px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n .project-technology-info {\n display: flex;\n align-items: stretch;\n position: relative;\n flex-direction: column;\n\n .project-skills {\n max-width: 100%;\n\n .project-skills-info {\n padding: 16px;\n\n .project-skills-label,\n .project-skills-heading {\n font-size: $heading-sm;\n }\n }\n .project-category {\n .project-category-label {\n font-size: $heading-sm;\n }\n .project-category-info {\n font-size: $heading-xs;\n }\n }\n }\n\n .project-technology {\n display: block;\n width: 100%;\n\n .project-technologies {\n padding: 16px;\n\n .project-technology-label {\n font-size: $heading-sm;\n }\n }\n .tech-tags {\n .tech {\n &:first-of-type {\n .border-col-left {\n opacity: 0;\n }\n }\n }\n }\n }\n }\n }\n }\n\n /* project-description */\n .project-description {\n padding: 16px;\n\n .project-description-heading {\n font-size: $text-xxl;\n }\n .project-description-info {\n margin-top: 6px;\n font-size: $heading-xs;\n }\n }\n }\n\n // Project Showcase //\n .brand-section {\n .brand-block {\n .brand-header {\n .brand-number {\n font-size: $heading-3xl;\n padding: 12px 12px 2px;\n line-height: 54px;\n }\n .brand-heading {\n font-size: $font-28;\n line-height: 32px;\n }\n }\n .brand-content {\n flex-direction: column-reverse !important;\n .brand-description {\n padding: 16px;\n max-width: 100%;\n\n .border-left {\n display: none;\n }\n\n &.brand-reverse {\n .border-right {\n display: none;\n }\n }\n\n .border-bottom-line {\n display: block;\n }\n p {\n font-size: $heading-xs;\n }\n }\n }\n }\n }\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .projectDetailsWrapper { margin-top: 94px; } .projectDetailsWrapper .projectHeadingDetails { padding: 70px; position: relative; } .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle { font-size: 4rem; font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; color: #64e4cb; line-height: normal; text-align: left; word-break: break-word; } .projectDetailsWrapper .projectHeadingDetails .border-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .projectDetailsWrapper .projectLandingImage { width: 100%; height: auto; } .projectDetailsWrapper .projectLandingImage img { width: 100%; height: auto; display: block; } .project-overview-wrapper { /* project-description */ } .project-overview-wrapper .project-info { display: flex; align-items: stretch; position: relative; } .project-overview-wrapper .project-info .border-line { position: absolute; top: 0; left: 0; bottom: unset; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .project-overview-wrapper .project-info .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .project-overview-wrapper .project-info .project-info-logo { width: 400px; /* height: 350px; */ flex-shrink: 0; -o-object-fit: contain; object-fit: contain; background-color: rgba(0, 124, 189, 0.4392156863); display: flex; align-items: center; justify-content: center; } .project-overview-wrapper .project-info .project-info-logo img { width: 60%; height: auto; -o-object-fit: cover; object-fit: cover; } .project-overview-wrapper .project-info .projectInfoTech { width: 100%; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .border-left { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info { padding: 24px; display: flex; align-items: center; justify-content: space-between; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label, .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { font-size: 1.875rem; font-family: "Space Grotesk", sans-serif; /* font-family: "PPSupplySans-Regular", sans-serif; */ font-weight: 400; color: #64e4cb; line-height: normal; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { color: #e5f1fd; padding-left: 8px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons { display: flex; align-items: center; gap: 8px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span { width: 40px; height: 40px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info { display: flex; flex-direction: column; align-items: stretch; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills { max-width: 100%; width: 100%; height: auto; position: relative; display: flex; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info { padding: 24px; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; display: block; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label, .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #64e4cb; line-height: normal; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading { color: #e5f1fd; font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category { padding: 24px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #64e4cb; line-height: normal; margin-bottom: 6px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info { font-family: "Space Grotesk", sans-serif; font-weight: 400; font-size: 1.25rem; color: #cfd7f1; line-height: normal; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology { display: flex; width: 100%; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies { padding: 24px; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #64e4cb; line-height: normal; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags { display: flex; flex-wrap: wrap; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .border-top-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech { display: flex; align-items: center; flex-shrink: 0; padding: 16px; font-size: 1rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #e5f1fd; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech:first-of-type .border-col-left { opacity: 1; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .border-col-left { position: absolute; top: 0; left: 0 !important; width: 1px; height: 100%; background: #64e4cb; opacity: 0; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech .border-col-line { position: absolute; top: 0; right: 0 !important; width: 1px; height: 100%; background: #64e4cb; } .project-overview-wrapper .project-description { padding: 24px; position: relative; } .project-overview-wrapper .project-description .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; } .project-overview-wrapper .project-description .project-description-heading { font-size: 1.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; color: #64e4cb; line-height: normal; text-transform: capitalize; } .project-overview-wrapper .project-description .project-description-info { margin-top: 8px; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; color: #e5f1fd; line-height: normal; } .brand-section .brand-block .brand-header { display: flex; align-items: center; gap: 24px; position: relative; } .brand-section .brand-block .brand-header .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .brand-section .brand-block .brand-header .brand-number { background: #64e4cb; color: #000000; font-size: 70px; font-weight: 300; padding: 20px 20px 10px; /* font-family: "Space Grotesk", sans-serif; */ font-family: "PPSupplyMono-Ultralight"; line-height: 76px; } .brand-section .brand-block .brand-header .brand-heading { color: #64e4cb; font-size: 34px; /* font-family: "Space Grotesk", sans-serif; */ font-family: "PPSupplySans-Regular", sans-serif; font-weight: 500; line-height: 40px; text-transform: uppercase; } .brand-section .brand-block:last-child .brand-content .border-bottom-line { display: none; } .brand-section .brand-block .brand-content { display: flex; align-items: stretch; width: 100%; position: relative; } .brand-section .brand-block .brand-content.brand-content-reverse { flex-direction: row-reverse; } .brand-section .brand-block .brand-content .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 2; } .brand-section .brand-block .brand-content .brand-image { width: 100%; flex: 1.6; display: flex; align-items: center; justify-content: center; } .brand-section .brand-block .brand-content .brand-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .brand-section .brand-block .brand-content .brand-description { max-width: 30%; width: 100%; flex-shrink: 0; padding: 34px; display: flex; background: rgba(100, 228, 203, 0.2); position: relative; } .brand-section .brand-block .brand-content .brand-description.brand-reverse { border-left: 0; } .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .brand-section .brand-block .brand-content .brand-description .border-left { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #64e4cb; } .brand-section .brand-block .brand-content .brand-description .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; z-index: 1; display: none; } .brand-section .brand-block .brand-content .brand-description p { color: #cfd7f1; font-size: 1.25rem; font-family: "Space Grotesk", sans-serif; font-weight: 400; line-height: normal; } @media (max-width: 1200px) { .projectDetailsWrapper .projectHeadingDetails { padding: 50px; } .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle { font-size: 48px; } .brand-section .brand-block .brand-content .brand-description { padding: 24px; } } @media (max-width: 1024px) { .projectDetailsWrapper .projectHeadingDetails { padding: 40px; } .projectDetailsWrapper .projectHeadingDetails .projectHeadingTitle { font-size: 2.75rem; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info { padding: 20px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label, .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills { flex-direction: column; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info { padding: 20px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .border-right { display: none; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category { padding: 20px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology { flex-direction: column; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies { padding: 20px; } .brand-section .brand-block .brand-header .brand-number { font-size: 60px; padding: 16px 16px 6px; } .brand-section .brand-block .brand-content .brand-description { padding: 20px; } } @media (max-width: 768px) { .projectDetailsWrapper { margin-top: 72px; } .project-overview-wrapper { /* project-description */ } .project-overview-wrapper .project-info .project-info-logo { width: 260px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label, .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info { flex-direction: column; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills { max-width: 100%; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-right { display: none; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .border-bottom-line { display: block; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label, .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label { font-size: 1.5rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech { padding: 14px; } .project-overview-wrapper .project-description { padding: 20px; } .brand-section .brand-block .brand-header .brand-number { font-size: 54px; padding: 16px 16px 6px; line-height: 60px; } .brand-section .brand-block .brand-header .brand-heading { font-size: 28px; line-height: 32px; } .brand-section .brand-block .brand-content { flex-direction: column-reverse !important; } .brand-section .brand-block .brand-content .brand-description { max-width: 100%; } .brand-section .brand-block .brand-content .brand-description .border-left { display: none; } .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right { display: none; } .brand-section .brand-block .brand-content .brand-description .border-bottom-line { display: block; } } @media (max-width: 576px) { .projectDetailsWrapper .projectHeadingDetails { padding: 36px 20px 34px; } .project-overview-wrapper { /* project-description */ } .project-overview-wrapper .project-info { flex-direction: column-reverse; } .project-overview-wrapper .project-info .project-info-logo { width: 100% !important; height: 160px; } .project-overview-wrapper .project-info .projectInfoTech { width: 100%; position: relative; } .project-overview-wrapper .project-info .projectInfoTech .border-left { display: none; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-label, .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .project-company-name .project-company-heading { font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons { display: flex; align-items: center; gap: 8px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span { width: 40px; height: 40px; } .project-overview-wrapper .project-info .projectInfoTech .project-company-Info .platform-icons span img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info { display: flex; align-items: stretch; position: relative; flex-direction: column; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills { max-width: 100%; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-label, .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-skills-info .project-skills-heading { font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-label { font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-skills .project-category .project-category-info { font-size: 1.125rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology { display: block; width: 100%; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies { padding: 16px; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .project-technologies .project-technology-label { font-size: 1.25rem; } .project-overview-wrapper .project-info .projectInfoTech .project-technology-info .project-technology .tech-tags .tech:first-of-type .border-col-left { opacity: 0; } .project-overview-wrapper .project-description { padding: 16px; } .project-overview-wrapper .project-description .project-description-heading { font-size: 1.4375rem; } .project-overview-wrapper .project-description .project-description-info { margin-top: 6px; font-size: 1.125rem; } .brand-section .brand-block .brand-header .brand-number { font-size: 2.75rem; padding: 12px 12px 2px; line-height: 54px; } .brand-section .brand-block .brand-header .brand-heading { font-size: 28px; line-height: 32px; } .brand-section .brand-block .brand-content { flex-direction: column-reverse !important; } .brand-section .brand-block .brand-content .brand-description { padding: 16px; max-width: 100%; } .brand-section .brand-block .brand-content .brand-description .border-left { display: none; } .brand-section .brand-block .brand-content .brand-description.brand-reverse .border-right { display: none; } .brand-section .brand-block .brand-content .brand-description .border-bottom-line { display: block; } .brand-section .brand-block .brand-content .brand-description p { font-size: 1.125rem; } } /*# sourceMappingURL=single-projects.css.map */ {"version":3,"sources":["file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","tech-stack.css","variables.scss%22%20as%20*;%0A%0A.techStackSection%20%7B%0A%20%20width:%20100%25;%0A%20%20position:%20relative;%0A%0A%20%20.border-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20top:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%20%20/*%20z-index:%202;%20*/%0A%20%20%7D%0A%20%20%23border-line%20%7B%0A%20%20%20%20z-index:%202;%0A%20%20%7D%0A%0A%20%20/*%20Tech%20Stack%20Header%20*/%0A%20%20.techStackHeader%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20padding:%2070px;%0A%20%20%20%20/*%20position:%20sticky;%0A%20%20top:%20107px;%20*/%0A%20%20%20%20z-index:%201;%0A%20%20%20%20background:%20$color-primary-dark;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-8xl;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20line-height:%201.2em;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%7D%0A%20%20%20%20.border-line-text%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20bottom:%20-1px;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20/*%20Tech%20Stack%20Cards%20*/%0A%20%20.techStackCards%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20.techStackCard%20%7B%0A%20%20%20%20%20%20background-color:%20$color-primary-dark;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20&.open%20%7B%0A%20%20%20%20%20%20%20%20.techStackCardHeader%20%7B%0A%20%20%20%20%20%20%20%20%20%20border-bottom:%201px%20solid%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary%20!important;%0A%20%20%20%20%20%20%20%20%20%20/*%20-webkit-text-stroke:%202px%20$color-primary-dark;%20*/%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20500%20!important;%0A%20%20%20%20%20%20%20%20%20%20text-shadow:%0A%20%20%20%20%20%20%20%20%20%20%20%201px%200%200%20$color-primary-dark,%0A%20%20%20%20%20%20%20%20%20%20%20%202px%200%200%20$color-primary-dark,%0A%20%20%20%20%20%20%20%20%20%20%20%200%202px%200%20$color-primary-dark,%0A%20%20%20%20%20%20%20%20%20%20%20%200%20-2px%200%20$color-primary-dark,%0A%20%20%20%20%20%20%20%20%20%20%20%200px%202px%200%20$color-primary-dark,%0A%20%20%20%20%20%20%20%20%20%20%20%20-2px%200px%200%20$color-primary-dark,%0A%20%20%20%20%20%20%20%20%20%20%20%200px%20-2px%200%20$color-primary-dark,%0A%20%20%20%20%20%20%20%20%20%20%20%200px%202px%200%20$color-primary-dark;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif%20!important;%0A%20%20%20%20%20%20%20%20%20%20border-bottom:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20max-height:%201000px;%20/*%20Adjust%20based%20on%20your%20content%20height%20*/%0A%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%20%20%20%20%20%20%20%20%20%20transform:%20translateY(0);%0A%20%20%20%20%20%20%20%20%20%20padding:%2035px%2045px;%20/*%20Restore%20full%20padding%20when%20open%20*/%0A%20%20%20%20%20%20%20%20%20%20transition:%20all%200.6s%20ease-out;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackToggle%20%7B%0A%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20rotate(1deg)%20!important;%0A%20%20%20%20%20%20%20%20%20%20%20%20transition:%20transform%200.3s%20ease%20!important;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackHeading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Orbitron%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20700;%0A%20%20%20%20%20%20%20%20%20%20letter-spacing:%201px;%0A%20%20%20%20%20%20%20%20%20%20color:%20%2300e6e6;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.techStackCardHeader%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20transition:%20all%200.3s%20ease;%0A%0A%20%20%20%20%20%20%20%20&:last-child%20%7B%0A%20%20%20%20%20%20%20%20%20%20.techStackNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-bottom:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.techStackNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20color:%20%23222222;%0A%20%20%20%20%20%20%20%20%20%20width:%20123px;%0A%20%20%20%20%20%20%20%20%20%20height:%20123px;%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20font-size:%2070px;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplyMono-Ultralight%22;%0A%20%20%20%20%20%20%20%20%20%20border-bottom:%201px%20dashed%20%23222222;%0A%20%20%20%20%20%20%20%20%20%20transition:%20all%200.4s%20ease;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.technologist%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%20123px;%0A%20%20%20%20%20%20%20%20%20%20justify-content:%20space-between;%0A%0A%20%20%20%20%20%20%20%20%20%20.techStackCategory%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20%20%20%20%20%20%20%20%20letter-spacing:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2036px;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.techStackIcons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackIcon%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2045px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackToggle%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20%2300ffff;%0A%20%20%20%20%20%20%20%20%20%20background:%20none;%0A%20%20%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20width:%20123px;%0A%20%20%20%20%20%20%20%20%20%20height:%20123px;%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20/*%20border-left:%201px%20dashed%20$color-primary;%20*/%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%0A%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20auto;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2025px;%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20rotate(180deg);%0A%20%20%20%20%20%20%20%20%20%20%20%20transition:%20transform%200.3s%20ease;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.border-left-dashed%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20to%20top,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%204px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transparent%204px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transparent%208px%0A%20%20%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.techStackContent%20%7B%0A%20%20%20%20%20%20%20%20max-height:%200;%0A%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%20%20%20%20%20%20%20%20opacity:%200;%0A%20%20%20%20%20%20%20%20transform:%20translateY(-20px);%0A%20%20%20%20%20%20%20%20transition:%20all%200.5s%20ease-in-out;%0A%20%20%20%20%20%20%20%20padding:%200%2045px;%0A%0A%20%20%20%20%20%20%20%20.techStackHeading%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20line-height:%201.3em;%0A%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplyMono-Regular%22;%0A%20%20%20%20%20%20%20%20%20%20margin-bottom:%2018px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackDescription%20%7B%0A%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20line-height:%201.6;%0A%20%20%20%20%20%20%20%20%20%20margin-bottom:%2025px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackColumns%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20padding-top:%2035px;%0A%20%20%20%20%20%20%20%20%20%20gap:%2040px;%0A%20%20%20%20%20%20%20%20%20%20/*%20border-top:%201px%20dashed%20%23767676;%20*/%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.tech-borderLine-row%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20to%20right,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%23767676,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%23767676%206px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transparent%206px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transparent%2012px%0A%20%20%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.tech-borderLine%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%2035px;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20transform-origin:%20left;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20270px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20to%20bottom,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%23767676,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%23767676%206px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transparent%206px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transparent%2012px%0A%20%20%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.techStackColumn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$white;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackColumnTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%201.3em;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplyMono-Regular%22;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%2018px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackList%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20list-style:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20li%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%2010px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&::before%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20content:%20%22/%22;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-right:%208px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20&.rightColumn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding-left:%2035px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.techStackSection%20%7B%0A%20%20%20%20.techStackHeader%20%7B%0A%20%20%20%20%20%20padding:%2055px;%0A%0A%20%20%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.techStackSection%20%7B%0A%20%20%20%20.techStackHeader%20%7B%0A%20%20%20%20%20%20padding:%2050px%2040px;%0A%0A%20%20%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%2055px;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.techStackSection%20%7B%0A%20%20%20%20.techStackHeader%20%7B%0A%20%20%20%20%20%20padding:%2050px%2020px%2046px;%0A%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20top:%200;%0A%0A%20%20%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%2055px;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.techStackCards%20%7B%0A%20%20%20%20%20%20.techStackCard%20%7B%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20.techStackCardHeader%20%7B%0A%20%20%20%20%20%20%20%20%20%20.techStackNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2080px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2090px;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2055px;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-top:%2010px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.technologist%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2012px%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2090px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackCategory%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackIcons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20gap:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.techStackIcon%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2035px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.techStackToggle%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2080px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2090px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20.techStackColumns%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-top:%2025px;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2030px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.tech-borderLine%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackColumn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20&.rightColumn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding-left:%200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.techStackSection%20%7B%0A%20%20%20%20.techStackHeader%20%7B%0A%20%20%20%20%20%20padding:%2038px%2020px%2036px;%0A%0A%20%20%20%20%20%20.techStackTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.techStackCards%20%7B%0A%20%20%20%20%20%20.techStackCard%20%7B%0A%20%20%20%20%20%20%20%20&.open%20%7B%0A%20%20%20%20%20%20%20%20%20%20.techStackContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2025px%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20max-height:%201200px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackCardHeader%20%7B%0A%20%20%20%20%20%20%20%20%20%20.techStackNumber%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2074px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2090px;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.technologist%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2012px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2090px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackCategory%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackIcons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.techStackIcon%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2024px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2034px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.techStackToggle%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2074px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2090px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.techStackContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20.techStackHeading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.techStackDescription%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-lg;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.techStackColumns%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-top:%2025px;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2024px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.tech-borderLine%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.techStackColumn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.techStackColumnTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.techStackList%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20li%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom:%2010px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20&.rightColumn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding-left:%200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"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","file":"tech-stack.css","sourcesContent":["// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.techStackSection {\n width: 100%;\n position: relative;\n /* Tech Stack Header */\n /* Tech Stack Cards */\n}\n.techStackSection .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n /* z-index: 2; */\n}\n.techStackSection #border-line {\n z-index: 2;\n}\n.techStackSection .techStackHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n /* position: sticky;\n top: 107px; */\n z-index: 1;\n background: #06234f;\n position: relative;\n}\n.techStackSection .techStackHeader .techStackTitle {\n font-size: 5rem;\n font-weight: 500;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: #e5f1fd;\n}\n.techStackSection .techStackHeader .border-line-text {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.techStackSection .techStackCards {\n display: flex;\n flex-direction: column;\n}\n.techStackSection .techStackCards .techStackCard {\n background-color: #06234f;\n position: relative;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackCardHeader {\n border-bottom: 1px solid #64e4cb;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackNumber {\n color: #64e4cb !important;\n /* -webkit-text-stroke: 2px $color-primary-dark; */\n font-weight: 500 !important;\n text-shadow: 1px 0 0 #06234f, 2px 0 0 #06234f, 0 2px 0 #06234f, 0 -2px 0 #06234f, 0px 2px 0 #06234f, -2px 0px 0 #06234f, 0px -2px 0 #06234f, 0px 2px 0 #06234f;\n font-family: \"PPSupplySans-Regular\", sans-serif !important;\n border-bottom: none;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackContent {\n max-height: 1000px; /* Adjust based on your content height */\n opacity: 1;\n transform: translateY(0);\n padding: 35px 45px; /* Restore full padding when open */\n transition: all 0.6s ease-out;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackToggle img {\n transform: rotate(1deg) !important;\n transition: transform 0.3s ease !important;\n}\n.techStackSection .techStackCards .techStackCard.open .techStackHeading {\n font-family: \"Orbitron\", sans-serif;\n font-weight: 700;\n letter-spacing: 1px;\n color: #00e6e6;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader {\n display: flex;\n align-items: center;\n width: 100%;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader:last-child .techStackNumber {\n border-bottom: none;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber {\n background-color: #64e4cb;\n color: #222222;\n width: 123px;\n height: 123px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 70px;\n font-weight: 300;\n font-family: \"PPSupplyMono-Ultralight\";\n border-bottom: 1px dashed #222222;\n transition: all 0.4s ease;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist {\n display: flex;\n flex-direction: column;\n padding: 20px;\n width: 100%;\n height: 123px;\n justify-content: space-between;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory {\n color: #64e4cb;\n font-size: 1.875rem;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin: 0;\n line-height: 36px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons {\n display: flex;\n align-items: center;\n gap: 40px;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon {\n height: 40px;\n width: 45px;\n object-fit: contain;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle {\n color: #00ffff;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.25rem;\n width: 123px;\n height: 123px;\n flex-shrink: 0;\n /* border-left: 1px dashed $color-primary; */\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle img {\n width: auto;\n height: 25px;\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n}\n.techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle .border-left-dashed {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: repeating-linear-gradient(to top, #64e4cb 0, #64e4cb 4px, transparent 4px, transparent 8px);\n}\n.techStackSection .techStackCards .techStackCard .techStackContent {\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n transform: translateY(-20px);\n transition: all 0.5s ease-in-out;\n padding: 0 45px;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackHeading {\n font-size: 1.4375rem;\n font-weight: 500;\n line-height: 1.3em;\n color: #64e4cb;\n font-family: \"PPSupplyMono-Regular\";\n margin-bottom: 18px;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackDescription {\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 1.25rem;\n font-weight: 400;\n line-height: 1.6;\n margin-bottom: 25px;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns {\n display: flex;\n padding-top: 35px;\n gap: 40px;\n /* border-top: 1px dashed #767676; */\n position: relative;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine-row {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(to right, #767676, #767676 6px, transparent 6px, transparent 12px);\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine {\n position: absolute;\n top: 35px;\n left: 50%;\n width: 1px;\n transform-origin: left;\n height: 270px;\n background: repeating-linear-gradient(to bottom, #767676, #767676 6px, transparent 6px, transparent 12px);\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn {\n width: 50%;\n color: #ffffff;\n position: relative;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackColumnTitle {\n font-size: 1.4375rem;\n font-weight: 500;\n line-height: 1.3em;\n color: #64e4cb;\n font-family: \"PPSupplyMono-Regular\";\n margin-bottom: 18px;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li {\n margin-bottom: 10px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: 1.25rem;\n font-weight: 300;\n position: relative;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li::before {\n content: \"//\";\n color: #64e4cb;\n margin-right: 8px;\n font-weight: 300;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn {\n padding-left: 35px;\n}\n\n@media (max-width: 1200px) {\n .techStackSection .techStackHeader {\n padding: 55px;\n }\n .techStackSection .techStackHeader .techStackTitle {\n font-size: 4rem;\n }\n}\n@media (max-width: 1024px) {\n .techStackSection .techStackHeader {\n padding: 50px 40px;\n }\n .techStackSection .techStackHeader .techStackTitle {\n font-size: 55px;\n line-height: 1em;\n }\n}\n@media (max-width: 768px) {\n .techStackSection .techStackHeader {\n padding: 50px 20px 46px;\n position: relative;\n top: 0;\n }\n .techStackSection .techStackHeader .techStackTitle {\n font-size: 55px;\n line-height: 1em;\n }\n .techStackSection .techStackCards .techStackCard {\n position: relative;\n top: 0;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber {\n width: 80px;\n height: 90px;\n font-size: 55px;\n padding-top: 10px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist {\n padding: 12px 16px;\n height: 90px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory {\n font-size: 1.4375rem;\n line-height: 30px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons {\n gap: 20px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon {\n height: 30px;\n width: 35px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle {\n width: 80px;\n height: 90px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns {\n flex-direction: column;\n padding-top: 25px;\n gap: 30px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine {\n display: none;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn {\n width: 100%;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn {\n padding-left: 0px;\n }\n}\n@media (max-width: 576px) {\n .techStackSection .techStackHeader {\n padding: 38px 20px 36px;\n }\n .techStackSection .techStackHeader .techStackTitle {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .techStackSection .techStackCards .techStackCard.open .techStackContent {\n padding: 25px 20px;\n max-height: 1200px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber {\n width: 74px;\n height: 90px;\n font-size: 2.75rem;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist {\n padding: 12px;\n height: 90px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory {\n font-size: 1.4375rem;\n line-height: 30px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons {\n gap: 12px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon {\n height: 24px;\n width: 34px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle {\n width: 74px;\n height: 90px;\n }\n .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle img {\n height: 20px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackHeading {\n font-size: 1.25rem;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackDescription {\n font-size: 1.125rem;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns {\n flex-direction: column;\n padding-top: 25px;\n gap: 24px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine {\n display: none;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn {\n width: 100%;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackColumnTitle {\n font-size: 1.25rem;\n margin-bottom: 16px;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li {\n margin-bottom: 10px;\n font-size: 1.125rem;\n }\n .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn {\n padding-left: 0px;\n }\n}","@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.techStackSection {\n width: 100%;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n /* z-index: 2; */\n }\n #border-line {\n z-index: 2;\n }\n\n /* Tech Stack Header */\n .techStackHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n /* position: sticky;\n top: 107px; */\n z-index: 1;\n background: $color-primary-dark;\n position: relative;\n\n .techStackTitle {\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: $text-dark-primary;\n }\n .border-line-text {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n }\n\n /* Tech Stack Cards */\n .techStackCards {\n display: flex;\n flex-direction: column;\n\n .techStackCard {\n background-color: $color-primary-dark;\n position: relative;\n\n &.open {\n .techStackCardHeader {\n border-bottom: 1px solid $color-primary;\n }\n .techStackNumber {\n color: $color-primary !important;\n /* -webkit-text-stroke: 2px $color-primary-dark; */\n font-weight: 500 !important;\n text-shadow:\n 1px 0 0 $color-primary-dark,\n 2px 0 0 $color-primary-dark,\n 0 2px 0 $color-primary-dark,\n 0 -2px 0 $color-primary-dark,\n 0px 2px 0 $color-primary-dark,\n -2px 0px 0 $color-primary-dark,\n 0px -2px 0 $color-primary-dark,\n 0px 2px 0 $color-primary-dark;\n font-family: \"PPSupplySans-Regular\", sans-serif !important;\n border-bottom: none;\n }\n .techStackContent {\n max-height: 1000px; /* Adjust based on your content height */\n opacity: 1;\n transform: translateY(0);\n padding: 35px 45px; /* Restore full padding when open */\n transition: all 0.6s ease-out;\n }\n .techStackToggle {\n img {\n transform: rotate(1deg) !important;\n transition: transform 0.3s ease !important;\n }\n }\n .techStackHeading {\n font-family: \"Orbitron\", sans-serif;\n font-weight: 700;\n letter-spacing: 1px;\n color: #00e6e6;\n }\n }\n .techStackCardHeader {\n display: flex;\n align-items: center;\n width: 100%;\n cursor: pointer;\n transition: all 0.3s ease;\n\n &:last-child {\n .techStackNumber {\n border-bottom: none;\n }\n }\n\n .techStackNumber {\n background-color: $color-primary;\n color: #222222;\n width: 123px;\n height: 123px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 70px;\n font-weight: $font-weight-light;\n font-family: \"PPSupplyMono-Ultralight\";\n border-bottom: 1px dashed #222222;\n transition: all 0.4s ease;\n }\n .technologist {\n display: flex;\n flex-direction: column;\n padding: 20px;\n width: 100%;\n height: 123px;\n justify-content: space-between;\n\n .techStackCategory {\n color: $color-primary;\n font-size: $heading-lg;\n font-weight: $font-weight-medium;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin: 0;\n line-height: 36px;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .techStackIcons {\n display: flex;\n align-items: center;\n gap: 40px;\n\n .techStackIcon {\n height: 40px;\n width: 45px;\n object-fit: contain;\n }\n }\n }\n .techStackToggle {\n color: #00ffff;\n background: none;\n border: none;\n cursor: pointer;\n font-size: $heading-sm;\n width: 123px;\n height: 123px;\n flex-shrink: 0;\n /* border-left: 1px dashed $color-primary; */\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: auto;\n height: 25px;\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n }\n\n .border-left-dashed {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 100%;\n background: repeating-linear-gradient(\n to top,\n $color-primary 0,\n $color-primary 4px,\n transparent 4px,\n transparent 8px\n );\n }\n }\n }\n .techStackContent {\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n transform: translateY(-20px);\n transition: all 0.5s ease-in-out;\n padding: 0 45px;\n\n .techStackHeading {\n font-size: $text-xxl;\n font-weight: $font-weight-medium;\n line-height: 1.3em;\n color: $color-primary;\n font-family: \"PPSupplyMono-Regular\";\n margin-bottom: 18px;\n }\n .techStackDescription {\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $heading-sm;\n font-weight: $font-weight-normal;\n line-height: 1.6;\n margin-bottom: 25px;\n }\n .techStackColumns {\n display: flex;\n padding-top: 35px;\n gap: 40px;\n /* border-top: 1px dashed #767676; */\n position: relative;\n\n .tech-borderLine-row {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: repeating-linear-gradient(\n to right,\n #767676,\n #767676 6px,\n transparent 6px,\n transparent 12px\n );\n }\n .tech-borderLine {\n position: absolute;\n top: 35px;\n left: 50%;\n width: 1px;\n transform-origin: left;\n height: 270px;\n background: repeating-linear-gradient(\n to bottom,\n #767676,\n #767676 6px,\n transparent 6px,\n transparent 12px\n );\n }\n .techStackColumn {\n width: 50%;\n color: $white;\n position: relative;\n\n .techStackColumnTitle {\n font-size: $text-xxl;\n font-weight: $font-weight-medium;\n line-height: 1.3em;\n color: $color-primary;\n font-family: \"PPSupplyMono-Regular\";\n margin-bottom: 18px;\n }\n .techStackList {\n list-style: none;\n padding: 0;\n margin: 0;\n\n li {\n margin-bottom: 10px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n font-size: $heading-sm;\n font-weight: $font-weight-light;\n position: relative;\n\n &::before {\n content: \"//\";\n color: $color-primary;\n margin-right: 8px;\n font-weight: $font-weight-light;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n }\n }\n\n &.rightColumn {\n padding-left: 35px;\n }\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 1200px) {\n .techStackSection {\n .techStackHeader {\n padding: 55px;\n\n .techStackTitle {\n font-size: $heading-6xl;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .techStackSection {\n .techStackHeader {\n padding: 50px 40px;\n\n .techStackTitle {\n font-size: 55px;\n line-height: 1em;\n }\n }\n }\n}\n@media (max-width: 768px) {\n .techStackSection {\n .techStackHeader {\n padding: 50px 20px 46px;\n position: relative;\n top: 0;\n\n .techStackTitle {\n font-size: 55px;\n line-height: 1em;\n }\n }\n .techStackCards {\n .techStackCard {\n position: relative;\n top: 0;\n .techStackCardHeader {\n .techStackNumber {\n width: 80px;\n height: 90px;\n font-size: 55px;\n padding-top: 10px;\n }\n .technologist {\n padding: 12px 16px;\n height: 90px;\n\n .techStackCategory {\n font-size: $text-xxl;\n line-height: 30px;\n }\n\n .techStackIcons {\n gap: 20px;\n\n .techStackIcon {\n height: 30px;\n width: 35px;\n }\n }\n }\n .techStackToggle {\n width: 80px;\n height: 90px;\n }\n }\n .techStackContent {\n .techStackColumns {\n flex-direction: column;\n padding-top: 25px;\n gap: 30px;\n\n .tech-borderLine {\n display: none;\n }\n .techStackColumn {\n width: 100%;\n\n &.rightColumn {\n padding-left: 0px;\n }\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .techStackSection {\n .techStackHeader {\n padding: 38px 20px 36px;\n\n .techStackTitle {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n }\n .techStackCards {\n .techStackCard {\n &.open {\n .techStackContent {\n padding: 25px 20px;\n max-height: 1200px;\n }\n }\n .techStackCardHeader {\n .techStackNumber {\n width: 74px;\n height: 90px;\n font-size: $heading-3xl;\n }\n .technologist {\n padding: 12px;\n height: 90px;\n\n .techStackCategory {\n font-size: $text-xxl;\n line-height: 30px;\n }\n\n .techStackIcons {\n gap: 12px;\n\n .techStackIcon {\n height: 24px;\n width: 34px;\n }\n }\n }\n .techStackToggle {\n width: 74px;\n height: 90px;\n\n img {\n height: 20px;\n }\n }\n }\n .techStackContent {\n .techStackHeading {\n font-size: $heading-sm;\n }\n .techStackDescription {\n font-size: $text-lg;\n }\n .techStackColumns {\n flex-direction: column;\n padding-top: 25px;\n gap: 24px;\n\n .tech-borderLine {\n display: none;\n }\n .techStackColumn {\n width: 100%;\n\n .techStackColumnTitle {\n font-size: $heading-sm;\n margin-bottom: 16px;\n }\n .techStackList {\n li {\n margin-bottom: 10px;\n font-size: $text-lg;\n }\n }\n\n &.rightColumn {\n padding-left: 0px;\n }\n }\n }\n }\n }\n }\n }\n}\n","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .techStackSection { width: 100%; position: relative; /* Tech Stack Header */ /* Tech Stack Cards */ } .techStackSection .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; /* z-index: 2; */ } .techStackSection #border-line { z-index: 2; } .techStackSection .techStackHeader { display: flex; align-items: center; padding: 70px; /* position: sticky; top: 107px; */ z-index: 1; background: #06234f; position: relative; } .techStackSection .techStackHeader .techStackTitle { font-size: 5rem; font-weight: 500; margin: 0; display: flex; line-height: 1.2em; align-items: center; font-family: "PPSupplySans-Regular", sans-serif; color: #e5f1fd; } .techStackSection .techStackHeader .border-line-text { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .techStackSection .techStackCards { display: flex; flex-direction: column; } .techStackSection .techStackCards .techStackCard { background-color: #06234f; position: relative; } .techStackSection .techStackCards .techStackCard.open .techStackCardHeader { border-bottom: 1px solid #64e4cb; } .techStackSection .techStackCards .techStackCard.open .techStackNumber { color: #64e4cb !important; /* -webkit-text-stroke: 2px $color-primary-dark; */ font-weight: 500 !important; text-shadow: 1px 0 0 #06234f, 2px 0 0 #06234f, 0 2px 0 #06234f, 0 -2px 0 #06234f, 0px 2px 0 #06234f, -2px 0px 0 #06234f, 0px -2px 0 #06234f, 0px 2px 0 #06234f; font-family: "PPSupplySans-Regular", sans-serif !important; border-bottom: none; } .techStackSection .techStackCards .techStackCard.open .techStackContent { max-height: 1000px; /* Adjust based on your content height */ opacity: 1; transform: translateY(0); padding: 35px 45px; /* Restore full padding when open */ transition: all 0.6s ease-out; } .techStackSection .techStackCards .techStackCard.open .techStackToggle img { transform: rotate(1deg) !important; transition: transform 0.3s ease !important; } .techStackSection .techStackCards .techStackCard.open .techStackHeading { font-family: "Orbitron", sans-serif; font-weight: 700; letter-spacing: 1px; color: #00e6e6; } .techStackSection .techStackCards .techStackCard .techStackCardHeader { display: flex; align-items: center; width: 100%; cursor: pointer; transition: all 0.3s ease; } .techStackSection .techStackCards .techStackCard .techStackCardHeader:last-child .techStackNumber { border-bottom: none; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber { background-color: #64e4cb; color: #222222; width: 123px; height: 123px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 70px; font-weight: 300; font-family: "PPSupplyMono-Ultralight"; border-bottom: 1px dashed #222222; transition: all 0.4s ease; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist { display: flex; flex-direction: column; padding: 20px; width: 100%; height: 123px; justify-content: space-between; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory { color: #64e4cb; font-size: 1.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin: 0; line-height: 36px; font-family: "PPSupplySans-Regular", sans-serif; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons { display: flex; align-items: center; gap: 40px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon { height: 40px; width: 45px; -o-object-fit: contain; object-fit: contain; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle { color: #00ffff; background: none; border: none; cursor: pointer; font-size: 1.25rem; width: 123px; height: 123px; flex-shrink: 0; /* border-left: 1px dashed $color-primary; */ position: relative; display: flex; align-items: center; justify-content: center; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle img { width: auto; height: 25px; transform: rotate(180deg); transition: transform 0.3s ease; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle .border-left-dashed { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: repeating-linear-gradient(to top, #64e4cb 0, #64e4cb 4px, transparent 4px, transparent 8px); } .techStackSection .techStackCards .techStackCard .techStackContent { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-20px); transition: all 0.5s ease-in-out; padding: 0 45px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackHeading { font-size: 1.4375rem; font-weight: 500; line-height: 1.3em; color: #64e4cb; font-family: "PPSupplyMono-Regular"; margin-bottom: 18px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackDescription { color: #cfd7f1; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; font-weight: 400; line-height: 1.6; margin-bottom: 25px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns { display: flex; padding-top: 35px; gap: 40px; /* border-top: 1px dashed #767676; */ position: relative; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine-row { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: repeating-linear-gradient(to right, #767676, #767676 6px, transparent 6px, transparent 12px); } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine { position: absolute; top: 35px; left: 50%; width: 1px; transform-origin: left; height: 270px; background: repeating-linear-gradient(to bottom, #767676, #767676 6px, transparent 6px, transparent 12px); } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn { width: 50%; color: #ffffff; position: relative; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackColumnTitle { font-size: 1.4375rem; font-weight: 500; line-height: 1.3em; color: #64e4cb; font-family: "PPSupplyMono-Regular"; margin-bottom: 18px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList { list-style: none; padding: 0; margin: 0; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li { margin-bottom: 10px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; font-weight: 300; position: relative; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li::before { content: "//"; color: #64e4cb; margin-right: 8px; font-weight: 300; font-family: "PPSupplySans-Regular", sans-serif; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn { padding-left: 35px; } @media (max-width: 1200px) { .techStackSection .techStackHeader { padding: 55px; } .techStackSection .techStackHeader .techStackTitle { font-size: 4rem; } } @media (max-width: 1024px) { .techStackSection .techStackHeader { padding: 50px 40px; } .techStackSection .techStackHeader .techStackTitle { font-size: 55px; line-height: 1em; } } @media (max-width: 768px) { .techStackSection .techStackHeader { padding: 50px 20px 46px; position: relative; top: 0; } .techStackSection .techStackHeader .techStackTitle { font-size: 55px; line-height: 1em; } .techStackSection .techStackCards .techStackCard { position: relative; top: 0; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber { width: 80px; height: 90px; font-size: 55px; padding-top: 10px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist { padding: 12px 16px; height: 90px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory { font-size: 1.4375rem; line-height: 30px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons { gap: 20px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon { height: 30px; width: 35px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle { width: 80px; height: 90px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns { flex-direction: column; padding-top: 25px; gap: 30px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine { display: none; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn { width: 100%; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn { padding-left: 0px; } } @media (max-width: 576px) { .techStackSection .techStackHeader { padding: 38px 20px 36px; } .techStackSection .techStackHeader .techStackTitle { font-size: 2.75rem; line-height: 1em; } .techStackSection .techStackCards .techStackCard.open .techStackContent { padding: 25px 20px; max-height: 1200px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackNumber { width: 74px; height: 90px; font-size: 2.75rem; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist { padding: 12px; height: 90px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackCategory { font-size: 1.4375rem; line-height: 30px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons { gap: 12px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .technologist .techStackIcons .techStackIcon { height: 24px; width: 34px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle { width: 74px; height: 90px; } .techStackSection .techStackCards .techStackCard .techStackCardHeader .techStackToggle img { height: 20px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackHeading { font-size: 1.25rem; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackDescription { font-size: 1.125rem; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns { flex-direction: column; padding-top: 25px; gap: 24px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .tech-borderLine { display: none; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn { width: 100%; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackColumnTitle { font-size: 1.25rem; margin-bottom: 16px; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn .techStackList li { margin-bottom: 10px; font-size: 1.125rem; } .techStackSection .techStackCards .techStackCard .techStackContent .techStackColumns .techStackColumn.rightColumn { padding-left: 0px; } } /*# sourceMappingURL=tech-stack.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A.testimonialSection%20%7B%0A%20%20width:%20100%25;%0A%20%20position:%20relative;%0A%0A%20%20.border-line%20%7B%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20top:%200;%0A%20%20%20%20left:%200;%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%7D%0A%20%20.testimonialHeader%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20padding:%2070px;%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.testimonialTitle%20%7B%0A%20%20%20%20%20%20font-size:%20$heading-8xl;%0A%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20line-height:%201.2em;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20color:%20$text-dark-primary;%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20.testimonialContent%20%7B%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20top:%20-1px;%0A%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%7D%0A%0A%20%20%20%20.testimonial-firstRow%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20stretch;%0A%0A%20%20%20%20%20%20.testimonialCard-left%20%7B%0A%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20bottom:%201px;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20height:%20130px;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%20-1px;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20130px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20130px;%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.authorInfoDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorCompanyLogo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20170px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20auto;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20padding:%2034px;%0A%0A%20%20%20%20%20%20%20%20%20%20.testimonialText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.testimonialCard-right%20%7B%0A%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20left:%20-1px;%0A%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.testimonialCards%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20&:last-child%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-bottom:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20130px;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20bottom:%20-1px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20130px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20130px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorInfoDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorCompanyLogo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20170px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20auto;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2034px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.testimonial-secondRow%20%7B%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20align-items:%20stretch;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.border-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%200px;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.testimonial-left-cards%20%7B%0A%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20bottom:%200px;%0A%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonial-firstcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20gap:%2022px;%0A%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2062px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2062px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.details-author%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.testimonial-right-cards%20%7B%0A%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%0A%20%20%20%20%20%20%20%20.testimonial-firstcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%20%20gap:%2022px;%0A%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20space-between;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2062px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2062px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20cover;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.details-author%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2030px;%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonial-secondcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20width:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20.testimonial-number%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.numberText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-7xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22Space%20Grotesk%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonial-morebtn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2010px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.moreBtn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20$color-primary;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20$color-primary-dark;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2012px%2040px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20text-align:%20center;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20border:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-7xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%20normal;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20$font-weight-medium;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.testimonialSection%20%7B%0A%20%20%20%20.testimonialHeader%20%7B%0A%20%20%20%20%20%20padding:%2055px;%0A%0A%20%20%20%20%20%20.testimonialTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.testimonialSection%20%7B%0A%20%20%20%20.testimonialHeader%20%7B%0A%20%20%20%20%20%20padding:%2050px%2040px;%0A%0A%20%20%20%20%20%20.testimonialTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$font-54;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20.testimonial-firstRow%20%7B%0A%20%20%20%20%20%20%20%20.testimonialCard-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorInfoDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorCompanyLogo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20150px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2026px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonialCard-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20.testimonialCards%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfoDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorCompanyLogo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20150px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2024px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.testimonialText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2026px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.testimonial-secondRow%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20.testimonial-left-cards%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonial-firstcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20&.firstcard-second%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.details-author%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2026px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonial-right-cards%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.testimonial-firstcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.details-author%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-sm;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2026px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonial-secondcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonial-number%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.numberText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonial-morebtn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.moreBtn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-6xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.testimonialSection%20%7B%0A%20%20%20%20.testimonialHeader%20%7B%0A%20%20%20%20%20%20padding:%2050px%2020px%2046px;%0A%0A%20%20%20%20%20%20.testimonialTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$font-54;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20.testimonial-firstRow%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20.testimonialCard-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorInfoDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorCompanyLogo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20150px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2026px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonialCard-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonialCards%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfoDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorCompanyLogo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20150px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.testimonialText%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2026px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.testimonial-secondRow%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20.testimonial-left-cards%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonial-firstcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20&.firstcard-second%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonial-right-cards%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.testimonial-firstcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xxl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.testimonialSection%20%7B%0A%20%20%20%20.testimonialHeader%20%7B%0A%20%20%20%20%20%20padding:%2038px%2020px%2036px;%0A%0A%20%20%20%20%20%20.testimonialTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-3xl;%0A%20%20%20%20%20%20%20%20line-height:%201em;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20.testimonial-firstRow%20%7B%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20.testimonialCard-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2082px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2082px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2082px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.authorInfoDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2015px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorCompanyLogo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonialCard-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-left%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonialCards%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2082px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorImage%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2082px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2082px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfoDetails%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2015px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorCompanyLogo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20100px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialContent%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.testimonial-secondRow%20%7B%0A%20%20%20%20%20%20%20%20.testimonial-left-cards%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonial-firstcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20&.firstcard-second%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorName%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-xl;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2015px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.testimonial-right-cards%20%7B%0A%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%0A%20%20%20%20%20%20%20%20%20%20.testimonial-firstcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20%20%20%20%20gap:%2012px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.testimonialAuthor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorInfo%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.authorPosition%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%20$text-lg;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20.testimonial-secondcard%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20auto;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","testimonials-showcase.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"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O;EHkeP,YAAA;EACA,WAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,kBCxcA;EDycA,mBAAA;EACA,gBC1bO;ED2bP,+CAAA;EACA,eAAA;EACA,qBAAA;AE+Bd;;AFvBA;EAEI;IACE,aAAA;EEyBJ;EFvBI;IACE,eC5dM;ECqfZ;AACF;AFrBA;EAEI;IACE,kBAAA;EEsBJ;EFpBI;IACE,eC5fE;ID6fF,gBAAA;EEsBN;EFhBQ;IACE,aAAA;EEkBV;EFhBU;IACE,YAAA;IACA,aAAA;EEkBZ;EFhBU;IACE,aAAA;EEkBZ;EFfc;IACE,oBChfP;ECigBT;EFdY;IACE,gBAAA;EEgBd;EFZQ;IACE,aAAA;EEcV;EFZU;IACE,kBC9gBD;ID+gBC,iBAAA;EEcZ;EFRU;IACE,aAAA;EEUZ;EFRY;IACE,YAAA;IACA,aAAA;EEUd;EFRY;IACE,aAAA;EEUd;EFPgB;IACE,oBC/gBT;ECwhBT;EFNc;IACE,gBAAA;EEQhB;EFJU;IACE,aAAA;EEMZ;EFJY;IACE,kBC7iBH;ID8iBG,iBAAA;EEMd;EFAI;IACE,sBAAA;EEEN;EFAM;IACE,WAAA;EEER;EFAQ;IACE,cAAA;EEEV;EFEY;IACE,aAAA;EEAd;EFKc;IACE,oBCpjBP;ECijBT;EFKc;IACE,kBCzkBL;ECskBX;EFOU;IACE,kBC9kBD;ID+kBC,iBAAA;EELZ;EFSM;IACE,WAAA;EEPR;EFYc;IACE,oBCxkBP;EC8jBT;EFYc;IACE,kBC7lBL;ECmlBX;EFcU;IACE,kBClmBD;IDmmBC,iBAAA;EEZZ;EFiBY;IACE,eCjmBF;ECklBZ;EFmBY;IACE,eCtmBF;ECqlBZ;AACF;AFyBA;EAEI;IACE,uBAAA;EExBJ;EF0BI;IACE,eC1oBE;ID2oBF,gBAAA;EExBN;EF4BI;IACE,sBAAA;EE1BN;EF2BM;IACE,WAAA;EEzBR;EF2BQ;IACE,cAAA;EEzBV;EF2BQ;IACE,aAAA;EEzBV;EF2BU;IACE,YAAA;IACA,aAAA;EEzBZ;EF2BU;IACE,aAAA;EEzBZ;EF4Bc;IACE,oBCpoBP;EC0mBT;EF6BY;IACE,gBAAA;EE3Bd;EF+BQ;IACE,aAAA;EE7BV;EF+BU;IACE,kBCjpBJ;IDkpBI,iBAAA;EE7BZ;EFiCM;IACE,WAAA;EE/BR;EFiCQ;IACE,aAAA;EE/BV;EFkCU;IACE,aAAA;EEhCZ;EFkCY;IACE,YAAA;IACA,aAAA;EEhCd;EFkCY;IACE,aAAA;EEhCd;EFmCgB;IACE,oBCxqBT;ECuoBT;EFoCc;IACE,gBAAA;EElChB;EFsCU;IACE,aAAA;EEpCZ;EFsCY;IACE,kBCrrBN;IDsrBM,iBAAA;EEpCd;EF0CI;IACE,sBAAA;EExCN;EF0CM;IACE,WAAA;EExCR;EF0CQ;IACE,cAAA;EExCV;EF0CQ;IACE,aAAA;IACA,SAAA;EExCV;EF2CY;IACE,aAAA;EEzCd;EF8Cc;IACE,oBChtBP;ECoqBT;EF8Cc;IACE,kBCptBR;ECwqBR;EFkDM;IACE,WAAA;EEhDR;EFkDQ;IACE,aAAA;IACA,SAAA;EEhDV;EFmDc;IACE,oBCluBP;ECirBT;EFmDc;IACE,kBCtuBR;ECqrBR;AACF;AF0DA;EAEI;IACE,uBAAA;EEzDJ;EF2DI;IACE,kBClwBM;IDmwBN,gBAAA;EEzDN;EF6DI;IACE,sBAAA;EE3DN;EF4DM;IACE,WAAA;EE1DR;EF4DQ;IACE,cAAA;EE1DV;EF4DQ;IACE,YAAA;EE1DV;EF4DU;IACE,WAAA;IACA,YAAA;EE1DZ;EF4DU;IACE,aAAA;EE1DZ;EF6Dc;IACE,kBC/wBR;ECotBR;EF6Dc;IACE,eAAA;EE3DhB;EF8DY;IACE,gBAAA;EE5Dd;EFgEQ;IACE,aAAA;EE9DV;EFiEM;IACE,WAAA;EE/DR;EFiEQ;IACE,aAAA;EE/DV;EFkEU;IACE,YAAA;EEhEZ;EFkEY;IACE,WAAA;IACA,YAAA;EEhEd;EFkEY;IACE,aAAA;EEhEd;EFmEgB;IACE,kBCjzBV;ECgvBR;EFmEgB;IACE,eAAA;EEjElB;EFoEc;IACE,gBAAA;EElEhB;EFsEU;IACE,aAAA;EEpEZ;EF0EM;IACE,WAAA;IACA,sBAAA;EExER;EF0EQ;IACE,cAAA;EExEV;EF0EQ;IACE,WAAA;IACA,aAAA;IACA,SAAA;EExEV;EF0EU;IACE,aAAA;EExEZ;EF0EU;IACE,cAAA;EExEZ;EF4EY;IACE,aAAA;EE1Ed;EF+Ec;IACE,kBC91BR;ECixBR;EF+Ec;IACE,eAAA;EE7EhB;EFmFM;IACE,sBAAA;EEjFR;EFmFQ;IACE,WAAA;IACA,aAAA;IACA,SAAA;EEjFV;EFmFU;IACE,aAAA;EEjFZ;EFmFU;IACE,cAAA;EEjFZ;EFsFc;IACE,mBC13BR;ECsyBR;EFyFQ;IACE,WAAA;IACA,YAAA;EEvFV;AACF","file":"testimonials-showcase.css","sourcesContent":["/* Add Block CSS Here */\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n.testimonialSection {\n width: 100%;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .testimonialHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n position: relative;\n\n .testimonialTitle {\n font-size: $heading-8xl;\n font-weight: $font-weight-medium;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: $text-dark-primary;\n }\n }\n .testimonialContent {\n position: relative;\n\n .border-line {\n position: absolute;\n top: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .testimonial-firstRow {\n display: flex;\n align-items: stretch;\n\n .testimonialCard-left {\n width: 50%;\n flex-shrink: 0;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n\n .testimonialAuthor {\n display: flex;\n align-items: center;\n height: 130px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: block;\n }\n\n .authorImage {\n width: 130px;\n height: 130px;\n overflow: hidden;\n flex-shrink: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .authorInfoDetails {\n width: 100%;\n height: 100%;\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n\n .authorInfo {\n display: flex;\n flex-direction: column;\n\n .authorName {\n font-size: $heading-lg;\n font-weight: $font-weight-normal;\n color: $color-primary;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .authorPosition {\n font-size: $heading-sm;\n font-weight: $font-weight-normal;\n color: $text-dark-light;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n .authorCompanyLogo {\n max-width: 170px;\n width: auto;\n height: 100%;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n }\n }\n .testimonialContent {\n padding: 34px;\n\n .testimonialText {\n font-size: $text-xxl;\n font-weight: $font-weight-light;\n line-height: 30px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n }\n }\n }\n .testimonialCard-right {\n width: 50%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .border-left {\n position: absolute;\n top: 0;\n left: -1px;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n .testimonialCards {\n display: flex;\n flex-direction: column;\n position: relative;\n\n &:last-child {\n border-bottom: none;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .testimonialAuthor {\n display: flex;\n align-items: center;\n height: 130px;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n\n .authorImage {\n width: 130px;\n height: 130px;\n overflow: hidden;\n flex-shrink: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .authorInfoDetails {\n width: 100%;\n height: 100%;\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n\n .authorInfo {\n display: flex;\n flex-direction: column;\n\n .authorName {\n font-size: $heading-lg;\n font-weight: $font-weight-normal;\n color: $color-primary;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .authorPosition {\n font-size: $heading-sm;\n font-weight: $font-weight-normal;\n color: $text-dark-light;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n .authorCompanyLogo {\n max-width: 170px;\n width: auto;\n height: 100%;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n }\n }\n }\n .testimonialContent {\n padding: 34px;\n\n .testimonialText {\n font-size: $text-xxl;\n font-weight: $font-weight-light;\n line-height: 30px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n }\n }\n }\n }\n }\n .testimonial-secondRow {\n width: 100%;\n display: flex;\n align-items: stretch;\n position: relative;\n\n .border-line {\n position: absolute;\n top: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .testimonial-left-cards {\n width: 50%;\n flex-shrink: 0;\n display: flex;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n .testimonial-firstcard {\n flex-shrink: 0;\n width: 50%;\n display: flex;\n flex-direction: column;\n gap: 22px;\n padding: 24px;\n position: relative;\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0px;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n\n .testimonialAuthor {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n\n .authorImage {\n width: 62px;\n height: 62px;\n flex-shrink: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .authorInfo {\n display: flex;\n flex-direction: column;\n\n .authorName {\n font-size: $heading-lg;\n font-weight: $font-weight-normal;\n color: $color-primary;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .authorPosition {\n font-size: $heading-sm;\n font-weight: $font-weight-normal;\n color: $text-dark-light;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n }\n .details-author {\n font-size: $text-xxl;\n font-weight: $font-weight-light;\n line-height: 30px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n }\n }\n }\n .testimonial-right-cards {\n width: 50%;\n flex-shrink: 0;\n display: flex;\n\n .testimonial-firstcard {\n flex-shrink: 0;\n width: 50%;\n display: flex;\n flex-direction: column;\n gap: 22px;\n padding: 24px;\n position: relative;\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0px;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n\n .testimonialAuthor {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n\n .authorImage {\n width: 62px;\n height: 62px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n .authorInfo {\n display: flex;\n flex-direction: column;\n\n .authorName {\n font-size: $heading-lg;\n font-weight: $font-weight-normal;\n color: $color-primary;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n .authorPosition {\n font-size: $heading-sm;\n font-weight: $font-weight-normal;\n color: $text-dark-light;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n }\n .details-author {\n font-size: $text-xxl;\n font-weight: $font-weight-light;\n line-height: 30px;\n color: $text-dark-light;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n }\n }\n .testimonial-secondcard {\n flex-shrink: 0;\n width: 50%;\n display: flex;\n flex-direction: column;\n\n .testimonial-number {\n width: 100%;\n height: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n\n .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n }\n .numberText {\n font-size: $heading-7xl;\n font-weight: $font-weight-medium;\n color: $text-dark-light;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n }\n }\n .testimonial-morebtn {\n width: 100%;\n height: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n\n .moreBtn {\n background-color: $color-primary;\n color: $color-primary-dark;\n height: 100%;\n width: 100%;\n padding: 12px 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n border: none;\n font-size: $heading-7xl;\n line-height: normal;\n font-weight: $font-weight-medium;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n cursor: pointer;\n text-decoration: none;\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 1200px) {\n .testimonialSection {\n .testimonialHeader {\n padding: 55px;\n\n .testimonialTitle {\n font-size: $heading-6xl;\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .testimonialSection {\n .testimonialHeader {\n padding: 50px 40px;\n\n .testimonialTitle {\n font-size: $font-54;\n line-height: 1em;\n }\n }\n .testimonialContent {\n .testimonial-firstRow {\n .testimonialCard-left {\n .testimonialAuthor {\n height: 100px;\n\n .authorImage {\n width: 100px;\n height: 100px;\n }\n .authorInfoDetails {\n padding: 20px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n }\n .authorCompanyLogo {\n max-width: 150px;\n }\n }\n }\n .testimonialContent {\n padding: 24px;\n\n .testimonialText {\n font-size: $heading-sm;\n line-height: 26px;\n }\n }\n }\n .testimonialCard-right {\n .testimonialCards {\n .testimonialAuthor {\n height: 100px;\n\n .authorImage {\n width: 100px;\n height: 100px;\n }\n .authorInfoDetails {\n padding: 20px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n }\n .authorCompanyLogo {\n max-width: 150px;\n }\n }\n }\n .testimonialContent {\n padding: 24px;\n\n .testimonialText {\n font-size: $heading-sm;\n line-height: 26px;\n }\n }\n }\n }\n }\n .testimonial-secondRow {\n flex-direction: column;\n\n .testimonial-left-cards {\n width: 100%;\n\n .border-bottom-line {\n display: block;\n }\n .testimonial-firstcard {\n &.firstcard-second {\n .border-right {\n display: none;\n }\n }\n .testimonialAuthor {\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n .authorPosition {\n font-size: $heading-sm;\n }\n }\n }\n .details-author {\n font-size: $heading-sm;\n line-height: 26px;\n }\n }\n }\n .testimonial-right-cards {\n width: 100%;\n\n .testimonial-firstcard {\n .testimonialAuthor {\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n .authorPosition {\n font-size: $heading-sm;\n }\n }\n }\n .details-author {\n font-size: $heading-sm;\n line-height: 26px;\n }\n }\n .testimonial-secondcard {\n .testimonial-number {\n .numberText {\n font-size: $heading-6xl;\n }\n }\n .testimonial-morebtn {\n .moreBtn {\n font-size: $heading-6xl;\n }\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .testimonialSection {\n .testimonialHeader {\n padding: 50px 20px 46px;\n\n .testimonialTitle {\n font-size: $font-54;\n line-height: 1em;\n }\n }\n .testimonialContent {\n .testimonial-firstRow {\n flex-direction: column;\n .testimonialCard-left {\n width: 100%;\n\n .border-bottom-line {\n display: block;\n }\n .testimonialAuthor {\n height: 100px;\n\n .authorImage {\n width: 100px;\n height: 100px;\n }\n .authorInfoDetails {\n padding: 20px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n }\n .authorCompanyLogo {\n max-width: 150px;\n }\n }\n }\n .testimonialContent {\n padding: 20px;\n\n .testimonialText {\n font-size: $text-xl;\n line-height: 26px;\n }\n }\n }\n .testimonialCard-right {\n width: 100%;\n\n .border-left {\n display: none;\n }\n .testimonialCards {\n .testimonialAuthor {\n height: 100px;\n\n .authorImage {\n width: 100px;\n height: 100px;\n }\n .authorInfoDetails {\n padding: 20px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n }\n .authorCompanyLogo {\n max-width: 150px;\n }\n }\n }\n .testimonialContent {\n padding: 20px;\n\n .testimonialText {\n font-size: $text-xl;\n line-height: 26px;\n }\n }\n }\n }\n }\n .testimonial-secondRow {\n flex-direction: column;\n\n .testimonial-left-cards {\n width: 100%;\n\n .border-bottom-line {\n display: block;\n }\n .testimonial-firstcard {\n padding: 20px;\n gap: 16px;\n\n &.firstcard-second {\n .border-right {\n display: none;\n }\n }\n .testimonialAuthor {\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n .authorPosition {\n font-size: $text-xl;\n }\n }\n }\n }\n }\n .testimonial-right-cards {\n width: 100%;\n\n .testimonial-firstcard {\n padding: 20px;\n gap: 16px;\n .testimonialAuthor {\n .authorInfo {\n .authorName {\n font-size: $text-xxl;\n }\n .authorPosition {\n font-size: $text-xl;\n }\n }\n }\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .testimonialSection {\n .testimonialHeader {\n padding: 38px 20px 36px;\n\n .testimonialTitle {\n font-size: $heading-3xl;\n line-height: 1em;\n }\n }\n .testimonialContent {\n .testimonial-firstRow {\n flex-direction: column;\n .testimonialCard-left {\n width: 100%;\n\n .border-bottom-line {\n display: block;\n }\n .testimonialAuthor {\n height: 82px;\n\n .authorImage {\n width: 82px;\n height: 82px;\n }\n .authorInfoDetails {\n padding: 16px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xl;\n }\n .authorPosition {\n font-size: 15px;\n }\n }\n .authorCompanyLogo {\n max-width: 100px;\n }\n }\n }\n .testimonialContent {\n padding: 16px;\n }\n }\n .testimonialCard-right {\n width: 100%;\n\n .border-left {\n display: none;\n }\n .testimonialCards {\n .testimonialAuthor {\n height: 82px;\n\n .authorImage {\n width: 82px;\n height: 82px;\n }\n .authorInfoDetails {\n padding: 16px;\n\n .authorInfo {\n .authorName {\n font-size: $text-xl;\n }\n .authorPosition {\n font-size: 15px;\n }\n }\n .authorCompanyLogo {\n max-width: 100px;\n }\n }\n }\n .testimonialContent {\n padding: 16px;\n }\n }\n }\n }\n .testimonial-secondRow {\n .testimonial-left-cards {\n width: 100%;\n flex-direction: column;\n\n .border-bottom-line {\n display: block;\n }\n .testimonial-firstcard {\n width: 100%;\n padding: 16px;\n gap: 12px;\n\n .border-right {\n display: none;\n }\n .border-bottom-line {\n display: block;\n }\n\n &.firstcard-second {\n .border-right {\n display: none;\n }\n }\n .testimonialAuthor {\n .authorInfo {\n .authorName {\n font-size: $text-xl;\n }\n .authorPosition {\n font-size: 15px;\n }\n }\n }\n }\n }\n .testimonial-right-cards {\n flex-direction: column;\n\n .testimonial-firstcard {\n width: 100%;\n padding: 16px;\n gap: 12px;\n\n .border-right {\n display: none;\n }\n .border-bottom-line {\n display: block;\n }\n\n .testimonialAuthor {\n .authorInfo {\n .authorPosition {\n font-size: $text-lg;\n }\n }\n }\n }\n .testimonial-secondcard {\n width: 100%;\n height: auto;\n }\n }\n }\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.testimonialSection {\n width: 100%;\n position: relative;\n}\n.testimonialSection .border-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonialSection .testimonialHeader {\n display: flex;\n align-items: center;\n padding: 70px;\n position: relative;\n}\n.testimonialSection .testimonialHeader .testimonialTitle {\n font-size: 5rem;\n font-weight: 500;\n margin: 0;\n display: flex;\n line-height: 1.2em;\n align-items: center;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n color: #e5f1fd;\n}\n.testimonialSection .testimonialContent {\n position: relative;\n}\n.testimonialSection .testimonialContent .border-line {\n position: absolute;\n top: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow {\n display: flex;\n align-items: stretch;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left {\n width: 50%;\n flex-shrink: 0;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .border-bottom-line {\n position: absolute;\n bottom: 1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor {\n display: flex;\n align-items: center;\n height: 130px;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: block;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage {\n width: 130px;\n height: 130px;\n overflow: hidden;\n flex-shrink: 0;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails {\n width: 100%;\n height: 100%;\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo {\n display: flex;\n flex-direction: column;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.875rem;\n font-weight: 400;\n color: #64e4cb;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition {\n font-size: 1.25rem;\n font-weight: 400;\n color: #cfd7f1;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 170px;\n width: auto;\n height: 100%;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent {\n padding: 34px;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent .testimonialText {\n font-size: 1.4375rem;\n font-weight: 300;\n line-height: 30px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right {\n width: 50%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .border-left {\n position: absolute;\n top: 0;\n left: -1px;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards:last-child {\n border-bottom: none;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor {\n display: flex;\n align-items: center;\n height: 130px;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .border-bottom-line {\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage {\n width: 130px;\n height: 130px;\n overflow: hidden;\n flex-shrink: 0;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails {\n width: 100%;\n height: 100%;\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo {\n display: flex;\n flex-direction: column;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.875rem;\n font-weight: 400;\n color: #64e4cb;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition {\n font-size: 1.25rem;\n font-weight: 400;\n color: #cfd7f1;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 170px;\n width: auto;\n height: 100%;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent {\n padding: 34px;\n}\n.testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent .testimonialText {\n font-size: 1.4375rem;\n font-weight: 300;\n line-height: 30px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow {\n width: 100%;\n display: flex;\n align-items: stretch;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .border-line {\n position: absolute;\n top: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards {\n width: 50%;\n flex-shrink: 0;\n display: flex;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard {\n flex-shrink: 0;\n width: 50%;\n display: flex;\n flex-direction: column;\n gap: 22px;\n padding: 24px;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .border-right {\n position: absolute;\n top: 0;\n right: 0px;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorImage {\n width: 62px;\n height: 62px;\n flex-shrink: 0;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorImage img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo {\n display: flex;\n flex-direction: column;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName {\n font-size: 1.875rem;\n font-weight: 400;\n color: #64e4cb;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition {\n font-size: 1.25rem;\n font-weight: 400;\n color: #cfd7f1;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .details-author {\n font-size: 1.4375rem;\n font-weight: 300;\n line-height: 30px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards {\n width: 50%;\n flex-shrink: 0;\n display: flex;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard {\n flex-shrink: 0;\n width: 50%;\n display: flex;\n flex-direction: column;\n gap: 22px;\n padding: 24px;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .border-right {\n position: absolute;\n top: 0;\n right: 0px;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorImage {\n width: 62px;\n height: 62px;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorImage img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo {\n display: flex;\n flex-direction: column;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName {\n font-size: 1.875rem;\n font-weight: 400;\n color: #64e4cb;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition {\n font-size: 1.25rem;\n font-weight: 400;\n color: #cfd7f1;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .details-author {\n font-size: 1.4375rem;\n font-weight: 300;\n line-height: 30px;\n color: #cfd7f1;\n font-family: \"Space Grotesk\", sans-serif;\n margin: 0;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard {\n flex-shrink: 0;\n width: 50%;\n display: flex;\n flex-direction: column;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-number {\n width: 100%;\n height: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-number .border-bottom-line {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-number .numberText {\n font-size: 4.75rem;\n font-weight: 500;\n color: #cfd7f1;\n margin: 0;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-morebtn {\n width: 100%;\n height: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n}\n.testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-morebtn .moreBtn {\n background-color: #64e4cb;\n color: #06234f;\n height: 100%;\n width: 100%;\n padding: 12px 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n border: none;\n font-size: 4.75rem;\n line-height: normal;\n font-weight: 500;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n cursor: pointer;\n text-decoration: none;\n}\n\n@media (max-width: 1200px) {\n .testimonialSection .testimonialHeader {\n padding: 55px;\n }\n .testimonialSection .testimonialHeader .testimonialTitle {\n font-size: 4rem;\n }\n}\n@media (max-width: 1024px) {\n .testimonialSection .testimonialHeader {\n padding: 50px 40px;\n }\n .testimonialSection .testimonialHeader .testimonialTitle {\n font-size: 54px;\n line-height: 1em;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor {\n height: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage {\n width: 100px;\n height: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails {\n padding: 20px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 150px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent {\n padding: 24px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent .testimonialText {\n font-size: 1.25rem;\n line-height: 26px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor {\n height: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage {\n width: 100px;\n height: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails {\n padding: 20px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 150px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent {\n padding: 24px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent .testimonialText {\n font-size: 1.25rem;\n line-height: 26px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow {\n flex-direction: column;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards {\n width: 100%;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .border-bottom-line {\n display: block;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard.firstcard-second .border-right {\n display: none;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition {\n font-size: 1.25rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .details-author {\n font-size: 1.25rem;\n line-height: 26px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards {\n width: 100%;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition {\n font-size: 1.25rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .details-author {\n font-size: 1.25rem;\n line-height: 26px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-number .numberText {\n font-size: 4rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-morebtn .moreBtn {\n font-size: 4rem;\n }\n}\n@media (max-width: 768px) {\n .testimonialSection .testimonialHeader {\n padding: 50px 20px 46px;\n }\n .testimonialSection .testimonialHeader .testimonialTitle {\n font-size: 54px;\n line-height: 1em;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow {\n flex-direction: column;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left {\n width: 100%;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .border-bottom-line {\n display: block;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor {\n height: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage {\n width: 100px;\n height: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails {\n padding: 20px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 150px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent {\n padding: 20px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent .testimonialText {\n font-size: 1.25rem;\n line-height: 26px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right {\n width: 100%;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .border-left {\n display: none;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor {\n height: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage {\n width: 100px;\n height: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails {\n padding: 20px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 150px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent {\n padding: 20px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent .testimonialText {\n font-size: 1.25rem;\n line-height: 26px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow {\n flex-direction: column;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards {\n width: 100%;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .border-bottom-line {\n display: block;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard {\n padding: 20px;\n gap: 16px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard.firstcard-second .border-right {\n display: none;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition {\n font-size: 1.25rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards {\n width: 100%;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard {\n padding: 20px;\n gap: 16px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName {\n font-size: 1.4375rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition {\n font-size: 1.25rem;\n }\n}\n@media (max-width: 576px) {\n .testimonialSection .testimonialHeader {\n padding: 38px 20px 36px;\n }\n .testimonialSection .testimonialHeader .testimonialTitle {\n font-size: 2.75rem;\n line-height: 1em;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow {\n flex-direction: column;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left {\n width: 100%;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .border-bottom-line {\n display: block;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor {\n height: 82px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage {\n width: 82px;\n height: 82px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails {\n padding: 16px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.25rem;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition {\n font-size: 15px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent {\n padding: 16px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right {\n width: 100%;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .border-left {\n display: none;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor {\n height: 82px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage {\n width: 82px;\n height: 82px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails {\n padding: 16px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName {\n font-size: 1.25rem;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition {\n font-size: 15px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo {\n max-width: 100px;\n }\n .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent {\n padding: 16px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards {\n width: 100%;\n flex-direction: column;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .border-bottom-line {\n display: block;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard {\n width: 100%;\n padding: 16px;\n gap: 12px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .border-right {\n display: none;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .border-bottom-line {\n display: block;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard.firstcard-second .border-right {\n display: none;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName {\n font-size: 1.25rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition {\n font-size: 15px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards {\n flex-direction: column;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard {\n width: 100%;\n padding: 16px;\n gap: 12px;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .border-right {\n display: none;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .border-bottom-line {\n display: block;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition {\n font-size: 1.125rem;\n }\n .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard {\n width: 100%;\n height: auto;\n }\n}","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .testimonialSection { width: 100%; position: relative; } .testimonialSection .border-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonialSection .testimonialHeader { display: flex; align-items: center; padding: 70px; position: relative; } .testimonialSection .testimonialHeader .testimonialTitle { font-size: 5rem; font-weight: 500; margin: 0; display: flex; line-height: 1.2em; align-items: center; font-family: "PPSupplySans-Regular", sans-serif; color: #e5f1fd; } .testimonialSection .testimonialContent { position: relative; } .testimonialSection .testimonialContent .border-line { position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonialSection .testimonialContent .testimonial-firstRow { display: flex; align-items: stretch; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left { width: 50%; flex-shrink: 0; position: relative; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .border-bottom-line { position: absolute; bottom: 1px; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor { display: flex; align-items: center; height: 130px; position: relative; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .border-bottom-line { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; display: block; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage { width: 130px; height: 130px; overflow: hidden; flex-shrink: 0; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails { width: 100%; height: 100%; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo { display: flex; flex-direction: column; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.875rem; font-weight: 400; color: #64e4cb; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition { font-size: 1.25rem; font-weight: 400; color: #cfd7f1; margin: 0; font-family: "Space Grotesk", sans-serif; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 170px; width: auto; height: 100%; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent { padding: 34px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent .testimonialText { font-size: 1.4375rem; font-weight: 300; line-height: 30px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; margin: 0; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right { width: 50%; flex-shrink: 0; display: flex; flex-direction: column; position: relative; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .border-left { position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background: #64e4cb; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards { display: flex; flex-direction: column; position: relative; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards:last-child { border-bottom: none; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .border-bottom-line { position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor { display: flex; align-items: center; height: 130px; position: relative; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .border-bottom-line { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage { width: 130px; height: 130px; overflow: hidden; flex-shrink: 0; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails { width: 100%; height: 100%; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo { display: flex; flex-direction: column; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.875rem; font-weight: 400; color: #64e4cb; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition { font-size: 1.25rem; font-weight: 400; color: #cfd7f1; margin: 0; font-family: "Space Grotesk", sans-serif; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 170px; width: auto; height: 100%; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent { padding: 34px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent .testimonialText { font-size: 1.4375rem; font-weight: 300; line-height: 30px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; margin: 0; } .testimonialSection .testimonialContent .testimonial-secondRow { width: 100%; display: flex; align-items: stretch; position: relative; } .testimonialSection .testimonialContent .testimonial-secondRow .border-line { position: absolute; top: 0px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards { width: 50%; flex-shrink: 0; display: flex; position: relative; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .border-bottom-line { position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard { flex-shrink: 0; width: 50%; display: flex; flex-direction: column; gap: 22px; padding: 24px; position: relative; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .border-right { position: absolute; top: 0; right: 0px; width: 1px; height: 100%; background: #64e4cb; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .border-bottom-line { position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorImage { width: 62px; height: 62px; flex-shrink: 0; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo { display: flex; flex-direction: column; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName { font-size: 1.875rem; font-weight: 400; color: #64e4cb; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition { font-size: 1.25rem; font-weight: 400; color: #cfd7f1; margin: 0; font-family: "Space Grotesk", sans-serif; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .details-author { font-size: 1.4375rem; font-weight: 300; line-height: 30px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; margin: 0; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards { width: 50%; flex-shrink: 0; display: flex; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard { flex-shrink: 0; width: 50%; display: flex; flex-direction: column; gap: 22px; padding: 24px; position: relative; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .border-right { position: absolute; top: 0; right: 0px; width: 1px; height: 100%; background: #64e4cb; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .border-bottom-line { position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorImage { width: 62px; height: 62px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo { display: flex; flex-direction: column; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName { font-size: 1.875rem; font-weight: 400; color: #64e4cb; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition { font-size: 1.25rem; font-weight: 400; color: #cfd7f1; margin: 0; font-family: "Space Grotesk", sans-serif; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .details-author { font-size: 1.4375rem; font-weight: 300; line-height: 30px; color: #cfd7f1; font-family: "Space Grotesk", sans-serif; margin: 0; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard { flex-shrink: 0; width: 50%; display: flex; flex-direction: column; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-number { width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; position: relative; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-number .border-bottom-line { position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #64e4cb; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-number .numberText { font-size: 4.75rem; font-weight: 500; color: #cfd7f1; margin: 0; font-family: "Space Grotesk", sans-serif; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-morebtn { width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; padding: 10px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-morebtn .moreBtn { background-color: #64e4cb; color: #06234f; height: 100%; width: 100%; padding: 12px 40px; display: flex; align-items: center; justify-content: center; text-align: center; border: none; font-size: 4.75rem; line-height: normal; font-weight: 500; font-family: "PPSupplySans-Regular", sans-serif; cursor: pointer; text-decoration: none; } @media (max-width: 1200px) { .testimonialSection .testimonialHeader { padding: 55px; } .testimonialSection .testimonialHeader .testimonialTitle { font-size: 4rem; } } @media (max-width: 1024px) { .testimonialSection .testimonialHeader { padding: 50px 40px; } .testimonialSection .testimonialHeader .testimonialTitle { font-size: 54px; line-height: 1em; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor { height: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage { width: 100px; height: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails { padding: 20px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.4375rem; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 150px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent { padding: 24px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent .testimonialText { font-size: 1.25rem; line-height: 26px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor { height: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage { width: 100px; height: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails { padding: 20px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.4375rem; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 150px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent { padding: 24px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent .testimonialText { font-size: 1.25rem; line-height: 26px; } .testimonialSection .testimonialContent .testimonial-secondRow { flex-direction: column; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards { width: 100%; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .border-bottom-line { display: block; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard.firstcard-second .border-right { display: none; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName { font-size: 1.4375rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition { font-size: 1.25rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .details-author { font-size: 1.25rem; line-height: 26px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards { width: 100%; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName { font-size: 1.4375rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition { font-size: 1.25rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .details-author { font-size: 1.25rem; line-height: 26px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-number .numberText { font-size: 4rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard .testimonial-morebtn .moreBtn { font-size: 4rem; } } @media (max-width: 768px) { .testimonialSection .testimonialHeader { padding: 50px 20px 46px; } .testimonialSection .testimonialHeader .testimonialTitle { font-size: 54px; line-height: 1em; } .testimonialSection .testimonialContent .testimonial-firstRow { flex-direction: column; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left { width: 100%; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .border-bottom-line { display: block; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor { height: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage { width: 100px; height: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails { padding: 20px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.4375rem; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 150px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent { padding: 20px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent .testimonialText { font-size: 1.25rem; line-height: 26px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right { width: 100%; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .border-left { display: none; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor { height: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage { width: 100px; height: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails { padding: 20px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.4375rem; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 150px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent { padding: 20px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent .testimonialText { font-size: 1.25rem; line-height: 26px; } .testimonialSection .testimonialContent .testimonial-secondRow { flex-direction: column; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards { width: 100%; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .border-bottom-line { display: block; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard { padding: 20px; gap: 16px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard.firstcard-second .border-right { display: none; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName { font-size: 1.4375rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition { font-size: 1.25rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards { width: 100%; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard { padding: 20px; gap: 16px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName { font-size: 1.4375rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition { font-size: 1.25rem; } } @media (max-width: 576px) { .testimonialSection .testimonialHeader { padding: 38px 20px 36px; } .testimonialSection .testimonialHeader .testimonialTitle { font-size: 2.75rem; line-height: 1em; } .testimonialSection .testimonialContent .testimonial-firstRow { flex-direction: column; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left { width: 100%; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .border-bottom-line { display: block; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor { height: 82px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorImage { width: 82px; height: 82px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails { padding: 16px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.25rem; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition { font-size: 15px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-left .testimonialContent { padding: 16px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right { width: 100%; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .border-left { display: none; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor { height: 82px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorImage { width: 82px; height: 82px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails { padding: 16px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorName { font-size: 1.25rem; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorInfo .authorPosition { font-size: 15px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialAuthor .authorInfoDetails .authorCompanyLogo { max-width: 100px; } .testimonialSection .testimonialContent .testimonial-firstRow .testimonialCard-right .testimonialCards .testimonialContent { padding: 16px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards { width: 100%; flex-direction: column; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .border-bottom-line { display: block; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard { width: 100%; padding: 16px; gap: 12px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .border-right { display: none; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .border-bottom-line { display: block; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard.firstcard-second .border-right { display: none; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorName { font-size: 1.25rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-left-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition { font-size: 15px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards { flex-direction: column; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard { width: 100%; padding: 16px; gap: 12px; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .border-right { display: none; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .border-bottom-line { display: block; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-firstcard .testimonialAuthor .authorInfo .authorPosition { font-size: 1.125rem; } .testimonialSection .testimonialContent .testimonial-secondRow .testimonial-right-cards .testimonial-secondcard { width: 100%; height: auto; } } /*# sourceMappingURL=testimonials-showcase.css.map */ {"version":3,"sources":["data:;charset=utf-8,/*%20Add%20Block%20CSS%20Here%20*/variables.scss%22%20as%20*;%0A%0A@keyframes%20marquee-left%20%7B%0A%20%200%25%20%7B%0A%20%20%20%20transform:%20translateX(0);%0A%20%20%7D%0A%20%20100%25%20%7B%0A%20%20%20%20transform:%20translateX(-50%25);%0A%20%20%7D%0A%7D%0A%0A@keyframes%20marquee-right%20%7B%0A%20%200%25%20%7B%0A%20%20%20%20transform:%20translateX(-50%25);%0A%20%20%7D%0A%20%20100%25%20%7B%0A%20%20%20%20transform:%20translateX(0);%0A%20%20%7D%0A%7D%0A%0A.worked-with-companies%20%7B%0A%20%20position:%20relative;%0A%20%20overflow:%20hidden;%0A%0A%20%20.border-line%20%7B%0A%20%20%20%20width:%20100%25;%0A%20%20%20%20height:%201px;%0A%20%20%20%20background:%20$color-primary;%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20bottom:%200;%0A%20%20%20%20left:%200;%0A%20%20%7D%0A%0A%20%20.logoWrapper%20%7B%0A%20%20%20%20display:%20flex;%0A%20%20%20%20align-items:%20stretch;%0A%0A%20%20%20%20.logos-Heading%20%7B%0A%20%20%20%20%20%20max-width:%20292px;%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20padding:%2020px;%0A%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20.logosTitle%20%7B%0A%20%20%20%20%20%20%20%20font-size:%20$heading-4xl;%0A%20%20%20%20%20%20%20%20color:%20$text-dark-light;%0A%20%20%20%20%20%20%20%20text-transform:%20uppercase;%0A%20%20%20%20%20%20%20%20font-weight:%20$font-weight-light;%0A%20%20%20%20%20%20%20%20line-height:%2056px;%0A%20%20%20%20%20%20%20%20margin:%200;%0A%20%20%20%20%20%20%20%20font-family:%20%22PPSupplySans-Regular%22,%20sans-serif;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20bottom:%200;%0A%20%20%20%20%20%20%20%20left:%200;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20.logosRow%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20overflow:%20hidden;%0A%0A%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%201px;%0A%20%20%20%20%20%20%20%20background:%20$color-primary;%0A%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.logosGroup%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%20%20%20%20%20%20%20%20height:%20103px;%20/%20fixed%20row%20height%20%E2%80%94%20adjust%20to%20match%20your%20design%0A%0A%20%20%20%20%20%20%20%20&:hover%20.logosTrack%20%7B%0A%20%20%20%20%20%20%20%20%20%20animation-play-state:%20paused;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20/%20Row%201%20%E2%80%94%20scrolls%20LEFT,%20normal%20speed%0A%20%20%20%20%20%20%20%20&%5Bdata-row=%22odd%22%5D%20.logosTrack%20%7B%0A%20%20%20%20%20%20%20%20%20%20animation:%20marquee-left%2035s%20linear%20infinite;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20/%20Row%202%20%E2%80%94%20scrolls%20RIGHT,%20slightly%20different%20speed%0A%20%20%20%20%20%20%20%20&%5Bdata-row=%22even%22%5D%20.logosTrack%20%7B%0A%20%20%20%20%20%20%20%20%20%20animation:%20marquee-left%2035s%20linear%20infinite;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.logosTrack%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.logos%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%20200px;%0A%20%20%20%20%20%20%20%20%20%20flex-shrink:%200;%0A%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20padding:%2018px%2022px;%0A%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20%20%20position:%20relative;%0A%20%20%20%20%20%20%20%20%20%20box-sizing:%20border-box;%0A%0A%20%20%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%200;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%201px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20to%20bottom,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%200px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20$color-primary%206px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transparent%206px,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transparent%2012px%0A%20%20%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20max-height:%2050px;%0A%20%20%20%20%20%20%20%20%20%20%20%20object-fit:%20contain;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201200px)%20%7B%0A%20%20.worked-with-companies%20%7B%0A%20%20%20%20.logoWrapper%20%7B%0A%20%20%20%20%20%20.logos-Heading%20%7B%0A%20%20%20%20%20%20%20%20.logosTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-xl;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2044px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.logosRow%20%7B%0A%20%20%20%20%20%20%20%20.logosGroup%20%7B%0A%20%20%20%20%20%20%20%20%20%20height:%2063px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%201024px)%20%7B%0A%20%20.worked-with-companies%20%7B%0A%20%20%20%20.logoWrapper%20%7B%0A%20%20%20%20%20%20.logos-Heading%20%7B%0A%20%20%20%20%20%20%20%20padding:%2016px;%0A%20%20%20%20%20%20%20%20.logosTitle%20%7B%0A%20%20%20%20%20%20%20%20%20%20font-size:%20$heading-md;%0A%20%20%20%20%20%20%20%20%20%20line-height:%2032px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.logosRow%20%7B%0A%20%20%20%20%20%20%20%20.logosGroup%20%7B%0A%20%20%20%20%20%20%20%20%20%20height:%2053px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20768px)%20%7B%0A%20%20.worked-with-companies%20%7B%0A%20%20%20%20.logoWrapper%20%7B%0A%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20.logos-Heading%20%7B%0A%20%20%20%20%20%20%20%20max-width:%20100%25;%0A%20%20%20%20%20%20%20%20justify-content:%20flex-start;%0A%0A%20%20%20%20%20%20%20%20.border-right%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.border-bottom-line%20%7B%0A%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.logosRow%20%7B%0A%20%20%20%20%20%20%20%20.logosGroup%20%7B%0A%20%20%20%20%20%20%20%20%20%20.logos%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20250px;%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20max-height:%2060px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%2060px;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2012px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A@media%20(max-width:%20576px)%20%7B%0A%20%20.worked-with-companies%20%7B%0A%20%20%20%20.logoWrapper%20%7B%0A%20%20%20%20%20%20.logosRow%20%7B%0A%20%20%20%20%20%20%20%20.logosGroup%20%7B%0A%20%20%20%20%20%20%20%20%20%20.logos%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width:%20200px;%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2015px;%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/variables.scss","worked-with-companies.css","file:/opt/lampp/htdocs/krupalPatel-acf/wp-content/themes/krupalpatel/assets/scss/color.scss"],"names":[],"mappings":"AAAA,uBAAA;AC0CkB,SAAA;AACE,SAAA;AACD,SAAA;AACG,SAAA;AAatB,iBAAA;AAKA,+DAAA;AACA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,oCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,qCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,+BAAA;EACA,wCAAA;EACA,sCAAA;EACA,yBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,wCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,6BAAA;ACxDF;;AD2DA;EACE,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AD2DA;EACE,8BAAA;EACA,sCAAA;EACA,sCAAA;EACA,wBAAA;ACxDF;;AF/DA;EACE;IACE,wBAAA;EEkEF;EFhEA;IACE,2BAAA;EEkEF;AACF;AF/DA;EACE;IACE,2BAAA;EEiEF;EF/DA;IACE,wBAAA;EEiEF;AACF;AF9DA;EACE,kBAAA;EACA,gBAAA;AEgEF;AF9DE;EACE,WAAA;EACA,WAAA;EACA,mBG7BY;EH8BZ,kBAAA;EACA,SAAA;EACA,OAAA;AEgEJ;AF7DE;EACE,aAAA;EACA,oBAAA;AE+DJ;AF7DI;EACE,gBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,aAAA;EACA,kBAAA;AE+DN;AF7DM;EACE,mBChBM;EDiBN,cG3CU;EH4CV,yBAAA;EACA,gBCFY;EDGZ,iBAAA;EACA,SAAA;EACA,+CAAA;AE+DR;AF5DM;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,mBG/DQ;AD6HhB;AF3DM;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBGxEQ;EHyER,aAAA;AE6DR;AFzDI;EACE,aAAA;EACA,sBAAA;EACA,WAAA;EACA,gBAAA;AE2DN;AFzDM;EACE,WAAA;EACA,WAAA;EACA,mBGtFQ;EHuFR,cAAA;AE2DR;AFxDM;EACE,aAAA;EACA,WAAA;EACA,gBAAA;EACA,aAAA;AE0DR;AFxDQ;EACE,4BAAA;AE0DV;AFtDQ;EACE,2CAAA;AEwDV;AFpDQ;EACE,2CAAA;AEsDV;AFnDQ;EACE,aAAA;EACA,cAAA;EACA,mBAAA;EACA,YAAA;AEqDV;AFlDQ;EACE,YAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,sBAAA;AEoDV;AFlDU;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,6GAAA;AEoDZ;AF3CU;EACE,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;KAAA,mBAAA;AE6CZ;;AFtCA;EAIQ;IACE,eClIG;IDmIH,iBAAA;EEsCR;EFlCM;IACE,YAAA;EEoCR;AACF;AF/BA;EAGM;IACE,aAAA;EE+BN;EF9BM;IACE,iBCtJG;IDuJH,iBAAA;EEgCR;EF5BM;IACE,YAAA;EE8BR;AACF;AFzBA;EAEI;IACE,aAAA;IACA,sBAAA;EE0BJ;EFzBI;IACE,eAAA;IACA,2BAAA;EE2BN;EFzBM;IACE,aAAA;EE2BR;EFxBM;IACE,cAAA;EE0BR;EFpBQ;IACE,gBAAA;IACA,WAAA;IACA,gBAAA;IACA,YAAA;IACA,aAAA;EEsBV;AACF;AFhBA;EAKU;IACE,gBAAA;IACA,aAAA;EEcV;AACF","file":"worked-with-companies.css","sourcesContent":["/* Add Block CSS Here */\n\n@use \"./../color.scss\" as *;\n@use \"./../variables.scss\" as *;\n\n@keyframes marquee-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes marquee-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n.worked-with-companies {\n position: relative;\n overflow: hidden;\n\n .border-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n\n .logoWrapper {\n display: flex;\n align-items: stretch;\n\n .logos-Heading {\n max-width: 292px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n position: relative;\n\n .logosTitle {\n font-size: $heading-4xl;\n color: $text-dark-light;\n text-transform: uppercase;\n font-weight: $font-weight-light;\n line-height: 56px;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n }\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: $color-primary;\n }\n\n .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: $color-primary;\n display: none;\n }\n }\n\n .logosRow {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n\n .border-bottom-line {\n width: 100%;\n height: 1px;\n background: $color-primary;\n flex-shrink: 0;\n }\n\n .logosGroup {\n display: flex;\n width: 100%;\n overflow: hidden;\n height: 103px; // fixed row height — adjust to match your design\n\n &:hover .logosTrack {\n animation-play-state: paused;\n }\n\n // Row 1 — scrolls LEFT, normal speed\n &[data-row=\"odd\"] .logosTrack {\n animation: marquee-left 35s linear infinite;\n }\n\n // Row 2 — scrolls RIGHT, slightly different speed\n &[data-row=\"even\"] .logosTrack {\n animation: marquee-left 35s linear infinite;\n }\n\n .logosTrack {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n height: 100%;\n }\n\n .logos {\n width: 200px;\n flex-shrink: 0;\n height: 100%;\n padding: 18px 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n\n .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: repeating-linear-gradient(\n to bottom,\n $color-primary 0px,\n $color-primary 6px,\n transparent 6px,\n transparent 12px\n );\n }\n\n img {\n width: 100%;\n height: 100%;\n max-height: 50px;\n object-fit: contain;\n }\n }\n }\n }\n }\n}\n@media (max-width: 1200px) {\n .worked-with-companies {\n .logoWrapper {\n .logos-Heading {\n .logosTitle {\n font-size: $heading-xl;\n line-height: 44px;\n }\n }\n .logosRow {\n .logosGroup {\n height: 63px;\n }\n }\n }\n }\n}\n@media (max-width: 1024px) {\n .worked-with-companies {\n .logoWrapper {\n .logos-Heading {\n padding: 16px;\n .logosTitle {\n font-size: $heading-md;\n line-height: 32px;\n }\n }\n .logosRow {\n .logosGroup {\n height: 53px;\n }\n }\n }\n }\n}\n@media (max-width: 768px) {\n .worked-with-companies {\n .logoWrapper {\n display: flex;\n flex-direction: column;\n .logos-Heading {\n max-width: 100%;\n justify-content: flex-start;\n\n .border-right {\n display: none;\n }\n\n .border-bottom-line {\n display: block;\n }\n }\n\n .logosRow {\n .logosGroup {\n .logos {\n max-width: 250px;\n width: 100%;\n max-height: 60px;\n height: 60px;\n padding: 12px;\n }\n }\n }\n }\n }\n}\n@media (max-width: 576px) {\n .worked-with-companies {\n .logoWrapper {\n .logosRow {\n .logosGroup {\n .logos {\n max-width: 200px;\n padding: 15px;\n }\n }\n }\n }\n }\n}\n","// Base Font Scale\n$font-16: 16px; //\n$font-18: 18px; //\n$font-20: 20px; //\n$font-23: 23px; //\n$font-24: 24px; //\n$font-28: 28px; //\n$font-30: 30px; //\n$font-32: 32px; //\n$font-34: 34px; //\n$font-40: 40px; //\n$font-44: 44px; //\n$font-48: 48px; //\n$font-50: 50px; //\n$font-54: 54px; //\n$font-64: 64px; //\n$font-70: 70px; //\n$font-76: 76px; //\n$font-80: 80px; //\n$font-96: 96px; //\n$font-113: 113px; //\n\n// ==============================\n// HEADING FONT SIZES\n// ==============================\n\n$heading-xs: 1.125rem; // 18px\n$heading-sm: 1.25rem; // 20px\n$heading-md: 1.5rem; // 24px\n$heading-lg: 1.875rem; // 30px\n$heading-xl: 2rem; // 32px\n$heading-2xl: 2.5rem; // 40px\n$heading-3xl: 2.75rem; // 44px\n$heading-4xl: 2.875rem; // 46px\n$heading-5xl: 3.25rem; // 52px\n$heading-6xl: 4rem; // 64px\n$heading-7xl: 4.75rem; // 76px\n$heading-8xl: 5rem; // 80px\n$heading-9xl: 6rem; // 96px\n$heading-10xl: 7.0625rem; // 113px\n\n// Text\n$text-base: 1rem; /* 16px */\n$text-lg: 1.125rem; /* 18px */\n$text-xl: 1.25rem; /* 20px */\n$text-xxl: 1.4375rem; /* 23px */\n\n// Font Weight Variables\n$font-weight-thin: 100;\n$font-weight-extra-light: 200;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extra-bold: 800;\n$font-weight-black: 900;\n\n/* Line Heights */\n$line-height-tight: 1.2;\n$line-height-normal: 1.3;\n$line-height-relaxed: 1.75;\n\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n","/* Add Block CSS Here */\n/* 16px */\n/* 18px */\n/* 20px */\n/* 23px */\n/* Line Heights */\n/* =================== TYPOGRAPHY CLASSES =================== */\n.heading-xl {\n font-size: var(--font-size-5xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-lg {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-md {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-black);\n}\n\n.heading-sm {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-black);\n}\n\n.heading-h1 {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.heading-h2 {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-normal);\n color: var(--color-dark-gray);\n}\n\n.text-body {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-small {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n.text-xs {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-normal);\n color: var(--color-gray);\n}\n\n@keyframes marquee-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n@keyframes marquee-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n.worked-with-companies {\n position: relative;\n overflow: hidden;\n}\n.worked-with-companies .border-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n.worked-with-companies .logoWrapper {\n display: flex;\n align-items: stretch;\n}\n.worked-with-companies .logoWrapper .logos-Heading {\n max-width: 292px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n position: relative;\n}\n.worked-with-companies .logoWrapper .logos-Heading .logosTitle {\n font-size: 2.875rem;\n color: #cfd7f1;\n text-transform: uppercase;\n font-weight: 300;\n line-height: 56px;\n margin: 0;\n font-family: \"PPSupplySans-Regular\", sans-serif;\n}\n.worked-with-companies .logoWrapper .logos-Heading .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: #64e4cb;\n}\n.worked-with-companies .logoWrapper .logos-Heading .border-bottom-line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background: #64e4cb;\n display: none;\n}\n.worked-with-companies .logoWrapper .logosRow {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n}\n.worked-with-companies .logoWrapper .logosRow .border-bottom-line {\n width: 100%;\n height: 1px;\n background: #64e4cb;\n flex-shrink: 0;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup {\n display: flex;\n width: 100%;\n overflow: hidden;\n height: 103px;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup:hover .logosTrack {\n animation-play-state: paused;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup[data-row=odd] .logosTrack {\n animation: marquee-left 35s linear infinite;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup[data-row=even] .logosTrack {\n animation: marquee-left 35s linear infinite;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup .logosTrack {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n height: 100%;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup .logos {\n width: 200px;\n flex-shrink: 0;\n height: 100%;\n padding: 18px 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup .logos .border-right {\n position: absolute;\n top: 0;\n right: 0;\n width: 1px;\n height: 100%;\n background: repeating-linear-gradient(to bottom, #64e4cb 0px, #64e4cb 6px, transparent 6px, transparent 12px);\n}\n.worked-with-companies .logoWrapper .logosRow .logosGroup .logos img {\n width: 100%;\n height: 100%;\n max-height: 50px;\n object-fit: contain;\n}\n\n@media (max-width: 1200px) {\n .worked-with-companies .logoWrapper .logos-Heading .logosTitle {\n font-size: 2rem;\n line-height: 44px;\n }\n .worked-with-companies .logoWrapper .logosRow .logosGroup {\n height: 63px;\n }\n}\n@media (max-width: 1024px) {\n .worked-with-companies .logoWrapper .logos-Heading {\n padding: 16px;\n }\n .worked-with-companies .logoWrapper .logos-Heading .logosTitle {\n font-size: 1.5rem;\n line-height: 32px;\n }\n .worked-with-companies .logoWrapper .logosRow .logosGroup {\n height: 53px;\n }\n}\n@media (max-width: 768px) {\n .worked-with-companies .logoWrapper {\n display: flex;\n flex-direction: column;\n }\n .worked-with-companies .logoWrapper .logos-Heading {\n max-width: 100%;\n justify-content: flex-start;\n }\n .worked-with-companies .logoWrapper .logos-Heading .border-right {\n display: none;\n }\n .worked-with-companies .logoWrapper .logos-Heading .border-bottom-line {\n display: block;\n }\n .worked-with-companies .logoWrapper .logosRow .logosGroup .logos {\n max-width: 250px;\n width: 100%;\n max-height: 60px;\n height: 60px;\n padding: 12px;\n }\n}\n@media (max-width: 576px) {\n .worked-with-companies .logoWrapper .logosRow .logosGroup .logos {\n max-width: 200px;\n padding: 15px;\n }\n}","// Colors\n$color-primary: #64e4cb; // Main brand color (buttons, borders, highlights)\n$color-primary-dark: #06234f; // Dark brand background (hero, footer, sections)\n$white: #ffffff; // white color\n$black: #000000; // black color\n$text-color: #dddddd; // text medium heading\n$text-dark-primary: #e5f1fd; // text dark subheading\n$text-dark-light: #cfd7f1; // text light paragraph\n$bg-tranparent: rgba(100, 228, 203, 0.2); // bakcground transparent\n$error: #ff5757;\n"]} /* Add Block CSS Here */ /* 16px */ /* 18px */ /* 20px */ /* 23px */ /* Line Heights */ /* =================== TYPOGRAPHY CLASSES =================== */ .heading-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-md { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-black); } .heading-sm { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-black); } .heading-h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .heading-h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-dark-gray); } .text-body { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } .text-xs { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-gray); } @keyframes marquee-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .worked-with-companies { position: relative; overflow: hidden; } .worked-with-companies .border-line { width: 100%; height: 1px; background: #64e4cb; position: absolute; bottom: 0; left: 0; } .worked-with-companies .logoWrapper { display: flex; align-items: stretch; } .worked-with-companies .logoWrapper .logos-Heading { max-width: 292px; display: flex; justify-content: center; align-items: center; padding: 20px; position: relative; } .worked-with-companies .logoWrapper .logos-Heading .logosTitle { font-size: 2.875rem; color: #cfd7f1; text-transform: uppercase; font-weight: 300; line-height: 56px; margin: 0; font-family: "PPSupplySans-Regular", sans-serif; } .worked-with-companies .logoWrapper .logos-Heading .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #64e4cb; } .worked-with-companies .logoWrapper .logos-Heading .border-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #64e4cb; display: none; } .worked-with-companies .logoWrapper .logosRow { display: flex; flex-direction: column; width: 100%; overflow: hidden; } .worked-with-companies .logoWrapper .logosRow .border-bottom-line { width: 100%; height: 1px; background: #64e4cb; flex-shrink: 0; } .worked-with-companies .logoWrapper .logosRow .logosGroup { display: flex; width: 100%; overflow: hidden; height: 103px; } .worked-with-companies .logoWrapper .logosRow .logosGroup:hover .logosTrack { animation-play-state: paused; } .worked-with-companies .logoWrapper .logosRow .logosGroup[data-row=odd] .logosTrack { animation: marquee-left 35s linear infinite; } .worked-with-companies .logoWrapper .logosRow .logosGroup[data-row=even] .logosTrack { animation: marquee-left 35s linear infinite; } .worked-with-companies .logoWrapper .logosRow .logosGroup .logosTrack { display: flex; flex-shrink: 0; align-items: center; height: 100%; } .worked-with-companies .logoWrapper .logosRow .logosGroup .logos { width: 200px; flex-shrink: 0; height: 100%; padding: 18px 22px; display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; } .worked-with-companies .logoWrapper .logosRow .logosGroup .logos .border-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: repeating-linear-gradient(to bottom, #64e4cb 0px, #64e4cb 6px, transparent 6px, transparent 12px); } .worked-with-companies .logoWrapper .logosRow .logosGroup .logos img { width: 100%; height: 100%; max-height: 50px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 1200px) { .worked-with-companies .logoWrapper .logos-Heading .logosTitle { font-size: 2rem; line-height: 44px; } .worked-with-companies .logoWrapper .logosRow .logosGroup { height: 63px; } } @media (max-width: 1024px) { .worked-with-companies .logoWrapper .logos-Heading { padding: 16px; } .worked-with-companies .logoWrapper .logos-Heading .logosTitle { font-size: 1.5rem; line-height: 32px; } .worked-with-companies .logoWrapper .logosRow .logosGroup { height: 53px; } } @media (max-width: 768px) { .worked-with-companies .logoWrapper { display: flex; flex-direction: column; } .worked-with-companies .logoWrapper .logos-Heading { max-width: 100%; justify-content: flex-start; } .worked-with-companies .logoWrapper .logos-Heading .border-right { display: none; } .worked-with-companies .logoWrapper .logos-Heading .border-bottom-line { display: block; } .worked-with-companies .logoWrapper .logosRow .logosGroup .logos { max-width: 250px; width: 100%; max-height: 60px; height: 60px; padding: 12px; } } @media (max-width: 576px) { .worked-with-companies .logoWrapper .logosRow .logosGroup .logos { max-width: 200px; padding: 15px; } } /*# sourceMappingURL=worked-with-companies.css.map */