/* Import Raleway Font */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

/* Base Styles */
body {
  font-family: 'Raleway', sans-serif;
  background-color: #f5f7fa; /* gray-10 */
  color: #262363;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  color: #3f72b8; /* blue-90 */
}

p {
  margin: 12px 0;
}

a {
  color: #3f72b8;
  text-decoration: none;
}

a:hover {
  color: #1d5bbf;
}

ul {
  padding-left: 20px;
  margin-top: 10px;
}

/* Layout Containers */
.site-wrapper,
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.site-wrapper{
padding:130px 0 0 0!important;
}

/* Branding */
.logo {
  width: 300px;
  text-align: center;
  margin-bottom: 60px;
  padding: 20px 10px !important;
}

.logo img {
  max-width: 450px;
  width: 100%;
  height: auto;
}

.square-box {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.square-box::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.square-content {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-feature-settings: "tnum";
}

.square-content img {
  max-width: 84px;
  margin-bottom: 0.5rem;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
	.site-wrapper{
	padding:95px 0 0 0!important;
	}
	
  .logo {
    width: 200px;
    margin-bottom: 40px;
    padding: 15px 8px !important;
  }

  .logo img {
    max-width: 250px;
  }
}

/* Buttons */
.btn-primary {
  background-color: #3272d9;
  border-color: #3272d9;
  color: #fff;
}

.btn-primary:hover {
  background-color: #1d5bbf;
  border-color: #1d5bbf;
}

.btn-outline-primary {
  color: #3272d9;
  border-color: #3272d9;
}

.btn-outline-primary:hover {
  background-color: #3272d9;
  color: #fff;
}

/* Alerts */
.alert-primary {
  background-color: #cfe0fc;
  color: #103570;
  border-color: #accbfc;
}

/* Form Inputs */
.input-custom-gray {
  background-color: #f5f7fa;
  border-color: #dde3ed;
  color: #333;
}

.input-custom-gray:focus {
  border-color: #5691f0;
  box-shadow: 0 0 0 0.2rem rgba(86, 145, 240, 0.25);
}

/* Footer */
.footer {
  margin-top: 40px;
  font-size: 0.9em;
  color: #777;
  text-align: center;
}

a.dropdown-item{text-decoration:none;color:#434a54 !important;font-family: "Raleway", sans-serif;font-size:12px !important;text-transform:uppercase;letter-spacing:1px;}
a.dropdown-item:hover{background-color:#03b537 !important;color:#fff !important}
.dropdown-menu.columns-3{min-width:360px}
.dropdown-menu li a{padding:5px 15px}
.dropdown {position: relative;}
.dropdown-languages{margin-top:0px;margin-right:10px;padding:10px}
.multi-column-dropdown{list-style:none;margin:0;padding:0 10px}
.multi-column-dropdown li a{display:block;clear:both;line-height:1.5;color:#333840;white-space:normal}
.multi-column-dropdown li a:hover{text-decoration:none;color:#fff;background-color:#03b537}


.btn-language,.btn-language:visited{color:#fff!important;border:0px solid #fff!important;important;background-color:#229ad6!important; padding:10px 12px 10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.btn-language:active,.btn-language:hover{border:0px solid #fff!important;background-color:#0c7bb3!important}

.navbar-top {background-color:#ebeff5 !important;border-bottom:7px solid #229ad6/*background-color:#217f98;border-bottom:0px solid #fff*/}
.navbar-bottom {background-color:#ebeff5 !important;/*border-bottom:0px solid #fff*/}
.navbar-toggler{border-color:#fff !important;background: #58606e ! important}

/*COLORS*/
/* === GRAY === */
.gray-10 { background-color: #f5f7fa!important; }
.gray-20 { background-color: #ebeff5!important; }
.gray-30 { background-color: #dde3ed!important; }
.gray-40 { background-color: #c8d1e0!important; }
.gray-50 { background-color: #afbacc!important; }
.gray-60 { background-color: #8e99ab!important; }
.gray-70 { background-color: #707a8a!important; }
.gray-80 { background-color: #58606e!important; }
.gray-90 { background-color: #434a54!important; }
.gray-100 { background-color: #333840!important; }
/* === BLUE === */
.blue-10 { background-color: #f0f5fc!important; }
.blue-20 { background-color: #cfe0fc!important; }
.blue-30 { background-color: #accbfc!important; }
.blue-40 { background-color: #84b1fa!important; }
.blue-50 { background-color: #5691f0!important; }
.blue-60 { background-color: #3272d9!important; }
.blue-70 { background-color: #1d5bbf!important; }
.blue-80 { background-color: #114599!important; }
.blue-90 { background-color: #103570!important; }
.blue-100 { background-color: #15233b!important; }
/* === BRONZE === */
.bronze-10 { background-color: #fcf2e6!important; }
.bronze-20 { background-color: #fad8af!important; }
.bronze-30 { background-color: #f5bc76!important; }
.bronze-40 { background-color: #e89c3f!important; }
.bronze-50 { background-color: #cf7911!important; }
.bronze-60 { background-color: #ad5f00!important; }
.bronze-70 { background-color: #8a4d03!important; }
.bronze-80 { background-color: #693d07!important; }
.bronze-90 { background-color: #4d2f0b!important; }
.bronze-100 { background-color: #3321dc!important; }
/* === GREEN === */
.green-10 { background-color: #e1faeb!important; }
.green-20 { background-color: #8ef5b7!important; }
.green-30 { background-color: #46e385!important; }
.green-40 { background-color: #1ec963!important; }
.green-50 { background-color: #0aa648!important; }
.green-60 { background-color: #038537!important; }
.green-70 { background-color: #056b2e!important; }
.green-80 { background-color: #075426!important; }
.green-90 { background-color: #09401f!important; }
.green-100 { background-color: #0a2e18!important; }
/* === TEAL === */
.teal-10 { background-color: #d7faf8!important; }
.teal-20 { background-color: #83f2eb!important; }
.teal-30 { background-color: #43ded3!important; }
.teal-40 { background-color: #21c2b7!important; }
.teal-50 { background-color: #0ea197!important; }
.teal-60 { background-color: #08827a!important; }
.teal-70 { background-color: #086962!important; }
.teal-80 { background-color: #09524d!important; }
.teal-90 { background-color: #0a3d3a!important; }
.teal-100 { background-color: #0a2b29!important; }
/* === SKY === */
.sky-10 { background-color: #e8f4fa!important; }
.sky-20 { background-color: #bbe5fa!important; }
.sky-30 { background-color: #8dd4f7!important; }
.sky-40 { background-color: #53baed!important; }
.sky-50 { background-color: #229ad6!important; }
.sky-60 { background-color: #0c7bb3!important; }
.sky-70 { background-color: #066391!important; }
.sky-80 { background-color: #064d70!important; }
.sky-90 { background-color: #093952!important; }
.sky-100 { background-color: #0c2938!important; }
/* === SLATE === */
.slate-10 { background-color: #edf4f7!important; }
.slate-20 { background-color: #cbe3f5!important; }
.slate-30 { background-color: #a7ceeb!important; }
.slate-40 { background-color: #84b7db!important; }
.slate-50 { background-color: #5e95bd!important; }
.slate-60 { background-color: #48799c!important; }
.slate-70 { background-color: #376180!important; }
.slate-80 { background-color: #2d4d63!important; }
.slate-90 { background-color: #243947!important; }
.slate-100 { background-color: #1d2830!important; }
/* === INDIGO === */
.indigo-10 { background-color: #f2f2fc!important; }
.indigo-20 { background-color: #dcdcfc!important; }
.indigo-30 { background-color: #c2c2fc!important; }
.indigo-40 { background-color: #a7a7fa!important; }
.indigo-50 { background-color: #8585f2!important; }
.indigo-60 { background-color: #6767e6!important; }
.indigo-70 { background-color: #4d4dd1!important; }
.indigo-80 { background-color: #373783!important; }
.indigo-90 { background-color: #28288a!important; }
.indigo-100 { background-color: #2d2057!important; }
/* === DUSK === */
.dusk-10 { background-color: #f4f2f7!important; }
.dusk-20 { background-color: #e3dcf7!important; }
.dusk-30 { background-color: #cec2f0!important; }
.dusk-40 { background-color: #b5a6e3!important; }
.dusk-50 { background-color: #9886cf!important; }
.dusk-60 { background-color: #7a68b3!important; }
.dusk-70 { background-color: #645396!important; }
.dusk-80 { background-color: #4f4178!important; }
.dusk-90 { background-color: #3a3154!important; }
.dusk-100 { background-color: #282436!important; }
/* === PURPLE === */
.purple-10 { background-color: #f5f0fa!important; }
.purple-20 { background-color: #ead9fa!important; }
.purple-30 { background-color: #dabcf7!important; }
.purple-40 { background-color: #c79bf2!important; }
.purple-50 { background-color: #ae74e8!important; }
.purple-60 { background-color: #9656d6!important; }
.purple-70 { background-color: #7d3cbd!important; }
.purple-80 { background-color: #642b9e!important; }
.purple-90 { background-color: #4b2175!important; }
.purple-100 { background-color: #371c52!important; }
/* === MAGENTA === */
.magenta-10 { background-color: #faf0f4!important; }
.magenta-20 { background-color: #fad4e4!important; }
.magenta-30 { background-color: #fab4d1!important; }
.magenta-40 { background-color: #f78bb8!important; }
.magenta-50 { background-color: #ed5393!important; }
.magenta-60 { background-color: #d6246e!important; }
.magenta-70 { background-color: #b01355!important; }
.magenta-80 { background-color: #8a1244!important; }
.magenta-90 { background-color: #611535!important; }
.magenta-100 { background-color: #421527!important; }
/* === RED === */
.red-10 { background-color: #faf0f0!important; }
.red-20 { background-color: #fad4d4!important; }
.red-30 { background-color: #fab6b6!important; }
.red-40 { background-color: #fa8e8e!important; }
.red-50 { background-color: #f55353!important; }
.red-60 { background-color: #de1b1b!important; }
.red-70 { background-color: #b80d0d!important; }
.red-80 { background-color: #8f0e0e!important; }
.red-90 { background-color: #661414!important; }
.red-100 { background-color: #451717!important; }

.bg-brown {background-color: #A2845E !important;}

/* Small screens (phones) */
/* Base styles (mobile-first) */
h1 {
  font-size: 1.2em;
  margin-bottom: 5px;
}

h2 {
  font-size: 1.1em;
  margin-top: 30px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 6px;
}

.featured-subtitle {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.featured-title {
  font-size: 18px; /* 1.5 × 12px */
  font-weight: 700;
  line-height: 1.2;
}

.featured-symbol {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
  .shuffle {
    font-size: 64px;
    font-weight: 900;
  }

.featured-img {
  height: 36px;
}

.img-shapes {
  max-height: 30px;
  width: auto;
}

/* Medium screens (tablets) */
@media screen and (min-width: 576px) {
  h1 {
    font-size: 1.8em;
    margin-bottom: 10px;
  }

  h2 {
    font-size: 1.2em;
  }

  .featured-subtitle {
    font-size: 20px;
  }

  .featured-title {
    font-size: 30px; /* 1.5 × 20px */
  }

  .featured-symbol{
    font-size: 48px;
  }
  .shuffle {
    font-size: 48px;
    font-weight: 900;
  }

  .featured-img {
    height: 60px;
  }
  .img-shapes {
    max-height: 60px;
  }
}

/* Large screens (small laptops) */
@media screen and (min-width: 768px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.3em;
  }

  .featured-subtitle {
    font-size: 22px;
  }

  .featured-title {
    font-size: 33px; /* 1.5 × 22px */
  }

  .featured-symbol{
    font-size: 72px;
    font-weight: 800;
    line-height: 1.1px;
  }
  .shuffle {
    font-size: 72px;
    font-weight: 900;
    line-height: 1.1;
  }

  .featured-img {
    height: 72px;
  }
  .img-shapes {
    max-height: 90px;
  }
}

/* Extra large screens (desktops and up) */
@media screen and (min-width: 1001px) {
  .featured-subtitle {
    font-size: 24px;
  }

  .featured-title {
    font-size: 36px; /* 1.5 × 24px */
  }

  .featured-symbol{
    font-size: 72px;
    font-weight: 900;
    line-height: 1.1;
  }
  
  .shuffle {
    font-size: 80px;
    font-weight: 900;
    line-height: 1.1;
  }

  .featured-img {
    height: 120px;
  }
  .img-shapes {
    max-height: 150px;
  }
}