@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic");

/*
	Tessellate by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

/* ================================
   Chocolate Luxe Typography
   ================================ */

   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Raleway:wght@400;600&display=swap');

   :root {
	 --choco-dark: #3E2723;
	 --choco-medium: #5D4037;
	 --choco-light: #795548;
	 --choco-caramel: #A0522D;
	 --choco-milk: #D2691E;
	 --choco-cream: #FFE0B2;
	 --choco-white: #FFF8E1;
	 --text-main: #FBE9E7;
	 --text-muted: #D7CCC8;
	 --shadow-soft: rgba(0, 0, 0, 0.2);
	 --transition-fast: 0.3s ease;
   }
   
   body {
	 margin: 0;
	 background-color: var(--choco-dark);
	 color: var(--text-main);
	 font-family: 'Raleway', sans-serif;
	 line-height: 1.8;
	 font-size: 1.1rem;
	 text-align: center;
   }
   
   h1, h2, h3 {
	 font-family: 'Playfair Display', serif;
	 font-weight: 700;
	 color: var(--choco-cream);
	 margin-bottom: 0.5em;
	 text-align: center;
   }
   
   p {
	 color: var(--text-muted);
	 margin-bottom: 1.2em;
	 font-size: 1.05rem;
	 text-align: center;
   }
   
   a {
	 color: var(--choco-caramel);
	 transition: color var(--transition-fast);
   }
   
   a:hover {
	 color: var(--choco-milk);
   }
   
   section.dark {
	 background: linear-gradient(145deg, var(--choco-medium), var(--choco-dark));
	 padding: 4em 0;
	 box-shadow: 0 4px 12px var(--shadow-soft);
   }
   
   section.main {
	 background-color: var(--choco-light);
	 padding: 4em 0;
	 border-top: 1px solid var(--choco-caramel);
   }
   
   .container {
	 max-width: 1200px;
	 margin: 0 auto;
	 padding: 0 2em;
   }
   
   .button {
	 display: inline-block;
	 background-color: var(--choco-caramel);
	 color: var(--choco-white);
	 padding: 0.75em 1.5em;
	 border-radius: 30px;
	 font-weight: 500;
	 box-shadow: 0 4px 8px var(--shadow-soft);
	 transition: background-color var(--transition-fast), transform var(--transition-fast);
	 text-align: center;
   }
   
   .button:hover {
	 background-color: var(--choco-milk);
	 transform: translateY(-2px);
   }
   
   .feature-icon {
	 font-size: 2.5em;
	 color: var(--choco-milk);
	 margin-bottom: 0.5em;
   }
   
   .image.fit img {
	 width: 100%;
	 height: auto;
	 border-radius: 12px;
	 box-shadow: 0 4px 12px var(--shadow-soft);
	 transition: transform var(--transition-fast);
   }
   
   .image.fit img:hover {
	 transform: scale(1.03);
   }
   
   footer {
	 background-color: var(--choco-dark);
	 color: var(--text-muted);
	 text-align: center;
	 padding: 2em 0;
	 font-size: 0.9em;
   }
   
   .row {
	 display: flex;
	 flex-wrap: wrap;
	 gap: 2em;
	 justify-content: center;
	 margin-top: 2em;
   }
   
   .col-4, .col-6, .col-8, .col-12 {
	 flex: 1;
	 min-width: 280px;
	 text-align: center;
   }
   
   .content.style1,
   .content.style2,
   .content.style3 {
	 background-color: var(--choco-medium);
	 padding: 3em;
	 border-radius: 16px;
	 box-shadow: 0 6px 16px var(--shadow-soft);
	 text-align: center;
   }
   
   @media screen and (max-width: 768px) {
	 .row {
	   flex-direction: column;
	 }
   
	 .button {
	   width: 100%;
	   text-align: center;
	 }
   
	 .container {
	   padding: 0 1em;
	 }
   }