/*
Theme Name: Thames - Portfolio HTML template
Author: eThemeStudio
Support: xuwelkhan@gmail.com
Description: Personal Portfolio Template
Version: 1.0
*/
/* CSS Index
-----------------------------------
1. Theme default css
2. header
3. slider
4. about area
5. about area
6. fun fact area
7. portfolio area
8. experience area
9. skill area
10. price area
11. service area
12. testimonial area
13. brand area
14. contact area
15. blog area
16. footer area
17. extra info css
*/
/* 1. Theme default css
-------------------------------------------------------------- */
/* font css */
@font-face {
font-family: "jost-medium-font";
src: url(../fonts/jost-medium-font/jost-medium.ttf);
}
/* common css */
:root {
--main-color: #01545d;
--primary-color: #25262f;
--secondary-color: #e2ecf6;
--text-color: #4d4d5c;
--meta-text-color: #9b9db1;
--section-bg: #e2ecf6;
--main-border: #bcc7d3;
--swiper-theme-color: #01545d !important;
}
body {
font-family: "jost-medium-font";
font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #2e2e37;
font-weight: 400;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
color: var(--main-color);
}
h2 {
font-size: 72px;
}
h3 {
font-size: 60px;
line-height: 1.16;
}
h4 {
font-size: 30px;
}
h5 {
font-size: 24px;
line-height: 1.5;
}
h6 {
font-size: 21px;
}
p {
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.67;
color: #4d4d5c;
}
span,
input,
img {
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
img {
max-width: 100%;
transition: all 0.3s ease-out 0s;
}
a,
button,
li {
transition: 0.3s;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
a:focus,
button:focus,
.btn:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
}
a:focus,
a:hover,
.footer-menu li a:hover {
color: var(--main-color);
text-decoration: none;
outline: 0 none;
}
*::-moz-selection {
background: #7a7a8a;
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: #7a7a8a;
color: #fff;
text-shadow: none;
}
::selection {
background: #7a7a8a;
color: #fff;
text-shadow: none;
}
.btn:focus {
outline: 0 none;
}
/* button */
.btn {
padding: 14px 40px 13px 40px;
font-size: 16px;
color: #ffffff;
border-radius: 5px;
outline: 0 none;
text-transform: capitalize;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.btn::after {
position: absolute;
content: "";
background: #ffffff;
height: 155px;
left: -75px;
opacity: 0.2;
top: -50px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: 1;
}
.btn:hover::after {
left: 120%;
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover {
color: #ffffff;
}
/* btn css end */
/* common css */
.jostMedium-font-family {
font-family: "jost-medium-font";
}
.openS-font-family {
font-family: "Open Sans", sans-serif;
}
.img-grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.shadow-hover:hover {
box-shadow: 0px 5px 15px 0px rgba(7, 7, 7, 0.06);
}
.cursor-pointer {
cursor: pointer;
}
.rotate {
transition: 0.9s;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 1;
}
.rotate-hover:hover span.rotate,
.rotate-hover:hover a.rotate {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
/* title css */
.title span {
font-size: 18px;
letter-spacing: 7px;
}
.title h2 {
font-size: 60px;
}
/* marquee css start */
.marquee {
display: block;
margin: auto auto;
white-space: nowrap;
overflow: hidden;
min-width: 100%;
height: 100%;
}
.marquee span {
display: inline-block;
padding-left: 0%;
text-transform: uppercase;
white-space: nowrap;
min-width: 100%;
height: 100%;
line-height: 1.1;
font-size: 96px;
animation: marquee1 40s linear infinite;
-webkit-animation: marquee1 40s linear infinite;
}
.marquee2 span {
-webkit-text-stroke: 1px #333;
-webkit-text-fill-color: transparent;
animation: marquee2 40s linear infinite;
-webkit-animation: marquee2 40s linear infinite;
}
@keyframes marquee1 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
@keyframes marquee2 {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
/* marquee css end */
.section-text-color {
color: var(--secondary-color);
}
/* slick-dots css */
.slick-dots {
position: absolute;
left: 80px;
bottom: -80px;
z-index: 11;
}
.slick-dots li {
border: 2px solid transparent;
border-radius: 50%;
width: 20px;
height: 20px;
background: transparent;
margin-right: 15px;
cursor: pointer;
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.slick-dots button {
width: 8px !important;
height: 8px;
background: #bec9ca;
display: block;
text-indent: 1000px;
overflow: hidden;
border: 0;
border-radius: 50%;
margin: 4px auto;
cursor: pointer;
padding: 0;
}
.slick-dots li.slick-active {
border: 2px solid var(--main-color);
}
.slick-dots li.slick-active button {
background: var(--main-color);
}
/* slick-arrow css */
.slick-arrow .l-a,
.slick-arrow .r-a {
position: absolute;
right: 65px;
top: -130px;
width: 42px;
height: 42px;
line-height: 41px;
background: transparent;
color: var(--main-color);
text-align: center;
z-index: 11;
font-size: 18px;
border: 1px solid #c8ccd4;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
}
.slick-arrow .r-a {
left: auto;
right: 15px;
}
.slick-arrow .l-a:hover,
.slick-arrow .r-a:hover {
cursor: pointer;
background: var(--main-color);
color: #fff;
border: 1px solid var(--main-color);
}
.testimonial-active .slick-arrow .l-a,
.testimonial-active .slick-arrow .r-a {
right: auto;
top: auto;
bottom: -80px;
left: 80px;
}
.testimonial-active .slick-arrow .r-a {
left: 132px;
}
/* 2. header
--------------------------------------------------- */
.transparent-header {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 22;
transition: 0.3s;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.body-overlay {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
position: fixed;
top: 0;
z-index: 999;
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.body-overlay.opened {
opacity: 1;
visibility: visible;
}
.sticky-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
}
.logo a {
display: block;
}
.sticky-menu .logo {
margin: 0 0;
}
.sticky-menu img {
max-width: 50%;
}
.header {
padding: 15px 0;
}
.sticky-menu .logo a.header-sticky-logo {
display: block;
}
.sticky-menu .header {
background: #25262f;
-webkit-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
-moz-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.sticky-menu .main-menu ul li>a {
padding: 24px 0;
}
.main-menu ul li {
display: inline-block;
margin-left: 36px;
position: relative;
}
.main-menu ul li>a {
color: #ffffff;
font-size: 18px;
display: inline-block;
text-transform: capitalize;
padding: 53px 0;
position: relative;
}
.main-menu ul li:hover>a,
.main-menu ul li.active a,
.mean-container .mean-nav ul li a:hover {
color: var(--main-color);
}
.main-menu ul li>a:hover::before,
.main-menu ul li>a:hover a.active::before {
background: var(--main-color);
width: 100%;
left: 0;
}
.header-btn a {
padding: 12px 28px 11px 28px;
border: 1px solid var(--main-color);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
font-size: 15px;
}
.header-btn a:hover,
.sticky-menu .header-btn a:hover {
background: var(--main-color);
color: #ffffff;
}
.sticky-menu .header-btn a {
padding: 8px 20px 7px 20px;
}
/* 3. slider
-------------------------------------------------------------- */
.slider-height {
justify-content: space-around;
min-height: 700px;
}
.slider-bg-color {
background: #25262f;
}
.slider-img {
max-height: 100vh;
}
.slider-content .sub-heading {
font-size: 24px;
line-height: 1.3;
letter-spacing: 7px;
font-weight: 400;
}
.slider-content h1 {
font-size: 64px;
line-height: 1.07;
}
.slider-content h2 {
font-size: 24px;
line-height: 2;
}
.slider-content h2 span {
font-size: 36px;
letter-spacing: 0px;
}
span#main {
color: var(--main-color) !important;
}
.slider-social-link {
top: 50%;
transform: translateY(-50%) !important;
-webkit-transform: translateY(-50%) !important;
-moz-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
-o-transform: translateY(-50%) !important;
}
.slider-social-link .social li a {
font-size: 18px;
width: 55px;
margin: 2px 0;
height: 50px;
line-height: 52px;
}
.slider-social-link .social li {
border: 1px solid rgb(204, 211, 217, 0.2);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.slider-social-link .social li:hover {
background: var(--main-color);
border: 1px solid var(--main-color);
}
.slider-img {
margin-right: -50px;
}
/* heartbeat scale effects*/
.slider-img::before {
position: absolute;
content: "";
border-radius: 50%;
background-color: rgb(59, 60, 70);
opacity: 0.529;
left: 5%;
top: 65px;
width: 770px;
height: 761px;
z-index: -1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
animation: heartbeat-middle 5s infinite alternate;
-webkit-animation: heartbeat-middle 5s infinite alternate;
}
/* heartbeat-middle */
@-webkit-keyframes heartbeat-middle {
to {
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
}
}
/* shape css */
.hero-shape1 {
top: 18%;
right: 5%;
}
.hero-shape2 {
bottom: 17%;
right: 12%;
}
.hero-shape3 {
bottom: 8%;
left: 6%;
}
.hero-shape4 {
top: 21%;
left: 47%;
}
/* 4. intro feature area
------------------------------------------------------------- */
.single-intro-feature-content {
box-shadow: 0px 5px 60px 0px rgba(2, 24, 93, 0.08);
padding: 55px 48px 35px 48px;
}
.single-intro-feature-content:hover {
box-shadow: 0px 5px 60px 0px rgba(2, 24, 93, 0.15);
}
.single-intro-feature-content h4 {
font-size: 24px;
}
.intro-feature-text-style {
font-size: 300px;
bottom: -110px;
line-height: 1;
right: -30px;
color: #f0f7fe;
}
.intro-feature-icon {
top: 28%;
left: 7%;
}
/* 5. about area
------------------------------------------------------------- */
.about-img-over::after {
position: absolute;
content: "";
background: #ffffff;
background-image: url(../images/about/about-img-shape.jpg);
width: 65px;
height: 65px;
right: -9%;
top: 137px;
transform: rotate(42deg);
z-index: 11;
}
.about-img-over::before {
position: absolute;
content: "";
width: 45px;
height: 64px;
background: var(--main-color);
right: 55px;
bottom: -32px;
z-index: 111;
}
.about-shape1 {
width: 133px;
height: 134px;
border: 4px solid var(--main-color);
right: -25px;
top: -25px;
}
.about-shape2 {
background: var(--main-color);
width: 91px;
height: 91px;
top: 70px;
left: -12px;
}
.about-download-wrapper {
left: -75px;
bottom: -125px;
}
.d-icon {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.about-info-wrapper {
border-top: 1px solid var(--main-border);
border-bottom: 1px solid var(--main-border);
}
.about-icon {
right: 3%;
top: 5%;
}
.about-text-style {
font-size: 310px;
line-height: 1;
transform: matrix(0, -1, 1, 0, 0, 0);
-moz-transform: matrix(0, -1, 1, 0, 0, 0);
-webkit-transform: matrix(0, -1, 1, 0, 0, 0);
-ms-transform: matrix(0, -1, 1, 0, 0, 0);
bottom: 165px;
right: 68%;
}
.rotate-animation {
animation: rotation 10s infinite linear;
-webkit-animation: rotation 10s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 6. fun fact area
------------------------------------------------------------- */
.fun-fact-bg {
background: #25262f;
}
.fun-fact-content p {
color: #a0a0bb;
}
.single-fact {
padding: 48px 30px;
border: 1px solid rgb(204, 211, 217, 0.2);
}
.single-fact span {
font-size: 72px;
line-height: 0.4;
}
.single-fact span.per {
font-size: 72px;
}
.single-fact h3 {
font-size: 21px;
line-height: 1.5;
}
.fact-style1 {
bottom: 86%;
left: 0;
}
.fact-style2 {
bottom: -75px;
right: -5px;
}
/* 7. portfolio area
-------------------------------------------------------------- */
.single-portfolio {
padding-top: 48px;
padding-bottom: 38px;
}
.port-img {
max-height: 200%;
/* opacity: 0;
visibility: hidden; */
width: 60%;
margin-right: auto;
z-index: 1;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.single-portfolio:hover .port-img {
opacity: 1;
visibility: visible;
transform: rotate(-12deg);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
}
.port-content {
font-size: 25px;
cursor: pointer;
color: var(--main-color);
border: 1px solid var(--main-border);
width: 95px;
height: 95px;
line-height: 95px;
border-radius: 50%;
}
.port-content:hover {
background: var(--main-color);
border: 1px solid var(--main-color);
color: #fff;
}
.single-portfolio h3 {
font-size: 48px;
line-height: 1.2;
}
.award-content h3 {
font-size: 24px;
line-height: 1.3;
}
/* 8. experience area
-------------------------------------------------------------- */
.experience-img {
margin-left: -48%;
}
.experience-ser-icon {
background: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.experience-content li:hover .experience-ser-icon,
.education-content li:hover .experience-ser-icon {
background: transparent;
}
.experience-content li .experience-ser-icon span,
.education-content li .experience-ser-icon span {
color: #fff;
}
.experience-content li:hover .experience-ser-icon span,
.education-content li:hover .experience-ser-icon span {
color: var(--main-color);
}
.experience-ser-icon span {
width: 70px;
height: 70px;
line-height: 70px;
font-size: 35px;
}
.experience-service-text h4 span {
font-size: 15px;
}
.experience-bg-img {
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.experience-service-text h3 {
font-size: 30px;
}
.experience-service-text h4 {
font-size: 18px;
}
/* 9. skill area
-------------------------------------------------------------- */
.single-skill .knob {
color: #2e2e37 !important;
}
.progress-circular h4 {
font-size: 25px;
line-height: 1.23;
}
.skill-text-style {
font-size: 310px;
line-height: 0;
bottom: 60px;
left: -25px;
}
/* 10. price area
-------------------------------------------------------------- */
.single-price:hover {
margin-top: -20px;
}
.price-list li p,
.price-list li span {
font-size: 16px;
}
.price-list li span {
width: 20px;
height: 20px;
line-height: 1.4;
}
.price-list li span.disable {
color: #ccd2d3;
}
.rate {
font-size: 60px;
}
.price-list li {
margin-bottom: 8px;
}
.single-price .btn {
padding: 10px 35px;
}
.single-price p {
font-size: 18px;
}
.single-price h3 {
font-size: 30px;
}
/* 11. service area
-------------------------------------------------------------- */
.single-service {
box-shadow: 0px 5px 90px 0px rgba(2, 24, 93, 0.08);
}
.service-circle.service-small-circle {
width: 36px;
height: 36px;
top: -11px;
left: -14px;
background: #f0f9fa;
}
.service-circle.service-large-circle {
width: 58px;
height: 58px;
bottom: -12px;
right: -12px;
background: #f0f9fa;
}
.single-service:hover .service-circle.service-small-circle {
top: 35px;
left: 48px;
}
.single-service:hover .service-circle.service-large-circle {
bottom: 30px;
right: 32px;
}
.service-text h3 {
font-size: 30px;
}
/* 12. testimonial area
-------------------------------------------------------------- */
.testimonial-text {
font-size: 24px;
line-height: 1.75;
}
.quit {
top: 14px;
}
.quit span {
font-size: 32px;
}
.avatar-info p {
font-size: 16px;
}
.testimonial-img {
width: 132%;
}
.testimonial-bg::before {
position: absolute;
content: "";
background: var(--section-bg);
left: -100%;
top: 0;
bottom: 0;
right: 0;
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.testimonial-bg {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.testimonial-text-style {
right: -20px;
}
/* 13. brand area
-------------------------------------------------------------- */
.brand-active li {
text-align: center;
}
.single-brand img {
display: inline-block;
}
.brand-active li:hover .single-brand-out {
transform: translateY(-100%);
}
.single-brand.single-brand-hover {
position: absolute;
width: 100%;
margin: 0 auto;
top: 110%;
}
.brand-active li:hover .single-brand-hover {
top: 0;
}
/* 14. contact area
-------------------------------------------------------------- */
.contact-icon {
width: 72px;
height: 72px;
line-height: 72px;
border-radius: 50%;
}
.contact-text h4 {
font-size: 24px;
text-align: center;
}
.contact-icon span,
.contact-info input,
.contact-info textarea {
font-size: 18px;
}
.contact-info .massage {
min-height: 200px;
}
.contact-form .form-message.success {
color: green;
}
.contact-form .form-message.error {
color: red;
}
/* map */
.map-wrapper {
width: 100%;
min-height: 340px;
background: #f9f9f9;
border-radius: 10px;
}
/* 15. blog area
-------------------------------------------------------------- */
.blog-meta li span {
font-size: 15px;
}
.single-blog-content h3 {
font-size: 24px;
line-height: 1.3;
}
.blog-img {
overflow: hidden;
}
.single-blog:hover img,
.zoom-img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
.single-blog {
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.blog-img,
.blog-img:hover {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.single-blog-content {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: 0px 5px 15px 0px rgba(7, 7, 7, 0.05);
}
.blog-modal-img img {
border-radius: 30px;
}
/* modal */
.modal-dialog {
max-width: 1180px;
margin: 0 auto;
}
.modal-content h2 {
font-size: 36px;
padding: 50px 0px 20px 0px;
line-height: 1.32;
}
.pro-modal-footer h6 {
font-size: 16px;
}
.meta-wrapper {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.item-meta li {
padding-bottom: 16px;
color: var(--primary-color);
}
.modal-tags li a {
color: var(--meta-text-color);
font-family: "Open Sans", sans-serif;
}
.blog-meta li a,
.blog-modal-wrapper .blog-meta li span {
font-size: 15px;
}
.blog-modal-wrapper .blog-meta li {
display: inline-block;
margin-right: 30px;
}
.blog-meta li {
margin-right: 12px;
}
.blog-meta li:last-child {
margin-right: 0;
}
.item-meta li span {
color: var(--text-color);
font-size: 15px;
}
.modal-body .btn {
padding: 11px 25px 10px 25px;
font-size: 14px;
}
/* 16. footer area
-------------------------------------------------------------- */
.subscribe-info span {
right: 25px;
top: 50%;
transform: translateY(-50%);
}
.social.social-bg li a {
font-size: 38px;
width: 72px;
height: 72px;
line-height: 72px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
/* 17. extra info css
-------------------------------------------------------------- */
#scroll a {
position: fixed;
font-size: 20px;
width: 45px;
height: 45px;
line-height: 45px;
right: -1px;
bottom: 30px;
cursor: pointer;
z-index: 11;
color: #ffffff;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
border-radius: 50%;
}
#scroll a:hover,
#scroll a:focus {
color: #fff;
opacity: 0.9;
}
/* .side-mobile-menu start*/
.side-mobile-menu {
width: 380px;
position: fixed;
left: -125%;
top: 0;
z-index: 9999;
height: 100%;
background: var(--main-color);
transition: all 0.5s ease-out;
overflow: scroll;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.mean-container .mean-nav ul li a {
background: var(--main-color);
color: #ffffff;
border: 0;
font-weight: 400;
padding: 8px 5%;
border-color: transparent;
text-transform: capitalize;
}
.mean-container .mean-nav ul li a:hover {
background: var(--main-color);
color: #fff;
}
.side-mobile-menu.open-menubar {
left: 0;
}
.close-icon span {
font-size: 18px;
color: var(--main-color);
background: #e7e1e1;
width: 36px;
height: 36px;
display: inline-block;
line-height: 37px;
text-align: center;
border-radius: 30px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
}
.close-icon span:hover {
box-shadow: 0px 6px 30px 0px rgba(7, 7, 7, 0.12);
}
.modal-content .close-icon span:hover {
box-shadow: none;
color: #f5f4f4;
background: var(--main-color);
}
.mobile-menubar {
font-size: 20px;
border: 2px solid transparent;
padding: 5px 10px;
border-radius: 3px;
}
.mobile-menubar:focus {
color: var(--main-color);
}
.mean-container .mean-nav {
background: var(--main-color);
}
/* .side-mobile-menu end*/
a.whatsapp {
position: fixed;
font-size: 20px;
width: 45px;
height: 45px;
line-height: 45px;
right: -1px;
bottom: 90px;
cursor: pointer;
z-index: 1055;
color: #ffffff;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
border-radius: 50%;
}
/* portfolio CSS
-------------------------------------------------------------- */
#customersCats {
margin-top: 1.2rem;
height: 80px;
}
.nav-link.active,
.nav-link:focus,
.nav-link:hover {
background-color: transparent;
border-color: transparent;
border-bottom: 3px solid #1aafff;
}
a.nav-link {
color: #333;
}
.desktop_7 * {
font-family: Nunito, sans-serif;
color: #000;
font-size: 1rem;
text-align: center;
}
.desktop_7 .btn:hover {
color: #000;
}
.desktop_7 .text-blk {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
line-height: 25px;
}
.desktop_7 .responsive-container-block {
min-height: 75px;
height: fit-content;
/* width: 100%; */
/* padding-top: 10px; */
/* padding-right: 10px; */
/* padding-bottom: 10px; */
/* padding-left: 10px; */
display: flex;
flex-wrap: wrap;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
justify-content: flex-start;
}
.desktop_7 .responsive-container-block.bigContainer {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}
.desktop_7 .responsive-container-block.Container {
max-width: 980px;
flex-direction: column;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
/* margin-top: 80px; */
margin-right: auto;
/* margin-bottom: 50px; */
margin-left: auto;
}
.desktop_7 .text-blk.headingText {
font-size: 36px;
line-height: 50px;
font-weight: 900;
}
.desktop_7 .text-blk.active {
font-size: 20px;
line-height: 34px;
font-weight: 400;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #03a9f4;
}
.desktop_7 .text-blk.list {
font-size: 12px;
line-height: 34px;
cursor: pointer;
font-weight: 700;
}
.desktop_7 .text-blk.all {
margin-right: 20px;
margin-left: 0px;
}
.desktop_7 .text-blk.list {
margin-left: 0px;
margin-right: 20px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.desktop_7 .text-blk.list.active {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.desktop_7 .squareImg {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
width: 225px;
height: 225px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
.desktop_7 .responsive-container-block.imageContainer {
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.desktop_7 .responsive-container-block.optionsContainer {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
min-height: 0;
}
.desktop_7 .project {
display: inline-block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.desktop_7 button {
cursor: pointer;
}
.desktop_7 img {
cursor: pointer;
}
.desktop_7 img:hover {
transform: scale(1.02);
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
transition-property: all;
}
.desktop_7 .hdImg {
display: none;
}
.desktop_7 .btn-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.desktop_7 .project:hover .btn-box {
display: block;
}
.desktop_7 .imageContainer {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.desktop_7 .project {
position: relative;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
}
.desktop_7 .overlay {
position: fixed;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgba(71, 69, 69, 0.7);
height: 100%;
width: 100%;
max-height: 100%;
top: 0px;
left: 0px;
z-index: 100;
display: none;
}
.desktop_7 .overlay-inner {
top: 50%;
right: 0px;
bottom: 0px;
left: 50%;
transform: translate(-50%, -50%);
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: white;
padding-top: 25px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
position: relative;
opacity: 1;
width: fit-content;
max-width: 50%;
max-height: 85%;
}
.desktop_7 .close {
position: absolute;
top: 3px;
right: 10px;
background-image: none;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
outline-color: initial;
outline-style: initial;
outline-width: 0px;
color: #474545;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: initial;
border-right-style: initial;
border-bottom-style: initial;
border-left-style: initial;
border-top-color: initial;
border-right-color: initial;
border-bottom-color: initial;
border-left-color: initial;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
text-transform: uppercase;
letter-spacing: 2px;
}
.desktop_7 .overlay-inner .hdImgs {
width: fit-content;
height: calc(85% - 55px);
/* display: flex; */
}
.desktop_7 .overlay-inner img {
max-height: 100%;
max-width: 100%;
transform: none;
}
.desktop_7 .squareImg.one {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.desktop_7 .squareImg.two {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.desktop_7 .squareImg.three {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.desktop_7 .squareImg.four {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.desktop_7 .squareImg.five {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
@media (max-width: 1024px) {
.desktop_7 .Container {
width: 690px;
}
.desktop_7 .squareImg {
width: 170px;
height: 170px;
}
.desktop_7 .squareImg.one {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .squareImg.two {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .squareImg.three {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .squareImg.four {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .squareImg.five {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .overlay-inner {
/* margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px; */
padding-top: 25px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
max-width: 80%;
}
.desktop_7 .close {
font-size: 14px;
top: 2px;
right: 5px;
}
.desktop_7 .overlay {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}
}
@media (max-width: 768px) {
.desktop_7 .squareImg {
width: 225px;
height: 225px;
}
.desktop_7 .responsive-container-block.Container {
max-width: 450px;
}
.desktop_7 .responsive-container-block.optionsContainer {
max-width: 380px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.desktop_7 .text-blk.list {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.desktop_7 .text-blk.list.all.active {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.desktop_7 .text-blk.headingText {
text-align: center;
}
.desktop_7 .text-blk.list {
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.desktop_7 .text-blk.list.all.active {
margin-top: 0px;
margin-right: 14.4219px;
margin-bottom: 10px;
margin-left: 14.4219px;
}
.desktop_7 .responsive-container-block.bigContainer {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
}
@media (max-width: 500px) {
.desktop_7 .text-blk.list.all.active {
font-size: 12px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;
line-height: 34px;
}
.desktop_7 .text-blk.list {
font-size: 12px;
}
.desktop_7 .responsive-container-block.optionsContainer {
min-height: auto;
}
.desktop_7 .responsive-container-block.imageContainer {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
.desktop_7 .responsive-container-block.optionsContainer {
/* max-width: 330px; */
margin-top: 0px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.desktop_7 .text-blk.list.all.active {
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.desktop_7 .text-blk.list {
font-size: 12px;
margin-top: 0px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.desktop_7 .squareImg {
width: 100%;
height: 25%;
}
.desktop_7 .project {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
width: 100%;
height: 25%;
}
.desktop_7 .overlay-inner {
/* margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto; */
padding-top: 25px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
max-width: 100%;
}
.desktop_7 .overlay {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .responsive-container-block.bigContainer {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .overlay-inner hdImgs {
width: 90%;
}
}
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap');
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.wk-desk-1 {
width: 8.333333%;
}
.wk-desk-2 {
width: 16.666667%;
}
.wk-desk-3 {
width: 25%;
}
.wk-desk-4 {
width: 33.333333%;
}
.wk-desk-5 {
width: 41.666667%;
}
.wk-desk-6 {
width: 50%;
}
.wk-desk-7 {
width: 58.333333%;
}
.wk-desk-8 {
width: 66.666667%;
}
.wk-desk-9 {
width: 75%;
}
.wk-desk-10 {
width: 83.333333%;
}
.wk-desk-11 {
width: 91.666667%;
}
.wk-desk-12 {
width: 100%;
}
@media (max-width: 1024px) {
.wk-ipadp-1 {
width: 8.333333%;
}
.wk-ipadp-2 {
width: 16.666667%;
}
.wk-ipadp-3 {
width: 25%;
}
.wk-ipadp-4 {
width: 33.333333%;
}
.wk-ipadp-5 {
width: 41.666667%;
}
.wk-ipadp-6 {
width: 50%;
}
.wk-ipadp-7 {
width: 58.333333%;
}
.wk-ipadp-8 {
width: 66.666667%;
}
.wk-ipadp-9 {
width: 75%;
}
.wk-ipadp-10 {
width: 83.333333%;
}
.wk-ipadp-11 {
width: 91.666667%;
}
.wk-ipadp-12 {
width: 100%;
}
}
@media (max-width: 768px) {
.wk-tab-1 {
width: 8.333333%;
}
.wk-tab-2 {
width: 16.666667%;
}
.wk-tab-3 {
width: 25%;
}
.wk-tab-4 {
width: 33.333333%;
}
.wk-tab-5 {
width: 41.666667%;
}
.wk-tab-6 {
width: 50%;
}
.wk-tab-7 {
width: 58.333333%;
}
.wk-tab-8 {
width: 66.666667%;
}
.wk-tab-9 {
width: 75%;
}
.wk-tab-10 {
width: 83.333333%;
}
.wk-tab-11 {
width: 91.666667%;
}
.wk-tab-12 {
width: 100%;
}
}
@media (max-width: 500px) {
.wk-mobile-1 {
width: 8.333333%;
}
.wk-mobile-2 {
width: 16.666667%;
}
.wk-mobile-3 {
width: 25%;
}
.wk-mobile-4 {
width: 33.333333%;
}
.wk-mobile-5 {
width: 41.666667%;
}
.wk-mobile-6 {
width: 50%;
}
.wk-mobile-7 {
width: 58.333333%;
}
.wk-mobile-8 {
width: 66.666667%;
}
.wk-mobile-9 {
width: 75%;
}
.wk-mobile-10 {
width: 83.333333%;
}
.wk-mobile-11 {
width: 91.666667%;
}
.wk-mobile-12 {
width: 100%;
}
}
.about-img {
width: 80%;
}
.blog-modal-img {
text-align: -webkit-center;
}
.brand-active .slick-slide img {
max-width: 150px;
/* Adjust this value as needed */
height: auto;
margin: 0 auto;
object-fit: contain;
}
.clients-item-height {
max-width: 12%;
}
/* Responsive image sizes */
@media (max-width: 1025px) {
.brand-active .slick-slide img {
max-width: 120px;
}
.clients-item-height {
max-width: 50%;
}
}
@media (max-width: 991px) {
.brand-active .slick-slide img {
max-width: 120px;
}
.clients-item-height {
max-width: 25%;
}
}
@media (max-width: 767px) {
.brand-active .slick-slide img {
max-width: 120px;
}
.clients-item-height {
max-width: 50%;
}
}
@media (max-width: 480px) {
.brand-active .slick-slide img {
max-width: 120px;
}
.clients-item-height {
max-width: 50%;
}
}
.swiper-container {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-wrapper {
display: flex;
align-items: center;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
height: auto;
/* السماح بارتفاع ديناميكي */
text-align: center;
border-radius: 8px !important;
}
.facebook-reel {
width: 320px;
height: 550px;
border: none;
overflow: hidden;
border-radius: 8px;
}
.fb-video {
width: 100%;
/* Make videos responsive */
height: auto;
border-radius: 8px;
}
@media (min-width: 1025px) {
.fb-video {
width: 400px;
/* Desktop video width */
}
}
@media (max-width: 1024px) and (min-width: 768px) {
.fb-video {
width: 300px;
/* Tablet video width */
}
}
@media (max-width: 767px) {
.fb-video {
width: 500px;
/* Mobile video width */
height: 550px;
}
}
.k-footer {
background: #25262f;
}
.k-footer a {
color: #0056b3;
text-decoration: underline;
}
.k-footer a:hover {
color: #0056b3;
text-decoration: underline;
}
.k-footer p,
h4 {
color: #f0f2f5;
font-weight: 400;
}
.brand-slider img {
max-width: 100%;
height: auto;
}
/*
Theme Name: Thames - Portfolio HTML template
Author: eThemeStudio
Support: xuwelkhan@gmail.com
Description: Personal Portfolio Template
Version: 1.0
*/
/* CSS Index
-----------------------------------
1. Theme default css
2. header
3. slider
4. about area
5. about area
6. fun fact area
7. portfolio area
8. experience area
9. skill area
10. price area
11. service area
12. testimonial area
13. brand area
14. contact area
15. blog area
16. footer area
17. extra info css
*/
/* 1. Theme default css
-------------------------------------------------------------- */
/* font css */
@font-face {
font-family: "jost-medium-font";
src: url(../fonts/jost-medium-font/jost-medium.ttf);
}
/* common css */
:root {
--main-color: #01545d;
--primary-color: #25262f;
--secondary-color: #e2ecf6;
--text-color: #4d4d5c;
--meta-text-color: #9b9db1;
--section-bg: #e2ecf6;
--main-border: #bcc7d3;
--swiper-theme-color: #01545d !important;
}
body {
font-family: "jost-medium-font";
font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #2e2e37;
font-weight: 400;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
color: var(--main-color);
}
h2 {
font-size: 72px;
}
h3 {
font-size: 60px;
line-height: 1.16;
}
h4 {
font-size: 30px;
}
h5 {
font-size: 24px;
line-height: 1.5;
}
h6 {
font-size: 21px;
}
p {
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.67;
color: #4d4d5c;
}
span,
input,
img {
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
img {
max-width: 100%;
transition: all 0.3s ease-out 0s;
}
a,
button,
li {
transition: 0.3s;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
a:focus,
button:focus,
.btn:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
}
a:focus,
a:hover,
.footer-menu li a:hover {
color: var(--main-color);
text-decoration: none;
outline: 0 none;
}
*::-moz-selection {
background: #7a7a8a;
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: #7a7a8a;
color: #fff;
text-shadow: none;
}
::selection {
background: #7a7a8a;
color: #fff;
text-shadow: none;
}
.btn:focus {
outline: 0 none;
}
/* button */
.btn {
padding: 14px 40px 13px 40px;
font-size: 16px;
color: #ffffff;
border-radius: 5px;
outline: 0 none;
text-transform: capitalize;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.btn::after {
position: absolute;
content: "";
background: #ffffff;
height: 155px;
left: -75px;
opacity: 0.2;
top: -50px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: 1;
}
.btn:hover::after {
left: 120%;
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover {
color: #ffffff;
}
/* btn css end */
/* common css */
.jostMedium-font-family {
font-family: "jost-medium-font";
}
.openS-font-family {
font-family: "Open Sans", sans-serif;
}
.img-grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.shadow-hover:hover {
box-shadow: 0px 5px 15px 0px rgba(7, 7, 7, 0.06);
}
.cursor-pointer {
cursor: pointer;
}
.rotate {
transition: 0.9s;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 1;
}
.rotate-hover:hover span.rotate,
.rotate-hover:hover a.rotate {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
/* title css */
.title span {
font-size: 18px;
letter-spacing: 7px;
}
.title h2 {
font-size: 60px;
}
/* marquee css start */
.marquee {
display: block;
margin: auto auto;
white-space: nowrap;
overflow: hidden;
min-width: 100%;
height: 100%;
}
.marquee span {
display: inline-block;
padding-left: 0%;
text-transform: uppercase;
white-space: nowrap;
min-width: 100%;
height: 100%;
line-height: 1.1;
font-size: 96px;
animation: marquee1 20s linear infinite;
-webkit-animation: marquee1 20s linear infinite;
}
.marquee2 span {
-webkit-text-stroke: 1px #333;
-webkit-text-fill-color: transparent;
animation: marquee2 20s linear infinite;
-webkit-animation: marquee2 20s linear infinite;
}
@keyframes marquee1 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
@keyframes marquee2 {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
/* marquee css end */
.section-text-color {
color: var(--secondary-color);
}
/* slick-dots css */
.slick-dots {
position: absolute;
left: 80px;
bottom: -80px;
z-index: 11;
}
.slick-dots li {
border: 2px solid transparent;
border-radius: 50%;
width: 20px;
height: 20px;
background: transparent;
margin-right: 15px;
cursor: pointer;
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.slick-dots button {
width: 8px !important;
height: 8px;
background: #bec9ca;
display: block;
text-indent: 1000px;
overflow: hidden;
border: 0;
border-radius: 50%;
margin: 4px auto;
cursor: pointer;
padding: 0;
}
.slick-dots li.slick-active {
border: 2px solid var(--main-color);
}
.slick-dots li.slick-active button {
background: var(--main-color);
}
/* slick-arrow css */
.slick-arrow .l-a,
.slick-arrow .r-a {
position: absolute;
right: 65px;
top: -130px;
width: 42px;
height: 42px;
line-height: 41px;
background: transparent;
color: var(--main-color);
text-align: center;
z-index: 11;
font-size: 18px;
border: 1px solid #c8ccd4;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
}
.slick-arrow .r-a {
left: auto;
right: 15px;
}
.slick-arrow .l-a:hover,
.slick-arrow .r-a:hover {
cursor: pointer;
background: var(--main-color);
color: #fff;
border: 1px solid var(--main-color);
}
.testimonial-active .slick-arrow .l-a,
.testimonial-active .slick-arrow .r-a {
right: auto;
top: auto;
bottom: -80px;
left: 80px;
}
.testimonial-active .slick-arrow .r-a {
left: 132px;
}
/* 2. header
--------------------------------------------------- */
.transparent-header {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 22;
transition: 0.3s;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.body-overlay {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
position: fixed;
top: 0;
z-index: 999;
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.body-overlay.opened {
opacity: 1;
visibility: visible;
}
.sticky-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
}
.logo a {
display: block;
}
.sticky-menu .logo {
margin: 0 0;
}
.sticky-menu img {
max-width: 50%;
}
.header {
padding: 15px 0;
}
.sticky-menu .logo a.header-sticky-logo {
display: block;
}
.sticky-menu .header {
background: #25262f;
-webkit-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
-moz-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.sticky-menu .main-menu ul li>a {
padding: 24px 0;
}
.main-menu ul li {
display: inline-block;
margin-left: 36px;
position: relative;
}
.main-menu ul li>a {
color: #ffffff;
font-size: 18px;
display: inline-block;
text-transform: capitalize;
padding: 53px 0;
position: relative;
}
.main-menu ul li:hover>a,
.main-menu ul li.active a,
.mean-container .mean-nav ul li a:hover {
color: var(--main-color);
}
.main-menu ul li>a:hover::before,
.main-menu ul li>a:hover a.active::before {
background: var(--main-color);
width: 100%;
left: 0;
}
.header-btn a {
padding: 12px 28px 11px 28px;
border: 1px solid var(--main-color);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
font-size: 15px;
}
.header-btn a:hover,
.sticky-menu .header-btn a:hover {
background: var(--main-color);
color: #ffffff;
}
.sticky-menu .header-btn a {
padding: 8px 20px 7px 20px;
}
/* 3. slider
-------------------------------------------------------------- */
.slider-height {
min-height: 700px;
}
.slider-bg-color {
background: #25262f;
}
.slider-img {
max-height: 100vh;
}
.slider-content .sub-heading {
font-size: 24px;
line-height: 1.3;
letter-spacing: 7px;
font-weight: 400;
}
.slider-content h1 {
font-size: 64px;
line-height: 1.07;
}
.slider-content h2 {
font-size: 24px;
line-height: 2;
}
.slider-content h2 span {
font-size: 36px;
letter-spacing: 0px;
}
span#main {
color: var(--main-color) !important;
}
.slider-social-link {
top: 50%;
transform: translateY(-50%) !important;
-webkit-transform: translateY(-50%) !important;
-moz-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
-o-transform: translateY(-50%) !important;
}
.slider-social-link .social li a {
font-size: 18px;
width: 55px;
margin: 2px 0;
height: 50px;
line-height: 52px;
}
.slider-social-link .social li {
border: 1px solid rgb(204, 211, 217, 0.2);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.slider-social-link .social li:hover {
background: var(--main-color);
border: 1px solid var(--main-color);
}
.slider-img {
margin-right: -50px;
}
/* heartbeat scale effects*/
.slider-img::before {
position: absolute;
content: "";
border-radius: 50%;
background-color: rgb(59, 60, 70);
opacity: 0.529;
left: 5%;
top: 65px;
width: 770px;
height: 761px;
z-index: -1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
animation: heartbeat-middle 5s infinite alternate;
-webkit-animation: heartbeat-middle 5s infinite alternate;
}
/* heartbeat-middle */
@-webkit-keyframes heartbeat-middle {
to {
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
}
}
/* shape css */
.hero-shape1 {
top: 18%;
right: 5%;
}
.hero-shape2 {
bottom: 17%;
right: 12%;
}
.hero-shape3 {
bottom: 8%;
left: 6%;
}
.hero-shape4 {
top: 21%;
left: 47%;
}
/* 4. intro feature area
------------------------------------------------------------- */
.single-intro-feature-content {
box-shadow: 0px 5px 60px 0px rgba(2, 24, 93, 0.08);
padding: 55px 48px 35px 48px;
}
.single-intro-feature-content:hover {
box-shadow: 0px 5px 60px 0px rgba(2, 24, 93, 0.15);
}
.single-intro-feature-content h4 {
font-size: 24px;
}
.intro-feature-text-style {
font-size: 300px;
bottom: -110px;
line-height: 1;
right: -30px;
color: #f0f7fe;
}
.intro-feature-icon {
top: 28%;
left: 7%;
}
/* 5. about area
------------------------------------------------------------- */
.about-img-over::after {
position: absolute;
content: "";
background: #ffffff;
background-image: url(../images/about/about-img-shape.jpg);
width: 65px;
height: 65px;
right: -9%;
top: 137px;
transform: rotate(42deg);
z-index: 11;
}
.about-img-over::before {
position: absolute;
content: "";
width: 45px;
height: 64px;
background: var(--main-color);
right: 55px;
bottom: -32px;
z-index: 111;
}
.about-shape1 {
width: 133px;
height: 134px;
border: 4px solid var(--main-color);
right: -25px;
top: -25px;
}
.about-shape2 {
background: var(--main-color);
width: 91px;
height: 91px;
top: 70px;
left: -12px;
}
.about-download-wrapper {
left: -75px;
bottom: -125px;
}
.d-icon {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.about-info-wrapper {
border-top: 1px solid var(--main-border);
border-bottom: 1px solid var(--main-border);
}
.about-icon {
right: 3%;
top: 5%;
}
.about-text-style {
font-size: 310px;
line-height: 1;
transform: matrix(0, -1, 1, 0, 0, 0);
-moz-transform: matrix(0, -1, 1, 0, 0, 0);
-webkit-transform: matrix(0, -1, 1, 0, 0, 0);
-ms-transform: matrix(0, -1, 1, 0, 0, 0);
bottom: 165px;
right: 68%;
}
.rotate-animation {
animation: rotation 10s infinite linear;
-webkit-animation: rotation 10s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 6. fun fact area
------------------------------------------------------------- */
.fun-fact-bg {
background: #25262f;
}
.fun-fact-content p {
color: #a0a0bb;
}
.single-fact {
padding: 48px 30px;
border: 1px solid rgb(204, 211, 217, 0.2);
}
.single-fact span {
font-size: 72px;
line-height: 0.4;
}
.single-fact span.per {
font-size: 72px;
}
.single-fact h3 {
font-size: 21px;
line-height: 1.5;
}
.fact-style1 {
bottom: 86%;
left: 0;
}
.fact-style2 {
bottom: -75px;
right: -5px;
}
/* 7. portfolio area
-------------------------------------------------------------- */
.single-portfolio {
padding-top: 48px;
padding-bottom: 38px;
}
.port-img {
max-height: 200%;
/* opacity: 0;
visibility: hidden; */
width: 60%;
margin-right: auto;
z-index: 1;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.single-portfolio:hover .port-img {
opacity: 1;
visibility: visible;
transform: rotate(-12deg);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
}
.port-content {
font-size: 25px;
cursor: pointer;
color: var(--main-color);
border: 1px solid var(--main-border);
width: 95px;
height: 95px;
line-height: 95px;
border-radius: 50%;
}
.port-content:hover {
background: var(--main-color);
border: 1px solid var(--main-color);
color: #fff;
}
.single-portfolio h3 {
font-size: 48px;
line-height: 1.2;
}
.award-content h3 {
font-size: 24px;
line-height: 1.3;
}
/* 8. experience area
-------------------------------------------------------------- */
.experience-img {
margin-left: -48%;
}
.experience-ser-icon {
background: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.experience-content li:hover .experience-ser-icon,
.education-content li:hover .experience-ser-icon {
background: transparent;
}
.experience-content li .experience-ser-icon span,
.education-content li .experience-ser-icon span {
color: #fff;
}
.experience-content li:hover .experience-ser-icon span,
.education-content li:hover .experience-ser-icon span {
color: var(--main-color);
}
.experience-ser-icon span {
width: 70px;
height: 70px;
line-height: 70px;
font-size: 35px;
}
.experience-service-text h4 span {
font-size: 15px;
}
.experience-bg-img {
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.experience-service-text h3 {
font-size: 30px;
}
.experience-service-text h4 {
font-size: 18px;
}
/* 9. skill area
-------------------------------------------------------------- */
.single-skill .knob {
color: #2e2e37 !important;
}
.progress-circular h4 {
font-size: 25px;
line-height: 1.23;
}
.skill-text-style {
font-size: 310px;
line-height: 0;
bottom: 60px;
left: -25px;
}
/* 10. price area
-------------------------------------------------------------- */
.single-price:hover {
margin-top: -20px;
}
.price-list li p,
.price-list li span {
font-size: 16px;
}
.price-list li span {
width: 20px;
height: 20px;
line-height: 1.4;
}
.price-list li span.disable {
color: #ccd2d3;
}
.rate {
font-size: 60px;
}
.price-list li {
margin-bottom: 8px;
}
.single-price .btn {
padding: 10px 35px;
}
.single-price p {
font-size: 18px;
}
.single-price h3 {
font-size: 30px;
}
/* 11. service area
-------------------------------------------------------------- */
.single-service {
box-shadow: 0px 5px 90px 0px rgba(2, 24, 93, 0.08);
}
.service-circle.service-small-circle {
width: 36px;
height: 36px;
top: -11px;
left: -14px;
background: #f0f9fa;
}
.service-circle.service-large-circle {
width: 58px;
height: 58px;
bottom: -12px;
right: -12px;
background: #f0f9fa;
}
.single-service:hover .service-circle.service-small-circle {
top: 35px;
left: 48px;
}
.single-service:hover .service-circle.service-large-circle {
bottom: 30px;
right: 32px;
}
.service-text h3 {
font-size: 30px;
}
/* 12. testimonial area
-------------------------------------------------------------- */
.testimonial-text {
font-size: 24px;
line-height: 1.75;
}
.quit {
top: 14px;
}
.quit span {
font-size: 32px;
}
.avatar-info p {
font-size: 16px;
}
.testimonial-img {
width: 132%;
}
.testimonial-bg::before {
position: absolute;
content: "";
background: var(--section-bg);
left: -100%;
top: 0;
bottom: 0;
right: 0;
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.testimonial-bg {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.testimonial-text-style {
right: -20px;
}
/* 13. brand area
-------------------------------------------------------------- */
.brand-active li {
text-align: center;
}
.single-brand img {
display: inline-block;
}
.brand-active li:hover .single-brand-out {
transform: translateY(-100%);
}
.single-brand.single-brand-hover {
position: absolute;
width: 100%;
margin: 0 auto;
top: 110%;
}
.brand-active li:hover .single-brand-hover {
top: 0;
}
/* 14. contact area
-------------------------------------------------------------- */
.contact-icon {
width: 72px;
height: 72px;
line-height: 72px;
border-radius: 50%;
}
.contact-text h4 {
font-size: 24px;
text-align: center;
}
.contact-icon span,
.contact-info input,
.contact-info textarea {
font-size: 18px;
}
.contact-info .massage {
min-height: 200px;
}
.contact-form .form-message.success {
color: green;
}
.contact-form .form-message.error {
color: red;
}
/* map */
.map-wrapper {
width: 100%;
min-height: 340px;
background: #f9f9f9;
border-radius: 10px;
}
/* 15. blog area
-------------------------------------------------------------- */
.blog-meta li span {
font-size: 15px;
}
.single-blog-content h3 {
font-size: 24px;
line-height: 1.3;
}
.blog-img {
overflow: hidden;
}
.single-blog:hover img,
.zoom-img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
.single-blog {
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.blog-img,
.blog-img:hover {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.single-blog-content {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: 0px 5px 15px 0px rgba(7, 7, 7, 0.05);
}
.blog-modal-img img {
border-radius: 30px;
}
/* modal */
.modal-dialog {
max-width: 1180px;
margin: 0 auto;
}
.modal-content h2 {
font-size: 36px;
padding: 50px 0px 20px 0px;
line-height: 1.32;
}
.pro-modal-footer h6 {
font-size: 16px;
}
.meta-wrapper {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.item-meta li {
padding-bottom: 16px;
color: var(--primary-color);
}
.modal-tags li a {
color: var(--meta-text-color);
font-family: "Open Sans", sans-serif;
}
.blog-meta li a,
.blog-modal-wrapper .blog-meta li span {
font-size: 15px;
}
.blog-modal-wrapper .blog-meta li {
display: inline-block;
margin-right: 30px;
}
.blog-meta li {
margin-right: 12px;
}
.blog-meta li:last-child {
margin-right: 0;
}
.item-meta li span {
color: var(--text-color);
font-size: 15px;
}
.modal-body .btn {
padding: 11px 25px 10px 25px;
font-size: 14px;
}
/* 16. footer area
-------------------------------------------------------------- */
.subscribe-info span {
right: 25px;
top: 50%;
transform: translateY(-50%);
}
.social.social-bg li a {
font-size: 38px;
width: 72px;
height: 72px;
line-height: 72px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
/* 17. extra info css
-------------------------------------------------------------- */
#scroll a {
position: fixed;
font-size: 20px;
width: 45px;
height: 45px;
line-height: 45px;
right: -1px;
bottom: 30px;
cursor: pointer;
z-index: 11;
color: #ffffff;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
border-radius: 50%;
}
#scroll a:hover,
#scroll a:focus {
color: #fff;
opacity: 0.9;
}
/* .side-mobile-menu start*/
.side-mobile-menu {
width: 380px;
position: fixed;
left: -125%;
top: 0;
z-index: 9999;
height: 100%;
background: var(--main-color);
transition: all 0.5s ease-out;
overflow: scroll;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.mean-container .mean-nav ul li a {
background: var(--main-color);
color: #ffffff;
border: 0;
font-weight: 400;
padding: 8px 5%;
border-color: transparent;
text-transform: capitalize;
}
.mean-container .mean-nav ul li a:hover {
background: var(--main-color);
color: #fff;
}
.side-mobile-menu.open-menubar {
left: 0;
}
.close-icon span {
font-size: 18px;
color: var(--main-color);
background: #e7e1e1;
width: 36px;
height: 36px;
display: inline-block;
line-height: 37px;
text-align: center;
border-radius: 30px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
}
.close-icon span:hover {
box-shadow: 0px 6px 30px 0px rgba(7, 7, 7, 0.12);
}
.modal-content .close-icon span:hover {
box-shadow: none;
color: #f5f4f4;
background: var(--main-color);
}
.mobile-menubar {
font-size: 20px;
border: 2px solid transparent;
padding: 5px 10px;
border-radius: 3px;
}
.mobile-menubar:focus {
color: var(--main-color);
}
.mean-container .mean-nav {
background: var(--main-color);
}
/* .side-mobile-menu end*/
a.whatsapp {
position: fixed;
font-size: 20px;
width: 45px;
height: 45px;
line-height: 45px;
right: -1px;
bottom: 90px;
cursor: pointer;
z-index: 1055;
color: #ffffff;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
border-radius: 50%;
}
/* portfolio CSS
-------------------------------------------------------------- */
#customersCats {
margin-top: 1.2rem;
height: 80px;
}
.nav-link.active,
.nav-link:focus,
.nav-link:hover {
background-color: transparent;
border-color: transparent;
border-bottom: 3px solid #1aafff;
}
a.nav-link {
color: #333;
}
.desktop_7 * {
font-family: Nunito, sans-serif;
color: #000;
font-size: 1rem;
text-align: center;
}
.desktop_7 .btn:hover {
color: #000;
}
.desktop_7 .text-blk {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
line-height: 25px;
}
.desktop_7 .responsive-container-block {
min-height: 75px;
height: fit-content;
/* width: 100%; */
/* padding-top: 10px; */
/* padding-right: 10px; */
/* padding-bottom: 10px; */
/* padding-left: 10px; */
display: flex;
flex-wrap: wrap;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
justify-content: flex-start;
}
.desktop_7 .responsive-container-block.bigContainer {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}
.desktop_7 .responsive-container-block.Container {
max-width: 980px;
flex-direction: column;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
/* margin-top: 80px; */
margin-right: auto;
/* margin-bottom: 50px; */
margin-left: auto;
}
.desktop_7 .text-blk.headingText {
font-size: 36px;
line-height: 50px;
font-weight: 900;
}
.desktop_7 .text-blk.active {
font-size: 20px;
line-height: 34px;
font-weight: 400;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #03a9f4;
}
.desktop_7 .text-blk.list {
font-size: 12px;
line-height: 34px;
cursor: pointer;
font-weight: 700;
}
.desktop_7 .text-blk.all {
margin-right: 20px;
margin-left: 0px;
}
.desktop_7 .text-blk.list {
margin-left: 0px;
margin-right: 20px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.desktop_7 .text-blk.list.active {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.desktop_7 .squareImg {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
width: 225px;
height: 225px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
.desktop_7 .responsive-container-block.imageContainer {
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.desktop_7 .responsive-container-block.optionsContainer {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
min-height: 0;
}
.desktop_7 .project {
display: inline-block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.desktop_7 button {
cursor: pointer;
}
.desktop_7 img {
cursor: pointer;
}
.desktop_7 img:hover {
transform: scale(1.02);
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
transition-property: all;
}
.desktop_7 .hdImg {
display: none;
}
.desktop_7 .btn-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.desktop_7 .project:hover .btn-box {
display: block;
}
.desktop_7 .imageContainer {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.desktop_7 .project {
position: relative;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
}
.desktop_7 .overlay {
position: fixed;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgba(71, 69, 69, 0.7);
height: 100%;
width: 100%;
max-height: 100%;
top: 0px;
left: 0px;
z-index: 100;
display: none;
}
.desktop_7 .overlay-inner {
top: 50%;
right: 0px;
bottom: 0px;
left: 50%;
transform: translate(-50%, -50%);
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: white;
padding-top: 25px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
position: relative;
opacity: 1;
width: fit-content;
max-width: 50%;
max-height: 85%;
}
.desktop_7 .close {
position: absolute;
top: 3px;
right: 10px;
background-image: none;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
outline-color: initial;
outline-style: initial;
outline-width: 0px;
color: #474545;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: initial;
border-right-style: initial;
border-bottom-style: initial;
border-left-style: initial;
border-top-color: initial;
border-right-color: initial;
border-bottom-color: initial;
border-left-color: initial;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
text-transform: uppercase;
letter-spacing: 2px;
}
.desktop_7 .overlay-inner .hdImgs {
width: fit-content;
height: calc(85% - 55px);
/* display: flex; */
}
.desktop_7 .overlay-inner img {
max-height: 100%;
max-width: 100%;
transform: none;
}
.desktop_7 .squareImg.one {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.desktop_7 .squareImg.two {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.desktop_7 .squareImg.three {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.desktop_7 .squareImg.four {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.desktop_7 .squareImg.five {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
@media (max-width: 1024px) {
.desktop_7 .Container {
width: 690px;
}
.desktop_7 .squareImg {
width: 170px;
height: 170px;
}
.desktop_7 .squareImg.one {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .squareImg.two {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .squareImg.three {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .squareImg.four {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .squareImg.five {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .overlay-inner {
/* margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px; */
padding-top: 25px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
max-width: 80%;
}
.desktop_7 .close {
font-size: 14px;
top: 2px;
right: 5px;
}
.desktop_7 .overlay {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}
}
@media (max-width: 768px) {
.desktop_7 .squareImg {
width: 225px;
height: 225px;
}
.desktop_7 .responsive-container-block.Container {
max-width: 450px;
}
.desktop_7 .responsive-container-block.optionsContainer {
max-width: 380px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.desktop_7 .text-blk.list {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.desktop_7 .text-blk.list.all.active {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.desktop_7 .text-blk.headingText {
text-align: center;
}
.desktop_7 .text-blk.list {
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.desktop_7 .text-blk.list.all.active {
margin-top: 0px;
margin-right: 14.4219px;
margin-bottom: 10px;
margin-left: 14.4219px;
}
.desktop_7 .responsive-container-block.bigContainer {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
}
@media (max-width: 500px) {
.desktop_7 .text-blk.list.all.active {
font-size: 12px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;
line-height: 34px;
}
.desktop_7 .text-blk.list {
font-size: 12px;
}
.desktop_7 .responsive-container-block.optionsContainer {
min-height: auto;
}
.desktop_7 .responsive-container-block.imageContainer {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
.desktop_7 .responsive-container-block.optionsContainer {
/* max-width: 330px; */
margin-top: 0px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.desktop_7 .text-blk.list.all.active {
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.desktop_7 .text-blk.list {
font-size: 12px;
margin-top: 0px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.desktop_7 .squareImg {
width: 100%;
height: 25%;
}
.desktop_7 .project {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
width: 100%;
height: 25%;
}
.desktop_7 .overlay-inner {
/* margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto; */
padding-top: 25px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
max-width: 100%;
}
.desktop_7 .overlay {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .responsive-container-block.bigContainer {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.desktop_7 .overlay-inner hdImgs {
width: 90%;
}
}
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap');
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.wk-desk-1 {
width: 8.333333%;
}
.wk-desk-2 {
width: 16.666667%;
}
.wk-desk-3 {
width: 25%;
}
.wk-desk-4 {
width: 33.333333%;
}
.wk-desk-5 {
width: 41.666667%;
}
.wk-desk-6 {
width: 50%;
}
.wk-desk-7 {
width: 58.333333%;
}
.wk-desk-8 {
width: 66.666667%;
}
.wk-desk-9 {
width: 75%;
}
.wk-desk-10 {
width: 83.333333%;
}
.wk-desk-11 {
width: 91.666667%;
}
.wk-desk-12 {
width: 100%;
}
@media (max-width: 1024px) {
.wk-ipadp-1 {
width: 8.333333%;
}
.wk-ipadp-2 {
width: 16.666667%;
}
.wk-ipadp-3 {
width: 25%;
}
.wk-ipadp-4 {
width: 33.333333%;
}
.wk-ipadp-5 {
width: 41.666667%;
}
.wk-ipadp-6 {
width: 50%;
}
.wk-ipadp-7 {
width: 58.333333%;
}
.wk-ipadp-8 {
width: 66.666667%;
}
.wk-ipadp-9 {
width: 75%;
}
.wk-ipadp-10 {
width: 83.333333%;
}
.wk-ipadp-11 {
width: 91.666667%;
}
.wk-ipadp-12 {
width: 100%;
}
}
@media (max-width: 768px) {
.wk-tab-1 {
width: 8.333333%;
}
.wk-tab-2 {
width: 16.666667%;
}
.wk-tab-3 {
width: 25%;
}
.wk-tab-4 {
width: 33.333333%;
}
.wk-tab-5 {
width: 41.666667%;
}
.wk-tab-6 {
width: 50%;
}
.wk-tab-7 {
width: 58.333333%;
}
.wk-tab-8 {
width: 66.666667%;
}
.wk-tab-9 {
width: 75%;
}
.wk-tab-10 {
width: 83.333333%;
}
.wk-tab-11 {
width: 91.666667%;
}
.wk-tab-12 {
width: 100%;
}
}
@media (max-width: 500px) {
.wk-mobile-1 {
width: 8.333333%;
}
.wk-mobile-2 {
width: 16.666667%;
}
.wk-mobile-3 {
width: 25%;
}
.wk-mobile-4 {
width: 33.333333%;
}
.wk-mobile-5 {
width: 41.666667%;
}
.wk-mobile-6 {
width: 50%;
}
.wk-mobile-7 {
width: 58.333333%;
}
.wk-mobile-8 {
width: 66.666667%;
}
.wk-mobile-9 {
width: 75%;
}
.wk-mobile-10 {
width: 83.333333%;
}
.wk-mobile-11 {
width: 91.666667%;
}
.wk-mobile-12 {
width: 100%;
}
}
.about-img {
width: 80%;
}
.blog-modal-img {
text-align: -webkit-center;
}
.brand-active .slick-slide img {
max-width: 150px;
/* Adjust this value as needed */
height: auto;
margin: 0 auto;
object-fit: contain;
}
.clients-item-height {
max-width: 12%;
}
/* Responsive image sizes */
@media (max-width: 1025px) {
.brand-active .slick-slide img {
max-width: 120px;
}
.clients-item-height {
max-width: 50%;
}
}
@media (max-width: 991px) {
.brand-active .slick-slide img {
max-width: 120px;
}
.clients-item-height {
max-width: 25%;
}
}
@media (max-width: 767px) {
.brand-active .slick-slide img {
max-width: 120px;
}
.clients-item-height {
max-width: 50%;
}
}
@media (max-width: 480px) {
.brand-active .slick-slide img {
max-width: 120px;
}
.clients-item-height {
max-width: 50%;
}
}
.swiper-container {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-wrapper {
display: flex;
align-items: center;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
height: auto;
/* السماح بارتفاع ديناميكي */
text-align: center;
border-radius: 8px !important;
}
.facebook-reel {
width: 320px;
height: 550px;
border: none;
overflow: hidden;
border-radius: 8px;
}
.fb-video {
width: 100%;
/* Make videos responsive */
height: auto;
border-radius: 8px;
}
@media (min-width: 1025px) {
.fb-video {
width: 400px;
/* Desktop video width */
}
}
@media (max-width: 1024px) and (min-width: 768px) {
.fb-video {
width: 300px;
/* Tablet video width */
}
}
@media (max-width: 767px) {
.fb-video {
width: 500px;
/* Mobile video width */
height: 550px;
}
}
.k-footer {
background: #25262f;
}
.k-footer a {
color: #0056b3;
text-decoration: underline;
}
.k-footer a:hover {
color: #0056b3;
text-decoration: underline;
}
.k-footer p,
h4 {
color: #f0f2f5;
font-weight: 400;
}
.brand-slider img {
max-width: 100%;
height: auto;
}
.header-logo img {
max-width: 50%;
}
@media (max-width: 767px) {
.header-logo img {
max-width: 50%;
}
}
.brand-slider-center img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.social-link{
font-size: 28px;
}
.social {
/* width: 42px; */
border-radius: 50%;
color: #fff;
}