@font-face{
   font-family: 'Broadway Flat';
   src: url('fonts/broadwayflat.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
}

html, body {
  height: 100%;
  margin: 0;
}

p {
  font-family: verdana;
  font-size: 17px;
  margin-top: 5px;
}

h5 {
  font-size: 15px;
  line-height: 1.5;
}

.mainbody {
  font-family: Arial, verdana; 
  margin: 0; 
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #dbd7df;
}

.contactusbody {
  font-family: Arial, sans-serif; 
  margin: 0; 
  padding: 0;
  min-height: 100vh;
  background-color: #dbd7df;
  display: flex;
  flex-direction: column;
}

.contact-us-section {
  line-height: 1.75;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-wrapper-contactus {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #333;
  color: black;
  padding: 10px;
  text-align: center;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
}

main {
  flex: 1;
}

footer {
  border-top: 2px solid #9c00ff;
/*  border-bottom: 2px solid #9c00ff; */
  background-color: #d6cfde;
  color: black;
  text-align: center;
  padding: 35px 20px 10px;
  width: 100%;
  position: relative;
  clear: both;
  margin-top: 50px;
/*  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
}

div {

}  

.main-nav {
  background-color: #FFFFF;
  padding: 15px 20px;
  border-bottom: 4px solid #9c00ff;
  text-align: center;
  font-family: Broadway Flat, verdana;
  font-size: 25px;
  color: black;
  text-decoration: none;
}

.main-nav a {
  margin: 0 15px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.main-nav a:link {
  color: black;
}

.main-nav a:visited {
  color: black;
}

.main-nav a:not(.active):hover {
  color: #3498db;
}

.main-nav a.active {
  border-bottom: 2px solid black;
  transition: color 0.2s ease;
  padding-bottom: 5px;
}

@property --border-deg {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --clr-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}

@property --clr-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: green;
}

@property --clr-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: blue;
}

/* .main-nav a.active {
/*   position: relative;
/*   padding: 5px 5px;
/*   border: 3px solid transparent;
/*   border-image: conic-gradient(from var(--border-deg), var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-1)) 1;
/*   animation: rotate-border 5s linear infinite;
/*   border-radius: 7px;
/* }

/* Define the animation for the gradient */
@keyframes rotate-border {
  0% {
    --border-deg: 0deg;
  }
  100% {
    --border-deg: 360deg;
  }
}

/* Text Boxes and Footer */

.text-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.textboxmarketing {
  border: 2px solid black;
  padding: 5px 12px;
  margin: 0 8px;
  text-align: center;
  border-radius: 8px;
  background-color: #d6cfde;
  font-family: Montserrat;
  font-weight: 500;
  line-height: 1.75;
  
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
}

.maintextbox {
  border: 2px solid black;
  width: fit-content;
  padding: 20px;
  margin: 0 8px;
  border-radius: 8px;
  background-color: #d6cfde;
  font-family: Montserrat;
  font-weight: 500;
  line-height: 1.75;
  /* */
  /* */	
  margin-right: 25%;
  margin-left: 20px;
  font-size: 17px;
  margin-bottom: 15px;
  align-items: flex-start;
  text-align: left;
}


.textboxmarketing,
.maintextbox{
  font-size: clamp(17px, calc(0.75vw + 4px), 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.maintextbox:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.marketing-card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  transition: color 0.3s ease;
}

.logo-container {
  margin-top: 25px;
  margin-bottom: 40px;
}

footer.sub-page-footer {
  border-top: 1px solid black;
  padding-top: 10px;
  text-align: center;
}

.footer-bg-extension {
  background-color: #d6cfde;
  height: 100%;
  width: 100%;
}

footer a:link {
  color: black;
  text-decoration: none;
  font-size: 16px;
  border: 1px solid black;
  padding: 8px;
  background-color: #cfc3dd;
}

footer a:link:hover {
  border-radius: 5px;
  transition: color 0.3s ease;
  border-image: conic-gradient(from var(--border-deg), var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-1)) 1;
  animation: rotate-border 3s linear infinite;
  border-radius: 7px;
}

/* Images */

.content-row{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  margin:0 20px;
}

.content-row .maintextbox{
  flex: 2 1 400px;
  margin: 0;
}

.img-box{
  flex: 1 1 260px;
  margin: 0;
  display: flex; 
  max-width: 640px;
}

.responsive-img{
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  border: 2px solid black;
}

.img-box:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  transition: color 0.3s ease;
}

/* Marketing Row */
.marketing-row{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 20px 40px;
}

/* each pair = 1 card */
.marketing-card{
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  border: 2px solid black;
  border-radius: 8px;
  background: #d6cfde;
  max-height: 840px;
}

.marketing-card .textboxmarketing{
  flex: 1;
  border: none;
  margin: 0;
}

/* image wrapper */
.imgmarketing{
  flex: 1;
  margin: 0;
  display: flex;
  overflow: hidden;
  border-top: 2px solid black;
  border-radius: 8px;
}

/* Actual image */
.imgmarketing img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-intro-box{
  border:none;
  background:transparent;
  padding:0;
  font-family:Montserrat;
  font-weight:500;
  line-height:1.75;
  flex:2 1 400px;
  margin:0;
  margin-left: 10px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

}

.img-box-home{
  flex: 1 1 260px;
  margin: 0;
  display: flex; 
  max-width: 1500px;
}

.img-box-home:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  transition: color 0.3s ease;
}

/* Marketing Card Header */

.card-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 300px;
}

.card-label{
  width: auto;
  margin-bottom: 6px;
  font-family: Bebas Neue, verdana;
  font-size: 25px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 15px;
}

/* Mobile */

@media (max-width:768px){
  .content-row{
    flex-direction:column;
  }
  .img-box{
    align-self:center;
    max-width:80%;
  }
}

@media (max-width:768px){
  .marketing-row{
    flex-direction: column;
  }
}

@media (max-width:1000px){
  .content-row{
    flex-direction: column;
  }
  .img-box{
    align-self: center;
    max-width: 90%;
    height: auto;
  }
  .img-box .responsive-img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}