.elementor-924 .elementor-element.elementor-element-3d0cbef{--display:flex;--min-height:33vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:35px 35px;--row-gap:35px;--column-gap:35px;--overlay-opacity:0.7;--padding-top:3%;--padding-bottom:3%;--padding-left:2%;--padding-right:2%;}.elementor-924 .elementor-element.elementor-element-3d0cbef:not(.elementor-motion-effects-element-type-background), .elementor-924 .elementor-element.elementor-element-3d0cbef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://dev.3dgnd.com/wp-content/uploads/2025/07/materiales-3dgnd.png");background-position:-41px -500px;background-repeat:no-repeat;background-size:cover;}.elementor-924 .elementor-element.elementor-element-3d0cbef::before, .elementor-924 .elementor-element.elementor-element-3d0cbef > .elementor-background-video-container::before, .elementor-924 .elementor-element.elementor-element-3d0cbef > .e-con-inner > .elementor-background-video-container::before, .elementor-924 .elementor-element.elementor-element-3d0cbef > .elementor-background-slideshow::before, .elementor-924 .elementor-element.elementor-element-3d0cbef > .e-con-inner > .elementor-background-slideshow::before, .elementor-924 .elementor-element.elementor-element-3d0cbef > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );color:var( --e-global-color-primary );}.elementor-924 .elementor-element.elementor-element-ed755c9{text-align:center;}.elementor-924 .elementor-element.elementor-element-ed755c9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:50px;font-weight:600;text-transform:none;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;color:#1C244B;}.elementor-924 .elementor-element.elementor-element-158b852{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:2%;--padding-bottom:2%;--padding-left:0%;--padding-right:0%;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-924 .elementor-element.elementor-element-60ef2e7{text-align:center;font-family:"Poppins", Sans-serif;font-size:18px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;}.elementor-924 .elementor-element.elementor-element-2407856{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-924 .elementor-element.elementor-element-2407856.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-924 .elementor-element.elementor-element-e1a9cea{--display:flex;--min-height:45vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--overlay-opacity:0.5;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:35%;}.elementor-924 .elementor-element.elementor-element-e1a9cea:not(.elementor-motion-effects-element-type-background), .elementor-924 .elementor-element.elementor-element-e1a9cea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );background-image:url("https://dev.3dgnd.com/wp-content/uploads/2025/05/3d-gnd-2.jpg");background-position:center right;background-repeat:no-repeat;background-size:contain;}.elementor-924 .elementor-element.elementor-element-e1a9cea::before, .elementor-924 .elementor-element.elementor-element-e1a9cea > .elementor-background-video-container::before, .elementor-924 .elementor-element.elementor-element-e1a9cea > .e-con-inner > .elementor-background-video-container::before, .elementor-924 .elementor-element.elementor-element-e1a9cea > .elementor-background-slideshow::before, .elementor-924 .elementor-element.elementor-element-e1a9cea > .e-con-inner > .elementor-background-slideshow::before, .elementor-924 .elementor-element.elementor-element-e1a9cea > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-widget-call-to-action .elementor-cta__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-call-to-action .elementor-cta__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-call-to-action .elementor-cta__button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-widget-call-to-action .elementor-ribbon-inner{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta .elementor-cta__bg, .elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-924 .elementor-element.elementor-element-965e105{width:var( --container-widget-width, 610px );max-width:610px;--container-widget-width:610px;--container-widget-flex-grow:0;}.elementor-924 .elementor-element.elementor-element-965e105 > .elementor-widget-container{border-style:none;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__content{text-align:left;padding:0% 0% 0% 0%;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__title{font-family:"Poppins", Sans-serif;font-size:45px;font-weight:600;text-transform:none;font-style:normal;text-decoration:none;line-height:1.2em;letter-spacing:0px;word-spacing:0em;color:var( --e-global-color-primary );}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__title:not(:last-child){margin-bottom:30px;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__description{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;color:var( --e-global-color-text );}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__description:not(:last-child){margin-bottom:30px;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__button{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;color:var( --e-global-color-d6cea4e );background-color:#2980B9;border-color:#2980B9;border-width:0px;border-radius:1em;padding:16px 55px 16px 55px;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__button:hover{color:#2980B9;background-color:var( --e-global-color-86b4fcd );}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta:hover .elementor-cta__bg-overlay{background-color:#00000000;}@media(min-width:768px){.elementor-924 .elementor-element.elementor-element-158b852{--content-width:1250px;}.elementor-924 .elementor-element.elementor-element-2407856{--width:100%;}.elementor-924 .elementor-element.elementor-element-e1a9cea{--content-width:1250px;}}@media(max-width:1024px){.elementor-924 .elementor-element.elementor-element-3d0cbef{--min-height:93.3vh;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-924 .elementor-element.elementor-element-3d0cbef:not(.elementor-motion-effects-element-type-background), .elementor-924 .elementor-element.elementor-element-3d0cbef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-924 .elementor-element.elementor-element-ed755c9 .elementor-heading-title{font-size:65px;}.elementor-924 .elementor-element.elementor-element-158b852{--margin-top:25%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-924 .elementor-element.elementor-element-60ef2e7{text-align:center;font-size:14px;}.elementor-924 .elementor-element.elementor-element-e1a9cea{--min-height:65vh;--margin-top:25%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:20%;--padding-right:20%;}.elementor-widget-call-to-action .elementor-cta__title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-call-to-action .elementor-cta__description{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-call-to-action .elementor-cta__button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-widget-call-to-action .elementor-ribbon-inner{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-924 .elementor-element.elementor-element-965e105{width:100%;max-width:100%;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__content{text-align:center;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__title{font-size:45px;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__description{font-size:14px;line-height:1.4em;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__button{font-size:14px;}}@media(max-width:767px){.elementor-924 .elementor-element.elementor-element-3d0cbef{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-924 .elementor-element.elementor-element-3d0cbef:not(.elementor-motion-effects-element-type-background), .elementor-924 .elementor-element.elementor-element-3d0cbef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-924 .elementor-element.elementor-element-ed755c9 .elementor-heading-title{font-size:42px;line-height:1em;}.elementor-924 .elementor-element.elementor-element-158b852{--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:7%;--padding-bottom:7%;--padding-left:2%;--padding-right:2%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-924 .elementor-element.elementor-element-60ef2e7{text-align:center;font-size:18px;}.elementor-924 .elementor-element.elementor-element-e1a9cea{--min-height:380px;--overlay-opacity:0.6;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:7%;--padding-bottom:7%;--padding-left:5%;--padding-right:5%;}.elementor-924 .elementor-element.elementor-element-e1a9cea:not(.elementor-motion-effects-element-type-background), .elementor-924 .elementor-element.elementor-element-e1a9cea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:top center;}.elementor-widget-call-to-action .elementor-cta__title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-call-to-action .elementor-cta__description{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-call-to-action .elementor-cta__button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-widget-call-to-action .elementor-ribbon-inner{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-924 .elementor-element.elementor-element-965e105 > .elementor-widget-container{border-radius:0em 0em 0em 0em;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__title{font-size:20px;line-height:1.1em;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__description{font-size:18px;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__description:not(:last-child){margin-bottom:18px;}.elementor-924 .elementor-element.elementor-element-965e105 .elementor-cta__button{font-size:18px;}}@media(min-width:1025px){.elementor-924 .elementor-element.elementor-element-3d0cbef:not(.elementor-motion-effects-element-type-background), .elementor-924 .elementor-element.elementor-element-3d0cbef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for container, class: .elementor-element-2407856 *//* 3D GND - Main Stylesheet */
/* Optimized for performance, accessibility, and modern browsers */
/* CSS Custom Properties (Variables) */
:root {
/* Brand Colors */
--primary-blue: #2980B9;
--secondary-blue: #3498DB;
--accent-blue: #1abc9c;
/* Neutral Colors */
--white: #ffffff;
--gray-50: #fafafa;
--gray-100: #f8f9fa;
--gray-200: #e9ecef;
--gray-300: #dee2e6;
--gray-400: #ced4da;
--gray-500: #adb5bd;
--gray-600: #6c757d;
--gray-700: #495057;
--gray-800: #343a40;
--gray-900: #212529;
--black: #000000;
/* Semantic Colors */
--success: #28a745;
--warning: #ffc107;
--danger: #dc3545;
--info: #17a2b8;
/* Typography */
--font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--font-size-6xl: 3.75rem;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 6rem;
--spacing-5xl: 8rem;
/* Layout */
--container-max-width: 1200px;
--border-radius-sm: 0.375rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--border-radius-2xl: 1.5rem;
--border-radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-normal: 300ms ease-in-out;
--transition-slow: 500ms ease-in-out;
/* Z-index */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
/* CSS Reset and Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--gray-800);
background-color: var(--gray-50);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Skip Link for Accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--primary-blue);
color: var(--white);
padding: 8px;
text-decoration: none;
border-radius: var(--border-radius-md);
z-index: var(--z-tooltip);
transition: var(--transition-fast);
}
.skip-link:focus {
top: 6px;
}
/* Container */
.container {
width: 100%;
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
@media (min-width: 640px) {
.container {
padding: 0 var(--spacing-lg);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-xl);
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--gray-900);
margin-bottom: var(--spacing-md);
}
h1 {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-extrabold);
}
h2 {
font-size: var(--font-size-3xl);
}
h3 {
font-size: var(--font-size-2xl);
}
h4 {
font-size: var(--font-size-xl);
}
h5 {
font-size: var(--font-size-lg);
}
h6 {
font-size: var(--font-size-base);
}
@media (min-width: 768px) {
h1 {
font-size: var(--font-size-5xl);
}
h2 {
font-size: var(--font-size-4xl);
}
h3 {
font-size: var(--font-size-3xl);
}
}
@media (min-width: 1024px) {
h1 {
font-size: var(--font-size-6xl);
}
}
p {
margin-bottom: var(--spacing-md);
line-height: var(--line-height-relaxed);
}
a {
color: var(--primary-blue);
text-decoration: none;
transition: var(--transition-fast);
}
a:hover,
a:focus {
color: var(--secondary-blue);
text-decoration: underline;
}
a:focus {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
}
/* Lists */
ul, ol {
margin-bottom: var(--spacing-md);
padding-left: var(--spacing-lg);
}
li {
margin-bottom: var(--spacing-xs);
}
/* Images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--border-radius-lg);
cursor: pointer;
transition: var(--transition-normal);
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
}
.btn:focus {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
}
.btn-small {
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-sm);
}
.btn-large {
padding: var(--spacing-md) var(--spacing-2xl);
font-size: var(--font-size-lg);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: var(--white);
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
color: var(--white);
text-decoration: none;
}
.btn-secondary {
background: var(--white);
color: var(--primary-blue);
border-color: var(--primary-blue);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
background: var(--primary-blue);
color: var(--white);
text-decoration: none;
}
.btn-text {
background: transparent;
color: var(--primary-blue);
padding: var(--spacing-xs) var(--spacing-sm);
}
.btn-text:hover {
background: var(--gray-100);
text-decoration: none;
}
/* Header */
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--gray-200);
position: sticky;
top: 0;
z-index: var(--z-sticky);
box-shadow: var(--shadow-sm);
}
.navbar {
padding: var(--spacing-md) 0;
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar-brand .logo img {
height: 40px;
width: auto;
transition: var(--transition-normal);
}
.navbar-brand .logo:hover img {
transform: scale(1.05);
}
.navbar-toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-sm);
}
.hamburger-line {
width: 24px;
height: 2px;
background: var(--gray-800);
transition: var(--transition-fast);
}
.navbar-menu {
display: flex;
align-items: center;
gap: var(--spacing-2xl);
}
.navbar-nav {
display: flex;
align-items: center;
gap: var(--spacing-lg);
list-style: none;
margin: 0;
padding: 0;
}
.nav-link {
font-weight: var(--font-weight-medium);
color: var(--gray-700);
padding: var(--spacing-sm) 0;
position: relative;
transition: var(--transition-fast);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-blue);
transition: var(--transition-fast);
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-blue);
text-decoration: none;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.cta-button {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: var(--white) !important;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--border-radius-full);
font-weight: var(--font-weight-semibold);
box-shadow: var(--shadow-md);
transition: var(--transition-normal);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
/* Mobile Navigation */
@media (max-width: 1023px) {
.navbar-toggle {
display: flex;
}
.navbar-menu {
position: fixed;
top: 100%;
left: 0;
right: 0;
background: var(--white);
flex-direction: column;
padding: var(--spacing-xl);
box-shadow: var(--shadow-lg);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
}
.navbar-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.navbar-nav {
flex-direction: column;
width: 100%;
gap: var(--spacing-md);
}
.nav-link {
padding: var(--spacing-md) 0;
border-bottom: 1px solid var(--gray-200);
width: 100%;
}
.cta-button {
margin-top: var(--spacing-lg);
}
}
/* Hero Section */
.hero {
padding: var(--spacing-4xl) 0;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 50%, var(--accent-blue) 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.hero .container {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-3xl);
align-items: center;
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.hero .container {
grid-template-columns: 1fr 1fr;
}
}
.hero-content {
text-align: center;
}
@media (min-width: 1024px) {
.hero-content {
text-align: left;
}
}
.hero-title {
margin-bottom: var(--spacing-lg);
}
.gradient-text {
background: linear-gradient(135deg, var(--white), rgba(255, 255, 255, 0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
}
.subtitle {
display: block;
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
margin-top: var(--spacing-sm);
opacity: 0.9;
}
@media (min-width: 768px) {
.subtitle {
font-size: var(--font-size-3xl);
}
}
.hero-description {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-2xl);
opacity: 0.9;
}
@media (min-width: 768px) {
.hero-description {
font-size: var(--font-size-xl);
}
}
.hero-actions {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-bottom: var(--spacing-2xl);
}
@media (min-width: 640px) {
.hero-actions {
flex-direction: row;
justify-content: center;
}
@media (min-width: 1024px) {
.hero-actions {
justify-content: flex-start;
}
}
}
.trust-indicators {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
justify-content: center;
}
@media (min-width: 1024px) {
.trust-indicators {
justify-content: flex-start;
}
}
.trust-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
opacity: 0.9;
}
.hero-visual {
text-align: center;
}
.hero-image {
max-width: 100%;
height: auto;
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-2xl);
transition: var(--transition-slow);
}
.hero-image:hover {
transform: scale(1.02);
}
/* Section Styles */
section {
padding: var(--spacing-4xl) 0;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.section-title {
position: relative;
display: inline-block;
margin-bottom: var(--spacing-lg);
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
border-radius: var(--border-radius-sm);
}
.section-subtitle {
font-size: var(--font-size-lg);
color: var(--gray-600);
max-width: 800px;
margin: 0 auto;
line-height: var(--line-height-relaxed);
}
/* Why Choose Us Section */
.why-choose-us {
background: var(--white);
}
.benefits-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
@media (min-width: 768px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.benefits-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.benefit-card {
background: var(--white);
padding: var(--spacing-2xl);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-md);
text-align: center;
transition: var(--transition-normal);
border: 1px solid var(--gray-200);
position: relative;
overflow: hidden;
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
transform: scaleX(0);
transform-origin: left;
transition: var(--transition-normal);
}
.benefit-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.benefit-card:hover::before {
transform: scaleX(1);
}
.benefit-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-lg);
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-2xl);
box-shadow: var(--shadow-lg);
transition: var(--transition-normal);
}
.benefit-card:hover .benefit-icon {
transform: scale(1.1) rotate(5deg);
}
.benefit-card h3 {
margin-bottom: var(--spacing-md);
color: var(--gray-900);
}
.benefit-card p {
color: var(--gray-600);
line-height: var(--line-height-relaxed);
}
/* Process Section */
.process {
background: var(--white);
position: relative;
}
.process::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,');
background-size: 60px 60px;
opacity: 0.5;
}
.process-steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
position: relative;
}
@media (min-width: 768px) {
.process-steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.process-steps {
grid-template-columns: repeat(4, 1fr);
}
.process-steps::before {
content: '';
position: absolute;
top: 30px;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
z-index: 0;
}
}
.process-step {
background: var(--white);
padding: var(--spacing-xl);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-md);
text-align: center;
transition: var(--transition-normal);
position: relative;
z-index: 1;
border: 1px solid var(--gray-200);
}
.process-step:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
margin: 0 auto var(--spacing-lg);
box-shadow: var(--shadow-lg);
transition: var(--transition-normal);
}
.process-step:hover .step-number {
transform: scale(1.1);
}
.process-step h3 {
margin-bottom: var(--spacing-md);
color: var(--gray-900);
}
.process-step p {
color: var(--gray-600);
line-height: var(--line-height-relaxed);
}
/* Materials Section */
.materials {
background: var(--gray-100);
position: relative;
overflow: hidden;
}
.materials::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: linear-gradient(135deg, rgba(41, 128, 185, 0.1), rgba(52, 152, 219, 0.1));
border-radius: 50%;
bottom: -200px;
left: -200px;
z-index: 0;
}
.materials-showcase {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-3xl);
align-items: center;
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.materials-showcase {
grid-template-columns: 1fr 1fr;
}
}
.materials-visual {
text-align: center;
}
.materials-pyramid {
max-width: 100%;
height: auto;
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-xl);
transition: var(--transition-slow);
}
.materials-pyramid:hover {
transform: scale(1.02);
}
.materials-content {
display: grid;
gap: var(--spacing-xl);
}
.material-category {
background: var(--white);
padding: var(--spacing-xl);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-md);
border-left: 4px solid var(--primary-blue);
transition: var(--transition-normal);
}
.material-category:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.material-category h3 {
color: var(--primary-blue);
margin-bottom: var(--spacing-md);
}
.material-category p {
color: var(--gray-600);
margin-bottom: var(--spacing-md);
}
.material-list {
list-style: none;
padding: 0;
margin: 0;
}
.material-list li {
padding: var(--spacing-xs) 0;
color: var(--gray-700);
position: relative;
padding-left: var(--spacing-lg);
}
.material-list li::before {
content: '•';
color: var(--primary-blue);
position: absolute;
left: 0;
font-weight: var(--font-weight-bold);
}
.materials-comparison {
margin: var(--spacing-3xl) 0;
text-align: center;
}
.comparison-chart {
max-width: 100%;
height: auto;
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-xl);
background: var(--white);
padding: var(--spacing-lg);
}
.materials-cta {
text-align: center;
}
/* Design Guide Preview */
.design-guide-preview {
background: var(--white);
}
.design-tips-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
@media (min-width: 768px) {
.design-tips-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.design-tips-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.design-tip {
background: var(--white);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition-normal);
border: 1px solid var(--gray-200);
}
.design-tip:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.tip-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: var(--transition-slow);
}
.design-tip:hover .tip-image {
transform: scale(1.05);
}
.design-tip h3 {
padding: var(--spacing-lg);
margin: 0;
color: var(--gray-900);
}
.design-tip p {
padding: 0 var(--spacing-lg) var(--spacing-lg);
margin: 0;
color: var(--gray-600);
line-height: var(--line-height-relaxed);
}
.design-guide-cta {
text-align: center;
margin-top: var(--spacing-3xl);
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: var(--white);
text-align: center;
}
.cta-content h2 {
color: var(--white);
margin-bottom: var(--spacing-lg);
}
.cta-content p {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-2xl);
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Footer */
.footer {
background: var(--gray-900);
color: var(--gray-300);
padding: var(--spacing-4xl) 0 var(--spacing-xl);
}
.footer-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-3xl);
}
@media (min-width: 768px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.footer-content {
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}
}
.footer-section h3 {
color: var(--white);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-lg);
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
height: 40px;
width: auto;
margin-bottom: var(--spacing-md);
filter: brightness(0) invert(1);
}
.footer-description {
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-lg);
}
.social-links {
display: flex;
gap: var(--spacing-md);
}
.social-link {
width: 40px;
height: 40px;
background: var(--gray-800);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-300);
transition: var(--transition-normal);
}
.social-link:hover {
background: var(--primary-blue);
color: var(--white);
transform: translateY(-2px);
text-decoration: none;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: var(--spacing-sm);
}
.footer-links a {
color: var(--gray-300);
transition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--white);
text-decoration: none;
}
.contact-info {
display: grid;
gap: var(--spacing-md);
}
.contact-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.contact-item i {
color: var(--primary-blue);
width: 20px;
}
.contact-item a {
color: var(--gray-300);
transition: var(--transition-fast);
}
.contact-item a:hover {
color: var(--white);
text-decoration: none;
}
.footer-bottom {
border-top: 1px solid var(--gray-800);
padding-top: var(--spacing-xl);
}
.footer-bottom-content {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.footer-bottom-content {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.footer-bottom-links {
display: flex;
gap: var(--spacing-lg);
}
.footer-bottom-links a {
color: var(--gray-400);
font-size: var(--font-size-sm);
transition: var(--transition-fast);
}
.footer-bottom-links a:hover {
color: var(--white);
text-decoration: none;
}
/* Cookie Consent */
.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
border-top: 1px solid var(--gray-200);
box-shadow: var(--shadow-xl);
z-index: var(--z-modal);
padding: var(--spacing-lg);
}
.cookie-content {
max-width: var(--container-max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--spacing-md);
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.cookie-content {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.cookie-content p {
margin: 0;
color: var(--gray-700);
flex: 1;
}
.cookie-actions {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
/* Utility Classes */
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Loading States */
.loading {
opacity: 0.6;
pointer-events: none;
}
/* Focus Styles for Better Accessibility */
*:focus {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
:root {
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
}
/* Print Styles */
@media print {
*,
*::before,
*::after {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
.header,
.footer,
.cookie-consent {
display: none;
}
.container {
max-width: none;
padding: 0;
}
}/* End custom CSS */