:root
{
    --IconGold:rgb(207,159,2);
}
*
{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
.container
{
    width: 50%;
    height: 400px;
    border:2px solid black;
    margin:100px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    >div
    {
        width: 100px;
        height: 100px;
        background-color:red;
        border:2px solid black;
        /* flex-grow:2; */
        &:nth-of-type(1)
        {
            align-self:flex-end;
            order:1;
        }
    }
}
.body
{
    background-color:rgb(34,34,34);
    background-image:url(../img/back_one_head.png);
}
.menu
{
    width: 100%;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.43);
    margin-top:100px;
    display: flex;
    padding:0 10%;
    
    >*
    {
        height: 100%;
        /* border:2px solid red; */
    }
    >form
    {
        width: 30%;
        display: flex;
        align-items:center;
        position:relative;
        >input[type="text"]
        {
            width: 100%;
            height: 40px;
            border-radius:50px;
            border:none;
            outline: none;
            padding-left: 10px;
            &::placeholder
            {
                font-size:20px;
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            }
            
        }
        >input[type="submit"]
        {
            display: none;
        }
        >label
        {
            display: flex;
            /* border: 1px solid yellow; */
            width: 40px;
            height: 40px;
            position: absolute;
            right: 10px;
            top:30px;
            cursor: pointer;

        }
    }
    >nav
    {
        width: 70%;
        >ul
        {
            width: 100%;
            height: 100%;
            /* background-color:red; */
            display: flex;
            justify-content: end;
            gap:10px;
            flex-direction: row-reverse;
            >li
            {
                width: auto;
                height: 100%;
                /* border:1px solid gray; */
                min-width:50px;
                list-style-type: none;
                position: relative;
                &:hover
                {
                    >ul
                    {
                        opacity:1;
                        visibility:visible;
                    }
                }
                
                >a
                {
                    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                    text-decoration: none;
                    text-transform: capitalize;
                    display: flex;
                    width: 100%;
                    height: 100%;
                    /* background-color: orange; */
                    >div
                    {
                        height:100%;
                        /* border:1px solid white; */
                        display: flex;
                        &:first-of-type
                        {
                            width: 60%;
                            flex-wrap: wrap;
                            >strong
                            {
                              display: flex;
                              width: 100%;
                              height: 50%;
                              font-weight:normal;
                              gap:20px;
                              /* border:1px solid red; */
                              justify-content: center;
                              &:first-of-type
                              {
                                align-items: end;
                                color:white;
                              } 
                              &:last-of-type
                              {
                                color: var(--IconGold);
                              } 
                            }
                            
                        }
                        &:last-of-type
                        {
                            /* icon-place */
                            align-items: center;
                            width: 40%;
                            color:var(--IconGold);
                            padding:0 3px;
                            transition:0.4s;
                            &:hover
                            {
                                scale:1.2;
                            }
                            
                           
                        }
                        
                    }

                }
                >ul
                {
                    opacity:0;
                    visibility:hidden;
                    /* background-color: red; */
                    width: 500px;
                    height: 250px;
                    position: absolute;
                    top:100px;
                    right:0;
                    transition:1s;
                        &::before
                            {
                                content:'';
                                display: flex;
                                width: 0;
                                height: 0;
                                border-top:none;
                                border-bottom:10px solid rgba(255, 255, 255, 0.43);
                                border-right:10px solid rgba(35, 19, 19, 0);
                                border-left:10px solid rgba(216, 48, 48, 0);
                                position: absolute;
                                top:5px;
                                right:40%;
                                
                            }
                    >li
                    {
                        width: 100%;
                        height:calc(100% - 15px);
                        margin-top: 15px;
                        border-radius:20px;
                        background-color:rgba(255, 255, 255, 0.43);
                        background-image:url(../img/09994db832d.png);
                        background-position:left bottom;
                        background-repeat: no-repeat;
                        background-size:auto 70%;
                        display: flex;
                        justify-content:end;
                        >ul
                        {
                            width: 25%;
                            height: 100%;
                            border:1px solid red;
                        
                            >li
                            {
                                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                                list-style-type: disc;
                                &::marker
                                {
                                    font-size: 40px;
                                    color: yellow;
                                }

                            }
                         
                        }
                    }
                }
            }
            }
    }
}
.menu2
{
   width: 100%; 
   height: 100px;
   background-color:rgb(185,185,185);
   display: flex;
   padding:0 5%;
   position: relative;
   >*
   {
     height: 100%;
     /* border:1px solid red;    */

   }
   >figure
   {
      width:20%;
      display: flex;
      justify-content: start;  
      align-items: center;
      >img
      {
        height: 55%;
      }
   }

   >nav
   {
        width:80%;
        >ul
        {
            width: 100%;
            height: 100%;
            /* background-color:red; */
            display: flex;
            /* justify-content: flex-end; */
            flex-direction:row-reverse;
            >li
            {
                list-style-type: none;
                height: 100%;
                /* border:1px solid yellow; */
                >a
                {
                    /* background-color:purple; */
                    display: flex;
                    width: 100%;
                    height: 100%;
                    text-decoration:none;
                    color:black;
                    font-size: 20px;
                    text-transform: capitalize;
                    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                    align-items: center;
                    transition:0.4s;
                    padding:0 20px;
                    &:hover
                    {
                        background-color:#2c7a7b;
                        color:white;
                    }
                }
                &:hover
                {
                    >ul
                    {
                        height: 350px;
                    }
                }
                >ul
                {
                    transition:1s;
                    /* mega menu */
                    width: 100vw;
                    height: 0px;
                    overflow: hidden;
                    background-color:#2c7a7b;
                    position: absolute;
                    top: 100px;
                    right:0;
                    >li
                    {
                        list-style-type: none;
                        width: 100%;
                        height: 100%;
                        >div
                        {
                            width: 100%;
                            padding:20px 10%;
                            /* border:1px solid whitesmoke;  */
                            &:first-of-type
                            {
                                >*
                                {
                                    color:white;
                                    text-align: center;
                                    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                                }
                                >h2
                                {
                                    font-size: 33px;
                                }
                                >p
                                {
                                    font-size:20px;
                                }
                            }
                            &:last-of-type
                            {
                                display: flex;
                                >div
                                {
                                    border-left:1px solid green;
                                    padding-left:1%;
                                    width: 25%;
                                    height: 200px;
                                    color:white;
                                    &:nth-of-type(1)
                                    {
                                        border-left:initial;
                                    }
                                    /* border:1px solid red; */
                                    >div
                                    {
                                        &
                                        {
                                            /* line 1 */
                                            display: flex;
                                            >*
                                            {
                                                /* border:1px solid rebeccapurple; */
                                            }
                                            >div
                                            {
                                               width: 20%;
                                               
                                            }
                                            >h3,>a
                                            {
                                                width: 80%;
                                                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                                                display: flex;
                                                align-items: center;
                                                padding-left:10px;
                                            }
                                            >a
                                            {
                                                text-decoration: none;
                                                color:white;
                                            } 
                                        }
                                    }
                                >p
                                {
                                    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                                    font-style: 20px;
                                    margin:5px 0;
                                }    
                                }
                            }
                        }
                    }
                    
                }
            }
        }
   }
}