* {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
                
                
                .My_Banner
                {
                    color: rgb(50, 78, 129);
                    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                    font: 500;
                    margin-bottom:5px ;
                }
                
                .tagline

                {

                 color:rgb(50, 78, 129) ;
                 margin-top: 0;
                 margin-top: 0;
                }
                
                .textbox

                {
           
                background: white;
                color: #666;
                padding: 1em;
                border-radius: 10px;
                border: 2px solid black;                                                               
                min-height: 200px;
                max-height: 500px;
                overflow: auto;
                resize: none;
                box-sizing: border-box;
                 white-space: pre-wrap;
                overflow-wrap: break-word;
                

                }
                .textbox:focus 
                {
                outline: none;
                border: 2px solid rgb(50, 78, 129);
                }
                
                .language-select 
               
                {
               width: 220px;
               padding: 10px;
               border: 2px solid rgb(50, 78, 129);
               border-radius: 8px;
               font-size: 16px;
               background-color: white;
               color: rgb(50, 78, 129);
               cursor: pointer;
                }

                

                 .dropdown

                 { 
                    
                   display: flex;
                   flex-direction: column;
                }
                

                .layout

                {

                justify-content: space-between;
                align-items: flex-start;
                display: flex;
                gap: 30px;
                flex-wrap: wrap;
                }


                .Radical-buttons
              {
                width: 300px;
                margin-top: 20px;
                color: rgb(50, 78, 129);
                font-family: Arial, sans-serif;
                display: flex;
                flex-direction: column;
               }


                #Radical-buttons
                {
                width: 100%;
                cursor: pointer;
                }


                .Translate-button


                 {
                  background-color: rgb(29, 127, 255);
                  color: white;
                  border: none;
                  padding: 15px 60px;
                  font-size: 18px;
                  border-radius: 12px;
                  cursor: pointer;
                  font: 100;
                  margin-top: 10px;
                  width: 100%;
    
                
                 }

                 .left-panel,
                 .Right-panel 
                    {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    flex: 1;
                   min-width: 320px;
                    }

                 .left-panel 
                 {
                 display: flex;
                 flex: 1;
                 flex-direction: column;
                 gap: 20px;
                background: #ddd;
                padding: 20px;
                border-radius: 10px;
   
                }

                .Right-panel 
                {
                min-width: 320px;
                flex: 1;
                background: #ddd;
                padding: 20px;
                border-radius: 10px;

                 }

                 .controls-row 
                {
                display: flex;
                align-items: flex-start;
                gap: 50px;
                }

                .output-language
                {
                display: flex;
                flex-direction: column;
                }

                .input-language

                {
                display: flex;
                flex-direction: column;

                }

                .Container-2
                
                {

                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-direction: column;
                box-sizing: border-box;
                width: 100%;
                min-height: 394px;
                height: auto;
                 box-shadow: 0px 20px 40px rgba(0, 0, 0, 0);
                 gap: -20px;
                max-width: none;
   
  

                }

               .tabs 
               {
         
                width: 100%;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
                margin-top: 0;
                font-size: 15px;


               }

               h3
               {
                background: rgb(29, 127, 255);
                text-align: center;
                padding: 15px 0px;
                border-radius: 12px;
                cursor: pointer;
                color: white;



               }

               .tab-content 

               {


                  width: 100%;

                 margin-top: 0;
                 box-sizing: border-box;
               }

               .tab-content div{

                 flex-direction: column;
               }



               .show
               {
                 display: flex;
               }

               .hide
               {
                display: none;
               }

               .active
               {
                background: #bdbcbc;
               }

               .input-textbox
               {
                width: 100%; 
                height: 200px;
               }
                
               .output-textbox
               {
                 width: 100%;
                height: 300px;
                box-sizing: border-box;

                }

@media (max-width: 900px) {

    .layout {
        flex-direction: column;
    }

    .left-panel,
    .Right-panel {
        width: 100%;
    }

    .controls-row {
        flex-direction: column;
        gap: 20px;
    }

    .tabs {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    .tabs h3 {
        padding: 8px 0;
        font-size: 12px;
    }


    /* Smaller Translate button */
    .Translate-button {
        font-size: 14px;
        padding: 10px 20px;
        width: 100%;
        border-radius: 8px;
    }


    /* Smaller Radical section */
    .Radical-buttons {
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
    }


    /* Keep dropdowns comfortable size */
    .language-select {
        width: 100%;
        font-size: 15px;
        padding: 10px;
        height: 42px;
    }


}