/*====================================================
OMR HEADER V2
PART 1
====================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
padding:0;
overflow-x:hidden;
font-family:"Times New Roman",serif;
}

/*====================================================
HEADER
====================================================*/

.omr-header{

position:relative;
width:100%;

background:#fce54e;
background:linear-gradient(
0deg,
rgba(252,229,78,1) 0%,
rgba(79,214,232,1) 55%
);

border-bottom:4px solid #F2E36C;
box-shadow:0 5px 18px rgba(0,0,0,.10);
z-index:9999;
overflow:visible;

}

/* Top Effect */

.omr-header:before{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:110px;

background:rgba(255,255,255,.20);

clip-path:polygon(0 0,100% 0,100% 60%,0 100%);

pointer-events:none;

}

/* Bottom Effect */

.omr-header:after{

content:"";

position:absolute;

left:0;
bottom:0;

width:100%;
height:90px;

background:rgba(242,227,108,.18);

clip-path:polygon(0 40%,100% 0,100% 100%,0 100%);

pointer-events:none;

}

/*====================================================
CONTAINER
====================================================*/

.omr-container{

position:relative;

z-index:5;

max-width:1450px;

margin:auto;

padding:16px 35px;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

}

/*====================================================
LOGO
====================================================*/

.omr-logo{

display:flex;

align-items:center;

text-decoration:none;

flex-shrink:0;

}

.omr-logo img{

display:block;

height:82px;

width:auto;

}

/*====================================================
DESKTOP NAVIGATION
====================================================*/

.omr-nav{

flex:1;

display:flex;

justify-content:flex-start;

margin-left:120px;

}

.omr-nav>ul{

display:flex;

align-items:center;

justify-content:flex-end;

gap:12px;

list-style:none;

margin:0;

padding:0;

flex-wrap:nowrap;

}

.omr-nav>ul>li{

position:relative;

display:flex;

align-items:center;

}

.omr-nav>ul>li>a{

display:flex;
align-items:center;
justify-content:center;
gap:7px;

padding:16px 15px;

font-family:"Times New Roman", Times, serif;

font-size:21px;

font-weight:700;

color:#1133B5;

text-decoration:none;

border-radius:8px;

white-space:nowrap;

transition:.30s;

}

/* Hover */

.omr-nav>ul>li:hover>a{

background:#0D4661;

color:#F4C21C;

}

/* Active */

.omr-nav>ul>li.current-menu-item>a,
.omr-nav>ul>li.current_page_item>a,
.omr-nav>ul>li.current-menu-parent>a{

background:#0D4661;

color:#F4C21C;

}



/* Arrow */

.arrow{

font-size:10px;

display:flex;

align-items:center;

transition:.30s;

}

.dropdown:hover .arrow{

transform:rotate(180deg);

}

/*====================================================
PART 2
EDITORIAL DROPDOWN
RESPONSIVE DESKTOP
====================================================*/

/* Dropdown Parent */

.dropdown{
    position:relative;
}

/* Dropdown Box */

.dropdown-menu{

    position:absolute;

    top:100%;
    left:0;

    min-width:285px;

    background:#ffffff;

    border:1px solid #d7e6ef;

    border-radius:10px;

    box-shadow:0 14px 40px rgba(0,0,0,.15);

    list-style:none;

    margin:8px 0 0;

    padding:8px 0;

    display:none;

    overflow:hidden;

    z-index:999999;

}

/* Show */

.dropdown:hover>.dropdown-menu{

    display:block;

    animation:dropMenu .22s ease;

}

/* Animation */

@keyframes dropMenu{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* List */

.dropdown-menu li{

display:block;

width:100%;

margin:0;

padding:0;

}

/* Links */

.dropdown-menu li a{

display:block;

width:100%;

padding:13px 18px;

text-decoration:none;

font-size:15px;

font-weight:600;

color:#0A2F5C;

background:#fff;

transition:.25s;

white-space:normal;

line-height:1.45;

}

/* Hover */

.dropdown-menu li:hover>a{

background:#0D4661;

color:#F4C21C;

padding-left:24px;

}

/*====================================================
DESKTOP
====================================================*/

@media(min-width:1200px){

.omr-container{

max-width:1600px;

margin:0 auto;

padding:10px 20px;

display:flex;

align-items:center;

justify-content:flex-start;

gap:70px;

}

.omr-nav{

margin-left:0;

flex:1;

}

}
/*====================================================
LAPTOP
====================================================*/

@media(min-width:992px) and (max-width:1199px){

.omr-container{

padding:15px 20px;

}

.omr-logo img{

height:70px;

}

.omr-nav{

overflow-x:auto;

scrollbar-width:none;

}

.omr-nav::-webkit-scrollbar{

display:none;

}

.omr-nav>ul{

gap:8px;

}

.omr-nav>ul>li>a{

font-size:20px;

padding:12px 8px;

}

.dropdown-menu{

min-width:240px;

}

}

/*====================================================
TABLET
====================================================*/

@media(min-width:768px) and (max-width:991px){

.menu-btn{

display:none!important;

}

.mobile-sidebar{

display:none!important;

}

.omr-container{

padding:14px 14px;

}

.omr-logo img{

height:64px;

}

.omr-nav{

overflow-x:auto;

scrollbar-width:none;

}

.omr-nav::-webkit-scrollbar{

display:none;

}

.omr-nav>ul{

gap:5px;

}

.omr-nav>ul>li>a{

font-size:14px;

padding:10px 7px;

}

.dropdown-menu{

min-width:220px;

}

}
    
/*====================================================
PART 3
MOBILE + SIDEBAR + FINAL
====================================================*/

/* Hide Mobile Elements on Desktop */

.menu-btn,
.mobile-sidebar,
.menu-overlay{
display:none;
}

/*==========================
MOBILE
==========================*/

@media(max-width:767px){

/* Desktop Menu */

.omr-nav{
display:none;
}

/* Container */

.omr-container{

padding:12px 18px;

justify-content:space-between;

}

/* Logo */

.omr-logo img{

height:60px;

}

/* Hamburger */

.menu-btn{

display:flex;

align-items:center;

justify-content:center;

width:48px;

height:48px;

border:none;

background:#0D4661;

color:#fff;

font-size:28px;

border-radius:8px;

cursor:pointer;

transition:.25s;

}

.menu-btn:hover{

background:#083447;

}

/* Sidebar */

.mobile-sidebar{

display:block;

position:fixed;

top:0;

right:-320px;

width:300px;

max-width:85%;

height:100vh;

background:#ffffff;

box-shadow:-5px 0 20px rgba(0,0,0,.20);

transition:.35s;

overflow-y:auto;

z-index:999999;

}

/* Open */

.mobile-sidebar.active{

right:0;

}

/* Close */

.mobile-close{

padding:18px 22px;

font-size:30px;

text-align:right;

cursor:pointer;

font-weight:bold;

color:#0A2F5C;

border-bottom:1px solid #eee;

}

/* Menu */

.mobile-sidebar ul{

list-style:none;

margin:0;

padding:0;

}

.mobile-sidebar li{

border-bottom:1px solid #ececec;

}

.mobile-sidebar a,

.mobile-drop span{

display:block;

padding:15px 22px;

text-decoration:none;

font-size:17px;

font-weight:700;

color:#0A2F5C;

cursor:pointer;

transition:.25s;

}

/* Hover */

.mobile-sidebar a:hover,

.mobile-drop span:hover{

background:#0D4661;

color:#F4C21C;

}

/* Dropdown */

.mobile-drop ul{

display:none;

background:#f8fbff;

}

.mobile-drop.active ul{

display:block;

}

.mobile-drop ul li{

border:none;

}

.mobile-drop ul a{

padding-left:42px;

font-size:15px;

font-weight:600;

}

/* Overlay */

.menu-overlay{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

display:none;

z-index:999998;

}

.menu-overlay.active{

display:block;

}

}

/*==========================
SAFE FIXES
==========================*/

.omr-header *{

box-sizing:border-box;

}

.omr-nav ul{

margin:0;

padding:0;

list-style:none;

}

.dropdown-menu{

pointer-events:auto;

}

.dropdown-menu li{

display:block;

width:100%;

}

.dropdown-menu a{

display:block;

width:100%;

}

.omr-header a{

text-decoration:none;

}

/* Prevent Wrap */

.omr-nav>ul>li>a{

white-space:nowrap;

}

/* Images */

.omr-logo img{

max-width:100%;

display:block;

}

/* Prevent Overflow */

.omr-header{

overflow:visible;

}

.omr-container{

overflow:visible;

}

/* Smooth */

.omr-nav a,

.dropdown-menu a,

.mobile-sidebar a{

transition:.25s;

}