.s-m-icon {
     background: #566573;
     padding: 1px 5px;
     font-size: 25px;
     border-radius: 4px;
 }

 .s-m-icon i {
     color: white;
     font-size: 25px;
 }

 .i-con-m {
     font-size: 20px;
     margin-top: 12px;
     color: black;
 }

 .hidden {
     display: none !important;
 }

 .block {
     display: block !important;
 }

 .flex {
     display: flex !important;
 }

 .flex-1 {
     flex: 1 1 0%;
 }

 .w-full {
     width: 100% !important;
 }

 .w-1\/2 {
     width: 50% !important;
 }

 .mx-auto {
     margin-left: auto;
     margin-right: auto;
 }

 .justify-items-center {
     justify-items: center;
 }

 .justify-start {
     justify-content: flex-start;
 }

 .justify-end {
     justify-content: flex-end;
 }

 .justify-center {
     justify-content: center;
 }

 .justify-between {
     justify-content: space-between;
 }

 .items-center {
     align-items: center;
 }

 .shrink-0 {
     flex-shrink: 0;
 }

 .mr-auto {
     margin-right: auto;
 }

 .mr-2 {
     margin-right: 0.5rem;
 }

 .mr-4 {
     margin-right: 1rem;
 }

 .mr-8 {
     margin-right: 2rem;
 }

 .mr-10 {
     margin-left: 2.5rem;
 }

 .mr-12 {
     margin-left: 3rem;
 }

 .ml-auto {
     margin-left: auto;
 }

 .ml-2 {
     margin-left: 0.5rem;
 }

 .ml-4 {
     margin-left: 1rem;
 }

 .ml-10 {
     margin-left: 2.5rem;
 }

 .ml-12 {
     margin-left: 3rem;
 }

 .ml-6 {
     margin-left: 1.5rem;
 }

 .w-3\/4 {
    width: 75%;
}
 /* height */
 .h-5 {
     height: 1.25rem;
 }

 .h-16 {
     height: 4rem;
 }

 .h-12 {
     height: 3rem;
 }

 .h-6 {
     height: 1.5rem;
 }

 .h-8 {
     height: 2rem;
 }

 .h-4 {
     height: 1rem;
 }

 .h-9 {
     height: 2.25rem;
 }

 .h-10 {
     height: 2.5rem;
 }

 .h-20 {
     height: 5rem;
 }

 .h-24 {
     height: 6rem;
 }

 .h-screen {
     height: 100vh;
 }

 .h-full {
     height: 100%;
 }

 .h-2 {
     height: 0.5rem;
 }

 /* padding x */
 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
 }

 .px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
 }

 .px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
 }

 .px-20 {
     padding-left: 5rem;
     padding-right: 5rem;
 }

 .px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
 }

 /* padding y */
 .py-4 {
     padding-left: 1rem;
     padding-right: 1rem;
 }

 .py-2 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
 }

 .bg-gray-600 {
     --tw-bg-opacity: 0.5;
     background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }

 /* sm (640px)	max-width: 640px; */
 @media (min-width:640px) {
     .sm\:hidden {
         display: none !important;
     }

     .sm\:block {
         display: block !important;
     }

     .sm\:flex {
         display: flex !important;
     }

     .sm\:flex-1 {
         flex: 1 1 0%;
     }

     /* padding x */
     .sm\:px-4 {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .sm\:px-6 {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }

     .sm\:px-8 {
         padding-left: 2rem;
         padding-right: 2rem;
     }

     .sm\:px-20 {
         padding-left: 5rem;
         padding-right: 5rem;
     }

     .sm\:px-12 {
         padding-left: 3rem;
         padding-right: 3rem;
     }

     .sm\:justify-start {
         justify-content: flex-start;
     }

     .sm\:ml-auto {
         margin-left: auto;
     }

     .sm\:ml-4 {
         margin-left: 1rem;
     }

     .sm\:ml-10 {
         margin-left: 2.5rem;
     }

     .sm\:ml-6 {
         margin-left: 1.5rem;
     }

     .sm\:w-full {
         width: 100% !important;
     }

     .sm\:w-1\/2 {
         width: 50% !important;
     }

     /* height */
     .sm\:h-5 {
         height: 1.25rem;
     }

     .sm\:h-16 {
         height: 4rem;
     }

     .sm\:h-12 {
         height: 3rem;
     }

     .sm\:h-6 {
         height: 1.5rem;
     }

     .sm\:h-8 {
         height: 2rem;
     }

     .sm\:h-4 {
         height: 1rem;
     }

     .sm\:h-9 {
         height: 2.25rem;
     }

     .sm\:h-10 {
         height: 2.5rem;
     }

     .sm\:h-20 {
         height: 5rem;
     }

     .sm\:h-24 {
         height: 6rem;
     }

 }

 /* md (768px)	max-width: 768px; */
 @media (min-width:768px) {
     .md\:hidden {
         display: none !important;
     }

     .md\:block {
         display: block !important;
     }

     .md\:flex {
         display: flex !important;
     }

     .md\:flex-1 {
         flex: 1 1 0%;
     }

     /* padding x */
     .md\:px-4 {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .md\:px-6 {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }

     .md\:px-8 {
         padding-left: 2rem;
         padding-right: 2rem;
     }

     .md\:px-20 {
         padding-left: 5rem;
         padding-right: 5rem;
     }

     .md\:px-12 {
         padding-left: 3rem;
         padding-right: 3rem;
     }

     .md\:justify-start {
         justify-content: flex-start;
     }

     .md\:ml-auto {
         margin-left: auto;
     }

     .md\:ml-4 {
         margin-left: 1rem;
     }

     .md\:ml-10 {
         margin-left: 2.5rem;
     }

     .md\:ml-6 {
         margin-left: 1.5rem;
     }

     .md\:w-full {
         width: 100% !important;
     }

     .md\:w-1\/2 {
         width: 50% !important;
     }

     .md\:w-1\/4 {
         width: 25%;
     }

     .md\:w-2\/4 {
         width: 50%;
     }

     .md\:w-3\/4 {
         width: 75%;
     }

     /* height */
     .md\:h-5 {
         height: 1.25rem;
     }

     .md\:h-16 {
         height: 4rem;
     }

     .md\:h-12 {
         height: 3rem;
     }

     .md\:h-6 {
         height: 1.5rem;
     }

     .md\:h-8 {
         height: 2rem;
     }

     .md\:h-4 {
         height: 1rem;
     }

     .md\:h-9 {
         height: 2.25rem;
     }

     .md\:h-10 {
         height: 2.5rem;
     }

     .md\:h-20 {
         height: 5rem;
     }

     .md\:h-24 {
         height: 6rem;
     }

 }

 /* lg (1024px)	max-width: 1024px; */
 @media (min-width:1024px) {
     .lg\:hidden {
         display: none !important;
     }

     .lg\:block {
         display: block !important;
     }

     .lg\:flex {
         display: flex !important;
     }

     .lg\:flex-1 {
         flex: 1 1 0%;
     }


     /* padding x */
     .lg\:px-4 {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .lg\:px-6 {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }

     .lg\:px-8 {
         padding-left: 2rem;
         padding-right: 2rem;
     }

     .lg\:px-20 {
         padding-left: 5rem;
         padding-right: 5rem;
     }

     .lg\:px-12 {
         padding-left: 3rem;
         padding-right: 3rem;
     }

     .lg\:justify-start {
         justify-content: flex-start;
     }

     .lg\:ml-auto {
         margin-left: auto;
     }

     .lg\:ml-4 {
         margin-left: 1rem;
     }

     .lg\:ml-10 {
         margin-left: 2.5rem;
     }

     .lg\:ml-6 {
         margin-left: 1.5rem;
     }

     .lg\:w-full {
         width: 100% !important;
     }

     .lg\:w-1\/2 {
         width: 50% !important;
     }

     .lg\:w-2\/4 {
         width: 50% ;
     }

     .lg\:w-3\/4 {
         width: 75% ;
     }

     /* height */
     .lg\:h-5 {
         height: 1.25rem;
     }

     .lg\:h-16 {
         height: 4rem;
     }

     .lg\:h-12 {
         height: 3rem;
     }

     .lg\:h-6 {
         height: 1.5rem;
     }

     .lg\:h-8 {
         height: 2rem;
     }

     .lg\:h-4 {
         height: 1rem;
     }

     .lg\:h-9 {
         height: 2.25rem;
     }

     .lg\:h-10 {
         height: 2.5rem;
     }

     .lg\:h-20 {
         height: 5rem;
     }

     .lg\:h-24 {
         height: 6rem;
     }

 }

 /* xl (1280px)	max-width: 1280px; */
 @media (min-width:1365px) {
     .xl\:hidden {
         display: none !important;
     }

     .xl\:block {
         display: block !important;
     }

     .xl\:flex {
         display: flex !important;
     }

     .xl\:flex-1 {
         flex: 1 1 0%;
     }

     /* padding x */
     .xl\:px-4 {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .xl\:px-6 {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }

     .xl\:px-8 {
         padding-left: 2rem;
         padding-right: 2rem;
     }

     .xl\:px-20 {
         padding-left: 5rem;
         padding-right: 5rem;
     }

     .xl\:px-12 {
         padding-left: 3rem;
         padding-right: 3rem;
     }

     .xl\:justify-start {
         justify-content: flex-start;
     }

     .xl\:ml-auto {
         margin-left: auto;
     }

     .xl\:ml-4 {
         margin-left: 1rem;
     }

     .xl\:ml-10 {
         margin-left: 2.5rem;
     }

     .xl\:ml-6 {
         margin-left: 1.5rem;
     }

     .xl\:w-full {
         width: 100% !important;
     }

     .xl\:w-1\/2 {
         width: 50% !important;
     }

     .xl\:w-2\/4 {
         width: 50% ;
     }

     .xl\:w-3\/4 {
         width: 75% ;
     }

     /* height */
     .xl\:h-5 {
         height: 1.25rem;
     }

     .xl\:h-16 {
         height: 4rem;
     }

     .xl\:h-12 {
         height: 3rem;
     }

     .xl\:h-6 {
         height: 1.5rem;
     }

     .xl\:h-8 {
         height: 2rem;
     }

     .xl\:h-4 {
         height: 1rem;
     }

     .xl\:h-9 {
         height: 2.25rem;
     }

     .xl\:h-10 {
         height: 2.5rem;
     }

     .xl\:h-20 {
         height: 5rem;
     }

     .xl\:h-24 {
         height: 6rem;
     }
 }

 .menu-ul-mob {
     padding: 0;
 }

 .menu-ul-mob li {
     list-style: none;
 }

 .menu-ul-mob li a {
     list-style: none;
     text-decoration: none;
     font-weight: 900;
     font-size: 14px !important;
 }

 .hr-nav {
     color: #375e71 !important;
     opacity: 0.8 !important;
 }

 .bg-gris-black {
     background: #1d3039 !important;
 }

 .sticky {
     position: sticky !important;
 }

 .top-0 {
     top: 0;
 }

 .top-\[60\] {
     top: 60px;
 }

 .z-\[200\] {
     z-index: 200;
 }

 .cursor-pointer {
     cursor: pointer;
 }