body {
    background: linear-gradient(90deg, #232526 0%, #414345 100%);
    font-family: 'IBM Plex Sans', sans-serif;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}




    

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}



.class {
padding: 80px;
display: flex;
padding-bottom: 20px;
padding-top: 20px;


}
.class3{
display: flex;
flex-direction: column;
}
.classm1{
padding: 100px;
padding-top: 50px;
padding-bottom: 120px;
}





.subclassm1 {
display: flex;
justify-content: space-between;
align-items: flex-start;
}





.boook {
padding: 40px;
background: #8CDFD6;
border-radius: 24px;
width: 80%;
height: 60%;
align-content: center;
}

.form {
width: 43%;
}

.content-box{
text-align: left;

}
:root {
--br-5xs: 5px;
--color-dimgray-200: #808080;
--color-white: #ffffff;
}

/* Style the input box */
input#name {

border-radius: var(--br-5xs);
background-color: var(--color-dimgray-200);
border: 1px solid var(--color-white);
box-sizing: border-box;
width: 100%;
height: 60px;
margin-bottom: 24px;
padding-left: 8px;



font-size: 16px;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-white);
border-radius: 8px;
border: 1px solid #FFF;
background: #666;
}

/* Optional: Remove default focus outline */

input#name:-webkit-autofill {
/* Add styles for autofilled input, if needed */
border-radius: var(--br-5xs);
background-color: red; /* Example: Change the background color for autofill */
}

:root {
--br-5xs: 5px;
--color-dimgray-200: #808080;
--color-white: #ffffff;
}

/* Style the input box */
input#phone_number {

border-radius: var(--br-5xs);
background-color: var(--color-dimgray-200);
border: 1px solid var(--color-white);
box-sizing: border-box;
margin-bottom: 24px;
font-size: 16px;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-white);
border-radius: 8px;
border: 1px solid #FFF;
background: #666;
width: 100%;
height: 60px;
padding-left: 8px;
}


/* Optional: Remove default focus outline */


:root {
--br-5xs: 5px;
--color-dimgray-200: #808080;
--color-white: #ffffff;
}

/* Style the input box */
input#email {

border-radius: var(--br-5xs);
background-color: var(--color-dimgray-200);
border: 1px solid var(--color-white);
box-sizing: border-box;

margin-bottom: 24px;
font-size: 16px;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-white);
border-radius: 8px;
border: 1px solid #FFF;
background: #666;
width: 100%;
height: 60px;
padding-left: 8px;
/* Set the text color to match the frame */
}

/* Optional: Remove default focus outline */

:root {
--br-5xs: 5px;
--color-dimgray-200: #808080;
--color-white: #ffffff;
}

input#subject {


position: relative;
border-radius: var(--br-5xs);
background-color: var(--color-dimgray-200);
border: 1px solid var(--color-white);
box-sizing: border-box;
margin-bottom: 24px;
font-size: 16px;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-white);
border-radius: 8px;
border: 1px solid #FFF;
background: #666;
width: 100%;
height: 60px;
padding-left: 8px;
}




textarea#Message {

position: relative;
border-radius: var(--br-5xs);
background-color: var(--color-dimgray-200);
border: 1px solid var(--color-white);
box-sizing: border-box;


font-size: 16px;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-white);
border-radius: 8px;
border: 1px solid #FFF;
background: #666;
width: 100%;
height: 240px;
margin: 0px;
padding: 8px;
}

/* Optional: Remove default focus outline */


.contact-us-child {

border-radius: 24px;
background: linear-gradient(-0.06deg, rgba(140, 223, 214, 0.2), #8cdfd6);

}


.book-your-free {
align-self: stretch;

font-size: 40px;
letter-spacing: 0.01em;
font-weight: 600;
color: #0a0a0a;

}


.free-in-depth-consultations {
font-weight: 500;
}

.free-in-depth-consultations,
.no-pressure-no {
align-self: stretch;

letter-spacing: 0.01em;
}

.book-your-free-consultation-parent {
align-self: stretch;



gap: var(--gap-5xl);
font-size: var(--font-size-5xl);
color: var(--color-darkslategray);
font-family: 'IBM Plex Mono', monospace;
}

.frame-child {

border-radius: var(--br-5xs);

flex-shrink: 0;
}

.chat-with-us,
.our-friendly-team {
align-self: stretch;

}

.chat-with-us {
letter-spacing: -0.02em;
font-weight: 500;
}

.our-friendly-team {
font-size: var(--font-size-xl);
color: var(--color-darkslategray);
}

.chat-with-us-parent {
align-self: stretch;

gap: var(--gap-9xs);
}

.hellobyte-digitalcomau {
align-self: stretch;

font-size: var(--font-size-5xl);
color: var(--color-darkslategray);

}














.content-box p {
font-size: 16px;
line-height: 1.6;
}


.content-box h3{
color: #292929;
font-family: IBM Plex Sans;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.64px;


}
.small-description {
font-size: 12px;

}




.contact-icon {


fill: rgba(255, 255, 255, 0.40);
stroke-width: 1px;
stroke: #E0E0E0;
margin-right: 24px;

}
.call-icon{
fill: rgba(255, 255, 255, 0.40);
stroke-width: 1px;
stroke: #E0E0E0;
margin-right: 24px;


}




.email-link {
font-size: 14px;
color: #232526;
text-decoration: none;

}
body{
font-family: 'IBM Plex Mono', monospace;;
margin: 0;
padding: 0;
}










.toggle-buttons-container {
width: 100%;
display: flex;
flex-wrap: wrap;
height: 100%;

}
.toggle-button{
    box-sizing: border-box;
    /* margin-bottom: 49px; */
    /* width: 100%; */
    /* margin-right: 24px; */
    padding: 20px;
    padding-left: 0;
}



/* Hide the actual checkbox */
.toggle-button input[type="checkbox"] {
display: none;
}

/* Style the label area */
.toggle-button label {


border-radius: 20px;
border: 2px solid #ccc;
background-color: #f0f0f0;
cursor: pointer;
border-radius: 48px;
border: 1px solid #CCC;
background: #707070;
color: #B8B8B8;
padding: 16px;
padding-left: 24px;
padding-right: 24px;
}

/* Style the label area when the checkbox is checked */
.toggle-button input[type="checkbox"]:checked + label {
background-color: #8CDFD6;
color:#000;
border-radius: 48px;
border: 1px solid #CCC;


}

/* Style the text */
.toggle-button span {
font-family: -webkit-body;
color: #000; /* Default text color */
}


/* Style the text when the checkbox is checked */
.toggle-button input[type="checkbox"]:checked ~ span {
color: #2196F3; /* Blue text color when checked */
}



.horizontal-button button {

border: none;
border-radius: 5px;
background-color: #2196F3;
cursor: pointer;
transition: background-color 0.3s ease;

border-radius: 8px;
border: 2px solid #32B4A5;
background: #8CDFD6;
width: 100%;
margin-top: 17px;
padding: 32px;
padding-top: 15px;
padding-bottom: 15px;



color: #000;
font-family: IBM Plex Sans;
font-size: 23px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.46px;

}

.horizontal-button button.clicked {
background-color: #4CAF50; /* New color when clicked */

}
.your-full-name{
color: #E0E0E0;
font-family: IBM Plex Mono;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.48px;
margin-bottom: 16px;
}

.content-box p{
color: #3D3D3D;
font-family: IBM Plex Mono;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.24px;
}

.contactus h3{
color: #292929;
font-family: IBM Plex Sans;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.64px;
}
.small-description{
color: #3D3D3D;
font-family: IBM Plex Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.email-link{
color: #3D3D3D;
font-family: IBM Plex Sans;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.call_info h3{
color: #292929;
font-family: IBM Plex Sans;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.64px;
}
.call_us p{
color: #3D3D3D;
font-family: IBM Plex Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.phone-number{
color: #3D3D3D;
font-family: IBM Plex Sans;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.select h3{
color: #E0E0E0;
font-family: IBM Plex Mono;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.48px;
padding-top: 24px;
padding-bottom: 16px;
margin: 0px;


}


.class3 b{
color: #F5F5F5;
font-family: IBM Plex Sans;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.72px;
}
.digital{
color: #F5F5F5;
font-family: IBM Plex Sans;
font-size: 26px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.52px;
}
.content-box h3{
color: #0A0A0A;
font-family: IBM Plex Mono;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.4px;
}
.chat-us {
display: flex;
margin-bottom: 64px;
margin-top: 64px;
}
.call_us{
display: flex;
padding-bottom: 178px;
}
.contact-info a{
    text-decoration: none;
}
.contact-info h3{
color: #292929;
margin: 0;





line-height: normal;
letter-spacing: -0.64px; 

font-family: IBM Plex Sans;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.64px;
text-decoration: none;
}

.contact-info p{
color: #3D3D3D;
font-family: IBM Plex Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;

}
.call-us h3{
color: #292929;
font-family: IBM Plex Sans;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.64px;


}

body{
background: linear-gradient(90deg, #232526 0%, #414345 100%);
font-family: 'IBM Plex Sans', sans-serif;
}
@media screen and (max-width: 768px) {
/* CSS rules for screens with a maximum width of 768px */
.subclassm1{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
}
.class a {
    text-decoration: none;
}