/* ==============================
   Uma Obbani Portfolio Styling
   AI / Data Engineer Theme
================================ */


/* General Page */

* {
  box-sizing: border-box;
}


body {

  margin: 0;

  padding: 0;

  font-family: 
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;


  background:
    linear-gradient(
      135deg,
      #0f172a,
      #1e293b
    );


  color: #e5e7eb;

}



/* Main Container */

section {

  max-width: 1100px;

  margin: 50px auto;

  padding: 25px;

}



/* Page Heading */

h2 {

  text-align: center;

  font-size: 44px;

  margin-bottom: 45px;


  color: #ffffff;


  letter-spacing: 1px;

}



/* Project Cards */

.project {

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8fafc
    );


  color: #1e293b;


  padding: 35px;


  margin-bottom: 35px;


  border-radius: 22px;


  border-left: 8px solid #38bdf8;


  box-shadow:
    0 20px 45px rgba(0,0,0,0.35);


  transition: all 0.3s ease;

}



/* Card Hover */

.project:hover {

  transform: translateY(-8px);


  box-shadow:
    0 30px 60px rgba(56,189,248,0.25);

}



/* Project Titles */

.project h3 {

  margin-top: 0;


  font-size: 29px;


  color: #0369a1;

}



/* Blue Labels */

strong {

  color: #2563eb;

}



/* Paragraphs and Lists */

p,
li {

  font-size: 17px;


  line-height: 1.7;

}



p {

  margin-bottom: 16px;

}



/* Lists */

ul {

  padding-left: 28px;

}



li {

  margin-bottom: 10px;

}



li::marker {

  color: #0284c7;

}



/* Buttons */

.btn {

  display: inline-block;


  margin-top: 20px;


  padding: 14px 28px;


  background:

    linear-gradient(

      135deg,

      #0ea5e9,

      #2563eb

    );


  color: white;


  text-decoration: none;


  font-weight: 700;


  border-radius: 40px;


  box-shadow:

    0 8px 20px rgba(37,99,235,0.4);


  transition: 0.3s ease;

}



/* Button Hover */

.btn:hover {

  transform: scale(1.08);


  background:

    linear-gradient(

      135deg,

      #2563eb,

      #1e40af

    );

}



/* Scroll Smooth */

html {

  scroll-behavior: smooth;

}



/* Mobile Responsive */

@media(max-width: 700px) {


  section {

    margin: 15px;

    padding: 10px;

  }



  h2 {

    font-size: 34px;

  }



  .project {

    padding: 22px;

    border-radius: 16px;

  }



  .project h3 {

    font-size: 23px;

  }



  p,
  li {

    font-size: 16px;

  }



  .btn {

    width: 100%;

    text-align: center;

  }


}