/*========================
  ABOUT SECTION
========================*/
.about-section{
padding:30px 5%;
background:linear-gradient(180deg,#ffffff,#fff8ef,#ffffff);
}

.about-container{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-image{
position:relative;
}

.about-image img{
width:100%;
height:520px;
object-fit:cover;
border-radius:30px;
box-shadow:0 25px 50px rgba(0,0,0,.12);
transition:.4s;
}
.about-image img:hover{
transform:scale(1.02);
}

/* Experience Badge */

.experience-badge{
position:absolute;
bottom:25px;
right:-20px;
background:linear-gradient(135deg,#FF9933,#138808);
color:white;
padding:20px 24px;
border-radius:22px;
box-shadow:0 20px 40px rgba(0,0,0,.18);
text-align:center;
}

.experience-badge span{
display:block;
font-size:40px;
font-weight:800;
font-family:'Poppins', 'sans-serif';
line-height:1;
}

.experience-badge p{
margin-top:6px;
font-size:14px;
font-weight:600;
}

/* Content */

.about-tag{
display:inline-block;
padding:8px 18px;
border-radius:999px;
background:rgba(255,153,51,.12);
color:#F57C00;
font-weight:700;
letter-spacing:1px;
font-size:13px;
margin-bottom:18px;
}

.about-content h2{
font-family:'Poppins', 'sans-serif';
font-size:clamp(34px,4vw,48px);
line-height:1.2;
color:#3D2200;
margin-bottom:22px;
}

.about-content p{
font-size:17px;
line-height:1.9;
color:#555;
margin-bottom:18px;
}

.about-btn{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:10px;
padding:15px 32px;
border-radius:999px;
text-decoration:none;
font-weight:700;
color:white;
background:linear-gradient(135deg,#FF9933,#F57C00,#138808);
box-shadow:0 15px 35px rgba(255,140,0,.3);
transition:.35s;
}

.about-btn:hover{
transform:translateY(-3px);
box-shadow:0 22px 45px rgba(255,140,0,.4);
}

/* Tablet */

@media(max-width:992px){

.about-container{
grid-template-columns:1fr;
gap:40px;
}

.about-image img{
height:420px;
}

.experience-badge{
right:20px;
bottom:20px;
}

}

/* Mobile */

@media(max-width:600px){

.about-section{
padding:30px 20px;
}

.about-image img{
height:320px;
border-radius:22px;
}

.experience-badge{
padding:16px 18px;
border-radius:18px;
right:15px;
bottom:15px;
}

.experience-badge span{
font-size:30px;
}

.experience-badge p{
font-size:12px;
}

.about-content h2{
font-size:30px;
text-align:left;
}

.about-content p{
font-size:15px;
text-align:left;
}

.about-btn{
width:100%;
justify-content:center;
}

}

/* About us Completed */

/* Our Service Area Css */
      .services-section {
        padding: 30px 5%;
        background: #f7f7f7;
      }

      .section-title {
        text-align: center;
        margin-bottom: 45px;
      }

      .section-title span {
        display: inline-block;
        padding: 8px 18px;
        background: #fff2df;
        color: #f57c00;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 15px;
      }

      .section-title h2 {
        font-family: "Poppins", sans-serif;
        font-size: clamp(34px, 5vw, 52px);
        margin-bottom: 15px;
        color: #2d2d2d;
      }

      .section-title p {
        max-width: 700px;
        margin: auto;
        line-height: 1.8;
        color: #666;
      }

      /* Grid */

      .services-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
      }

      /* Hidden Cards */

      .hidden-card {
        display: none;
        opacity: 0;
        transform: translateY(25px);
        transition: 0.45s;
      }

      .hidden-card.show {
        display: block;
        animation: fadeUp 0.5s ease forwards;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(25px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Card */

      .service-card {
        background: white;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        transition: 0.35s;
      }

      .service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.22);
      }

      .service-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        transition: 0.5s;
      }

      .service-card:hover img {
        transform: scale(1.08);
      }

      .service-content {
        padding: 22px;
        text-align: center;
      }

      .service-content h3 {
        font-family: "Poppins", sans-serif;
        font-size: 21px;
        color: #333;
        margin-bottom: 18px;
      }

      .service-btn {
        display: inline-block;
        padding: 10px 26px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #555;
        border: 2px solid #bdbdbd;
        transition: 0.35s;
      }

      .service-btn:hover {
        background: linear-gradient(135deg, #ff9933, #138808);
        color: white;
        border-color: transparent;
      }

      /* Toggle Button */

      .toggle-services {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 45px auto 0;
        width: 64px;
        height: 64px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background: linear-gradient(135deg, #ff9933, #138808);
        color: white;
        font-size: 24px;
        box-shadow: 0 12px 30px rgba(255, 153, 51, 0.35);
        transition: 0.35s;
      }

      .toggle-services:hover {
        transform: translateY(-4px) scale(1.05);
      }

      .toggle-services.active i {
        transform: rotate(180deg);
      }

      /* Desktop */

      @media (max-width: 1100px) {
        .services-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* Mobile */

      @media (max-width: 600px) {
        .services-section {
          padding: 30px 20px;
        }

        .services-grid {
          grid-template-columns: 1fr;
          gap: 22px;
        }

        .service-card img {
          height: 210px;
        }

        .section-title h2 {
          font-size: 30px;
        }

        .service-content h3 {
          font-size: 19px;
        }

        .service-btn {
          width: 100%;
        }
      }
      /* Our Service Area Css completed */