about.css

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: black;
    color: #ffffff;
    font-family: "Eczar";
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.col-md-4 {
    flex: 1 1 calc(33.333% - 40px);
    max-width: 33.3333%;
    padding: 10px;
    box-sizing: border-box;
    
}

.employee-card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    max-width: 300px;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.employee-card-container {
    display: flex; /* Make the container a flexbox */
    overflow-x: scroll; /* Enable horizontal scroll */
    white-space: nowrap; /* Prevent cards from wrapping onto new lines */
    /* Optional styling for spacing or padding */
  }


.quote-box {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 100;
    width: 250px; /* Adjust width as needed */
}


.quote {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-icons a {
    color: #333;
    font-size: 18px;
    text-decoration: none;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #007bff; /* Change to your preferred hover color */
}

.about-super-drib,
.about-super-drib * {
    box-sizing: border-box;
}
.about-super-drib {
    margin-top: 100px;
    color: #ffffff;
    text-align: center;
    font-family: "Eczar";
    font-size: 64px;
    font-weight: 600;
}
.custom-designee{
    color: #fefefe;
    text-align: center;
    font-family: "Eczar"; 
    line-height: 33px;
    font-weight: 35rem;
    opacity: 0.6;
    font-size: 20px;
    position: relative;
    max-width: 913px; 
    margin: auto;
}


.get-in-touch-section{
  overflow: hidden;
  display: block;
}

.how-we-work,
.how-we-work * {
  box-sizing: border-box;
}
.how-we-work {
  color: var(--white, #f3f3f3);
  text-align: left;
  font-family: "Eczar";
  font-size: 64px;
  font-weight: 600;
  position: relative;
}

.how-we-work-title {
    color:  #f3f3f3;
    text-align: left;
    font-family: "Eczar";
    font-size: 64px;
    font-weight: 600;
    position: relative;
  }

.get-in-touch-title {
    box-sizing: border-box;
    color: #f5f5f5;
    text-align: center;
    font-family: "Eczar";
    font-size: 64px;
    font-weight: 700;
    position: relative;
}

.left-line {
    box-sizing: border-box; 
    border-style: solid;
    border-color: #f3f3f3;
    border-width: 3px 0 0 0;
    width: 102px;
    height: 0px;
    position: relative;
    transform-origin: 0 0;
    transform: rotate(90deg) scale(1, 1);
    margin-left: -15px;
}
.address{
    box-sizing: border-box;
    color: #f5f5f5;
    text-align: left;
    font-family: "Eczar";
    font-size: 20px;
    font-weight: 400;
    opacity: 0.6000000238418579;
    position: relative;
}

.email {
    box-sizing: border-box;
    color: #f5f5f5;
    text-align: left;
    font-family: "Eczar";
    font-size: 20px;
    font-weight: 700;
    text-decoration: underline;
    position: relative;
}

.phone_number {
    box-sizing: border-box;
    color: #f5f5f5;
    text-align: left;
    font-family: "Eczar";
    font-size: 20px;
    font-weight: 700;
    text-decoration: underline;
    position: relative;
}

.contact-form-img{
    box-sizing: border-box;
    border-radius: 83px;
    opacity: 0.4000000059604645;
    width: 179px;
    height: 172px;
    position: relative;
    transform-origin: 0 0;
    transform: rotate(-180deg) scale(1, 1);
    align-self: flex-end; 
    margin-top: auto;
    margin-left: 600px;
}

.about-section{
    overflow: hidden;
    margin-bottom: 200px;
}

/*=============================
    Team Section
=================================*/
.team-section {
    overflow: hidden;
    display: block;
    background-color: #000; /* Assuming a black background as per image */
    padding: 50px 0; /* Add some padding to the section */
}

.team_title {
    box-sizing: border-box;
    color: #ffffff;
    text-align: center;
    font-family: "Eczar";
    font-size: 48px;
    line-height: 68px;
    font-weight: 600;
    position: relative;
    transform-origin: 0 0;
    transform: rotate(0.046deg) scale(1, 1);
    margin-bottom: 30px; /* Add some margin below the title */
}


.employee-cards-wrapper{
    border: 1px solid #000000;
    display:flex;
    overflow-x: auto;
    justify-content: center;
    flex-wrap: wrap; /* Allow cards to wrap to multiple lines */

}

.employee-cards-wrapper::-webkit-scrollbar{
    width:0;
    height: 0;
}

.employee-cards-wrapper .container{
    min-width:110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
}

.employee-card,
.employee-card * {
    box-sizing: border-box;
}

.employee-card {
    width: 250px; /* Full width for responsive design */
    max-width: 300px; /* Maximum width for the card *//* Set a fixed height */
    padding: 8px;
    margin: 8px;
    border-radius: 15px;
    background-color: #f3f3f3;
    text-align: left; /* Align text to left */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add some shadow for depth */
    position: relative; /* For positioning the overlay */
    overflow: hidden;
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.employee-card img {
    width: 40px; /* Adjust image width */
    height: 40px; /* Adjust image height */
    border-radius: 50%;
    margin-bottom: 15px;
}

.employee-card h3 {
    display: flex;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
    color:#000;
}

.employee-card p {
    display: flex;
    font-size: 8px;
    color: #000000;;
}

.employee-card .quote-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333; /* Dark grey background */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease; /* Smooth transition */
    box-sizing: border-box;
    border-radius: 15px;
}

.employee-card .quote-overlay p {
    font-size: 10px;
    margin-bottom: 10px;
    text-align: center;
    color: #F3F3F3;
}

.employee-card .quote-overlay .social-icons {
    display: flex;
    gap: 25px;
}

.employee-card .quote-overlay .social-icons a {
    color: #7e7e7e;
    font-size: 18px;
}

.employee-card:hover .quote-overlay {
    opacity: 1; /* Show the overlay on hover */
    transform: translateX(8px) translateY(-4px);
    
}

/*==============================
        how-we-work
===============================*/
.how-we-work{
    overflow: hidden;
    display: block;
    margin-bottom: 100px;
}

.about-image{
    width: 700px;
    height: 507px;
    background: rgba(6, 5, 7, 0.1);
    border-radius: 90px;
    position: relative;
}
.how-we-work-title{
    color: #f3f3f3;
    text-align: center;
    font-family: "Eczar";
    font-size: 64px;
    font-weight: 600;
    position: relative;
}

.flex-container {
    display: flex;
    align-items: center;
}

.outline-text{
    align-items: center;
    color:transparent;
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: rgb(255, 255, 255)
}

._01,
._02,
._03 {
    box-sizing: border-box;
    text-align: left;
    font-family: "Eczar";
    font-size: 128px;
    font-weight: 700;
    opacity: 0.3;
    position: relative;
}

.line-89 {
    box-sizing: border-box;
    opacity: 0.2;
    width: 334px;
    height: 1px; /* Adjust the height as needed */
    background-color: #333132; /* Set the color of the line */
    margin: 0 20px; /* Adjust the margin as needed */
}

.ellipse-115 {
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #333132; /* Set the color of the border */
    width: 12px;
    height: 12px;
    position: relative;
    margin-left: 20px; /* Adjust the margin as needed */
} 

.feature-box{
    box-sizing: border-box;
}

.feature-img{
    width: 62px;
    height: 62px; 
}

.feature-box-title {
    box-sizing: border-box;
    color: #f5f5f5;
    text-align: left;
    font-family: "Eczar";
    font-size: 24px;
    font-weight: 700;
    position: relative;
}

.feature-box-description{
    color: #f5f5f5;
    text-align: left;
    font-family: "Eczar";
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    opacity: 0.4000000059604645;
    position: relative;
    width: 296px;
}

/*==============================
		Contact us Section
===============================*/


.let-s-work-together {
    box-sizing: border-box;
    color: #ffffff;
    text-align: left;
    font-family: "Eczar";
    font-size: 64px;
    line-height: 84px;
    font-weight: 600;
    position: relative;
}

.line-105 {
    border-style: solid;
    border-color: var(--white, #f3f3f3);
    border-width: 2px 0 0 0;
    width: 64px;
    height: 0px;
    position: relative;
}

.super-drib {
    color: #ffffff;
    text-align: left;
    font-family: "Eczar";
    font-size: 250px;
    font-weight: 600;
    opacity: 0.11999999731779099;
    position: relative;
    transform-origin: 0 0;
    margin-top: 60px;
    transform: rotate(-20deg) scale(1, 1);
}

  .btn-style input {
    border: none;
    background: transparent;
    color: #f3f3f3; 
    font-family: "Eczar";
    font-size: 16px;
    line-height: 124.22%;
    font-weight: 400;
    opacity: 0.6;
  }
  .btn-style select {
    border: none;
    background: transparent;
    color: #f3f3f3;
    font-family: "Eczar";
    font-size: 16px;
    line-height: 124.22%;
    font-weight: 400;
    opacity: 0.6;
    appearance: none;
}

.btn-style textarea {
    border: none;
    background: transparent;
    color: #f3f3f3;
    font-family: "Eczar";
    font-size: 16px;
    line-height: 124.22%;
    font-weight: 400;
    opacity: 0.6;
    resize: none; 
}

.btn-line {
    border-style: solid;
    border-color: #f3f3f3;
    border-width: 1px 0 0 0;
    opacity: 0.3;
    width: 100%;
    height: 0;
    position: relative;
}

.send-an-inquiry-btn {
    color: #f3f3f3;
    text-align: center;
    font-family: "Eczar";
    font-size: 16px;
    line-height: 34px;
    font-weight: 400;
    position: relative;
    border-color: #f3f3f3;
    border-radius: 30px;
    padding: 5px;
    width: 35%;
}

.send-an-inquiry-btn:hover{
    color: #f3f3f3;
}

/*================================================
    .support 
================================================*/

.support-section{
    overflow: hidden;
    display: inline-flex;
}

.support{
    color: white; 
    font-size: 48px; 
    font-family: Eczar; 
    font-weight: 500; 
    line-height: 68px; 
    word-wrap: break-word;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

/*================================================
    Footer 
================================================*/
#main-footer{
    overflow: hidden;
}
.copyright-line{
    opacity: 0.20; 
    border: 1px #F3F3F3 solid;
    margin-bottom: 20px;
}
.copyright{
    opacity: 0.40; 
    color: #F3F3F3; 
    font-size: 16px;
    font-family: "Eczar"; 
    font-weight: 400; 
    line-height: 19.88px; 
    word-wrap: break-word;
    text-align: center;
}


/*================================================
    Get In Touch!
================================================*/
.get-in-touch-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }
  
  .get-in-touch-title {
    box-sizing: border-box;
    color: #f5f5f5;
    text-align: center;
    font-family: "Eczar";
    font-size: 64px;
    font-weight: 700;
    position: relative;
    width: 100%;
  }
  
  .contact-address, .contact-form {
    flex: 1;
  }
  
  .contact-address {
    /* Add border for separation */
    border-right: 1px solid #4f4f4f;
    padding-right: 20px;
  }
  
  .contact-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .contact-form-img {
    box-sizing: border-box;
    border-radius: 83px;
    opacity: 0.4;
    width: 179px;
    height: 172px;
    transform-origin: 0 0;
    transform: rotate(-180deg) scale(1, 1);
    margin-top: 20px;
  }
  
  .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color:#000000;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }
  
  .btn-line {
    border-style: solid;
    border-color: #f3f3f3;
    border-width: 1px 0 0 0;
    opacity: 0.3;
    width: 100%;
    height: 0;
    position: relative;
  }
  
  .send-an-inquiry-btn {
    align-self: flex-end;
    margin-top: 20px;
  }
  
  .main-footer {
    text-align: center;
  }

/*================================================
    Footer 
================================================*/

#main-footer{
    overflow: hidden;
}

.support{
    color: white; 
    font-size: 48px; 
    font-family: Eczar; 
    font-weight: 500; 
    line-height: 68px; 
    word-wrap: break-word;
    text-align: center;
    margin-bottom: 5%; 
}

.copyright-line{
    opacity: 0.20; 
    border: 1px #F3F3F3 solid;
}
.copyright{
    opacity: 0.40; 
    color: #F3F3F3; 
    font-size: 16px;
    font-family: "Eczar";
    font-weight: 400; 
    line-height: 19.88px; 
    word-wrap: break-word;
    text-align: center;
    margin-top: 20px;
}