/* ==========================================================
   HOSPITALITY WIFI
   DESIGN SYSTEM
   Version 3.0
========================================================== */

:root{

/*==========================================================
  BRAND COLOURS
==========================================================*/

--primary:#0F2747;
--primary-light:#1F4C7D;
--secondary:#C8A45A;

--white:#FFFFFF;
--off-white:#F8F9FB;
--light-grey:#EEF2F6;
--medium-grey:#D9E1EA;

--text:#2D3748;
--text-light:#64748B;

--success:#22C55E;
--warning:#F59E0B;
--danger:#DC2626;

/*==========================================================
  TYPOGRAPHY
==========================================================*/

--font-heading:'Playfair Display',serif;
--font-body:'Inter',sans-serif;

--fs-xs:.80rem;
--fs-sm:.90rem;
--fs-base:1rem;
--fs-lg:1.125rem;
--fs-xl:1.35rem;
--fs-2xl:2rem;
--fs-3xl:2.75rem;
--fs-4xl:3.5rem;
--fs-5xl:4.5rem;

--fw-light:300;
--fw-normal:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;

/*==========================================================
  SPACING
==========================================================*/

--space-xs:.5rem;
--space-sm:1rem;
--space-md:1.5rem;
--space-lg:2rem;
--space-xl:3rem;
--space-2xl:4rem;
--space-3xl:6rem;
--space-4xl:8rem;

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

--container:1280px;
--container-wide:1440px;

/*==========================================================
  BORDER RADIUS
==========================================================*/

--radius-sm:6px;
--radius-md:10px;
--radius-lg:16px;
--radius-xl:22px;
--radius-pill:999px;

/*==========================================================
  SHADOWS
==========================================================*/

--shadow-sm:
0 2px 8px rgba(0,0,0,.05);

--shadow-md:
0 8px 20px rgba(0,0,0,.08);

--shadow-lg:
0 15px 40px rgba(0,0,0,.12);

--shadow-xl:
0 25px 60px rgba(0,0,0,.18);

/*==========================================================
  TRANSITIONS
==========================================================*/

--transition-fast:.2s ease;
--transition:.3s ease;
--transition-slow:.5s ease;

/*==========================================================
  Z INDEX
==========================================================*/

--z-header:1000;
--z-dropdown:1100;
--z-overlay:1200;
--z-modal:1300;

/*==========================================================
  BREAKPOINTS
==========================================================*/

--mobile:576px;
--tablet:768px;
--laptop:992px;
--desktop:1200px;

}

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

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:var(--font-body);
font-size:var(--fs-base);
font-weight:400;
line-height:1.7;

color:var(--text);

background:var(--white);

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}

img{

display:block;
max-width:100%;
height:auto;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

button{

font:inherit;
cursor:pointer;
border:none;
background:none;

}

input,
textarea,
select{

font:inherit;

}

section{

padding:var(--space-4xl) 0;

}

/*==========================================================
  LAYOUT
==========================================================*/

.container{

width:min(92%,var(--container));

margin-inline:auto;

}

.container-wide{

width:min(95%,var(--container-wide));

margin-inline:auto;

}

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

.section-heading{

text-align:center;

margin-bottom:4rem;

}

.section-heading h2{

font-family:var(--font-heading);

font-size:var(--fs-3xl);

color:var(--primary);

margin-bottom:1rem;

}

.section-heading p{

max-width:760px;

margin:auto;

font-size:1.1rem;

color:var(--text-light);

}

/*==========================================================
  HERO TAG
==========================================================*/

.hero-tag{

display:inline-block;

padding:.45rem 1rem;

background:#EDF5FF;

border-radius:999px;

font-size:.8rem;

font-weight:600;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--primary);

margin-bottom:1rem;

}

/*==========================================================
  SOLUTIONS
==========================================================*/

@media (max-width:768px){

    .solution-grid{

        grid-template-columns:1fr;

    }

    .solution-image{

        height:220px;

    }

}