.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}[class*='htslider-'] svg{
height: auto;
}
.htb-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.htb-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.htb-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.htb-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.htb-container {
max-width: 1200px;
}
}
.htb-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.htb-col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.htb-col-lg-6 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 992px) {
.htb-col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
}
@media (max-width: 767px) {
.htb-col-lg-6 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
} .htslider-single-post-slide {
position: relative;
}
.htslider-single-post-slide img {
width: 100%;
}
.htslider-single-post-slide a {
text-decoration: none;
}
.htslider-single-post-slide .content ul.post-category {
display: flex;
list-style: outside none none;
margin: 0 -10px;
padding: 0;
}
.htslider-single-post-slide .content ul.post-category li {
background: #f05555 none repeat scroll 0 0;
margin: 0 10px;
transition: all 0.4s ease-in-out 0s;
line-height: inherit;
}
.htslider-single-post-slide .content ul.post-category li a {
color: #fff;
font-size: 13px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
padding: 5px 9px;
display: block;
text-decoration: none;
}
.htslider-single-post-slide .content ul.post-category li a:hover {
background: #18012c none repeat scroll 0 0;
color: #ffffff;
}
.htslider-single-post-slide ul.meta {
color: #464545;
display: flex;
list-style: outside none none;
margin: 0 -15px;
padding: 0;
}
.htslider-single-post-slide ul.meta li {
font-size: 13px;
letter-spacing: 2px;
margin: 0 15px;
}
.htslider-single-post-slide ul.meta li i {
padding-right: 10px;
} .htslider-single-post-slide .thumb a,.ht-post .thumb a{
position: relative;
display: block;
}
.htslider-single-post-slide .thumb a:after,.ht-post .thumb a:after {
content: "";
position: absolute;
background: rgba(0, 0, 0, 0);
top: 0;
left: 0;
width: 100%;
z-index: 0;
height: 100%;
transition: all 0.3s ease-in-out;
}
.htslider-single-post-slide.htslider-postslider-layout-3 .thumb a:before{
opacity: 0;
transition: all 0.3s ease-in-out;
}
.htslider-single-post-slide.htslider-postslider-layout-3:hover .thumb a:before{
opacity: 1;
} .htslider-single-post-slide .content .post-inner h2 {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
}
.htslider-single-post-slide .content .post-inner p {
margin: 22px 0 25px;
color: #18012c;
font-size: 14px;
line-height: 28px;
margin-top: 0;
}
.htslider-single-post-slide .content .post-inner h2 a,
.htslider-single-post-slide .content .post-inner ul.meta li a {
color: #18012c;
}
.htslider-single-post-slide .post-btn a.readmore-btn {
background: transparent none repeat scroll 0 0;
border: 1px solid #464545;
border-radius: 23px;
color: #464545;
display: inline-block;
font-size: 14px;
font-weight: 400;
height: 46px;
line-height: 44px;
padding: 0 37px;
transition: all 0.4s ease-in-out 0s;
text-decoration: none;
}
.htslider-area-pro .htslider-single-post-slide .post-btn a.readmore-btn {
border-radius: 0;
margin-top: 20px;
background: #ffffff none repeat scroll 0 0;
border: 1px solid #ffffff;
color: #18012c;
}
.htslider-area-pro .htslider-single-post-slide .post-btn a.readmore-btn:hover {
background: #ffffff none repeat scroll 0 0;
border: 1px solid #ffffff;
color: #18012c;
}
.htslider-single-post-slide .post-btn a.readmore-btn:hover {
background: #18012c none repeat scroll 0 0;
border: 1px solid #18012c;
color: #ffffff;
}
.htslider-postslider-area img {
width: 100%;
}
.htslider-postslider-area button.slick-arrow {
background: #ccd5d5 none repeat scroll 0 0;
border: 0 none;
color: #00282a;
font-size: 24px;
height: 46px;
line-height: 1;
padding: 0;
position: absolute;
width: 46px;
z-index: 2;
}
.htslider-postslider-area button.slick-arrow svg{
width: 24px;
}
.htslider-postslider-area button.slick-arrow svg path{
fill: #00282a;
}
.htslider-postslider-area button.htslider-carosul-prev.slick-arrow {
right: 60px;
}
.htslider-postslider-area button.slick-arrow {
background: #d7dae9 none repeat scroll 0 0;
border: 1px solid #d7dae9;
border-radius: 100%;
color: #2a47e0;
font-size: 24px;
}
.htslider-arrow-1.htslider-postslider-area button.slick-arrow,
.htslider-arrow-4.htslider-postslider-area button.slick-arrow {
left: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all 0.4s ease 0s;
z-index: 2;
text-align: center;
}
.htslider-arrow-1.htslider-postslider-area button.htslider-carosul-next.slick-arrow ,
.htslider-arrow-4.htslider-postslider-area button.htslider-carosul-next.slick-arrow {
left: auto !important;
right: 30px;
}
.htslider-arrow-2.htslider-postslider-area button.slick-arrow ,
.htslider-arrow-3.htslider-postslider-area button.slick-arrow {
-webkit-transform: translateY(-50%) rotate(90deg);
-moz-transform: translateY(-50%) rotate(90deg);
-ms-transform: translateY(-50%) rotate(90deg);
-o-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
border-radius: 100%;
}
.htslider-arrow-2.htslider-postslider-area button.htslider-carosul-next.slick-arrow {
left: auto;
right: 50px !important;
margin-top: 30px;
}
.htslider-arrow-2.htslider-postslider-area button.slick-arrow {
top: 50%;
}
.htslider-arrow-2.htslider-postslider-area button.htslider-carosul-prev.slick-arrow {
right: 50px;
margin-top: -30px;
}
.htslider-arrow-3.htslider-postslider-area button.htslider-carosul-next.slick-arrow {
left: 50px;
right: auto;
bottom: 5% !important;
}
.htslider-arrow-3.htslider-postslider-area button.htslider-carosul-prev.slick-arrow {
left: 50px;
bottom: 13% !important;
}
.htslider-postslider-area .slick-dots li button::before {
display: none;
}
.htslider-postslider-area .slick-dots li button{
background: #ccd5d5 none repeat scroll 0 0;
border-radius: 100%;
height: 15px;
width: 15px;
}
.htslider-postslider-area .slick-dots li.slick-active button {
background: #00282a none repeat scroll 0 0;
margin-left: 0;
}
body.rtl .htslider-postslider-area button.htslider-carosul-prev.slick-arrow{
right: auto;
}
body.rtl .htslider-arrow-2.htslider-postslider-area button.htslider-carosul-next.slick-arrow {
right: auto !important;
}
body.rtl .htslider-arrow-3.htslider-postslider-area button.htslider-carosul-prev.slick-arrow {
bottom: 15% !important;
} .htslider-postslider-layout-1 .content {
position: absolute;
left: 0;
top: 0;
max-width: 40%;
height: 100%;
padding: 10px;
}
.htslider-postslider-layout-1 .content .post-inner {
width: 100%;
height: 100%;
background: rgba(0, 140, 167, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
}
.htslider-postslider-layout-1 .content .post-inner h2 {
font-size: 24px;
font-weight: 500;
}
.htslider-postslider-layout-1 .content .post-inner h2 a,
.htslider-postslider-layout-1 .content .post-inner ul.meta li a {
color: #ffffff;
}
.htslider-postslider-layout-1 .content .post-inner p {
color: #ffffff;
font-size: 14px;
line-height: 28px;
}
.htslider-postslider-layout-1 ul.meta {
color: #ffffff;
}
.htslider-postslider-layout-1 .post-btn a.readmore-btn {
border: 1px solid #ffffff;
color: #ffffff;
} .htslider-postslider-layout-2 .content .post-inner h2 {
font-size: 24px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 18px;
}
.htslider-postslider-layout-2 .content .post-inner h2 a {
color: #464545;
}
.htslider-postslider-layout-2 .content .post-inner ul.meta li,
.htslider-postslider-layout-2 .content .post-inner ul.meta li a {
color: #464545;
}
.htslider-postslider-layout-2 .content .post-inner p {
color: #464545;
}
.htslider-postslider-layout-2 .content .post-inner .post-btn {
margin-top: 19px;
} .htslider-postslider-layout-3 .content {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
text-align: center;
}
.htslider-postslider-layout-3 .content .post-inner h2 {
font-size: 24px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 18px;
padding: 0 26%;
line-height: 34px;
}
.htslider-postslider-layout-3 .content .post-inner h2 a {
color: #ffffff;
}
.htslider-postslider-layout-3 .content .post-inner ul.meta {
justify-content: center;
}
.htslider-postslider-layout-3 .content .post-inner ul.meta li,
.htslider-postslider-layout-3 .content .post-inner ul.meta li a {
color: #ffffff;
}
.htslider-postslider-layout-3 .content .post-inner .post-btn {
margin-top: 19px;
}
.htslider-postslider-layout-3 .content .post-inner .post-btn a.readmore-btn {
border: 1px solid #ffffff;
color: #ffffff;
}
.htslider-postslider-layout-3 .content .post-inner .post-btn a.readmore-btn:hover {
background: #18012c;
color: #ffffff;
border: 1px solid #18012c;
}
.htslider-postslider-layout-3 .content ul.post-category {
justify-content: center;
} .htslider-postslider-layout-4 .content {
position: absolute;
text-align: center;
bottom: 0;
padding: 20px;
}
.htslider-postslider-layout-4 .content .post-inner {
background: rgba(0, 86, 255, 0.7);
padding: 25px;
text-align: left;
}
.htslider-postslider-layout-4 .content .post-inner h2 {
font-size: 24px;
font-weight: 500;
margin-bottom: 13px;
line-height: 34px;
}
.htslider-postslider-layout-4 .content .post-inner h2 a {
color: #ffffff;
}
.htslider-postslider-layout-4 .content .post-inner ul.meta li {
color: #ffffff;
}
.htslider-postslider-layout-4 .content .post-inner ul.meta li a {
color: #ffffff;
}
.htslider-postslider-layout-4 .content ul.post-category {
justify-content: center;
} .htslider-postslider-layout-5 .content {
background: #f4f4f4;
padding: 60px;
}
.htslider-postslider-layout-5 .content .post-inner h2 {
font-size: 24px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 18px;
line-height: 34px;
}
.htslider-postslider-layout-5 .content .post-inner h2 a {
color: #464545;
}
.htslider-postslider-layout-5 .content .post-inner ul.meta li,
.htslider-postslider-layout-5 .content .post-inner ul.meta li a {
color: #464545;
}
.htslider-postslider-layout-5 .content .post-inner .post-btn {
margin-top: 19px;
}
.htslider-postslider-layout-5 .content .post-inner .post-btn a.readmore-btn {
border: 1px solid #494849;
color: #494849;
}
.htslider-postslider-layout-5 .content .post-inner .post-btn a.readmore-btn:hover {
background: #18012c;
color: #ffffff;
border: 1px solid #18012c;
}
.htslider-arrow-2.htslider-postslider-area.htslider-postslider-style-5 button.slick-arrow {
top: 30%;
}
.htslider-postslider-style-4.htslider-postslider-area ul.slick-dots {
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
right: 0;
top: 0;
width: 200px;
z-index: 2;
}
.htslider-postslider-style-4.htslider-postslider-area ul.slick-dots li {
align-items: center;
background: transparent none repeat scroll 0 0;
border-bottom: 5px solid #828282;
border-left: 5px solid #828282;
border-radius: 0;
border-right: 5px solid #828282;
cursor: pointer;
display: flex;
flex-basis: 25%;
height: auto;
margin: 0;
overflow: hidden;
padding: 20px;
position: relative;
text-align: left;
transition: all 0.5s ease-in-out 0s;
width: auto;
z-index: 2;
}
.htslider-postslider-style-4.htslider-postslider-area ul.slick-dots li:first-child {
border-top: 5px solid #828282;
}
.htslider-postslider-style-4.htslider-postslider-area ul.slick-dots li.slick-active {
background: transparent none repeat scroll 0 0;
border: 5px solid #ffffff;
}
.htslider-postslider-style-4.htslider-postslider-area ul.slick-dots li h6 {
bottom: 0;
color: #ffffff;
font-weight: 500;
line-height: 22px;
margin: 0;
padding-bottom: 20px;
position: absolute;
}
.htb-align-items-center {
-ms-flex-align: center!important;
align-items: center!important
}
.htslider-postslider-area ul.slick-dots {
margin: 0;
left: 50%;
position: absolute;
top: 100%;
padding-left: 0;
z-index: 9;
}
.htslider-postslider-area ul.slick-dots li {
display: inline;
margin: 0 15px 0 0;
}
.htslider-postslider-area ul.slick-dots li button {
padding: 7px;
color: #00282a;
line-height: normal;
outline: none;
text-decoration: none;
text-indent: -999999px;
border: none;
background: transparent;
line-height: 0;
}
.htslider-postslider-area.pagination  ul.slick-dots li button {
text-indent: 0;
}
.htslider-postslider-area ul.slick-dots li:last-child {
margin-right: 0;
} .htslider-carousel-activation.dot_right_center .slick-dots,.htslider-carousel-activation.dot_left_center .slick-dots{
right: 30px;
display: inline-flex;
width: auto;
flex-direction: column;
transform: translateY(-50%);
top:50%;
bottom:auto;
left: auto;
justify-content:center;
}
.htslider-carousel-activation.dot_right_center .slick-dots{
text-align: right;
}
.htslider-carousel-activation.dot_right_center .slick-dots li{
margin: 0;
}
.htslider-carousel-activation.dot_left_center .slick-dots{
left: 30px;
right: auto;
bottom: 20px;
}
.htslider-carousel-activation.dot_bottom_right .slick-dots{
right: 0;
bottom: 20px;
width: auto;
left: auto;
}
.htslider-carousel-activation.dot_bottom_left .slick-dots{
left: 0;
bottom: 20px;
width: auto;
}
.htslider-carousel-activation.dot_bottom_center .slick-dots {
bottom: 20px;
width: auto;
left: 50%;
transform: translateX(-50%);
margin-left: 0px;
} .htslider-item-img.single-slide-item.htslider-single-post-slide {
height: 600px;
}
.htslider-postslider-area .htb-container {
height: 100%;
}
.htslider-postslider-area .single-slide-item.htslider-single-post-slide .content {
padding: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.single-slide-item.htslider-single-post-slide .content .post-inner {
padding: 0;
width: 100%;
}
.single-slide-item.htslider-single-post-slide .content .post-inner .htslider-desc {
font-size: 15px;
margin-bottom: 20px;
}
.single-slide-item.htslider-single-post-slide .content .post-inner p img {
width: auto;
display: inline-block;
margin-top: 0;
margin-bottom: 0;
}
.single-slide-item.htslider-single-post-slide .content h4 {
font-size: 18px;
margin: 0;
}
.single-slide-item.htslider-single-post-slide .content .post-btn a.readmore-btn {
height: inherit;
line-height: inherit;
padding: 13px 37px;
}
.htb-row.right {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.htsldier-item-area2 {
background: #f9f9f9;
}
.elementor-widget-htslider-slider-addons {
width: 100%;
}  .htslider-slider-area {
position: relative;
}
.htslider-slider .slick-arrow {
font-size: 22px;
position: absolute;
z-index: 9;
top: 50%;
left: 20px;
width: 60px;
height: 60px;
margin: 0;
padding: 0;
transition: 0.4s;
transform: translateY(-50%);
text-align: center;
opacity: 1;
border: 1px solid #E1E1E1;
border-radius: 100%;
background: #FFFFFF none repeat scroll 0 0;
}
.htslider-slider .slick-arrow.slick-next {
right: 20px;
left: auto;
}
.htslider-slider .slick-arrow:hover {
color: #FFFFFF;
border-color: #1F2226;
background: #1F2226;
}
.htslider-slider .slick-dots {
position: absolute;
bottom: 0;
left: 50%;
display: flex;
margin: 0;
padding: 0;
list-style: outside none none;
transform: translateX(-50%);
}
.htslider-slider .slick-dots li {
line-height: 12px;
margin: 0 4px;
}
.htslider-slider .slick-dots li button {
line-height: 13px;
width: 13px;
height: 13px;
padding: 0;
text-indent: -9999px;
border: 1px solid #4E4F4F;
border-radius: 50px;
background-color: transparent;
}
.htslider-slider-area .hero-slider-controls .slick-arrow i,
.htslider-slider .slick-arrow i {
opacity: 1;
color: #282828;
}
.htslider-slider .slick-dots li.slick-active button {
border-color: #282828;
background-color: #282828;
}
.slick-dots button:focus,
.slick-arrow:focus {
outline: none;
} .htslider-slider-area .hero-slider-controls {
position: absolute;
z-index: 99;
top: 50%;
right: 50px;
width: 50px;
padding: 60px 0;
transform: translateY(-50%);
text-align: center;
}
.htslider-slider-area .hero-slider-controls .slick-arrow {
font-size: 20px;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
transition: 0.4s;
transform: rotate(90deg);
opacity: 1;
border: medium none;
border-radius: 100%;
background-color: #FFFFFF;
}
.htslider-slider-area .hero-slider-controls .slick-arrow:hover {
color: #FFFFFF;
background: #1F2226;
}
.htslider-slider-area .hero-slider-controls .slick-arrow {
padding: 0;
}
.htslider-slider-area .hero-slider-controls .slick-arrow.slick-next {
top: auto;
bottom: 0;
}
.htslider-slider-area .hero-slider-controls .slick-dots {
margin: 0;
padding: 0;
}
.htslider-slider-area .hero-slider-controls .slick-dots li {
line-height: 12px;
display: block;
margin: auto auto 8px;
}
.htslider-slider-area .hero-slider-controls .slick-dots li:last-child {
margin: 0;
}
.htslider-slider-area .hero-slider-controls .slick-dots li.slick-active button {
border-color: #282828;
background-color: #282828;
}
.htslider-slider-area .hero-slider-controls .slick-dots li button {
line-height: inherit;
width: 13px;
height: 13px;
padding: 0;
text-indent: -9999px;
border: 1px solid #4E4F4F;
border-radius: 50px;
background-color: transparent;
}
.htslider-slider-area.navigation-style-3 .hero-slider-controls {
top: auto;
bottom: 50px;
left: 50px;
transform: translateY(0px);
}
.htslider-slider-area .slick-prev::before,
.htslider-slider-area .slick-next::before {
display: none;
}
.slider-area.htslider-slider .slingle-slider a {
text-decoration: none;
}
.elementor-widget-htslider-slider-addons {
width: 100%;
} .htslider-slider-area.loading {
overflow: hidden;
height: 600px;
background-color: #FAFAFA;
}
.htslider-slider-area.loading .htslider-slider {
opacity: 0;
}
.htslider-slider-area.loading::before {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
content: '';
-webkit-animation: loading 1s linear infinite both;
animation: loading 1s linear infinite both;
border-width: 4px;
border-style: solid;
border-color: #000000 #000000 #000000 transparent;
border-radius: 50%;
background-color: transparent;
}
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} .htslier-error-notice {
background: #efefef;
padding: 10px 17px;
border-left: 4px solid red;
font-size: 19px;
color: #8b4343;
}:root{
--navy:#0B1B2B;
--navy2:#0F2D3A;
--slate:#1F2A37;
--slate2:#334155;
--paper:#F7FAFC;
--ink:#0B1220;
--muted:#5B6675;
--line:rgba(148,163,184,.22);
--signal:#34D399;
--signal2:#6EE7B7;
--shadow: 0 14px 40px rgba(2,6,23,.12);
--radius: 18px;
--radius2: 24px;
--max: 1200px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--ink);
background: linear-gradient(180deg, #ffffff 0%, var(--paper) 60%, #ffffff 100%);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
p{ line-height:1.65; color: var(--slate2); margin: 0 0 14px; }
ul{ margin: 0; padding-left: 18px; color: var(--slate2); }
small{ color: var(--muted); }
.container{ width: min(var(--max), 92vw); margin: 0 auto; }
.section{ padding: 72px 0; }
.section.compact{ padding: 56px 0; }
.topbar{
position: sticky; top:0; z-index: 50;
backdrop-filter: blur(12px);
background: rgba(255,255,255,.78);
border-bottom: 1px solid var(--line);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding: 14px 0;
gap: 18px;
}
.brand{ display:flex; align-items:center; gap: 12px; }
.brand img{ width: 168px; height:auto; }
.badge{
font-size: 12px; letter-spacing: .8px; text-transform: uppercase;
padding: 6px 10px; border-radius: 999px;
background: rgba(52,211,153,.12);
border: 1px solid rgba(52,211,153,.28);
color: #0B3A2A;
white-space:nowrap;
}
.navlinks{ display:flex; gap: 14px; align-items:center; flex-wrap:wrap; }
.navlinks a{
padding: 10px 10px;
border-radius: 999px;
color: var(--slate2);
font-size: 14px;
}
.navlinks a:hover{ background: rgba(15,45,58,.06); }
.navlinks a.active{ background: rgba(52,211,153,.12); color: #0B3A2A; }
.menuBtn{
display:none;
border: 1px solid var(--line);
background: white;
padding: 10px 12px;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(2,6,23,.06);
}
.menuBtn span{ display:block; width:18px; height:2px; background: var(--slate2); margin: 4px 0; }
.hero{
position: relative;
padding: 76px 0 56px;
overflow:hidden;
}
.hero .grid{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap: 28px;
align-items: center;
}
.heroCard{
border-radius: var(--radius2);
background: rgba(255,255,255,.72);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 34px;
}
.kicker{
display:flex; gap:10px; align-items:center; flex-wrap:wrap;
font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px;
color: var(--muted);
margin-bottom: 12px;
}
.kicker .dot{
width: 8px; height: 8px; border-radius: 99px; background: var(--signal);
box-shadow: 0 0 0 4px rgba(52,211,153,.12);
}
h1{
margin: 0 0 12px;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.06;
letter-spacing: -0.6px;
color: var(--navy);
}
h2{
margin: 0 0 18px;
font-size: 18px;
line-height: 1.55;
color: var(--slate2);
font-weight: 500;
}
.ctaRow{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 18px; }
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding: 12px 16px;
border-radius: 14px;
border: 1px solid var(--line);
background: white;
font-weight: 650;
font-size: 14px;
}
.btn.primary{
background: linear-gradient(135deg, var(--signal) 0%, var(--signal2) 100%);
border-color: rgba(52,211,153,.35);
color: #053226;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.metaRow{
margin-top: 18px;
display:flex; gap: 12px; flex-wrap:wrap;
}
.pill{
font-size: 13px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255,255,255,.7);
color: var(--slate2);
}
.heroMedia{
border-radius: var(--radius2);
overflow:hidden;
box-shadow: var(--shadow);
border: 1px solid var(--line);
position: relative;
min-height: 380px;
background-size: cover;
background-position: center;
}
.heroMedia::after{
content:"";
position:absolute; inset:0;
background: linear-gradient(120deg, rgba(11,27,43,.74), rgba(11,27,43,.18));
}
.heroMedia .caption{
position:absolute; left: 18px; bottom: 18px; right: 18px;
color: rgba(255,255,255,.92);
z-index: 2;
font-weight: 600;
letter-spacing: .2px;
}
.heroMedia .caption small{ color: rgba(255,255,255,.75); font-weight: 500; }
.cards{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.card{
grid-column: span 4;
border-radius: var(--radius);
padding: 18px;
border: 1px solid var(--line);
background: rgba(255,255,255,.72);
box-shadow: 0 10px 26px rgba(2,6,23,.08);
}
.card h3{
margin: 0 0 8px;
font-size: 16px;
color: var(--navy);
}
.card p{ margin:0; font-size: 14px; color: var(--slate2); }
.split{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
align-items:start;
}
.panel{
border-radius: var(--radius2);
border: 1px solid var(--line);
background: rgba(255,255,255,.72);
box-shadow: var(--shadow);
padding: 24px;
}
.panel h3{ margin: 0 0 10px; color: var(--navy); font-size: 18px;}
.panel .muted{ color: var(--muted); font-size: 13px; }
.mediaBlock{
border-radius: var(--radius2);
overflow:hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.mediaBlock .img{
height: 260px;
background-size: cover;
background-position: center;
}
.mediaBlock .body{ padding: 18px; background: rgba(255,255,255,.78); }
.callout{
border-radius: var(--radius2);
border: 1px solid rgba(52,211,153,.28);
background: rgba(52,211,153,.10);
padding: 18px;
display:flex;
gap: 14px;
align-items:flex-start;
}
.callout .icon{
width: 40px; height: 40px; border-radius: 12px;
background: rgba(11,27,43,.08);
border: 1px solid rgba(11,27,43,.10);
display:flex; align-items:center; justify-content:center;
}
.callout h3{ margin:0 0 6px; font-size: 16px; color: #064E3B;}
.callout p{ margin:0; color: #065F46; font-size: 14px;}
.accordion .item{
border: 1px solid var(--line);
border-radius: 16px;
overflow:hidden;
background: rgba(255,255,255,.72);
margin-bottom: 10px;
}
.accordion button{
width:100%;
display:flex; justify-content:space-between; align-items:center;
padding: 14px 14px;
border:0;
background: transparent;
font-weight: 700;
color: var(--navy);
cursor:pointer;
}
.accordion .content{
padding: 0 14px 14px;
display:none;
}
.accordion .item.open .content{ display:block; }
.accordion .chev{ transition: transform .18s ease; }
.accordion .item.open .chev{ transform: rotate(180deg); }
.footer{
border-top: 1px solid var(--line);
padding: 28px 0;
background: rgba(255,255,255,.72);
}
.footerGrid{
display:grid;
grid-template-columns: 1.3fr .7fr;
gap: 16px;
align-items:start;
}
.footer a{ color: var(--slate2); font-size: 14px; }
.footer a:hover{ color: var(--navy); }
.footer .links{ display:flex; gap: 10px; flex-wrap:wrap; }
.form{
display:grid;
gap: 12px;
}
.field{
display:grid; gap: 6px;
}
label{ font-size: 13px; color: var(--slate2); font-weight: 600; }
input, select, textarea{
padding: 12px 12px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,.82);
font: inherit;
}
textarea{ min-height: 120px; resize: vertical; }
.notice{
font-size: 13px;
color: var(--muted);
border-left: 3px solid rgba(52,211,153,.55);
padding-left: 12px;
}
@media (max-width: 920px){
.hero .grid{ grid-template-columns: 1fr; }
.heroMedia{ min-height: 300px; }
.split{ grid-template-columns: 1fr; }
.card{ grid-column: span 6; }
}
@media (max-width: 680px){
.navlinks{ display:none; }
.menuBtn{ display:block; }
.navlinks.open{
display:flex;
flex-direction:column;
align-items:stretch;
position:absolute;
left: 0; right: 0;
top: 62px;
background: rgba(255,255,255,.96);
border-bottom: 1px solid var(--line);
padding: 12px 4vw 18px;
}
.navlinks a{ border-radius: 14px; }
.card{ grid-column: span 12; }
.brand img{ width: 150px; }
}