.header {background: var(--primary);border-radius: 0 0 20px 20px;width: 100%;max-width: 1342px;margin-left: auto;margin-right: auto;z-index: 100;position: sticky;top: 0;box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } @media (min-width: 576px) {.header {min-height: 130px;height: 130px;border-radius: 0 0 20px 60px;} } .header .navbar {padding: 0;height: 100%;flex-direction: row;flex-wrap: nowrap; } @media (min-width: 576px) {.header .navbar {padding: 0 30px 6px 15px;} } .header .navbar .navbar-bg {position: absolute;transform: none;top: 0;right: 0;max-width: 70%;display: none; } @media (min-width: 576px) {.header .navbar .navbar-bg {right: auto;left: 50%;transform: translateX(-25%) rotate(-2deg);display: block;} } @media (min-width: 768px) {.header .navbar .navbar-bg {transform: translateX(-50%) rotate(-2deg);} } .header .navbar .navbar-brand {height: 100%;display: flex;flex-direction: column;justify-content: center;order: 2;height: auto;margin-right: 0;align-self: center;z-index: 1;max-width: 123px;align-self: flex-end; } @media (min-width: 576px) {.header .navbar .navbar-brand {order: 1;max-width: none;align-self: center;} } .header .navbar .navbar-brand .img-fluid {max-height: 100%;width: auto; } .header .navbar .nav {display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;z-index: 1;align-self: flex-end; } @media (min-width: 576px) {.header .navbar .nav {align-self: center;} } @media (min-width: 992px) {.header .navbar .nav {display: none;} } .header .navbar .nav h1, .header .navbar .nav .h1 {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--white);font-size: 20px;padding: 14px 0;margin-left: 20px; } .header .navbar .nav .btn {color: var(--white); } .header .navbar .nav .btn ~ h1, .header .navbar .nav .btn .h1 {margin-left: 0; } .header .navbar .navbar-nav {flex-direction: row;align-items: center;padding-top: 7px;order: 1;align-self: flex-start;display: none; } @media (min-width: 576px) {.header .navbar .navbar-nav {order: 2;align-self: center;min-height: 130px;} } @media (min-width: 992px) {.header .navbar .navbar-nav {display: flex;} } .header .navbar .navbar-nav .btn {display: none;flex-direction: row;align-items: center;justify-content: center;margin-left: 17px;font-size: 14px;font-weight: 500;padding: 14px;min-width: 160px;border-radius: 12px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .header .navbar .navbar-nav .btn svg {color: var(--primary);margin-right: 5px; } @media (min-width: 992px) {.header .navbar .navbar-nav .btn {display: flex;} } .header .navbar .navbar-nav .navbar-brand {margin-left: 0;margin-right: 0;padding: 0;display: none; } @media (min-width: 576px) {.header .navbar .navbar-nav .navbar-brand {margin-left: 41px;} } @media (min-width: 992px) {.header .navbar .navbar-nav .navbar-brand {display: block;} } .heading {position: relative;margin-top: -130px;height: 255px;width: 100%;max-width: 1920px;margin-left: auto;margin-right: auto;background: var(--light); } .heading .img-fluid {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover; } .homepage .header {min-height: 130px; } .homepage .header .navbar {flex-direction: column; } @media (min-width: 576px) {.homepage .header .navbar {flex-direction: row;} } .homepage .header .navbar .navbar-bg {display: block; } .homepage .header .navbar .navbar-brand {max-width: none;align-self: center; } .homepage .header .navbar .navbar-nav {min-height: auto;display: flex; } .homepage .header .navbar .navbar-nav .navbar-brand {display: block; } .homepage .header .navbar .nav {display: none; }