.container
        {
        display:grid;
        max-width: 100%;
        min-height:100vh;
        background-color:#4FACF7;
        grid-template-areas: 
              "header" 
              "main"
              "footer";
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 6fr 0.5fr;
        width:100%;
        margin: 0  auto;
        border:solid 2px black ;
         border-radius: 10px;
        font-family: Arial, Helvetica, sans-serif;
        }
       
        @keyframes colorChange {
            0%   { background: #444; }
            25%  { background: #0066ff; }
            50%  { background: #00cc66; }
            75%  { background: #ff8800; }
            100% { background: #444; }
         }

       #header{
           
            grid-area: header;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content:space-between;
            background-color:#0066FF;
            flex-wrap: wrap;
            z-index: 999;
            border-radius: 10px 10px 0px 0px;
            /*animation: colorChange 5s linear infinite;*/
               }
   #header nav > ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin-top: 70px;
}
        #header ul li a {
                color: #fff;
                text-decoration: none;
                padding: 10px 15px;
                }

         .main {
            background-color: #4FACF7;
            
         }
          .section1 {
            background-color: #4FACF7;
            display: flex;
            justify-content: center; /* horizontal center */
            align-items: center;    /* vertical center */
            flex-direction: column;
            
         }
         .section2{
            background-color: #3016d5;
            display: flex;
            justify-content: center; /* horizontal center */
            align-items: center;    /* vertical center */
            flex-direction: column;
            
         }
         .section3{
            background-color: #624fdb;
            display: flex;
            justify-content: center; /* horizontal center */
            align-items: center;    /* vertical center */
            flex-direction: column;
            
         }
         .section4{
            background-color: #0c16d5;
            display: flex;
            justify-content: center; /* horizontal center */
            align-items: center;    /* vertical center */
            flex-direction: column;
            
         }
         #product{
            display: flex;
            justify-content: center;
            flex-direction: row;
            margin-right: 10px;
            gap:10px;

         }
         .intro{
            margin-left: 200px;
            margin-right: 200px;
            text-align: center;
            font-size: 20px;
            line-height: 1.6;
            font-family: 'Times New Roman', Times, serif;
            font-weight: 100;
            color:antiquewhite;
         }
         .about{
            margin-left: 100px;
            margin-right: 100px;
            text-align: center;
            font-size: 20px;
            line-height: 1.6;
            font-family: 'Times New Roman', Times, serif;
            font-weight: 100;
            color:antiquewhite;
         }
         .services{
            margin-left: 100px;
            margin-right: 100px;
            text-align: left;
            font-size: 20px;
            line-height:0.5;
            font-family: 'Times New Roman', Times, serif;
            font-weight: 100;
            color:antiquewhite;
         }
         .row{
            display: flex;
            line-height: 1.5;

         }

         .footer{
           grid-area:footer;
            display: flex;
            flex-direction: row;
            justify-content:space-between;
            background-color:#0066FF ;
            flex-wrap: wrap;
            z-index: 999;
             }

             .column{
              line-height:0.2;
              margin: 30px 30px 20px 20px; 
              color: #fff;
            
             }
            .column ul{
            list-style: none;
                       }
            .column ul li a{
               color: #fff;
            list-style: none;
            text-decoration: none;
           line-height:2.0;
            gap: 20px;
            font-weight: 100;
           
               }
         svg {
  width: 100%;
  height: auto;
  display: block;
}
.icon {
    width: 25px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}
.contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 20px;
    margin-top: 100px; /* pushes it lower than nav */
}
.contact-info div {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.dropdown{
   position:relative;
    
}
.dropdown-menu{
   display:none;
   position:absolute;
   top:100%;
   left:0;
   background-color: #431ba8;
   list-style: none;
   padding: 0;
    margin: 0;
   min-width: 15px;
    flex-direction: column; /* important */
    z-index: 1000;
}
.dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    color: white;
}
.dropdown-menu li a:hover {
    background-color: #0066ff;
}

/* 🔑 THIS is the key */
.dropdown:hover > .dropdown-menu,
.dropdown-menu:hover {
    display: block;
}