body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.ribbon {
  background-color:#0047AB;
  width:100vw;
  display:flex;
  justify-content: center;
  text-align:center;
}

.ribbon-content{
  align-items: center;
  padding: 60px 20px;
  text-align:center;
  gap: 50px;
}
.ribbon-logos{
  display:flex;
  gap:40px;
  justify-content: center;
  align-items:center;
  flex-direction: row;  
  flex-wrap:nowrap;
  margin-top:15px;
}
.ribbon-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 3rem;
  white-space: nowrap;
  margin-bottom:30px;
  color: whitesmoke;
  display:block;
  text-align:left;
}
.ribbon-logos img{
  height:160px;
  width:auto;
  align-items:center;
  gap:20px;
  max-width:220px;
}
.ribbon-content h1{
  font-size: 5rem;
  font-family: 'Playfair Display', serif;
  text-align:left;
  margin-bottom: 20px;
  color:whitesmoke;
  white-space: nowrap;

}
.clips{
  background-color:ivory;

}
.clips-section {
  max-width:1200px;
  margin:80px auto;
  padding 0 20 px;
  background-color: ivory;
}

.clips-heading {
  font-family:'Playfair Display',serif;
  font-size: 5rem;
  text-align:center;
  color:black;
  margin-bottom:30px;
  margin-top:0px;
  padding-top:30px;
}

.clip {
  background-color:#FFF1D6;;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;  /* stack vertically */
  align-items: center;     /* center horizontally */
  text-align: center;      /* center text inside */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clip-image {
  width: 100%;
  aspect-ratio: 16 / 9;      /* 🔑 keeps all images same shape */
  overflow: hidden;         /* crops overflow */
  border-radius: 6px;
  margin-bottom: 20px;
}

.clip-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 🔑 fills frame, crops if needed */
  object-position: center;  /* center the crop */
  display: block;
  border-radius: 5px;
  margin-bottom:20px;
}

.clip img{
  max-width: 100%;
  height:auto;
  border-radius: 5px;
  margin-bottom:20px;
}

.clip div{
  padding: 0;
  margin: 0;
  gap:10px;
  align-items: center;
  text-align:center;
  display: flex;
  font-family: Roboto;
  flex-direction:column;
  border-radius: 10px;  
}
.clips-container {
  gap:20px;
  padding: 20px;
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border:2px;
  border-color:red;
  background-color: ivory;
}

.data{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
}

.datawrapper {
  flex: 1 1 45%;
  min-width: 0; /*prevents iframe overflow */
  display: flex;
  flex-direction: column; /* stack iframe + text vertically */
  align-items: stretch;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom:0;
  background-color:ivory;
}
.datawrapper-text {
  text-align: left;
  margin-top: 15px;
  width: 100%;
  max-width:100%;
}
.datawrapper iframe {
  width: 100%;
  max-width: 100%;
  border: none;
  height:auto;
  display:block;
}


header {
  padding: 20px 0;
}

header .row,

footer .row {
  display: flex;
  align-items: center;
}

ribbon img {
  max-width: 50px;
}

header h1 {
  font-weight: 700;
  margin: 0;
}

header nav {
  display: flex;
  justify-content: flex-end;
}

header p {
  padding: 0 20px;
  margin: 0;
}

.hero {
  /* Replace with your picture */
  background-image: url('self portrait230204.jpg'); 
  background-size: cover;
  background-position: left;

  height: 100vh; /* full viewport height */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding-left: 50px;
  color: white;
  position: relative;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-justify: left;
  max-width: 600px;
  padding: 0 20px;
}

/* Headline */
.hero h1 {
  font-size: 10rem;
  font-family: 'Playfair Display', serif;
  margin-bottom: 20px;
}
a {
  color: black;       /* make links black */
  text-decoration: none; /* optional: remove underline */
}

/* Paragraph */
.hero p {
  font-size: 3rem;
  font-family: 'Playfair Display', serif;
  margin-bottom: 30px;
}


.hero img {
  object-fit: contain; /* ✅ shows the whole image */
  object-position: center;
  background-color: #000; /* optional for letterboxing effect */
}


.jumbotron {
  align-items: center;
  background-image: url('self portrait.jpg');
  background-size: cover;
  color: #ffffff;
  background-height: 1000rem;
  text-shadow: 0.25px 0.25px 0.25px #000000;
}

.jumbotron h2 {
  font-size: 60px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.jumbotron h3 {
  margin: 0 0 20px;
  color: #fff;
}

section .row img {
  margin: 0 0 30px;
  width: 100%;
}

.col-md-6 {
  margin: 0 0 30px;
}

.btn.btn-primary {
  border-radius: 2px;
  border: 0px;
  color: #fbd1d5;
  text-shadow: none;
  background-color: #ffffff;
}

.btn.btn-primary:hover {
  color: #ffffff;
  background-color: #fbd1d5;
}

.btn-secondary {
  background-color: #E8DFE0;
  color: #ffffff;
  margin: 0 0 30px;
}

footer {
  font-size: 12px;
  padding: 20px 0;
}

footer .col-sm-8 {
  display: flex;
  justify-content: flex-end;
}

footer ul {
  list-style: none;
}

footer li img {
  width: 32px;
  height: 32px;
}



@media (max-width: 980px) {
  .hero{
    background-position:right;
    justify-content: flex-start;
  }
  .hero h1{
    font-size: 5rem;
  }
  .hero p{
    font-size:3rem;
  }
  .hero-content{
    max-width:90%;
  }
  .clips-container{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .clip {
    flex-direction: column;
    text-align: left;
    align-items: center;
    padding: 20px;
  }

  .clip img {
    max-width: 100%;
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .clip-image img{
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .data {

    flex-direction:column;
    gap: 30px;
    align-items:stretch;
  }
  .datawrapper{
    flex:1 1 100%;
  }
  .datawrapper-text{
    text-align:left;
  }

  .clip-text {
    flex: 1;
  }
  .clip-text h3{
    3rem;
  }
  .clip-text p{
    2rem
  }
  .ribbon-content{
    padding: 40px 15px;
    gap: 1.5rem;
    text-align:center;
  }
  .ribbon-text{
    text-align:center;
    font-size: 2.2rem;
  }
  .ribbon-logos {
    flex-direction: column; /* stack logos */
    gap: 20px;
    flex-wrap:nowrap;
    font-size: 2.5 rem;
  }


  .ribbon-logos img {
  height:200px;    
  max-height: 200px;
  }  
}