@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); .section-title { color: #000; font-family: Montserrat; font-size: 38px; font-style: normal; font-weight: 500; line-height: 48px; /* 126.316% */ letter-spacing: -0.76px; margin-bottom: 20px; } .section-text{ color: #000; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 400; line-height: 25px; /* 156.25% */ } @media (max-width: 768px) { .section-title { color: #000; /* Mobile - H2 */ font-family: Montserrat; font-size: 28px; font-style: normal; font-weight: 500; line-height: 38px; /* 135.714% */ letter-spacing: -0.56px; } } .navigation { } .container { max-width: 1200px; margin: 0 auto; } .navigation-container { // display: flex; // align-items: center; margin-top: 20px; // justify-content: flex-end; } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-link { color: #000; font-size: 1rem; padding: 4px 8px; margin: 5px 0px; text-decoration: none; display: inline-block; transition: transform 0.3s; font-weight: bold } /* .nav-link:hover { color: #000; transform: scale(1.03) !important; border-bottom: 3px solid #57AD47; } */ .active { /* Shadows/Hover States/Primary */ box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.64), 0px 2px 5px 0px rgba(103, 110, 118, 0.08); cursor: pointer; background-color: #57ad47; border-radius: 68px; font-family: Montserrat; font-weight: 600; text-align: center; color: #000 !important; border: 1px solid #000; padding: 12px 20px 12px 21px; text-decoration: none; } @media (max-width: 940px) { .navigation-container { flex-direction: column; align-items: center; } .nav-links { margin-top: 10px; flex-direction: column; align-items: center; } .nav-link { margin: 0; } .logo img{ margin:20px; } } #header { display: flex; margin-top: -100px; } #header .video-container { flex: 4; /* 4/12 of screen width */ max-width: 465px; /* Set the maximum width */ min-height: 680px; overflow: hidden; position: relative; } #header .logo-container { position: absolute; top: 0; top: 29px; left: 50%; transform: translateX(-50%); z-index: 2; } #header .section-title-mobile { display: none; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); transform: translateY(-50%) translateX(-50%); z-index: 2; color: #FFF; text-align: center; font-family: Montserrat; font-size: 38px; font-style: normal; font-weight: 500; line-height: 47px; letter-spacing: -0.76px; text-transform: uppercase; text-align: center !important; } #header video { width: 100%; height: 100%; object-fit: cover; } .header-section { flex: 8; /* 8/12 of screen width */ background: #C5EDBE; padding: 83px 0px; display: flex; align-items: center; } .header-section .container { display: flex; flex-direction: column; } .header-content { display: flex; flex-direction: column; align-items: flex-start; /* Align content to the left */ max-width: 500px; text-align: left; margin-left: 86px; } .header-section .buttons { margin-top: 20px; } .header-section .button { display: inline-block; padding: 10px 20px; border-radius: 10px; text-decoration: none; margin-right: 10px; transition: transform 0.3s; font-weight: bold; } .header-section .button:hover { transform: scale(1.03) !important; } .button-style { display: inline-flex; padding: 12px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; border-radius: 138px; border: 1px solid #000; } .button-style:hover { /* Shadows/Hover States/Primary */ box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.64), 0px 2px 5px 0px rgba(103, 110, 118, 0.08); } /*HEADER CONTENT*/ .header-section { background: #C5EDBE; padding: 50px 0px; } .header-section .container { display: flex; flex-direction: column; } .header-section .header-text { color: #000; text-align: center; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 400; line-height: 30px; /* 166.667% */ max-width: 500px; text-align: left; } .header-section .buttons { margin-top: 20px; } .header-section .button { display: inline-block; padding: 10px 20px; border-radius: 10px; text-decoration: none; margin-right: 10px; transition: transform 0.3s; font-weight: bold } .header-section .button:hover { transform: scale(1.03) !important; } @media (max-width: 940px) { #header .section-title-mobile { display: block; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 2; color: #FFF; text-align: center; font-family: Montserrat; font-size: 38px; font-style: normal; font-weight: 500; line-height: 47px; letter-spacing: -0.76px; text-transform: uppercase; text-align: center !important; } .header-title{ display: none; } .header-text{ text-align: center !important; } #header { position: relative; display: flex; margin-top: 0px; flex-direction: column; } #header .video-container { flex: 4; max-width: 100%; min-height: 100%; overflow: hidden; position: relative; margin-bottom: -10px; } #header video { width: 100%; height: 100%; height: 400px; object-fit: cover; } #header .header-content { text-align: center; margin: 0px 20px; max-width: 100%; align-items: center; display: block; } .header-section .header-text { max-width: 100%; } .buttons{ display: flex; flex-direction: column; } } /*BRANDS CONTAINER*/ #brands { background-color: #fff; border-bottom: 1px solid #000; padding: 20px 0px; } .brand-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .brand-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; justify-content: space-evenly; } .brand-links a { color: #000; text-align: center; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 600; line-height: 25px; display: flex; text-transform: uppercase; text-decoration: none; flex-direction: column; align-content: center; align-items: center; height: 100px; justify-content: space-between; } .brand-links a img { margin-right: 10px; } .brand-links a .brand-name { color: #000; text-align: center; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 600; line-height: 25px; /* 156.25% */ text-transform: uppercase; } @media (max-width: 768px) { .brand-links a { margin-bottom: 10px; justify-content: center; } .brand-links a img { display: inline-block; } .brand-links a .brand-name { display: none; } } /*GREEN INVEST ROW*/ .green-invest-row { display: flex; justify-content: space-evenly; } .green-invest-col { min-height: 550px; display: flex; justify-content: center; width: 498px; height: 384px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; padding: 0 20px; } .green-invest-col p{ color: #000; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 400; line-height: 25px; /* 156.25% */ } .calculate-profit-col { margin: 40px 0px; background: #EFFDEC; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 20px; } .calculate-profit-content { width: 100%; } .calculate-profit-content h5 { color: #000; text-align: center; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 700; line-height: 120%; /* 21.6px */ letter-spacing: -0.54px; } /* Button-Styling */ .calculate-profit-content .btn-primary { margin: 20px 0px; background-color: transparent; border: 1px solid #000; border-radius: 68px; font-family: Montserrat; font-weight: 600; font-size: 14px; line-height: 20px; text-align: center; color: #000; padding: 12px 20px 12px 21px; text-decoration: none; } .calculate-profit-content .btn-primary:active{ background-color: transparent; border: 1px solid #000; color: #000; text-decoration: none; } .widget-process .col { display: flex; justify-content: flex-end; } .widget-youget { margin-top: 10px; } /* Hintergrund für die Eingabefelder */ .calculate-profit-content .input-group input { background-color: #BFE6B7; /* Ändern Sie die Hintergrundfarbe nach Bedarf */ border: none; border-radius: 0px; padding: 10px; font-size: 16px; /* Ändern Sie die Schriftgröße nach Bedarf */ } /* Styling für die Eingabezahl */ .calculate-profit-content .input-group input.form-control { color: #000; font-family: Montserrat; font-size: 48px; font-style: normal; font-weight: 400; line-height: 120%; /* 57.6px */ letter-spacing: -1.44px; //border-bottom: 1px solid black; border-radius: 0px; } /* Styling für "You pay" und "You get" */ .calculate-profit-content .row strong { color: #000; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 400; line-height: 120%; /* 21.6px */ letter-spacing: -0.54px; } /* Styling für die Auswahl (Dropdown) */ .calculate-profit-content .form-select, .calculate-profit-content .input-group-text.widgetInput { background-color: transparent; border: 1px solid #000; border-radius: 68px !important; font-family: Montserrat; font-weight: 600; font-size: 14px; line-height: 20px; text-align: center; color: #000; padding: 12px 20px 12px 21px; text-decoration: none; } /* Hintergrund für "You pay", "You get" und Eingabefelder */ .calculate-profit-content .widget-youpay, .calculate-profit-content .widget-youget, .calculate-profit-content .widget-summary, .calculate-profit-content .input-group input, .calculate-profit-content .input-group-text.widgetInput { background-color: #BFE6B7; /* Hintergrundfarbe anpassen */ border: none; border-radius: 0px; padding: 10px; font-size: 16px; /* Schriftgröße anpassen */ } .widget-youpay { } /* Styling für den grauen Rahmen beim Fokussieren des "You pay"-Eingabefelds */ .calculate-profit-content .input-group input.form-control:focus { box-shadow: none; /* Grauen Rahmen entfernen */ border-bottom: 1px solid black; /* Schwarzen unteren Rand hinzufügen */ } /* Styling für den grünen Rahmen beim Fokussieren des Auswahlfelds */ .calculate-profit-content .form-select:focus { border-color: #000 !important; /* Grünen Rahmen beibehalten */ } #basic-addon1{ color: #000; font-family: Montserrat; font-size: 20px; font-style: normal; font-weight: 700; line-height: 20px; /* 142.857% */ } /*BENEFIT SECTION*/ .benefits-section { padding: 80px 0; } .benefit-col { text-align: center; color: #000; font-family: Montserrat, sans-serif; font-size: 18px; font-style: normal; font-weight: 700; line-height: 30px; min-height: 205px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .benefit-text { margin: 0; color: #000; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 400; line-height: 30px; } @media (max-width: 768px) { .benefit-section .row{ margin: 0 20px; } .benefit-col { text-align: center; border-bottom: 1px solid; padding: 20px; min-height: 90px; display: flex; border-right: none !important; } } /*QUOTE IMG SECTION*/ .quote-section { position: relative; text-align: center; color: #FFF; display: flex; justify-content: center; align-items: center; } .dark-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); mix-blend-mode: multiply; z-index: 1; /* Stellen Sie sicher, dass der Overlay über dem Inhalt liegt */ } .quote-container { position: relative; padding: 100px 0; display: flex; flex-direction: column; align-items: center; z-index: 2; max-width: 100%; } .header-text{ max-width: 100%; } .quote-container-absolut { position: absolute; top: 50%; /* Zentriert den oberen Rand auf 50% der Elternhöhe */ left: 50%; /* Zentriert den linken Rand auf 50% der Elternbreite */ transform: translate(-50%, -50%); /* Zentriert das Element in beide Richtungen */ padding: 100px 0; display: flex; flex-direction: column; align-items: center; z-index: 2; max-width: 90%; } .quote-section .video-background { position: relative; width: 100%; padding-top: 34.25%; overflow: hidden; /* Hide video overflow */ } .quote-section video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; height: 449.266px; } .quote-section .dark-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); mix-blend-mode: multiply; z-index: 1; } .quote-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #FFF; z-index: 2; max-width: 100%; } .quote-section .video-background { position: relative; width: 100%; padding-top: 34.25%; overflow: hidden; /* Hide video overflow */ } .quote-section video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .quote-symbol { color: #57AD47; font-family: Montserrat, sans-serif; font-size: 96px; font-style: normal; font-weight: 700; line-height: 35px; margin: 0; } .quote-text { color: #FFF; text-align: center; font-family: Montserrat; color: #FFF; text-align: center; /* V2 – zitat */ font-family: Montserrat; font-size: 40px; font-style: normal; font-weight: 400; line-height: 45px; margin-bottom: 40px; width: 708.018px; max-width: 100%; padding: 20px; } @media (max-width: 768px) { .video-background { height: 662px; } .quote-text { color: #FFF; text-align: center; font-family: Montserrat; font-size: 32px; font-style: normal; font-weight: 400; line-height: 45px; /* 112.5% */ } .quote-container-absolut .header-text{ display: flex; flex-direction: column; } } /*FEATURE SECTION*/ #feature-section { padding: 40px; } .feature-box3 { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 20px; margin-bottom: 20px; align-items: center; margin-top: 70px } .feature-box3 .feature-image-container { text-align: center; margin-bottom: 20px; padding-left: 20px; padding-right: 20px; display: flex; justify-content: flex-start; } .feature-box3 .feature-image-container img { border-radius: 0px; max-width: 100%; height: auto; } .feature-box3 .feature-content-container { margin-bottom: 20px; padding-left: 20px; padding-right: 20px; margin-bottom: 20px; padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } @media screen and (max-width: 767px){ .feature-box3 .feature-content-container { margin: 20px 0px; padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; align-items: stretch; text-align: left; } .feature-box3 .feature-image-container { padding-left: 10px; padding-right: 10px; } .reverse { flex-direction: column-reverse; } .feature-box3 { padding: 0px; } } .feature-box3 h3 { font-size: 18px; margin-bottom: 10px; } .feature-box3 p { margin-bottom: 10px; } .feature-box3 .feature-button { display: inline-block; padding: 5px 20px; border-radius: 10px; text-decoration: none; margin-right: 10px; transition: transform 0.3s; font-weight: bold; color: #ffffff !important ; background-color: #57AD47 !important; transition: transform 0.3s; } .feature-box3 .feature-button:hover { transform: scale(1.03) !important; } /*TECHWOODHOMES SECTION*/ .techwoodhome-section { text-align: center; padding: 70px; background: #EFFDEC; } .techwood-col-left{ display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .techwood-col-right{ display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .techwoodhome-img-row img{ max-width: 100%; height: auto; } .techwoodhome-section .feature-content-container { margin-bottom: 20px; padding-left: 40px; padding-right: 20px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .techwoodhome-section .video-container { max-width: 1200px; margin: 0 auto; } .techwoodhome-section .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9-Verhältnis für das Video */ overflow: hidden; } .techwoodhome-section .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 767px){ .techwoodhome-section { text-align: center; padding: 60px 10px; } .techwoodhome-section .video-container { width: 100%; margin: 0 auto; padding: 0px; } .techwoodhome-section .feature-content-container { margin: 20px 0px; padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; align-items: stretch; text-align: left; } } /*ADVANTAGE SECTION*/ .advantage-section { color: #000; text-align: center; } .advantage-row{ display: flex; flex-direction: row; } .advantage-content { text-align: left; padding: 70px 0; max-width: 585px; margin: 50px; } .overlay-image { background: url('https://qlindo.io/images/qlindo/homepage_new/q_weiß.png') center center no-repeat; position: absolute; width: 100%; height: 100%; top: 20px; left: 0; z-index: 1; } .advantage-img-container { overflow: hidden; position: relative; max-height: 1077.919px; flex-shrink: 0; } .advantage-img-outer { width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .advantage-img { object-fit: cover; width: 100%; height: 100%; } .advantage-description { color: #000; font-size: 16px; font-style: normal; font-weight: 400; line-height: 25px } .advantage-columns { display: flex; flex-direction: column; align-items: flex-start; margin: 0 auto; max-width: 800px; } .advantage-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } .advantage { margin: 20px 0px; border-bottom: 1px solid #000 } .advantage-title { color: #000; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 700; line-height: 120%; /* 21.6px */ letter-spacing: -0.54px; } .advantage-text { color: #23242A font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; /* 20.8px */ letter-spacing: -0.32px; } @media screen and (max-width: 767px) { .advantage-content { margin: 20px; } .advantage-row{ display: flex; flex-direction: column-reverse; } } /* QUOTE SECTION #header .video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #header video { width: 100%; height: 100%; object-fit: cover; } */ /*QUOTE GIVEAWAYS*/ .giveaway-section { padding: 61px; background: #BFE6B7; } .giveaway-section .giveaway-row { } .giveaway-section .giveaway-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } @media screen and (max-width: 767px) { .giveaway-section { padding: 60px 20px; background: #BFE6B7; } .giveaway-section .giveaway-col { align-items: stretch; } } /*TRADE QLINDO*/ .trade-qlindo-section { margin-bottom: 70px; } .trade-qlindo-section .video-container { max-width: 1200px; margin: 80px auto; padding: 0px; } .trade-qlindo-section .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9-Verhältnis für das Video */ overflow: hidden; } .trade-qlindo-section .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .trade-row { max-width: 1200px; } .trade-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } @media screen and (max-width: 767px) { .trade-col { align-items: stretch; border-right: none !important; } } /*BUTTON*/ .custom-button { margin:20px 0; background-color: #57ad47; border-radius: 68px; font-family: Montserrat; font-weight: 600; font-size: 14px; line-height: 20px; text-align: center; color: #000 !important; border: 1px solid #000; padding: 12px 20px 12px 21px; text-decoration: none; } .custom-button-transparent { margin: 20px 0px; background-color: transparent; border: 1px solid #000; border-radius: 68px; font-family: Montserrat; font-weight: 600; font-size: 14px; line-height: 20px; text-align: center; color: #000; padding: 12px 20px 12px 21px; text-decoration: none; } .custom-button:hover { color: black; } .custom-button-transparent:hover { color: black; } /*SOCIAL AND FOOTER LINKS*/ .stay-tuned-section { background: #BFE6B7; padding: 70px 10%; } .stay-tuned-section .container { display: flex; align-items: center; justify-content: center; } .stay-tuned-section .section-content { display: flex; flex-direction: column; gap: 25px; } .section-description{ color: #000; text-align: center; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 400; line-height: 25px; /* 156.25% */ } /* Stille für das Form */ .social-row{ display: flex; justify-content: center; margin-top: 40px; } .sib-input input:focus { outline: none; border: 1px solid transparent; /* Ändern Sie die Border-Farbe auf transparent */ box-shadow: none; /* Entfernen Sie den Schatten beim Fokus */ } /* Stil für die Icon-Box */ .icon-box { text-align: center; margin-bottom: 20px; } /* Stil für den runden grünen Hintergrund */ .icon-circle { background-color: #57AD47; border-radius: 50%; width: 103.039px; height: 103.039px; margin: 0 auto; position: relative; /* Position relativ setzen */ } .icon-image { position: absolute; /* Position absolut setzen */ top: 50%; /* Von oben 50% entfernt, um die Mitte zu zentrieren */ left: 50%; /* Von links 50% entfernt, um die Mitte zu zentrieren */ transform: translate(-50%, -50%); /* Zur endgültigen Zentrierung um 50% des eigenen Breiten- und Höhenwerts verschieben */ width: 57px; /* Breite des Bildes */ height: 48px; /* Höhe des Bildes */ } /* Stil für den Namen des Socials */ .icon-label { color: #000; text-align: center; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 700; line-height: 30px; /* 166.667% */ margin-top: 10px; /* Abstand zwischen dem Kreis und dem Text */ text-decoration: none; } /* Stil für die Trennlinien zwischen den Icon-Boxen (nicht für die letzte) */ .icon-box:not(:last-child) { border-right: 1px solid #000; } footer { background-color: #57AD47; width: 100%; } .footer-container { max-width: 1200px; margin: 0 auto -15px; padding: 51px; } .footer-container h5 { color: #000; font-size: 18px; font-style: normal; font-weight: 700; line-height: 30px; /* 214.286% */ text-decoration-line: none; } .footer-links { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; } .footer-link { color: #000; text-align: left; font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 500; line-height: 30px; /* 214.286% */ text-decoration-line: none; } .footer-link:hover { color: #000; text-decoration-line: underline; } @media screen and (max-width: 767px){ .social-col { border-right: none !important; } .footer-links { } } .widgetInput { border: none; border-bottom: 2px solid black; /* Adjust color and thickness as needed */ background-color: transparent; padding: 5px; box-sizing: border-box; } .widgetInput:disabled { border: none; border-bottom: 2px solid black; /* Adjust color and thickness as needed */ background-color: transparent; padding: 5px; box-sizing: border-box; }