/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
}

/* COLORS */
:root {

  --charcoal: #353333;
  --pink: #f5b7d2;
  --brown: rgb(187, 125, 66);
  --white: #fffdd0;
 

  --black: #000000;
  --blush: #F8C8DC;
  --rose: #E75480;
}
html,
body {
  font-family: 'allura';
  background: var(--black);
  width: 100%;
  cursor: pointer;
  scroll-behavior:smooth;
  overflow-x:hidden;
  color: var(--white);
}
/*========= ABout Us Page========== */
/* Ads */
.ad-box {
  background: var(--rose);
  text-align: center;
  color: white;
  width: 100%;
  overflow: hidden;
  transition: 0.3s ease;
}

.ad-box.active {
  opacity: 1;
  transform: translateY(0);
  display: block;
  height: 600px;
}

.ad-box p {
  margin-top: 10px;
  font-size: 15px;
  text-align: center;
}

.ad-box video {
  width: 100%;

}

/*About*/
.about {
  padding: 5px 40px 5px;
  background: #111111;
  color: var(--white);
  line-height: 1.8;
}

.about h4 {
  font-family: "Allura";
  color: var(--brown);
  font-size: 30px;
  justify-content: center;
  
  text-align: center ;
}

.brown p{
  color: var(--white)
}

.about p {
  margin-top: 10px;
  opacity: 0.9;
  line-height: 1.8;
}
.about-split {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 30px;
}

.about-split section{
  animation: fadeUp 0.8s ease forwards;
}

/* IMAGE SIDE */
.about-image {
  flex: 1;
  background:var(--white);
  width: 500px;
}

.about-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
}


/* TEXT SIDE */
.about-text {
  flex: 1;
  color: white;
  position: relative;
  z-index: 2;
}

.about-text p {
  margin-bottom: 25px;
  color: #ccc;
  line-height: 1.6;
}
.about-text h4 {
  color: var(--pink);
  font-size: 50px;
  font-family: 'allura';
  margin-bottom: 15px;
  text-align: center;
}

/* BUTTON */
.btn-primary {
  display: inline-block;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--pink), #f4a896);
  color: black;
  border-radius: 30px;
  text-decoration:none;
  font-weight: bold;
  transition: 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 183, 210, 0.4);
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* CARD SECTION (bottom boxes) */
.value {
  text-align: center;
  padding: 10px 20px;
  margin-bottom: 20px;
}
.value-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 5px;
}
.value h3 {
  color: var(--pink);
  font-size: 36px;
  margin-bottom: 20px;
}

.value-card {
  background: var(--brown);
  padding: 10px;
  border-radius: 20px;
  width: 320px;
  min-height: 200px;
  text-align: center;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(245, 183, 210, 0.2);
}

.value-card h4 {
  color: var(--white);
  margin-bottom: 10px;
}

.value-card p {
  color: var(--white);
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 15px;
}

/* RESPONSIVE */
@media (max-width:768px){

    .about{
        padding:20px;
    }

    .about h4{
        font-size:32px;
        margin-bottom:20px;
    }

   .about > .brown{
    padding:0 20px;
}

    .about > .brown p{
        line-height:1.9;
        text-align:left;
    }

    .about-split{
        flex-direction:column;
        gap:25px;
        margin:40px auto;
        padding:0 10px;
    }

    .about-image{
        width:100%;
    }

    .about-image img{
        width:100%;
        height:300px;
        object-fit:cover;
    }

    .about-text{
        width:100%;
        padding:0 10px;
    }

    .about-text h4{
        font-size:36px;
    }

    .value-container{
        flex-direction:column;
        align-items:center;
    }

    .value-card{
        width:100%;
        max-width:350px;
    }

}

/* =========================================
   SMALL PHONES
========================================= */

@media screen and (max-width:420px){

.about-hero h1{

    font-size:30px;

}

.about-text h2{

    font-size:25px;

}
.about-cta h2{

    font-size:25px;

}

.about-text p,

.about-hero p,

.about-cta p{

    font-size:15px;

}

.value-card{

    padding: 25px 20px;

}

}