/* =====================
   RESET & GLOBAL
===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  line-height: 1.6;
  color: #1a1a1a;
  background: #ffffff;
}

h1, h2, h3, h4 {
  font-weight: 600;
}

section {
  padding: 70px 8%;
}

button {
  cursor: pointer;
  border: none;
}

/* =====================
   TOP BAR
===================== */
.topbar {
  background: #111;
  color: #ccc;
  font-size: 13px;
  padding: 6px 8%;
  display: flex;
  justify-content: flex-end;
}

.topbar span {
  margin-left: 20px;
  cursor: pointer;
}

.topbar span:hover {
  color: white;
}

/* =====================
   NAVBAR
===================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 8%;
  border-bottom: 1px solid #eee;
  background: #fff;
  transition: 0.3s;
}

.logo {
  width: 130px;
}
.logo img{
  width: 150px;
  height: auto;
  display: block;
}

/* MENU */
.menu {
  list-style: none;
  display: flex;
  gap: 30px;
}

.menu a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
  position: relative;
}

.menu a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: #f80000;
  left: 0;
  bottom: -6px;
  transition: 0.3s;
}

.menu a:hover::after {
  width: 100%;
}

/* SIGN IN BUTTON */
.signin-btn {
  background: cadetblue;
  color: white;
  padding: 8px 18px;
  font-weight: 500;
  border-radius: 4px;
}

.signin-btn:hover {
  background: #cc0000;
}

/* Sticky Navbar */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* =====================
   HERO SECTION
===================== */
.hero {
  height: 85vh;
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
  url("../images/background_image.jpg") center/cover;
  display: flex;
  align-items: center;
  color: white;
}

.hero-content {
  max-width: 650px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 15px;
}

.hero p {
  margin-bottom: 25px;
  font-size: 18px;
}

.hero-buttons button {
  padding: 14px 28px;
  margin-right: 12px;
  font-size: 15px;
  border-radius: 3px;
}

.primary {
  background: cadetblue;
  color: white;
}

.primary:hover {
  background: #cc0000;
}

.secondary {
  background: white;
  color: #111;
}




/* =========================
   SECTION
========================= */

.services-section{

  padding: 30px 16px;

  background: #f3f3f3;

}

/* =========================
   GRID
========================= */

.services-grid{

  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 18px;

}

/* =========================
   CARD
========================= */

.service-card{

  position: relative;

  overflow: hidden;

  background: #f3f3f3;

  border: 1px solid #c8c8c8;

  border-radius: 28px;

  padding: 30px 30px 170px;

  height: 493px;

  transition: 0.45s ease;

}

/* HOVER */

.service-card:hover{

  transform: translateY(-8px);

  box-shadow:
  0 18px 40px rgba(0,0,0,0.08);

}

/* =========================
   CARD COLORS
========================= */

.service-card:nth-child(1):hover{

  background:
  linear-gradient(
    135deg,
    #52b3a8,
    #3f9d92
  );

}

.service-card:nth-child(2):hover{

  background:
  linear-gradient(
    135deg,
    #9c2394,
    #c22db7
  );

}

.service-card:nth-child(3):hover{

  background:
  linear-gradient(
    135deg,
    #12007a,
    #2411b8
  );

}

/* =========================
   TITLE
========================= */

.service-card h3{

  font-size: 32px;

  line-height: 1.2;

  font-weight: 700;

  color: #111;

  margin-bottom: 24px;

  transition: 0.4s ease;

}

/* =========================
   TEXT
========================= */

.service-card p{

  font-size: 17px;

  line-height: 1.7;

  color: #222;

  transition: 0.4s ease;

}

/* WHITE TEXT */

.service-card:hover h3,
.service-card:hover p{

  color: white;

}

/* =========================
   BUTTON
========================= */

.service-card a{

  position: absolute;

  left: 30px;

  bottom: 186px;

  width: 220px;

  height: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 60px;

  border: 2px solid #ff3b30;

  text-decoration: none;

  color: #ff3b30;

  font-size: 18px;

  font-weight: 500;

  background: transparent;

  transition: 0.4s ease;

  z-index: 5;

}

/* BUTTON HOVER */

.service-card:hover a{

  background: white;

  color: #111;

  border-color: white;

}

/* =========================
   CURVES
========================= */

.curve-lines{

  position: absolute;

  inset: 0;

}

.curve-lines::before,
.curve-lines::after{

  transition: 0.5s ease;

}

/* =========================
   CARD 1 CURVES
========================= */

.service-card:nth-child(1) .curve-lines::before{

  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  border: 16px solid #52b3a8;

  border-radius: 50%;

left: -189px;
    bottom: -360px;

}

.service-card:nth-child(1) .curve-lines::after{

  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  border: 16px solid #52b3a8;

  border-radius: 25%;
right: -114px;
    bottom: -190px;

}

/* =========================
   CARD 2 CURVES
========================= */

.service-card:nth-child(2) .curve-lines::before{

  content: "";

  position: absolute;

  width: 340px;
  height: 340px;

  border: 16px solid #9c2394;

     border-radius: 20%;

  left: -70px;
  bottom: -250px;

}

.service-card:nth-child(2) .curve-lines::after{

  content: "";

  position: absolute;

  width: 560px;
  height: 560px;

  border: 16px solid #9c2394;

  border-radius: 50%;

  right: -421px;
  bottom: -470px;

}

/* =========================
   CARD 3 CURVES
========================= */

.service-card:nth-child(3) .curve-lines::before{

  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  border: 16px solid #12007a;

  border-radius: 50%;

  left: -120px;
  bottom: -210px;

}

.service-card:nth-child(3) .curve-lines::after{

  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  border: 16px solid #12007a;

  border-radius: 50%;

  right: -210px;
  bottom: -360px;

}

/* =========================
   WHITE CURVES
========================= */

.service-card:hover .curve-lines::before,
.service-card:hover .curve-lines::after{

  border-color: rgba(255,255,255,0.95);

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

  .services-grid{

    grid-template-columns: repeat(2,1fr);

  }

}

@media(max-width:768px){

  .services-grid{

    grid-template-columns: 1fr;

  }

  .service-card{

    height: auto;

  }

}


/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:768px){

  .services-grid{

    grid-template-columns: 1fr 1fr;

    gap: 8px;

  }

  .service-card{

    height: 330px;

    padding: 20px 18px 90px;

    border-radius: 20px;

  }

  /* TITLE */

  .service-card h3{

    font-size: 26px;

    line-height: 1.2;

    margin-bottom: 18px;

  }

  /* TEXT */

  .service-card p{

    font-size: 14px;

    line-height: 1.6;

  }

  /* BUTTON */

  .service-card a{

    width: 150px;

    height: 46px;

    font-size: 14px;

    left: 18px;

    bottom: 123px;

  }

  /* =========================
     CARD 1 CURVES
  ========================= */

  .service-card:nth-child(1) .curve-lines::before{

    width: 260px;
    height: 260px;

    left: -180px;
    bottom: -220px;

  }

  .service-card:nth-child(1) .curve-lines::after{

    width: 170px;
    height: 170px;

    right: -70px;
    bottom: -120px;

  }

  /* =========================
     CARD 2 CURVES
  ========================= */

  .service-card:nth-child(2) .curve-lines::before{

    width: 200px;
    height: 200px;

    left: -40px;
    bottom: -140px;

  }

  .service-card:nth-child(2) .curve-lines::after{

    width: 320px;
    height: 320px;

    right: -150px;
    bottom: -260px;

  }

  /* =========================
     CARD 3 CURVES
  ========================= */

  .service-card:nth-child(3) .curve-lines::before{

    width: 170px;
    height: 170px;

    left: -70px;
    bottom: -120px;

  }

  .service-card:nth-child(3) .curve-lines::after{

    width: 260px;
    height: 260px;

    right: -120px;
    bottom: -200px;

  }

  /* CURVE BORDER */

  .curve-lines::before,
  .curve-lines::after{

    border-width: 12px !important;

  }

}





/* =====================
   SOLUTIONS
===================== */
.solutions {
  background: #f4f4f4;
  text-align: center;
}

.solution-grid {
  display: flex;
  gap: 25px;
  margin-top: 30px;
}

.solution-card {
  background: white;
  padding: 30px;
  flex: 1;
  border-radius: 6px;
  transition: 0.3s;
}

.solution-card:hover {
  transform: translateY(-8px);
}

/* =====================
   CLOUD SECTION
===================== */
.cloud {
  background: #111;
  color: white;
  text-align: center;
}

.cloud-content {
  max-width: 700px;
  margin: auto;
}

.cloud button {
  margin-top: 20px;
  padding: 14px 28px;
  background: #f80000;
  color: white;
  border-radius: 3px;
}

.cloud button:hover {
  background: cadetblue;
}

/* =====================
   CONTACT FORM
===================== */
.contact {
  text-align: center;
}

.contact form {
  max-width: 500px;
  margin: auto;
  margin-top: 25px;
}

.contact input,
.contact textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.contact textarea {
  min-height: 120px;
  resize: vertical;
}

.contact button {
  background: #f80000;
  color: white;
  padding: 12px 22px;
  border-radius: 4px;
}

.contact button:hover {
  background: #cc0000;
}

/* =====================
   FOOTER
===================== */
footer {
  background: #1a1a1a;
  color: #bbb;
  padding: 60px 8%;
}


.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 25px;
}

.footer-grid div{
  flex: 1 1 220px;
}

footer h4 {
  color: white;
  margin-bottom: 10px;
}

footer p {
  margin: 6px 0;
  cursor: pointer;
}

footer p:hover {
  color: white;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

/* =====================
   MOBILE MENU
===================== */
.menu-toggle {
  display: none;
  font-size: 26px;
  cursor: pointer;
}

/* =========================
   MEET THE EXPERTS
========================= */

.experts-section{
  padding: 100px 4%;
  background:
  linear-gradient(rgba(255,255,255,0.94),
  rgba(255,255,255,0.94)),
  url("./images/background_image.png");

  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* TOP */

.experts-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.experts-left{
  max-width: 900px;
}

.experts-left h2{
  font-size: 40px;
  font-weight: 500;
  color: #111;
  margin-bottom: 30px;
  position: relative;
  padding-left: 20px;
}

.experts-left h2::before{
  content: "";
  width: 6px;
  height: 65px;
  background: #f80000;

  position: absolute;
  left: 0;
  top: 5px;
}

.experts-left p{
  font-size: 20px;
  line-height: 1.8;
  color: #111;
}

/* BUTTONS */

.experts-buttons{
  display: flex;
  gap: 20px;
}

.experts-buttons button{
  width: 90px;
  height: 70px;

  background: transparent;
  border: 3px solid #b5b5b5;

  font-size: 40px;
  color: #9c9c9c;

  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.experts-buttons button:hover{
  background: #f80000;
  border-color: #f80000;
  color: white;
}

/* SLIDER */

.experts-slide{
  display: flex;
  gap: 35px;
}

/* CARD */

.expert-card{
  width: 50%;
  display: flex;
  align-items: flex-start;
  gap: 35px;

  background: rgba(255,255,255,0.95);

  padding: 25px;
}

/* IMAGE */

.expert-image img{
  width: 340px;
  height: 420px;
  object-fit: cover;
}

/* CONTENT */

.expert-content{
  padding-top: 10px;
}

.expert-content h3{
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #222;
}

.expert-content span{
  display: block;
  font-size: 24px;
  margin-bottom: 30px;
  color: #222;
}

.expert-content p{
  font-size: 21px;
  line-height: 1.8;
  color: #333;
}

/* RESPONSIVE */

@media(max-width:1400px){

  .experts-slide{
    flex-direction: column;
  }

  .expert-card{
    width: 100%;
  }

}

@media(max-width:900px){

  .experts-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .expert-card{
    flex-direction: column;
  }

  .expert-image img{
    width: 100%;
    height: auto;
  }

  .experts-left h2{
    font-size: 42px;
  }

  .experts-left p{
    font-size: 20px;
  }

  .expert-content h3{
    font-size: 30px;
  }

}
/*  */

/*  */


    .contact-hero{
      height: 55vh;
      background:
      linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
       url("./resources/ui/appl/images/background_image.jpg");

      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      padding: 20px;
    }

    .contact-hero h1{
      font-size: 55px;
      margin-bottom: 15px;
    }

    .contact-hero p{
      max-width: 700px;
      margin: auto;
      font-size: 20px;
    }

    .contact-page{
      padding: 90px 8%;
      background: #f7f7f7;
    }

    .contact-grid{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 50px;
      align-items: start;
    }

    .contact-info{
      background: white;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .contact-info h2{
      margin-bottom: 25px;
      font-size: 38px;
    }

    .contact-box{
      margin-bottom: 25px;
    }

    .contact-box h3{
      color: #f80000;
      margin-bottom: 8px;
    }

    .contact-box p{
      color: #555;
      line-height: 1.8;
    }

    .contact-form-page{
      background: white;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .contact-form-page h2{
      margin-bottom: 25px;
      font-size: 38px;
    }

    .contact-form-page input,
    .contact-form-page textarea{
      width: 100%;
      padding: 14px;
      margin-bottom: 18px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 15px;
    }

    .contact-form-page textarea{
      min-height: 150px;
      resize: vertical;
    }

    .contact-form-page button{
      background: #f80000;
      color: white;
      border: none;
      padding: 14px 28px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    .contact-form-page button:hover{
      background: #cc0000;
    }

    .map-section{
      padding: 90px 8%;
      background: white;
      text-align: center;
    }

    .map-section h2{
      margin-bottom: 30px;
      font-size: 42px;
    }

    .map-box{
      width: 100%;
      height: 400px;
      background: #e5e5e5;
      border-radius: 10px;

      display: flex;
      align-items: center;
      justify-content: center;

      color: #555;
      font-size: 22px;
    }

    @media(max-width:900px){

      .contact-grid{
        grid-template-columns: 1fr;
      }

    }

    @media(max-width:700px){

      .contact-hero h1{
        font-size: 38px;
      }

      .contact-info h2,
      .contact-form-page h2,
      .map-section h2{
        font-size: 30px;
      }

    }

  
/*  */


    .services-hero{
      height: 60vh;
      background:
      linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
      url("images/background_image.jpg") center/cover;

      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      padding: 20px;
    }

    .services-hero h1{
      font-size: 55px;
      margin-bottom: 15px;
    }

    .services-hero p{
      font-size: 20px;
      max-width: 800px;
      margin: auto;
    }

    .services-section{
      padding: 24px 8%;
      background: #fff;
    }
    
    .services-section h2{
    text-align: center;
    padding-bottom: 3%;
    font-size: 30px;
    }

    .services-title{
      text-align: center;
      margin-bottom: 60px;
    }

    .services-title h2{
      font-size: 40px;
      margin-bottom: 15px;
    }

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

    .service-box{
      background: #f7f7f7;
      padding: 35px;
      border-radius: 10px;
      transition: 0.3s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .service-box:hover{
      transform: translateY(-8px);
    }

    .service-box h3{
      margin-bottom: 15px;
      color: #111;
      font-size: 24px;
    }

    .service-box p{
      color: #555;
      line-height: 1.8;
    }

    .service-btn{
      margin-top: 20px;
      display: inline-block;
      background: #f80000;
      color: white;
      padding: 12px 22px;
      text-decoration: none;
      border-radius: 4px;
    }

    .service-btn:hover{
      background: #cc0000;
    }

    .process-section{
      background: #111;
      color: white;
      padding: 80px 8%;
      text-align: center;
    }

    .process-grid{
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 25px;
      margin-top: 40px;
    }

    .process-box{
      background: #1e1e1e;
      padding: 30px;
      border-radius: 8px;
    }

    .process-box h3{
      color: #f80000;
      margin-bottom: 10px;
      font-size: 28px;
    }

    .cta-section{
      padding: 90px 8%;
      text-align: center;
      background: #f4f4f4;
    }

    .cta-section h2{
      font-size: 42px;
      margin-bottom: 20px;
    }

    .cta-section p{
      max-width: 700px;
      margin: auto;
      margin-bottom: 30px;
      color: #555;
    }

    .cta-btn{
      background: #f80000;
      color: white;
      padding: 15px 30px;
      border-radius: 5px;
      text-decoration: none;
      font-size: 18px;
    }

    .cta-btn:hover{
      background: #cc0000;
    }

    @media(max-width: 1000px){

      .services-grid{
        grid-template-columns: repeat(2,1fr);
      }

      .process-grid{
        grid-template-columns: repeat(2,1fr);
      }

    }

    @media(max-width: 700px){

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

      .process-grid{
        grid-template-columns: 1fr;
      }

      .services-hero h1{
        font-size: 38px;
      }

    }

 
/*  */
/*  */
/* =====================
   RESPONSIVE DESIGN
===================== */
@media (max-width: 900px) {

  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 8%;
    top: 70px;
    background: white;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }

  .show-menu {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-grid {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 34px;
  }
}