/*
    Cascading Style Sheet (CSS) for ARGONIX LIMITED website.
    To be hosted at: argonixltd.com and/or argonixltd.co.uk

    Written by Argonix Limited. All rights reserved.
*/
:root{
  --bg: #0b0f14;
  --card: #0f1720;
  --glass: rgba(255,255,255,0.03);
  --max-width: 1100px;
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}

*{box-sizing: border-box}
html,body{height: 100%}
body{
  margin: 0;
  background: linear-gradient(180deg, #061017 0%, #07101a 100%);
  color: #e6eef6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}

.site-header{
  width: 100%;
}

.container{
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 5px 24px;
}

/* Snap Container */
.snap-container{
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100vh;
}

/* Snap Sections */
.snap-section{
  scroll-snap-align: start;
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  padding: 48px 0;
}

/* Section - HOME */
.home-art img{
  margin-top: -70px;
  width: calc(100vw);
  height: calc(100vh);
  object-fit: cover;
}

/* Section - SERVICES */
.services-grid{display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 20px}
.services-grid-card{background: var(--card); padding: 15px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.45)}

/* Section - ABOUT */
.about-grid{display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 20px}
.about-grid-card{background: var(--card); padding: 15px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.45)}

/* Section - CONTACT */
.contact-grid{display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 20px}
.contact-grid-card{background: var(--glass); padding: 15px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); text-align: center}
.contact-grid-single{display: grid; grid-template-columns: repeat(1,1fr); gap: 20px; margin-bottom: 20px}

/* Buttons */
.button {
  background-color: #0b0f14;
  border: 2px solid #d40533;
  border-radius: 10px;
  color: white;
  padding: 10px 10px;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

/* Footer */
.site-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #d40533;
  color: white;
  text-align: center;
}

/* Screen Size Responsive Layouts */
@media (max-width: 900px){
  .services-grid{grid-template-columns: repeat(2,1fr)}
  .about-grid{grid-template-columns: repeat(2,1fr)}
  .contact-grid{grid-template-columns: repeat(3,1fr)}
}
@media (max-width: 600px){
  .services-grid{grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px}
  .services-grid-card{background: var(--card); padding: 10px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.45)}
  .about-grid{grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px}
  .about-grid-card{background: var(--card); padding: 10px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.45)}
  .contact-grid{grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px}
  .contact-grid-card{background: var(--glass); padding: 10px; border-radius: 10px; box-shadow:0 6px 12px rgba(0,0,0,0.45); text-align: center}
  .home-art img{background-color: #d40533; object-fit: contain}
}