* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: 'Inter', sans-serif;
color: #173b2d;
background:
radial-gradient(circle at 10% 15%, rgba(76, 175, 80, .13), transparent 25%),
radial-gradient(circle at 90% 30%, rgba(33, 150, 243, .10), transparent 28%),
linear-gradient(135deg, #f7fbf7 0%, #eef7f1 50%, #f8fbff 100%);
}
/* MAIN PAGE */
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
/* TOP GREEN LINE */
.top-bar {
height: 8px;
background: linear-gradient(
90deg,
#087443,
#2e9d3d,
#1769c2
);
}
/* DECORATIVE LEAVES */
.leaf {
position: absolute;
opacity: .08;
color: #16823b;
pointer-events: none;
}
.leaf.one {
top: 40px;
left: -25px;
font-size: 170px;
transform: rotate(-25deg);
}
.leaf.two {
right: -25px;
top: 180px;
font-size: 190px;
transform: rotate(25deg);
}
.leaf.three {
bottom: 80px;
left: 8%;
font-size: 100px;
transform: rotate(15deg);
}
/* MAIN CONTAINER */
.main {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 55px 25px 35px;
flex: 1;
position: relative;
z-index: 2;
}
/* HEADER */
.header {
text-align: center;
margin-bottom: 42px;
}
/* LOGO */
.logo {
width: 105px;
height: 105px;
margin: 0 auto 18px;
border-radius: 50%;
background: white;
border: 5px solid rgba(23, 130, 59, .12);
box-shadow: 0 12px 30px rgba(25, 80, 50, .12);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.logo i {
font-size: 52px;
color: #16823b;
}
/*
IF YOU HAVE A DENR LOGO IMAGE, USE THIS:
.logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
Then replace:
with:
*/
/* TITLE */
.title {
margin: 0;
font-size: clamp(32px, 5vw, 52px);
font-weight: 800;
letter-spacing: 1px;
color: #075d38;
}
.subtitle {
margin-top: 7px;
font-size: clamp(14px, 2vw, 19px);
font-weight: 600;
letter-spacing: 5px;
color: #3e8b4c;
text-transform: uppercase;
}
/* TITLE DECORATION */
.title-line {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 14px auto 16px;
max-width: 520px;
}
.title-line span {
height: 2px;
flex: 1;
background: linear-gradient(
90deg,
transparent,
#69ad55
);
}
.title-line i {
color: #3b9d43;
font-size: 15px;
}
/* WELCOME TEXT */
.welcome {
margin: 0 auto;
max-width: 650px;
color: #607069;
font-size: 15px;
line-height: 1.7;
}
/* OFFICE CARDS */
.offices {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin-top: 38px;
}
.office-card {
background: rgba(255, 255, 255, .94);
border-radius: 18px;
padding: 28px 22px 22px;
border: 1px solid rgba(22, 130, 59, .10);
border-top: 4px solid #29923c;
box-shadow:
0 12px 35px rgba(30, 80, 55, .11);
transition:
transform .25s ease,
box-shadow .25s ease;
display: flex;
flex-direction: column;
min-height: 330px;
}
.office-card:hover {
transform: translateY(-7px);
box-shadow:
0 20px 45px rgba(30, 80, 55, .18);
}
/* OFFICE ICON */
.office-icon {
width: 88px;
height: 88px;
margin: 0 auto 20px;
border-radius: 50%;
background: #eef8ed;
color: #23883a;
display: flex;
align-items: center;
justify-content: center;
font-size: 37px;
}
/* OFFICE NAME */
.office-name {
text-align: center;
margin: 0;
font-size: 20px;
font-weight: 800;
color: #153e2d;
}
.small-line {
width: 42px;
height: 3px;
background: #61ad45;
margin: 12px auto 14px;
border-radius: 5px;
}
/* DESCRIPTION */
.office-description {
text-align: center;
color: #69756f;
font-size: 13px;
line-height: 1.65;
min-height: 48px;
margin-bottom: 22px;
}
/* LOGIN BUTTON */
.login-btn {
margin-top: auto;
width: 100%;
height: 48px;
border: 0;
border-radius: 10px;
background:
linear-gradient(
135deg,
#16823b,
#2c9b40
);
color: white;
font-size: 14px;
font-weight: 700;
cursor: pointer;
text-decoration: none !important;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow:
0 7px 18px rgba(28, 133, 58, .20);
transition: .2s ease;
}
.login-btn:hover {
color: white;
transform: translateY(-2px);
box-shadow:
0 10px 22px rgba(28, 133, 58, .30);
}
.login-btn .arrow {
margin-left: auto;
margin-right: 13px;
}
/* FEATURES SECTION */
.features {
max-width: 1050px;
margin: 40px auto 0;
background:
rgba(255, 255, 255, .82);
border:
1px solid rgba(20, 100, 50, .09);
border-radius: 18px;
box-shadow:
0 8px 28px rgba(30, 80, 55, .07);
display: grid;
grid-template-columns:
repeat(4, 1fr);
padding: 20px 10px;
}
.feature {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 18px;
border-right:
1px solid #e1e9e3;
}
.feature:last-child {
border-right: none;
}
.feature-icon {
font-size: 23px;
color: #26883b;
}
.feature-text strong {
display: block;
font-size: 12px;
color: #277a37;
}
.feature-text span {
display: block;
font-size: 11px;
color: #758079;
margin-top: 3px;
}
/* FOOTER */
.footer {
position: relative;
margin-top: 40px;
background: #075b3b;
color:
rgba(255,255,255,.90);
text-align: center;
padding: 25px 15px;
}
.footer strong {
font-size: 13px;
}
.footer p {
margin: 5px 0 0;
font-size: 11px;
color:
rgba(255,255,255,.70);
}
/* TABLET */
@media (max-width: 1050px) {
.offices {
grid-template-columns:
repeat(2, 1fr);
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.office-card {
min-height: 310px;
}
}
/* MOBILE */
@media (max-width: 700px) {
.main {
padding:
40px 18px 25px;
}
.subtitle {
letter-spacing: 3px;
}
.offices {
grid-template-columns: 1fr;
max-width: 430px;
}
.office-card {
min-height: auto;
}
.features {
grid-template-columns:
1fr 1fr;
}
.feature {
border-right: none;
border-bottom:
1px solid #e1e9e3;
padding: 13px 8px;
}
.feature:nth-child(odd) {
border-right:
1px solid #e1e9e3;
}
.feature:nth-child(3),
.feature:nth-child(4) {
border-bottom: none;
}
}
@media (max-width: 430px) {
.logo {
width: 85px;
height: 85px;
}
.logo i {
font-size: 42px;
}
.title {
font-size: 30px;
}
.subtitle {
font-size: 12px;
letter-spacing: 2px;
}
.features {
grid-template-columns: 1fr;
}
.feature,
.feature:nth-child(odd) {
border-right: none;
border-bottom:
1px solid #e1e9e3;
}
.feature:last-child {
border-bottom: none;
}
}
/* =========================================
LOGIN MODAL
========================================= */
.login-modal {
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 25px 70px rgba(0, 60, 35, .25);
}
/* MODAL HEADER */
.login-modal .modal-header {
position: relative;
border: none;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background:
linear-gradient(
135deg,
#075d38,
#238b3c
);
}
/* OFFICE ICON */
.modal-office-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background:
rgba(255,255,255,.15);
border:
1px solid rgba(255,255,255,.3);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
/* CLOSE */
.login-modal .close {
position: absolute;
right: 18px;
top: 12px;
color: white;
opacity: .8;
font-size: 30px;
font-weight: 300;
text-shadow: none;
}
.login-modal .close:hover {
opacity: 1;
}
/* BODY */
.login-modal .modal-body {
padding:
28px 32px 25px;
}
/* TITLE */
.login-title {
text-align: center;
margin: 0;
font-size: 21px;
font-weight: 800;
color: #153e2d;
}
.login-subtitle {
text-align: center;
margin:
8px 0 27px;
color: #78827d;
font-size: 13px;
}
/* LABEL */
.login-modal label {
font-size: 13px;
font-weight: 600;
color: #385347;
margin-bottom: 7px;
}
/* INPUT */
.input-wrapper {
position: relative;
}
.input-wrapper > i {
position: absolute;
left: 15px;
top: 50%;
transform:
translateY(-50%);
color: #72a47c;
z-index: 3;
}
.input-wrapper .form-control {
height: 48px;
border-radius: 10px;
border:
1px solid #dbe5df;
padding-left: 45px;
padding-right: 45px;
font-size: 13px;
background: #f9fcfa;
box-shadow: none;
transition: .2s ease;
}
.input-wrapper .form-control:focus {
border-color: #329345;
background: white;
box-shadow:
0 0 0 3px rgba(50,147,69,.10);
}
/* SHOW PASSWORD */
.show-password {
position: absolute;
right: 12px;
top: 50%;
transform:
translateY(-50%);
border: none;
background: transparent;
color: #789082;
cursor: pointer;
padding: 5px;
z-index: 5;
}
.show-password:hover {
color: #23883a;
}
/* LOGIN OPTIONS */
.login-options {
display: flex;
justify-content:
space-between;
align-items: center;
margin:
4px 0 22px;
font-size: 12px;
}
.remember {
display: flex;
align-items: center;
gap: 6px;
margin: 0 !important;
font-weight: 400 !important;
cursor: pointer;
}
.remember input {
accent-color: #23883a;
}
.login-options a {
color: #23883a;
text-decoration: none;
}
.login-options a:hover {
text-decoration: underline;
}
/* LOGIN BUTTON */
.modal-login-btn {
width: 100%;
height: 49px;
border: none;
border-radius: 10px;
background:
linear-gradient(
135deg,
#16823b,
#2c9b40
);
color: white;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow:
0 7px 18px
rgba(28,133,58,.20);
transition: .2s ease;
}
.modal-login-btn:hover {
transform:
translateY(-2px);
box-shadow:
0 10px 22px
rgba(28,133,58,.30);
}
/* MODAL FOOTER */
.login-modal .modal-footer {
justify-content: center;
border-top:
1px solid #edf1ee;
background: #f8fbf9;
padding: 13px;
color: #7a8780;
font-size: 11px;
gap: 7px;
}
.login-modal .modal-footer i {
color: #23883a;
}
.denr-logo { width: 100px; } /* Tablet and mobile */ @media (max-width: 991.98px) { .denr-logo { width: 75px; } }