@font-face {
    font-family: Roko;
    src: url("fonts/Roko-Bold.otf");
}

@font-face {
    font-family: FHOscarPro;
    src: url("fonts/FHOscarPro-Regular.otf");
}

.accordion {
    background-color: #F4F4F4;
    padding-top: 1.5%;
    color: #000000;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline:#000000;
    font-size: 1.5em;
    transition: 0.4s; 
    border-radius: 9.56px;
    border-style: solid;

  }
  .accordion-panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden; 
  }
  .arrow-icon__line {
    justify-content: flex-end;
    width: 20px;
    height: 4px;
    background-color: #000000; 
  }
  .accordion__indicator::after {
    justify-content: end;
    display: inline;
    content: "+";
  }
    
  .accordion--open .accordion__indicator::after {
    display: inline;
    justify-content: end;
    content: "-"; 
  }

  button {
    font-family: Roko;
    font-size: 1.5em;
    cursor: pointer;
  }

.contact {
    border-radius: 40px;
    border: none;
    background: #FFFFFF;
    padding-left: clamp(1rem, 15%, 25%);
    padding-right: clamp(1rem, 15%, 25%);
    padding-bottom: clamp(1rem, 2.5%, 3rem);
    padding-top: clamp(1rem, 2.5%, 3rem);
    margin-bottom: clamp(2rem, 5%, 4rem);
    max-width: clamp(100%, 90vw, 100%);
}

#blue_button {
    background: #2B6EFF;
    margin-top: clamp(1rem, 20%, 4rem);
}

h1 #third-heading {
    font-size: clamp(2rem, 8vw, 4rem);
}

#col1 {
    padding-right: clamp(1rem, 8%, 10%);
}

#col2 {
    padding-left: clamp(1rem, 8%, 10%);
}

#col2 img {
    padding-bottom: clamp(1rem, 8%, 10%);
    width: 100%;
}

#first_section {
    background-image: url("images/AdobeStock_1075959424.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 9.56px;
    margin: clamp(0.5rem, 2%, 2rem);
    margin-bottom: clamp(0.5rem, 1%, 1rem);
    padding: clamp(0.5rem, 1%, 1rem);
    background-position: center;
    align-content: center;
    background-color: #000000;
}

#second_section {
    margin: clamp(0.5rem, 2%, 2rem);
}

#third_section {
    border-radius: 9.56px;
    padding: clamp(1rem, 2%, 2rem);
    margin: clamp(0.5rem, 2%, 2rem);
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
    margin-top: clamp(1rem, 2%, 2rem);
}

#third_section h1 {
    font-family: Roko;
    font-size: clamp(1.5rem, 5vw, 3rem);
}

#third_section p {
    font-size: clamp(1rem, 2.5vw, 1.5em);
}

.first_heading {
    font-family: Roko;
    font-weight: bold;
    color: #FFFFFF;
    font-size: clamp(1.5rem, 5vw, 3rem);
    margin-top: 0%;
}

#third-heading {
    font-size: clamp(1.2rem, 4vw, 2rem);
}

#footer_logo {
    align-content: end;
}

footer {
    background-image: url("images/AdobeStock_1075959424.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    color: #FFFFFF;
    max-height: 20%;
    border-radius: 9.56px;
    border:none;
    margin: clamp(0.5rem, 2%, 2rem);
    margin-bottom: clamp(0.5rem, 1%, 1rem);
    padding: clamp(0.5rem, 1%, 1rem);
}

footer a {
    color: #FFFFFF;
}

#footer_end {
    text-align: end;
    padding-bottom: clamp(2rem, 5%, 3rem);
}

.footer_info p {
    align-items: center;
    font-family: FHOscarPro;
}

.intro {
    font-family: OscarPro;
    color: #FFFFFF;
    max-width: 100%;
    padding-right: clamp(1rem, 10%, 3rem);
    padding-left: clamp(0.5rem, 2%, 2rem);
    margin: 0px !IMPORTANT;
}

.isaac {
    font-family: Roko;
    padding-left: clamp(0.5rem, 2%, 2rem);
    color: #FFFFFF;
}

.logo {
    max-height: clamp(40px, 8vw, 60px);
}

#logo-image {
    align-content: flex-start;
}

#name_svg {
    padding-left: clamp(1rem, 5%, 2rem);
    padding-right: clamp(1rem, 5%, 2rem);
}

nav {
    font-family: Roko;
    font-size: clamp(0.9rem, 2vw, 1.25em);
    font-weight: normal;
    padding: clamp(0.5rem, 1%, 1rem);
    background-color: #D9D9D9; 
    opacity: 80%;
    border-radius: 9.56px;
    align-content: center;
}

.nav_contact {
    color: black;
}

#nav_row {
    padding-top: 0%;
    padding-bottom: 0%;
}

p {
    font-size: clamp(0.9rem, 2vw, 1.15em);
    font-family: FHOscarPro;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#mail {
    float: right;
    padding-bottom: clamp(0.75rem, 2%, 1.5rem);
    padding-top: clamp(0.75rem, 2%, 1.5rem);
    padding-right: clamp(0.75rem, 2%, 1.5rem);
}

#logo-image {
    float: left;
    padding-bottom: clamp(0.75rem, 2%, 1.5rem);
    padding-top: clamp(0.75rem, 2%, 1.5rem);
    padding-right: clamp(0.75rem, 2%, 1.5rem);
}

ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: clamp(0.75rem, 2%, 1.5rem);
    text-decoration: none;
}

ul li a:hover {
    color: #FFFFFF;
}

#white_logo {
    max-height: clamp(60px, 12vw, 100px);
    float: right;
}

.row {
    display: flex;
}

.column {
    flex: 50%;
}

/* Mobile - Hide image column on screens under 768px */
@media (max-width: 767px) {
    #col2 {
        display: none;
    }
    #col1 {
        flex: 100%;
        padding-right: clamp(0.5rem, 2%, 2rem);
    }
    .intro {
        padding-right: clamp(0.5rem, 10%, 2rem);
    }
}

/* Portrait tablets - Hide image column on 768px to 1023px in portrait mode */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    #col2 {
        display: none;
    }
    #col1 {
        flex: 100%;
        padding-right: clamp(0.5rem, 2%, 2rem);
    }
}

/* Landscape tablets and desktops - Show image column on 1024px and up */
@media (min-width: 1024px) {
    #col2 {
        display: block;
    }
    #col1 {
        flex: 50%;
    }
}