,,,, the above is from index.html head css, and below is from style.css
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Rubik:300,400,500,700&display=swap");
.btn-group button {
background-color: #000000; /* Green background */
border: 2px solid rgb(0, 0, 0); /* Green border */
color: white; /* White text */
padding: 5px 0px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: center; /* Float the buttons side by side */
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
.container {
height: auto;
}
.container-parent {
overflow: hidden;
}
h1 {
font-size: 2rem; /* or 32px */
color: #000000; /* black text */
font-weight: 700; /* bold for visibility */
letter-spacing: 0.5px;
margin: 10px 0;
text-align: center;
}
#language-selection {
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
}
#language-selection span {
margin-right: 10px;
}
#google_translate_element {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
z-index: 9999;
}
.gradient-loader {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.gradient {
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f9b248, #eb2e6d, #0d3863, #08a6c3);
background-size: 400% 400%;
animation: gradient-animation 3s ease-in-out infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #dbb610;
}
.vertical-center {
position: relative;
-ms-transform: translateY(50%);
transform: translateY(50%);
}
table.minimalistBlack {
border: 2px solid #000000;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.minimalistBlack td,
table.minimalistBlack th {
border: 1.5px solid #474545;
padding: 5px 1px;
}
table.minimalistBlack tbody td {
font-size: 15px;
}
table.minimalistBlack thead {
background: #cfcfcf;
}
table.minimalistBlack thead th {
font-size: 15px;
font-weight: bold;
color: #000000;
text-align: left;
}
table.minimalistBlack tfoot {
font-size: 15px;
font-weight: bold;
color: #000000;
border-top: 1px solid #000000;
}
table.minimalistBlack tfoot td {
font-size: 16px;
}
.center {
text-align: center;
border: 3px solid rgb(255, 255, 255);
}
/** code by webdevtrick ( https://webdevtrick.com) **/
.main-section {
width: 100%;
text-align: center;
}
.tabcontent {
display: none;
}
.tabcontent.active {
display: block;
}
.menus {
display: flex;
justify-content: center;
position: relative;
border-bottom: 2px solid #d29600;
}
.menus .menus-link {
position: relative;
display: inline-block;
padding: 20px 25px;
margin: 0 10px;
font-size: 16px;
line-height: 1.2;
text-decoration: none;
color: #666;
text-transform: uppercase;
cursor: pointer;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.menus .menus-link.active {
color: #fff;
background-color: #3498db;
border-radius: 4px;
}
.menus .menus-link:not(.active):hover {
background-color: #2d0bd8;
}
.menus .menus-link:not(.active) {
background-color: #373434;
}
.menus .menus-link:not(:first-child)::before {
content: "";
position: absolute;
top: 50%;
left: -12px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 12px solid transparent;
border-right: 12px solid #640707;
border-bottom: 12px solid transparent;
}
.menus .menus-link:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -12px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 12px solid transparent;
border-left: 12px solid #09c278;
border-bottom: 12px solid transparent;
}
.sections {
padding: 40px;
font-size: 18px;
color: #545454;
letter-spacing: 1px;
display: none;
}
.main-options {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.main-options::-webkit-scrollbar {
display: none;
height: 0;
background-color: transparent;
}
@keyframes myanim {
to {
opacity: 1;
}
}
/*------------------------------------------------------------
#0.1 Theme Reset Style
--------------------------------------------------------------*/
html {
font-size: 16px;
}
body {
font-family: 'Open Sans', 'SF Pro Display', 'SF Pro Text', sans-serif;
/* Rest of the existing styles */
font-weight: 400;
background-color: #fff;
font-size: 16px;
font-size: 1rem;
color: #525252;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
background-color: #f0f0f0;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
padding-top: 100px;
text-rendering: optimizeLegibility;
margin-top: 0;
padding-top: 0;
}
@media (max-width: 767px) {
body {
font-size: 14px;
overflow-x: hidden;
}
}
p {
color: #000;
line-height: 1.6em;
font-size: 16px;
font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
color: #000;
font-weight: 700;
letter-spacing: 0.5px;
font-size: 1.8rem;
}
ul {
padding-left: 0;
margin: 0;
}
a {
text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
a:hover {
text-decoration: none;
}
img {
max-width: 100%;
}
/*--------------------------------------------------------------
#0.2 Global Elements
--------------------------------------------------------------*/
.page-wrapper {
position: relative;
overflow: hidden;
}
.wow {
visibility: hidden;
}
.fi:before {
margin: 0;
}
.section-padding {
padding: 50px 0;
}
@media (max-width: 991px) {
.section-padding {
padding: 70px 0;
}
}
@media (max-width: 767px) {
.section-padding {
padding: 30px 0;
}
}
/*** contact form error handling ***/
.contact-validation-active .error-handling-messages {
width: 100% !important;
margin-top: 15px !important;
}
.contact-validation-active label.error {
color: red;
font-size: 0.875rem;
font-weight: normal;
margin: 5px 0 0 0;
text-align: left;
display: block;
}
.contact-validation-active #loader {
display: none;
margin-top: 10px;
}
.contact-validation-active #loader i {
font-size: 30px;
font-size: 1.875rem;
color: #f7c33f;
display: inline-block;
-webkit-animation: rotating linear 2s infinite;
animation: rotating linear 2s infinite;
}
.contact-validation-active #success,
.contact-validation-active #error {
width: 100%;
color: #fff;
padding: 5px 10px;
font-size: 16px;
text-align: center;
display: none;
}
@media (max-width: 767px) {
.contact-validation-active #success,
.contact-validation-active #error {
font-size: 15px;
}
}
.contact-validation-active #success {
background-color: #009a00;
border-left: 5px solid green;
margin-bottom: 5px;
}
.contact-validation-active #error {
background-color: #ff1a1a;
border-left: 5px solid red;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 5s alternate infinite;
animation: rotating 5s alternate infinite;
}
/** for popup image ***/
.mfp-wrap {
background-color: rgba(0, 0, 0, 0.9);
z-index: 99999;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/*** for fancybox video ***/
.wpo-section-title {
text-align: center;
position: relative;
max-width: 100%;
margin: auto;
margin-bottom: 20px;
}
.wpo-section-title span {
font-weight: 400;
color: #5aa960;
display: block;
margin-bottom: 0;
}
.wpo-section-title h2 {
font-size: 30px;
font-weight: 400;
margin: 0;
display: inline-block;
position: relative;
line-height: 40px;
text-transform: uppercase;
color: #000;
}
.wpo-section-title-animate-text {
}
@media (max-width: 991px) {
.wpo-section-title h2 {
font-size: 45px;
font-size: 2.8125rem;
}
}
@media (max-width: 767px) {
.wpo-section-title h2 {
font-size: 25px;
line-height: 35px;
}
}
.theme-btn,
.theme-btn-s2,
.theme-btn-s4,
.theme-btn-s3 {
background-color: #fea501;
color: #fff;
font-weight: 700;
padding: 13px 20px;
border-radius: 5px;
display: inline-block;
transition: all 0.3s;
}
@media (max-width: 991px) {
.theme-btn,
.theme-btn-s2,
.theme-btn-s4,
.theme-btn-s3 {
font-size: 14px;
font-size: 0.875rem;
padding: 10px 25px;
}
}
.theme-btn:hover,
.theme-btn-s2:hover,
.theme-btn-s4:hover,
.theme-btn-s3:hover,
.theme-btn:focus,
.theme-btn-s2:focus,
.theme-btn-s4:focus,
.theme-btn-s3:focus,
.theme-btn:active,
.theme-btn-s2:active,
.theme-btn-s4:active,
.theme-btn-s3:active {
background-color: #f7c33f;
color: #fff;
}
.theme-btn-s4 {
font-weight: 400;
color: #666666;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.theme-btn-s2 {
border: none;
background: none;
border: 1px solid #fff;
color: #fff;
}
.theme-btn-s2:hover,
.theme-btn-s4:hover,
.theme-btn-s2:focus,
.theme-btn-s4:focus,
.theme-btn-s2:active,
.theme-btn-s4:active {
background-position: 100% !important;
color: #fff;
}
.theme-btn-s3 {
padding: 13px 30px;
}
@media (max-width: 991px) {
.theme-btn-s3 {
font-size: 14px;
font-size: 0.875rem;
padding: 10px 25px;
}
}
.theme-btn-s4 {
padding: 15px 48px;
border-radius: 55px;
}
@media (max-width: 991px) {
.theme-btn-s4 {
font-size: 14px;
font-size: 0.875rem;
padding: 10px 25px;
}
}
.view-cart-btn {
display: block;
margin-top: 20px;
}
.social-links {
overflow: hidden;
}
.social-links li {
float: left;
width: 35px;
height: 35px;
margin-right: 1px;
}
.social-links li a {
background-color: #05f2ff;
width: 35px;
height: 35px;
line-height: 35px;
display: block;
color: #fff;
text-align: center;
}
.social-links li a:hover {
background-color: #f7c33f;
}
/******************************
#page title
******************************/
.page-title {
background-color: #fcfaf8;
width: 100%;
height: 335px;
text-align: center;
position: relative;
}
@media (max-width: 991px) {
.page-title {
height: 300px;
}
}
.page-title .container {
height: 100%;
display: table;
}
.page-title .container > .row {
vertical-align: middle;
display: table-cell;
}
.page-title h2 {
font-size: 40px;
font-size: 2.5rem;
font-weight: 600;
margin: 0 0 0.3em;
text-transform: capitalize;
}
@media (max-width: 991px) {
.page-title h2 {
font-size: 35px;
font-size: 2.1875rem;
}
}
@media (max-width: 767px) {
.page-title h2 {
font-size: 30px;
font-size: 1.875rem;
}
}
.page-title .breadcrumb {
background-color: transparent;
padding: 0;
margin-bottom: 0;
}
@media (max-width: 767px) {
.page-title .breadcrumb {
text-align: center;
}
}
.page-title .breadcrumb li {
font-size: 16px;
font-size: 1rem;
margin-right: 5px;
position: relative;
}
@media (max-width: 767px) {
.page-title .breadcrumb li {
font-size: 14px;
font-size: 0.875rem;
}
}
.page-title .breadcrumb li a {
color: #f7c33f;
}
.page-title .breadcrumb li a:hover {
color: #00aeb8;
}
.page-title .breadcrumb > li + li {
margin-left: 20px;
padding-left: 15px;
}
.page-title .breadcrumb > li + li:before {
content: "/";
padding: 0;
position: absolute;
left: -14px;
top: 1px;
color: #f7c33f;
}
/**** pagination ****/
.pagination-wrapper {
text-align: center;
margin-top: 45px;
}
@media (max-width: 991px) {
.pagination-wrapper {
text-align: left;
margin-top: 40px;
}
}
.pagination-wrapper .pg-pagination {
display: inline-block;
overflow: hidden;
list-style-type: none;
text-align: center;
}
.pagination-wrapper .pg-pagination li {
float: left;
margin-right: 10px;
}
@media (max-width: 767px) {
.pagination-wrapper .pg-pagination li {
margin-right: 5px;
}
}
.pagination-wrapper .pg-pagination li:last-child {
margin-right: 0;
}
.pagination-wrapper .pg-pagination li a {
background-color: #5aa960;
width: 35px;
height: 35px;
line-height: 35px;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 600;
color: #fff;
border: 0;
display: block;
border-radius: 5px;
}
.pagination-wrapper .pg-pagination .active a,
.pagination-wrapper .pg-pagination li a:hover {
background: #f7c33f;
border-color: #f7c33f;
color: #000;
}
.pagination-wrapper .pg-pagination .fi:before {
font-size: 15px;
font-size: 0.9375rem;
}
.pagination-wrapper-left {
text-align: center;
}
.pagination-wrapper-right {
text-align: right;
}
@media screen and (min-width: 1200px) {
.pagination-wrapper-right {
padding-right: 50px;
}
}
@media (max-width: 991px) {
.pagination-wrapper-right {
margin-top: 45px;
text-align: left;
}
}
/*--------------------------------------------------------------
#0.3 wpo-header
--------------------------------------------------------------*/
.wpo-site-header {
/* navigation open and close btn hide for width screen */
/* style for navigation less than 992px */
/*navbar collaps less then 992px*/
/*** cart-search-contact ***/
}
.wpo-site-header .navigation {
background-color: #fff;
margin-bottom: 0;
border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
}
.wpo-site-header .navigation > .container {
position: relative;
width: 1179px;
}
.wpo-site-header .navigation .navbar-brand {
height: auto;
}
.wpo-site-header #navbar {
text-transform: uppercase;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
/*** mega-menu style ***/
}
.wpo-site-header #navbar > ul li a {
color: #fff;
text-transform: capitalize;
}
.wpo-header-style-3 #navbar > ul li a {
color: #666;
}
.wpo-site-header #navbar > ul li a:hover {
text-decoration: none;
color: #f7c33f;
}
.wpo-site-header #navbar > ul li a:focus {
text-decoration: none;
}
@media screen and (min-width: 992px) {
.wpo-site-header #navbar {
/*** hover effect ***/
}
.wpo-site-header #navbar li {
position: relative;
}
.wpo-site-header #navbar > ul > li > a {
font-size: 13px;
}
.wpo-site-header #navbar > ul .sub-menu {
background-color: #fff;
width: 250px;
position: absolute;
left: 0;
top: 130%;
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-site-header #navbar > ul > li .sub-menu li {
border-bottom: 1px solid #ececec;
}
.wpo-site-header #navbar > ul > li .sub-menu a {
font-size: 14px;
display: block;
padding: 12px 20px;
color: #414141;
font-weight: 500;
}
.wpo-site-header #navbar > ul > li .sub-menu a:hover {
color: #f7c33f;
}
.wpo-site-header #navbar > ul > li > .sub-menu .sub-menu {
left: 110%;
top: 0;
}
.wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a {
position: relative;
}
.wpo-site-header
#navbar
> ul
> li
> .sub-menu
> .menu-item-has-children
> a:before {
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
content: "\e64b";
font-size: 11px;
font-size: 0.73333rem;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.wpo-site-header #navbar > ul > li:hover > .sub-menu {
top: 100%;
visibility: visible;
opacity: 1;
}
.wpo-site-header #navbar .sub-menu > li:hover > .sub-menu {
left: 100%;
visibility: visible;
opacity: 1;
}
}
@media (max-width: 991px) {
.wpo-site-header #navbar > ul > li a {
display: block;
font-size: 14px;
font-size: 0.93333rem;
}
.wpo-site-header #navbar > ul > li .sub-menu li {
border-bottom: 1px solid #e6e6e6;
}
.wpo-site-header #navbar > ul .sub-menu > li:last-child {
border-bottom: 0;
}
.wpo-site-header #navbar > ul > li > .sub-menu a {
padding: 8px 15px 8px 45px;
color: #333;
font-weight: 600;
}
.wpo-site-header #navbar > ul > li > .sub-menu .sub-menu a {
padding: 8px 15px 8px 65px;
}
.wpo-site-header #navbar > ul .menu-item-has-children > a {
position: relative;
}
.wpo-site-header #navbar > ul .menu-item-has-children > a:before {
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
content: "\e64b";
font-size: 11px;
font-size: 0.73333rem;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
@media screen and (min-width: 992px) {
.wpo-site-header #navbar {
/*** hover effect ***/
}
.wpo-site-header #navbar .has-mega-menu {
position: static;
}
.wpo-site-header #navbar .mega-menu,
.wpo-site-header #navbar .half-mega-menu {
background-color: #fff;
padding: 20px;
border-top: 2px solid #fd799b;
position: absolute;
right: 0;
top: 120%;
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-site-header #navbar .mega-menu {
width: 1140px;
right: 15px;
}
.wpo-site-header #navbar .half-mega-menu {
width: 585px;
}
.wpo-site-header #navbar .mega-menu-box-title {
font-size: 14px;
font-size: 0.93333rem;
text-transform: uppercase;
font-weight: bold;
display: block;
padding-bottom: 7px;
margin-bottom: 7px;
border-bottom: 1px solid #e6e6e6;
}
.wpo-site-header #navbar .mega-menu-list-holder li a {
font-size: 14px;
font-size: 0.93333rem;
display: block;
padding: 7px 8px;
margin-left: -8px;
}
.wpo-site-header #navbar .has-mega-menu:hover > ul {
top: 100%;
visibility: visible;
opacity: 1;
}
}
@media (max-width: 1590px) {
.wpo-site-header #navbar > ul > li > .sub-menu .sub-menu {
left: -260px;
top: 0;
}
.wpo-site-header #navbar .sub-menu > li:hover > .sub-menu {
left: -250px;
visibility: visible;
opacity: 1;
}
}
@media (max-width: 1199px) {
.wpo-site-header #navbar > ul .mega-menu {
width: 950px;
right: 15px;
}
.wpo-site-header #navbar > ul .half-mega-menu {
width: 485px;
}
}
@media (max-width: 991px) {
.wpo-site-header #navbar > ul .mega-menu,
.wpo-site-header #navbar > ul .half-mega-menu {
width: auto;
}
.wpo-site-header #navbar > ul .mega-menu .row,
.wpo-site-header #navbar > ul .half-mega-menu .row {
margin: 0;
}
.wpo-site-header #navbar .mega-menu-content > .row > .col {
margin-bottom: 25px;
}
}
@media (max-width: 991px) {
.wpo-site-header #navbar .mega-menu .mega-menu-list-holder a {
padding: 5px 15px 5px 40px;
}
.wpo-site-header #navbar .mega-menu .mega-menu-box-title {
font-size: 14px;
font-size: 0.93333rem;
text-transform: uppercase;
display: block;
border-bottom: 1px dotted #b3b3b3;
padding: 0 0 4px 5px;
margin: 0 25px 8px 25px;
}
}
@media screen and (min-width: 992px) {
.wpo-site-header .navbar-header .open-btn {
display: none;
}
.wpo-site-header #navbar .close-navbar {
display: none;
}
}
@media (max-width: 991px) {
.wpo-site-header {
/* class for show hide navigation */
}
.wpo-site-header .container {
width: 100%;
}
.wpo-site-header .navbar-header button {
background-color: #f7c33f;
width: 40px;
height: 35px;
border: 0;
padding: 5px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
outline: 0;
position: absolute;
right: 15px;
top: 6px;
z-index: 20;
}
.wpo-site-header .navbar-header button span {
background-color: #fff;
display: block;
height: 2px;
margin-bottom: 5px;
}
.wpo-site-header .navbar-header button span:last-child {
margin: 0;
}
.wpo-site-header #navbar {
background: #fff;
display: block !important;
width: 280px;
height: 100% !important;
margin: 0;
padding: 0;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
position: fixed;
right: -300px;
top: 0;
z-index: 100;
}
.wpo-site-header #navbar ul a {
color: #000;
}
.wpo-site-header #navbar ul a:hover,
.wpo-site-header #navbar ul li.current a {
color: #fd799b;
}
.wpo-site-header #navbar .navbar-nav {
height: 100%;
overflow: auto;
}
.wpo-site-header #navbar .close-navbar {
background-color: #f7c33f;
width: 40px;
height: 40px;
color: #fff;
border: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
outline: none;
position: absolute;
left: -18px;
top: 10px;
z-index: 20;
}
.wpo-site-header #navbar > ul > li {
border-bottom: 1px solid #cccccc;
}
.wpo-site-header #navbar > ul > li > a {
padding: 10px 15px 10px 35px;
color: #333;
font-weight: 600;
}
.wpo-site-header #navbar > ul > li > a li a {
color: #333;
}
.wpo-site-header .slideInn {
right: 0 !important;
}
}
@media (max-width: 767px) {
.wpo-site-header .navbar-header .navbar-brand {
font-size: 24px;
}
.wpo-site-header #navbar .navbar-nav {
margin: 0;
}
}
@media (max-width: 991px) {
.wpo-site-header .navbar-collapse.collapse {
display: none;
}
.wpo-site-header .navbar-collapse.collapse.in {
display: block;
}
.wpo-site-header .navbar-header .collapse,
.wpo-site-header .navbar-toggle {
display: block;
}
.wpo-site-header .navbar-header {
float: none;
}
.wpo-site-header .navbar-right {
float: none;
}
.wpo-site-header .navbar-nav {
float: none;
}
.wpo-site-header .navbar-nav > li {
float: none;
}
}
.work-featured-area {
background: #000;
padding: 20px 0 20px;
border-bottom: 2px solid #000;
text-align: center;
}
.work-featured-area .logo-slider {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* add this line to allow images to wrap onto a new line when needed */
}
.work-featured-area .logo-box {
width: 55%; /* add this line to set a fixed width for each logo box */
}
.work-featured-area h4 {
text-align: center;
color: #c4c2c2;
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
}
/* Font size for mobile screens */
@media (max-width: 767px) {
.work-featured-area h4 {
font-size: 20px;
}
.logo-slider {
justify-content: center; /* add this line to center logos horizontally */
}
}
.work-featured-container {
max-width: 1200px;
margin: 0 auto;
}
.logo-slider {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
}
.logo-box {
flex: 1 1 170px;
max-width: 170px;
margin: 10px;
}
.logo-box img {
display: block;
max-width: 150%; /* adjust this value to increase logo size */
}
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
.logo-box {
max-width: 100px;
}
}
/*******************************************
header style 2
*******************************************/
.wpo-header-style-2,
.wpo-header-style-3 {
/*** topbar ***/
/*** navigation ***/
/*** search cart ***/
}
.wpo-header-style-2 .topbar,
.wpo-header-style-3 .topbar {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wpo-header-style-3 .topbar {
border-bottom: 1px solid #ffffff;
background: #000000;
}
@media (max-width: 991px) {
.wpo-header-style-2 .topbar,
.wpo-header-style-3 .topbar {
text-align: center;
padding: 0;
}
}
@media (max-width: 767px) {
.wpo-header-style-2 .topbar,
.wpo-header-style-3 .topbar {
text-align: center;
padding: 10px 0;
}
}
.wpo-header-style-2 .topbar p,
.wpo-header-style-3 .topbar p {
font-size: 15px;
font-size: 1rem;
color: #636363;
margin: 0;
}
@media (max-width: 991px) {
.wpo-header-style-2 .topbar p,
.wpo-header-style-3 .topbar p {
margin-bottom: 8px;
font-size: 14px;
font-size: 0.93333rem;
}
}
.wpo-header-style-2 .topbar ul,
.wpo-header-style-3 .topbar ul {
overflow: hidden;
list-style: none;
float: right;
}
@media (max-width: 991px) {
.wpo-header-style-2 .topbar ul,
.wpo-header-style-3 .topbar ul {
float: none;
display: inline-block;
justify-content: center;
align-items: center;
}
}
.wpo-header-style-2 .topbar ul li,
.wpo-header-style-3 .topbar ul li {
font-size: 15px;
float: left;
padding: 10px 12px;
color: #fff;
line-height: 1.5em;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.wpo-header-style-2 .topbar .contact-info ul li a {
color: #fff;
}
.wpo-header-style-2 .topbar .contact-info ul li a:hover,
.wpo-header-style-3 .topbar .contact-info ul li a:hover {
color: #7db1f0;
}
.wpo-header-style-3 .topbar ul li {
color: #fff;
border-right: none;
}
.wpo-header-style-2 .topbar ul li:first-child,
.wpo-header-style-3 .topbar ul li:first-child {
padding-left: 0;
}
.wpo-header-style-2 .topbar .contact-intro ul,
.wpo-header-style-3 .topbar .contact-intro ul {
float: none;
}
@media (max-width: 991px) {
.wpo-header-style-2 .topbar ul li,
.wpo-header-style-3 .topbar ul li {
font-size: 14px;
font-size: 0.93333rem;
}
}
@media (max-width: 767px) {
.wpo-header-style-2 .topbar ul li,
.wpo-header-style-3 .topbar ul li {
float: left;
border: none;
padding: 0px 5px;
font-size: 12px;
margin: 5px 0;
}
}
@media (max-width: 590px) {
.wpo-header-style-2 .topbar ul li,
.wpo-header-style-3 .topbar ul li {
float: none;
}
.wpo-header-style-2 .topbar .contact-info ul li,
.wpo-header-style-3 .topbar .contact-info ul li {
float: none;
display: inline-block;
}
}
.wpo-header-style-2 .topbar ul > li + li + li,
.wpo-header-style-3 .topbar ul > li + li + li {
border-right: none;
padding-right: 10px;
}
.wpo-header-style-2 .topbar ul > li + li,
.wpo-header-style-3 .topbar ul > li + li {
border-right: none;
}
.wpo-header-style-2 .topbar .theme-btn,
.wpo-header-style-3 .topbar .theme-btn {
padding: 12px 20px;
margin-top: 9px;
font-size: 14px;
font-weight: 600;
color: #333 !important;
}
.wpo-header-style-2 .topbar ul .fi,
.wpo-header-style-3 .topbar ul .fi {
position: relative;
top: 1px;
display: inline-block;
padding-right: 3px;
}
.wpo-header-style-2 .topbar ul .fi:before,
.wpo-header-style-3 .topbar ul .fi:before {
font-size: 15px;
font-size: 1rem;
color: #fff;
}
.wpo-header-style-3 .topbar ul .fi:before {
color: #666;
}
@media (max-width: 991px) {
.wpo-header-style-2 .topbar ul .fi:before,
.wpo-header-style-3 .topbar ul .fi:before {
font-size: 20px;
font-size: 1.33333rem;
}
}
@media (max-width: 767px) {
.wpo-header-style-2 .topbar ul .fi:before,
.wpo-header-style-3 .topbar ul .fi:before {
font-size: 16px;
}
}
.wpo-header-style-2 .navigation ul,
.wpo-header-style-3 .navigation ul {
list-style: none;
}
@media screen and (min-width: 992px) {
.wpo-header-style-2 .navigation .navbar-brand,
.wpo-header-style-3 .navigation .navbar-brand {
margin-top: 0px;
}
.wpo-header-style-2 #navbar,
.wpo-header-style-3 #navbar {
margin-right: 0px;
}
.wpo-header-style-2 #navbar > ul > li > a,
.wpo-header-style-3 #navbar > ul > li > a {
padding: 20px 12px;
}
.wpo-header-style-2
#navbar
> ul
> li
> .sub-menu
> .menu-item-has-children
> a:before,
.wpo-header-style-3
#navbar
> ul
> li
> .sub-menu
> .menu-item-has-children
> a:before {
content: "\e649";
}
.wpo-header-style-2 #navbar > ul .sub-menu,
.wpo-header-style-3 #navbar > ul .sub-menu {
-webkit-box-shadow: 0px 15px 60px -19px black;
box-shadow: 0px 15px 60px -19px black;
}
}
@media screen and (min-width: 1200px) {
.wpo-header-style-2 #navbar > ul > li > a,
.wpo-header-style-3 #navbar > ul > li > a {
padding: 20px 10px;
}
.wpo-header-style-3 #navbar > ul > li > a {
color: #fea501;
font-weight: 600;
letter-spacing: 0.2px;
}
}
@media (max-width: 991px) {
.wpo-header-style-2 .navbar-header button,
.wpo-header-style-3 .navbar-header button {
top: 15px;
}
}
.wpo-header-style-2 .cart-search-contact .mini-cart-content,
.wpo-header-style-3 .cart-search-contact .mini-cart-content,
.wpo-header-style-2 .cart-search-contact .header-search-form,
.wpo-header-style-3 .cart-search-contact .header-search-form {
top: 71px;
}
.wpo-header-style-2 .cart-search-contact .header-search-form button .fi:before,
.wpo-header-style-3 .cart-search-contact .header-search-form button .fi:before {
color: #666;
}
@media (max-width: 991px) {
.wpo-header-style-2 .cart-search-contact .mini-cart-content,
.wpo-header-style-3 .cart-search-contact .mini-cart-content,
.wpo-header-style-2 .cart-search-contact .header-search-form,
.wpo-header-style-3 .cart-search-contact .header-search-form {
top: 64px;
}
}
.wpo-site-header {
position: relative;
z-index: 120;
width: 100%;
background: rgba(255, 255, 255, 0.05);
}
/*--------------------------------------------------------------
#0.4 wpo-hero-style
--------------------------------------------------------------*/
/*--------------------------------------------------------------
0.4 hero-slider
--------------------------------------------------------------*/
.hero {
position: relative;
height: auto;
/** slider controls **/
/*** hero slider animation ***/
}
@media (max-width: 767px) {
.hero {
min-height: 420px;
}
}
.hero .slide {
height: auto;
position: relative;
background-repeat: no-repeat;
position: relative;
}
@media (max-width: 767px) {
.hero .slide {
min-height: 420px;
}
}
.hero .slide .slider-bg {
display: block;
opacity: 1;
}
.hero .slide:focus {
outline: none;
}
.hero .slide .container {
height: 100%;
display: table;
}
.hero .slide .row {
display: table-cell;
vertical-align: middle;
}
.hero .slick-prev,
.hero .slick-next {
background-color: rgba(247, 195, 63, 0.52);
width: 55px;
height: 55px;
z-index: 10;
border-radius: 50%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.hero .slick-prev:hover,
.hero .slick-next:hover {
background-color: rgba(247, 195, 63);
}
@media (max-width: 991px) {
.hero .slick-prev,
.hero .slick-next {
display: none !important;
}
}
.hero .slick-prev {
left: -100px;
}
.hero .slick-prev:before {
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
content: "\e629";
opacity: 1;
}
.hero .slick-next {
right: -100px;
}
.hero .slick-next:before {
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
content: "\e628";
opacity: 1;
}
.hero:hover .slick-prev {
left: 25px;
}
.hero:hover .slick-next {
right: 25px;
}
.hero .slick-dots {
bottom: 30px;
}
@media screen and (min-width: 992px) {
.hero .slick-dots {
display: none !important;
}
}
.hero .slick-dots li {
margin: 0;
}
.hero .slick-dots button {
background-color: #f6c23f;
width: 14px;
height: 14px;
border: 2px solid #fff;
border-radius: 50%;
}
.hero .slick-dots button:before,
.hero .slick-dots button:before {
display: none;
}
.hero .slide-caption > div {
overflow: hidden;
}
.slide-caption .btns {
margin-top: 30px;
}
.hero .slide-caption > div * {
-webkit-animation: fadeOutLeft 3s both;
animation: fadeOutLeft 3s both;
}
.hero .slide-caption > .slider-pic * {
-webkit-animation: fadeOutRight 3s both;
animation: fadeOutRight 3s both;
}
.hero .slide-caption > div.slide-title * {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.hero .slide-caption > div.slide-subtitle * {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.hero .slide-caption > div.btns * {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.hero .hero-slider .slick-current .slide-caption > div * {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
.hero .hero-slider .slick-current .slide-caption > .slider-pic * {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
.hero .hero-slider .slick-current .slide-caption > div.slide-title * {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.hero .hero-slider .slick-current .slide-caption > div.slide-subtitle * {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.hero .hero-slider .slick-current .slide-caption > div.btns * {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.hero .hero-slider .slick-current .slide-caption > div.slider-pic * {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
/************************************************
0.5 hero-style-1
**************************************************/
.hero-style-1,
.hero-style-2 {
height: 900px;
position: relative;
}
.hero-style-1 .slide:before,
.hero-style-3 .slide:before {
content: "";
background-color: rgba(0, 0, 0, 0.34);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.slide-caption {
z-index: 99;
position: relative;
}
.hero-style-1 .slide .slide-caption h2 span {
color: #f7c33f;
}
@media (max-width: 1199px) {
.hero-style-1,
.hero-style-2 {
height: 750px;
}
}
@media (max-width: 991px) {
.hero-style-1,
.hero-style-2 {
height: 550px;
}
}
@media (max-width: 767px) {
.hero-style-1,
.hero-style-2 {
height: 650px;
}
}
.hero-style-1 .slide,
.hero-style-2 .slide {
height: 900px;
}
@media (max-width: 1199px) {
.hero-style-1 .slide,
.hero-style-2 .slide {
height: 750px;
}
.hero-style-2 .slide {
height: 650px;
}
}
@media (max-width: 991px) {
.hero-style-1 .slide,
.hero-style-2 .slide {
height: 550px;
}
}
@media (max-width: 767px) {
.hero-style-1 .slide,
.hero-style-2 .slide {
height: 650px;
}
.hero .slide .container {
margin-left: 20px;
}
.hero-style-1 .slide-caption,
.hero-style-2 .slide-caption {
padding-top: 190px;
}
.hero-style-2 .slide {
height: 450px;
}
}
.hero-style-1 .slide .row,
.hero-style-2 .slide .row {
position: relative;
}
.hero-style-1 .slide-caption,
.hero-style-2 .slide-caption {
padding-top: 85px;
}
@media screen and (min-width: 992px) {
.hero-style-1 .slide-caption,
.hero-style-2 .slide-caption {
margin-top: 62px;
}
}
.hero-style-1 .slide-caption h2,
.hero-style-2 .slide-caption h2,
.hero-style-3 .slide-caption h2 {
font-size: 45px;
color: #fff;
margin: 0 0 0.45em;
}
@media (max-width: 991px) {
.hero-style-1 .slide-caption h2,
.hero-style-2 .slide-caption h2,
.hero-style-3 .slide-caption h2 {
font-size: 45px;
font-size: 2.8125rem;
}
}
@media (max-width: 767px) {
.hero-style-1 .slide-caption h2,
.hero-style-2 .slide-caption h2,
.hero-style-3 .slide-caption h2 {
font-size: 30px;
}
}
.hero-style-1 .slide-caption p,
.hero-style-3 .slide-caption p,
.hero-style-2 .slide-caption p {
color: #fff;
margin: 0 0 2.8em;
}
.hero-style-1 .slider-pic,
.hero-style-2 .slider-pic {
position: absolute;
bottom: -33%;
right: -113%;
z-index: -1;
max-width: 680px;
}
@media (max-width: 991px) {
.hero-style-1 .slider-pic,
.hero-style-2 .slider-pic {
max-width: 350px;
right: -60%;
bottom: 8px;
}
}
@media (max-width: 767px) {
.hero-style-1 .slider-pic,
.hero-style-2 .slider-pic {
display: none;
}
}
.slide-caption .slide-subtitle p {
margin-bottom: 10px;
}
@media (max-width: 767px) {
.hero-style-1 .slide-caption,
.hero-style-2 .slide-caption {
padding-top: 190px;
}
}
@media (max-width: 590px) {
.hero .slide .container {
margin-left: 0px;
}
.theme-btn,
.theme-btn-s2,
.theme-btn-s4,
.theme-btn-s3 {
padding: 8px 12px;
}
.slide-caption .btns .theme-btn {
margin-right: 5px;
}
.wpo-site-header .cart-search-contact {
right: 74px;
}
}
.hero-bg-slider:before {
display: none;
}
.sticky-header {
width: 100%;
position: fixed;
left: 0;
top: -200px;
z-index: 9999;
opacity: 0;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
-ms-transition: all 0.7s;
transition: all 0.7s;
border-bottom: 1px solid #fea501 !important;
}
.sticky-on {
opacity: 1;
top: 0;
}
.header-style-1 .sticky-header {
background-color: #ff5d1b;
border-bottom: 0;
}
.header-style-2 .sticky-header,
.header-style-3 .sticky-header {
background-color: #fff;
border-bottom: 0;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
/*--------------------------------------------------------------
#0.5 wpo-footer
--------------------------------------------------------------*/
.wpo-site-footer .wpo-upper-footer {
position: relative;
padding: 60px 0 45px;
background: #f2eae8;
width: 100%;
}
.wpo-site-footer .contact-ft {
margin-top: 20px;
}
.wpo-site-footer .contact-ft ul li {
padding-bottom: 10px;
list-style: none;
display: block;
float: left;
width: 100%;
}
.wpo-site-footer .wpo-lower-footer .row {
padding: 15px;
position: relative;
}
.wpo-site-footer .wpo-lower-footer {
text-align: left;
position: relative;
background: #000;
width: 100%;
}
.wpo-site-footer .wpo-lower-footer .copyright {
margin-bottom: 0;
margin-top: 8px;
color: #fff;
text-align: right;
}
.wpo-site-footer .contact-ft ul li span {
color: #000;
float: right;
width: 85%;
}
.wpo-site-footer .contact-ft ul li a {
color: #000;
padding-top: 10px;
display: table;
}
.wpo-site-footer .wpo-lower-footer .copyright a {
color: #fff;
margin-right: 10px;
border-right: 2px solid #fff;
padding-right: 12px;
}
.wpo-site-footer .wpo-lower-footer .copyright a:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;
}
.wpo-site-footer .widget.about-widget p {
text-align: justify;
margin-top: 15px;
margin-bottom: 30px;
}
.wpo-site-footer .contact-ft ul li i {
height: 40px;
width: 40px;
display: inline-block;
text-align: center;
line-height: 40px;
background: #000;
border-radius: 50%;
margin-right: 10px;
float: left;
color: #fff;
font-weight: 700;
}
.wpo-site-footer .contact-ft ul li i.fi::before {
font-size: 19px;
}
.wpo-site-footer .logo.widget-title img {
width: 120px;
}
.wpo-site-footer .footer-img-box img {
position: relative;
border-radius: 12% 0 0 12%;
}
.wpo-site-footer .footer-img-box p {
color: #fff;
font-size: 25px;
position: absolute;
bottom: 42px;
text-align: center;
margin-bottom: 0;
width: 92%;
}
.wpo-site-footer .footer-img-box {
position: absolute;
top: 0;
right: 0;
padding-right: 0;
}
/*===================================================
#0.7 wpo-mission-area
=====================================================*/
.wpo-mission-wrap {
margin-top: 10px;
}
.wpo-mission-item {
text-align: center;
}
.wpo-mission-item h2 {
font-size: 22px;
font-weight: 400;
margin-top: 10px;
margin-bottom: 10px;
color: #000;
}
.wpo-mission-item p {
max-width: 250px;
margin: auto;
}
.wpo-mission-icon .fi:before,
.wpo-mission-icon-2 .fi:before,
.wpo-mission-icon-3 .fi:before,
.wpo-mission-icon-4 .fi:before {
font-size: 80px;
background-image: linear-gradient(#46ccd7, #01a8d5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.wpo-mission-icon-2 .fi:before {
background-image: linear-gradient(#ffac77, #ff7d90);
}
.wpo-mission-icon-3 .fi:before {
background-image: linear-gradient(#be68fe, #6d6af4);
}
.wpo-mission-icon-4 .fi:before {
background-image: linear-gradient(#fbaddc, #fc7cb8);
}
@media (max-width: 992px) {
.wpo-mission-item {
margin-bottom: 30px;
}
.wpo-mission-area-2 {
padding-bottom: 60px;
}
.wpo-mission-area {
padding-bottom: 60px;
}
}
/*====================================================
#0.8 wpo-about-area
======================================================*/
.wpo-about-area {
background: #f2eae8;
}
.wpo-about-botom-area .img-responsive { margin-bottom: 15px;}
.wpo-about-botom-area ul { padding-left: 20px;}
.wpo-about-text .wpo-section-title,
.wpo-about-text-2 .wpo-section-title {
text-align: left;
margin: unset;
margin-bottom: 5px;
}
.wpo-about-text p,
.wpo-about-text-2 p {
margin-bottom: 0;
font-size: 18px;
color: #000;
font-weight: 300;
line-height: 30px;
}
.wpo-about-text {
padding-left: 20px;
padding-top: 0;
}
.wpo-about-img img,
.wpo-about-img-2 img {
width: 100%;
}
@media (max-width: 1200px) {
.wpo-about-img,
.wpo-about-img-2 {
padding-top: 50px;
}
}
.wpo-about-img-2 {
width: 830px;
position: relative;
left: -200px;
}
@media (max-width: 1200px) {
.wpo-about-img-2 {
width: 122%;
position: relative;
left: -80px;
margin-bottom: 30px;
}
}
@media (max-width: 992px) {
.wpo-about-img-2 {
width: 100%;
position: relative;
left: 0;
margin-bottom: 30px;
padding-top: 0;
}
}
/*=================================================
#0.9 wpo-case-area
===================================================*/
.progress-section {
padding-top: 7px;
}
.progress {
height: 5px;
overflow: unset;
}
.progress .progress-bar {
border-radius: 15px;
box-shadow: none;
position: relative;
animation: animate-positive 4s;
width: 65%;
background: #5aa960;
height: 5px;
}
.progress-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #f26522;
transition: width 0.6s ease;
}
.progress .progress-value {
width: 53px;
height: 30px;
background-color: #f7c33f;
text-align: center;
line-height: 22px;
border: 1px solid #f7c33f;
left: 90%;
position: relative;
color: #000;
opacity: 0.75;
font-weight: bold;
font-size: 12px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
top: -30px;
line-height: 20px;
}
.progress .progress-value:before {
content: "";
border-color: #f7c33f transparent transparent transparent;
border-style: solid;
border-width: 5px;
width: 0;
height: 0;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -5px;
}
.wpo-case-content h2 {
font-size: 20px;
line-height: 26px;
margin-top: 0;
font-weight: 400;
color: #fea501;
}
.wpo-case-item {
box-shadow: 0px 5px 9.8px 0.2px rgba(85, 85, 85, 0.07);
}
.wpo-case-text-top {
padding: 10px;
}
.wpo-case-content ul {
list-style: none;
}
.wpo-case-text-top ul {
list-style: none;
display: inline-block;
}
.wpo-case-text-top ul li {
font-size: 14px;
color: #fea501;
}
.wpo-case-text-top ul li span {
color: #000;
}
.case-btn ul {
display: flex;
justify-content: space-between;
}
.case-btn ul li {
width: 100%;
}
.case-btn ul li a {
display: block;
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
border-top: 1px solid #eeeeee;
color: #333333;
font-weight: 600;
font-size: 17px;
}
.case-btn ul li:last-child a {
background-color: #5aa960;
color: #fff;
}
.wpo-case-img img {
width: 30px;
height: 200px;
}
.wpo-case-item {
margin-bottom: 30px;
}
@media (max-width: 1200px) {
.wpo-case-area {
padding-bottom: 90px;
}
.wpo-case-content h2 {
font-size: 20px;
}
}
.wpo-case-single {
padding: 0 5px;
border-radius: 15px;
overflow: hidden;
}
.wpo-case-img {
position: relative;
overflow: hidden;
border-radius: 15px;
}
.wpo-case-wrap .owl-carousel .owl-stage-outer {
padding: 3px;
}
.wpo-case-slider .owl-nav div {
position: absolute;
left: -70px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: transparent;
transition: all 0.3s;
border: 1px solid #5aa960;
}
.wpo-case-slider .owl-nav div.owl-next {
right: -70px;
left: auto;
}
.owl-theme .owl-controls .owl-nav [class*="owl-"] {
background: transparent;
color: #5aa960;
}
.owl-theme .owl-controls .owl-nav [class*="owl-"]:hover {
background: #5aa960;
color: #fff;
}
@media (max-width: 860px) {
.wpo-case-slider .owl-nav div {
display: none !important;
}
}
@media (max-width: 767px) {
.wpo-case-slider .owl-nav div {
display: none !important;
}
.wpo-case-content h2 {
font-size: 20px;
}
}
.animate-text {
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.animate-text h2{
color: #000;
font-size: 30px;
}
.animate-text.is-visible {
opacity: 1;
transform: translateY(0);
}
/*================================================
#1.1 wpo-team-area
==================================================*/
.wpo-team-content h2 {
font-size: 24px;
font-weight: 500;
margin-top: 0;
}
.wpo-team-content {
background: #fff;
box-shadow: 0px 5px 9.8px 0.2px rgba(85, 85, 85, 0.07);
transition: all 0.3s;
}
.wpo-team-wrap {
position: relative;
transition: all 0.3s;
margin-bottom: 100px;
}
.wpo-team-area.section-padding {
padding-bottom: 20px;
}
.wpo-team-content {
position: absolute;
right: 0px;
bottom: -45px;
width: 80%;
text-align: center;
padding: 30px 5px;
overflow: hidden;
border-radius: 0 0 7px 7px;
}
.wpo-team-text-sub {
margin-bottom: -50px;
transition: all 0.3s;
}
.wpo-team-wrap:hover .wpo-team-text-sub {
margin-bottom: 0px;
}
.wpo-team-text-sub span {
margin-bottom: 28px;
display: block;
transition: all 0.3s;
}
.wpo-team-wrap:hover .wpo-team-text-sub span {
margin-bottom: 0px;
}
.wpo-team-wrap:hover .wpo-team-content {
background: #fea501;
}
.wpo-team-img img {
width: 100%;
}
.wpo-team-area .wpo-section-title {
margin-bottom: 40px;
text-align: left;
}
.wpo-team-area .wpo-section-title h2 {
color: #43bc75;
}
.wpo-team-area .wpo-section-title .line {
margin-left: 0;
}
@media (max-width: 992px) {
.wpo-team-wrap {
margin-bottom: 80px;
}
.wpo-team-area {
padding-bottom: 30px;
}
}
/*--------------------------------------------------------------
#5.0 wpo-contact-page
--------------------------------------------------------------*/
.wpo-contact-form-map .contact-form {
padding: 60px 65px 30px;
-webkit-box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1);
box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1);
border-radius: 5px;
}
@media (max-width: 1199px) {
.wpo-contact-form-map .contact-form {
margin-bottom: 60px;
}
}
@media (max-width: 600px) {
.wpo-contact-form-map .contact-form {
padding: 40px 35px;
}
}
.wpo-contact-form-map .contact-form h2 {
font-size: 30px;
font-size: 1.875rem;
font-weight: 500;
margin: 0 0 1em;
text-align: center;
}
@media (max-width: 767px) {
.wpo-contact-form-map .contact-form h2 {
font-size: 25px;
font-size: 1.5625rem;
}
}
.wpo-contact-form-map form input,
.volunteer-contact-form form input,
.wpo-contact-form-map form select,
.volunteer-contact-form form select,
.volunteer-contact-form form label,
.volunteer-contact-form form textarea,
.wpo-contact-form-map form textarea {
background: transparent;
width: 100%;
height: 50px;
border: 0;
border-bottom: 1px solid #d0d4df;
border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding-left: 0;
color: #525252;
}
@media (max-width: 991px) {
.wpo-contact-form-map form input,
.volunteer-contact-form form input,
.wpo-contact-form-map form select,
.volunteer-contact-form form select,
.volunteer-contact-form form textarea,
.wpo-contact-form-map form textarea {
height: 45px;
}
}
.wpo-contact-form-map form input:focus,
.volunteer-contact-form form input:focus,
.wpo-contact-form-map form select:focus,
.volunteer-contact-form form select:focus,
.volunteer-contact-form form textarea:focus,
.wpo-contact-form-map form textarea:focus {
border-color: #f7c33f;
}
.wpo-contact-form-map form textarea,
.volunteer-contact-form form textarea {
height: 125px;
}
.wpo-contact-form-map form {
overflow: hidden;
}
.wpo-contact-form-map form ::-webkit-input-placeholder {
font-style: 16px;
font-style: normal;
color: #888;
}
.wpo-contact-form-map form :-moz-placeholder {
font-style: 16px;
font-style: normal;
color: #888;
}
.wpo-contact-form-map form ::-moz-placeholder {
font-style: 16px;
font-style: normal;
color: #888;
}
.wpo-contact-form-map form :-ms-input-placeholder {
font-style: 16px;
font-style: normal;
color: #888;
}
.wpo-contact-form-map form select {
display: inline-block;
color: #a9a9a9;
cursor: pointer;
opacity: 1;
padding: 6px 12px;
font-size: 15px;
font-size: 0.9375rem;
}
.wpo-contact-form-map form > div {
margin-bottom: 15px;
}
.wpo-contact-form-map form > div:first-child,
.wpo-contact-form-map form > div:nth-child(2) {
width: calc(50% - 15px);
float: left;
margin: 0 7.5px 15px -7.5px;
}
@media (max-width: 600px) {
.wpo-contact-form-map form > div:first-child,
.wpo-contact-form-map form > div:nth-child(2) {
width: calc(100% - 15px);
float: none;
margin: 0 0 15px;
}
}
.wpo-contact-form-map form > div:first-child {
margin: 0;
}
@media (max-width: 600px) {
.wpo-contact-form-map form > div:first-child {
margin: 0 0 15px;
}
}
.wpo-contact-form-map form > div:nth-child(2) {
margin: 0 0 15px 30px;
}
@media (max-width: 600px) {
.wpo-contact-form-map form > div:nth-child(2) {
margin: 0 0 15px;
}
}
.wpo-contact-form-map .submit-area {
width: 100%;
float: none;
clear: both;
text-align: center;
margin-top: 30px;
}
.wpo-contact-form-map .contact-map {
max-width: 948px;
height: 605px;
-webkit-box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1);
box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1);
}
@media (max-width: 767px) {
.wpo-contact-form-map .contact-map {
height: 500px;
}
}
.wpo-contact-form-map .contact-map iframe {
width: 100%;
height: 100%;
border: 0;
}
.contact-map {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.contact-form .theme-btn,
.volunteer-contact-form .theme-btn {
background: #f7c33f;
color: #fff;
border: 1px solid #f7c33f;
outline: none;
margin-top: 0px;
border-radius: 40px;
color: #333;
}
.wpo-contact-form-map .contact-form {
margin-bottom: 60px;
}
.wpo-contact-form-map .info-wrap {
display: block;
text-align: center;
}
.wpo-contact-form-map .info-icon,
.wpo-contact-form-map .info-icon-2,
.wpo-contact-form-map .info-icon-3 {
width: 90px;
height: 90px;
line-height: 115px;
border-radius: 50%;
-webkit-box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
-moz-box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
text-align: center;
align-items: center;
background-image: linear-gradient(#7fedeb, #7fd7ea);
color: #242f6c;
margin: 0 auto;
margin-bottom: 20px;
}
.wpo-contact-form-map .info-icon-2 {
background-image: linear-gradient(#ffd3b8, #ffc0c6);
}
.wpo-contact-form-map .info-icon-3 {
background-image: linear-gradient(#e1b3fe, #b5b3f9);
}
.info-item {
-webkit-box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
-moz-box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
padding: 20px 20px;
margin-bottom: 0px;
min-height: 250px;
}
.info-icon-2 .fi:before {
font-size: 40px;
}
.info-text span {
color: #666666;
font-size: 18px;
font-weight: 600;
}
@media (max-width: 991px) {
.wpo-contact-info {
padding-left: 0;
}
.wpo-contact-form-map .contact-map {
margin-bottom: 40px;
}
}
@media (max-width: 590px) {
.info-text span {
font-size: 15px;
}
.wpo-contact-form-map form textarea {
height: 100px;
}
}
.wpo-contact-info .info-icon i,
.wpo-contact-info .info-icon-2 i,
.wpo-contact-info .info-icon-3 i {
font-size: 40px;
line-height: 90px;
}
.wpo-contact-form-map {
padding-bottom: 90px;
}
@media (max-width: 767px) {
.wpo-contact-form-map {
padding-bottom: 10px;
}
}
/*=====================================================
#7.0 case-details-page
=======================================================*/
.wpo-case-details-tab {
padding: 15px 30px;
border: 1px solid #ebebeb;
margin-top: 40px;
}
.wpo-case-details-tab .nav li a {
display: block;
width: 100px;
height: 45px;
line-height: 24px;
text-align: center;
border-radius: 40px;
color: #2d4277;
transition: all 0.5s;
font-weight: 600;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
margin-right: 10px;
border: none;
}
.wpo-case-details-tab .nav li.active a,
.wpo-case-details-tab .nav li:hover a {
background: #f7c33f;
color: #fff;
outline: none;
border-radius: 40px;
border: none;
}
.nav-tabs {
border-bottom: none;
}
.wpo-case-details-text {
margin-top: 50px;
}
.case-b-text {
margin-top: 40px;
}
#Description {
padding: 15px 30px;
border: 1px solid #ebebeb;
}
.wpo-case-details-text .wpo-case-text-top p {
margin-bottom: 30px;
}
.wpo-case-details-tab .event-b-text {
margin-top: 40px;
}
.wpo-case-details-text .wpo-case-content h2 {
font-size: 30px;
margin-bottom: 20px;
}
.wpo-case-details-text .wpo-case-content h3 {
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
}
.case-bb-text ul {
display: unset;
}
.case-bb-text ul li {
font-size: 15px;
font-size: 0.9375rem;
position: relative;
padding-left: 20px;
padding-bottom: 10px;
}
.case-bb-text ul li:before {
content: "";
background: #f7c33f;
width: 6px;
height: 6px;
position: absolute;
left: 0;
top: 6px;
}
.wpo-case-details-area .wpo-blog-single-section .comments-area {
margin-top: 0;
}
.wpo-donations-amount,
.wpo-donations-details,
.wpo-doanation-payment {
padding: 30px;
border: 1px solid #ebebeb;
margin-bottom: 40px;
}
.wpo-donations-amount h2,
.wpo-donations-details h2,
.wpo-doanation-payment h2 {
font-size: 18px;
font-size: 24px;
font-weight: 500;
position: relative;
text-transform: capitalize;
margin-bottom: 30px;
margin-top: 0;
}
.wpo-donations-amount input,
.wpo-donations-details input,
.wpo-donations-details textarea {
background: transparent;
width: 100%;
height: 50px;
border: 0;
border: 1px solid #ebebeb;
padding-left: 15px;
border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
color: #525252;
border-radius: 5px;
}
.wpo-donations-details textarea {
height: 135px;
}
.wpo-donations-amount input:focus,
.wpo-donations-details input:focus,
.wpo-donations-details textarea:focus {
border-color: #f7c33f;
}
.payment-name ul li input {
margin-right: 0;
position: absolute;
z-index: -1;
opacity: 0;
}
.wpo-payment-select ul {
list-style: none;
}
.payment-name ul {
display: flex;
margin-top: 30px;
}
.wpo-payment-area form {
overflow: unset !important;
}
.payment-name ul li {
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.payment-name ul {
list-style: none;
}
.payment-name ul li input {
margin-right: 0;
}
.payment-name ul li {
margin-right: 15px;
}
.wpo-payment-area h2 {
padding-bottom: 40px;
margin-bottom: 0;
}
.wpo-payment-select ul {
display: flex;
}
.wpo-payment-select ul li {
margin-right: 10px;
font-size: 15px;
font-weight: 500;
color: #5b5b5b;
}
.wpo-payment-select label {
font-size: 18px;
font-weight: 600;
}
.wpo-payment-area h2 {
font-size: 20px;
color: #878787;
font-weight: 700;
}
.wpo-payment-area h2 span {
font-size: 30px;
color: #ff493c;
}
.wpo-payment-area {
width: 100%;
}
.payment-name ul li input {
margin-right: 0;
position: absolute;
z-index: -1;
}
.payment-name ul li input:checked ~ label {
background: #fcebbd;
}
.payment-name label {
width: 100%;
border: 1px solid transparent;
cursor: pointer;
}
.payment-name .visa label {
border: 1px solid #0057a0;
}
.payment-name .mas label {
border: 1px solid #cc0000;
}
.payment-name .ski label {
border: 1px solid #691a5f;
}
.payment-name .pay label {
border: 1px solid #019cde;
}
.wpo-payment-option {
padding: 0 15px;
}
.payment-name.active {
display: block;
}
.wpo-payment-option.active .payment-name {
display: none !important;
}
.wpo-payment-area .form-style input {
width: 100%;
margin-bottom: 15px;
padding-left: 20px;
height: 40px;
background: #fff;
border-radius: 2px;
border: none;
border: 1px solid #ebebeb;
}
.wpo-payment-area .form-style input:focus {
border: 1px solid #f7c33f;
}
.wpo-payment-area .contact-form {
margin-top: 40px;
}
#Donations .theme-btn {
border: none;
outline: none;
border-radius: 40px;
box-shadow: none;
}
#Donations .submit-area {
text-align: center;
}
@media (max-width: 992px) {
.wpo-event-details-wrap {
margin-bottom: 30px;
}
}
@media (max-width: 590px) {
.wpo-case-details-text .wpo-case-content h2 {
font-size: 18px;
}
.wpo-case-details-tab .nav li a {
margin-bottom: 20px;
}
.wpo-case-details-tab .nav li:last-child a {
margin-bottom: 0;
}
.wpo-case-details-text .wpo-case-text-top {
padding: 8px;
}
.wpo-payment-select ul {
display: flex;
flex-wrap: wrap;
}
.wpo-doanation-payment {
padding: 20px 10px;
}
}
.wpo-donate-header h2 {
margin-bottom: 50px;
text-align: center;
font-size: 36px;
font-weight: 500;
margin-top: 0;
}
/*======================================================
#6.0 volunteer-page
========================================================*/
.volunteer-area {
padding: 50px 0 45px;
}
.volunter-img {
padding: 20px;
}
.volunteer-img-wrap {
box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.15);
}
.volunteer-contact-form form input,
.volunteer-contact-form form select,
.volunteer-contact-form form label,
.volunteer-contact-form form textarea {
border: 1px solid #d0d4df;
padding-left: 15px;
}
.volunteer-contact-form form label {
line-height: 50px;
font-weight: 400;
font-size: 14px;
}
.volunteer-contact-form .form-group-in input {
opacity: 0;
visibility: hidden;
position: absolute;
}
.volunteer-contact-form .form-group-in {
position: relative;
}
.volunteer-contact-form .form-group-in i {
position: absolute;
right: 30px;
top: 17px;
font-size: 20px;
}
.volunteer-contact-form .form-group {
margin-bottom: 30px;
}
.volunteer-contact-form {
margin: auto;
padding: 25px 20px;
background: #fff;
margin-top: 0px;
position: relative;
z-index: 1;
border: 5px solid #fbe19f;
}
.volunteer-contact-form h2 {
margin-top: 0;
font-size: 25px;
text-align: center;
margin-bottom: 30px;
color: #e02224;
}
@media (max-width: 992px) {
.volunteer-contact-form {
max-width: 635px;
margin-top: -310px;
}
}
@media (max-width: 767px) {
.volunteer-contact-form {
margin-top: 0px;
padding: 14px 16px;
}
.volunteer-contact-form h2 {
font-size: 23px;
}
.volunteer-area {
padding: 70px 0 0;
}
}
.volunteer-contact-form .submit-area {
text-align: center;
}
.volunter-img img {
width: 100%;
}
/*=============================================
#1.3 wpo-event-area
===============================================*/
.wpo-event-text ul {
list-style: none;
align-items: center;
display: flex;
margin-bottom: 15px;
}
.wpo-event-text ul li i {
font-size: 15px;
margin-right: 10px;
}
.wpo-event-text ul li {
margin-right: 20px;
}
.flaticon-pin:before {
font-size: 15px;
}
.wpo-event-text {
backdrop-filter: blur(50px);
background-color: #f9bc89;
box-shadow: 0px 5px 9.8px 0.2px rgba(85, 85, 85, 0.07);
transition: all 0.3s;
padding: 5px;
width: 90%;
left: 50%;
transform: translateX(-50%);
position: relative;
margin-top: -50px;
border-radius: 8px;
border: 1px solid #ff8b17;
font-family: "SF Pro Display", sans-serif;
}
.wpo-event-text h2 {
margin-top: 0;
font-size: 20px;
font-weight: normal;
margin-bottom: 10px;
font-family: "SF Pro Display", sans-serif;
}
.wpo-event-text p {
margin-bottom: 10px;
color: rgb(75, 75, 75);
font-family: "SF Pro Display", sans-serif;
}
.wpo-event-text a {
color: #191919;
font-weight: normal;
}
.wpo-event-img {
position: relative;
}
.wpo-event-img img {
width: 100%;
}
.wpo-event-area .wpo-event-img img {
height: 250px;
}
.wpo-event-img .thumb-text,
.wpo-event-img .thumb-text-2,
.wpo-event-img .thumb-text-3 {
position: absolute;
top: -8px;
right: 15px;
background: url(../images/event/img-1.html) no-repeat center center / cover;
width: 60px;
height: 85px;
text-align: center;
padding-top: 4px;
padding-right: 8px;
}
.wpo-event-img .thumb-text-2 {
background: url(../images/event/img-2.html) no-repeat center center / cover;
}
.wpo-event-img .thumb-text-3 {
background: url(../images/event/img-3.html) no-repeat center center / cover;
}
.wpo-event-img .thumb-text span,
.wpo-event-img .thumb-text-2 span,
.wpo-event-img .thumb-text-3 span {
display: block;
}
.wpo-event-img .thumb-text span:first-child,
.wpo-event-img .thumb-text-2 span:first-child,
.wpo-event-img .thumb-text-3 span:first-child {
font-size: 25px;
font-weight: 600;
color: #fff;
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
}
.wpo-event-img .thumb-text span:last-child,
.wpo-event-img .thumb-text-2 span:last-child,
.wpo-event-img .thumb-text-3 span:last-child {
font-size: 16px;
font-weight: 400;
color: #fff;
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
}
@media (max-width: 1200px) {
.wpo-event-text h2 {
font-size: 20px;
}
.wpo-event-text ul li {
margin-right: 10px;
font-size: 12px;
}
}
@media (max-width: 992px) {
.wpo-event-item {
margin-bottom: 30px;
}
.wpo-event-area {
padding-bottom: 70px;
}
}
/*----------------------------------------------
#8.0 event-details-page
----------------------------------------------*/
.wpo-event-details-text {
margin-top: 20px;
padding: 0 10px 10px;
}
.wpo-event-details-text h2 {
margin-bottom: 30px;
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
}
.wpo-event-details-area .wpo-event-item {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 6px gray;
}
/*------------------------------------
wpo-blog sidebar
------------------------------------*/
@media screen and (min-width: 992px) {
.wpo-blog-sidebar {
padding-left: 0px;
}
}
@media (max-width: 991px) {
.wpo-blog-sidebar {
margin-top: 80px;
max-width: 400px;
}
}
@media (max-width: 991px) {
.wpo-blog-sidebar-2 {
margin-top: 0;
max-width: 400px;
margin-bottom: 80px;
}
}
@media (max-width: 767px) {
.wpo-blog-sidebar {
margin-top: 60px;
max-width: 400px;
}
}
@media (max-width: 767px) {
.wpo-blog-sidebar-2 {
margin-top: 0;
max-width: 400px;
margin-bottom: 80px;
}
}
.wpo-blog-sidebar .widget {
border: 1px solid #ebebeb;
padding: 30px;
}
.wpo-blog-sidebar .widget h3 {
font-size: 22px;
font-weight: 600;
border-bottom: 1px solid #ebebeb;
margin: 0 -30px 30px;
padding: 0 0 30px 30px;
position: relative;
text-transform: capitalize;
}
.wpo-blog-sidebar > .widget + .widget {
margin-top: 65px;
}
.wpo-blog-sidebar .search-widget form div {
position: relative;
}
.wpo-blog-sidebar .search-widget input {
height: 50px;
font-size: 16px;
font-size: 1rem;
border: 1px solid #ebebeb;
padding: 6px 50px 6px 20px;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-blog-sidebar .search-widget input:focus {
background-color: rgba(0, 198, 209, 0.1);
}
.wpo-blog-sidebar .search-widget form button {
background: #f7c33f;
font-size: 20px;
font-size: 1.25rem;
color: #333;
border: 0;
outline: 0;
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
right: 0;
top: 0;
}
.wpo-blog-sidebar .recent-post-widget .post {
overflow: hidden;
}
.wpo-blog-sidebar .recent-post-widget .posts > .post + .post {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #f2f0f0;
}
.wpo-blog-sidebar .recent-post-widget .post .img-holder {
width: 68px;
float: left;
}
.wpo-blog-sidebar .recent-post-widget .post .details {
width: calc(100% - 68px);
float: left;
padding-left: 20px;
}
.wpo-blog-sidebar .recent-post-widget .post h4 {
font-size: 16px;
line-height: 1.3em;
margin: 0 0 0.3em;
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
color: #444444;
}
@media (max-width: 1199px) {
.wpo-blog-sidebar .recent-post-widget .post h4 {
margin: 0;
}
}
.wpo-blog-sidebar .recent-post-widget .post h4 a {
display: inline-block;
color: #242f6c;
}
@media (max-width: 1199px) {
.wpo-blog-sidebar .recent-post-widget .post h4 {
font-size: 14px;
}
}
.wpo-blog-sidebar .recent-post-widget .post h4 a:hover {
color: #f7c33f;
}
.wpo-blog-sidebar .recent-post-widget .post .details .date {
font-size: 14px;
color: #888;
}
.wpo-blog-sidebar .recent-post-widget .post .details .date i {
display: inline-block;
padding-right: 7px;
}
/*.===============================
#1.0 wpo-counter-area
===============================*/
.wpo-counter-area,
.wpo-counter-style-2 {
padding: 30px 0;
background: url(../img/counter-bg.webp) no-repeat center center / cover;
position: relative;
}
.wpo-counter-area .wpo-counter-grids .grid,
.wpo-counter-style-2 .wpo-counter-grids .grid {
width: 20%;
float: left;
margin-right: 0;
margin-bottom: 10px;
text-align: center;
position: relative;
border-right: 2px dotted #fff;
}
.wpo-counter-area .wpo-counter-grids .grid:before,
.wpo-counter-style-2 .wpo-counter-grids .grid:before {
position: absolute;
top: 15px;
right: 0;
width: 1px;
height: 70px;
background: #636363;
}
.wpo-counter-area .wpo-counter-grids .grid:last-child:before,
.wpo-counter-style-2 .wpo-counter-grids .grid:last-child:before {
display: none;
}
.wpo-counter-area .wpo-counter-grids .grid p,
.wpo-counter-style-2 .wpo-counter-grids .grid p {
font-size: 18px;
font-weight: normal;
color: #fff;
padding-top: 5px;
margin-bottom: 0;
}
.wpo-counter-area .wpo-counter-grids,
.wpo-counter-style-2 .wpo-counter-grids {
overflow: hidden;
position: relative;
}
.wpo-counter-area .odometer.odometer-auto-theme,
.wpo-counter-area .odometer.odometer-theme-default,
.wpo-counter-style-2 .odometer.odometer-auto-theme,
.wpo-counter-style-2 .odometer.odometer-theme-default {
line-height: 0.8em;
}
.wpo-counter-area .wpo-counter-grids .grid h2,
.wpo-counter-style-2 .wpo-counter-grids .grid h2 {
font-size: 50px;
font-weight: 500;
color: #fff;
margin: 0;
line-height: 10px;
margin-top: 8px;
padding-bottom: 0px;
}
@media (max-width: 1200px) {
.wpo-counter-area .wpo-counter-grids .grid,
.wpo-counter-style-2 .wpo-counter-grids .grid {
width: 23%;
}
}
@media (max-width: 992px) {
.wpo-counter-area .wpo-counter-grids .grid h2,
.wpo-counter-style-2 .wpo-counter-grids .grid h2 {
font-size: 35px;
}
}
/*-----------------------------------------------------------------
breadcumb-new-style
------------------------------------------------------------------*/
.wpo-breadcumb-new-area {
background: url(../img/title-bar-bg.jpg) no-repeat center top / cover;
min-height: 250px;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
z-index: 1;
}
.wpo-breadcumb-new-area:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
content: "";
z-index: -1;
}
.wpo-breadcumb-new-wrap {
text-align: center;
}
@media (max-width: 767px) {
.wpo-breadcumb-new-area {
min-height: 150px;
}
}
.wpo-breadcumb-new-wrap h2 {
font-size: 40px;
color: #fff;
line-height: 60px;
margin-top: 0px;
font-family: 'SF Pro Display', 'SF Pro Text', sans-serif;
}
@media (max-width: 767px) {
.wpo-breadcumb-new-wrap h2 {
font-size: 25px;
line-height: 35px;
}
}
.wpo-breadcumb-new-wrap ul li {
display: inline-block;
padding: 0px 5px;
color: #fff;
}
.wpo-breadcumb-new-wrap ul li a {
color: #fff;
font-size: 18px;
transition: all 0.3s;
}
.wpo-breadcumb-new-wrap ul li a:hover {
color: #fea501;
}
.wpo-breadcumb-new-wrap ul li:last-child {
color: #fea501;
}
.wpo-breadcumb-new-wrap ul li:after {
content: "/";
position: relative;
left: 7px;
}
.wpo-breadcumb-new-wrap ul li:last-child:after {
display: none;
}
/*-----------------------------------------------------------------
breadcumb-style
------------------------------------------------------------------*/
.wpo-breadcumb-area {
position: relative;
}
.wpo-breadcumb-area .wpo-breadcumb-wrap {
position: absolute;
bottom: 0;
width: 100%;
padding: 100px 0;
}
.wpo-breadcumb-area .wpo-breadcumb-wrap .btns .theme-btn {
margin-right: 0;
background: #fff;
color: #4ca273;
font-weight: 600;
font-size: 19px;
}
.wpo-breadcumb-wrap h2 {
font-size: 40px;
color: #fff;
line-height: 45px;
margin-top: 0;
margin-bottom: 40px;
font-weight: 400;
}
@media (max-width: 767px) {
.wpo-breadcumb-wrap h2 {
font-size: 25px;
line-height: 35px;
}
}
.wpo-breadcumb-wrap ul li {
display: inline-block;
padding: 0px 5px;
color: #fff;
}
.wpo-breadcumb-wrap ul li a {
color: #fff;
font-size: 18px;
transition: all 0.3s;
}
.wpo-breadcumb-wrap ul li a:hover {
color: #f7c33f;
}
.wpo-breadcumb-wrap ul li:last-child {
color: #f7c33f;
}
.wpo-breadcumb-wrap ul li:after {
content: "/";
position: relative;
left: 7px;
}
.wpo-breadcumb-wrap ul li:last-child:after {
display: none;
}
.wpo-header-style-3 .topbar ul li a {
color: #ffa300;
}
.wpo-header-style-3 .topbar .contact-info ul li {
border-right: 1px solid #ffa300;
}
.wpo-header-style-3 .topbar .contact-info ul li:last-child {
border-right: none;
}
.wpo-site-header .navigation .navbar-brand img {
width: 75px;
}
.wpo-site-header .navigation .navbar-brand {
padding: 5px;
}
.hero-style-3 .slide-caption h2 span {
color: #ef862d;
}
.slide-caption .btns .theme-btn {
margin-right: 0;
background: #fff;
color: #4ca273;
font-weight: 600;
font-size: 19px;
}
.slide-caption {
padding-top: 130px;
height: 630px;
}
.wpo-about-area .wpo-about-img h3 {
font-size: 30px;
font-weight: 300;
color: #000;
padding-left: 155px;
margin-bottom: 35px;
margin-top: 0;
}
.wpo-about-area .wpo-about-img h4 {
font-size: 28px;
font-weight: 200;
color: #000;
padding-right: 155px;
margin-bottom: 0;
margin-top: 35px;
text-transform: uppercase;
text-align: right;
}
.wpo-about-area .wpo-about-img {
position: relative;
}
.wpo-about-area .wpo-about-img .donat-img {
width: 140px;
position: absolute;
}
.wpo-about-area .wpo-about-img .donat-img.two {
right: 0;
bottom: 0;
}
.wpo-case-area .wpo-section-title span {
font-size: 30px;
text-transform: uppercase;
}
.wpo-case-area .wpo-section-title span img {
width: 30px;
margin-right: 10px;
}
.line {
background: #fea501;
height: 3px;
width: 100px;
margin: 0 auto 5px;
}
.wpo-case-wrap .left-c-box {
align-items: center;
display: flex;
}
.wpo-case-wrap .left-c-box p {
margin-top: 100px;
font-size: 24px;
color: #000;
line-height: 30px;
font-weight: 600;
}
.wpo-case-text-top .stand {
font-size: 14px;
}
.wpo-case-text-top .stand span {
color: #5aa960;
}
.wpo-case-text-top p {
color: #000;
margin-bottom: 0;
}
.wpo-case-content {
background: #fff;
}
.wpo-counter-area .wpo-counter-grids .grid:last-child {
border-right: none;
}
.home-video-area {
padding: 50px 0;
background: #fff;
}
.home-video-area .video-text p {
padding: 90px 90px;
font-size: 30px;
color: #000;
line-height: 40px;
position: relative;
margin-bottom: 0px;
}
.video-text p::before {
content: "";
background-image: url(../img/block-1.png);
height: 60px;
width: 60px;
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
top: 60px;
left: 18px;
}
.video-text p::after {
content: "";
background-image: url(../img/block-2.png);
height: 60px;
width: 60px;
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
bottom: 60px;
}
.home-video-area .video-text span {
font-size: 30px;
color: #000;
padding: 0 90px;
font-weight: 600;
display: block;
margin-top: -60px;
}
.wpo-mission-area .wpo-section-title span {
font-size: 35px;
margin-bottom: 6px;
}
.wpo-mission-area .wpo-section-title h2 {
font-size: 22px;
}
.wpo-mission-area {
background: #f2eae8;
}
.wpo-mission-wrap p {
text-align: center;
padding: 0 60px;
font-size: 21px;
color: #000;
line-height: 30px;
margin-bottom: 40px;
}
.wpo-mission-wrap .wpo-mission-item {
margin: 30px;
}
.wpo-mission-wrap .theme-btn {
background: #43bc75;
margin-top: 30px;
}
.wpo-mission-wrap .wpo-mission-item .wpo-mission-content {
background: transparent;
padding-bottom: 1px;
}
.home-volunteer-area .img-box {
width: 50%;
}
.home-volunteer-area {
display: flex;
}
.home-volunteer-area .volunteer-text {
width: 50%;
padding: 20px 80px 0;
background: #649e90;
color: #fff;
}
.home-volunteer-area .volunteer-text h3 {
color: #fea501;
font-size: 30px;
font-weight: 400;
}
.home-volunteer-area .volunteer-text .line {
margin: 10px 0;
}
.home-volunteer-area .volunteer-text p {
color: rgb(2, 2, 2);
font-size: 20px;
margin-top: 40px;
margin-bottom: 30px;
}
.charity-event-area {
background: #f2eae8;
}
.charity-event-area .wpo-section-title h2 {
color: #43bc75;
}
.charity-event-area .wpo-section-title span {
color: #fea501;
}
.charity-event-area .wpo-section-title {
margin-bottom: 50px;
}
.charity-event-area .charity-event-text {
padding-left: 20px;
}
.charity-event-area .charity-event-text span {
background: #43bc75;
color: #fff;
font-weight: 600;
padding: 5px 20px;
display: inline-block;
border-radius: 5px;
}
.charity-event-area .charity-event-text h3 {
font-size: 27px;
font-weight: 400;
color: #000;
}
.charity-event-area .charity-event-text ul li {
list-style: none;
background: #fff;
margin-top: 10px;
color: #000;
padding: 7px 15px;
display: inline-block;
}
.charity-event-area .charity-event-text ul li b {
color: #fda504;
font-weight: 600;
}
.charity-event-area .img-box {
position: relative;
}
.charity-event-area .img-box .calender-box {
width: 200px;
text-align: center;
position: absolute;
top: 30px;
background: #43bc75;
color: #fff;
}
.charity-event-area .img-box .calender-box ul li {
font-size: 14px;
list-style: none;
padding: 20px 0;
}
.charity-event-area .img-box .calender-box p {
margin-bottom: 0;
background: #fcad1d;
color: #fff;
padding: 8px 0;
}
.charity-event-area .img-box img {
padding-left: 100px;
}
.presence-area .wpo-section-title h2 {
color: #43bc75;
}
.presence-area .wpo-section-title span {
color: #000;
font-size: 19px;
}
.presence-area .wpo-section-title {
margin-bottom: 40px;
}
.presence-area .presence-text ul li {
font-size: 20px;
color: #000;
list-style: none;
padding: 20px 0;
margin-bottom: 20px;
width: 50%;
}
.presence-area .presence-text ul li b {
font-size: 26px;
}
.wpo-case-area {
background: #f2eae8;
}
.wpo-about-text .wpo-section-title h2 {
line-height: 36px;
}
.learning-kids-page {
background: #f3f3f4;
}
.learning-kids-page .wpo-case-content h2 {
font-size: 22px;
line-height: 28px;
color: #000;
margin-bottom: 0;
}
.learning-kids-page .wpo-case-text-top .stand span {
color: #fea501;
}
.learning-kids-page .progress-section {
padding-top: 10px;
}
.learning-kids-page .wpo-section-title {
margin-bottom: 40px;
}
.subscriptions-bottom {
background: #fff;
}
.subscriptions-page .subscriptions-img img {
margin-bottom: 30px;
}
.subscriptions-page .subscriptions-img h4 {
font-size: 30px;
font-weight: 200;
padding-left: 20px;
margin-top: 22px;
}
.subscriptions-page .subscriptions-text {
padding-left: 0px;
}
.subscriptions-page .subscriptions-text .wpo-section-title {
text-align: left;
margin-bottom: 15px;
}
.subscriptions-page .subscriptions-text .wpo-section-title h2 {
line-height: 45px;
margin-top: 60px;
margin-bottom: 20px;
}
.subscriptions-page .subscriptions-text .wpo-section-title h2 span {
display: inline-block;
}
.subscriptions-bottom .wpo-section-title {
margin-bottom: 40px;
}
.subscriptions-bottom .wpo-section-title span img {
width: 180px;
margin-bottom: 10px;
}
.subscriptions-bottom .wpo-section-title h2 {
color: #43bc75;
font-size: 35px;
}
.subscriptions-bottom .subscriptions-box {
text-align: center;
padding: 0px;
width: 100%;
}
.subscriptions-bottom .subscriptions-box img {
margin-bottom: 10px;
}
.subscriptions-bottom .subscriptions-box p {
font-size: 24px;
font-weight: 600;
}
.subscriptions-bottom .subscriptions-box span {
display: block;
color: #000;
margin-bottom: 15px;
font-weight: 500;
}
.subscriptions-bottom .subscriptions-box .theme-btn {
background: #43bc75;
padding: 7px 15px;
font-weight: 600;
cursor: pointer;
font-size: 18px;
}
.blblock p {
padding: 90px 90px;
font-size: 35px;
color: #000;
line-height: 43px;
position: relative;
margin-bottom: 0px;
}
.blblock p::before {
content: "";
background-image: url(../img/block-1.png);
height: 60px;
width: 60px;
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
top: 60px;
left: 18px;
}
.blblock p::after {
content: "";
background-image: url(../img/block-2.png);
height: 60px;
width: 60px;
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
bottom: 60px;
}
.blblock span {
font-size: 30px;
color: #000;
padding: 0 90px;
display: block;
margin-top: -20px;
}
.wpo-site-header #navbar li .theme-btn {
padding: 15px 10px;
color: #fff !important;
background: #fea501;
margin-top: 6px;
}
#faqs .card-header,
#faqs .card-link,
#faqs .card-link:hover {
background-color: #f2eae8;
text-align: left;
color: #000;
padding: 15px 10px;
}
#faqs .card-body {
padding: 12px 10px;
font-size: 14px;
}
#faqs .card {
width: 100%;
margin-bottom: 20px;
border: none;
background-color: transparent;
border-bottom: 1px solid;
position: relative;
}
#faqs .card p {
position: absolute;
top: 18px;
right: 20px;
font-size: 20px;
color: #000;
-webkit-animation: minus 0.5s;
}
#faqs .card-header .card-link {
font-size: 22px;
}
#faqs .card-body a {
display: block;
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.contributors-page .contributors-box strong {
font-size: 18px;
line-height: 35px;
margin-top: 0;
font-weight: 600;
color: #fea501;
margin-bottom: 5px;
display: block;
white-space: nowrap;
}
.contributors-page .contributors-box p {
margin-bottom: 2px;
}
.contributors-page .contributors-box p span {
margin-right: 5px;
font-weight: 600;
color: #5aa960;
}
.contributors-page .contributors-box img {
width: 120px;
margin-bottom: 10px;
height: 120px;
border-radius: 50%;
}
.contributors-page .contributors-box {
padding: 15px;
text-align: center;
box-shadow: 0 0 5px gray;
border-radius: 10px;
transition: all 0.5s;
margin-bottom: 30px;
position: relative;
overflow: hidden;
height: 270px;
}
.contributors-page .contributors-box-contr {
padding: 15px;
text-align: center;
box-shadow: 0 0 5px gray;
border-radius: 10px;
transition: all 0.5s;
margin-bottom: 30px;
position: relative;
overflow: hidden;
height: 150px;
}
.contributors-page .contributors-box:hover {
box-shadow: 0 7px 10px gray;
}
.section-padding.contributors-page {
padding-bottom: 30px;
}
.home-video-area .video-text {
width: 70%;
margin: 0 auto;
}
.wpo-mission-wrap .wpo-mission-item .wpo-mission-content img {
width: 150px;
border-radius: 50%;
border: 3px solid #43bc75;
box-shadow: 0 4px 7px gray;
margin-bottom: 10px;
margin-top: 0;
}
.footer-social-icon {
text-align: center;
}
.footer-social-icon li {
display: inline;
}
.footer-social-icon li a {
width: 40px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 37px;
font-size: 20px;
color: #fff;
margin-right: 10px;
transition: all 5s;
}
.wpo-about-area .wpo-about-text-inner {
padding-top: 150px;
}
.wpo-about-botom-area h3 {
margin-top: 40px;
}
.wpo-about-botom-area {
padding: 10px 0 40px;
}
.wpo-about-botom-area .line {
margin-left: 0;
margin-bottom: 15px;
}
.gallery-page {
padding: 60px 0;
}
.wemakeline {
background: transparent;
position: relative;
color: #fff;
padding: 20px 0;
margin-top: -100px;
text-align: center; /* new */
left: 50%; /* new */
transform: translateX(-50%); /* new */
}
.wemakeline p {
margin: 0;
color: #fff;
font-size: 30px;
font-weight: 400;
}
.wemakeline p a {
background: #fea501;
color: #fff;
padding: 5px 22px;
margin-left: 15px;
border-radius: 12px;
display: inline-block;
}
.benefit-area {
padding: 50px 0 30px;
}
.benefit-area .benefit-box {
text-align: center;
border: 2px solid #fea501;
padding: 15px;
border-radius: 8px;
position: relative;
overflow: hidden;
height: 183px;
margin-bottom: 30px;
}
.benefit-area .benefit-box .ben-icon {
width: 80px;
height: 80px;
background: #5aa960;
color: #fff;
font-size: 35px;
line-height: 80px;
border-radius: 50%;
font-weight: bolder;
margin: 0 auto 20px;
position: relative;
transition: all 300ms linear;
}
.benefit-area .benefit-box::before {
background: #5aa960;
}
.benefit-area .benefit-box::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-origin: bottom;
transform: scaleY(0);
transition: all 300ms linear;
}
.benefit-area .benefit-box:hover::before {
transform: scaleY(1);
}
.benefit-area .benefit-box p {
position: relative;
transition: all 300ms linear;
margin-bottom: 0;
font-size: 20px;
font-weight: 600;
}
.benefit-area .benefit-box:hover .ben-icon {
background: #fff;
color: #5aa960;
}
.benefit-area .benefit-box:hover p {
color: #fff;
}
.benefit-area .benefit-box:hover a {
color: #000000;
}
.benefit-area .benefit-box:hover lord-icon {
animation-play-state: running;
}
.benefit-area .benefit-box:hover::before lord-icon {
transform: scale(1.2);
opacity: 1;
}
.benefit-area .benefit-box:hover {
transform: scale(1.05);
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
}
.benefit-area .benefit-box::before {
transition: all 500ms linear;
}
.benefit-area .benefit-box:hover::before {
transform: scaleY(1);
transition: all 500ms linear;
}
.benefit-area .wpo-section-title {
margin-bottom: 40px;
}
.benefit-area .wpo-section-title img {
width: 30px;
margin-top: -10px;
}
.benefit-marque h4 {
margin-top: 0;
font-size: 24px;
padding-bottom: 0px;
margin-bottom: 10px;
color: #fff;
font-weight: 600;
}
.benefit-marque .benefit-marque-box {
background: transparent;
padding: 0px;
margin-bottom: 10px;
border-radius: 0px;
color: #fff;
}
.benefit-marque marquee {
height: 120px;
}
.case-btn ul li a span {
color: #000;
}
.free-education-area {
padding: 60px 0;
}
.education-content-box .wpo-section-title span {
display: inline-block; color:#fea501;}
.education-content-box .wpo-section-title h2 {
color: #5caa62;font-size: 30px;
}
.education-content-box p {
font-size: 25px;
line-height: 30px;
}
.education-content-box ul li {
padding: 8px 6px;
background: #fea501;
color: #fff;
border-radius: 10px;
margin-bottom: 10px;
list-style: none;
font-size: 15px;
font-weight: 600;
position: relative;
}
.education-content-box .right-listing ul li {
background: #5caa62;
}
.education-content-box .left-listing ul li::before {
content: "\f178";font: normal normal normal 14px/1 FontAwesome;position: absolute;
right: -20px;
color: #5caa62;
font-size: 25px;
top: 7px;
}
.free-education-area .img-area {
position: relative;
border-radius: 15px;
}
.free-education-area .img-area .out-of-school {
position: absolute;
background: #000000a1;
bottom: 0;
color: #fff;
padding: 15px;
width: 90%;
margin: 0 auto;
text-align: center;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
left: calc(45%-50%);
transition: background-color 0.3s ease, color 0.3s ease;
}
.free-education-area .img-area .out-of-school:hover {
background-color: #ffffff;
color: #000000;
font-weight: bold;
transform: scale(1.1);
transition: transform 0.3s ease;
}
.free-education-area .img-area .out-of-school:hover p {
color: #000000;
font-weight: bold;
}
.free-education-area .img-area .out-of-school p{color: #fff;}
.founder-massage p {
color: #fff;
font-size: 25px;
position: absolute;
bottom: 42px;
text-align: center;
margin-bottom: 0;
width: 92%;
font-size: 1rem;
}
.img-area img {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* add a drop shadow */
transition: all 0.3s ease;
}
.img-area img:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* increase the size of the shadow on hover */
}
.contributors-page .contributors-box .video-icon a {
display: block;
background: #5aa960;
color: #fff;
font-size: 20px;
transition: all 300ms;
}
.contributors-page .contributors-box .video-icon {
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
overflow: hidden;
position: absolute;
right: 55px;
top: 90px;
}
.contributors-page .contributors-box .video-icon a:hover {
background: #fea501;
}
.wpo-blog-slider .owl-nav div {
position: absolute;
left: -70px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: transparent;
transition: all 0.3s;
border: 1px solid #5aa960;
}
.wpo-blog-slider .owl-nav div.owl-next {
right: -70px;
left: auto;
}
.home-blog-area {
background: #f2eae8;
}
.media-page .tab {
overflow: hidden;
border: none;
background-color: transparent;
text-align: center;
color: #000;
font-size: 18px;
font-weight: 600;
margin-bottom: 30px;
}
.media-page .tab button {
background-color: transparent;
float: none;
border: none;
outline: none;
cursor: pointer;
padding: 10px 10px;
transition: 0.3s;
font-size: 18px;
border-radius: 5px;
font-weight: 600;
color: #000;
}
.media-page .tab button:hover {
color: #43bc75;
}
.media-page .tab button.active {
color: #43bc75;
}
.media-page .tabcontent {
display: none;
padding: 0;
border: none;
border-top: none;
}
.media-page .tabcontent.active {
display: block;
}
.media-page .media-box {
margin-bottom: 40px;
box-shadow: 0 0 6px gray;
padding: 10px;
border-radius: 5px;
position: relative;
height: 396px;
}
.media-page .media-box p {
padding: 0 10px;
margin-bottom: 0;
}
.media-page {
padding: 80px 0 40px;
}
.media-page .media-box h4 a {
font-size: 20px;
font-weight: 600;
color: #49be79;
}
.media-page .media-box img {
border-bottom: 1px solid #fea501;
padding-bottom: 13px;
margin-bottom: 5px;
border-radius: 5px 5px 0 0;
height: 250px;
}
.video_view .modal-dialog {
max-width: 800px;
width: 100%;
}
.slide-caption.learnin {
padding: 60px 0 40px;
}
.presence-text ul {
display: flex;
flex-wrap: wrap;
}
.volunteer-img-wrap p strong {
color: #e02224;
}
.volunteer-img-wrap h2 {
margin-top: 0;
font-size: 25px;
color: #e02224;
}
.happiness-video {
margin-top: 0px;
}
.how-work-area {
background: #f2eae8;
}
.how-work-area ul {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.how-work-area ul li {
list-style: none;
background: #43bc75;
color: #fff;
padding: 10px;
width: 15.5%;
margin-right: 15.5px;
align-items: center;
display: inherit;
position: relative;
font-size: 18px;
border-radius: 5px;
transition: all 300ms;
cursor: pointer;
}
.how-work-area ul li:last-child {
margin-right: 0;
}
.how-work-area ul li::before {
content: "";
position: absolute;
height: 40px;
width: 12px;
background: #fea501;
clip-path: polygon(100% 0%, 0% 0, 100% 50%, 0 100%, 0 0, 0% 0%);
right: -12px;
transition: all 300ms;
}
.how-work-area ul li:last-child::before {
display: none;
}
.how-work-area ul li:hover {
background: #fea501;
}
.how-work-area ul li:hover::before {
background: #43bc75;
}
.select-kids-box {
position: relative;
}
.select-kids-box label {
overflow: hidden;
display: block;
position: relative;
padding: 0px;
box-shadow: 0 0 6px gray;
border: 2px solid #8d8c8c;
border-radius: 5px;
margin-bottom: 30px !important;
cursor: pointer;
}
.select-kids-box input {
height: 25px;
z-index: 99;
width: 25px;
display: block;
overflow: hidden;
margin: 0;
position: absolute;
right: 15px;
top: 15px;
}
.select-kids-box label::before {
display: none !important;
}
.select-kids-box input[type="checkbox"]:checked + label {
border: 2px solid #eb9214;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12),
0px 3px 3px rgba(0, 0, 0, 0.14);
}
.select-kids-page form {
margin-top: 30px;
position: relative;
}
.select-kids-page .total-amt {
text-align: center;
background: #43bc75;
width: 100%;
padding: 10px 0;
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
}
.select-kids-page .total-amt p {
margin-bottom: 0;
margin-top: 7px;
font-size: 20px;
font-weight: 600;
}
.select-kids-page .total-amt a {
display: inline-block;
font-size: 18px;
background: #fea501;
padding: 9px 20px;
font-weight: 600;
color: #fff;
margin-bottom: 0px;
border-radius: 5px;
}
.select-kids-page .wpo-donations-details {
margin-top: 30px;
display: none;
}
.select-kids-box label .wpo-case-single {
padding: 0;
}
.select-kids-box label .wpo-case-single .wpo-case-item {
margin: 0;
}
.benefit-marque .benefit-marque-box p {
font-size: 12px;
}
.section-padding.select-kids-page.pt-0 {
padding-top: 0;
}
.gallery-page .list-group.gallery .thumbnail.fancybox img {
width: 100%;
height: 350px;
}
.select-kids-box label .wpo-case-content {
min-height: 180px;
}
.subscriptions-bottom .subscriptions-box.select_dtype input {
display: none;
}
.subscriptions-bottom .subscriptions-box .theme-btn:hover {
background: #fea501;
}
.subscriptions-box.select_dtype input[type="radio"]:checked + label {
border: 2px solid #000;
box-shadow: 0 0 8px gray;
}
.subscriptions-bottom .subscriptions-box.select_dtype label {
width: 100%;
padding: 15px 10px;
border-radius: 7px;
}
.wpo-about-botom-area .img-responsive {
margin-bottom: 15px;
}
.wpo-about-botom-area ul {
padding-left: 20px;
}
.media-page .media-box .img-vicon {
border: none;
padding: 0;
margin: 0;
border-radius: 0;
width: 70px;
position: absolute;
left: 40%;
top: 25%;
height: 70px;
}
.home-blog-area .wpo-event-img img {
height: 250px;
}
.wpo-site-footer .widget-title {
margin-bottom: 30px;
}
.wpo-site-footer ul {
list-style: none;
}
.wpo-site-footer .link-widget ul a {
color: #000;
}
.wpo-site-footer .link-widget ul > li + li {
margin-top: 12px;
}
.wpo-site-footer .widget-title h3 {
font-size: 23px;
font-weight: bold;
color: #000;
margin: 0;
text-transform: capitalize;
position: relative;
}
.video_view .modal-header {
padding-top: 7px;
padding-bottom: 5px;
border-bottom: 0;
}
.video_view .modal-body {
padding-top: 0;
}
.wpo-case-area .wpo-section-title h2 {
font-size: 18px;
}
.mt-50 {
margin-top: 50px;
}
.wpo-event-details-text ul {
padding-left: 15px;
}
.wpo-event-details-text ul li {
margin-bottom: 10px;
}
.info-text span a {
color: #666;
}
.fancybox-nav span {
visibility: visible;
}
.wpo-site-header #navbar li.call-us span {
font-size: 12px;
display: block;
}
.wpo-site-header #navbar li.call-us img {
width: 50px;
float: left;
margin-top: 6px;
}
.wpo-site-header #navbar li.call-us a {
padding: 10px 0;
float: right;
}
.wpo-section-title .right-btn-ab {
position: absolute;
right: 0;
top: 0;
}
.benefit-marque ul {
padding-left: 15px;
}
.happiness-video h3 {
margin-top: 0;
font-size: 24px;
text-align: center;
margin-bottom: 10px;
}
.wpo-section-title h3 {
font-size: 24px;
margin-top: 0;
}
.ttmt spam {
color: #f15e28;
}
.wpo-breadcumb-new-wrap ul {
display: none;
}
.charity-event-area.inner-page {
background: #fff;
}
.charity-event-area.inner-page .charity-event-text ul li {
background: #f2eae8;
}
.financial-page {
padding: 60px 0;
}
.financial-page-btn-area ul li {
list-style: none;
display: block;
margin-bottom: 15px;
}
.financial-page-btn-area ul li a {
background: #fea501;
color: #fff;
display: block;
text-align: center;
padding: 10px 0;
border-radius: 5px;
}
.financial-page-btn-area h4 {
font-size: 21px;
padding-bottom: 10px;
border-bottom: 2px solid #63ae52;
margin-top: 0;
margin-bottom: 20px;
}
.financial-page-btn-area {
padding: 10px 10px;
box-shadow: 0 0 5px gray;
border-radius: 5px;
}
.wpo-section-title.sub-page {
background: #43bc75;
padding: 15px 15px;
border-radius: 5px;
}
.benefit-marque {
background: #43bc75;
padding: 15px 15px;
border-radius: 5px;
}
.benefit-marque ul li {
color: #000;
}
.happiness-video.hwht {
position: relative;
}
.happiness-video.hwht h3 {
font-weight: 600;
}
.wpo-section-title.sub-page h3 {
color: #fff;
font-weight: 600;
}
.cctop {
margin-top: 30px;
text-align: center;
}
.cctop p {
font-size: 20px;
}
.wpo-event-details-area .wpo-event-item img {
max-width: 100%;
}
.charity-event-page .date-box {
margin-top: 6px;
}
.charity-event-page h3 {
margin-top: 0;
}
.sticky-btn {
position: fixed;
top: 15%;
right: 0;
z-index: 99;
transform: rotate(-90deg);
transform-origin: bottom right;
}
.sticky-btn ul li {
list-style: none;
margin: 0 12px;
display: inline-block;
}
.sticky-btn ul li a {
background: #fea501;
padding: 10px 10px;
color: #fff;
font-size: 16px;
border-radius: 5px;
display: inline-block;
}
.learning-kids-page .row {
display: flex;
flex-wrap: wrap;
}
.succes_view .modal-dialog {
width: 400px;
text-align: center;
margin-top: 10%;
}
.succes_view .modal-dialog .modal-body .i-box {
height: 60px;
width: 60px;
text-align: center;
line-height: 60px;
background: red;
color: #fff;
border-radius: 50%;
font-size: 40px;
margin: 0 auto 11px;
}
.succes_view .modal-dialog .modal-body strong {
font-size: 30px;
display: block;
font-weight: 600;
}
.succes_view .modal-dialog .modal-body button {
background: #fea501;
color: #fff;
padding: 6px 15px;
display: inline-block;
border: none;
border-radius: 5px;
}
.state-select-section {
margin-bottom: 40px;
}
.state-select-section form {
display: flex;
flex-wrap: wrap;
width: 50%;
margin: 0 0 0px auto;
}
.state-select-section form .select-box {
width: 70%;
margin-right: 2%;
}
.state-select-section form .input-group-append {
width: 28%;
}
.state-select-section form .input-group-append .theme-btn {
width: 100%;
height: 50px;
padding: 0;
}
.state-select-section form .select-box select {
height: 50px;
border: 1px solid black;
}
.charity-event-page .img-box img {
height: 350px;
width: 100%;
}
.charity-event-page .col-md-6 {
margin-bottom: 40px;
}
.wpo-event-area .wpo-event-item {
margin-bottom: 30px;
}
.select-kids-page form.row {
display: flex;
flex-wrap: wrap;
}
.wpo-team-area .tabcontent.active {
display: block;
}
.wpo-team-area .tabcontent {
display: none;
}
.wpo-team-area .container {
position: relative;
}
.Team-btn-absolute.text-right {
position: absolute;
top: 0;
right: 0;
}
.wpo-team-area.section-padding .tab {
text-align: center;
margin-bottom: 30px;
}
.wpo-team-area.section-padding .tab .tablinks {
background: transparent;
border: 2px solid #fea501;
padding: 10px 15px;
font-size: 16px;
margin: 0 5px;
border-radius: 5px;
}
.wpo-team-area.section-padding .tab .tablinks:hover,
.wpo-team-area.section-padding .tab .tablinks.active {
background: #fea501;
color: #fff;
}
/*-----------------------------------------------------------------
Responsive Css
------------------------------------------------------------------*/
@media (max-width: 767px) {
.wpo-site-header .navigation > .container {
width: 100%;
}
.container > .navbar-header {
margin-right: 0;
margin-left: 0;
}
.sticky-btn ul li a {
font-size: 13px;
padding: 5px 5px;
}
.sticky-btn ul li {
margin: 0 5px;
}
.sticky-btn {
top: 25%;
width: 420px;
}
.slide-caption {
padding-top: 50px;
height: auto;
}
.slide-caption .btns .theme-btn {
font-size: 14px;
}
.wemakeline {
background: #5aa960;
padding: 10px 0;
margin-top: 0;
}
.wemakeline p a {
padding: 3px 10px;
margin-left: 10px;
}
.wemakeline p {
font-size: 20px;
}
.benefit-area .wpo-section-title {
margin-bottom: 20px;
}
.benefit-area {
padding: 30px 0 10px;
}
.benefit-area .benefit-box {
height: auto;
}
.wpo-counter-area .wpo-counter-grids .grid {
width: 50%;
margin-bottom: 25px;
border-right: none;
}
.wpo-counter-area {
padding-bottom: 10px;
}
.wpo-counter-area .wpo-counter-grids {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.wpo-case-wrap .left-c-box p {
margin-top: 0;
font-size: 18px;
}
.wpo-case-wrap .left-c-box {
display: block;
text-align: center;
}
.wpo-case-single {
padding: 0 0;
}
.wpo-case-area {
padding-bottom: 5px;
}
.wpo-about-text {
padding-left: 0;
padding-top: 10px;
}
.wpo-about-text p,
.wpo-about-text-2 p {
font-size: 14px;
line-height: 24px;
text-align: justify;
}
.wpo-about-text .wpo-section-title h2 {
line-height: 30px;
font-size: 20px;
}
.home-volunteer-area .img-box {
width: 100%;
}
.home-volunteer-area {
flex-wrap: wrap;
}
.home-volunteer-area .volunteer-text {
width: 100%;
padding: 10px 15px 15px;
}
.home-volunteer-area .volunteer-text p {
font-size: 14px;
margin-top: 10px;
text-align: justify;
}
.wpo-site-header #navbar li .theme-btn {
text-align: center;
border-radius: 0;
}
.wpo-site-header #navbar li.call-us a {
float: none;
}
.charity-event-area .img-box .calender-box {
width: 120px;
}
.charity-event-area .img-box .calender-box ul li {
padding: 5px 0;
}
.charity-event-area .img-box .calender-box ul li span {
font-size: 14px !important;
}
.charity-event-area .img-box .calender-box p {
padding: 5px 0;
font-size: 14px;
}
.charity-event-area .wpo-section-title {
margin-bottom: 20px;
}
.charity-event-area .img-box img {
padding-left: 80px;
}
.charity-event-area .charity-event-text {
padding-left: 0;
margin-top: 20px;
}
.charity-event-area .charity-event-text h3 {
font-size: 20px;
}
.charity-event-area .charity-event-text p {
text-align: justify;
font-size: 14px;
}
.presence-area .presence-text ul li {
font-size: 16px;
padding: 15px 0;
margin-bottom: 0;
}
.presence-area .img-box iframe {
height: 200px;
}
.wpo-case-area .wpo-section-title span {
font-size: 25px;
}
.wpo-team-area .wpo-section-title {
margin-bottom: 20px;
}
.wpo-team-area.section-padding .col-md-4.text-right {
float: right;
}
.wpo-team-area.section-padding .col-md-8 {
float: left;
}
.wpo-team-content h2 {
font-size: 20px;
}
.presence-area .wpo-section-title {
margin-bottom: 20px;
}
.video_view .modal-dialog {
width: 94%;
margin: 7% auto 0;
}
.video_view .modal-dialog .modal-body embed {
height: 200px;
}
.video_view .modal-dialog .modal-body iframe {
height: 200px;
}
.wpo-site-footer .wpo-lower-footer .col.col-xs-4 {
width: 100%;
text-align: center;
}
.footer-social-icon {
text-align: center;
}
.wpo-site-footer .wpo-lower-footer .col.col-xs-8 {
width: 100%;
float: right;
}
.wpo-site-footer .wpo-lower-footer .copyright a {
margin-right: 1px;
border-right: 1px solid #fff;
padding-right: 3px;
font-size: 20px;
line-height: 15px;
}
.wpo-site-footer .wpo-lower-footer .copyright {
text-align: right;
margin-left: -10px;
margin-right: -10px;
}
.wpo-site-footer .widget-title {
margin-bottom: 15px;
margin-top: 40px;
}
.wpo-site-footer .footer-img-box {
position: relative;
padding-left: 0;
margin-top: 30px;
}
.wpo-site-footer .wpo-upper-footer {
padding: 00px 0 0px;
}
.wpo-site-footer .widget.about-widget p {
text-align: justify;
margin-top: 15px;
margin-bottom: 30px;
font-size: 14px;
}
.wpo-site-footer .widget.about-widget p {
font-size: 14px;
}
.wpo-site-footer .contact-ft ul li {
display: flex;
float: none;
}
.wpo-about-botom-area p {
font-size: 14px;
text-align: justify;
}
.wpo-about-botom-area {
padding: 10px 0 20px;
}
.charity-event-page h3 {
font-size: 20px;
}
.wpo-event-details-text p {
font-size: 14px;
text-align: justify;
}
.charity-event-page .img-box img {
height: auto;
}
.wpo-event-area {
padding-bottom: 30px;
}
.media-page {
padding: 30px 0 10px;
}
.wpo-login-area {
padding: 30px 0;
}
.wpo-accountInfo {
padding: 20px;
min-height: auto;
}
.wpo-accountForm {
padding: 20px 20px;
min-height: auto;
}
.happiness-video.hwht {
margin: 40px 0;
}
.cctop p {
font-size: 16px;
}
.state-select-section form {
width: 100%;
}
.state-select-section {
margin-bottom: 0;
}
.select-kids-page form.row {
display: inherit;
}
.subscriptions-page .subscriptions-text .wpo-section-title h2 {
line-height: 30px;
margin-top: 30px;
margin-bottom: 0;
font-size: 24px;
}
.subscriptions-page .subscriptions-text p {
font-size: 14px;
text-align: justify;
}
.succes_view .modal-dialog {
width: 90%;
margin: 10% auto 0;
}
.learning-kids-page .row {
display: inherit;
}
.contributors-page .contributors-box .video-icon {
right: 90px;
}
.wpo-donate-header h2 {
margin-bottom: 20px;
font-size: 25px;
}
.wpo-donations-amount,
.wpo-donations-details,
.wpo-doanation-payment {
padding: 15px;
margin-bottom: 20px;
}
#faqs .card-header .card-link {
font-size: 16px;
background: transparent;
padding-left: 0;
}
#faqs .card-body {
font-size: 14px;
}
#faqs .card p {
right: 10px;
}
.wpo-contact-form-map .contact-form {
margin-bottom: 30px;
padding: 20px;
}
.wpo-contact-form-map .contact-map {
height: auto;
}
.wpo-contact-form-map .contact-map iframe {
height: 200px;
}
.info-item {
margin-bottom: 30px;
min-height: auto;
}
.wpo-contact-form-map .col-12 {
padding-left: 15px;
padding-right: 15px;
}
.wpo-about-img,
.wpo-about-img-2 {
padding-top: 10px;
}
.wpo-about-area .wpo-about-text-inner {
padding-top: 30px;
}
.wpo-about-area .wpo-about-text-inner p {
font-size: 14px;
text-align: justify;
}
.gallery-page {
padding: 30px 0;
}
.wpo-about-botom-area h2 {
font-size: 20px;
}
.financial-page {
padding: 30px 0;
}
.financial-page p {
font-size: 14px;
text-align: justify;
}
.Team-btn-absolute.text-right {
right: 10px;
}
.wpo-team-area.section-padding .tab .tablinks {
border: 1px solid #fea501;
padding: 5px 5px;
font-size: 13px;
margin: 0 2px;
}
.wpo-blog-slider .owl-nav div.owl-next {
display: block;
left: auto;
right: -70px;
background-color: #5aa960;
}
.wpo-blog-slider .owl-nav div.owl-prev {
display: none;
}
}
@media (max-width: 600px) {
.work-featured-area .logo-slider {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.work-featured-area .logo-box {
width: 50%;
text-align: center;
}
}
/* SF Pro Text */
/* Define more @font-face rules for other font weights and styles as needed */
/* main.css */
/* main.css */
@font-face {
font-family: 'SF Pro Display';
src: url('fonts/SF-Pro-Display-Regular.otf') format('opentype');
font-weight: 400;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Black.woff') format('woff'),
url('/fonts/SF-Pro-Text-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
/* Other CSS rules and styles for your website */
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Black.woff') format('woff'),
url('/fonts/SF-Pro-Text-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-BlackItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Bold.woff') format('woff'),
url('/fonts/SF-Pro-Text-Bold.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-BoldItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-BoldItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Heavy.woff') format('woff'),
url('/fonts/SF-Pro-Text-Heavy.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-HeavyItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-HeavyItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Light.woff') format('woff'),
url('/fonts/SF-Pro-Text-Light.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-LightItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-LightItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Medium.woff') format('woff'),
url('/fonts/SF-Pro-Text-Medium.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-MediumItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-MediumItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Regular.woff') format('woff'),
url('/fonts/SF-Pro-Text-Regular.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-RegularItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-RegularItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Semibold.woff') format('woff'),
url('/fonts/SF-Pro-Text-Semibold.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-SemiboldItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-SemiboldItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Thin.woff') format('woff'),
url('/fonts/SF-Pro-Text-Thin.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-ThinItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-ThinItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-Ultralight.woff') format('woff'),
url('/fonts/SF-Pro-Text-Ultralight.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Text';
src: url('/fonts/SF-Pro-Text-UltralightItalic.woff') format('woff'),
url('/fonts/SF-Pro-Text-UltralightItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
/* SF Pro Text */
/* SF Pro Text Black */
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Black.woff') format('woff'),
url('/fonts/SF-Pro-Display-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-BlackItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Bold.woff') format('woff'),
url('/fonts/SF-Pro-Display-Bold.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-BoldItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-BoldItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Heavy.woff') format('woff'),
url('/fonts/SF-Pro-Display-Heavy.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-HeavyItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-HeavyItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Light.woff') format('woff'),
url('/fonts/SF-Pro-Display-Light.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-LightItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-LightItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Medium.woff') format('woff'),
url('/fonts/SF-Pro-Display-Medium.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-MediumItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-MediumItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Regular.woff') format('woff'),
url('/fonts/SF-Pro-Display-Regular.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-RegularItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-RegularItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Semibold.woff') format('woff'),
url('/fonts/SF-Pro-Display-Semibold.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-SemiboldItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-SemiboldItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Thin.woff') format('woff'),
url('/fonts/SF-Pro-Display-Thin.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-ThinItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-ThinItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-Ultralight.woff') format('woff'),
url('/fonts/SF-Pro-Display-Ultralight.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SF Pro Display';
src: url('/fonts/SF-Pro-Display-UltralightItalic.woff') format('woff'),
url('/fonts/SF-Pro-Display-UltralightItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
/* Define more @font-face rules for other font styles within the SF Pro Display font family as needed */
/* Define more @font-face rules for other font weights and styles as needed */
.left-listing li,
.right-listing li {
transition: all 0.3s ease;
}
.left-listing li:hover,
.right-listing li:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.left-listing ul li {
transition: all 0.3s ease;
}
.left-listing ul li:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.right-listing ul li {
transition: all 0.3s ease;
}
.right-listing ul li:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.fade-in {
opacity: 0;
transition: opacity 0.5s ease;
transition-delay: 0.2s;
}
.animate ul li {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate .fade-in {
opacity: 1;
}
.section.animate ul li {
opacity: 1;
transform: translateY(0);
}
.animate ul li {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate ul li:nth-child(1) {
transition-delay: 0.2s;
}
.animate ul li:nth-child(2) {
transition-delay: 0.4s;
}
.animate ul li:nth-child(3) {
transition-delay: 0.6s;
}
.animate ul li:nth-child(4) {
transition-delay: 0.8s;
}
.animate ul li:nth-child(5) {
transition-delay: 1s;
}
.animate ul li:nth-child(6) {
transition-delay: 1.2s;
}
.animate ul li:nth-child(7) {
transition-delay: 1.4s;
}
.animate ul li:nth-child(8) {
transition-delay: 1.6s;
}
/*----------------------------------------------
end*
-----------------------------------------------*/
/* === Clean and Responsive Heading Styles === */
h1, h2, h3, h4, h5, h6 {
font-family: 'Rubik', 'Open Sans', sans-serif;
color: #000;
font-weight: 700;
letter-spacing: 0.5px;
margin-top: 15px;
margin-bottom: 10px;
line-height: 1.3;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
@media (max-width: 767px) {
h1 { font-size: 1.8rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem; }
h4, h5, h6 { font-size: 1.2rem; }
}