/* =========================================
   GOOGLE FONT IMPORT
========================================= */

/*
  Imports Poppins font from Google Fonts
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


/* =========================================
   CSS RESET
========================================= */

/*
  Removes default browser spacing
  from ALL elements
*/
* {
  margin: 0;
  padding: 0;

  /*
    Makes width calculations easier
  */
  box-sizing: border-box;
}


/* =========================================
   ROOT VARIABLES
========================================= */

/*
  Variables let us reuse colors easily

  Example:
  var(--primary-color)
*/

:root {

  /* Main dark color */
  --primary-color: #111827;

  /* Soft boutique purple */
  --accent-color: #C084FC;

  /* Gold luxury color */
  --gold-color: #D4AF37;

  /* Background color */
  --light-color: #F9FAFB;

  /* Text color */
  --text-color: #1F2937;

  /* Gray border */
  --gray-color: #E5E7EB;

  /* White */
  --white-color: #FFFFFF;
}


/* =========================================
   HTML
========================================= */

/*
  Smooth scrolling when clicking links
*/
html {
  scroll-behavior: smooth;
}


/* =========================================
   BODY
========================================= */

body {

  /*
    Main website font
  */
  font-family: 'Poppins', sans-serif;

  background-color: var(--light-color);

  color: var(--text-color);

  line-height: 1.6;
}


/* =========================================
   GLOBAL IMAGE FIX
========================================= */

/*
  Prevents images from overflowing
*/
img {
  max-width: 100%;

  display: block;
}


/* =========================================
   REUSABLE CONTAINER
========================================= */

/*
  Keeps content centered
  and prevents stretching
*/
.container {

  width: 90%;

  max-width: 1200px;

  margin: auto;
}


/* =========================================
   REUSABLE SECTION SPACING
========================================= */

.section {
  padding: 50px 0;
}


/* =========================================
   HEADINGS
========================================= */

h1,
h2,
h3,
h4 {

  line-height: 1.3;
}


/* =========================================
   PARAGRAPHS
========================================= */

p {
  line-height: 1.8;
}


/* =========================================
   LINKS
========================================= */

/*
  Removes default underline
*/
a {
  text-decoration: none;
}


/* =========================================
   BUTTONS
========================================= */

.btn {

  display: inline-flex;

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

  padding: 14px 30px;

  border-radius: 10px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;
}


/* Main button */
.primary-btn {

  background-color: var(--primary-color);

  color: var(--white-color);
}


/* Button hover */
.primary-btn:hover {

  transform: translateY(-3px);

  background-color: var(--accent-color);
}