/* @media screen and (min-width: 1000px) { */
    html {
    box-sizing: border-box;
    margin: 0;    /* also reset default body margin */
    }
    *,
    *::before,
    *::after {
    box-sizing: inherit;
    }

    .header {
        
            background-color: white; /*this is not needed before in the after we add a white background */
            display: flex;
            width: 100%;
            height: 100px;
            position: relative;
            z-index:10;
            overflow: visible;
            
        }

    /* 2) Rainbow glow, hidden by default */
    #header::before {
        content: "";
        position: absolute;

        width: 100%;      /* 120% of the header’s size, so it bleeds out */
        height: 120%;     /* same vertically */

        background: linear-gradient(
            60deg,
            #f79533, #f37055, #ef4e7b,
            #a166ab, #5073b8, #1098ad,
            #07b39b, #6fba82
        );
        filter: blur(15px);
        opacity: 0;
        transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;

        /* put it below the white face but above the page background */
        z-index: -2;
    }

    .contact::before{
        content: "";
        position: absolute;

        width: 96%;      /* 120% of the header’s size, so it bleeds out */
        height: 85%;     /* same vertically */

        background: linear-gradient(
            60deg,
            #f79533, #f37055, #ef4e7b,
            #a166ab, #5073b8, #1098ad,
            #07b39b, #6fba82
        );
        filter: blur(15px);
        opacity: 0;
        transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;

        z-index: -2;/* put it below the white face but above the page background */
       

    }

    /* 3) Solid white “face” of the header */
    #header::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;   /* your header’s background */
        z-index: -1;         /* above the glow, below the real content */
    }

    /* .contact::after{
        content: "";
        position: absolute;
    
        width: 100%;
        height: 100%;

        z-index: -1;        
    } */

    /* 4) On hover, fade the glow in */
    #header:hover::before, .contact:hover::before {
        opacity: 1;
        filter: blur(8px);
    }



    .logo img {
        height: 100%; 
        width: auto; /* for good aspect ratio */
    }

    .navBar {
        display: flex;
        gap: 30px;
        margin-left: 50px; /* margin to separate the logo and nav bar */
    }

    .navB {
        text-decoration: none;
        color: black;
        font-weight: 500;
        font-family: 'Segoe UI';
        font-size: 14px; 
    }

    .utilNavBar {
        display: flex;
        gap: 25px;
        margin-left: auto; /* Push the utility bar to the right */
        margin-right: 40px;
        align-items: center;
        
    }

    .utilNavBar a{
        text-decoration: none;
    }

    /* this is for desktop/laptop header */
    .uBarNoSing {
        text-decoration: none;
        color: black;
        font-family: 'Segoe UI light';
        font-size: 20px; 
        font-weight: bold;

    }

    /* .uBarNoSing {
        font-size: 20px; 
        font-weight: bold;
        color: black;
        font-family: 'Segoe UI light';
        
        text-shadow:
            0 0 5px  #39FF14,
            0 0 10px #39FF14,
            0 0 20px #39FF14,
            0 0 40px #39FF14,
            0 0 80px #39FF14;
        animation: glow 1.5s infinite alternate;
    }

    @keyframes glow {
        
        0% {
            text-shadow:
            0 0 5px  #39FF14,
            0 0 10px #39FF14,
            0 0 20px #39FF14,
            0 0 40px #39FF14,
            0 0 80px #39FF14;
        }
        100% {
            text-shadow:
            0 0 10px  #00D4FF,
            0 0 20px  #00D4FF,
            0 0 40px  #00D4FF,
            0 0 80px  #00D4FF,
            0 0 160px #00D4FF;
        }
    } */
    .signUp {
        border: none;
        background-color: #28883A; 
        color: white; 
        padding: 8px 15px;

        
        font-family: 'Segoe UI';
        font-size: 12px;
        font-weight: 600;

       
    }

    .gaudiImgContainer {
        width: 100%;
        height: calc((100% - 100px)); 
        background-image: url('gaudiStyle.png');
        background-repeat: no-repeat;
        background-size: cover;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;


        /* overflow: hidden;  this was used for the image wrap in the div */
    }

    #contactusButton {
        width: 150px;
        height:50px;
        border-radius:180px;
        position:relative;
        left:calc(50% - 75px);
        top:calc(80%);
        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
        cursor:pointer;
        line-height:12px;
        }

    #contactusButton:before {
        content:'';
        z-index:1;
        position:absolute;
        display:block;
        width:140%;
        height:120%;
        top:-15%;
        left:-10%;
        transition: 0.3s opacity ease-in-out;
        filter:blur(15px);
        opacity:0;
        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
        }

    #contactusButton:hover:before {
        opacity:1;
        transition: 0.3s opacity ease-in-out;
        filter:blur(14px);
        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);  
    }

    #contactusButton:after {
        font-family: 'Lucida Handwriting', cursive;
        content:'Request!';
        text-align:center;
        line-height:40px;
        font-size:18px;
        color:rgba(235,235,235,1);
        font-weight:bold;
        z-index:5;
        position:absolute;
        display:block;
        border-radius:180px;
        width:92%;
        height:80%;
        top:10%;
        left:4%;  
        background-color:rgb(19, 20, 22);
    }

    /* Style inputs with type="text", select elements and textareas */
        input[type=text], select, textarea {
        width: 100%; /* Full width */
        padding: 12px; /* Some padding */ 
        border: 1px solid #ccc; /* Gray border */
        border-radius: 15px; /* Rounded borders */
        box-sizing: border-box; /* Make sure that padding and width stays in place */
        margin-top: 6px; /* Add a top margin */
        margin-bottom: 16px; /* Bottom margin */
        resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
    }
    
    /* Style the submit button with a specific background color etc */
    button[type=submit] {
        background-color: #04AA6D;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 15px;
        cursor: pointer;
    }
    
    /* When moving the mouse over the submit button, add a darker green color */
    button[type=submit]:hover {
        background-color: #45a049;
    }
    
    /* Add a background color and some padding around the form this is for the contact us  */
    .outercontainer {
        background-color: white;
        padding: 20px;
        display: flex;  
    }
    .contact{
        position: relative;
        z-index: 0;
        width: 60%;
        height: 60%;
        margin-top: 5%;
        
        background-image: url("gaudiStyle.png");
        border-radius: 15px;
        padding: 20px;

    }
    .lizard {
        text-align:center;
        width: 40%;
        margin: auto;
    }

    .lizard img {
        width: 60%;
        margin:auto;
    }

    /* end of contact us style */



    /* this is the styling for about us */
    .abstractcolorsContainer{
        width: 100%;
        height: calc(100% - 100px);
        /* background-image: url('abscolor3.jpg'); */
        background: #124E65;
        background-repeat: no-repeat;
        background-size: cover;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        position: relative;

    }
    #typeAnimationDiv{
        display: inline-block;
        margin-left: 5%;
        margin-top: 5%;

    }

    #typeAnimation{
        position: relative;
        display: block;
        /* margin-top: 25%; */

        /* top: 25%;
        left: 2%; */
        
        font-family: monospace;
        /* display: inline-block;  */
        display: block;
        /* display: max-content; */
        white-space: nowrap;
        color: white;
       
      
    }

    #typeAnimation::before,
    #typeAnimation::after{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    #typeAnimation::before{
        /* position: absolute;
        z-index: 1;
        top:0;
        left:0; */
        
        background-color: #124E65;;
        animation: typewirter 1.8s steps(9) 1s forwards;
    }
    #typeAnimation::after{
        width: 0.09em;

        background: white;
        animation: typewirter 1.8s steps(9) forwards 1s, /*animationName time this animationShouldTake setps whereTheAnimationgoesOrStops WhernTheAnimationStarts */
        blinkk 750ms steps(9) infinite;
    }

    @keyframes typewirter {
        to {left: 100%;}
        
    }

    @keyframes blinkk {
        to{
            background: transparent;
        }

    }
    @keyframes fadeInUp {
        to{
            opacity: 1;
            transform: translateY(0);
        }
        
    }

    #textUnderAbout{
        position: static;
        font-family: cursive;
        display: block;
        width: 33%;
        color: white;
        margin-left: 5%;
        opacity: 0;
        transform: translateY(10rem);
        font-size: 1.5rem;
        width: 60%;
        animation: fadeInUp 2s ease forwards 3s;
    }

 

    /* #geckoContainer{
        width: 400px;
        height: 200px;
        background-color: red;
        position:absolute;
        left: 70%;
        border-radius: 20px;
        background-image: url(colorfulgecko.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        
    }
    #geckoContainer::after{
        content: 'Hover over to see a cute gecko!';
        font-family: 'monospace', 'Segoe UI';
        color: white;
        font-weight: 700;
        font-size: 1000;
        padding-top: 21%;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url(tree.jpg);
        border-radius: 20px;
        
    }
        #geckoContainer:hover::after {
        content: "";
        animation: typewirter 4s ease-in-out forwards;
    } */
     #textAndGecko{
        display: flex;
     }
     #geckoContainer {
        margin-left: auto;
        position: relative;
        /* left:70%; */
        width: 400px;
        height: 200px;
        border-radius: 20px;
        overflow: hidden;         
        background: url(colorfulgecko.jpg) center/cover no-repeat;
    }
        #geckoContainer::after {
        content: '';
        position: absolute;
        inset: 0;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url("plane4.png") no-repeat center center fixed;
        background-size: cover;
        /* background: #124E65; */
        color: white;
        font: 700 1rem monospace;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        transform: translateX(0);
        transition: transform 2s ease-in-out;

    }

    #geckoContainer:hover::after {
        transform: translateX(100%);
    }






    /* this is for the about us animation ============================= */

    /* this is the end of the about us styling */




/* js stuff for div */


/* } */


/* 1) Base: hide hamburger, show full nav */
.hamburger {
  display: none;
}
.utilNavBar {
  display: flex;
  flex-direction: row;
  gap: 25px;
}

/* 2) Mobile breakpoint */
@media (max-width: 768px) {
      .outercontainer {
    flex-direction: column;
    align-items: center; /* center children horizontally when stacked */
  }
  .contact {
    width: 100%;
    margin-top: 0;       /* remove any large top margin if needed */
  }
  .lizard {
    width: 100%;
    margin: 1rem 0 0;    /* give a bit of space above the image */
    text-align: center;  /* already centers the <img> inside */
  }
  .lizard img {
    width: 60%;          /* or bump to 80%/100% if you prefer it larger on mobile */
  }

  #contactusButton {
     top:350px;
  }
  /* .header {
    padding: 0 1rem;
    align-items: center;
    position: relative;
  } */
.header {
    /* instead of width:100% + padding → overflow, do this: */
    /* width: calc(100%- 0.5rem); */
    width: 100%;
    /* padding: 0 1rem;
    overflow-x: hidden;
    z-index: 20; */
  }
  
    .logo img {
        display: none;
        /* height: 100%;  */
        /* width: auto; for good aspect ratio */
    }

  /* show hamburger */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    z-index: 20; /* above everything */
  }
  .hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    margin: 4px 15px;
    background: #333;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* hide main nav, prepare it for sliding down */
  .utilNavBar {
    position: absolute;
  
    
    top: 100%;      /* right under the header */
    left: 0;
    right: 0;
    flex-direction: column;
    background: white;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
    
  }
  .utilNavBar a {
    padding: 0.75rem 1rem;
    border-top: 1px solid #eee;
  }

  /* when .open is toggled on the header… */
  .header.open .utilNavBar {
    max-height: 300px; /* big enough to show all links */
  }
  .header.open .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(10px,10px);
    
  }
  .header.open .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .header.open .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px,-5px);
    
  }

    .logo img {
    display: block;
  }

  /* 2) Make sure your header is still flex and centered vertically */
  .header {
    display: flex;
    align-items: center;
    /* we’ll push the logo with margin on itself, so flex‐start is fine */
    justify-content: flex-start;
  }

  /* 3) Re-order: hamburger first, logo second */
  .hamburger {
    order: 1;
  }
  .logo {
    order: 2;
    width: 50%;
    height: 100%;
    margin-left: auto;    /* eats up all free space, pushing itself to the right */
  }

}