@font-face {
    font-family: Graphik;
    src: url('../assets/fonts/Graphik.woff/Graphik-Regular.woff');
  }

body { 
    margin: 0px; font-family: "Graphik", serif !important; font-size: 18px; font-style: normal; line-height: 28px; letter-spacing: -0.1px;
}

.info-container {
  width: 100%; height: 100%; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 40px; display: inline-flex
}


/* titles and text styles */
h1 {
    align-self: stretch; text-align: left; color: #008427; font-size: 56px; font-family: Graphik; font-weight: 600; line-height: 56px; word-wrap: break-word;
}

.h1-card {
  align-self: stretch; text-align: center; color: #008427; font-size: 56px; font-family: Graphik; font-weight: 600; line-height: 56px; word-wrap: break-word;
}

h4 {
    align-self: stretch; text-align: left; color: #6E6E6E; font-size: 24px; font-family: Graphik; font-weight: 600; line-height: 28px; word-wrap: break-word;
}

.h4-card {
  align-self: stretch; text-align: center; color: #6E6E6E; font-size: 24px; font-family: Graphik; font-weight: 600; line-height: 28px; word-wrap: break-word;
}

.blue-heading {
  width: 484px; height: 28px; color: #0060C6; font-size: 19px; font-family: Graphik; font-weight: 500; line-height: 28px; word-wrap: break-word
}



/* button styles */
.btn-block-grn {
  width: 325px; height: 60px; padding-left: 40px; padding-right: 40px; padding-top: 29px; padding-bottom: 29px; background: #008427;
  border-radius: 80px; justify-content: center; align-items: center; gap: 10px; display: flex
}

.btn-block-info {
  width: 325px; height: 80px; padding-left: 40px; padding-right: 40px; padding-top: 29px; padding-bottom: 29px; background: white; 
  border-radius: 60px; border: 1px #005D1F solid; justify-content: center; align-items: center; gap: 10px; display: flex
}

.btn-position-mid {
  width: 325px; height: 60px; padding-left: 40px; padding-right: 40px; padding-top: 29px; padding-bottom: 29px; background: #008427;
  border-radius: 80px; justify-content: center; align-items: center; gap: 10px; display: flex
}

.cta {
  color: #FFF !important; text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: "Graphik", serif !important; font-size: 19px;
  font-style: normal; font-weight: 500; line-height: 22px; letter-spacing: -0.3px; 
}

.cta-grn {
  text-align: center; color: #005D1F; font-size: 19px; font-family: Graphik; font-weight: 500; line-height: 22px; word-wrap: break-word
}


/* conference highlight section and card styles */
.ch-container {
  width: 100%; height: 100%; padding: 60px; background: white; flex-direction: column; justify-content: center; align-items: center; gap: 80px; display: inline-flex
}

.ch-heading {
  height: 188px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px; display: flex
}

.card-section {
  justify-content: center; align-items: flex-start; gap: 80px; display: inline-flex
}

.conf-card {
  width: 300px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px; display: inline-flex
}

.ch-img {
  width: 284px; height: 284px; left: -4px; top: -36px; position: absolute;
}

.card-img-container {
  width: 280px; height: 212px; position: relative;
}

.card-title {
  flex: 1 1 0; text-align: center; color: #008427; font-size: 24px; font-family: Graphik; font-weight: 600; line-height: 28px; word-wrap: break-word
}

.card-title-style {
  width: 330px; justify-content: center; align-items:center; gap: 4px; display: inline-flex
}

.card-text {
  width: 330px; text-align: center; color: #262626; font-size: 18px; font-family: Graphik; font-weight: 400;
  line-height: 28px; word-wrap: break-word
}



/* styling and animation for sponsor section */
.sponsor-section {
  width: 100%; height: 100%; padding: 120px; flex-direction: row; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex
}

.message-column {
    flex: 1; padding: 20px; width: 520px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: flex
}

.logo-column {
    padding: 20px; display: flex; justify-content: center; align-items: center; overflow: hidden; width: 720px; flex-direction: column; gap: 20px;
}

.logo-container {
    display: flex; align-items: center; animation: rotateLogos 20s linear infinite;
}

@keyframes rotateLogos {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.logo-container img {
    max-width: 250px; margin: 0 10px;
}


/* styling for contact section */
.contact-section {
  width: 100%; height: 100%; padding: 120px; background: #D0EED8; flex-direction: column;  justify-content: center; align-items: center; display: inline-flex
}

.contact-container {
  height: 252px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 40px; display: flex
}

.contact-style {
  align-self: stretch; height: 132px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px; display: flex
}

.contact-heading {
  align-self: stretch; text-align: center; color: #005D1F; font-size: 56px; font-family: Graphik; font-weight: 600; line-height: 56px; word-wrap: break-word
}

.contact-text {
  width: 680px; text-align: center; color: #262626; font-size: 18px; font-family: Graphik; font-weight: 400; line-height: 28px; word-wrap: break-word
}