/*Geral*/
* { box-sizing: border-box; }
html { height: 100%; width: 100%; overflow-x: hidden; margin: 0; }
body {
background-color: #FEFCF0; display: flex; flex-direction: column;
text-align: center; justify-content: center; align-items: center;
font-family: Arial, sans-serif;
margin: 0; padding: 0; line-height: 1.6;
}
.logout_header{
display: flex; justify-content: center; align-items: center;
}
/*Notification Dot*/
.mail-icon { position: relative; display: inline-block;}
.notification-dot { position: absolute; background-color: red; z-index: 10; }
/* Hero Text*/
.hero-text{ font-family: 'Neue Haas Grotesk Display Pro', sans-serif; }
.tell-us{ margin-bottom: 0px; margin-top: 30px; }
.contact{ position: relative; }
.form-message {
display: none; background-color: #FFFFFF;
border-radius: 16px;
width: 90%; max-width: 481px; height: 86px;
padding: 14px 12px; border-radius: 5px;
margin: auto; text-align: center;
position: absolute;
top: 86%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
word-wrap: normal;
transition: opacity 1s ease-in-out;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
z-index: 50;
}
.form-message.success {
flex-direction: row;
display: flex;
gap: 10px;
}
.form-message.error {
flex-direction: row;
display: flex;
gap: 10px;
}
.form-message-bold-text{
font-size: 14px;
color: #111827;
text-align: left;
display: flex;
word-wrap: break-word;
white-space: normal;
max-width: 100%;
}
.form-message-small-text{
font-size: 14px;
color: #85888A;
text-align: left;
display: flex;
word-wrap: break-word;
white-space: normal;
max-width: 100%;
}
.form-message-image-container{ min-width: 32px; width: 32px; height: auto; }
.form-message-image-container.error{
background: url(../../homepage/images/Error_illustration.svg);
background-repeat: no-repeat;
background-position: top;
background-size: contain;
}
.form-message-image-container.success{
background: url(../../homepage/images/Success_illustration.svg);
background-repeat: no-repeat;
background-position: top;
background-size: contain;
}
/* Styles for input and textarea placeholders when they have the error class */
input.error::placeholder,
textarea.error::placeholder {
color: red;
}
/* Styles for input and textarea placeholders across different browsers */
input.error::-webkit-input-placeholder { /* For Chrome and Safari */
color: red;
}
input.error:-moz-placeholder { /* For Firefox 18- */
color: red;
}
input.error::-moz-placeholder { /* For Firefox 19+ */
color: red;
}
input.error:-ms-input-placeholder { /* For Internet Explorer 10+ */
color: red;
}
textarea.error::-webkit-input-placeholder { /* For Chrome and Safari */
color: red;
}
textarea.error:-moz-placeholder { /* For Firefox 18- */
color: red;
}
textarea.error::-moz-placeholder { /* For Firefox 19+ */
color: red;
}
textarea.error:-ms-input-placeholder { /* For Internet Explorer 10+ */
color: red;
}
/* General styling for elements with the error class */
.error {
color: red; /* Red color for any element with the error class */
}
.no-underline{
text-decoration: none;
}
/* Styles for very small screens (<576px) */
@media (max-width: 576px) {
body{
max-width: 100vw;
padding: 8px;
font-size: 16px;
overflow-x: hidden
}
.logout_header{
max-width: 100vw;
height: 60px;
padding: 0px;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 0;
overflow: hidden;
}
.head_container{
height: 100%;
padding: 0px;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
gap: 4px;
}
.logout_logo{
height: 100%;
width: 75%;
padding: 0px;
display: flex;
align-items: center;
overflow: hidden;
}
.logout_logo img{
max-height: 65%;
height: auto;
width: auto;
object-fit: contain;
}
.cta .btn {
background-color: #273048;
color: #fff;
border-radius: 20px;
font-size: 12px;
line-height: 1;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
}
/* ---- Main and its children ---- */
main{
max-width: 100vw;
flex: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* ---- how it works ---- */
.how-it-works{
padding: 20px 20px;
background-color: rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 20px; /*Change back to: 100px on PROJECTS UPDATE*/
}
.how-it-works h2 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
margin-bottom: 20px;
}
/* ---- cta-section ---- */
.cta-section{
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
text-align: center;
margin: 0 auto;
border-radius: 20px;
text-align: left;
background-color: rgba(0,0,0,0);;
background-image: url(../images/breathing_fire.jpg);
background-size: cover; /* Cover the entire area */
background-repeat: no-repeat; /* No repeat */
background-position: center; /* Centered */
overflow-x: hidden;
height: 200px;
margin-left: 5px;
margin-right: 5px;
}
.background_text{
display:flex;
flex-direction: row;
align-items: flex-end;
max-height: 80px;
justify-content: left;
margin-top: 160px;
margin-left: 230px;
margin-right: auto;
}
.sign_free{
padding-top: 10px;
padding-right: 10px;
height: 60px;
width: 20%;
}
.sign_free_btn{
background-color: white;
border-radius: 25px;
height: 37px;
width: 121px;
max-width: 162px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 13px;
font-weight: 480;
color: black;
text-align: center;
margin-bottom: 2px;
cursor: pointer;
}
/* ---- Features ----*/
.features{
padding: 0px 20px;
background-color: #fff;
justify-content: center;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
min-width: 100vw;
}
.features h5{
font-family: "Kode Mono", monospace;
font-size: 14px;
font-weight: 900;
color: grey;
margin:0 auto;
text-align: left;
}
.features h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
margin-top: 10px;
text-align: left;
line-height: 1;
}
.feature-details{
margin:0 auto;
margin-top: 50px;
}
.feature-details p{
text-align: left;
}
.text-grid-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
width: 100%;
margin: 10px auto;
}
.text-grid-col-1{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-1 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: #0c1423CC;
text-align: left;
}
.text-grid-col-2{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-2 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: #0c1423CC;
text-align: left;
}
.get_in_touch{
margin: 10px auto;
text-align: center;
}
.get_in_touch_btn{
background-color: rgba(0,0,0,0);
padding: 10px 20px;
border-radius: 20px;
border: 2px solid rgb(128, 128, 128, 0.4);
text-decoration: none;
cursor: pointer;
}
/* ---- Clients ---- */
.clients{
background-color: rgba(0, 0, 0, 0);
text-align: center;
padding: 0px 0px;
width: 100%;
margin: 0 auto;
margin-top: 30px;
}
.clients h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
text-align: center;
line-height: 1;
}
.clients_container{
display: flex;
justify-content: center; /* Align images in the center horizontally */
align-items: center; /* Vertically centers the logos (if needed) */
flex-wrap: wrap; /* Allows logos to wrap to the next line if the screen is too narrow */
gap: 20px;
margin-top: 15px;
}
.client-logo-container {
display: flex;
justify-content: center;
align-items: center;
max-width: 150px; /* Adjust width based on logo size */
max-height: 150px; /* Adjust height based on logo size */
}
.client-logo-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensures the logo fits inside the container without stretching */
}
/*---- Contact Form ----*/
.contact{
max-width: 100vw;
display: flex;
flex-direction: column;
padding: 0px 20px;
background-color:rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 40px;
overflow-x: hidden;
}
.contact-grid{
margin: 0px auto;
}
.contact-methods-grid h2, .email h3, .phone h3, .social h3{
font-size: 18px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}
.contact-methods-grid h2{
font-size: 25px;
align-self: center;
font-weight: 500;
}
.contact-methods-grid p, .email p , .phone p, .social p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.8);
text-decoration: underline;
text-decoration-color: black;
}
.contact-methods-grid p{
text-decoration: none;
}
.contact-form-grid{
padding: 15px;
}
.contact-form-field {
text-align: left;
}
.contact-form-field p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.contact-form-field input, .contact-form-field select{
margin: 0 !important;
}
.question-input p:not(.choose){
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin: 0;
}
.contact-form input, .contact-form textarea{
width: 100%;
margin: 10px 0;
padding: 10px;
background-color: rgb(0, 0, 0, 0);
border: none;
border-bottom: 2px solid #000000;
}
.contact-form input:focus, .contact-form textarea:focus ,.question-options:focus{
border: none;
outline: none;
border-bottom: 2px solid #000000;
}
.question-options{
padding: 10px; /* Add padding for better appearance */
border: none;
border-bottom: 2px solid #000000;
background-color: rgb(0, 0, 0, 0); /* Background color */
color: #333; /* Text color */
font-size: 16px; /* Font size */
appearance: none; /* Remove default arrow */
background-image: url('../images/dropdown_arrow_image.png'); /* Custom arrow */
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.textarea-div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16;
color: rgb(0, 0, 0, 0.5);
}
.textarea-div textarea{
resize: none;
}
.contact-form button {
padding: 10px 20px;
background-color: #273048;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
margin: 5px auto;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18;
height: 46px;
width: 145px;
margin-top: 10px;
}
footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
max-width: 1360px;
margin: 0 auto;
border-top: 2px solid #000000;
text-align: left;
background-color:rgb(0, 0, 0, 0);
color: #0C1423;
padding: 10px 0px;
font-size: 14px;
font-weight: 450;
}
.legal-info{
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
gap: 20px;
line-height: 1;
justify-content: center;
}
.legal-info a{
font-size: 12px;
line-height: 0.5;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}
.legal-info a:hover {
color: #001021; /* Change text color on hover */
text-decoration: underline; /* Underline the link on hover */
background-color: rgba(0, 123, 255, 0.1); /* Light background color on hover */
transform: scale(1.05); /* Slightly enlarge the link on hover */
}
.aside__nav-link{
text-decoration: none;
color: #000;
cursor: pointer;
}
.submit-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
}
/* Styles for small screens (≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
body{
max-width: 100vw;
font-size: 16px;
overflow-x: hidden
}
.logout_header{
max-width: 100vw;
height: 60px;
padding: 0px;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 0;
overflow: hidden;
}
.head_container{
height: 100%;
padding: 0px;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
gap: 160px;
}
.logout_logo{
height: 100%;
width: 75%;
padding: 0px;
display: flex;
align-items: center;
overflow: hidden;
}
.logout_logo img{
max-height: 65%;
height: auto;
width: auto;
object-fit: contain;
}
.header_btn_div{
}
.cta .btn {
background-color: #273048;
color: #fff;
border-radius: 20px;
font-size: 12px;
line-height: 1;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
width: 85px;
}
/* ---- Main and its children ---- */
main{
max-width: 100vw;
flex: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* ---- how it works ---- */
.how-it-works{
padding: 20px 20px;
background-color: rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 20px; /*Change back to: 100px on PROJECTS UPDATE*/
}
.how-it-works h2 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
margin-bottom: 20px;
}
/* ---- cta-section ---- */
.cta-section{
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
text-align: center;
margin: 0 auto;
border-radius: 20px;
text-align: left;
background-color: rgba(0,0,0,0);;
background-image: url(../images/breathing_fire.jpg);
background-size: cover; /* Cover the entire area */
background-repeat: no-repeat; /* No repeat */
background-position: center; /* Centered */
overflow-x: hidden;
height: 200px;
margin-left: 5px;
margin-right: 5px;
}
.background_text{
display:flex;
flex-direction: row;
align-items: flex-end;
max-height: 80px;
justify-content: left;
margin-top: 160px;
margin-left: 360px;
margin-right: auto;
}
.sign_free{
padding-top: 10px;
padding-right: 10px;
height: 60px;
width: 20%;
}
.sign_free_btn{
background-color: white;
border-radius: 25px;
height: 37px;
width: 121px;
max-width: 162px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 13px;
font-weight: 480;
color: black;
text-align: center;
margin-bottom: 2px;
cursor: pointer;
}
/* ---- Features ----*/
.features{
padding: 0px 20px;
background-color: #fff;
justify-content: center;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
min-width: 100vw;
}
.features h5{
font-family: "Kode Mono", monospace;
font-size: 14px;
font-weight: 900;
color: grey;
margin:0 auto;
text-align: left;
}
.features h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
margin-top: 10px;
text-align: left;
line-height: 1;
}
.feature-details{
margin:0 auto;
margin-top: 50px;
}
.feature-details p{
text-align: left;
}
.text-grid-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
width: 100%;
margin: 10px auto;
margin-top: 10px;
margin-bottom: 0px;
}
.text-grid-col-1{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-1 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: #0c1423CC;
text-align: left;
}
.text-grid-col-2{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-2 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: #0c1423CC;
text-align: left;
}
.get_in_touch{
margin: 10px auto;
margin-bottom: 0px;
text-align: center;
}
.get_in_touch_btn{
background-color: rgba(0,0,0,0);
padding: 10px 20px;
border-radius: 20px;
border: 2px solid rgb(128, 128, 128, 0.4);
text-decoration: none;
cursor: pointer;
}
/* ---- Clients ---- */
.clients{
background-color: rgba(0, 0, 0, 0);
text-align: center;
padding: 0px 0px;
width: 100%;
margin: 0 auto;
margin-top: 30px;
}
.clients h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
text-align: center;
line-height: 1;
}
.clients_container{
display: flex;
justify-content: center; /* Align images in the center horizontally */
align-items: center; /* Vertically centers the logos (if needed) */
flex-wrap: wrap; /* Allows logos to wrap to the next line if the screen is too narrow */
gap: 20px;
margin-top: 15px;
}
.client-logo-container {
display: flex;
justify-content: center;
align-items: center;
max-width: 150px; /* Adjust width based on logo size */
max-height: 150px; /* Adjust height based on logo size */
}
.client-logo-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensures the logo fits inside the container without stretching */
}
/*---- Contact Form ----*/
.contact{
max-width: 100vw;
display: flex;
flex-direction: column;
padding: 0px 20px;
background-color:rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 40px;
overflow-x: hidden;
}
.contact-grid{
margin: 0px auto;
}
.contact-methods-grid h2, .email h3, .phone h3, .social h3{
font-size: 18px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}
.contact-methods-grid h2{
font-size: 25px;
align-self: center;
font-weight: 500;
}
.contact-methods-grid p, .email p , .phone p, .social p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.8);
text-decoration: underline;
text-decoration-color: black;
}
.contact-methods-grid p{
text-decoration: none;
}
.contact-form-grid{
padding: 15px;
}
.contact-form-field {
text-align: left;
}
.contact-form-field p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.contact-form-field input, .contact-form-field select{
margin: 0 !important;
}
.question-input p:not(.choose){
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin: 0;
}
.contact-form input, .contact-form textarea{
width: 100%;
margin: 10px 0;
padding: 10px;
background-color: rgb(0, 0, 0, 0);
border: none;
border-bottom: 2px solid #000000;
}
.contact-form input:focus, .contact-form textarea:focus ,.question-options:focus{
border: none;
outline: none;
border-bottom: 2px solid #000000;
}
.question-options{
padding: 10px; /* Add padding for better appearance */
border: none;
border-bottom: 2px solid #000000;
background-color: rgb(0, 0, 0, 0); /* Background color */
color: #333; /* Text color */
font-size: 16px; /* Font size */
appearance: none; /* Remove default arrow */
background-image: url('../images/dropdown_arrow_image.png'); /* Custom arrow */
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.textarea-div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16;
color: rgb(0, 0, 0, 0.5);
}
.textarea-div textarea{
resize: none;
}
.contact-form button {
padding: 10px 20px;
background-color: #273048;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
margin: 5px auto;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18;
height: 46px;
width: 145px;
margin-top: 10px;
}
.form-message {
margin: 30px auto;
margin-bottom: 0px;
}
/*---- Footer ----*/
footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
max-width: 1360px;
margin: 0 auto;
border-top: 2px solid #000000;
text-align: left;
background-color:rgb(0, 0, 0, 0);
color: #0C1423;
padding: 10px 0px;
font-size: 14px;
font-weight: 450;
}
.legal-info{
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
gap: 18px;
line-height: 1;
justify-content: center;
}
.legal-info a{
font-size: 12px;
line-height: 0.5;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}
.legal-info a:hover {
color: #001021; /* Change text color on hover */
text-decoration: underline; /* Underline the link on hover */
background-color: rgba(0, 123, 255, 0.1); /* Light background color on hover */
transform: scale(1.05); /* Slightly enlarge the link on hover */
}
.aside__nav-link{
text-decoration: none;
color: #000;
cursor: pointer;
}
.submit-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
}
/* Styles for medium screens (≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
body{
max-width: 100vw;
font-size: 16px;
overflow-x: hidden
}
.logout_header{
max-width: 100vw;
height: 60px;
padding: 0px;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 0;
overflow: hidden;
}
.head_container{
height: 100%;
padding: 0px;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
gap: 85px;
}
.logout_logo{
height: 100%;
width: 75%;
padding: 0px;
display: flex;
align-items: center;
overflow: hidden;
}
.logout_logo img{
max-height: 65%;
height: auto;
width: auto;
object-fit: contain;
}
.header_btn_div{
}
nav ul {
background-color: rgba(0, 0, 0, 0);
list-style: none;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row;
gap: 20px;
}
nav li {
background-color: rgba(0, 0, 0, 0);
margin: 0px;
}
nav a {
text-decoration: none;
color: #000;
cursor: pointer;
font-size: 12px;
}
.cta .btn {
background-color: #273048;
color: #fff;
border-radius: 20px;
font-size: 12px;
line-height: 1;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
width: 85px;
}
/* ---- Main and its children ---- */
main{
max-width: 100vw;
flex: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* ---- how it works ---- */
.how-it-works{
padding: 20px 20px;
background-color: rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 20px; /*Change back to: 100px on PROJECTS UPDATE*/
}
.how-it-works h2 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
margin-bottom: 20px;
}
/* ---- cta-section ---- */
.cta-section{
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
text-align: center;
margin: 0 auto;
border-radius: 20px;
text-align: left;
background-color: rgba(0,0,0,0);;
background-image: url(../images/breathing_fire.jpg);
background-size: cover; /* Cover the entire area */
background-repeat: no-repeat; /* No repeat */
background-position: center; /* Centered */
overflow-x: hidden;
height: 327px;
margin-left: 5px;
margin-right: 5px;
}
.background_text{
display:flex;
flex-direction: row;
align-items: flex-end;
max-height: 80px;
justify-content: left;
margin-top: 160px;
margin-left: 540px;
margin-right: auto;
}
.sign_free{
padding-top: 10px;
padding-right: 10px;
height: 60px;
width: 20%;
}
.sign_free_btn{
background-color: white;
border-radius: 25px;
height: 37px;
width: 121px;
max-width: 162px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 13px;
font-weight: 480;
color: black;
text-align: center;
margin-bottom: 2px;
cursor: pointer;
}
/* ---- Features ----*/
.features{
padding: 0px 20px;
background-color: #fff;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
min-width: 100vw;
}
.features h5{
font-family: "Kode Mono", monospace;
font-size: 14px;
font-weight: 900;
color: grey;
margin:0 auto;
text-align: left;
}
.features h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
margin-top: 10px;
text-align: center;
line-height: 1;
}
.feature-details{
margin:0 auto;
margin-top: 30px;
}
.feature-details p{
text-align: left;
}
.text-grid-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
width: 100%;
margin: 10px auto;
margin-top: 10px;
margin-bottom: 0px;
}
.text-grid-col-1{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-1 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: #0c1423CC;
text-align: left;
}
.text-grid-col-2{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-2 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: #0c1423CC;
text-align: left;
}
.get_in_touch{
margin: 10px auto;
margin-bottom: 5px;
text-align: center;
}
.get_in_touch_btn{
background-color: rgba(0,0,0,0);
padding: 10px 20px;
border-radius: 20px;
border: 2px solid rgb(128, 128, 128, 0.4);
text-decoration: none;
cursor: pointer;
}
/* ---- Clients ---- */
.clients{
background-color: rgba(0, 0, 0, 0);
text-align: center;
padding: 0px 0px;
width: 100%;
margin: 0 auto;
margin-top: 30px;
}
.clients h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 25px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
text-align: center;
line-height: 1;
}
.clients_container{
display: flex;
justify-content: center; /* Align images in the center horizontally */
align-items: center; /* Vertically centers the logos (if needed) */
flex-wrap: wrap; /* Allows logos to wrap to the next line if the screen is too narrow */
gap: 20px;
margin-top: 15px;
}
.client-logo-container {
display: flex;
justify-content: center;
align-items: center;
max-width: 150px; /* Adjust width based on logo size */
max-height: 150px; /* Adjust height based on logo size */
}
.client-logo-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensures the logo fits inside the container without stretching */
}
/*---- Contact Form ----*/
.contact{
max-width: 100vw;
display: flex;
flex-direction: column;
padding: 0px 20px;
background-color:rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 40px;
overflow-x: hidden;
}
.contact-grid{
margin: 0px auto;
}
.contact-methods-grid h2, .email h3, .phone h3, .social h3{
font-size: 22px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}
.email h3, .phone h3, .social h3 {
margin-top: 20px;
font-weight: 500;
}
.contact-methods-grid h2{
font-size: 25px;
align-self: center;
}
.contact-methods-grid p, .email p , .phone p, .social p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
color: rgb(0, 0, 0, 0.8);
text-decoration: underline;
text-decoration-color: black;
}
.contact-methods-grid p{
text-decoration: none;
padding-right: 50px;
}
.contact-form-grid{
padding: 15px;
}
.contact-form-field {
text-align: left;
}
.contact-form-field p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.contact-form-field input, .contact-form-field select{
margin: 0 !important;
}
.question-input p:not(.choose){
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin: 0;
}
.contact-form input, .contact-form textarea{
width: 100%;
margin: 10px 0;
padding: 10px;
background-color: rgb(0, 0, 0, 0);
border: none;
border-bottom: 2px solid #000000;
}
.contact-form input:focus, .contact-form textarea:focus ,.question-options:focus{
border: none;
outline: none;
border-bottom: 2px solid #000000;
}
.question-options{
padding: 10px; /* Add padding for better appearance */
border: none;
border-bottom: 2px solid #000000;
background-color: rgb(0, 0, 0, 0); /* Background color */
color: #333; /* Text color */
font-size: 16px; /* Font size */
appearance: none; /* Remove default arrow */
background-image: url('../images/dropdown_arrow_image.png'); /* Custom arrow */
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.textarea-div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16;
color: rgb(0, 0, 0, 0.5);
}
.textarea-div textarea{
resize: none;
}
.contact-form button {
padding: 10px 20px;
background-color: #273048;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
margin: 5px auto;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18;
height: 46px;
width: 145px;
margin-top: 30px;
}
.form-message {
margin: 30px auto;
margin-bottom: 0px;
}
/*---- Footer ----*/
footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
max-width: 1360px;
margin: 0 auto;
border-top: 2px solid #000000;
text-align: left;
background-color:rgb(0, 0, 0, 0);
color: #0C1423;
padding: 10px 0px;
font-size: 14px;
font-weight: 450;
}
.legal-info{
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
gap: 30px;
justify-content: center;
}
.legal-info a{
font-size: 12px;
line-height: 0.5;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}
.legal-info a:hover {
color: #001021; /* Change text color on hover */
text-decoration: underline; /* Underline the link on hover */
background-color: rgba(0, 123, 255, 0.1); /* Light background color on hover */
transform: scale(1.05); /* Slightly enlarge the link on hover */
}
.aside__nav-link{
text-decoration: none;
color: #000;
cursor: pointer;
}
.submit-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
}
/* Styles for large screens (≥992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
body{
max-width: 100vw;
font-size: 16px;
overflow-x: hidden
}
.logout_header{
width: 100%;
height: 60px;
padding: 0px;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 0;
overflow: hidden;
}
.head_container{
height: 100%;
padding: 0px;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
gap: 20px;
}
.logout_logo{
height: 100%;
width: 75%;
padding: 0px;
display: flex;
align-items: center;
overflow: hidden;
}
.logout_logo img{
max-height: 65%;
height: auto;
width: auto;
object-fit: contain;
}
.header_btn_div{
}
nav ul {
background-color: rgba(0, 0, 0, 0);
list-style: none;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row;
gap: 20px;
}
nav li {
background-color: rgba(0, 0, 0, 0);
}
nav a {
text-decoration: none;
color: #000;
cursor: pointer;
font-size: 16px;
}
.cta .btn {
background-color: #273048;
color: #fff;
border-radius: 20px;
font-size: 16px;
line-height: 1;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
width: 110px;
}
/* ---- Main and its Children ---- */
main{
max-width: 100%;
flex: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* ---- Hero Section ----*/
.hero {
background-color: rgba(0, 0, 0, 0);
text-align: left;
padding: 0px 0px;
width: 100%;
margin: 0 auto;
margin-top: 50px; /* remove this on PROJECTS UPDATE*/
}
.hero-content{
background-color: rgba(0, 0, 0, 0);
text-align: left;
height: 250px;
margin-top: 10px;
}
.hero-content h1 {
background-color: rgba(0, 0, 0, 0);
font-size: 72px;
font-weight: 450;
text-align: left;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
height: 180px;
margin: 0 auto;
line-height: 1;
}
.hero-content a {
padding: 10px 20px;
background-color: #273048;
color: #fff;
text-decoration: none;
border-radius: 20px;
cursor: pointer;
margin-top: 10px;
}
.image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
gap: 0px;
justify-content: center;
max-width: 100%;
margin: 70px auto;
}
.image-container {
position: relative;
overflow: hidden;
margin: 0; /* Remove any margins */
padding: 0; /* Remove any paddings */
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container.large {
grid-column: 1 / 2;
grid-row: 1 / 3;
height: auto;
}
.image-container.small {
grid-column: 2 / 3;
height: auto;
}
/* ---- Designed for All Section ----*/
.designed-for-all {
padding: 50px 20px;
text-align: center;
justify-content: center;
width: 100%;
max-width: 100%;
margin: 0 auto;
margin-top: 50px;
}
.designed-for-all h2 {
margin-bottom: 50px;
font-size: 60px;
font-family:'Neue Haas Grotesk Display Pro', sans-serif;
font-weight: 450;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 100%;
max-width: 1336px;
margin: 0 auto;
}
.col-1{
display: grid;
grid-template-rows: auto ;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.action img, .guy_singing img, .cheerleader img, .orange_girl img{
position: absolute;
bottom: 0;
right: 0;
}
.orange_girl img{
padding-right: 38px;
}
.col-2{
display: grid;
grid-template-rows: auto;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.col-3{
display: grid;
grid-template-rows: auto;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.grid-item {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position:relative;
}
.grid-item img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
/* ---- How it works section ----*/
.how-it-works {
padding: 50px 20px;
background-color: rgba(0, 0, 0, 0);
text-align: center;
width: 100%;
max-width: 100%;
margin: 0 auto;
margin-top: 20px; /*Change back to: 100px on PROJECTS UPDATE*/
}
.how-it-works h2 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 60px;
font-weight: 450;
}
.steps {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center; /* remove this on PROJECTS UPDATE*/
align-items: center; /* remove this on PROJECTS UPDATE*/
margin-top: 30px;
gap: 10px;
}
.step {
margin-bottom: 0px;
margin-left: 0px; /* remove this on PROJECTS UPDATE*/
margin-right: 0px; /* remove this on PROJECTS UPDATE*/
max-width: 370px;
}
.step h3 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 28px;
}
.step p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
}
.arrow{
margin: 0px;
padding: 0px;
padding-bottom: 100px;/* remove this on PROJECTS UPDATE*/
}
/* ---- CTA Section ---- */
.cta-section {
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
/* text-align: center; */
margin: 0 auto;
border-radius: 20px;
text-align: left;
background-color: rgba(0, 0, 0, 0);
background-image: url(../images/breathing_fire.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow-x: hidden;
height: 480px;
margin-left: 5px;
margin-right: 5px;
}
.cta-section img{
object-fit: cover;
}
.background_text{
display: flex;
flex-direction: row;
align-items: flex-end;
max-height: 80px;
justify-content: left;
margin-top: 140px;
margin-left: 736px;
margin-bottom: 16px;
margin-right: auto;
}
.sign_free{
padding-top: 0px;
padding-right: 10px;
height: 60px;
width: 20%;
}
.sign_free_btn{
background-color: white;
border-radius: 35px;
height: 60px;
width: 194px;
max-width: 175px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 19px;
font-weight: 480;
color: black;
text-align: center;
margin-bottom: 2px;
cursor: pointer;
}
/* ---- Features ---- */
.features {
padding: 50px 20px;
background-color: #fff;
justify-content: center;
min-width: 100vw;
/*max-width: 1360px;*/
margin: 0 auto;
margin-top: 200px;
}
.features h5{
font-family: "Kode Mono", monospace;
font-size: 14px;
font-weight: 900;
color: grey;
margin:0 auto;
max-width: 550px;
text-align: left;
}
.features h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 60px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
margin-top: 10px;
max-width: 550px;
text-align: left;
line-height: 1;
}
.feature-details{
max-width: 550px;
margin:0 auto;
margin-top: 50px;
}
.feature-details p{
font-size: 19px;
text-align: left;
}
.text-grid-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
width: 100%;
max-width: 560px;
margin: 0 auto;
margin-top: 10px;
}
.text-grid-col-1{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-1 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
color: #0c1423CC;
text-align: left;
}
.text-grid-col-2{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-2 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
color: #0c1423CC;
text-align: left;
}
.get_in_touch{
max-width: 550px;
margin:0 auto;
margin-top: 60px;
text-align: center;
}
.get_in_touch_btn{
background-color: rgba(0,0,0,0);
padding: 10px 20px;
border-radius: 20px;
border: 2px solid rgb(128, 128, 128, 0.4);
text-decoration: none;
cursor: pointer;
}
/* ---- Clients ----*/
.clients{
background-color: rgba(0, 0, 0, 0);
text-align: center;
padding: 0px 0px;
width: 100%;
margin: 0 auto;
margin-top: 50px;
}
.clients h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 35px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
text-align: center;
line-height: 1;
}
.clients_container{
display: flex;
justify-content: center; /* Align images in the center horizontally */
align-items: center; /* Vertically centers the logos (if needed) */
flex-wrap: wrap; /* Allows logos to wrap to the next line if the screen is too narrow */
gap: 20px;
margin-top: 15px;
}
.client-logo-container {
display: flex;
justify-content: center;
align-items: center;
max-width: 150px; /* Adjust width based on logo size */
max-height: 150px; /* Adjust height based on logo size */
}
.client-logo-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensures the logo fits inside the container without stretching */
}
/*---- Contact Form ----*/
.contact{
max-width: 100vw;
display: flex;
flex-direction: column;
padding: 0px 20px;
background-color:rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 40px;
overflow-x: hidden;
}
.contact-grid{
margin: 0px auto;
}
.contact-methods-grid h2, .email h3, .phone h3, .social h3{
font-size: 28px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}
.email h3, .phone h3, .social h3 {
font-weight: 500;
margin-top: 20px;
}
.contact-methods-grid h2{
font-size: 35px;
align-self: center;
}
.contact-methods-grid p, .email p , .phone p, .social p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.8);
text-decoration: underline;
text-decoration-color: black;
}
.contact-methods-grid p{
text-decoration: none;
padding-right: 50px;
}
.contact-form-grid{
padding: 15px;
}
.contact-form-field {
text-align: left;
}
.contact-form-field p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 22px;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.contact-form-field input, .contact-form-field select{
margin: 0 !important;
}
.question-input p:not(.choose){
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin: 0;
}
.contact-form input, .contact-form textarea{
width: 100%;
margin: 10px 0;
padding: 10px;
background-color: rgb(0, 0, 0, 0);
border: none;
border-bottom: 2px solid #000000;
}
.contact-form input:focus, .contact-form textarea:focus ,.question-options:focus{
border: none;
outline: none;
border-bottom: 2px solid #000000;
}
.question-options{
padding: 10px; /* Add padding for better appearance */
border: none;
border-bottom: 2px solid #000000;
background-color: rgb(0, 0, 0, 0); /* Background color */
color: #333; /* Text color */
font-size: 16px; /* Font size */
appearance: none; /* Remove default arrow */
background-image: url('../images/dropdown_arrow_image.png'); /* Custom arrow */
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.textarea-div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16;
color: rgb(0, 0, 0, 0.5);
}
.textarea-div textarea{
resize: none;
}
.contact-form button {
padding: 10px 20px;
background-color: #273048;
color: #fff;
border: none;
border-radius: 50px;
cursor: pointer;
margin: 5px auto;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 19px;
height: 60px;
width: 160px;
margin-top: 30px;
}
.form-message {
margin: 30px auto;
margin-bottom: 0px;
}
/*---- Footer ----*/
footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
max-width: 1360px;
margin: 0 auto;
border-top: 2px solid #000000;
text-align: left;
background-color:rgb(0, 0, 0, 0);
color: #0C1423;
padding: 10px 0px;
font-size: 14px;
font-weight: 450;
}
.legal-info{
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
gap: 30px;
justify-content: center;
}
.legal-info a{
font-size: 12px;
line-height: 0.5;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}
.legal-info a:hover {
color: #001021; /* Change text color on hover */
text-decoration: underline; /* Underline the link on hover */
background-color: rgba(0, 123, 255, 0.1); /* Light background color on hover */
transform: scale(1.05); /* Slightly enlarge the link on hover */
}
.aside__nav-link{
text-decoration: none;
color: #000;
cursor: pointer;
}
.submit-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
}
/* Styles for extra large screens (≥1200px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
.arrow-tweak{
transform: translateY(265px) translateX(-760px);
}
.logout_header {
Background-color:rgba(0, 0, 0, 0);
padding-top: 20px;
max-width: 100%; /* Limit width if necessary */
width: 100%;
max-height: 40px;
margin: 0 auto; /* Center the container horizontally */
/*Nullify BootStrap*/
box-sizing: content-box;
}
.logout_header .head_container {
background-color: rgba(0, 0, 0, 0);
width: 100%; /* Use full width */
max-width: 100%; /* Limit width if necessary */
max-height: 40px;
margin: 0 auto; /* Center the container horizontally */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
/*Nullify BootStrap*/
box-sizing: content-box;
gap: 50px;
}
.logout_logo {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1;
}
.logout_logo img {
height: 40px;
margin-right: 10px;
}
nav ul {
background-color: rgba(0, 0, 0, 0);
list-style: none;
margin: 0px;
padding: 0;
display: flex;
text-align: center;
align-items: center;
}
nav li {
background-color: rgba(0, 0, 0, 0);
}
nav a {
text-decoration: none;
color: #000;
cursor: pointer;
}
.cta .btn {
background-color: #273048;
color: #fff;
padding: 10px 20px;
border-radius: 30px;
text-decoration: none;
font-size: 20px;
}
/*************************************************************************************************/
/*Hero section*/
.hero {
background-color: rgba(0, 0, 0, 0);
text-align: left;
padding: 0px 0px;
width: 100%;
margin: 0 auto;
margin-top: 200px; /* remove this on PROJECTS UPDATE*/
padding-left: 75px;
padding-right: 75px;
}
.hero-content{
background-color: rgba(0, 0, 0, 0);
text-align: left;
height: 250px;
margin-top: -175px;
}
.hero-content h1 {
background-color: rgba(0, 0, 0, 0);
font-size: 50px;
font-weight: 450;
text-align: left;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
height: 180px;
margin: 0 auto;
line-height: 1;
}
.hero-content a {
padding: 10px 20px;
background-color: #273048;
color: #fff;
text-decoration: none;
border-radius: 20px;
cursor: pointer;
margin-top: 0px;
}
.image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
gap: 0px;
justify-content: center;
margin: 0 auto;
margin-top: 50px;
}
.image-container {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container.large {
grid-column: 1 / 2;
grid-row: 1 / 3;
height: auto;
}
.image-container.small {
grid-column: 2 / 3;
height: auto;
}
/*************************************************************************************************/
/*How it works section*/
.how-it-works {
padding: 50px 20px;
background-color: rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 20px; /*Change back to: 100px on PROJECTS UPDATE*/
}
.how-it-works h2 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 50px;
font-weight: 450;
}
.steps {
display: flex;
flex-wrap: wrap;
justify-content: center; /* remove this on PROJECTS UPDATE*/
align-items: center; /* remove this on PROJECTS UPDATE*/
margin-top: 15px;
}
.step {
margin-top: 5px;
margin-bottom: 20px;
margin-left: 40px; /* remove this on PROJECTS UPDATE*/
margin-right: 40px; /* remove this on PROJECTS UPDATE*/
max-width: 370px;
}
.step h3 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 30px;
}
.step p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 20px;
}
.arrow{
margin: 0px;
padding: 0px;
padding-bottom: 100px;/* remove this on PROJECTS UPDATE*/
}
/*************************************************************************************************/
/*designed for all*/
.designed-for-all {
padding: 50px 20px;
text-align: center;
justify-content: center;
width: 100%;
margin: 0 auto;
margin-top: 50px;
padding-left: 75px;
padding-right: 75px;
}
.designed-for-all h2 {
margin-bottom: 50px;
font-size: 50px;
font-family:'Neue Haas Grotesk Display Pro', sans-serif;
font-weight: 450;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 100%;
margin: 0 auto;
}
.col-1{
display: grid;
grid-template-rows: auto ;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.action img{
position: absolute;
bottom: 0;
right: 0;
}
.guy_singing img{
position: absolute;
top:0;
right: 0;
}
.col-2{
display: grid;
grid-template-rows: auto;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.col-3{
display: grid;
grid-template-rows: 410px auto;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.cheerleader img{
position: absolute;
bottom: 0;
left: 0;
}
.orange_girl img{
position: absolute;
top: 0;
left: 0;
}
.grid-item {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position:relative;
}
.grid-item img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
/*************************************************************************************************/
/*Features */
.features {
padding: 50px 20px;
background-color: #fff;
justify-content: center;
margin: 0 auto;
margin-top: 200px;
min-width: 100vw;
}
.features h5{
font-family: "Kode Mono", monospace;
font-size: 14px;
font-weight: 900;
color: grey;
margin:0 auto;
max-width: 550px;
text-align: left;
}
.features h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 50px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
margin-top: 10px;
max-width: 550px;
text-align: left;
line-height: 1;
}
.feature-details{
max-width: 550px;
margin:0 auto;
margin-top: 50px;
}
.feature-details p{
text-align: left;
}
.text-grid-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
width: 100%;
max-width: 560px;
margin: 0 auto;
margin-top: 25px;
}
.text-grid-col-1{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-1 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
color: #0c1423CC;
text-align: left;
}
.text-grid-col-2{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-2 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
color: #0c1423CC;
text-align: left;
}
.get_in_touch{
max-width: 550px;
margin:0 auto;
margin-top: 60px;
text-align: center;
}
.get_in_touch_btn{
background-color: rgba(0,0,0,0);
padding: 10px 20px;
border-radius: 20px;
border: 2px solid rgb(128, 128, 128, 0.4);
text-decoration: none;
cursor: pointer;
}
/*************************************************************************************************/
/*Call to action Section*/
.cta-section {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 50px 20px;
color: #fff;
text-align: center;
height: 720px;
margin: 0 auto;
margin-top: 100px;
border-radius: 20px;
text-align: left;
background-color: rgba(0,0,0,0);;
background-image: url(../images/breathing_fire.jpg);
background-size: cover; /* Cover the entire area */
background-repeat: no-repeat; /* No repeat */
background-position: center; /* Centered */
padding-left: 75px;
padding-right: 75px;
margin-left: 75px;
margin-right: 75px;
}
.cta-section img{
object-fit: cover;
}
.background_text{
display:flex;
flex-direction: row;
align-items: end;
max-height: 80px;
max-width: 1121px;
}
.background_text h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 50px;
line-height: 1;
font-weight: 450;
margin: 0;
padding: 0;
}
.sign_free{
height: 60px;
width: 20%;
}
.sign_free_btn{
background-color: white;
border-radius: 25px;
height: 60px;
width: 160px;
max-width: 162px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 19px;
font-weight: 480;
color: black;
text-align: center;
margin-bottom: 2px;
cursor: pointer;
}
/*************************************************************************************************/
/*Contact section*/
.contact {
padding: 50px 20px;
background-color:rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 150px;
max-width: 1360px;
padding-left: 75px;
padding-right: 75px;
}
.contact-grid{
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact-methods-grid{
display: grid;
align-items: left;
text-align: left;
}
.contact-methods-grid h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 50px;
font-weight: 450;
padding: 0;
margin: 0;
align-self: center;
}
.contact-methods-grid p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 19px;
padding-right: 50px;
}
.contact-methods {
display: flex;
flex-direction: column;
text-align: left;
}
.contact-methods > div {
max-width: 300px;
}
.email h3 , .phone h3, .social h3{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 28px;
font-weight: 500;
color: #0C1423;
margin-top: 20px;
}
.email p, .phone p , .social p {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
color: rgb(0, 0, 0, 0.8);
text-decoration: underline;
}
.contact-form-grid{
display: grid;
}
.contact-form {
display: flex;
flex-direction: column;
align-items: left;
padding-bottom: 30px;
}
.name-input{
margin-top: 115px;
text-align: left;
}
.email-input, .organization-input , .question-input, .textarea-div{
text-align: left;
}
.name-input p, .email-input p , .organization-input p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.name-input input, .email-input input, .organization-input input , .question-input select{
margin: 0 !important;
}
.choose{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.question-input p:not(.choose){
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin: 0;
}
.contact-form input, .contact-form textarea{
width: 100%;
max-width: 500px;
margin: 10px 0;
padding: 10px;
background-color: rgb(0, 0, 0, 0);
border: none;
border-bottom: 2px solid #000000;
}
.contact-form input:focus, .contact-form textarea:focus{
border: none;
outline: none;
border-bottom: 2px solid #000000;
}
.question-options{
width: 500px; /* Set the desired width */
padding: 10px; /* Add padding for better appearance */
border: none;
border-bottom: 2px solid #000000;
background-color: rgb(0, 0, 0, 0); /* Background color */
color: #333; /* Text color */
font-size: 16px; /* Font size */
appearance: none; /* Remove default arrow */
background-image: url('../images/dropdown_arrow_image.png'); /* Custom arrow */
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.question-options:focus{
border: none;
outline: none;
border-bottom: 2px solid #000000;
}
.textarea-div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16;
color: rgb(0, 0, 0, 0.5);
}
.textarea-div textarea{
resize: none;
}
.contact-form button {
padding: 10px 20px;
background-color: #273048;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18;
height: 46px;
width: 145px;
margin-top: 30px;
}
/*Footer*/
footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
max-width: 1360px;
margin: 0 auto;
border-top: 2px solid #000000;
text-align: left;
background-color:rgb(0, 0, 0, 0);
color: #0C1423;
padding: 10px 0px;
font-size: 14px;
font-weight: 450;
}
.legal-info{
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
gap: 30px;
justify-content: center;
}
.aside__nav-link{
text-decoration: none;
color: #000;
cursor: pointer;
}
.submit-container {
display: flex;
align-items: center;
position: relative;
}
/*********************************************************************************/
/* Logo images */
.clients{
background-color: rgba(0, 0, 0, 0);
text-align: center;
padding: 0px 0px;
width: 100%;
max-width: 1360px;
max-height: 1162px;
margin: 0 auto;
margin-top: 100px;
}
.clients h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 50px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
margin-top: 10px;
max-width: 550px;
text-align: center;
line-height: 1;
}
.clients_container{
display: flex;
justify-content: center; /* Align images in the center horizontally */
align-items: center; /* Vertically centers the logos (if needed) */
flex-wrap: wrap; /* Allows logos to wrap to the next line if the screen is too narrow */
gap: 20px;
}
.compeed-logo img{
width: 150px; /* Adjust image size */
height: auto;
}
.harrys-logo img{
width: 150px; /* Adjust image size */
height: auto;
}
.fnac-logo img{
width: 150px; /* Adjust image size */
height: auto;
}
.bet-pt-logo img{
width: 150px; /* Adjust image size */
height: auto;
}
.client-logo-container {
display: flex;
justify-content: center;
align-items: center;
width: 150px; /* Adjust width based on logo size */
height: 150px; /* Adjust height based on logo size */
}
.client-logo-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensures the logo fits inside the container without stretching */
}
}
/* Styles for extra extra large screens (≥1400px) */
@media (min-width: 1400px) {
/*.logout_header*/
.logout_header {
Background-color:rgba(0, 0, 0, 0);
padding-top: 20px;
width: 100%;
max-width: 1360px; /* Limit width if necessary */
max-height: 40px;
margin: 0 auto; /* Center the container horizontally */
/*Nullify BootStrap*/
box-sizing: content-box;
}
.logout_header .head_container {
background-color: rgba(0, 0, 0, 0);
width: 100%; /* Use full width */
max-width: 1360px; /* Limit width if necessary */
max-height: 40px;
margin: 0 auto; /* Center the container horizontally */
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
/*Nullify BootStrap*/
box-sizing: content-box;
gap: 20px;
}
.logout_logo {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1;
}
.logout_logo img {
height: 40px;
margin-right: 10px;
}
nav ul {
background-color: rgba(0, 0, 0, 0);
list-style: none;
margin-right: 10px;
margin-bottom: 0px;
padding: 0;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
}
nav li {
background-color: rgba(0, 0, 0, 0);
}
nav a {
text-decoration: none;
color: #000;
cursor: pointer;
}
.cta .btn {
background-color: #273048;
color: #fff;
padding: 10px 20px;
border-radius: 40px;
text-decoration: none;
}
/*************************************************************************************************/
/*Hero section*/
.hero {
background-color: rgba(0, 0, 0, 0);
text-align: left;
padding: 0px 0px;
width: 100%;
max-width: 1360px;
max-height: 1162px;
margin: 0 auto;
margin-top: 200px; /* remove this on PROJECTS UPDATE*/
}
.hero-content{
background-color: rgba(0, 0, 0, 0);
text-align: left;
height: 250px;
margin-top: 10px;
}
.hero-content h1 {
background-color: rgba(0, 0, 0, 0);
font-size: 72px;
font-weight: 450;
text-align: left;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
height: 180px;
margin: 0 auto;
line-height: 1;
}
.hero-content a {
padding: 10px 20px;
background-color: #273048;
color: #fff;
text-decoration: none;
border-radius: 20px;
cursor: pointer;
margin-top: 10px;
}
.image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
gap: 0px;
justify-content: center;
max-width: 100%;
margin: 50px auto;
}
.image-container {
position: relative;
overflow: hidden;
margin: 0; /* Remove any margins */
padding: 0; /* Remove any paddings */
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container.large {
grid-column: 1 / 2;
grid-row: 1 / 3;
height: auto;
}
.image-container.small {
grid-column: 2 / 3;
height: auto;
}
/*************************************************************************************************/
/*Categories section*/
.categories {
padding: 0px 0px;
text-align: center;
max-width: 1360px;
margin: 0 auto;
margin-top: 100px;
}
.categories h2 {
text-align: left;
font-family:'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 58px;
font-weight: 450;
line-height: 1;
}
.shade {
color: grey;
}
.category-list {
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.category {
background-color: #fff;
padding: 10px 20px;
margin: 10px;
border-radius: 60px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
font-size: 44px;
display: flex;
align-items: center;
}
.cinema img{
margin-right: 10px;
}
.entertainers img {
margin-right: 5px;
}
.comedians img{
margin-right: 5px;
}
/*************************************************************************************************/
/*How it works section*/
.how-it-works {
padding: 50px 20px;
background-color: rgba(0, 0, 0, 0);
text-align: center;
max-width: 1360px;
margin: 0 auto;
margin-top: 20px; /*Change back to: 100px on PROJECTS UPDATE*/
}
.how-it-works h2 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 60px;
font-weight: 450;
}
.steps {
display: flex;
justify-content: center; /* remove this on PROJECTS UPDATE*/
align-items: center; /* remove this on PROJECTS UPDATE*/
margin: 60px auto;
}
.step {
margin-bottom: 20px;
margin-left: 40px; /* remove this on PROJECTS UPDATE*/
margin-right: 40px; /* remove this on PROJECTS UPDATE*/
max-width: 370px;
}
.step h3 {
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 28px;
}
.step p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
}
.arrow{
/* height: 102px; */
/* max-height: 102px; */
margin: 0px;
padding: 0px;
padding-bottom: 100px;/* remove this on PROJECTS UPDATE*/
}
/*************************************************************************************************/
/*designed for all*/
.designed-for-all {
padding: 50px 20px;
text-align: center;
justify-content: center;
max-width: 1360px;
margin: 0 auto;
margin-top: 200px;
}
.designed-for-all h2 {
margin-bottom: 50px;
font-size: 60px;
font-family:'Neue Haas Grotesk Display Pro', sans-serif;
font-weight: 450;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 100%;
max-width: 1336px;
margin: 0 auto;
}
.col-1{
display: grid;
grid-template-rows: 530px 570px ;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.action img{
position: absolute;
bottom: 0;
right: 0;
}
.guy_singing img{
position: absolute;
top:0;
right: 0;
}
.col-2{
display: grid;
grid-template-rows: auto auto;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.col-3{
display: grid;
grid-template-rows: 410px auto;
width: 100%;
row-gap: 30px;
max-width: 446px;
margin: 0 auto;
}
.cheerleader img{
position: absolute;
bottom: 0;
left: 0;
}
.orange_girl img{
position: absolute;
top: 0;
left: 0;
}
.grid-item {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position:relative;
}
.grid-item img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
/*************************************************************************************************/
/*Features */
.features {
padding: 50px 20px;
background-color: #fff;
justify-content: center;
min-width: 100vw;
/* max-width: 1360px; */
margin: 0 auto;
margin-top: 200px;
}
.features h5{
font-family: "Kode Mono", monospace;
font-size: 14px;
font-weight: 900;
color: grey;
margin:0 auto;
max-width: 550px;
text-align: left;
}
.features h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 60px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
margin-top: 10px;
max-width: 550px;
text-align: left;
line-height: 1;
}
.feature-details{
max-width: 550px;
margin:0 auto;
margin-top: 50px;
}
.feature-details p{
text-align: left;
}
.text-grid-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.text-grid-col-1{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-1 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
color: #0c1423CC;
text-align: left;
}
.text-grid-col-2{
display: grid;
grid-template-rows: 42px 152px 42px 152px;
}
.text-grid-col-2 div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
color: #0c1423CC;
text-align: left;
}
.get_in_touch{
max-width: 550px;
margin:0 auto;
margin-top: 60px;
text-align: left;
}
.get_in_touch_btn{
background-color: rgba(0,0,0,0);
padding: 10px 20px;
border-radius: 20px;
border: 2px solid rgb(128, 128, 128, 0.4);
text-decoration: none;
cursor: pointer;
}
/*************************************************************************************************/
/*Call to action Section*/
.cta-section {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 50px 20px;
color: #fff;
text-align: center;
max-width: 1360px;
height: 750px;
margin: 0 auto;
margin-top: 100px;
border-radius: 20px;
text-align: left;
background-color: rgba(0,0,0,0);;
background-image: url(../images/breathing_fire.jpg);
background-size: cover; /* Cover the entire area */
background-repeat: no-repeat; /* No repeat */
background-position: center; /* Centered */
}
.cta-section img{
object-fit: cover;
}
.background_text{
display:flex;
flex-direction: row;
align-items: end;
max-height: 80px;
max-width: 1121px;
}
.background_text h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 60px;
line-height: 1;
font-weight: 450;
margin: 0;
padding: 0;
}
.sign_free{
height: 60;
width: 20%;
}
.sign_free_btn{
background-color: white;
border-radius: 25px;
height: 42px;
width: 162px;
max-width: 162px;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
font-weight: 480;
color: black;
text-align: center;
margin-left: auto;
margin-right: -50px;
margin-bottom: 2px;
cursor: pointer;
}
/*************************************************************************************************/
/*Contact section*/
.contact {
padding: 50px 20px;
background-color:rgba(0, 0, 0, 0);
text-align: center;
margin: 0 auto;
margin-top: 150px;
max-width: 1360px;
}
.contact-grid{
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact-methods-grid{
display: grid;
align-items: left;
text-align: left;
}
.contact-methods-grid h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 70px;
font-weight: 450;
padding: 0;
margin: 0;
align-self: center;
}
.contact-methods-grid p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18px;
padding-right: 50px;
}
.contact-methods {
display: flex;
flex-direction: column;
text-align: left;
}
.contact-methods > div {
max-width: 300px;
}
.email h3{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 34;
font-weight: 500;
color: #0C1423;
margin-top: 20px;
}
.email p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18;
color: rgb(0, 0, 0, 0.8);
text-decoration: underline;
}
.phone h3{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 34;
font-weight: 500;
color: #0C1423;
margin-top: 20px;
}
.phone p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18;
color: rgb(0, 0, 0, 0.8);
text-decoration: underline;
}
.social h3{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 34;
font-weight: 500;
color: #0C1423;
margin-top: 20px;
}
.social p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18;
color: rgb(0, 0, 0, 0.8);
text-decoration: underline;
}
.contact-form-grid{
display: grid;
}
.contact-form {
display: flex;
flex-direction: column;
align-items: left;
padding-bottom: 30px;
}
.name-input{
margin-top: 115px;
text-align: left;
}
.name-input p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.name-input input {
margin: 0 !important;
}
.email-input{
text-align: left;
}
.email-input p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.email-input input {
margin: 0 !important;
}
.organization-input{
text-align: left;
}
.organization-input p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.organization-input input {
margin: 0 !important;
}
.question-input{
text-align: left;
}
.choose{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
margin-bottom: 0px;
}
.question-input p:not(.choose){
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16px;
color: rgb(0, 0, 0, 0.5);
margin: 0;
}
.question-input select {
margin: 0 !important;
}
.textarea-div{
text-align: left;
}
.contact-form input, .contact-form textarea{
width: 100%;
max-width: 500px;
margin: 10px 0;
padding: 10px;
background-color: rgb(0, 0, 0, 0);
border: none;
border-bottom: 2px solid #000000;
}
.contact-form input:focus, .contact-form textarea:focus{
border: none;
outline: none;
border-bottom: 2px solid #000000;
}
.question-options{
width: 522px; /* Set the desired width */
padding: 10px; /* Add padding for better appearance */
border: none;
border-bottom: 2px solid #000000;
background-color: rgb(0, 0, 0, 0); /* Background color */
color: #333; /* Text color */
font-size: 16px; /* Font size */
appearance: none; /* Remove default arrow */
background-image: url('../images/dropdown_arrow_image.png'); /* Custom arrow */
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.question-options:focus{
border: none;
outline: none;
border-bottom: 2px solid #000000;
}
.textarea-div p{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 16;
color: rgb(0, 0, 0, 0.5);
}
.textarea-div textarea{
resize: none;
}
.contact-form button {
padding: 10px 20px;
background-color: #273048;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 18;
height: 46px;
width: 145px;
margin-top: 30px;
}
/*Footer*/
footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
max-width: 1360px;
margin: 0 auto;
border-top: 2px solid #000000;
text-align: left;
background-color:rgb(0, 0, 0, 0);
color: #0C1423;
padding: 10px 0px;
font-size: 14px;
font-weight: 450;
}
.legal-info{
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
gap: 30px;
justify-content: center;
}
.aside__nav-link{
text-decoration: none;
color: #000;
cursor: pointer;
}
.submit-container {
display: flex;
align-items: center;
position: relative;
}
/*********************************************************************************/
/* Logo images */
.clients{
background-color: rgba(0, 0, 0, 0);
text-align: center;
padding: 0px 0px;
width: 100%;
max-width: 1360px;
max-height: 1162px;
margin: 0 auto;
margin-top: 100px;
}
.clients h2{
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
font-size: 60px;
font-weight: 450;
color: #0C1423;
margin:0 auto;
margin-top: 10px;
max-width: 550px;
text-align: center;
line-height: 1;
}
.clients_container{
display: flex;
justify-content: center; /* Align images in the center horizontally */
align-items: center; /* Vertically centers the logos (if needed) */
flex-wrap: wrap; /* Allows logos to wrap to the next line if the screen is too narrow */
gap: 20px;
}
.compeed-logo img{
width: 150px; /* Adjust image size */
height: auto;
}
.harrys-logo img{
width: 150px; /* Adjust image size */
height: auto;
}
.fnac-logo img{
width: 150px; /* Adjust image size */
height: auto;
}
.bet-pt-logo img{
width: 150px; /* Adjust image size */
height: auto;
}
.client-logo-container {
display: flex;
justify-content: center;
align-items: center;
width: 150px; /* Adjust width based on logo size */
height: 150px; /* Adjust height based on logo size */
}
.client-logo-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensures the logo fits inside the container without stretching */
}
}
/* Carrousel */
.d-only-sm {
display: none !important;
}
@media (max-width: 767.98px) {
.d-only-sm {
display: flex !important;
}
.steps,
.clients_container{
display: flex;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: unset;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.clients_container{
justify-content: flex-start;
}
.steps::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.step{
min-width: 100%;
}
.client-logo-container{
min-width: 100%;
}
.client-logo-container img {
max-width: 62%;
max-height: 100%;
object-fit: contain;
}
.designed-for-all-container {
display: flex;
justify-content: flex-start;
overflow: hidden; /* Hide overflow to create scrolling effect */
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
white-space: nowrap;
flex-wrap: nowrap;
padding: 8px;
/* Hide scrollbar for Chrome, Safari and Opera */
-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* The individual image items */
.image-item {
min-width: 100vw; /* Adjust the width as per your requirement */
display: flex;
justify-content: center;
padding: 8px;
}
.image-item img {
width: 100%; /* Make the image width 100% of its container */
height: auto; /* Maintain the aspect ratio by adjusting the height automatically */
max-width: 100vw;
object-fit: contain;
}
}