html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

body {
font-family:'Nunito Sans', sans-serif !important;
color: #1f1c1f !important;
}
a{
text-decoration:none !important;
color: #1f1c1f !important;
}

p {
line-height:34px;
color: #1f1c1f !important;
}

#logotext h1{
text-align:center;
font-family: 'Nunito Sans', sans-serif;
font-size: 50px !important;
color: #1f1c1f;
margin-bottom: 0px;
font-weight: 700;
letter-spacing: 2px;
padding:30px;
}

hr:not([size]) {
width:30%;
margin:0px auto;
}

.navlink {
text-align:center;
padding:2%;
}

.navlink a{
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
font-size:13px;
padding:20px 30px !important;
}

.navlink a:hover {
color:#d4b40f !important;
}

/********* End Navigation ************/

/***** Start Page Title Below Nav ****/

/* Page Title Padding and Margin */

#titletext h2{
text-align:center !important;
font-family: 'Nunito Sans', sans-serif;
font-size: 30px !important;
color: #1f1c1f;
margin-bottom: 0px;
font-weight: 700;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
}

.pagetitle{
padding-top:60px;
padding-bottom:30px;
background:#F6F5F6;
margin-top:0px;
margin-bottom:0px;
}

/* Controls font for Page Title */
.pagetitle h1{
font-family: 'Nunito Sans', sans-serif;
font-weight:200;
font-size:50px;
text-align:center;
color:#1f1c1f;
}

/***** End Page Title Below Nav ******/

/***** Contact Form Styling  *********/

*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}

.formcontainer {
margin:auto;
text-align:center;
padding-bottom: 15px;
padding-top: 15px;
}

.elem-group {
margin-bottom:30px;
}

label {
display: block;
font-family: 'Nunito Sans', sans-serif;
font-size:1.25em;
}

input, select, textarea {
background-color:#FFFFFF;
border:1px solid #d6d6d4 !important;
border-radius:6px;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 1.25em;
font-family: 'Nunito Sans', sans-serif;
width: 400px;
padding:10px;
}

/* Sets text input color */
input{
color:#1f1c1f !important;
}

/* Height of Text Message Area */
textarea {
height: 150px;
}

/* Button Styling */
button {
background-color:#333;
font-weight:700;
border: 1px solid #ffffff;
font-size: 1em;
Color: #FFFFFF;
font-family: 'Nunito Sans', sans-serif;
border-radius: 6px;
margin-top:15px;
padding:15px;
}

/* Hover color shift when hovering on button */
button:hover {
color:#FFFFFF;
background:#d4b40f;
border: 1px solid #d4b40f;
}

#con {
background-color: #fbfbfb;
padding: 1% 2% !important;
}

#innercon{
padding:3% !important;
}
#mainone{
padding:1% !important;
background-color:#ffffff;
}

#maintwo{
padding:0% !important;
background:#333;
}

#learnafricanlanguages h2{
color:#FFFFFF !important;
text-align:center;
font-size: 30px;
padding: 3px;
}

#maintwo a{
display:block;
}

.copyright{
font-size:14px;
background-color:#1d1d1d;
padding:10px;
color:#f1f1f1;
text-align:center;
}

.copyright a{
  color:#FFFFFF !important;
}

/* ===== Map (center + framed, non-clickable) ===== */
.map-container {           /* centers the whole map section on desktop */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.map-figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.map-figure img {
  display: block;
  width: 100%;
  height: auto;           /* keeps aspect ratio */
  border-radius: 8px;
}
.map-caption {
  text-align: center;
  font-size: 13px;
  color: #6b6b6b;
  margin-top: 6px;
}
.map-caption a {
  color: #6b6b6b !important;
  text-decoration: underline !important;
}
.map-caption a:hover { color: #d4b40f !important; }

/* ===== Start Learning section (cards) ===== */
.region-card{
  background:#f7f7f7;
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  height:100%;
}
.region-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.09);
}
.region-head{ margin-bottom:10px; }
.region-title{
  font-size:20px;
  font-weight:800;
  margin:0;
  color:#1f1c1f;
}
/* In case something else bumps heading size, enforce it: */
.region-card .region-head .region-title{
  font-size:22px !important;
  line-height:1.25;
  margin:0 0 6px;
}

ul.lang-list{
  list-style:none !important;
  margin:6px 0 0 !important;
  padding-left:0 !important;
}
ul.lang-list > li{ margin:10px 0; }

.lang-list a{
  display:inline-block;
  padding:4px 8px;
  border-radius:8px;
  text-decoration:none;
  color:#1f1c1f;
  transition: background .15s ease, color .15s ease;
}
.lang-list a:hover{
  background:#1f1c1f;
  color:#fff !important;       /* override global a{color:... !important} */
}


@media screen and (max-width: 800px) {

#logotext h1{
font-size: 40px !important;
}
.navlink a{
display:block;
}

.table{
width:100% !important;
border-spacing: 15px 15px;
position:relative;
}

input, select, textarea, button  {
font-size:1.10em;
}
input, select, textarea  {
font-size:1.10em;
width:300px;
}
}