@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.cdnfonts.com/css/lemonmilk");
/*
https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/Banner%20Images/Family-moving-into-new-house.jpg

https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/CCM/CCM-licensed-states.png

https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/CCM/rope-connections.png

https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/CCM/team-sitting-around-table-collaborating.jpg
*/

.page-container {
  background-color: #01303f;
}

.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
}

.grid-item {
  padding: 20px;
  font-size: 30px;
  text-align: left;
  min-height: 400px;
/*   display: grid;
  align-items: center; */
}

/* .grid-item.grid-text-1,
.grid-item.grid-text-2,
.grid-item.grid-text-3,
.grid-item.grid-text-4,
.grid-item.grid-text-5,
.grid-item.grid-text-6,
.grid-item.grid-text-7,
.grid-item.grid-text-8,
.grid-item.grid-text-9,
.grid-item.grid-text-10,
.grid-item.grid-text-11 {
  align-self: center;
} */

.grid-text-1,
.grid-text-3,
.grid-text-5,
.grid-text-7,
.grid-text-9,
.grid-text-11 {
  background: linear-gradient(135deg, #01303f 30%, transparent 30%),
    linear-gradient(45deg, #01303f 30%, transparent 30%);
  background-color: #01303f;
  animation: change 60s ease-in-out forwards infinite alternate-reverse;
  
}

.grid-text-2,
.grid-text-4,
.grid-text-6,
.grid-text-8,
.grid-text-10 {
  background: linear-gradient(135deg, #0b668e 30%, transparent 30%),
    linear-gradient(45deg, #0b668e 30%, transparent 30%);
  background-color: #0b668e;
  animation: change 60s ease-in-out forwards infinite alternate-reverse;
}

.grid-text-6 ul,
.grid-text-10 ul {
padding-left: 30px;
  list-style: none;
}
.grid-text-6 ul li,
.grid-text-10 ul li {
list-style: square;
/*   padding: 0 30px 0 30px; */
  margin-left: 20px;
  position: relative;
}

.grid-image-1 {
  background: linear-gradient(to right, #01303f 1%, transparent 99%);
  background-color: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /*   object-fit: contain; */
}

.grid-image-1 img, 
.grid-image-2 img
{
  max-height: 400px;
  width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.grid-image-2 {
  background: linear-gradient(to left, #0b668e 1%, transparent 99%);
  background-color: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*   animation: change 60s ease-in-out forwards infinite alternate-reverse; */
}

.grid-image-3 {
  background-image: linear-gradient(to right, #01303f 1%, transparent 99%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/Banner%20Images/Family-moving-into-new-house.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  /*   animation: change 60s ease-in-out forwards infinite alternate-reverse; */
}

.grid-image-4 {
  background-image: linear-gradient(to left, #0b668e 1%, transparent 99%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/CCM/girl%20holding%20CCM%20moving%20box.jpg");
  background-color: white;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.grid-image-5 {
  background-image: linear-gradient(to right, #01303f 1%, transparent 99%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/young-multiracial-family-playing-on-couch-together.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  /*   animation: change 60s ease-in-out forwards infinite alternate-reverse; */
}

.grid-image-6 {
  background-image: linear-gradient(to left, #0b668e 1%, transparent 99%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/CCM/finding-the-right-loan-product.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  /*   animation: change 60s ease-in-out forwards infinite alternate-reverse; */
}

.grid-image-7 {
  background-image: linear-gradient(to right, #01303f 1%, transparent 99%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/CCM/illustration-of-people-working-around-gears.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.grid-image-8 {
  background-image: linear-gradient(to left, #0b668e 1%, transparent 99%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/CCM/rope%20connections%20teamwork.png");
  background-color: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.grid-image-9 {
  background-image: linear-gradient(to right, #01303f 1%, transparent 99%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/CCM/aerial%20view%20of%20team-sitting-around-table-collaborating.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.grid-image-10 {
  background-image: linear-gradient(to left, #0b668e 1%, transparent 99%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/cutting-edge-technology-and-software.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*   animation: change 60s ease-in-out forwards infinite alternate-reverse; */
}

.grid-image-11 {
  background-image: linear-gradient(to right, #01303f 1%, transparent 99%),
    url("https://www.castlecookemortgage.com/hubfs/raw_assets/public/Castle-and-Cooke/images/castle-balance-icon.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  /*   animation: change 60s ease-in-out forwards infinite alternate-reverse; */
}



@keyframes change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.grid-item h2 {
  font-family: poppins;
  font-weight: 600;
  color: white;
  font-size: 40px;
  padding: 0 30px 0 30px;
  line-height: 1.5;
}

.grid-item h3 {
  font-family: poppins;
  font-weight: 600;
  color: white;
  font-size: 30px;
  padding: 0 30px 0 30px;
  line-height: 1.5;
}

.grid-item p,
.grid-item ul li {
  font-family: poppins;
  color: white;
  font-size: 20px;
  line-height: 1.5;
  padding: 0 30px 0 30px;
}

.grid-item img {
  width: 100%;
}

.careers-container {
  /*   background-image: linear-gradient(180deg, #0b668e 0.5%, transparent 99.5%),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/castle-and-cooke_2020/images/Page%20Header%20Images/loan-officers-header.jpg"); */
  background: linear-gradient(rgba(1, 48, 63, 0.5), rgba(11, 102, 142, 0.5)),
    url("https://6150347.fs1.hubspotusercontent-na1.net/hubfs/6150347/castle-and-cooke_2020/images/Page%20Header%20Images/loan-officers-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*   background: linear-gradient(#01303f, #0b668e); */
  display: flex;
  justify-content: center;
}

.careers-container > div {
  /*   width: 100px; */
  height: 400px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

/* .header-section img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: brightness(.4);
} */

/* .header-section h1 {
  font-family: poppins;
  font-weight: 600;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 80px;
}

.careers-button {
  color: #01303f;
  background-color: #ffd72b;
  border: none;
  border-radius: 10px;
  font-size: 25px;
  font-family: poppins;
  font-weight: 600;
  box-shadow: grey 2px 2px 2px;
  padding: 30px 20px 30px 20px;
  width: 300px;
  height: 50px;
  text-decoration: none;
}

.careers-button:hover {
  color: #ffd72b;
  background-color: #01303f;
  padding: 20px;
  padding: 30px 20px 30px 20px;
  width: 300px;
  height: 50px;
  text-decoration: none;
} */

/* .culture {
  grid-column: span 2;
  text-align: center;
}

.culture h2 {
  font-family: poppins;
  font-weight: 600;
  color: white;
  font-size: 40px;
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

.culture p {
  font-family: poppins;
  color: white;
  font-size: 20px;
  text-align: left;
  padding: 20px;
  margin: 0;
  line-height: 1.5;
}
 */

  /*   background: linear-gradient(
    to right,
    #01303F,
    rgba(255, 255, 255, 0) 80px,
    rgba(255, 255, 255, 0) calc(100% - 80px),
    #01303F
  ); */
}

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

/* .careers-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
  justify-items: start;
  justify-content: space-around;
  align-content: start;
} */

/* .careers-left {
  grid-column: 1;
}

.careers-right {
  grid-column: 2;
}

.careers-left img,
.careers-right img {
  width: 100px;
} */

@media (max-width: 900px) {
  .grid-container {
    grid-template-columns: 100%; /* Switch to a single column layout */
  }

  /*   .grid-item.grid-image-1,
  .grid-item.grid-image-2, */
  .grid-item.grid-image-3,
  .grid-item.grid-image-4,
  .grid-item.grid-image-5,
  .grid-item.grid-image-6,
  .grid-item.grid-image-7,
  .grid-item.grid-image-8,
  .grid-item.grid-image-9,
  .grid-item.grid-image-10,
  .grid-item.grid-image-11 {
    height: 300px;
  }

  .grid-item.grid-text-1 {
    order: 1;
  }

  .grid-item.grid-image-1 {
    order: 2;
  }

  .grid-item.grid-text-2 {
    order: 3;
  }

  .grid-item.grid-image-2 {
    order: 4;
  }

  .grid-item.grid-text-3 {
    order: 5;
  }

  .grid-item.grid-image-3 {
    order: 6;
  }

  .grid-item.grid-text-4 {
    order: 7;
  }

  .grid-item.grid-image-4 {
    order: 8;
  }

  .grid-item.grid-text-5 {
    order: 9;
  }

  .grid-item.grid-image-5 {
    order: 10;
  }

  .grid-item.grid-text-6 {
    order: 11;
  }

  .grid-item.grid-image-6 {
    order: 12;
  }

  .grid-item.grid-text-7 {
    order: 13;
  }

  .grid-item.grid-image-7 {
    order: 14;
  }

  .grid-item.grid-text-8 {
    order: 15;
  }

  .grid-item.grid-image-8 {
    order: 16;
  }
  .grid-item.grid-text-9 {
    order: 17;
  }

  .grid-item.grid-image-9 {
    order: 18;
  }
  .grid-item.grid-text-10 {
    order: 19;
  }

  .grid-item.grid-image-10 {
    order: 20;
  }
  .grid-item.grid-text-11 {
    order: 21;
  }

  /*   .grid-item.culture {
    order: 21;
    width: 100%;
  } */
/*   logo-slider {
    --image-size: 150px;
    --image-size: min(max(150px, 10vw), 100px);
  } */
}

/* @media (max-width: 900px) {
  logo-slider {
    --image-size: 150px;
    --image-size: min(max(150px, 10vw), 100px);
  }
} */