:root {
   /* Light Mode Colors */
   --textColor: hsl(200, 15%, 8%);
   --inputColor: hsl(0, 0%, 52%);
   --backgroundColor: hsl(0, 0%, 98%);
   --elementsColor: hsl(0, 0%, 100%);
}

.dark-mode {
   /* Dark Mode Colors */
   --textColor: hsl(0, 0%, 100%);
   --inputColor: hsl(0, 0%, 100%);
   --elementsColor: hsl(209, 23%, 22%);
   --backgroundColor: hsl(207, 26%, 17%);
}

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   text-decoration: none;
   list-style: none;
   font-family: "Nunito Sans", sans-serif;
   /* transition: background .4s ease-in-out, color .4s ease-in-out; */
}

*::-webkit-scrollbar{
   display: none;
}

body {
   background-color: var(--backgroundColor);
   color: var(--textColor);
   transition: background .4s ease-in-out, color .4s ease-in-out;
}

.main-area{
   min-width: 100vw;
   min-height: 100vh;
}

/*====================================== Header Desing ================================= */

.menu{
   width: 100vw;
   background: var(--elementsColor);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 5rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.menu h1{
   font-size: 1.8rem;
   color: var(--textColor);
   cursor: pointer;
}

.menu button{
   border: none;
   font-size: 1.1rem;
   font-weight: 600;
   padding: .5rem;
   background: var();
   background: var(--elementsColor);
   color: var(--textColor);
   cursor: pointer;
   transition: background .4s ease-in-out, color .4s ease-in-out;
}

.menu button i{
   padding-right: .3rem;
}


/* ========================================== Search Area Desing ============================================== */

.filter-area{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.5rem 5rem;
   margin: 1rem 0;
}

.filter-area form{
   background: var(--elementsColor);
   color: var(--textColor);
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
   padding: 1rem 1.5rem;
   color: var(--inputColor);
   border-radius: .4rem;
   transition: background .4s ease-in-out, color .4s ease-in-out;
}


.filter-area form input{
   border: none;
   width: 30vw;
   padding-left: .5rem;
   background: var(--elementsColor);
   color: var(--textColor);
   transition: background .4s ease-in-out, color .4s ease-in-out;
}

.drop-dow-menu{
   width: 12rem;
   background: transparent;
   padding-bottom: .5rem;
   margin-top: .5rem;
}

.drop-dow-menu .hovar-menu{
   padding: 1rem 0;
   background: var(--elementsColor);
   display: flex;
   justify-content: space-around;
   align-items: center;
   border-radius: .4rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
   cursor: pointer;
   transition: background .4s ease-in-out, color .4s ease-in-out;
}

.drop-dow-menu .hovar-menu h3{
   font-size: 1rem;
   font-weight: 500;
   color: var(--textColor);
}

/* .drop-dow-menu .hovar-menu span{
   position: relative;
   top: -0.5rem;
   color: var(--textColor);
} */

.drop-dow-menu .menu-item-area{
   background: var(--elementsColor);
   position: absolute;
   width: 12rem;
   top: 11.15rem;
   font-weight: 200;
   border-radius: .3rem;
   padding: .5rem 0;
   display: none;
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
   transition: background .4s ease-in-out, color .4s ease-in-out;
}

.menu-item-area ul li.menu-item{
   padding: .3rem 1.12rem;
   cursor: pointer;
   color: var(--textColor);
}

.menu-item-area ul li.menu-item:hover{
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
   transform: scale(1.1);
   font-weight: 400;
}

.menu-item-area ul:has(li.menu-item:hover){
   overflow-x: hidden;
}

.drop-dow-menu:hover .drop-dow-menu div.menu-item-area,
.drop-dow-menu:hover div.menu-item-area{
   display: block;
}

.menu-item-area.block{
   display: none;
}


/*======================================= Countiries Content Desing ================================== */

.countiries-content{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 2fr));
   gap: 5rem;
   padding: 20px;
   justify-content: center;
   padding: 0 5rem;
}

.countiries-content .countiries-item{
   border-radius: .5rem;
   background: var(--elementsColor);
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
   color: var(--textColor);
   cursor: pointer;
   transition: background .4s ease-in-out, color .4s ease-in-out;
}

.countiries-content .countiries-item img{
   width: 100%;
   height: 10rem;
   object-fit: cover;
   border-radius: .5rem .5rem 0 0;
}

.countiries-item .country-info{
   padding: 1.5rem 1.5rem 2.5rem;
   line-height: 1.5rem;
}

.country-info .country-name{
   margin-bottom: 1rem;
   font-size: 1.5rem;
}

.country-info p{
   font-weight: 600;
}

.country-info p span{
   font-weight: 300;
}


/* .drop-dow-menu:hover .drop-dow-menu div.menu-item-area,  */
.block{
   display: none;
}




/*======================================= Countries Diteals informetion Desing ================================== */

.countries-info-area{
   padding: 1.5rem 5rem;
   min-height: 100vh;
}

div.back{
   display: flex;
   align-items: start;
   width: 100%;
   padding: 3rem 0rem 4rem;
}

.back button{
   padding: .5rem 2rem;
   background: var(--elementsColor);
   color: var(--textColor);
   border: none;
   border-radius: .3rem;
   cursor: pointer;
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
   transition: background .4s ease-in-out, color .4s ease-in-out;
}

.countries-info-area .countries-info-tem{
   display: flex;
   align-items: center;
   gap: 10rem;
   height: 20rem;
}

.flag {
   width: 100%;
   max-width: 25rem;
   height: 100%;
}

.flag img{
   max-width: 30rem;
   height: 100%;
   object-fit: cover;
   box-shadow: 0rem 0rem 0.7rem 1rem rgba(0, 0, 0, .1);
}

.country-info h1.country-name{
   font-size: 2.5rem;
   margin-bottom: 1rem;
   font-weight: 700;
}

.country-info .info{
   display: flex;
   gap: 5rem;
   line-height: 2rem;
   align-items: center;
}

.info-left p span,
.info-right p span{
   color: var(--textColor);
   opacity: .8;
}

.border-countries{
   display: flex;
   gap: 1rem;
   margin-top: 3rem;
   align-items: center;
}

.border-countries .border-countries-list{
   display: flex;
   gap: .7rem;
   align-self: center;
   max-width: 70rem;
   flex-wrap: wrap;
}

.border-countries .border-countries-list button{
   width: 7rem;
   padding: .5rem 0;
   background: var(--elementsColor);
   color: var(--textColor);
   border-radius: .3rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
   border: none;
   cursor: pointer;
   transition: background .4s ease-in-out, color .4s ease-in-out;
}



/* ==================================================================== footer desing =================================================================== */