:root {
    --primary-font: url('../fonts/Montserrat-Regular.ttf') format('tff'),
                    url('../fonts/Montserrat-Regular.ttf') format('tff');
  }

body{
    margin: 0%;
    font-family: 'Montserrat', sans-serif; 
    src: var(--primary-font); 
    display: flex;
    flex-wrap: wrap;
    padding: 0%;
    top: 0%;
    right: 0%;
    left: 0%;
    bottom: 0%;
}

.bold-text {
    font-family: 'Montserrat-Bold';
  }
  
.italic-text {
    font-family: 'Montserrat-Italic';
  }

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('../fonts/Montserrat-Bold.ttf') format('tff'),
         url('../fonts/Montserrat-Bold.ttf') format('tff');
  }
  
  @font-face {
    font-family: 'Montserrat-Italic';
    src: url('../fonts/Montserrat-Italic.ttf') format('tff'),
         url('../fonts/Montserrat-Italic.ttf') format('tff');
  }




  .navbar {
    border-bottom: solid white 0.3vw;
    background-image: none, linear-gradient(90deg,white, #FFD59A,white); /* Background color of the navbar */
    width: 98.3vw;
    height: 5vw;
    font-family: Montserrat , Courier, monospace;
    display: flex;
    justify-content: space-between; 
    position: relative; 
  }
  
  .wave {
    background-image: url(Wave\ Lines.png);
    width: 98.3vw;
    display: flex;
  }
  
  .logo {
    background-image: url('Logo Image.png');
    background-size: 12vw;
    align-items: center;
    background-repeat: no-repeat;
    width: 20vw;
    height: 5vw;
    margin-left: 2vw;
    display: inline-block; /* Ensure the anchor behaves like a block element */
  }
  
  .nav-links {
    display: flex; /* Use flexbox */
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    float: right;
    height: 5vw;
    width: 60vw;
    margin-left: 20vw;
  }
  
  .nav-links li {
    margin-left: 9vw; /* Space between items */
    display: flex;
    align-items: center;
    margin-right: 0%;
    float: left;
    text-align: left;
  }
  
  .nav-links a {
    color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
    font-family: 'montserrat', Courier, monospace;
    font-weight: 800;
    font-size: 1.6vw;
    display: flex;
  }

  .nav-links li:hover a{
    text-decoration: underline;
  }
  
  .action a {
    background-color: #FBB040;
    padding: 0.8vw; /* color around text */
    height: 2vw;
    text-align: center;
    border-radius: 1vw; /* Curved Corners */
    display: flex;
    align-items: center;
  }
  
  .menu-toggle {
    display: none; 
    background-color: transparent; 
    border: none;
    color: #000000; 
    cursor: pointer;
    font-size: 2.5vw; 
    margin-left: 50vw;
  }

  li.mobile{
    display: none;
  }
  
  @media (max-width: 768px) { 
    .navbar{
        height: 10vw;
        
    }
   

    .logo{
        width: 30vw;
        height: 30vw;
        background-size: 20vw;
        align-content: center;
        align-self: center;
        margin: 1vw;
    }
    .nav-links {
      display: none; 
    }

    .navbar li {
        
        display: inline-block;
        color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
    
    width: 50vw;
    }

    .navbar li.mobile {
        
        display: inline-block;
        color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
    
    width: 50vw;
    }

    .navbar li a:hover {
        color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
    
    }

    .navbar li ul.dropdown {
    
    
    display: none;
    
    position: absolute; 
  top: 100%; 
  right: 0; 
  background-color: #ffffff; 
  border-radius: 5vw;
  color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
  z-index: 9999; /* High z-index to ensure it's on top */
 
  margin: 1vw; 
  text-align: right; /* Add this line */

    }

    .navbar li:hover ul.dropdown {
        display: block;
        height: 2vw;
        
        width: 50vw;
        height: 35vw;
        flex-direction: column; /* Stack boxes vertically */
        
        text-align: center;
        align-items: center;
        list-style-type: none;
        color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
        

    }

    .navbar li:hover ul.dropdown li {
    color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
    font-family: 'montserrat', Courier, monospace;
    font-weight: 800;
    font-size: 5vw;
    display: flex;
    flex-wrap: wrap;
    
    margin-top: 3vw;
    
   
  }

  .navbar li.mobile{
    padding: 2vw;
    
    margin: 0%;
    right: 0%;
    align-items: center;
    text-align: right;
  }

  .navbar li.mobile a{
    
    color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
    font-size: 4vw;
    
    border-radius: 5vw;

  }

  .navbar li.mobile ul.dropdown {
    background-color: #FFD59A;
    color: #000000;
    
  }

  .navbar li.mobile ul.dropdown a{
    
    padding: 1vw;
    
  }

  

  .navbar li.mobile ul.dropdown .action a{
    
    padding: 3vw;
    
    background-color: #007262;
    color: #FFD59A;
    border-radius: 3vw;
    margin: 0%;
  }




 
  

  

    


   
    
  }







.hero{
    position: relative;
    height: 50vw; /* Full height of the viewport */
    width: 100vw;
    background-image: url('Hero\ Image.jpg');
    background-size: cover; /* Cover the entire area */
    background-position: left; /* Center the image */
    display: flex;
    
}

.hero::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Adjust the color and opacity */
    background: linear-gradient(90deg,#FFD59A 25%,rgb(255, 255, 255,0) 60%); /* Gradient effect */
    z-index: 1; /* Place it above the image */
    
}

.hero h2 {
    color: #007262; 
    font-family: montserrat; 
    font-size: 4vw;
    margin: auto;
    margin-left: 8vw;
    margin-top: 13vw;
    font-weight: 800;
    position: relative; /* Position text above the gradient */
    z-index: 2; /* Ensure text is above the gradient */
    display: flex;
    flex-wrap: wrap;
   
}

.below{
    color: #007262; 
    display: flex;
    flex-wrap: wrap;
    z-index: 3;/* Ensure text is above the gradient */
   
    align-items: center;
    margin: auto;
    font-size: larger;
    background-color: #FBB040;
    padding: 0.5vw;
    border-radius: 2vw;
    
    text-align: center;
    text-decoration: none;
    
    margin-top: 40vw;
    
    
    align-items: center;

   
    
    
}

.below a{

    color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
    font-family: 'montserrat', Courier, monospace;
    font-weight: 800;
    font-size: 3vw;
    text-align: center;
    align-items: center;
    padding: 2vw;
    
}

.below:hover a{
    text-decoration: underline;
}

h1{
    text-align: center;
    align-items: center;
    
    display: block;
    font-size: 4vw;
    padding: 0vw;
    font-weight: 850;    
    color: #007262;
    width: 98.3vw; /* Set a width */
    margin: 0 auto; /* This will center the div horizontally */
    margin-top: 10vw;
    

}

h3{
    text-align: center;
    align-items: center;
    
    display: block;
    font-size: 3vw;
    font-weight: 850;    
    color: #007262;
    width: 98.3vwvh; /* Set a width */
    margin: 0 auto; /* This will center the div horizontally */
    
}

p{
    margin: auto;
    padding: 2.5vw;
    align-items: center;
    text-align: left;
    font-size: 150%;
    font-size: 2vw;
    
    
}

.addisababa{
    background-image: url(Addis\ Ababa.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 90vw;
    height: 95vw;
    
}

.horizontal{
    margin: auto;
    width: 100vw;
    background-image: linear-gradient(90deg ,#FFD59A, #007262);
    
}

.numbers{

    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 98.3vw;
    height: 20vw;
    align-items: center;/* align elements vertical center */
    
}
.numbers li{
    text-align: center;
    margin-left: 15vw;
    font-weight: 1000;
    font-size: 3.5vw;
    
}



.commentbox {

   
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    height: 30vw;
    margin-top: 10vw;
}

.creambox{
    
   
    width: 20vw;
    height: 30vw;
    margin-left: 9vw;
    margin-right: 9vw;
    display: flex;
    flex-wrap: wrap;
}

.greenbox {
    
    
    width: 20vw;
    height: 30vw;
    display: flex;
    flex-wrap: wrap;

}

.comment {
   
    height: 20vw;
    
    
    width: 20vw;
    border-radius: 3vw;
    text-align: center;
    align-content: center;
    font-size: 1.5vw;
    font-family: 'Nokia Pureheadline Bold', Courier, monospace;
    
    
}
.commenter {
    
    
    height: 5vw;
    width: 20vw;
    text-align: center;
    align-content: center;
    font-size: 1.5vw;
}

@media (max-width: 768px) { 
    .commentbox {

            flex-direction: column; /* Stack boxes vertically */
            height: 100vw;
            
    }
    .creambox{
        height: 30vw;
        margin: 0vw;
        align-self: center;
        width: 50vw;
        display: flex;
    flex-wrap: wrap;
        
    }
    .greenbox {
        height: 30vw;
        margin-top: 5vw;
        margin-bottom: 5vw;
        align-self: center;
        width: 50vw;
        display: flex;
    flex-wrap: wrap;
    }
    .comment {
        height: 20vw;
        
        width: 50vw;
        border-radius: 3vw;
        text-align: center;
    align-content: center;
    font-size: 3vw;
    }
    .commenter {
       
        
        height: 5vw;
        width: 50vw;
    }
  }


.bottomaction{
    
    
   
    display: flex;
    flex-wrap: wrap;
    margin-top: 10vw;
    margin-bottom: 10vw;
    padding: 2vw;
    padding-left: 5vw;
    padding-right: 5vw;
    
    background-color: #FBB040;
    
    border-radius: 3vw;
    text-align: center;
    margin-left: 32vw;
    
}

.bottomaction a{
    color:#007262; /* Text color */
    text-decoration: none; /* Remove underline */
    font-family: 'montserrat', Courier, monospace;
    font-weight: 1000;
    font-size: 2.5vw;
    text-align: center;
    align-items: center;
    
}

.bottomaction:hover a{
    text-decoration: underline;
}

.horizontal2{
    margin: 0vw;
    padding: 0vw;
   
    width: 100vw;
    background-image: linear-gradient(270deg ,#FFD59A, #007262);
}

.links{

    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 98.3vw;
    height: 12.5vw;
    align-items: center;/* align elements vertical center */
}
.links li{
    text-align: center;
    margin: 0%;
    margin-left: 15vw;
    font-weight: 1000;
    font-size: 3vw;
    
    align-items: center;
    
    width: 5vw;
 
}



.links img{
    width: 6vw;
}


.footer{
    display: flex;
    flex-wrap: wrap;
    margin: 0%;
    display: flex;
    width: 97vw;
    
    text-decoration: none;
    color: #007262;
    height: 20vw;
}

.footer ul{
    display: flex;
    flex-wrap: wrap;
   
    margin: 0vw;
    margin-top: 1vw;
    list-style-type: none;
    text-decoration: none;
    color: #007262;
    height: 20vw;
    
}

.footertab {
    display: flex;
    flex-wrap: wrap;
    margin: 0%;
    list-style-type: none;
    text-decoration: none;
    color: #007262;
   
    width: 30vw;
  
    height: 20vw;
    
}



.footertab li{
    display: flex;
    flex-wrap: wrap;
    font-size: 1.8vw;
    margin: 0%;
    padding: 0%;
    list-style-type: none;
    text-decoration: none;
   
    margin-right: 2vw;
    
   
    
    
    
}

.footertab a{
    padding: 1vw;
    display: flex;
    flex-wrap: wrap;
    color: #007262;
    margin: 0vw;
    font-weight: 800;
    border: solid red;
    
 
    
}










.endbox{ 
    background-color: #007262;
    width: 100vw; height: 4vw;
   
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.01vw;
    padding-bottom: 0.01vw;
    

}

.endp{

    display: inline;
    text-decoration: none; /* Remove underline */
   font-size: 1.5vw;
    margin: auto;/* align text to center */
    color: #FFD59A;
    font-weight: 700;
    padding: 0%;
    border: none;
}

.endp a{
    text-decoration: none; /* Remove underline */
    display: inline;
    text-decoration: none; /* Remove underline */
   font-size: 1.5vw;
    margin: auto;/* align text to center */
    color: #FFD59A;
    font-weight: 700;
    padding: 0%;
    border: none;
}

.callcontainer{
    display: flex;
flex-wrap: wrap;
text-decoration: none; /* Remove underline */
margin-top: 5vw;
margin-bottom: 1.5vw;

height: 10vw;

width: 98.7vw;
}

.phone-link {
    text-decoration: none; /* Removes the underline from the link */
}

.contactinfo{
    
  
    display: flex;
    flex-wrap: wrap;

}

.contactinfo em{

  padding-left: 0vw;
    font-style: normal;
    color: #007262;
    font-size: 4vw;
    font-weight: 700;
    font-family: 'montserrat', Courier, monospace;
    

}
.contactinfo a{
    color: #FFD59A;
}

.contactinfo strong{
    
    padding-left: 5vw;

    
 
    color: black;
    font-size: 4vw;
    font-weight: 700;
}



h3 {
    margin: 0%;
    padding: 0%;

    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 5%; /* Ensure the element takes up full height */
    width: 98.7vw; /* Ensure the element takes up full width */
  }



#tutoring-form {

   
    width: 30vw;
    justify-content: center;
    align-items: center; /* Center vertically */
    margin-top: 5vw;
    margin-left: 10vw;
}

.contacttermslink {
  
 text-align: center;
 vertical-align: middle;
  height: 3vw;
  width: 98.70vw;
  font-size: 1.5vw;
  
}

.contacttermslink a{
  color: #007262;
}

.contacttermslink a:hover {
    text-decoration: underline;
  }




.slogan {
    margin: 0%; padding: 0%;
}

.slogan p{
    margin: 0vw; 
        padding: 0vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
        width: 98.7vw;
        background-color: #FFD59A;
        margin-bottom: 0vw;
        font-size: large;
        
        align-items: center;
        text-align: center;
        color:#007262 ;
        font-weight: 800;
        font-size: 5vw;

}

form {
    border: 1px solid #ccc;
    padding: 1vw;
    border-radius: 1vw;
    margin-top: 5vw;
    margin-bottom: 2.5vw;
}

label {
    display: block;
    margin: 0.5vw 0 5px;
    font-weight: 800;
    font-size: 1.5vw;
    color: #007262; /* Color for labels */
}

input, select, textarea {
    width: 30vw;
    padding: 1vw;
    margin-bottom: 1vw;
    background-color: #FFD59A; /* Background color for input fields */
    border: 1px solid #ccc;
    border-radius: 1vw;
}

button {
    background-color: #FBB040; /* Color for the submit button */
    color: #007262; /* Text color for the button */
    padding: 1vw;
    font-size: 1.5vw;
    font-weight: 1000;
    font-family: 'montserrat', Courier, monospace;
    width: 10vw;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #e09e30; /* Slightly darker shade on hover */
}

h3 {
    padding-top: 2vw;
    padding-right: 2vw;
    font-size: 2vw;
}



@media (max-width: 768px) { 
    #tutoring-form {

   
        width: 50vw;
        justify-content: center;
        align-items: center; /* Center vertically */
        margin-top: 5vw;
        margin-left: 10vw;
    }
    form {
        border: 1px solid #ccc;
        padding: 1vw;
        border-radius: 1vw;
    }
    
    label {
        display: block;
        margin: 0.5vw 0 5px;
        font-weight: 800;
        font-size: 3vw;
        color: #007262; /* Color for labels */
    }
    
    input, select, textarea {
        width: 50vw;
        padding: 1vw;
        margin-bottom: 1vw;
        background-color: #FFD59A; /* Background color for input fields */
        border: 1px solid #ccc;
        border-radius: 1vw;
    }
    
    button {
        background-color: #FBB040; /* Color for the submit button */
        color: #007262; /* Text color for the button */
        padding: 1vw;
        font-size: 3vw;
        font-weight: 1000;
        font-family: 'montserrat', Courier, monospace;
        width: 20vw;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    button:hover {
        background-color: #e09e30; /* Slightly darker shade on hover */
    }
    
    h3 {
        padding-top: 2vw;
        padding-right: 2vw;
        font-size: 5vw;
    }
    .slogan p{
        margin: 0vw; 
            padding: 0vw;
            padding-top: 2vw;
            padding-bottom: 2vw;
            width: 100vw;
    }

}


/* styles.css */
.search-wrapper {
    display: flex;
    align-items: center; /* Vertically center items */
    justify-content: center; /* Horizontally center wrapper content */
    
    height: 8vw;
    width: 100vw;
    padding: 5vw;
    box-sizing: border-box;
    
  }
  
  #search {
    border: 2.5px solid #d6d6d6;
    padding: 2vw;
    font-size: 1.2vw;
    font-family: 'montserrat', 'Arial Narrow', Arial, sans-serif;
    border-radius: 2.5vw 0 0 2.5vw;
    outline: none;
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    margin: 0;
    margin-right: 0; /* Remove right margin to align with button */
  }
  
  .search-button {
    display: flex; /* Use flexbox for icon alignment */
    justify-content: center; /* Center icon horizontally */
    align-items: center; /* Center icon vertically */
    background-color: #FFD59A; 
    color: rgb(136, 136, 136);
    border: 2.5px  solid #d6d6d6;
    padding: 2vw;
    font-size: 3vw;
    border-radius: 0 2.5vw 2.5vw 0;
    cursor: pointer;
    outline: none;
    height: 100%;
    margin-left: 0; /* Remove left margin to align with input */
  }
  
  .search-button i {
    color: #595757;
    margin: 0;
    padding: 0;
    font-size: 2.5vw;
    margin-left: 0%;
    margin-right: 1vw;
  }



/* Grid Styles */
.grid-container {
    display: grid;
    width: 100vw;
    height: 30vw;
    grid-template-columns: repeat(2, 35vw); /* Adjust column width */
    grid-template-rows: repeat(2, 12.5vw); /* Adjust row height */
    grid-column-gap: 12.5vw; /* Adjust column gap */
    grid-row-gap: 5vw;
    padding-left: 4vw;
    justify-content: left; /* Center the grid items horizontally */
    align-items: center; /* Center the grid items vertically */
  }
  
  a {
    text-decoration: none;
    display: flex; /* Make the anchor a flex container */
    justify-content: center; /* Center content horizontally within the anchor */
    align-items: center; /* Center content vertically within the anchor */
  }
  
  .grid-item {
    background-color: #FFD59A;
    text-align: center;
    width: 100%; /* Make grid-item fill the anchor */
    height: 12.5vw; /* Make grid-item fill the anchor */
    color: #007262;
    font-family: 'montserrat', 'Arial Narrow', Arial, sans-serif;
    font-size: 3vw;
    font-weight: 750;
    border-radius: 4vw;
    position: relative; /* Needed for absolute positioning of the icon */
    display: flex; /* Enable flexbox for text alignment */
    flex-direction: column; /* Stack text vertically */
    justify-content: center; /* Center text vertically */
    align-items: center; /* Center text horizontally */
    z-index: 0;
    line-height: 2vw; /* Adjust this value (smaller for less space) */
    transition: all 0.3s ease-in-out, padding-left 0.5s ease-in-out; /* Include padding-left in the transition */
  }
  
  .grid-item:hover {
    width: 38vw; /* Widen the background to the right */
    padding-left: 5vw; /* Add left padding on hover */
  }
  
  .grid-item-1 {
    /* No overflow hidden needed anymore */
  }
  
  .grid-item-2,
  .grid-item-3,
  .grid-item-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .description-text {
    text-decoration: underline;
    color: #007262;
    font-weight: 500;
    font-size: 1.5vw;
    z-index: 1;
  }
  
  .graduation-icon {
    height: 12.5vw; /* Adjust the size */
    width: auto;
    position: absolute;
    top: 50%;
    left: 65%; /* Initial position on the right */
    transform: translateY(-50%);
    z-index: 1; /* Ensure it's above the numbers */
    transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out, filter 0.3s ease-in-out; /* Transition opacity, left, and filter */
  }
  
  .initial-icon {
    opacity: 1; /* Initially show the first image */
  }
  
  .hover-icon {
    opacity: 0; /* Initially hide the second image */
  }
  
  .grid-item:hover .initial-icon {
    opacity: 0; /* Hide the first image on hover */
  }
  
  .grid-item:hover .hover-icon {
    opacity: 1; /* Show the second image on hover */
    filter: drop-shadow(0vw 0vw 0.7vw rgba(0, 0, 0, 0.3)); /* Add drop shadow on hover */
    left: 65%; /* Move the image slightly to the right on hover */
  }
  
  .exam-number {
    font-size: 17.5vw; /* Adjust the size of the numbers */
    color: #00726280; /* Initial color and opacity */
    opacity: 0.3;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    z-index: -1; /* Place the numbers behind the text */
    font-weight: 800;
    font-style: italic;
    transition: font-size 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out, text-shadow 0.3s ease-in-out; /* Add transitions for color and opacity */
  }
  
  .grid-item:hover .exam-number {
    color: white; /* Change the color to white on hover */
    opacity: 1; /* Make it fully opaque on hover */
    text-shadow: 0vw 0vw 3vw rgba(0, 0, 0, 0.3); /* Add a drop shadow on hover */
  }
  
  .grid-item:hover {
    text-align: left; /* Keep this for the final alignment */
    padding-left: 5vw; /* Increase this value for a larger gap */
    color: #007262;
    align-items: normal; /* Adjust vertical alignment as needed */
    transition: width 0.3s ease-in, padding-left 0.5s ease-in-out; /* Transition width and padding-left */
  }

  

/* Stack grid items vertically on small devices (e.g., mobile) */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* Single column */
    width: 100vw; /* Make it take the full viewport width */
    padding-left: 0; /* Reset left padding */
    padding-right: 0; /* Reset right padding */
  }

  a.grid-item:hover {
    width: 95vw; /* Adjust hover width for small devices */
    padding-left: 2.5vw; /* Adjust hover left padding proportionally */
  }
}




/*
 * Base font size for better rem calculations and accessibility.
 * 1rem will be 16px by default.
 */
html {
    font-size: 16px;
}

.terms {
    /*
     * On larger screens, the container will take 60% of viewport width
     * and have a 10% left margin.
     * max-width prevents it from becoming too wide on very large monitors.
     */
    width: 60vw;
    margin-left: 10vw;
    max-width: 900px; /* Adjust this max-width as needed for your content */
    padding: 15px; /* Add some internal padding for better readability */
}

/*
 * Media query to adjust the .terms container for smaller screens (e.g., mobile).
 * It will take up more width and have a smaller left margin,
 * giving content more space.
 */
@media (max-width: 768px) {
    .terms {
        width: 90vw; /* Make it wider on smaller screens */
        margin-left: 5vw; /* Reduce left margin */
        padding: 10px; /* Slightly less padding on very small screens */
    }
}



.termstitle {
    /*
     * Title font size:
     * Min: 28px (readable on mobile)
     * Fluid: 1.75rem + 1.5vw (scales effectively)
     * Max: 50px (not excessively large on very wide screens)
     */
    font-size: clamp(28px, 1.75rem + 1.5vw, 50px);
}

.termssubtitle {
    /*
     * Subtitle font size:
     * Min: 18px (readable on mobile)
     * Fluid: 1.125rem + 0.5vw (scales nicely)
     * Max: 28px (prevents too large text)
     */
    font-size: clamp(18px, 1.125rem + 0.5vw, 28px);
}

.termstext {
    /*
     * clamp(MIN_SIZE, FLUID_SIZE, MAX_SIZE)
     * Ensures font is never smaller than 16px (readable on mobile),
     * scales fluidly based on viewport width (1rem + 0.2vw),
     * and never gets larger than 20px (prevents huge text on large screens).
     */
    font-size: clamp(16px, 1rem + 0.2vw, 20px);
}


.termsbutton {
    /*
     * Button font size:
     * Min: 16px (readable on mobile)
     * Fluid: 1rem + 0.2vw (slight scaling)
     * Max: 20px (prevents too large text)
     */
    font-size: clamp(16px, 1rem + 0.2vw, 20px);
}



.termslinkbutton a {
    color: #007262;
}

.termslinkbutton a:hover {
    text-decoration: underline;
}

.contactfootnote{
  padding-right: 5vw;

  margin-left: 20vw;
  text-align: right;
 font-size: clamp(16px, 1rem + 0.2vw, 25px);
  
  margin-bottom: 2vw;
}