/*-----------------------------------------------------------------------------------

  Template Name: Pexan - Design Agency HTML Template
  Author: Oclata
  Support: etorisoft@gmail.com
  Description: Pexan - Design Agency HTML Template
  Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

-----------------
  01. THEME CSS
-----------------
  1.1 Theme Default
  1.2 Common Classes
  1.3 Default Spacing

-----------------
  02. COMPONENTS css
-----------------
  2.1 Accordion
  2.2 Animated Headline
  2.3 Animation
  2.4 Background
  2.5 Back to Top 
  2.6 Breadcrumb
  2.7 Buttons
  2.8 Cursor Style
  2.9 Hover Animation
  2.10 Offcanvas
  2.11 Pagination
  2.12 Search
  2.15 Section Title
  2.16 Custom Animation
-----------------

  03. HEADER CSS
-----------------
  3.1 Header Style 1
  3.2 Header Style 2
  3.3 Header Style 3
  3.4 Header Style 4
  3.5 Header Style 5
  3.6 Header Style 6

  ---------------------------------
04. MENU CSS
---------------------------------
  4.1 Menu css

---------------------------------
05. BLOG CSS
---------------------------------
  5.1 Postbox css
  5.2 Recent Post css
  5.3 Sidebar css
  5.4 Blog css

---------------------------------
06. FOOTER CSS
---------------------------------
  6.1 Footer Style 1
  6.2 Footer Style 2
  6.3 Footer Style 3
  6.4 Footer Style 4
  6.5 Footer Style 5

---------------------------------
07. INNER SECTION CSS
---------------------------------
7.1 Hero css
7.2 Slider css
7.3 Service css
7.4 About css
7.5 Award css
7.6 Testimonial css
7.7 Text Slider css
7.8 Works css
7.9 Brand css
8.0 Contact css
8.1 Portfolio css
8.2 Price css
8.3 Funfact css
8.4 Skils css
8.5 Chooseus css
8.6 Progress css
8.7 Contact css
8.8 Features css
8.9 Contact css
9.0 CTA css
9.1 Working process css
9.2 Team details css
9.3 Service details css
9.4 Project details css
9.5 Error css

**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
@import url('../fonts/Qurova/qurova.css');
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Manrope:wght@200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

.tp-search-area {
-webkit-transition: all 0.3s 0s ease-out;
-moz-transition: all 0.3s 0s ease-out;
-ms-transition: all 0.3s 0s ease-out;
-o-transition: all 0.3s 0s ease-out;
transition: all 0.3s 0s ease-out;
}

.back-to-top-wrapper,
a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
-webkit-transition: all 0.3s 0s ease-out;
-moz-transition: all 0.3s 0s ease-out;
-ms-transition: all 0.3s 0s ease-out;
-o-transition: all 0.3s 0s ease-out;
transition: all 0.3s 0s ease-out;
}

.back-to-top-btn {
-webkit-transition: transform 0.3s 0s ease-out;
-moz-transition: transform 0.3s 0s ease-out;
-ms-transition: transform 0.3s 0s ease-out;
-o-transition: transform 0.3s 0s ease-out;
transition: transform 0.3s 0s ease-out;
}

.tp-all-font-roboto *:not(i) {
font-family: var(--tp-ff-roboto);
}



/* transform */
:root {
/**
@font family declaration
*/
--tp-ff-body: "Qurova", sans-serif;
--tp-ff-heading: "Plus Jakarta Sans", sans-serif;
--tp-ff-p: "Manrope", sans-serif;
--tp-ff-Epilogue: "Epilogue", sans-serif;
--tp-ff-fontawesome: "Font Awesome 6 Pro";
/**
@color declaration
*/
--tp-common-white: #FFFFFF;
--tp-common-black: #000000;
--tp-common-black-2: #060606;
--tp-common-black-3: #222;
--tp-title-black: #000;
--tp-theme-primary: #BFF747;
--tp-text-body: #AAA4A4;
--tp-border-primary: #22232c;
--tp-border-secondary: #5C5C5C;
--tp-border-third: #D9D9D9;
--tp-grey-1: #3b3b3b;
--tp-grey-2: #858585;
--tp-grey-3: #59595c;
--tp-grey-bg: #1a1a1a;

}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1350px;
--bs-gutter-x: 30px;
}

.container-1310 {
max-width: 1340px;
--bs-gutter-x: 30px;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/*---------------------------------
typography css start 
---------------------------------*/
body {
font-size: 18px;
line-height: 26px;
font-weight: normal;
color: var(--tp-text-body);
font-family: var(--tp-ff-body);
overflow-x: hidden;
background-color: var(--tp-common-black);
}

a {
text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0px;
font-weight: 500;
line-height: 1.2;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
-ms-transition: color 0.3s ease-out;
-o-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
color: var(--tp-common-white);
font-family: var(--tp-ff-heading);
}

h1 {
font-size: 40px;
}

h2 {
font-size: 36px;
}

h3 {
font-size: 28px;
}

h4 {
font-size: 24px;
}

h5 {
font-size: 20px;
}

h6 {
font-size: 16px;
}

ul {
margin: 0px;
padding: 0px;
}

p {
font-family: var(--tp-ff-p);
font-size: 18px;
font-weight: 400;
color: var(--tp-text-body);
margin-bottom: 15px;
line-height: 28px;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}

a:focus,
.button:focus {
text-decoration: none;
outline: none;
}

a:focus,
a:hover {
color: inherit;
text-decoration: none;
}

a,
button {
color: inherit;
outline: none;
border: none;
background: transparent;
}

button:hover {
cursor: pointer;
}

button:focus {
outline: 0;
}

.uppercase {
text-transform: uppercase;
}

.capitalize {
text-transform: capitalize;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
outline: none;
background-color: #fff;
height: 56px;
width: 100%;
line-height: 56px;
font-size: 14px;
color: var(--tp-common-black);
padding-left: 26px;
padding-right: 26px;
border: 1px solid #E0E2E3;
}

input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #95999D;
}

input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder {
/* Firefox 19+ */
color: #95999D;
}

input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder {
/* Firefox 4-18 */
color: #95999D;
}

input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
/* IE 10+  Edge*/
color: #95999D;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder {
/* MODERN BROWSER */
color: #95999D;
}

[dir=rtl] input[type=text],
[dir=rtl] input[type=email],
[dir=rtl] input[type=tel],
[dir=rtl] input[type=number],
[dir=rtl] input[type=password],
[dir=rtl] input[type=url],
[dir=rtl] textarea {
text-align: right;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
border-color: var(--tp-common-black);
}

input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
opacity: 0;
}

textarea {
line-height: 1.4;
padding-top: 17px;
padding-bottom: 17px;
}

input[type=color] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: none;
border: 0;
cursor: pointer;
height: 100%;
width: 100%;
padding: 0;
border-radius: 50%;
}

*::-moz-selection {
background: var(--tp-common-black);
color: var(--tp-common-white);
text-shadow: none;
}

::-moz-selection {
background: var(--tp-common-black);
color: var(--tp-common-white);
text-shadow: none;
}

::selection {
background: var(--tp-common-black);
color: var(--tp-common-white);
text-shadow: none;
}

*::-moz-placeholder {
color: var(--tp-common-black);
font-size: 14px;
opacity: 1;
}

*::placeholder {
color: var(--tp-common-black);
font-size: 14px;
opacity: 1;
}

.z-index-2 {
position: relative;
z-index: 2;
}

.z-index-3 {
position: relative;
z-index: 3;
}


.tp-space {
padding-top: 120px;
padding-bottom: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
.tp-space {
  padding-top: 80px;
  padding-bottom: 80px;
}
}

.tp-space-top {
padding-top: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
.tp-space-top {
  padding-top: 80px;
}
}

.tp-space-bottom {
padding-bottom: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
.tp-space-bottom {
  padding-bottom: 80px;
}
}



/*----------------------------------------*/
/*  8.9 Contact css
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-contact-area {
  padding-bottom: 60px;
}
}

@media only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-area {
  padding-top: 70px;
  padding-bottom: 50px;
}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-contact-wrapper {
  padding-right: 60px;
}
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-wrapper {
  padding-right: 0;
}
}

.tp-contact-section-wrapper .tp-section__title {
margin-bottom: 15px;
}

.tp-contact-section-wrapper p {
font-size: 20px;
line-height: 25px;
color: #000D44;
}

.tp-contact-list-icon {
background: var(--tp-common-black-3);
border-radius: 10px;
height: 70px;
width: 70px;
text-align: center;
line-height: 4;
margin-right: 20px;
}

.tp-contact-list-content span {
font-size: 16px;
line-height: 22px;
letter-spacing: -0.04em;
display: block;
padding-bottom: 5px;
}

.tp-contact-list-content p {
font-size: 18px;
line-height: 22px;
letter-spacing: -0.01em;
color: var(--tp-common-white);
}

.tp-contact__form {
background: var(--tp-common-black-3);
border-radius: 10px;
padding: 65px 50px 52px;
}

@media only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact__form {
  padding: 60px 30px 50px;
}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact__form {
  margin-left: 0;
}
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact__from-breadcrumb.contact-from {
  margin-left: 0;
}
}

.tp-contact__form-breadcrumb {
background: #F8F8F8;
border-radius: 10px;
padding: 65px 50px 52px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact__form-breadcrumb {
  margin-left: 0;
}
}

@media only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact__form-breadcrumb {
  padding: 60px 20px 20px;
}
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact__form-breadcrumb.team-details {
  margin-left: 0;
}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact__form-breadcrumb.about-us {
  margin-left: 0;
}
}

.tp-contact__input {
margin-bottom: 20px;
}

.tp-contact__input input,
.tp-contact__input textarea {
background: var(--tp-common-black);
border-radius: 10px;
width: 100%;
height: 60px;
border: 1px solid var(--tp-grey-3);
color: var(--tp-common-white);
outline: 0;
resize: none;
padding: 0 25px;
}

.tp-contact__input input::-webkit-input-placeholder,
.tp-contact__input textarea::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 14px;
color: var(--tp-heading-primary);
opacity: 0.5;
}

.tp-contact__input input::-moz-placeholder,
.tp-contact__input textarea::-moz-placeholder {
/* Firefox 19+ */
font-size: 14px;
color: var(--tp-heading-primary);
opacity: 0.5;
}

.tp-contact__input input:-moz-placeholder,
.tp-contact__input textarea:-moz-placeholder {
/* Firefox 4-18 */
font-size: 14px;
color: var(--tp-heading-primary);
opacity: 0.5;
}

.tp-contact__input input:-ms-input-placeholder,
.tp-contact__input textarea:-ms-input-placeholder {
/* IE 10+  Edge*/
font-size: 14px;
color: var(--tp-heading-primary);
opacity: 0.5;
}

.tp-contact__input input::placeholder,
.tp-contact__input textarea::placeholder {
/* MODERN BROWSER */
font-size: 14px;
color: var(--tp-heading-primary);
opacity: 0.5;
}

.tp-contact__input input:focus,
.tp-contact__input textarea:focus {
border-color: #ffff;
color: var(--tp-common-white);
}

.tp-contact__input input:focus::placeholder,
.tp-contact__input textarea:focus::placeholder {
opacity: 0;
}

.tp-contact__input textarea {
width: 100%;
height: 210px;
padding-top: 25px;
}

.tp-contact__btn {
background: #ffff;
display: inline-block;
color: var(--tp-common-black);
padding: 20px 40px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
}

.tp-contact__btn:hover {
background: var(--tp-common-white);

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-contact-section-wrapper-breadcrumb {
  margin-bottom: 30px;
}
}

.tp-contact-section-wrapper-breadcrumb p {
font-size: 16px;
}

.tp-contact-icons a {
position: relative;
display: inline-block;
background: #FFFFFF;
border: 1px solid #EAEAEF;
border-radius: 5px;
height: 58px;
width: 58px;
line-height: 3.2;
text-align: center;
color: #000D44;
margin-right: 2px;
transition: 0.3s ease;
font-size: 18px;
z-index: 1;
margin-bottom: 10px;
}

.tp-contact-icons a:hover {
color: var(--tp-common-white);
}

.tp-contact-icons a:hover::before {
opacity: 1;
}

.tp-contact-icons a::before {
position: absolute;
content: "";
width: 100%;
background: linear-gradient(180deg, #00EEFF 0%, #003CFF 100%);
top: 0;
left: 0;
height: 100%;
border-radius: 5px;
opacity: 0;
color: var(--tp-common-white);
transition: 0.3s ease;
z-index: -1;
}

.tp-contact-details {
background: #F8F8F8;
border-radius: 20px;
padding: 58px 100px 50px 60px;
}

@media only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-details {
  padding: 50px 15px 50px 10px;
}
}

.tp-contact-details li {
list-style: none;
position: relative;
padding-left: 50px;
border-bottom: 1px dashed #50413C;
margin-bottom: 30px;
padding-bottom: 26px;
}

@media only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-details li {
  padding-left: 28px;
}
}

.tp-contact-details li:last-child {
border: none;
margin-bottom: 0;
padding-bottom: 0;
}

.tp-contact-details li a {
font-weight: 500;
font-size: 22px;
line-height: 29px;
color: #000D44;
}

@media only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-details li a {
  font-size: 20px;
}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-details li a br {
  display: none;
}
}

.tp-contact-details li a i {
position: absolute;
font-weight: 400;
font-size: 22px;
left: 0;
top: 5px;
background: linear-gradient(180deg, #00EEFF 0%, #003CFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-map {
  margin-bottom: 40px;
}
}

.tp-contact-map iframe {
width: 536px;
height: 424px;
border-radius: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-map iframe {
  width: 100%;
}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 270px) and (max-width: 575px) {
.tp-contact-about-us-area {
  padding-top: 30px;
}
}





.foot-media img {
width: var(--px20);
height: auto;
object-fit: contain;
aspect-ratio: 1/1;
filter: invert(89%) sepia(91%) saturate(7%) hue-rotate(183deg) brightness(109%) contrast(97%);


}