body {
  /*font-family: 'Inter', sans-serif;*/
  background: #000000;
  color: #000000;
  overflow-x: hidden;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

html{ background: #000000; }

a { color: #ffffff; }
p { color: #ffffff; }

.container {
    width: 95%;
    margin: auto;
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: left;
    /*background-image: url('http://localhost/traxale/wp-content/uploads/2026/03/pexels-fauxels-3182759.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
    border-radius: 3.2rem;
    position: relative;
    overflow: hidden;
}

#background-video {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /*z-index: -1;*/
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.banner {
    background: #236689;
    border-radius: 3.2rem;
    padding-bottom: 60px;
    padding-top: 100px;
}

.hero-content {
    color: #ffffff;
}

.hero-title {
    font-size: 60px;
    font-weight: bold;
}

.hero-subtitle {
    font-size: 20px;
    margin-top: 10px;
    color: #ffffff;
}

/* HEADER */
.site-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20px 40px;
  z-index: 999;
  mix-blend-mode: difference;
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}

/* MENU TOGGLE */
.menu-toggle {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-toggle span {
  width: 30px;
  height: 2px;
  background: #fff;
  display: block;
}

/* OVERLAY MENU */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #0a0a0a;
  transform: translateY(-100%);
  z-index: 998;
}

.menu-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-links {
  text-align: center;
}


.menu-links a {
  display: block;
  font-size: 48px;
  color: #fff;
  text-decoration: none;
  margin: 20px 0;
  transition: all 0.3s ease;
}

.menu-links a:hover {
  letter-spacing: 3px;
  opacity: 0.6;
}

.no-scroll {
  overflow: hidden;
}

/* HERO */
/*.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
  margin-top: 20px;
}*/

.hero-bgpanel {
    background-image: url('http://localhost/traxale/wp-content/uploads/2026/03/pexels-fauxels-3182759.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 3.2rem;
    padding: 0px 80px;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
}

/*.hero-title {
  font-size: 60px;
  text-align: center;
  line-height: 1.1;
}*/

.section-center {
    text-align: center;
}

/* ABOUT */
section {
  padding: 60px 60px 100px 60px;
}

/*section.hero {
  padding: 100px 60px;
}*/

.section_tag {
    font-size: 15px;
    background: #fec351;
    color: #ffffff;
    display: inline;
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid #fec351;
    text-transform: uppercase;
}
section .section_heading {
    font-size: 50px;
    margin: 30px auto;
    line-height: 50px;
    color: #ffffff;
}
.section_description {
    font-size: 25px;
    line-height: normal;
    color: #ffffff;
}

/*.reveal-text {
  font-size: 20px;
  /*max-width: 800px;*/
}*/

.section-width-80{
  width: 80%;
  margin: 0 auto;
}

.section-width-60{
  width: 60%;
  margin: 0 auto;
}

.section-container {
  display: flex;
  flex-direction: row;
}

.section-col {
  padding: 10px;
  width: 100%;
}

.about {
    padding-top: 100px;
}

/* CASE */
.case-grid {
  display: flex;
  gap: 50px;
  padding: 80px 0;
}

.case-image {
  width: 50%;
  height: 400px;
  background: url('http://localhost/traxale/wp-content/uploads/2026/03/pexels-fauxels-3182759.jpg') center/cover;
}

/* CTA */
.cta {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-title {
  font-size: 48px;
}


/*.pmg-stats-alt {
  height: 100vh;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}*/

.stats {
    padding-top: 100px;
}

.stats-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: auto;
  padding-top: 60px;
}

.stat-item {
  width: 300px;
  height: 300px;
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-item:after {
    content: ' ';
    border: 2px solid #000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -10px;
    left: -10px;
    border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
}

.stats-content {
  text-align: center;
}

.stat-number {
  font-size: 60px;
  color: #fff;
}

.stat-label {
  color: #ccc;
}


/* carosuel */
.carousel-container.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw; /* Forces element to full viewport width in WordPress */
  margin-right: -50vw;
  height: 100vh;
  overflow: hidden;
  perspective: 1200px; /* Essential for 3D rotation */
}

.carousel-track {
  display: flex;
  /*transition: transform 0.5s ease-out;*/
  /*padding: 0 20%;*/ /* Leave room for side slides */
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  align-items: center;
}

.carousel-slide {
  min-width: 39%; /* Shows 70% of the slide; 15% neighbors on each side */
  margin: 0 20px;
  opacity: 0.5;
  /*transition: all 0.5s;
  transform: scale(0.9);*/
  /*transition: transform 0.8s;
  transform-style: preserve-3d;*/
  text-align: center;
  /*transition: transform 0.6s, opacity 0.6s;*/
  /* Match the 0.6s and cubic-bezier from the JS move() function */
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
  opacity: 0.3;
  /*transform: rotateY(45deg) scale(0.8);*/ /* Rotate side slides away */
  transform: scale(0.8);
  transform-origin: center center;
}
.carousel-slide img {
    width: 100%;
}

.carousel-slide.active {
  opacity: 1;
/*  transform: scale(1.1);*/
  /*transform: rotateY(0deg) scale(1.1); Center slide faces forward and grows */
  z-index: 10;
  transform: scale(1.1);
}

/* Make slides on the left rotate the opposite way */
.carousel-slide.left-side {
  /*transform: rotateY(-45deg) scale(0.8);*/
}

.fixed-center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  text-align: center;
  pointer-events: none;
  background: #236689e8;
  color: #ffffff;
  padding: 40px 50px;
  border-radius: 14px;
}

.fixed-center-content #fixed-desc {
    color: #ffffff;
}

/* Rotation Effect based on direction */
/*.rotate-right { transform: rotateY(45deg) scale(0.8); }
.rotate-left { transform: rotateY(-45deg) scale(0.8); }
.active { transform: rotateY(0deg) scale(1.1); z-index: 10; }*/

.carousel-navigation {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
}
.prev, .next {
    background: #236689;
    color: #ffffff;
    /*font-size: 30px;*/
    border: 2px solid #236689;
    cursor: pointer;
    padding: 25px 50px;
    border-radius: 14px;
    line-height: 39px;
}

.prev span, .next span {
    font-size: 30px;
}

/* stats */
.stats-item {
  border: 2px solid #ffffff;
  padding: 42px 30px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  /* Calculate 50% width minus half of the total gap per row */
  flex: 0 0 calc(40% - 10px); 
  box-sizing: border-box;
  border-radius: 14px;
  background: transparent;
  color: #ffffff;
}

.stats .section-right {
  display: flex;
  flex-wrap: wrap; /* Allows items to move to the next line */
  gap: 20px;       /* Sets the space between all items */
  align-items: flex-start;
  /*background-image: url(http://localhost/traxale/wp-content/uploads/2026/04/grey_bg2.png);
  background-repeat: no-repeat;
  background-position : top center;
  background-size: contain;*/
  padding: 0 50px 50px;
  align-items: center;
  justify-items: center;
  align-content: center;
}

/* Push the right-hand column down */
.stats-item:nth-child(3) {
  margin-left: 60px; 
}

.stats-item h4 {
    font-size: 30px;
    padding: 15px 0;
    position: relative;
    margin-bottom: 15px;
}

.stats-item h4:after {
    content: " ";
    background: #236689;
    width: 50px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 36%;
}

footer{ text-align:left; background: none;}

.footer-top {
    display: flex;
    padding: 25px;
    color: #ffffff;
    flex-direction: row;
    border: 2px solid #236689;
    gap: 30px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 0;
}

.footer-logo {
    margin: 20px 0;
}

.footer-bottom {
    display: flex;
    border: 2px solid #236689;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 10px 25px;
    flex-direction: row;
    background: #236689;
    color: #ffffff;
}

.footer-bottom .footer-col, .footer-top .footer-top-col{
  width: 20%;
  flex-grow: 1;
}

footer .footer-top .footer-top-left{ 
  flex-grow:4; 
  border-right: 2px solid #236689;
}

.footer-top-center.footer-top-col {
    flex-grow: 0;
    border-right: 2px solid #236689;
}

.footer-bottom-right p { color: #ffffff; }

.button-style {
  border: 2px solid #236689;
  padding: 10px 25px;
  border-radius: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #236689;
  font-size: 18px;
  display: inline-flex;
}

.button-style:hover{
  background: #236689;
  color: #ffffff;
}

.footer_logo img {
    width: 70%;
}

footer ul {
    list-style: none;
}

footer ul li {
    display: inline;
    padding: 0 3px;
}

footer ul li a {
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
}

.footer-top-center ul li {
    display: block;
}

/*.footer-top-center, .footer-top-right {
    border: 2px solid #000000;
    border-radius: 20px;
    padding: 20px;
}*/

.footer-bottom ul li a{ color: #ffffff; }

.footer-bottom-right {
    text-align: right;
}

.portfolio {
    padding-top: 100px;
}

/**** Team **********/
.section-bottom wa-carousel::part(navigation) {
    /* grid-area: navigation; */
    /* display: contents; */
    /* font-size: var(--wa-font-size-l); */
    display: flex;
    position: absolute;
    bottom: -40px;
    width: 100%;
    align-items: end;
    justify-content: end;
}

.section-bottom wa-carousel::part(navigation-button) {
    background: #236689;
    color: #ffffff;
    padding: 8px 30px;
    margin: 8px;
    border: 2px solid #236689;
    border-radius: 14px;
}

.teams .section-bottom {
    margin-top: 50px;
}

.teams .section-bottom wa-carousel-item{
  border: 2px solid #236689;
  border-radius: 20px;
}

.teams .section-bottom wa-carousel-item:nth-child(even) {
  /*background: linear-gradient(135deg, #00c6ff, #0072ff, #6a00ff);*/
  background-color: #236689;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104'%3E%3Cpolygon points='60,0 120,30 120,75 60,104 0,75 0,30' fill='none' stroke='%23f89925' stroke-width='18'/%3E%3C/svg%3E");
  background-size: 100px 100px;
}

.teams .section-bottom wa-carousel-item:nth-child(even) > img {
    object-fit: contain;
}

.teams .section-bottom wa-carousel-item:nth-child(odd) {
    background: #f89925;
    color: #ffffff;
    padding: 20px;
    position: relative;
    border-color: #f89925;
}

.teams .section-bottom wa-carousel-item:nth-child(odd) .emp_position {
    position: absolute;
    top: 0;
    padding: 30px;
}

.teams .section-bottom wa-carousel-item:nth-child(odd) .emp_detail {
    background: #ffffff;
    padding: 30px 45px 30px 20px;
    color: #000000;
    border-radius: 0 80px 0 80px;
    margin: 30px;
    position: relative;
}

.teams .section-bottom wa-carousel-item:nth-child(odd) .emp_detail p {
    color: #236689;
}

.teams .section-bottom wa-carousel-item:nth-child(odd) .emp_detail:after {
    content: ' ';
    /* border: 2px solid #000; */
    width: 100%;
    height: 100%;
    position: absolute;
    top: -10px;
    left: -10px;
    border-radius: 0 80px 0 80px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

.section_description {
    margin-bottom: 30px;
}


/* Brands */
.brands .section-bottom {
    margin-top: 50px;
}

/* Blog home page */
.full-width-carousel {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/*.blogs wa-carousel-item */
.post-card {
  display: flex;
  flex-direction: row;
  border: 2px solid #236689;
  border-radius: 14px;
  padding: 20px;
}

.post-card .postcard-left, .post-card .postcard-right {
  padding: 10px;
  width: 35%;
  flex-grow: 1;
}

.post-card .postcard-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><rect width='400' height='400' fill='%23000000'/><path d='M200,0C260,0 320,40 320,100C380,100 400,160 400,200C400,260 360,320 300,320C300,380 240,400 200,400C160,400 100,380 100,320C40,320 0,260 0,200C0,140 40,100 100,100C100,40 160,0 200,0Z' fill='%23236689'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.post-card .postcard-left img {
  width: 70%;
}

.post-card .postcard-right {
    padding-left: 30px;
    flex-grow: 3;
}

.postcard-date {
    font-size: 25px;
    margin-top: 65px;
}

.postcard-title {
    font-size: 33px;
    line-height: 35px;
    margin-bottom: 75px;
}

.postcard-title a{
    text-decoration: none;
}

.postcard-right .postcard-link {
    text-align: right;
    width: 100%;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
}

.blogs .section-top {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.blogs .section-col{
  padding: 10px;
  width: 35%;
  flex-grow: 1;
}

.blogs .section-top-left {
  flex-grow: 3;
}

.blogs .section-top-right {
  text-align: center;
}

.blogs .section-bottom wa-carousel::part(navigation) {
    right: 50px;
    bottom: -10px;
}

/* Services */
.services {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /*background-image: url('http://localhost/traxale/wp-content/uploads/2026/03/pexels-fauxels-3182759.jpg');*/
    background:linear-gradient(0deg, rgba(248, 153, 37, 0.4), rgba(248, 153, 37, 0.4)), url(http://localhost/traxale/wp-content/uploads/2026/03/pexels-fauxels-3182759.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
}

.services .section_tag {
    font-size: 15px;
    background: #ffffff;
    color: #13183b;
    display: inline;
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid #ffffff;
}

.section-bottom-container {
    display: flex;
    flex-direction: row;
}

.section-bottom-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Allows items to move to the next line */
  gap: 20px;       /* Sets the space between all items */
  /*align-items: center;*/
  justify-content: center;
}

.section-bottom-container .section-col {
    border: 2px solid #ffffff !important;
    border-radius: 14px;
    flex: 0 0 calc(33% - 10px);
    box-sizing: border-box;
    text-align: left;
    padding: 20px;
    background: #ffffff !important;
    color: #f89925;
}

.services .button-style {
    border-color: #ffffff;
    color: #ffffff;
}

.services .button-style:hover{
  border-color: #236689;
}
.services .section-bottom{
  margin-top: 50px;
}

.services .col-top {
    display: flex;
    flex-direction: row;
}

.services .col-top wa-icon, .services .col-top .col-title {
    width: 0;
    flex-grow: 1;
    color: #f89925;
}

.services .col-top .col-title {
    flex-grow: 10;
    font-size: 16px;
    text-transform: uppercase;
}

.services .col-bottom {
    margin: 20px 0;
}

.services .col-bottom p {
    font-size: 23px;
    line-height: normal;
    color: #236689;
}

/* Contact */
.contact .section-left {
    padding-right: 40px;
}


/*********************Contact Page *********************/
.page-template-contact section {
    padding-bottom: 60px;
}

#contact_form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

wa-input {
    flex: 0 0 calc(50% - 10px);
}

wa-textarea {
    flex: 100%;
}

.query_form {
    display: flex;
}

.query_form .section-right {
    border: 2px solid #236689;
    background: #236689;
    padding: 30px;
    border-radius: 14px;
}

wa-input::part(label), wa-textarea::part(label) {
  color: #ffffff; /* Or any color value */
}

.contact-info .section-container {
    border: 2px solid #f89925;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    align-items: center;
}

.contact-info wa-icon{ color: #f89925; }

.contact-map {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
}


/**************************** BLog page *******************************/

.blog-page {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    /*align-items: flex-start;*/
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.blog-page .post-card {
    flex: 0 0 calc(50% - 10px);
}

.blog-page .post-card .postcard-left img {
    width: 65%;
}

.blog-page .postcard-title{ font-size: 28px; }

.pagination {
    display: block;
    width: 100%;
    margin-top: 30px;
    text-align: center;
}

.pagination .nav-links .page-numbers {
    background: transparent;
    border: 2px solid #236689;
    padding: 5px 8px;
    text-decoration: none;
    margin: 5px;
    border-radius: 5px;
}

.pagination .nav-links .next.page-numbers, .pagination .nav-links .prev.page-numbers {
    padding: 10px 25px;
    text-decoration: none;
    margin: 10px;
    background: #236689;
}

.pagination .nav-links .page-numbers.current {
    background: #236689;
    color: #ffffff;
}

.pagination .nav-links .page-numbers:hover {
    background: #236689;
    color: #ffffff;
}


/************ About page *********************/

.about-img .stk-column-wrapper {
    position: absolute;
    /*border-radius: 5px;*/
    height: 55%;
    bottom: 0;
    background: #2366898a;
    left: 0;
}

/*.about-img .stk-column-wrapper:after {
    background: #236689;
    content: ' ';
    position: absolute;
    bottom: -14%;
    left: 0;
    width: 100%;
    height: 60%;
    border-radius: 5px;
    z-index: -1;
}*/

.about-img .stk-block-content {
    bottom: 11%;
    position: absolute;
    width: 90%;
    text-align: center;
    left: 5%;
    transform: translate(0, 0);
}

.our-values .section-top {
    display: flex;
    flex-direction: row;
}

.our-values .section-top-left {
    width: 100%;
}

.our-values .section_description {
    font-size: 35px;
}

.our-values .section-bottom {
    margin-top: 60px;
}

.accordian-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #236689;
    /*background-image: url('http://localhost/traxale/wp-content/uploads/2026/03/pexels-fauxels-3182759.jpg');*/
    /*background:linear-gradient(0deg, rgba(248, 153, 37, 0.4), rgba(248, 153, 37, 0.4)), url(http://localhost/traxale/wp-content/uploads/2026/03/pexels-fauxels-3182759.jpg);*/
    /*background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;*/
}

.accordian-section, .section-right-bottom {
    display: flex;
    flex-direction: row;
}
.section-right-top {
    padding: 20px;
}

.section-right-top p {
    color: #ffffff;
}

.section-right-bottom .section-col {
    color: #ffffff;
    text-align: center;
    margin-top: 20px;
}
.section-right-bottom .section-col p {
    color: #ffffff;
    text-transform: capitalize;
}

.wa-stack wa-details {
    margin-bottom: 10px;
}

.section-right-bottom .section-col .stat-numbers {
    font-size: 50px;
}

wa-details::part(summary) {
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 700;
}

.team-expertise .section-bottom, .what-we-do, .service-middle-col {
    display: flex;
    flex-direction: row;
}

.team-expertise {
    padding-top: 100px;
}

/********************************** Services Page ******************************/

.service-middle-col {
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    gap: 100px;
}

.service-col {
    /*background: rgb(35 102 137 / 55%);*/
    padding: 35px;
    border-radius: 40px;
    color: #ffffff;
    margin: 60px 0;
}

.service-col:last-child{
    margin: 0;
}

.service-middle-col .section-col {
    width: 25%;
    flex-grow: 1;
}
.section-middle-left.section-col {
    flex-grow: 4;
}

/*.service-middle-col .section-col {
    flex: 0 0 calc(50% - 10px);
}*/

.section-top-full {
    text-align: right;
    margin-bottom: 20px;
}

.service-title {
    text-transform: uppercase;
    font-size: 45px;
    margin-bottom: 20px;
}

.service-description {
    color: #ffffff;
    font-size: 20px;
    line-height: normal;
}

.section-bottom-full {
    padding: 0 20px;
    margin-top: 30px;
}

.section-bottom-full hr {
    margin: 20px 0;
}

.section-bottom-full ul {
    margin-left: 20px;
}

.section-middle-right {
    /*padding-block: 3.2rem;*/
    position: relative;
    /*width: 70%;*/
    display: flex;
    justify-content: flex-end;
}

.service-svg-shape, .service-color-svg {
    width: 70%;
    aspect-ratio: 1;
}

.service-color-svg {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--shape-color);
}

.section-middle-right img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    max-width: unset;
    display: block;
  /*width: 300px;
  height: 300px;
  object-fit: cover;*/
  /* Defines four points: top, right, bottom, left */
  /*clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%), inset(0 round 20px);*/
}

.section-middle-left .button-style {
    margin-top: 20px;
    border-color: #ffffff;
    color: #ffffff;
}

.section-middle-left .button-style:hover {
    background: #ffffff;
    color: #236689;
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .section-container {
    flex-direction: column;
  }
}