@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}
.clear {
	clear:both;
}                                  


/*-------------------------------------------------
body styles start
-------------------------------------------------*/

body {
  background: #60104d;
  font-family: Georgia, serif;
  font-size: 16px;      /* base size for rem units */
  height: 100%;
  line-height: 1;     /* more fluid and responsive than px */
  color: #FFFFFF;
}


/*-------------------------------------------------
Header Styles Start
-------------------------------------------------*/

.wrapper {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
.writtlecards {
  max-width: 980px;
  width: 100%;
}


/*-------------------------------------------------
Image Styles
-------------------------------------------------*/

img {
  max-width: 100%;
  height: auto;
  display: block; /* prevents phantom whitespace below images */
}

.float-right {
  float: right;
  padding: 1%;
}

.float-left {
  float: left;
}

.centered-image {
  margin: 0 auto;
  padding: 0.5rem;
  display: block;
}

.side-image {
  padding-left: 1rem;
  padding-right: 1rem;
}


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

  .side-image {
    float: none;
    margin: 0 auto;
    padding: 0.5rem;
  }

    .float-right{
    float: none;
    margin: 0 auto;
    padding: 0.5rem;
  }
    
    
  p img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/*-------------------------------------------------
Image Styles
-------------------------------------------------*/

.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Aspect ratio for 16:9 video */
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/*-------------------------------------------------
Contact Styles Start
-------------------------------------------------*/

.contact {
	border: 3px solid #ffffff;
	border-radius: 5px;
	margin: 0.9375rem;
	padding: 0.125rem;
 
}

.contact h1 {
   font-size: 1.625rem;         
	margin: 0.625rem 0;
	padding-left: 0.625rem;   /* 10px */

}


.contact h2 {
  font-size: 1.625rem;         
	margin: 0.625rem 0;
	padding-left: 0.625rem;   /* 10px */

}



.contact p {
    font-size: 1.4rem;        /* 22.4px */
  line-height: 2rem;        /* smoother spacing */
    padding: 0.625rem 2rem 0.625rem 1rem;
  text-align: left;
}


.contact a {
    color: darkorange;  
}




/*-------------------------------------------------
Menu Styles Start
-------------------------------------------------*/

.menu {
  max-width: 960px;
  width: 100%;
  height: 4rem;
  background-color: #ffffff;
  border-radius: 1.25rem;
  margin: 0 auto;
  text-align: center;
  clear: both;
}


.menu ul {
	margin: 0;
    padding: 0;
    text-align: center;
}

.menu li {
	display: inline-block;
    margin-right: .875rem; /* Adjust to taste */

}

.menu li a {
	color:#000000;
    display: block;
	font-size: 2rem;    
	text-decoration:none;
    padding: 0.5rem 1rem 0.75rem 1rem; /* top, right, bottom, left */
	line-height: 3rem;   
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease-in-out;
    word-wrap: break-word;
}


.menu li a:hover {
    color: #ff0000;
}


/*-------------------------------------------------
Media menu Styles Start
-------------------------------------------------*/

@media screen and (max-width: 430px) {
 
  /* 🍽 Menu adjustments */
  .menu li a {
    padding: 0 0.4rem;
    line-height: 2rem;
    font-size: .875rem;
    margin-right: 0; /* Adjust to taste */ 
  }
    
    .menu {
height: auto;
padding: 0.2rem;      
  display: flex; 
  flex-wrap: nowrap;
  justify-content: flex-start; 
  overflow-x: auto;              /* Adds horizontal scrolling as a backup */
  white-space: nowrap;           /* Prevents wrapping */
}
    
    
}

@media screen and (max-width: 932px) and (orientation: landscape) {
  .menu {
    justify-content: center; /* Centers items within available width */
    padding: 0.2rem 1.25rem;     /* Adds breathing space on sides */
  }
    
    .menu li a {
    font-size: 1.25rem;
  } 
    
    
    
}





/*-------------------------------------------------
content Styles Start
-------------------------------------------------*/

.content {
	border: 3px solid #ffffff;
	border-radius: 5px;
	margin: 0.9375rem;        /* 15px */
	padding: 0.125rem 0.125rem 1.25rem 0.125rem;  /* consistent padding */


}

.content h1 {
	font-size: 1.625rem;         
	margin: 0.625rem 0;
	padding-left: 0.625rem;   /* 10px */
}


.content h2 {
 font-size: 1.625rem;        /* 24px */
margin: 0.625rem 0;
padding-left: 0.625rem;

}


.content p {
  font-size: 1.4rem;        /* 22.4px */
  line-height: 2rem;        /* smoother spacing */
  padding: 0.625rem 2rem 0.625rem 1rem;
  text-align: left;
}


.content a {
    color: darkorange;  
}

.content::after {
  content: "";
  display: table;
  clear: both;
}






/*-------------------------------------------------
table styles start
-------------------------------------------------*/
.table {
    border-collapse: collapse;
	table-layout: fixed;
	margin: 0.625rem;         /* 10px */
	margin-bottom: 1.25rem;   /* 20px */

}


.table th, td {
border: 3px solid; 
padding: 0.9375rem;       /* 15px */
font-size: 1rem;          /* base size, easy to scan */
text-align: left;
overflow-wrap: break-word;
}


.table a {
    color: darkorange;  
}


/*-------------------------------------------------
Media block
-------------------------------------------------*/

@media screen and (max-width: 768px) {
  /* 📋 Typography tweaks */
 
  .content p {
    font-size: 1rem;              /* Slightly smaller text */
    padding: 0.5rem 0.75rem;      /* Reduced side padding */
  }
    
    


  /* 📊 Table adjustments */
  .table {
    font-size: 0.9rem;
    overflow-x: auto;
    display: block;
  }

  /* 🎨 Footer background scaling */
  .footer {
    background-size: cover;
  }
}



/*-------------------------------------------------
Footer Styles Start
-------------------------------------------------*/

.footer {
	height: 4.6875rem;        /* 75px */
	background: url(../images/masks75.png);
	margin: 0 auto;
}

.copy-rights {
	height: 2.5rem;
	font-size: 1rem;
	line-height: 5rem;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	margin: 0 auto;
	margin-top: 0.625rem;

}